/* The rebuilt marketing pages: tokens and the pieces both templates share.

   Everything is scoped under .mk-main or prefixed mk-/tone- so it cannot reach
   the header, footer or contact form, which keep their own stylesheets and are
   not this file's to restyle. */

.mk {
  --mk-ink: #0C1B3A;
  --mk-navy: #081830;
  --mk-blue: #1F6FE5;
  --mk-blue-deep: #1558C4;
  --mk-blue-bright: #4A93FF;
  --mk-sky: #E8F1FC;
  --mk-tint: #F5F8FE;
  --mk-line: #E2E9F2;
  --mk-body: #55677E;
  --mk-muted: #7F90A6;
  --mk-on-dark: #C3D1E6;
  --mk-on-dark-muted: #9DB0CB;
  --mk-glass: rgba(8, 21, 42, 0.84);
  --mk-glass-line: rgba(143, 182, 255, 0.24);
  --mk-wide: 1200px;
  --mk-gutter: clamp(16px, 4vw, 40px);
  --mk-radius: 12px;
  margin: 0;
  background: #FFFFFF;
  color: var(--mk-ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.mk-main, .mk-main *, .mk-main *::before, .mk-main *::after { box-sizing: border-box; }
.mk-main img { max-width: 100%; display: block; }
.mk-main a:focus-visible { outline: 3px solid var(--mk-blue-bright); outline-offset: 3px; border-radius: 6px; }

.tone-blue { --tone: #1F6FE5; }
.tone-green { --tone: #1E9E5A; }
.tone-amber { --tone: #E09B0B; }
.tone-red { --tone: #E0464B; }
.tone-purple { --tone: #7B5CF0; }
.tone-orange { --tone: #EC7324; }
.tone-teal { --tone: #0E9E9E; }
.tone-slate { --tone: #7C8CA3; }

.mk-wrap { max-width: var(--mk-wide); margin-inline: auto; padding-inline: var(--mk-gutter); }
.mk-section { padding-block: clamp(48px, 7vw, 88px); }
.mk-section.is-tint { background: var(--mk-tint); }
.mk-section.is-dark { background: var(--mk-navy); color: #FFFFFF; }
/* Two sections on the same ground would read as one long one. */
.mk-section.is-dark + .mk-section.is-dark { border-top: 1px solid var(--mk-glass-line); }
.mk-section.is-tint + .mk-section.is-tint, .mk-section.is-light + .mk-section.is-light { border-top: 1px solid var(--mk-line); }
.mk-stack { display: grid; gap: 20px; }

.mk-kicker { margin: 0 0 12px; color: var(--mk-blue); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.is-dark .mk-kicker, .mk-poster .mk-kicker { color: var(--mk-blue-bright); }
.mk-h1 { margin: 0; font-size: clamp(34px, 4.6vw, 56px); font-weight: 800; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.mk-h2 { margin: 0; font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.mk-line { display: block; }
.mk-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mk-accent { color: var(--mk-blue); }
.mk-lede, .mk-sub { text-wrap: pretty; }
.mk-lede { max-width: 60ch; margin: 16px 0 0; color: var(--mk-body); font-size: clamp(16px, 1.45vw, 18.5px); line-height: 1.55; }
.is-dark .mk-lede { color: var(--mk-on-dark); }
.mk-head { max-width: 780px; margin-bottom: clamp(28px, 4vw, 44px); }
.mk-head.is-center { margin-inline: auto; text-align: center; }
.mk-head.is-center .mk-lede { margin-inline: auto; }
.mk-fineprint { margin: 0; color: var(--mk-muted); font-size: 12.5px; }

.mk-ic { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.mk-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.mk-actions.is-center, .mk-actions.is-center .mk-actions { justify-content: center; }
.mk-actions.is-center .mk-actions { margin-top: 0; }
.mk-center { text-align: center; }
.mk-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1.5px solid var(--mk-blue); border-radius: 8px; font-size: 16px; font-weight: 600; text-decoration: none; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.mk-btn .mk-ic { width: 18px; height: 18px; }
.mk-btn-primary { background: var(--mk-blue); color: #FFFFFF; }
.mk-btn-primary:hover { background: var(--mk-blue-deep); border-color: var(--mk-blue-deep); }
.mk-btn-outline { background: #FFFFFF; color: var(--mk-blue); }
.mk-btn-outline:hover { background: var(--mk-sky); }
.is-dark .mk-btn-outline, .mk-poster .mk-btn-outline { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.55); }
.mk-textlink { color: var(--mk-blue); font-weight: 600; text-underline-offset: 3px; }

.mk-tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #FFFFFF; background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 72%, #FFFFFF), var(--tone)); }
.mk-tile .mk-ic { width: 22px; height: 22px; }
.mk-dot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tone); color: #FFFFFF; }
.mk-dot .mk-ic { width: 13px; height: 13px; stroke-width: 2.8; }

.mk-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.mk-pill { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--tone) 70%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--tone) 12%, transparent); color: var(--tone); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.mk-poster .mk-pill, .is-dark .mk-pill { color: color-mix(in srgb, var(--tone) 55%, #FFFFFF); }

.mk-checks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mk-checks li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.mk-checks .mk-ic { width: 20px; height: 20px; color: var(--tone); }

.mk-split { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.mk-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mk-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
:is(ul, ol):is(.mk-cols-2, .mk-cols-3) { margin: 0; padding: 0; list-style: none; }

.mk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.mk-card { padding: 24px; border: 1px solid var(--mk-line); border-radius: var(--mk-radius); background: #FFFFFF; }
.mk-card h3 { margin: 16px 0 6px; font-size: 17px; }
.mk-card p { margin: 0; color: var(--mk-body); font-size: 15px; line-height: 1.5; }
.is-dark .mk-card { border-color: var(--mk-glass-line); background: rgba(255, 255, 255, 0.04); }
.is-dark .mk-card p { color: var(--mk-on-dark-muted); }

.mk-artwork { margin: 0; }
.mk-artwork img { width: 100%; height: auto; border-radius: var(--mk-radius); box-shadow: 0 28px 60px -34px rgba(12, 27, 58, 0.5); }

.mk-quote { margin: 0; }
.mk-quote blockquote { position: relative; margin: 0; padding-left: 46px; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.45; }
.mk-quote blockquote::before { content: "\201C"; position: absolute; left: 0; top: -14px; color: var(--mk-blue); font-size: 64px; font-weight: 800; line-height: 1; }
.mk-quote figcaption { margin-top: 10px; padding-left: 46px; color: var(--mk-blue); font-size: 14px; font-weight: 600; }
.is-dark .mk-quote figcaption, .mk-poster .mk-quote figcaption { color: var(--mk-blue-bright); }

@media (max-width: 960px) {
  .mk-split, .mk-cols-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mk-cols-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .mk-main *, .mk-main *::before, .mk-main *::after { transition: none !important; animation: none !important; }
}