/* www.cendia.com — the marketing layout (_MarketingLayout) and its blocks: Hero, Card Grid, Card,
   Split Section, Code Panel, Info Panel, CTA Band.

   Everything is under an mk- prefix, so this file can sit beside site.css on any page without
   either touching the other. Light by design: warm porcelain paper, near-black ink, one violet
   signal colour. Colour is spent on purpose (accented words, the primary button, the closing band)
   so it still means something when it appears. This site does not follow Arena's light/dark switch.

   The Background and Accent values authors pick are class suffixes kept from the first, dark
   design, so existing content renders without a re-save:
     background  ink -> stone     navy -> linen     night -> the page itself     paper -> white
     accent      blue -> violet   sand -> teal      copper -> clay

   Breakpoints follow the design: 640px (sm), 768px (md), 1024px (lg). */

:root {
    --mk-page: #fbfaf7;
    --mk-linen: #f5f3ee;
    --mk-stone: #eeebe4;
    --mk-white: #ffffff;
    --mk-ink: #18181c;
    --mk-ink-2: #3a3a41;
    --mk-muted: rgba(24, 24, 28, .64);
    --mk-faint: rgba(24, 24, 28, .46);
    --mk-line: rgba(24, 24, 28, .1);
    --mk-line-strong: rgba(24, 24, 28, .16);
    --mk-violet: #5b46d6;
    --mk-violet-deep: #4533b8;
    --mk-violet-wash: #efecfb;
    --mk-teal: #3b7768;
    --mk-clay: #8f6a4f;
    --mk-code: #17171c;
    --mk-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --mk-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
    --mk-accent: var(--mk-violet);

    /* The cendiacom media set was rendered for the first, dark design. This redraws those images
       light (inverted, hue turned back, softened) so they sit on paper. Set it to none once the
       media library holds light images, or they will be drawn dark. */
    --mk-photo-filter: invert(1) hue-rotate(180deg) saturate(.75) contrast(.9);
}

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

.mk-body {
    margin: 0;
    background: var(--mk-page);
    color: var(--mk-ink);
    font-family: var(--mk-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
.mk-body *, .mk-body *::before, .mk-body *::after { box-sizing: border-box; }
/* :where keeps the reset at zero weight, so any mk- link class below sets its own colour. */
.mk-body :where(a) { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.mk-body ::selection { background: var(--mk-violet-wash); color: var(--mk-violet-deep); }
.mk-body :focus-visible { outline: 2px solid var(--mk-violet); outline-offset: 3px; }
html:has(.mk-body) { scroll-behavior: smooth; }

.mk-shell {
    position: relative;
    min-height: 100vh;
    /* clip, not hidden: hidden makes this the header's scroll container, and the sticky header
       would scroll away with the page. */
    overflow: clip;
    background:
        radial-gradient(circle at 92% 0%, rgba(91, 70, 214, .07), transparent 32rem),
        var(--mk-page);
}
.mk-shell > * { position: relative; }

.mk-wrap { width: min(1240px, calc(100% - 3rem)); margin: 0 auto; }
.mk-icon { flex-shrink: 0; vertical-align: middle; }

/* --- type ------------------------------------------------------------------------------- */

.mk-display { font-family: var(--mk-mono); font-weight: 400; letter-spacing: -.065em; margin: 0; color: var(--mk-ink); }
.mk-display em { font-style: normal; color: var(--mk-accent); }
.mk-accent--sand { --mk-accent: var(--mk-teal); }
.mk-accent--copper { --mk-accent: var(--mk-clay); }

.mk-eyebrow {
    margin: 0;
    font-family: var(--mk-mono);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mk-accent);
}
.mk-kicker { display: inline-block; width: 2.5rem; height: 1px; margin-right: .7rem; vertical-align: middle; background: currentColor; }
.mk-h2 { margin-top: 1.25rem; font-size: 2.25rem; line-height: .98; }
@media (min-width: 640px) { .mk-h2 { font-size: 3rem; } }

/* --- buttons ---------------------------------------------------------------------------- */

.mk-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    border-radius: 999px;
    padding: .9rem 1.25rem;
    font-size: .8rem;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.mk-button:active { transform: scale(.97); }
.mk-button--primary { background: var(--mk-ink); color: var(--mk-page) !important; box-shadow: 0 10px 24px rgba(24, 24, 28, .12); }
.mk-button--primary:hover { transform: translateY(-2px); background: var(--mk-violet); box-shadow: 0 16px 32px rgba(91, 70, 214, .22); }
.mk-button--secondary { border: 1px solid var(--mk-line-strong); background: rgba(255, 255, 255, .6); color: var(--mk-ink); }
.mk-button--secondary:hover { border-color: var(--mk-violet); background: var(--mk-violet-wash); color: var(--mk-violet-deep); }

.mk-textlink { display: inline-flex; align-items: center; gap: .5rem; margin-top: 2rem; font-size: .875rem; font-weight: 800; color: var(--mk-violet); }
.mk-textlink svg { transition: transform .18s ease; }
.mk-textlink:hover { color: var(--mk-violet-deep); }
.mk-textlink:hover svg { transform: translateX(3px); }

/* --- header ----------------------------------------------------------------------------- */

.mk-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--mk-line);
    background: rgba(251, 250, 247, .86);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
}
.mk-header__bar { display: flex; align-items: center; justify-content: space-between; height: 4.5rem; }

.mk-brand { display: inline-flex; align-items: center; gap: .625rem; color: var(--mk-ink); text-decoration: none; }

.mk-nav { display: none; align-items: center; gap: 2rem; }
.mk-nav__link { position: relative; color: var(--mk-muted); font-size: .82rem; font-weight: 700; transition: color .18s ease; }
.mk-nav__link:hover, .mk-nav__link.is-active { color: var(--mk-ink); }
.mk-nav__link.is-active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -.55rem;
    height: 2px; border-radius: 2px; background: var(--mk-violet);
}
.mk-nav__cta {
    display: none;
    border: 1px solid var(--mk-ink);
    background: var(--mk-ink); color: var(--mk-page) !important;
    border-radius: 999px; padding: .62rem 1rem;
    font-size: .78rem; font-weight: 800;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.mk-nav__cta:hover { background: var(--mk-violet); border-color: var(--mk-violet); transform: translateY(-1px); }

.mk-menu-toggle {
    display: grid; place-items: center;
    width: 2.25rem; height: 2.25rem;
    border: 1px solid var(--mk-line-strong); border-radius: 999px;
    background: transparent; color: var(--mk-ink); cursor: pointer;
}
.mk-menu-toggle__close, .mk-menu-toggle[aria-expanded="true"] .mk-menu-toggle__open { display: none; }
.mk-menu-toggle[aria-expanded="true"] .mk-menu-toggle__close { display: inline; }

.mk-mobile-nav { border-top: 1px solid var(--mk-line); background: var(--mk-page); padding: 1.25rem 0; }
.mk-mobile-nav nav { display: flex; flex-direction: column; gap: .25rem; }
.mk-mobile-nav__link { border-radius: .5rem; padding: .75rem; font-size: .875rem; font-weight: 700; color: var(--mk-muted); }
.mk-mobile-nav__link.is-active { background: var(--mk-violet-wash); color: var(--mk-violet-deep); }
.mk-mobile-nav__cta { margin-top: .75rem; border-radius: .5rem; padding: .75rem; background: var(--mk-ink); color: var(--mk-page) !important; font-size: .875rem; font-weight: 800; }

@media (min-width: 768px) {
    .mk-nav { display: flex; }
    .mk-nav__cta { display: inline-block; }
    .mk-menu-toggle, .mk-mobile-nav { display: none !important; }
}

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

.mk-footer { border-top: 1px solid var(--mk-line); background: var(--mk-linen); }
.mk-footer > .mk-wrap { padding: 3.5rem 0 2.5rem; }
.mk-footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .mk-footer__grid { grid-template-columns: 1.4fr .7fr .7fr .7fr; } }
.mk-footer__about { max-width: 18rem; margin: 1.25rem 0 0; font-size: .875rem; line-height: 1.5rem; color: var(--mk-muted); }
.mk-footer__arena { display: inline-flex; align-items: center; gap: .375rem; margin-top: 1.25rem; font-size: .75rem; font-weight: 800; color: var(--mk-violet) !important; }
.mk-footer__arena:hover { color: var(--mk-violet-deep) !important; }
.mk-footer .mk-eyebrow { color: var(--mk-faint); }
.mk-footer__links { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.25rem; }
.mk-footer__link { color: var(--mk-ink-2); font-size: .8rem; transition: color .18s ease; }
.mk-footer__link:hover { color: var(--mk-violet); }
.mk-footer__base {
    display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
    margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--mk-line);
    font-size: .68rem; font-weight: 500; letter-spacing: .025em; color: var(--mk-faint);
}
@media (min-width: 640px) { .mk-footer__base { flex-direction: row; } }

/* --- motion ----------------------------------------------------------------------------- */

.mk-fade { animation: mk-fade-up .7s cubic-bezier(.23, 1, .32, 1) both; }
.mk-delay-1 { animation-delay: .08s; }
.mk-delay-2 { animation-delay: .16s; }
.mk-delay-3 { animation-delay: .24s; }
@keyframes mk-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .mk-body *, .mk-body *::before, .mk-body *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    html:has(.mk-body) { scroll-behavior: auto; }
}

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

.mk-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--mk-line); }

.mk-orbit { position: absolute; border: 1px solid rgba(91, 70, 214, .13); border-radius: 999px; pointer-events: none; }
.mk-orbit--one { width: 58rem; height: 58rem; right: -30rem; top: -15rem; }
.mk-orbit--two { width: 36rem; height: 36rem; right: -11rem; top: -2rem; border-color: rgba(59, 119, 104, .16); }
.mk-orbit::after {
    content: ""; position: absolute; top: 17%; left: 11%;
    width: .5rem; height: .5rem; border-radius: 999px;
    background: var(--mk-violet); box-shadow: 0 0 0 5px rgba(91, 70, 214, .1);
}
/* Wide heroes carry one orbit, as the design's Solutions page does. */
.mk-hero--wide .mk-orbit--two { display: none; }

.mk-hero__grid { position: relative; display: grid; gap: 3rem; align-items: center; padding: 5rem 0; }
.mk-hero__text { position: relative; z-index: 1; }
.mk-hero__title { margin-top: 1.75rem; font-size: clamp(3.2rem, 15vw, 4.5rem); line-height: .88; }
@media (min-width: 640px) { .mk-hero__title { font-size: clamp(3.4rem, 7vw, 6.6rem); } }
.mk-hero__intro { max-width: 28rem; margin: 2rem 0 0; font-size: 1.05rem; line-height: 1.75rem; color: var(--mk-muted); }
.mk-hero__actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 2.25rem; }
@media (min-width: 640px) { .mk-hero__actions { flex-direction: row; flex-wrap: wrap; } }
.mk-hero__tags {
    display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; margin-top: 3rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .025em; color: var(--mk-faint);
}
.mk-hero__tags span { display: inline-flex; align-items: center; gap: .5rem; }
.mk-hero__tags i { width: .375rem; height: .375rem; border-radius: 999px; background: var(--mk-violet); }
.mk-hero__tags span:nth-child(even) i { background: var(--mk-teal); }

/* Split: text and the CMS picture. */
.mk-hero--split .mk-hero__grid { min-height: 42rem; }
.mk-hero--split .mk-hero__text { max-width: 36rem; }
@media (min-width: 1024px) {
    .mk-hero--split .mk-hero__grid { grid-template-columns: .92fr 1.08fr; padding: 6rem 0; }
    .mk-hero__visual { padding-top: 2.5rem; }
}
.mk-hero__visual { position: relative; z-index: 1; }
.mk-hero__float { position: relative; max-width: 43rem; margin-left: auto; }
.mk-hero__glow {
    position: absolute; inset: -1.5rem; overflow: hidden; border-radius: 2rem;
    background: radial-gradient(circle at 65% 20%, rgba(91, 70, 214, .12), transparent 55%);
}
.mk-hero__glow--image { opacity: .4; background: none; }
.mk-hero__glow img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--mk-photo-filter); }
/* Wide: heading left, introduction low on the right, buttons well below. */
.mk-hero--wide .mk-hero__grid { padding: 6rem 0; display: block; }
@media (min-width: 640px) { .mk-hero--wide .mk-hero__grid { padding: 8rem 0; } }
.mk-hero__wide { display: grid; gap: 2.25rem; margin-top: 1.5rem; }
.mk-hero__wide .mk-hero__title { margin-top: 0; max-width: 48rem; }
.mk-hero__wide .mk-hero__intro { margin-top: 0; align-self: end; }
@media (min-width: 1024px) { .mk-hero__wide { grid-template-columns: 1.1fr .7fr; } }
.mk-hero--wide .mk-hero__actions { margin-top: 3.5rem; }

/* Overlay: the image fills the hero, washed out from the left so the text stays legible. */
.mk-hero--overlay { min-height: 39rem; display: flex; flex-direction: column; justify-content: center; }
.mk-hero--overlay .mk-hero__grid { padding: 6rem 0; }
.mk-hero--overlay .mk-hero__text { max-width: 42rem; }
.mk-hero--overlay .mk-hero__title { font-size: clamp(3.2rem, 12vw, 4.5rem); line-height: .88; }
@media (min-width: 640px) { .mk-hero--overlay .mk-hero__title { font-size: clamp(3.5rem, 7vw, 6.6rem); } }
.mk-hero--overlay .mk-hero__intro { max-width: 32rem; }
.mk-hero--overlay .mk-hero__actions { flex-direction: row; flex-wrap: wrap; }
.mk-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; filter: var(--mk-photo-filter); }
.mk-hero__shade { position: absolute; inset: 0; background: linear-gradient(to right, var(--mk-page) 20%, rgba(251, 250, 247, .8) 50%, rgba(251, 250, 247, .1)); }

.mk-hero__highlights {
    position: relative; z-index: 1;
    display: grid; border-top: 1px solid var(--mk-line);
}
@media (min-width: 640px) { .mk-hero__highlights { grid-template-columns: repeat(var(--mk-cols, 3), 1fr); } }
.mk-stat { border-top: 1px solid var(--mk-line); padding: 1.25rem 1.25rem 1.5rem 0; }
@media (min-width: 640px) {
    .mk-stat { border-top: 0; padding-left: 1.25rem; border-left: 1px solid var(--mk-line); }
    .mk-stat:first-child { padding-left: 0; border-left: 0; }
}
.mk-stat__label { margin: 0; font-family: var(--mk-mono); font-size: .6rem; letter-spacing: .15em; color: var(--mk-faint); }
.mk-stat__value { margin: .5rem 0 0; font-size: .9rem; font-weight: 700; color: var(--mk-ink); }

/* --- authentic CMS captures -------------------------------------------------------------- */

.mk-screen {
    position: relative; z-index: 1; margin: 0; overflow: hidden;
    border: 1px solid var(--mk-line-strong); border-radius: 1rem;
    background: var(--mk-white); text-align: left;
    box-shadow: 0 30px 70px -20px rgba(24, 24, 28, .22), 0 8px 20px -10px rgba(24, 24, 28, .1);
}
.mk-screen__image-link { display: block; background: #f1efe3; }
.mk-screen__capture { display: block; width: 100%; height: auto; }
.mk-screen__caption {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .85rem 1.25rem; padding: 1rem 1.25rem; border-top: 1px solid var(--mk-line);
}
.mk-screen__caption > div { flex: 1 1 16rem; }
.mk-screen__eyebrow {
    display: block; margin-bottom: .4rem; font-family: var(--mk-mono);
    font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-violet);
}
.mk-screen__caption strong { display: block; font-size: .9rem; color: var(--mk-ink); }
.mk-screen__caption p { margin: .4rem 0 0; font-size: .75rem; line-height: 1.6; color: var(--mk-muted); }
.mk-screen__expand { flex-shrink: 0; font-size: .75rem; font-weight: 700; color: var(--mk-violet); text-underline-offset: .2em; }
.mk-screen__image-link:focus-visible, .mk-screen__expand:focus-visible { outline: 3px solid var(--mk-violet); outline-offset: -3px; }

/* The code panel retains its decorative window dots. */
.mk-screen__dots { display: flex; align-items: center; gap: .45rem; }
.mk-screen__dots > span:not(.mk-screen__path) { width: .5rem; height: .5rem; border-radius: 999px; background: rgba(24, 24, 28, .14); }
.mk-screen__dots > span.is-lit { background: var(--mk-violet); }

/* --- sections ----------------------------------------------------------------------------- */

.mk-section { position: relative; padding: 4.75rem 0; }
@media (min-width: 640px) { .mk-section { padding: 7rem 0; } }
.mk-bg--ink { background: var(--mk-stone); }
.mk-bg--navy { background: var(--mk-linen); }
.mk-bg--night { background: transparent; border-top: 1px solid var(--mk-line); border-bottom: 1px solid var(--mk-line); }
.mk-bg--paper { background: var(--mk-white); border-top: 1px solid var(--mk-line); border-bottom: 1px solid var(--mk-line); }
/* Two bordered sections meeting draw one line, not two. */
.mk-bg--paper + .mk-bg--night, .mk-bg--night + .mk-bg--paper, .mk-bg--paper + .mk-bg--paper, .mk-bg--night + .mk-bg--night { border-top: 0; }

.mk-section__head { display: flex; flex-direction: column; gap: 1.75rem; margin-bottom: 3rem; }
.mk-section__heading { max-width: 42rem; }
.mk-section__intro { max-width: 42rem; margin: 1.5rem 0 0; font-size: 1rem; line-height: 1.75rem; color: var(--mk-muted); }
.mk-section__intro--small { max-width: 24rem; margin: 0; font-size: .9rem; line-height: 1.5rem; }
.mk-section__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.mk-section__button { align-self: flex-start; }
@media (min-width: 768px) {
    .mk-section__head--split { flex-direction: row; align-items: flex-end; justify-content: space-between; }
    .mk-section__head--split .mk-section__aside { align-items: flex-end; text-align: left; }
    .mk-section__head--stacked:has(.mk-section__button) { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

/* --- cards: the grid, then each look a container gives its Cards --------------------------- */

/* Three across waits for 1024px: at tablet width each card would be ~220px, and a card with a
   checklist wraps every point. Below that a three-card row stacks, full width. */
.mk-cards { display: grid; gap: 1rem; }
@media (min-width: 768px) {
    .mk-cards--cols-2, .mk-cards--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .mk-cards--cols-3 { grid-template-columns: repeat(3, 1fr); }
    .mk-cards--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.mk-card { position: relative; display: flex; flex-direction: column; }
.mk-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.mk-card__icon { color: var(--mk-violet); }
.mk-card__label { font-family: var(--mk-mono); font-size: .7rem; color: var(--mk-faint); }
.mk-card__body { display: flex; flex-direction: column; flex: 1; }
.mk-card__title { margin: 2.5rem 0 0; font-size: 1.2rem; font-weight: 800; color: var(--mk-ink); letter-spacing: -.01em; }
.mk-card__text { max-width: 28rem; margin: .75rem 0 0; font-size: .875rem; line-height: 1.5rem; color: var(--mk-muted); }

.mk-checklist { list-style: none; margin: 0; padding: 0; }
.mk-checklist li { display: flex; gap: .625rem; }
.mk-checklist svg { margin-top: .125rem; color: var(--mk-teal); }
.mk-card__points { margin-top: auto; padding-top: 1.75rem; }
.mk-card__points::before { content: ""; display: block; border-top: 1px solid var(--mk-line); margin-bottom: 1.5rem; }
.mk-card__points li { font-size: .8rem; font-weight: 600; line-height: 1.25rem; color: var(--mk-ink-2); }
.mk-card__points li + li { margin-top: .625rem; }

/* Feature: separate white cards that lift on hover. */
.mk-cards--feature .mk-card {
    min-height: 15rem; overflow: hidden; padding: 1.75rem;
    border: 1px solid var(--mk-line); border-radius: 1rem; background: var(--mk-white);
    box-shadow: 0 1px 2px rgba(24, 24, 28, .04);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
@media (min-width: 640px) { .mk-cards--feature.mk-cards--cols-2 .mk-card { padding: 2rem; } }
.mk-cards--feature .mk-card:hover { transform: translateY(-4px); border-color: rgba(91, 70, 214, .35); box-shadow: 0 18px 36px -14px rgba(24, 24, 28, .16); }
.mk-bg--paper .mk-cards--feature .mk-card { background: var(--mk-page); }
.mk-cards--feature.mk-cards--cols-4 .mk-card { padding: 1.5rem; }
.mk-cards--feature.mk-cards--cols-4 .mk-card__title { font-size: 1rem; margin-top: 2.25rem; }
.mk-cards--feature.mk-cards--cols-4 .mk-card__text { max-width: 15rem; }
.mk-cards--feature .mk-card:has(.mk-card__points) .mk-card__title { margin-top: 3rem; font-size: 1.45rem; }
@media (min-width: 1024px) { .mk-cards--feature.mk-cards--cols-3 .mk-card:has(.mk-card__points) { min-height: 26rem; } }
.mk-cards--feature.mk-cards--cols-3 .mk-card:has(.mk-card__points) .mk-card__title { font-size: 1.2rem; }

/* Joined: one panel split by hairlines, each card numbered, a short rule under the text. */
.mk-cards--joined { gap: 1px; overflow: hidden; border: 1px solid var(--mk-line-strong); border-radius: 1rem; background: var(--mk-line-strong); }
.mk-cards--joined .mk-card { padding: 1.75rem; background: var(--mk-page); }
@media (min-width: 640px) { .mk-cards--joined .mk-card { padding: 2rem; } }
.mk-cards--joined .mk-card__label { color: var(--mk-accent); }
.mk-cards--joined .mk-card__text { max-width: 20rem; }
.mk-cards--joined .mk-card__body::after { content: ""; display: block; width: 2.5rem; height: 1px; margin-top: 1.75rem; background: var(--mk-ink); opacity: .5; }

/* Beside a Split Section. Grid and Stagger are two by two; Stagger drops every second card. A Code
   or Info Panel is not a card, and takes the whole half. */
.mk-split__aside.mk-cards { gap: .75rem; }
.mk-split__aside > :not(.mk-card) { grid-column: 1 / -1; }
@media (min-width: 640px) {
    .mk-split__aside.mk-cards--grid, .mk-split__aside.mk-cards--stagger, .mk-split__aside.mk-cards--tiles { grid-template-columns: repeat(2, 1fr); }
    .mk-cards--stagger { gap: 1rem !important; }
    .mk-cards--stagger > .mk-card:nth-child(even) { margin-top: 2.5rem; }
}
.mk-cards--grid .mk-card, .mk-cards--list .mk-card, .mk-cards--stagger .mk-card {
    padding: 1.5rem; border: 1px solid var(--mk-line); border-radius: .9rem; background: var(--mk-white);
    box-shadow: 0 1px 2px rgba(24, 24, 28, .04);
}
.mk-bg--paper .mk-cards--grid .mk-card, .mk-bg--paper .mk-cards--list .mk-card, .mk-bg--paper .mk-cards--stagger .mk-card { background: var(--mk-page); }
.mk-cards--grid .mk-card__icon { width: 21px; height: 21px; }
.mk-cards--grid .mk-card__title, .mk-cards--stagger .mk-card__title { margin-top: 1.75rem; font-size: 1.05rem; }
.mk-cards--stagger .mk-card__label { color: var(--mk-accent); }

/* List: one card per row, the icon beside its text. */
.mk-cards--list .mk-card { flex-direction: row; gap: 1.25rem; padding: 1.25rem; }
.mk-cards--list .mk-card__icon { width: 20px; height: 20px; margin-top: .25rem; }
.mk-cards--list .mk-card__title { margin: 0; font-size: .9rem; }
.mk-cards--list .mk-card__text { margin-top: .5rem; }

/* Tiles: small white cards led by three dots. */
.mk-cards--tiles .mk-card {
    display: grid; align-content: space-between;
    min-height: 6.5rem; gap: 1.5rem;
    padding: 1.1rem; border: 1px solid var(--mk-line); border-radius: .85rem; background: var(--mk-white);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mk-cards--tiles .mk-card:hover { transform: translateY(-3px); border-color: rgba(91, 70, 214, .3); box-shadow: 0 14px 25px -12px rgba(24, 24, 28, .16); }
.mk-cards--tiles .mk-card::before {
    content: ""; width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--mk-violet); box-shadow: .75rem 0 0 var(--mk-teal), 1.5rem 0 0 var(--mk-clay);
}
.mk-cards--tiles .mk-card__label { font-size: .6rem; letter-spacing: .14em; }
.mk-cards--tiles .mk-card__icon { display: none; }
.mk-cards--tiles .mk-card__title { margin-top: .5rem; font-size: 1rem; }

/* --- split section -------------------------------------------------------------------------- */

.mk-split__grid { position: relative; display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 1024px) { .mk-split__grid { grid-template-columns: .9fr 1.1fr; } }
.mk-split:has(.mk-split__aside) .mk-split__grid { align-items: start; }
.mk-split--image .mk-split__grid { align-items: center; }
.mk-split--solo .mk-split__grid { grid-template-columns: 1fr; }
.mk-split--solo .mk-split__text { max-width: 42rem; }
.mk-split__text { position: relative; }
.mk-split__body { max-width: 32rem; margin: 1.5rem 0 0; font-size: 1rem; line-height: 1.75rem; color: var(--mk-muted); }
.mk-split__points { margin-top: 2rem; font-size: .9rem; font-weight: 600; color: var(--mk-ink-2); }
.mk-split__points li + li { margin-top: .75rem; }
.mk-split__icon { display: block; margin-bottom: 1.75rem; color: var(--mk-violet); }
.mk-split__button { margin-top: 2rem; }
.mk-split__text--boxed {
    padding: 1.75rem; border: 1px solid var(--mk-line); border-radius: 1rem; background: var(--mk-white);
    box-shadow: 0 1px 2px rgba(24, 24, 28, .04);
}
@media (min-width: 640px) { .mk-split__text--boxed { padding: 2.5rem; } }
.mk-split__text--boxed .mk-h2 { margin-top: 1rem; font-size: 1.875rem; }
@media (min-width: 640px) { .mk-split__text--boxed .mk-h2 { font-size: 2.25rem; } }
@media (min-width: 1024px) { .mk-split:has(.mk-split__text--boxed) .mk-split__grid { grid-template-columns: 1.05fr .95fr; align-items: start; } }

/* Background image: redrawn light and washed from the left, and the section is a shorter banner. */
.mk-split--image { overflow: hidden; padding: 5rem 0; }
.mk-split--image:not(.mk-split--solo) .mk-split__grid { min-height: 28rem; }
@media (min-width: 1024px) { .mk-split--image:not(.mk-split--solo) .mk-split__grid { grid-template-columns: 1.1fr .9fr; } }
.mk-split__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: var(--mk-photo-filter); }
.mk-split--image::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to right, var(--mk-page) 15%, rgba(251, 250, 247, .7) 50%, rgba(251, 250, 247, 0));
}
.mk-split--image .mk-split__grid { z-index: 2; }

.mk-note { display: inline-flex; align-items: center; gap: .75rem; margin: 2rem 0 0; font-size: .875rem; font-weight: 800; color: var(--mk-ink); }
.mk-note__badge { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--mk-ink); font-size: .75rem; color: var(--mk-page); }

/* The CMS picture, on a soft backing panel. */
.mk-split__visual { position: relative; }
.mk-split__backing { position: absolute; inset: -2rem; border-radius: 2.4rem; background: var(--mk-stone); }
.mk-bg--ink .mk-split__backing { background: var(--mk-linen); }
.mk-split__visual .mk-screen { max-width: 42rem; }

/* --- code panel --------------------------------------------------------------------------- */

/* The one dark surface on the site: code reads best on it, and it says who the product is for. */
.mk-code {
    overflow: hidden; padding: 1.25rem;
    background: var(--mk-code); border: 1px solid rgba(24, 24, 28, .9); border-radius: 1rem;
    box-shadow: 0 30px 60px -24px rgba(24, 24, 28, .35); color: #dcdce4;
}
@media (min-width: 640px) { .mk-code { padding: 1.75rem; } }
.mk-code__bar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mk-code .mk-screen__dots > span:not(.mk-screen__path) { background: rgba(255, 255, 255, .18); }
.mk-code .mk-screen__dots > span.is-lit { background: #9d8ff0; }
.mk-code__file { font-family: var(--mk-mono); font-size: .57rem; letter-spacing: .13em; color: rgba(255, 255, 255, .4); }
.mk-code__body { margin: 1.25rem 0 0; overflow-x: auto; font-family: var(--mk-mono); font-size: .74rem; line-height: 1.9; white-space: pre; }
.mk-code__line { display: block; }
.mk-code__key { color: #a99cf5; }
.mk-code__string { color: #8fd3bf; }
.mk-code__comment { color: #7d7d89; }
.mk-code__caption { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .72rem; line-height: 1.25rem; color: rgba(255, 255, 255, .55); }

/* --- info panel --------------------------------------------------------------------------- */

.mk-info {
    padding: 1.6rem; border: 1px solid var(--mk-line); border-radius: 1rem;
    background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 24px 48px -24px rgba(24, 24, 28, .18);
}
.mk-info__icon { display: block; margin-bottom: 2rem; color: var(--mk-violet); }
.mk-info__label { margin: 0; font-family: var(--mk-mono); font-size: .62rem; letter-spacing: .15em; color: var(--mk-accent); }
.mk-info:has(.mk-info__icon) .mk-info__label { color: var(--mk-faint); }
.mk-info__statement { max-width: 24rem; margin: .75rem 0 0; font-size: 1.25rem; font-weight: 800; line-height: 1.75rem; color: var(--mk-ink); letter-spacing: -.01em; }
.mk-info__items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.mk-info__statement + .mk-info__items { gap: 1rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--mk-line); }
.mk-info__items li { font-size: .74rem; font-weight: 700; color: var(--mk-ink-2); }
.mk-info__label + .mk-info__items li { padding-top: .75rem; border-top: 1px solid var(--mk-line); }

/* --- CTA band ----------------------------------------------------------------------------- */

/* The page's last word, and the one place the violet is used as a field rather than a signal. */
.mk-band {
    position: relative; overflow: hidden; padding: 4.5rem 0;
    background: var(--mk-violet-deep); color: #fff;
}
.mk-band::before {
    content: ""; position: absolute; width: 44rem; height: 44rem; right: -14rem; top: -26rem;
    border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; pointer-events: none;
}
.mk-band__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 2rem; }
@media (min-width: 768px) { .mk-band__inner { flex-direction: row; align-items: flex-end; } }
.mk-band__label { margin: 0; font-family: var(--mk-mono); font-size: .65rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.mk-band__title { max-width: 42rem; margin-top: 1rem; font-size: 2.25rem; line-height: .95; color: #fff; }
@media (min-width: 640px) { .mk-band__title { font-size: 3rem; } }
.mk-band__title em { color: inherit; opacity: .75; }
.mk-band__button {
    display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0;
    border-radius: 999px; padding: .85rem 1.3rem; background: #fff; color: var(--mk-ink) !important;
    font-size: .875rem; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease;
}
.mk-band__button:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0, 0, 0, .2); }

/* --- small screens ------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .mk-wrap { width: min(100% - 2rem, 1240px); }
    .mk-orbit--one { width: 40rem; height: 40rem; right: -29rem; top: -10rem; }
    .mk-orbit--two { width: 28rem; height: 28rem; right: -18rem; }
}

/* Keep language choice available in both the desktop and mobile headers. */
.mk-header__actions { display: flex; align-items: center; gap: .8rem; }
.mk-languages { display: flex; gap: .2rem; font-family: var(--mk-mono); font-size: .7rem; }
.mk-languages a { display: block; padding: .4rem; color: var(--mk-muted); text-decoration: none; border-radius: .3rem; }
.mk-languages a[aria-current="true"] { color: var(--mk-violet); background: var(--mk-violet-wash); }
.mk-languages a:focus-visible { outline: 2px solid var(--mk-violet); outline-offset: 2px; }

/* Longer Spanish words need room beside the product capture and on narrow phones. */
html:lang(es) .mk-hero__text { min-width: 0; }
html:lang(es) .mk-hero__title { font-size: clamp(2.6rem, 12vw, 3.6rem); }
@media (min-width: 640px) {
    html:lang(es) .mk-hero__title { font-size: clamp(3.1rem, 6vw, 5rem); }
}