/*
 * onlms marketing pages (layouts/marketing): the public landing, features, pricing, security and contact pages.
 * Additions to Tabler 1.4; every class starts with "mk-".
 *
 * The product illustrations (.mk-window) are drawn with HTML and CSS, because the CSP allows no external images.
 * They scale like screenshots: .mk-window is a size container, and inside .mk-window-inner every length is in em
 * while the font size is the window width divided by --mk-em (the illustration's design width in em).
 */

/* ------------------------------------------------------------------ Base */

.marketing {
    --mk-ink: #0a1020;
    --mk-ink-2: #0f1830;
    --mk-surface: #f5f7fb;
    --mk-border: #e4e9f1;
    --mk-text: #111827;
    --mk-muted: #556074;
    --mk-on-dark: #f8fafc;
    --mk-on-dark-muted: #a7b2c6;
    --mk-blue: #066fd1;
    --mk-sky: #7cc0ff;
    --mk-gradient: linear-gradient(100deg, #5aa9ff 0%, #9b8cff 52%, #3ddbbf 100%);
    --mk-radius: 1rem;
    --mk-radius-lg: 1.5rem;
    --mk-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.05);
    --mk-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 22px 44px -18px rgba(15, 23, 42, 0.24);
    --mk-shadow-lg: 0 44px 90px -32px rgba(2, 8, 23, 0.6);
    /* Tabler gives body height: 100%; the sticky header needs a body as tall as the page. */
    height: auto;
    background: #fff;
    color: var(--mk-text);
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tabler pads containers by only 0.5rem on small screens; rows with g-4 / g-5 gutters need 1rem. */
.marketing .container-xl {
    --tblr-gutter-x: 2.5rem;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

.marketing [id] {
    scroll-margin-top: 5.5rem;
}

.marketing a:focus-visible,
.marketing summary:focus-visible,
.marketing .btn:focus-visible {
    outline: 2px solid var(--mk-sky);
    outline-offset: 3px;
}

.mk-skip {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1100;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: #fff;
    color: var(--mk-text);
    box-shadow: var(--mk-shadow);
}

.mk-gradient-text {
    background: var(--mk-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* ------------------------------------------------------------------ Buttons and links */

.marketing .btn {
    --tblr-btn-font-weight: 600;
    --tblr-btn-border-radius: 0.625rem;
}

.marketing .btn-lg {
    --tblr-btn-padding-y: 0.8125rem;
    --tblr-btn-padding-x: 1.5rem;
    --tblr-btn-border-radius: 0.75rem;
}

.marketing .btn-primary {
    box-shadow: 0 10px 24px -10px rgba(6, 111, 209, 0.8);
}

.mk-btn-ghost {
    --tblr-btn-color: #fff;
    --tblr-btn-bg: rgba(255, 255, 255, 0.06);
    --tblr-btn-border-color: rgba(255, 255, 255, 0.18);
    --tblr-btn-hover-color: #fff;
    --tblr-btn-hover-bg: rgba(255, 255, 255, 0.12);
    --tblr-btn-hover-border-color: rgba(255, 255, 255, 0.32);
    --tblr-btn-active-color: #fff;
    --tblr-btn-active-bg: rgba(255, 255, 255, 0.16);
    --tblr-btn-active-border-color: rgba(255, 255, 255, 0.32);
    --tblr-btn-box-shadow: none;
}

.mk-btn-outline {
    --tblr-btn-color: var(--mk-text);
    --tblr-btn-bg: #fff;
    --tblr-btn-border-color: #d3dbe6;
    --tblr-btn-hover-color: var(--mk-text);
    --tblr-btn-hover-bg: var(--mk-surface);
    --tblr-btn-hover-border-color: #b8c4d4;
    --tblr-btn-active-color: var(--mk-text);
    --tblr-btn-active-bg: #eef2f7;
    --tblr-btn-active-border-color: #b8c4d4;
}

.mk-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 2rem;
    color: var(--mk-blue);
    font-weight: 600;
    text-decoration: none;
}

.mk-link .ti {
    transition: transform 0.2s ease;
}

.mk-link:hover {
    color: var(--mk-blue);
    text-decoration: none;
}

.mk-link:hover .ti {
    transform: translateX(3px);
}

.mk-link--light,
.mk-link--light:hover {
    color: var(--mk-sky);
}

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

.mk-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(10, 16, 32, 0.84);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.mk-header.is-scrolled {
    background: rgba(10, 16, 32, 0.95);
    box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.6);
}

.mk-header .navbar {
    min-height: 4.25rem;
    padding: 0.625rem 0;
    background: transparent;
    box-shadow: none;
}

.mk-brand .brand-name {
    color: #fff;
}

.mk-header .navbar-toggler {
    padding: 0.375rem 0.5rem;
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 1.375rem;
}

.mk-header .navbar-nav .nav-link {
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.mk-header .navbar-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.mk-header .navbar-nav .nav-link.active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.mk-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (min-width: 992px) {
    .mk-nav {
        gap: 0.125rem;
        margin: 0 auto;
    }
}

@media (max-width: 991.98px) {
    .mk-header .navbar-collapse {
        padding: 0.75rem 0 1rem;
    }

    .mk-nav {
        margin-bottom: 1rem;
    }

    .mk-nav-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ------------------------------------------------------------------ Sections and type */

.mk-section {
    position: relative;
    padding: clamp(4.5rem, 9vw, 7.5rem) 0;
}

.mk-section--compact {
    padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.mk-section--muted {
    background: var(--mk-surface);
}

.mk-section--dark {
    overflow: hidden;
    background: var(--mk-ink);
    color: var(--mk-on-dark-muted);
    isolation: isolate;
}

.mk-section-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(40rem 26rem at 0% 0%, rgba(6, 111, 209, 0.32), transparent 65%),
        radial-gradient(36rem 26rem at 100% 100%, rgba(124, 92, 255, 0.26), transparent 65%);
}

.mk-section-head {
    max-width: 46rem;
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}

.mk-section-head--start {
    margin-left: 0;
    text-align: left;
}

.mk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--mk-blue);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mk-eyebrow .ti {
    font-size: 1.125rem;
}

.mk-section--dark .mk-eyebrow,
.mk-hero .mk-eyebrow,
.mk-page-hero .mk-eyebrow {
    color: var(--mk-sky);
}

.mk-title {
    margin: 0 0 1.125rem;
    color: var(--mk-text);
    font-size: clamp(1.875rem, 3.6vw, 2.875rem);
    font-weight: 700;
    letter-spacing: -0.028em;
    line-height: 1.12;
    text-wrap: balance;
}

.mk-section--dark .mk-title {
    color: #fff;
}

.mk-lead {
    margin: 0;
    color: var(--mk-muted);
    font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
    line-height: 1.65;
}

.mk-section--dark .mk-lead {
    color: var(--mk-on-dark-muted);
}

.mk-split + .mk-split {
    margin-top: clamp(5rem, 10vw, 8rem);
}

.mk-checklist {
    display: grid;
    gap: 0.875rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

.mk-checklist li {
    display: flex;
    gap: 0.75rem;
    line-height: 1.5;
}

.mk-check {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.0625rem;
    border-radius: 50%;
    background: rgba(6, 111, 209, 0.1);
    color: var(--mk-blue);
    font-size: 0.875rem;
}

/* ------------------------------------------------------------------ Landing hero */

.mk-hero {
    position: relative;
    padding: clamp(4rem, 9vw, 6.5rem) 0 0;
    overflow: hidden;
    color: var(--mk-on-dark-muted);
    isolation: isolate;
}

.mk-hero-bg,
.mk-page-hero {
    background:
        radial-gradient(48rem 28rem at 12% -6%, rgba(6, 111, 209, 0.55), transparent 62%),
        radial-gradient(40rem 26rem at 92% 6%, rgba(124, 92, 255, 0.4), transparent 62%),
        radial-gradient(36rem 22rem at 50% 110%, rgba(20, 194, 163, 0.2), transparent 70%),
        var(--mk-ink);
}

.mk-hero-bg {
    position: absolute;
    inset: 0 0 min(21vw, 15rem);
    z-index: -1;
}

.mk-hero-bg::after,
.mk-page-hero::after,
.mk-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 0%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 65% at 50% 0%, #000 35%, transparent 100%);
    pointer-events: none;
}

.mk-hero-bg::after {
    z-index: 0;
}

.mk-hero-copy {
    max-width: 54rem;
    margin: 0 auto;
    text-align: center;
}

.mk-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    max-width: 100%;
    margin: 0 0 1.75rem;
    padding: 0.3125rem 0.875rem 0.3125rem 0.3125rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: #dbe5f3;
    font-size: 0.875rem;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

a.mk-pill:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
    text-decoration: none;
}

.mk-pill--static {
    margin: 2rem 0 0;
}

.mk-pill-tag {
    flex-shrink: 0;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--mk-gradient);
    color: var(--mk-ink);
    font-size: 0.75rem;
    font-weight: 700;
}

.mk-display {
    margin: 0 0 1.5rem;
    color: #fff;
    font-size: clamp(2.5rem, 6.4vw, 4.75rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.02;
    text-wrap: balance;
}

.mk-hero-lead {
    max-width: 40rem;
    margin: 0 auto 2.25rem;
    color: var(--mk-on-dark-muted);
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.6;
}

.mk-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.mk-hero-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.75rem;
    margin: 1.75rem 0 0;
    padding: 0;
    color: var(--mk-on-dark-muted);
    font-size: 0.875rem;
    list-style: none;
}

.mk-hero-points .ti {
    margin-right: 0.375rem;
    color: #3ddbbf;
}

.mk-hero-points--boxed {
    gap: 0.75rem;
    margin-top: 2.25rem;
}

.mk-hero-points--boxed li {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    color: #dbe5f3;
}

.mk-hero-points--boxed .ti {
    color: var(--mk-sky);
    font-size: 1.125rem;
}

.mk-hero-visual {
    position: relative;
    max-width: 70rem;
    margin: clamp(3rem, 6vw, 4.5rem) auto 0;
}

.mk-hero-visual::before {
    content: "";
    position: absolute;
    inset: 8% 4% auto;
    height: 60%;
    border-radius: 50%;
    background: var(--mk-gradient);
    opacity: 0.35;
    filter: blur(70px);
}

.mk-float {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.125rem 0.75rem 0.75rem;
    border-radius: 0.875rem;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 24px 48px -18px rgba(2, 8, 23, 0.5), 0 0 0 1px rgba(15, 23, 42, 0.06);
    color: var(--mk-muted);
    font-size: 0.8125rem;
    line-height: 1.35;
    animation: mk-float 7s ease-in-out infinite;
}

.mk-float strong {
    display: block;
    color: var(--mk-text);
    font-weight: 600;
}

.mk-float-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    font-size: 1.25rem;
}

.mk-float--top {
    top: -1.5rem;
    right: -2rem;
}

.mk-float--bottom {
    bottom: 12%;
    left: -2.5rem;
    animation-delay: -3.5s;
}

@media (max-width: 1399.98px) {
    .mk-float--top {
        right: 1rem;
    }

    .mk-float--bottom {
        left: 1rem;
    }
}

@media (max-width: 767.98px) {
    .mk-float {
        display: none;
    }
}

@keyframes mk-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* ------------------------------------------------------------------ Page hero (inner pages) */

.mk-page-hero {
    position: relative;
    padding: clamp(4rem, 9vw, 6.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
    overflow: hidden;
    color: var(--mk-on-dark-muted);
    text-align: center;
    isolation: isolate;
}

/* A hero whose next section (.mk-overlap) pulls its content up over the hero's lower edge. */
.mk-page-hero--overlap {
    padding-bottom: clamp(8rem, 13vw, 10rem);
}

.mk-overlap {
    padding-top: 0;
}

.mk-overlap-body {
    position: relative;
    z-index: 1;
    margin-top: clamp(-7rem, -10vw, -5.5rem);
}

.mk-page-title {
    max-width: 52rem;
    margin: 0 auto 1.25rem;
    color: #fff;
    font-size: clamp(2.25rem, 5.2vw, 3.875rem);
    font-weight: 800;
    letter-spacing: -0.038em;
    line-height: 1.05;
    text-wrap: balance;
}

.mk-page-lead {
    max-width: 40rem;
    margin: 0 auto;
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.6;
}

.mk-anchors {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 2.25rem 0 0;
    padding: 0;
    list-style: none;
}

.mk-anchors a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #dbe5f3;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mk-anchors a:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
}

.mk-anchors .ti {
    color: var(--mk-sky);
    font-size: 1.0625rem;
}

/* ------------------------------------------------------------------ Highlights strip */

.mk-strip {
    padding: 3rem 0 0.5rem;
}

.mk-strip-label {
    margin-bottom: 1.25rem;
    color: var(--mk-muted);
    font-size: 0.875rem;
    text-align: center;
}

.mk-strip-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mk-strip-items li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--mk-border);
    border-radius: 999px;
    background: var(--mk-surface);
    color: #334155;
    font-size: 0.9375rem;
    font-weight: 500;
}

.mk-strip-items .ti {
    color: var(--mk-blue);
    font-size: 1.125rem;
}

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

.mk-card {
    position: relative;
    height: 100%;
    padding: 1.75rem;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    background: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.mk-card:hover {
    border-color: #d2dbe7;
    box-shadow: var(--mk-shadow);
    transform: translateY(-4px);
}

.mk-card--action {
    display: flex;
    flex-direction: column;
}

.mk-card-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-top: auto;
    padding-top: 1.75rem;
}

.mk-card-actions .mk-link {
    margin-top: 0.75rem;
}

.mk-card-title {
    margin: 1.25rem 0 0.5rem;
    color: var(--mk-text);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
}

.mk-card-text {
    margin: 0;
    color: var(--mk-muted);
    font-size: 0.9375rem;
    line-height: 1.65;
}

.mk-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.875rem;
    font-size: 1.5rem;
}

.mk-icon--glass {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    color: var(--mk-sky);
}

/* Product illustrations sit on a soft glow. */
.mk-visual {
    position: relative;
    isolation: isolate;
}

.mk-visual::before {
    content: "";
    position: absolute;
    inset: 12% 8% -6%;
    z-index: -1;
    border-radius: 3rem;
    background: linear-gradient(120deg, #4da3ff, #7c5cff);
    opacity: 0.3;
    filter: blur(56px);
}

.mk-visual--violet::before {
    background: linear-gradient(120deg, #ae3ec9, #7c5cff);
}

.mk-visual--teal::before {
    background: linear-gradient(120deg, #0ca678, #4da3ff);
}

.mk-visual--dark::before {
    background: linear-gradient(120deg, #066fd1, #7c5cff);
    opacity: 0.45;
}

/* ------------------------------------------------------------------ Steps, roles, points, chips */

.mk-steps {
    position: relative;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

@media (min-width: 768px) {
    .mk-steps::before {
        content: "";
        position: absolute;
        top: 1.375rem;
        right: 17%;
        left: 17%;
        border-top: 2px dashed #cdd7e4;
    }
}

.mk-step-num {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--mk-ink);
    box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--mk-border);
    color: #fff;
    font-weight: 700;
}

.mk-step-title {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.1875rem;
    font-weight: 700;
}

.mk-step-text {
    max-width: 20rem;
    margin: 0 auto;
    color: var(--mk-muted);
    line-height: 1.6;
}

.mk-role {
    display: flex;
    flex-direction: column;
}

.mk-role-head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
}

.mk-role-name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.mk-role-kind {
    color: var(--mk-muted);
    font-size: 0.8125rem;
}

.mk-role--custom {
    border-style: dashed;
    border-color: #b9c6d8;
    background: linear-gradient(180deg, #fff, #f7f9fc);
}

.mk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.mk-role .mk-chips {
    margin-top: auto;
    padding-top: 1.25rem;
}

.mk-chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--mk-border);
    border-radius: 999px;
    background: var(--mk-surface);
    color: #3b4659;
    font-size: 0.8125rem;
    font-weight: 500;
}

.mk-chips--lg {
    justify-content: center;
    gap: 0.5rem;
}

.mk-chips--lg li {
    padding: 0.5rem 0.875rem;
    background: #fff;
    font-size: 0.875rem;
}

.mk-chips--lg .ti {
    color: #2fb344;
}

.mk-security-points {
    margin-top: 1.5rem;
}

.mk-point {
    display: flex;
    gap: 1rem;
}

.mk-point h3 {
    margin: 0 0 0.25rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.mk-point p {
    margin: 0;
    color: var(--mk-on-dark-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.mk-point-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    color: var(--mk-sky);
    font-size: 1.25rem;
}

/* ------------------------------------------------------------------ Feature lists (features page) */

.mk-features-list {
    margin-top: clamp(3rem, 6vw, 4.5rem);
}

.mk-feature {
    display: flex;
    gap: 1rem;
    height: 100%;
    padding: 1.375rem;
    border-radius: var(--mk-radius);
    transition: background-color 0.2s ease;
}

.mk-feature:hover {
    background: rgba(6, 111, 209, 0.04);
}

.mk-feature-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--mk-border);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: var(--mk-shadow-sm);
    color: var(--mk-blue);
    font-size: 1.375rem;
}

.mk-feature-title {
    margin: 0 0 0.375rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.mk-feature-text {
    margin: 0;
    color: var(--mk-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.mk-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 1.5rem;
}

.mk-banner > div {
    flex: 1 1 20rem;
}

.mk-banner-title {
    margin: 0 0 0.25rem;
    color: #fff;
    font-size: 1.375rem;
    font-weight: 700;
}

.mk-banner-text {
    margin: 0;
    color: var(--mk-on-dark-muted);
}

.mk-banner--light {
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-surface);
}

.mk-banner--light .mk-banner-title {
    color: var(--mk-text);
}

.mk-banner--light .mk-banner-text {
    color: var(--mk-muted);
}

/* ------------------------------------------------------------------ FAQ */

.mk-faq {
    border-top: 1px solid var(--mk-border);
}

.mk-faq-item {
    border-bottom: 1px solid var(--mk-border);
}

.mk-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.375rem 0;
    color: var(--mk-text);
    font-size: 1.0625rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.mk-faq-item summary::-webkit-details-marker {
    display: none;
}

.mk-faq-item summary .ti {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--mk-surface);
    color: var(--mk-muted);
    transition: transform 0.25s ease, background-color 0.2s ease, color 0.2s ease;
}

.mk-faq-item summary:hover .ti {
    background: rgba(6, 111, 209, 0.1);
    color: var(--mk-blue);
}

.mk-faq-item[open] summary .ti {
    transform: rotate(45deg);
    background: var(--mk-blue);
    color: #fff;
}

.mk-faq-answer {
    max-width: 44rem;
    margin: 0;
    padding: 0 3rem 1.5rem 0;
    color: var(--mk-muted);
    line-height: 1.7;
}

/* ------------------------------------------------------------------ Call to action */

.mk-section--cta {
    padding-top: 0;
}

.mk-section--muted + .mk-section--cta,
.mk-section--dark + .mk-section--cta {
    padding-top: clamp(4.5rem, 9vw, 7.5rem);
}

.mk-cta {
    position: relative;
    padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
    overflow: hidden;
    border-radius: var(--mk-radius-lg);
    background:
        radial-gradient(36rem 22rem at 10% 0%, rgba(6, 111, 209, 0.6), transparent 65%),
        radial-gradient(32rem 22rem at 95% 100%, rgba(124, 92, 255, 0.45), transparent 65%),
        var(--mk-ink);
    text-align: center;
    isolation: isolate;
}

.mk-cta-title {
    max-width: 44rem;
    margin: 0 auto 1rem;
    color: #fff;
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.032em;
    line-height: 1.1;
    text-wrap: balance;
}

.mk-cta-text {
    max-width: 38rem;
    margin: 0 auto 2.25rem;
    color: var(--mk-on-dark-muted);
    font-size: 1.125rem;
    line-height: 1.6;
}

.mk-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

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

.mk-billing-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.mk-billing {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.mk-billing-switch {
    display: inline-flex;
    padding: 0.3125rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.mk-billing-switch label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    color: #dbe5f3;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.mk-billing-input--monthly:checked ~ .mk-pricing-body label[for="mk-billing-monthly"],
.mk-billing-input--yearly:checked ~ .mk-pricing-body label[for="mk-billing-yearly"] {
    background: #fff;
    box-shadow: var(--mk-shadow-sm);
    color: var(--mk-text);
}

.mk-billing-input--monthly:focus-visible ~ .mk-pricing-body label[for="mk-billing-monthly"],
.mk-billing-input--yearly:focus-visible ~ .mk-pricing-body label[for="mk-billing-yearly"] {
    outline: 2px solid var(--mk-sky);
    outline-offset: 2px;
}

.mk-billing-save {
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: rgba(61, 219, 191, 0.18);
    color: #3ddbbf;
    font-size: 0.75rem;
    font-weight: 700;
}

.mk-billing-input--yearly:checked ~ .mk-pricing-body .mk-billing-save {
    background: #dcf5ef;
    color: #0a7c5f;
}

.mk-pricing .mk-when-yearly {
    display: none;
}

.mk-billing-input--yearly:checked ~ .mk-pricing-body .mk-when-yearly {
    display: inline-flex;
}

.mk-billing-input--yearly:checked ~ .mk-pricing-body .mk-when-monthly {
    display: none;
}

.mk-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: #fff;
    box-shadow: var(--mk-shadow);
}

.mk-plan--featured {
    border-color: transparent;
    background:
        radial-gradient(24rem 16rem at 100% 0%, rgba(124, 92, 255, 0.35), transparent 70%),
        var(--mk-ink-2);
    box-shadow: 0 32px 64px -28px rgba(6, 111, 209, 0.65);
    color: var(--mk-on-dark-muted);
}

/* Gradient border of the featured plan. */
.mk-plan--featured::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(--mk-gradient);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.mk-plan-badge {
    position: absolute;
    top: -0.8125rem;
    left: 50%;
    padding: 0.25rem 0.875rem;
    border-radius: 999px;
    background: var(--mk-gradient);
    color: var(--mk-ink);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    transform: translateX(-50%);
}

.mk-plan-name {
    margin: 0 0 0.375rem;
    color: var(--mk-text);
    font-size: 1.25rem;
    font-weight: 700;
}

.mk-plan--featured .mk-plan-name {
    color: #fff;
}

.mk-plan-tagline {
    min-height: 3em;
    margin: 0 0 1.5rem;
    color: var(--mk-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.mk-plan--featured .mk-plan-tagline,
.mk-plan--featured .mk-plan-note,
.mk-plan--featured .mk-price-period {
    color: var(--mk-on-dark-muted);
}

.mk-plan-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
    min-height: 3.5rem;
}

.mk-price {
    display: inline-flex;
    align-items: flex-start;
}

.mk-price-currency {
    margin: 0.375rem 0.125rem 0 0;
    color: var(--mk-text);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.mk-price-amount {
    color: var(--mk-text);
    font-size: 3.25rem;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
}

.mk-plan--featured .mk-price-currency,
.mk-plan--featured .mk-price-amount {
    color: #fff;
}

.mk-price-period {
    color: var(--mk-muted);
    font-size: 0.9375rem;
}

.mk-plan-note {
    min-height: 1.5em;
    margin: 0.625rem 0 1.5rem;
    color: var(--mk-muted);
    font-size: 0.875rem;
}

.mk-plan-list {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--mk-border);
    font-size: 0.9375rem;
}

.mk-plan--featured .mk-plan-list {
    border-color: rgba(255, 255, 255, 0.1);
    color: #dbe5f3;
}

.mk-plan--featured .mk-check {
    background: rgba(124, 192, 255, 0.14);
    color: var(--mk-sky);
}

.mk-plan--featured .mk-plan-list strong {
    color: #fff;
}

.mk-included {
    margin-top: clamp(3rem, 6vw, 4rem);
    text-align: center;
}

.mk-included-title {
    margin-bottom: 1rem;
    color: var(--mk-muted);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mk-compare {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    background: #fff;
    box-shadow: var(--mk-shadow-sm);
}

.mk-compare-table {
    min-width: 40rem;
    margin: 0;
}

.mk-compare-table th,
.mk-compare-table td {
    padding: 1rem 1.25rem;
    border-color: #edf1f6;
    vertical-align: middle;
}

.mk-compare-table thead th {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: var(--mk-text);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.mk-compare-table thead th:not(:first-child),
.mk-compare-table td {
    width: 22%;
    text-align: center;
}

.mk-compare-table tbody th {
    color: var(--mk-text);
    font-weight: 500;
}

.mk-compare-table td {
    color: var(--mk-muted);
    font-size: 0.9375rem;
}

.mk-compare-group th {
    padding-top: 1.75rem;
    background: transparent;
    color: var(--mk-muted) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mk-yes {
    color: #2fb344;
    font-size: 1.25rem;
}

/* ------------------------------------------------------------------ Security page */

.mk-detail-head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mk-detail-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.mk-dots {
    display: grid;
    gap: 0.875rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.mk-dots li {
    position: relative;
    padding-left: 1.375rem;
    color: var(--mk-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.mk-dots li::before {
    content: "";
    position: absolute;
    top: 0.6em;
    left: 0.125rem;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--mk-blue);
    box-shadow: 0 0 0 3px rgba(6, 111, 209, 0.14);
}

/* ------------------------------------------------------------------ Contact page */

.mk-form-card,
.mk-next {
    height: 100%;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: #fff;
    box-shadow: var(--mk-shadow);
}

/* As tall as the card next to it; the thank-you note sits in the middle. */
.mk-form-card {
    display: flex;
    flex-direction: column;
}

.mk-form-title {
    margin: 0 0 0.375rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.mk-form-intro {
    margin: 0 0 1.5rem;
    color: var(--mk-muted);
}

.mk-form .form-label {
    font-size: 0.9375rem;
    font-weight: 600;
}

.mk-form .form-control,
.mk-form .form-select {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    border-radius: 0.625rem;
    font-size: 1rem;
}

.mk-form .form-control {
    padding-right: 0.875rem;
    padding-left: 0.875rem;
}

.mk-form .form-select {
    padding-left: 0.875rem;
}

.mk-form textarea.form-control {
    min-height: 7.5rem;
}

/* The bot trap: off screen and out of the keyboard order, so people never fill it in. */
.mk-hp {
    position: absolute !important;
    top: auto;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.mk-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 0.5rem;
}

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

.mk-thanks {
    margin: auto 0;
    padding: clamp(1rem, 4vw, 2.5rem) 0;
    text-align: center;
}

.mk-thanks .mk-icon {
    margin-bottom: 1.25rem;
}

.mk-thanks-text {
    max-width: 28rem;
    margin: 0.5rem auto 0;
    color: var(--mk-muted);
    line-height: 1.6;
}

.mk-thanks .mk-link {
    margin-top: 1.5rem;
}

.mk-timeline {
    display: grid;
    gap: 1.5rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.mk-timeline li {
    display: flex;
    gap: 1.25rem;
}

.mk-timeline .mk-step-num {
    box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--mk-border);
}

.mk-timeline-title {
    margin: 0.375rem 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.mk-timeline-text {
    margin: 0;
    color: var(--mk-muted);
    line-height: 1.6;
}

.mk-mail-card {
    position: relative;
    margin-top: 2rem;
    padding: 1.5rem;
    overflow: hidden;
    border-radius: var(--mk-radius-lg);
    background:
        radial-gradient(28rem 18rem at 100% 0%, rgba(124, 92, 255, 0.4), transparent 70%),
        radial-gradient(24rem 18rem at 0% 100%, rgba(6, 111, 209, 0.45), transparent 70%),
        var(--mk-ink);
    box-shadow: var(--mk-shadow-lg);
    color: var(--mk-on-dark-muted);
}

.mk-mail-label {
    margin: 1rem 0 0.25rem;
    color: var(--mk-on-dark-muted);
    font-size: 0.9375rem;
}

.mk-mail-address {
    display: inline-block;
    max-width: 100%;
    color: #fff;
    font-size: clamp(1.125rem, 2.2vw, 1.375rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.mk-mail-address:hover {
    color: var(--mk-sky);
    text-decoration: none;
}

/* ------------------------------------------------------------------ Footer */

.mk-footer {
    padding: clamp(3.5rem, 7vw, 5rem) 0 2rem;
    background: var(--mk-ink);
    color: var(--mk-on-dark-muted);
}

.mk-footer-text {
    max-width: 24rem;
    margin: 1rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.65;
}

.mk-footer-title {
    margin: 0.5rem 0 1rem;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mk-footer-links {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mk-footer-links a {
    color: var(--mk-on-dark-muted);
    font-size: 0.9375rem;
    text-decoration: none;
}

.mk-footer-links a:hover {
    color: #fff;
    text-decoration: none;
}

.mk-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.875rem;
}

.mk-footer-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.mk-footer-badges .ti {
    margin-right: 0.25rem;
    color: var(--mk-sky);
}

/* The language links (partials/language-links with dark: true). */
.mk-footer-languages {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: inherit;
}

.mk-footer-languages .fw-medium {
    color: #fff;
}

.mk-text-muted {
    color: var(--mk-on-dark-muted);
}

.mk-link-muted {
    color: var(--mk-on-dark-muted);
    text-decoration: none;
}

.mk-link-muted:hover {
    color: #fff;
    text-decoration: none;
}

/* ------------------------------------------------------------------ Product illustrations */

.mk-window {
    position: relative;
    container-type: inline-size;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--mk-shadow-lg), 0 0 0 1px rgba(15, 23, 42, 0.08);
    text-align: left;
    -webkit-user-select: none;
    user-select: none;
}

.mk-window-inner {
    color: #1f2937;
    font-size: 11px;
    font-size: calc(100cqw / var(--mk-em, 80));
    line-height: 1.4;
}

.mk-window-inner .ti {
    font-size: 1.15em;
    line-height: 1;
}

.mk-window-bar {
    display: grid;
    grid-template-columns: 1fr minmax(0, 2.4fr) 1fr;
    align-items: center;
    height: 3.1em;
    padding: 0 1.2em;
    border-bottom: 1px solid #e5e9f0;
    background: #f3f5f9;
}

.mk-window-dots {
    display: flex;
    gap: 0.5em;
}

.mk-window-dots span {
    width: 0.9em;
    height: 0.9em;
    border-radius: 50%;
    background: #ff5f57;
}

.mk-window-dots span:nth-child(2) {
    background: #febc2e;
}

.mk-window-dots span:nth-child(3) {
    background: #28c840;
}

.mk-window-url {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    padding: 0.35em 1em;
    overflow: hidden;
    border-radius: 0.6em;
    background: #fff;
    box-shadow: inset 0 0 0 1px #e3e8ef;
    color: #6b7280;
    font-size: 0.92em;
    white-space: nowrap;
}

.mk-window--dark {
    background: var(--mk-ink-2);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.mk-window--dark .mk-window-bar {
    border-color: rgba(255, 255, 255, 0.06);
    background: #131e38;
}

.mk-window--dark .mk-window-url {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: none;
    color: #8b97ad;
}

.mk-avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.3em;
    height: 2.3em;
    border-radius: 50%;
    background: #dceafb;
    color: #066fd1;
    font-size: 0.92em;
    font-weight: 700;
}

.mk-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.6em;
    border-radius: 0.4em;
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
}

.mk-badge--blue {
    background: #e0ecfb;
    color: #066fd1;
}

.mk-badge--green {
    background: #dcf5e3;
    color: #1d8a35;
}

.mk-badge--gray {
    background: #eef1f5;
    color: #5b6577;
}

.mk-badge--purple {
    background: #f4e6fa;
    color: #9a2fb8;
}

.mk-bar {
    display: block;
    height: 0.5em;
    overflow: hidden;
    border-radius: 999px;
    background: #e8ecf2;
}

.mk-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #066fd1, #4da3ff);
}

.mk-bar--done > span {
    background: linear-gradient(90deg, #2fb344, #63d47c);
}

.mk-tool {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.45em 0.8em;
    border-radius: 0.5em;
    color: #374151;
    font-weight: 500;
    white-space: nowrap;
}

.mk-tool.is-active {
    background: #e0ecfb;
    color: #066fd1;
}

.mk-tool--end {
    margin-left: auto;
}

.mk-tool--primary {
    background: #066fd1;
    color: #fff;
    font-weight: 600;
}

.mk-tool--outline {
    box-shadow: inset 0 0 0 1px #dfe4ec;
}

.mk-tool-sep {
    width: 1px;
    height: 1.6em;
    margin: 0 0.3em;
    background: #e5e9f0;
}

/* Learner view (landing hero) */

.mk-app {
    display: grid;
    grid-template-columns: 14em minmax(0, 1fr);
}

.mk-app-side {
    padding: 1.5em 1em;
    background: var(--mk-ink-2);
    color: #97a3b9;
}

.mk-app-brand {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin: 0 0.5em 1.8em;
    color: #fff;
    font-size: 1.15em;
    font-weight: 700;
}

.mk-app-brand img {
    width: 1.7em;
    height: 1.7em;
}

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

.mk-app-nav li {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin-bottom: 0.25em;
    padding: 0.65em 0.75em;
    border-radius: 0.55em;
}

.mk-app-nav li.is-active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.mk-app-main {
    padding: 1.8em 2.2em 2.2em;
    background: #f6f8fb;
}

.mk-app-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.6em;
}

.mk-app-pretitle {
    color: #8a94a6;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.mk-app-title {
    color: #111827;
    font-size: 1.65em;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mk-app-card {
    border: 1px solid #e6ebf2;
    border-radius: 0.8em;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.mk-app-stats,
.mk-app-courses {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1em;
}

.mk-app-stats {
    margin-bottom: 1.8em;
}

.mk-app-stat {
    display: flex;
    align-items: center;
    gap: 0.9em;
    padding: 1em 1.1em;
}

.mk-app-stat strong {
    display: block;
    color: #111827;
    font-size: 1.35em;
    line-height: 1.15;
}

.mk-app-stat span {
    color: #6b7280;
    font-size: 0.9em;
}

.mk-app-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.6em;
    height: 2.6em;
    border-radius: 0.65em;
    font-size: 1.05em;
}

.mk-app-label {
    margin: 0 0 0.8em;
    color: #374151;
    font-weight: 600;
}

.mk-app-courses + .mk-app-label {
    margin-top: 1.8em;
}

.mk-app-course {
    display: flex;
    flex-direction: column;
    gap: 0.95em;
    padding: 1.1em;
}

.mk-app-course-head {
    display: flex;
    align-items: flex-start;
    gap: 0.8em;
}

.mk-app-course-title {
    margin-bottom: 0.4em;
    color: #111827;
    font-weight: 600;
    line-height: 1.3;
}

.mk-app-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1em;
    color: #6b7280;
    font-size: 0.86em;
}

.mk-app-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}

.mk-app-btn {
    padding: 0.6em 1em;
    border-radius: 0.55em;
    background: #066fd1;
    color: #fff;
    font-size: 0.9em;
    font-weight: 600;
    text-align: center;
}

.mk-app-btn--ghost {
    background: #fff;
    box-shadow: inset 0 0 0 1px #dfe4ec;
    color: #374151;
}

.mk-app-catalog-row {
    display: flex;
    align-items: center;
    gap: 0.9em;
    padding: 0.9em 1.1em;
}

.mk-app-catalog-row + .mk-app-catalog-row {
    border-top: 1px solid #eef1f5;
}

.mk-app-catalog-title {
    flex: 1;
    color: #111827;
    font-weight: 600;
}

.mk-app-catalog-title span {
    display: block;
    color: #6b7280;
    font-size: 0.86em;
    font-weight: 400;
}

/* Slide editor */

.mk-editor {
    background: #eef1f6;
}

.mk-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.7em 1em;
    border-bottom: 1px solid #e5e9f0;
    background: #fff;
}

.mk-editor-body {
    display: grid;
    grid-template-columns: 8.5em minmax(0, 1fr) 13.5em;
}

.mk-editor-slides {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    padding: 1em 0.9em;
    border-right: 1px solid #e5e9f0;
    background: #f8fafc;
}

.mk-thumb {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35em;
    aspect-ratio: 16 / 9;
    padding: 0.5em 0.5em 0.5em 1.6em;
    border-radius: 0.35em;
    background: #fff;
    box-shadow: 0 0 0 1px #e1e6ee;
}

.mk-thumb.is-active {
    box-shadow: 0 0 0 2px #066fd1;
}

.mk-thumb b {
    position: absolute;
    top: 0.35em;
    left: 0.45em;
    color: #9aa3b2;
    font-size: 0.75em;
    font-weight: 600;
}

.mk-thumb i {
    display: block;
    height: 0.35em;
    border-radius: 999px;
    background: #d5dce6;
}

.mk-thumb i:first-of-type {
    height: 0.5em;
    background: #9fb3cc;
}

.mk-thumb-img {
    position: absolute;
    top: 22%;
    right: 8%;
    width: 30%;
    height: 56%;
    border-radius: 0.2em;
    background: linear-gradient(160deg, #8ec5ff, #8b7bff);
}

.mk-thumb-img--wide {
    top: auto;
    bottom: 12%;
    left: 1.6em;
    width: auto;
    height: 38%;
}

.mk-editor-canvas {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.8em 1.6em;
}

.mk-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: visible;
    border-radius: 0.3em;
    background: #fff;
    box-shadow: 0 14px 30px -14px rgba(15, 23, 42, 0.3), 0 0 0 1px #e1e6ee;
}

.mk-stage-accent {
    position: absolute;
    top: 13%;
    left: 6%;
    width: 7%;
    height: 1.6%;
    border-radius: 999px;
    background: #066fd1;
}

.mk-stage-title {
    position: absolute;
    top: 18%;
    left: 6%;
    width: 46%;
    color: #0f172a;
    font-size: 2.1em;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
}

.mk-stage-text {
    position: absolute;
    top: 46%;
    left: 6%;
    width: 44%;
    color: #64748b;
    font-size: 0.95em;
}

.mk-stage-list {
    position: absolute;
    top: 58%;
    left: 6%;
    display: grid;
    gap: 0.45em;
    margin: 0;
    padding: 0;
    color: #334155;
    font-size: 0.85em;
    list-style: none;
}

.mk-stage-list li {
    display: flex;
    align-items: center;
    gap: 0.45em;
}

.mk-stage-list .ti {
    color: #2fb344;
}

.mk-stage-image {
    position: absolute;
    top: 13%;
    right: 6%;
    width: 38%;
    height: 74%;
    border-radius: 0.45em;
    background: linear-gradient(165deg, #9fd0ff 0%, #7b9bff 48%, #a888ff 100%);
}

.mk-stage-image::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 52%;
    border-radius: 0 0 0.45em 0.45em;
    background: #4b5fd6;
    opacity: 0.85;
    clip-path: polygon(0 100%, 0 58%, 20% 26%, 38% 56%, 58% 14%, 80% 48%, 100% 28%, 100% 100%);
}

.mk-stage-image::after {
    content: "";
    position: absolute;
    top: 16%;
    right: 18%;
    width: 16%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff6c9;
    box-shadow: 0 0 1.5em #fff6c9;
}

.mk-select {
    position: absolute;
    inset: -0.35em;
    z-index: 1;
    border: 1.5px solid #066fd1;
    border-radius: 0.6em;
}

.mk-select b {
    position: absolute;
    width: 0.75em;
    height: 0.75em;
    border: 1.5px solid #066fd1;
    border-radius: 0.15em;
    background: #fff;
}

.mk-select b:nth-child(1) {
    top: -0.4em;
    left: -0.4em;
}

.mk-select b:nth-child(2) {
    top: -0.4em;
    right: -0.4em;
}

.mk-select b:nth-child(3) {
    bottom: -0.4em;
    left: -0.4em;
}

.mk-select b:nth-child(4) {
    right: -0.4em;
    bottom: -0.4em;
}

.mk-editor-panel {
    padding: 1.1em 1.1em 1.4em;
    border-left: 1px solid #e5e9f0;
    background: #fff;
}

.mk-panel-title {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 0.9em;
    color: #111827;
    font-weight: 700;
}

.mk-panel-label {
    margin: 0.85em 0 0.4em;
    color: #8a94a6;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mk-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em;
}

.mk-field {
    display: flex;
    justify-content: space-between;
    padding: 0.45em 0.6em;
    border-radius: 0.45em;
    box-shadow: inset 0 0 0 1px #e1e6ee;
    color: #111827;
    font-size: 0.9em;
}

.mk-field em {
    color: #9aa3b2;
    font-style: normal;
}

.mk-field--text {
    color: #4b5563;
}

.mk-range {
    position: relative;
    height: 0.4em;
    margin: 0.6em 0.2em;
    border-radius: 999px;
    background: #e5e9f0;
}

.mk-range span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: #066fd1;
}

.mk-range span::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -0.55em;
    width: 1.1em;
    height: 1.1em;
    border: 2px solid #066fd1;
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
}

.mk-segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0.2em;
    border-radius: 0.5em;
    background: #f1f4f8;
}

.mk-segmented span {
    padding: 0.35em 0;
    border-radius: 0.4em;
    color: #6b7280;
    font-size: 0.85em;
    text-align: center;
}

.mk-segmented .is-active {
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
    color: #111827;
    font-weight: 600;
}

/* SCORM player */

.mk-player-top {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0.9em 1.2em;
    border-bottom: 1px solid #e5e9f0;
}

.mk-player-title {
    color: #111827;
    font-weight: 700;
}

.mk-player-progress {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin-left: auto;
    color: #6b7280;
    font-size: 0.86em;
    white-space: nowrap;
}

.mk-player-progress .mk-bar {
    width: 8em;
}

.mk-player-body {
    display: grid;
    grid-template-columns: 17em minmax(0, 1fr);
}

.mk-toc {
    display: grid;
    align-content: start;
    gap: 0.25em;
    margin: 0;
    padding: 1em;
    border-right: 1px solid #e5e9f0;
    background: #f8fafc;
    list-style: none;
    counter-reset: lesson;
}

.mk-toc li {
    display: flex;
    align-items: center;
    gap: 0.65em;
    padding: 0.65em 0.75em;
    border-radius: 0.5em;
    color: #4b5563;
    font-size: 0.93em;
}

.mk-toc li .ti {
    color: #a0a9b8;
}

.mk-toc li.is-done .ti {
    color: #2fb344;
}

.mk-toc li.is-current {
    background: #e0ecfb;
    color: #066fd1;
    font-weight: 600;
}

.mk-toc li.is-current .ti {
    color: #066fd1;
}

.mk-quiz {
    padding: 2em 2.4em 1.8em;
}

.mk-quiz-question {
    margin: 0.8em 0 1.2em;
    color: #0f172a;
    font-size: 1.4em;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.mk-option {
    display: flex;
    align-items: center;
    gap: 0.8em;
    margin-bottom: 0.6em;
    padding: 0.8em 1em;
    border-radius: 0.6em;
    box-shadow: inset 0 0 0 1px #e1e6ee;
    color: #374151;
}

.mk-option .ti {
    margin-left: auto;
    color: #2fb344;
}

.mk-option.is-correct {
    background: #f0fbf3;
    box-shadow: inset 0 0 0 2px #2fb344;
    color: #111827;
    font-weight: 600;
}

.mk-radio {
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #cbd2dc;
}

.mk-option.is-correct .mk-radio {
    box-shadow: inset 0 0 0 0.33em #2fb344;
}

.mk-quiz-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin-top: 1.4em;
    color: #6b7280;
    font-size: 0.88em;
}

.mk-quiz-foot > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
}

/* Course enrolments */

.mk-report-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 1.2em 1.4em;
}

.mk-report-title {
    color: #111827;
    font-size: 1.15em;
    font-weight: 700;
}

.mk-report-sub {
    color: #6b7280;
    font-size: 0.88em;
}

.mk-report-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #edf0f5;
    border-bottom: 1px solid #edf0f5;
}

.mk-report-stats > div {
    padding: 1em 1.4em;
}

.mk-report-stats > div + div {
    border-left: 1px solid #edf0f5;
}

.mk-report-stats strong {
    display: block;
    color: #111827;
    font-size: 1.45em;
    line-height: 1.2;
}

.mk-report-stats span {
    color: #6b7280;
    font-size: 0.86em;
}

.mk-report-row {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.05fr) minmax(0, 1.5fr) minmax(0, 0.7fr) minmax(0, 0.55fr);
    align-items: center;
    gap: 1em;
    padding: 0.72em 1.4em;
    border-bottom: 1px solid #f0f2f6;
    color: #4b5563;
    font-size: 0.93em;
}

.mk-report-row:last-child {
    border-bottom: 0;
}

.mk-report-row--head {
    background: #fafbfd;
    color: #8a94a6;
    font-size: 0.76em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mk-person {
    display: flex;
    align-items: center;
    gap: 0.6em;
    color: #111827;
    font-weight: 600;
    white-space: nowrap;
}

.mk-report-progress {
    display: flex;
    align-items: center;
    gap: 0.6em;
}

.mk-report-progress .mk-bar {
    flex: 1;
}

.mk-report-progress > span:last-child {
    width: 2.6em;
    text-align: right;
}

/* Audit log */

.mk-audit {
    padding: 1.3em;
    color: #c5cfdf;
}

.mk-audit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1em;
}

.mk-audit-head strong {
    color: #fff;
    font-size: 1.1em;
}

.mk-audit-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35em 0.75em;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #a7b2c6;
    font-size: 0.88em;
}

.mk-audit-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9em;
    margin-bottom: 0.6em;
    padding: 0.8em 0.9em;
    border-radius: 0.75em;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.mk-audit-item:last-child {
    margin-bottom: 0;
}

.mk-audit-item.is-highlighted {
    background: rgba(247, 103, 7, 0.09);
    box-shadow: inset 0 0 0 1px rgba(247, 103, 7, 0.45);
}

.mk-audit-text strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-audit-text span,
.mk-audit-time {
    color: #7d89a0;
    font-size: 0.86em;
}

/* ------------------------------------------------------------------ Motion (marketing.js) */

.mk-reveal {
    opacity: 0;
    transform: translateY(1.5rem);
    transition:
        opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--mk-delay, 0ms),
        transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--mk-delay, 0ms);
}

.mk-reveal.is-visible {
    opacity: 1;
    transform: none;
}

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

    .mk-card,
    .mk-card:hover {
        transform: none;
        transition: none;
    }
}

@media print {
    .mk-header {
        position: static;
    }

    .mk-reveal {
        opacity: 1;
        transform: none;
    }
}