/* ==========================================================================
   Nisably's own public website.

   Kept out of app.css because it serves a different audience: app.css dresses
   the signed-in application and the tenant sites, this dresses the product's
   shop window. It builds on the same tokens so the two never drift apart.

   Depth here is done with real perspective — transform-style: preserve-3d and
   translateZ on a perspective parent — not with drop shadows pretending. Every
   moving part is switched off under prefers-reduced-motion at the bottom of
   this file.
   ========================================================================== */

/* The palette is read off the logo, not invented alongside it: the mark runs
   blue → indigo → violet, so those three are the ramp everything else derives
   from, and the darks are the navy of the wordmark rather than a neutral
   near-black. Mint and amber stay as the only non-brand accents — they carry
   meaning (healthy / needs attention) and would be lost inside the ramp. */
:root {
    --mk-ink: #080e2b;      /* deepest navy — hero and closing band */
    --mk-deep: #101a4d;     /* wordmark navy */
    --mk-blue: #2563eb;     /* links and rules; darker for text contrast */
    --mk-bright: #1e88ff;   /* logo blue, gradient start */
    --mk-glow: #8ec5ff;     /* logo highlight, book pages */
    --mk-indigo: #4f46e5;   /* gradient middle */
    --mk-violet: #8b2fe0;   /* logo violet, gradient end */
    --mk-mint: #24d6a5;
    --mk-amber: #ffb020;
    --mk-radius: 16px;

    /* The logo ramp itself, as one value. Anything wearing the brand uses this
       rather than restating the three stops and slowly diverging from them. */
    --mk-ramp: linear-gradient(135deg, #1e88ff 0%, #4f46e5 52%, #8b2fe0 100%);
}

.mk-body { background: #fff; overflow-x: hidden; }

/* ==========================================================================
   THE DRIFTING EDUCATION FIELD
   --------------------------------------------------------------------------
   A fixed layer of school icons behind every page. Fixed rather than absolute,
   so twenty elements cover a ten-screen page as cheaply as a one-screen one.

   Two nested elements per icon on purpose: the outer one carries the scroll
   parallax (one shared --sy, written once per frame), the inner one carries
   its own endless drift animation. One element cannot do both, because the
   keyframes would overwrite the parallax transform every frame.

   Everything animated here is transform and opacity only, so the compositor
   handles it without a single layout or paint of the page behind.
   ========================================================================== */
.mk-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    overflow: hidden; contain: strict;
}
.mk-bg-i {
    position: absolute; left: var(--x); top: var(--y); color: var(--c);
    /* --sy is the scrolled distance; --d is how much of it this icon takes. */
    transform: translate3d(0, calc(var(--sy, 0) * var(--d) * -1px), 0);
    will-change: transform;
}
.mk-bg-m {
    display: block; width: var(--s); height: var(--s);
    animation: var(--t) ease-in-out var(--dl) infinite;
    will-change: transform;
}
.mk-bg-svg {
    width: 100%; height: 100%; opacity: .24; stroke-width: 1.45;
}
/* Three drift paths, so twenty icons never move as one. */
.mk-drift-a { animation-name: mk-drift-a; }
.mk-drift-b { animation-name: mk-drift-b; }
.mk-drift-c { animation-name: mk-drift-c; }
@keyframes mk-drift-a {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
    50%      { transform: translate3d(20px, -28px, 0) rotate(7deg); }
}
@keyframes mk-drift-b {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(4deg); }
    50%      { transform: translate3d(-24px, 22px, 0) rotate(-9deg); }
}
@keyframes mk-drift-c {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    33%      { transform: translate3d(16px, 20px, 0) rotate(9deg); }
    66%      { transform: translate3d(-18px, -16px, 0) rotate(-6deg); }
}

/* The page rides above the field. Only the light sections let it through —
   the dark bands carry their own aurora and grid, and a faint blue icon on
   near-black is noise rather than decoration. */
.mk-head, .mk-body > main, .mk-foot, .mk-flash { position: relative; z-index: 1; }

/* ---- header ------------------------------------------------------------ */
.mk-head {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid transparent;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.mk-head.is-scrolled {
    background: rgba(255, 255, 255, .92);
    border-bottom-color: rgba(15, 30, 60, .09);
    box-shadow: 0 8px 30px -18px rgba(10, 25, 60, .5);
}
.mk-head-inner { display: flex; align-items: center; gap: 24px; padding: 13px 24px; }
.mk-brand { display: flex; align-items: center; gap: 11px; color: inherit; margin-right: auto; }
.mk-brand:hover { text-decoration: none; }
.mk-brand img { width: 34px; height: 34px; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.mk-brand:hover img { transform: rotateY(180deg); }
.mk-brand strong { display: block; font-size: 16px; letter-spacing: -.2px; }
.mk-brand small { display: block; color: var(--muted); font-size: 11.5px; }
.mk-nav { display: flex; align-items: center; gap: 26px; }
.mk-nav a { color: var(--mk-ink); font-size: 14px; font-weight: 550; position: relative; }
.mk-nav a:not(.mk-cta)::after {
    content: ''; position: absolute; left: 0; bottom: -5px; height: 2px; width: 0;
    background: var(--mk-blue); border-radius: 2px; transition: width .22s ease;
}
.mk-nav a:not(.mk-cta):hover::after, .mk-nav a.here::after { width: 100%; }
.mk-nav a.here { color: var(--mk-blue); }
.mk-nav a:hover { color: var(--mk-blue); text-decoration: none; }
.mk-cta {
    background: var(--mk-ramp);
    color: #fff !important; padding: 9px 17px; border-radius: 9px;
    box-shadow: 0 8px 20px -10px rgba(60, 80, 220, .8);
    transition: transform .18s ease, box-shadow .18s ease;
}
.mk-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(60, 80, 220, .9); }
.mk-nav-toggle, .mk-burger { display: none; }

/* ---- buttons ----------------------------------------------------------- */
.mk-btn {
    display: inline-block; padding: 13px 24px; border-radius: 11px; font-weight: 600;
    font-size: 14.5px; border: 1px solid transparent; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    will-change: transform;
}
.mk-btn:hover { text-decoration: none; transform: translateY(-2px); }
.mk-btn-primary {
    background: var(--mk-ramp);
    color: #fff; box-shadow: 0 14px 32px -14px rgba(70, 100, 255, .95);
}
.mk-btn-primary:hover { color: #fff; box-shadow: 0 20px 40px -16px rgba(70, 100, 255, 1); }
.mk-btn-outline { background: #fff; color: var(--mk-ink); border-color: var(--border); }
.mk-btn-outline:hover { border-color: var(--mk-blue); color: var(--mk-blue); }
.mk-btn-ghost {
    background: rgba(255, 255, 255, .08); color: #fff;
    border-color: rgba(255, 255, 255, .3);
    backdrop-filter: blur(6px);
}
.mk-btn-ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.mk-link { color: var(--mk-blue); font-weight: 600; font-size: 14.5px; }
.mk-link:hover { text-decoration: none; }

/* ---- flashes ----------------------------------------------------------- */
.mk-flash { padding: 12px 0; font-size: 14px; font-weight: 550; }
.mk-flash-ok  { background: #ecfdf3; color: #06603f; border-bottom: 1px solid #a7e8c6; }
.mk-flash-bad { background: #fef2f2; color: #98232a; border-bottom: 1px solid #f4b8b8; }

/* ==========================================================================
   HERO — the only place the page spends its motion budget freely.
   ========================================================================== */
.mk-hero {
    position: relative; isolation: isolate; color: #fff;
    padding: 104px 0 96px;
    background:
        radial-gradient(1100px 620px at 78% -8%, rgba(124, 92, 255, .48), transparent 62%),
        radial-gradient(820px 520px at 8% 12%, rgba(36, 214, 165, .22), transparent 60%),
        linear-gradient(165deg, var(--mk-ink) 0%, var(--mk-deep) 46%, #17306a 100%);
    perspective: 1300px;
}
/* The drifting canvas field sits behind everything in the hero. It paints
   straight away, and steps aside only once WebGL is actually rendering. */
#mkField {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: -2; pointer-events: none;
    transition: opacity .7s ease;
}
#mkField.is-replaced { opacity: 0; }

/* The WebGL lattice. Hidden until it has drawn a frame, so a failed or
   skipped load never leaves a blank rectangle where the field used to be. */
#mkGl {
    position: absolute; inset: 0; z-index: -2; pointer-events: none;
    opacity: 0; transition: opacity 1.1s ease;
}
#mkGl.is-live { opacity: 1; }
#mkGl canvas { width: 100%; height: 100%; display: block; }
/* A slow aurora, so the gradient itself is never quite static. */
.mk-hero::before {
    content: ''; position: absolute; inset: -30%; z-index: -3;
    background:
        conic-gradient(from 0deg at 30% 30%, transparent 0deg, rgba(61,139,253,.16) 90deg,
                       transparent 180deg, rgba(124,92,255,.16) 270deg, transparent 360deg);
    animation: mk-aurora 34s linear infinite;
}
@keyframes mk-aurora { to { transform: rotate(360deg); } }

/* A grid floor in perspective — the horizon that makes the panel feel placed
   in space rather than pasted on. */
.mk-hero::after {
    content: ''; position: absolute; left: -25%; right: -25%; bottom: -10px; height: 320px;
    z-index: -1; opacity: .3; pointer-events: none;
    background-image:
        linear-gradient(rgba(140, 190, 255, .30) 1px, transparent 1px),
        linear-gradient(90deg, rgba(140, 190, 255, .30) 1px, transparent 1px);
    background-size: 62px 62px;
    transform: perspective(340px) rotateX(64deg);
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 88%);
    mask-image: linear-gradient(to top, #000 0%, transparent 88%);
}

.mk-hero-grid {
    display: grid; gap: 54px; align-items: center;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}
.mk-hero h1 {
    font-family: var(--display, inherit);
    font-size: clamp(32px, 4.7vw, 56px);
    line-height: 1.06; letter-spacing: -1.3px; margin: 14px 0 0;
}
.mk-hero h1 .mk-shine {
    background: linear-gradient(100deg, #fff 10%, var(--mk-glow) 34%, var(--mk-mint) 52%, #fff 76%);
    background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: mk-shine 7s ease-in-out infinite;
}
@keyframes mk-shine { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.mk-hero-text {
    color: rgba(226, 236, 255, .8); font-size: 17.5px; line-height: 1.62;
    max-width: 56ch; margin: 20px 0 0;
}
.mk-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

.mk-stats {
    display: flex; gap: 44px; flex-wrap: wrap; margin-top: 52px;
    padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .14);
}
.mk-stats strong {
    display: block; font-size: 31px; font-weight: 700; letter-spacing: -.7px;
    background: linear-gradient(180deg, #fff, var(--mk-glow));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mk-stats span {
    color: rgba(200, 215, 245, .62); font-size: 12px;
    text-transform: uppercase; letter-spacing: .8px;
}

/* ---- the floating 3D console -------------------------------------------
   A stack of planes at different translateZ inside one perspective, tilted
   slightly and breathing. This is the piece that reads as "3D" at a glance. */
.mk-stage { perspective: 1200px; perspective-origin: 50% 40%; }
.mk-console {
    position: relative; transform-style: preserve-3d;
    transform: rotateX(9deg) rotateY(-15deg);
    animation: mk-float 9s ease-in-out infinite;
}
@keyframes mk-float {
    0%, 100% { transform: rotateX(9deg) rotateY(-15deg) translateY(0); }
    50%      { transform: rotateX(6deg) rotateY(-11deg) translateY(-16px); }
}
.mk-pane {
    position: absolute; border-radius: 15px;
    background: linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .85);
    padding: 15px 17px;
}
.mk-pane-main {
    position: relative; transform: translateZ(0); width: 100%; padding: 20px 22px;
    background: linear-gradient(150deg, rgba(255,255,255,.17), rgba(255,255,255,.06));
}
.mk-pane-a { top: -34px; right: -26px; width: 210px; transform: translateZ(62px); }
.mk-pane-b { bottom: -40px; left: -34px; width: 236px; transform: translateZ(104px); }

.mk-pane-title {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
    color: rgba(190, 212, 255, .72); margin-bottom: 11px;
}
.mk-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; }
.mk-row + .mk-row { border-top: 1px solid rgba(255, 255, 255, .09); }
.mk-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mk-dot-ok { background: var(--mk-mint); box-shadow: 0 0 12px var(--mk-mint); }
.mk-dot-warn { background: var(--mk-amber); box-shadow: 0 0 12px var(--mk-amber); }
.mk-dot-info { background: var(--mk-glow); box-shadow: 0 0 12px var(--mk-glow); }
.mk-row span:last-child { margin-left: auto; color: rgba(190, 212, 255, .68); font-size: 11.5px; }

/* Little bar chart inside the floating pane. */
.mk-bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; margin-top: 4px; }
.mk-bars i {
    flex: 1; border-radius: 3px 3px 0 0; display: block;
    background: linear-gradient(180deg, var(--mk-glow), rgba(61, 139, 253, .35));
    animation: mk-bar 2.6s ease-in-out infinite;
    transform-origin: bottom;
}
@keyframes mk-bar { 0%,100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }

/* A ring that keeps turning — the "live" tell. */
.mk-ring {
    width: 54px; height: 54px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.14);
    border-top-color: var(--mk-mint); border-right-color: var(--mk-glow);
    animation: mk-spin 3.4s linear infinite;
}
@keyframes mk-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.mk-section { padding: 92px 0; position: relative; }
/* Translucent rather than solid, so the drifting field still reads through the
   tinted bands instead of stopping dead at every other section. */
.mk-section-alt {
    background:
        radial-gradient(700px 380px at 88% 0%, rgba(124, 92, 255, .07), transparent 60%),
        rgba(247, 246, 243, .84);
}
.mk-section h2 {
    font-family: var(--display, inherit); font-size: clamp(24px, 3vw, 36px);
    letter-spacing: -.7px; margin: 10px 0 0;
}
.mk-lede { color: var(--muted); font-size: 16.5px; line-height: 1.65; max-width: 66ch; margin: 14px 0 38px; }
.mk-note { color: var(--muted); font-size: 13px; margin-top: 22px; max-width: 70ch; }

/* Reveal-on-scroll. Elements start slightly below and behind, so arriving
   reads as coming forward rather than merely fading. */
[data-reveal] {
    opacity: 0; transform: translateY(26px) scale(.985);
    transition: opacity .62s cubic-bezier(.2,.7,.2,1), transform .62s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   THE CARD ENGINE
   --------------------------------------------------------------------------
   One shared surface behind every card on the site: a hairline that becomes a
   gradient on hover, a spotlight that follows the pointer, and a face that can
   hold layers at different translateZ so a tilt reads as depth rather than as
   a picture being rotated.

   Each card carries an accent through --accent and friends, set by a .mk-aN
   class. Nothing here hard-codes a colour, so a card is recoloured by swapping
   one class and the icon, rule, glow, pills and spotlight all follow.
   ========================================================================== */
.mk-a0 { --accent: #3d8bfd; --accent-ink: #0b4ea8; --accent-soft: #eaf2ff; --accent-line: #c3dcff; }
.mk-a1 { --accent: #7c5cff; --accent-ink: #4a2ecb; --accent-soft: #f0ecff; --accent-line: #d5cbff; }
.mk-a2 { --accent: #0fb98a; --accent-ink: #046b4e; --accent-soft: #e7fbf4; --accent-line: #b3ecd8; }
.mk-a3 { --accent: #f2762a; --accent-ink: #a4430c; --accent-soft: #fff1e7; --accent-line: #ffd2b5; }
.mk-a4 { --accent: #e8497f; --accent-ink: #a41a4c; --accent-soft: #ffeef4; --accent-line: #ffc9dc; }
.mk-a5 { --accent: #159fc4; --accent-ink: #065b74; --accent-soft: #e6f7fc; --accent-line: #b3e4f2; }
.mk-a6 { --accent: #d99400; --accent-ink: #8a5b00; --accent-soft: #fff6e2; --accent-line: #ffe3a8; }
.mk-a7 { --accent: #5a6bf0; --accent-ink: #2f3cae; --accent-soft: #edeeff; --accent-line: #ccd0ff; }

/* No isolation, opacity, filter, clip-path or overflow on this element, and
   none may be added: every one of those forces `transform-style: flat` per the
   transforms spec, which silently collapses every 3D layer inside the card
   back onto its face. Clipping belongs on an inner element (see .mk-gloss).
   Stacking is handled with explicit z-index instead. */
.mk-card {
    --accent: var(--mk-bright); --accent-ink: #0b4ea8;
    --accent-soft: #eef4ff; --accent-line: #cfe0ff;
    position: relative; background: #fff;
    border-radius: 18px; padding: 26px;
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
/* The border. Drawn with mask-composite rather than a wrapper element, so the
   radius stays exact and the gradient can animate without a repaint of the
   card behind it. */
.mk-card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: var(--border);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    transition: background .35s ease; pointer-events: none; z-index: 3;
}
/* The spotlight. --mx/--my are written by the pointer handler; without JS it
   sits at the top centre, which still looks deliberate. */
.mk-card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
                var(--accent-soft), transparent 68%);
    opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.mk-card > * { position: relative; z-index: 1; }
.mk-card:hover {
    box-shadow: 0 30px 64px -34px rgba(18, 38, 88, .42);
}
.mk-card:hover::after { opacity: 1; }
.mk-card:hover::before {
    background: linear-gradient(140deg, var(--accent), var(--mk-violet) 55%, var(--accent));
}
/* ---- depth layers -------------------------------------------------------
   The card face is Z=0. These lift content off it, so tilting the card parts
   the contents instead of rotating a picture of them. They are inert until
   the card is actually tilted — with no perspective in play, translateZ has
   no visual effect at all, which is exactly the resting state we want. */
.mk-card [data-lift] { transform: translateZ(26px); }
.mk-z1 { transform: translateZ(30px); }
.mk-z2 { transform: translateZ(62px); }
.mk-z3 { transform: translateZ(96px); }
/* The layers settle at slightly different rates, so the card parts and closes
   like something physical rather than like one rigid block. */
.mk-z1 { transition: transform .42s cubic-bezier(.2,.8,.2,1); }
.mk-z2 { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.mk-z3 { transition: transform .58s cubic-bezier(.2,.8,.2,1); }

/* ==========================================================================
   THE 3D SLAB
   --------------------------------------------------------------------------
   Turns a flat card into an object with thickness, a halo behind it and a
   specular sweep across its face. Four parts, all decoration, all invisible
   until the card is tilted or hovered:

     .mk-aura   a coloured plate set well behind the card. Larger than the
                card, so the halo that reads is the part sticking out past the
                edges — no reliance on how a browser orders a negative-Z child
                against its parent's own background.
     .mk-edge   the card's thickness. A strip below the bottom edge, folded up
                90 degrees about that edge, so it is a real side face that
                appears when the card leans and vanishes when it is square on.
     .mk-gloss  the sweep. Clipped by its own overflow, never the card's.
     .mk-index  a ghosted number set slightly behind the face.
   ========================================================================== */
.mk-aura, .mk-edge, .mk-gloss, .mk-index { position: absolute; pointer-events: none; }

.mk-aura {
    inset: 8px; border-radius: 24px; z-index: 0;
    background: radial-gradient(58% 58% at 50% 45%, var(--accent), transparent 70%);
    opacity: 0; transform: translateZ(-120px) scale(.82);
    transition: opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.mk-card:hover .mk-aura { opacity: .62; transform: translateZ(-120px) scale(1.62); }

.mk-edge {
    left: 10px; right: 10px; top: 100%; height: 22px; z-index: 0;
    transform-origin: top center; transform: rotateX(-90deg);
    background: linear-gradient(180deg, var(--accent), rgba(10, 20, 45, 0));
    border-radius: 0 0 16px 16px; opacity: .55;
}

.mk-gloss {
    inset: 0; border-radius: inherit; overflow: hidden; z-index: 4;
}
/* Narrow and half-strength: a sweep wide or bright enough to be obvious is
   also wide enough to make the text under it unreadable as it passes. */
.mk-gloss::before {
    content: ''; position: absolute; top: -50%; bottom: -50%; left: -60%; width: 26%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .48), transparent);
    transform: skewX(-16deg);
    transition: left .8s cubic-bezier(.35, .7, .3, 1);
}
.mk-card:hover .mk-gloss::before { left: 125%; }

.mk-index {
    right: 16px; bottom: 2px; z-index: 0;
    font-size: 92px; font-weight: 800; line-height: 1; letter-spacing: -5px;
    color: var(--accent); opacity: .1;
    transform: translateZ(-40px);
    transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}
.mk-card:hover .mk-index { opacity: .2; transform: translateZ(-40px) translateY(-8px); }

/* A slab lifts further and throws a longer shadow than a plain card. */
.mk-slab { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; }
.mk-slab:hover { box-shadow: 0 46px 80px -40px rgba(18, 38, 88, .55); }
/* The medallion is the piece furthest off the face, so it is the piece that
   has to cast the shadow that sells the lift. Qualified with .mk-card because
   the generic `.mk-card:hover .mk-ic` rule is declared further down this file
   and would otherwise win the tie on source order. */
.mk-card.mk-slab:hover .mk-ic {
    transform: translateY(-4px) scale(1.12);
    box-shadow: 0 28px 44px -16px var(--accent);
}
/* The pills fan up in sequence rather than as one bar. */
.mk-slab .mk-pill { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.mk-slab:hover .mk-pill:nth-child(2) { transition-delay: .05s; }
.mk-slab:hover .mk-pill:nth-child(3) { transition-delay: .1s; }
.mk-slab:hover .mk-pill { transform: translateZ(20px); }

/* Every icon gets a size here. An <svg> with no width falls back to 300x150,
   which would blow a card apart the first time one is used somewhere new. */
.mk-i { width: 20px; height: 20px; flex: none; }

/* The icon medallion. It lifts and tints on hover, which is what makes a
   grid of cards feel alive without any of them moving very far. */
.mk-ic {
    width: 46px; height: 46px; border-radius: 14px; flex: none;
    display: grid; place-items: center; color: var(--accent);
    background: var(--accent-soft); border: 1px solid var(--accent-line);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease,
                background .35s ease, color .35s ease;
}
.mk-ic .mk-i { width: 23px; height: 23px; }
.mk-card:hover .mk-ic {
    transform: translateY(-3px) scale(1.06);
    background: var(--accent); color: #fff; border-color: transparent;
    box-shadow: 0 12px 24px -12px var(--accent);
}
.mk-card-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.mk-card-top h3 { font-size: 18px; margin: 3px 0 2px; letter-spacing: -.3px; }
.mk-card-sub { color: var(--muted); font-size: 12.5px; margin: 0; line-height: 1.45; }

/* Shared small parts ---------------------------------------------------- */
.mk-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-pill {
    font-size: 11.5px; font-weight: 550; padding: 4px 10px; border-radius: 20px;
    border: 1px solid var(--border); color: var(--muted); white-space: nowrap;
}
.mk-pill.is-on { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }
.mk-pill.is-off { opacity: .45; text-decoration: line-through; }

.mk-facts { margin: 0; }
.mk-facts > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 10px 0; border-top: 1px solid var(--border);
}
.mk-facts dt {
    font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
    color: var(--muted); flex: none;
}
.mk-facts dd { margin: 0; font-size: 13.5px; line-height: 1.45; text-align: right; }

/* A structure drawn as a chain, because "Class → Section → Subject" is the
   one thing that actually differs between institution types. */
.mk-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; padding: 0; margin: 0 0 6px; }
.mk-chain li {
    position: relative; font-size: 12px; font-weight: 600; padding: 5px 11px;
    border-radius: 8px; background: var(--accent-soft);
    color: var(--accent-ink); border: 1px solid var(--accent-line);
}
.mk-chain li + li { margin-left: 13px; }
.mk-chain li + li::before {
    content: ''; position: absolute; left: -14px; top: 50%; width: 9px; height: 1.5px;
    background: var(--accent); opacity: .55; transform: translateY(-50%);
}

/* ---- institution types -------------------------------------------------- */
.mk-type-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.mk-type-extra { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--border); }
.mk-type-extra > span {
    display: block; font-size: 11px; text-transform: uppercase;
    letter-spacing: .7px; color: var(--muted); margin-bottom: 8px;
}

/* ---- the module explorer ------------------------------------------------
   The filter bar and the grids it drives. Filtering is done by toggling
   .is-off, so the page works with JS off — everything is simply shown. */
/* White with a lifted edge rather than a tinted panel: the same bar has to
   read on the white features page and on the cream band of the home page. */
.mk-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin-bottom: 30px; padding: 12px; border-radius: 15px;
    background: #fff; border: 1px solid var(--border);
    box-shadow: 0 14px 34px -26px rgba(20, 40, 90, .6);
}
/* On a long catalogue the filter has to stay reachable, or it is only useful
   to someone who has not scrolled yet. Offset by the sticky header's height. */
.mk-toolbar.is-sticky {
    position: sticky; top: 68px; z-index: 20;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.mk-search { position: relative; flex: 1 1 240px; min-width: 200px; }
.mk-search .mk-i {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; color: var(--muted); pointer-events: none;
}
.mk-search input {
    width: 100%; padding: 11px 14px 11px 39px; border-radius: 10px;
    border: 1px solid var(--border); background: #fff; font: inherit; font-size: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.mk-search input:focus {
    outline: none; border-color: var(--mk-bright);
    box-shadow: 0 0 0 3px rgba(61, 139, 253, .16);
}
.mk-segmented { display: flex; gap: 3px; padding: 3px; border-radius: 11px; background: #fff; border: 1px solid var(--border); }
.mk-segmented button {
    border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600;
    color: var(--muted); padding: 8px 14px; border-radius: 8px; cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.mk-segmented button:hover { color: var(--mk-ink); }
.mk-segmented button[aria-pressed="true"] {
    background: var(--mk-ramp); color: #fff;
    box-shadow: 0 6px 14px -8px rgba(70, 100, 255, .9);
}
.mk-tally { font-size: 13px; color: var(--muted); margin-left: auto; padding-right: 6px; }
.mk-tally strong { color: var(--mk-ink); font-variant-numeric: tabular-nums; }

.is-off { display: none !important; }
.mk-empty {
    display: none; text-align: center; padding: 50px 20px; color: var(--muted);
    border: 1px dashed var(--border); border-radius: 16px;
}
.mk-explorer.is-empty .mk-empty { display: block; }

/* Group cards — one per feature group, listing its modules. */
.mk-group-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.mk-group-count {
    margin-left: auto; font-size: 12px; font-weight: 700; color: var(--accent-ink);
    background: var(--accent-soft); border: 1px solid var(--accent-line);
    padding: 3px 9px; border-radius: 20px; font-variant-numeric: tabular-nums;
}
.mk-group .mk-card-top { align-items: center; margin-bottom: 14px; }
.mk-group .mk-card-top h3 { margin: 0; font-size: 16px; }
.mk-group ul { list-style: none; padding: 0; margin: 0; }
.mk-group li {
    position: relative; padding: 7px 0 7px 25px; font-size: 14px; line-height: 1.4;
    transition: transform .2s ease, color .2s ease;
}
.mk-group li:hover { transform: translateX(3px); color: var(--accent-ink); }
.mk-group li .mk-i {
    position: absolute; left: 0; top: 9px; width: 14px; height: 14px;
    color: var(--accent); stroke-width: 2.6;
}

/* Module cards — the detailed view on the features page. */
.mk-mod-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.mk-mod p { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0 0 16px; }
.mk-mod .mk-pills { padding-top: 14px; border-top: 1px solid var(--border); }
.mk-mod-plan {
    position: absolute; top: 14px; right: 16px; z-index: 2;
    font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--accent-ink); opacity: .55;
}

.mk-feature-block { margin-bottom: 46px; }
.mk-feature-block > h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.mk-feature-block > h2 .mk-ic { width: 38px; height: 38px; border-radius: 11px; }
.mk-feature-block > h2 .mk-ic .mk-i { width: 19px; height: 19px; }
.mk-count { font-size: 13px; color: var(--muted); font-weight: 500; }

/* ---- plans: a 3D podium --------------------------------------------------
   The perspective lives on the grid, not on each card, so all three plans share
   one vanishing point and read as three objects standing in the same room
   rather than three separately-rotated pictures. The outer plans angle inward,
   the recommended one steps forward, and hovering one straightens it and brings
   it to the front while its neighbours fall back.

   These cards deliberately carry no data-tilt: a per-card pointer tilt would
   overwrite the podium with an inline transform and lose the arrangement. They
   still get the pointer spotlight, which needs no transform. */
.mk-plan-grid {
    display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    align-items: stretch;
    perspective: 1700px; perspective-origin: 50% 42%;
    padding: 20px 0 34px;
}
.mk-plan {
    display: flex; flex-direction: column; padding: 32px 28px;
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;
}
.mk-plan-grid > .mk-plan:first-child { transform: rotateY(11deg) translateZ(-46px); transform-origin: right center; }
.mk-plan-grid > .mk-plan:last-child  { transform: rotateY(-11deg) translateZ(-46px); transform-origin: left center; }
.mk-plan-grid > .mk-plan:only-child  { transform: none; }
.mk-plan.is-featured {
    transform: translateZ(34px);
    box-shadow: 0 40px 80px -34px rgba(70, 100, 255, .55);
    z-index: 2;
}
/* Anything not being pointed at recedes, so the plan under consideration is
   unmistakable. Depth does the dimming, not opacity: any opacity below 1 forces
   transform-style: flat and would collapse the layers inside these cards.
   :not(:hover) keeps these off the hovered card entirely, so the two rules
   never fight over specificity. */
.mk-plan-grid:hover > .mk-plan:not(:hover):first-child { transform: rotateY(13deg) translateZ(-96px); }
.mk-plan-grid:hover > .mk-plan:not(:hover):last-child  { transform: rotateY(-13deg) translateZ(-96px); }
.mk-plan-grid:hover > .mk-plan:not(:hover).is-featured { transform: translateZ(-24px); }
.mk-plan-grid > .mk-plan:hover {
    transform: rotateY(0deg) translateZ(80px); z-index: 3;
    box-shadow: 0 60px 100px -42px rgba(18, 38, 88, .6);
}

/* The plinth each plan stands on — a soft ellipse of contact shadow, laid flat
   in the floor plane so it foreshortens with the card above it. */
/* z-index 0 rather than -1: a negative z-index child of a card that has its
   own stacking context paints behind the card's background and disappears.
   Zero keeps it under the content but still on the page. */
.mk-plinth {
    position: absolute; left: 8%; right: 8%; top: 100%; height: 90px; z-index: 0;
    background: radial-gradient(50% 52% at 50% 0%, rgba(24, 44, 96, .42), transparent 72%);
    transform: rotateX(82deg); transform-origin: top center;
    transition: height .45s ease; pointer-events: none;
}
.mk-plan:hover .mk-plinth { height: 120px; }
/* The featured plan wears its gradient border permanently rather than on
   hover, which is the whole point of flagging it. */
.mk-plan.is-featured::before {
    background: linear-gradient(140deg, var(--mk-bright), var(--mk-violet), var(--mk-mint));
    padding: 1.5px;
}
/* Lifted well off the face so it hangs in front of the card in the podium,
   not printed on it. */
.mk-plan-flag {
    position: absolute; top: -12px; left: 28px; z-index: 5;
    background: var(--mk-ramp); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    padding: 5px 13px; border-radius: 20px;
    box-shadow: 0 8px 18px -8px rgba(70, 100, 255, .9);
    transform: translateZ(56px);
}
/* The price is the thing being compared, so it sits furthest forward. */
.mk-plan .mk-price { transform: translateZ(38px); }
.mk-plan h3, .mk-plan .mk-plan-tag { transform: translateZ(24px); }
.mk-plan .mk-plan-foot { transform: translateZ(30px); }
.mk-plan h3 { font-size: 20px; margin-bottom: 4px; }
.mk-plan-tag { color: var(--muted); font-size: 13.5px; margin: 0 0 20px; }
.mk-price { font-size: 40px; font-weight: 700; letter-spacing: -1.4px; line-height: 1; }
.mk-price span { font-size: 17px; font-weight: 600; color: var(--muted); margin-right: 5px; }
.mk-price small { font-size: 13.5px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
/* The figure itself, so the billing switch can retint just the number. */
.mk-price b { font-weight: inherit; font-variant-numeric: tabular-nums; }
.mk-price-was {
    display: block; font-size: 13px; color: var(--muted); margin-top: 7px; min-height: 18px;
}
.mk-price-was s { opacity: .7; }
.mk-price-was em {
    font-style: normal; font-weight: 700; color: #046b4e; background: #e7fbf4;
    border: 1px solid #b3ecd8; border-radius: 20px; padding: 2px 8px; margin-left: 6px;
}
.mk-plan-limit { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
.mk-plan-desc { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 12px 0 0; }
/* What the plan actually carries — the question every visitor is really
   asking, answered on the card instead of only in the table below it. */
.mk-plan-mods {
    list-style: none; padding: 18px 0 0; margin: 18px 0 0;
    border-top: 1px solid var(--border);
}
.mk-plan-mods li { position: relative; padding: 6px 0 6px 24px; font-size: 13.5px; line-height: 1.4; }
.mk-plan-mods li .mk-i { position: absolute; left: 0; top: 8px; width: 14px; height: 14px; stroke-width: 2.6; }
.mk-plan-mods li.yes .mk-i { color: var(--mk-mint); }
.mk-plan-mods li.no { color: var(--muted); opacity: .58; }
.mk-plan-mods li.no .mk-i { color: var(--border); }
.mk-plan-more { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; padding-left: 24px; }
/* The button lives in its own foot so it can be pushed to the bottom of the
   card (margin-top: auto) and still keep a gap above it (padding-top). Doing
   both on the button itself is not possible — one margin-top wins. Plans with
   different numbers of modules then line their buttons up across the row. */
.mk-plan-foot { margin-top: auto; padding-top: 24px; display: grid; }
.mk-plan .mk-btn { text-align: center; }

/* The monthly / annual switch. Only rendered when the owner has set a
   discount, so the site never invents a saving that does not exist. */
.mk-billing { display: flex; justify-content: center; margin-bottom: 30px; }
.mk-billing .mk-segmented { background: var(--cream, #f7f6f3); }
.mk-billing .mk-save {
    font-size: 11px; font-weight: 700; margin-left: 7px; padding: 2px 7px;
    border-radius: 20px; background: #e7fbf4; color: #046b4e; border: 1px solid #b3ecd8;
}
.mk-segmented button[aria-pressed="true"] .mk-save { background: rgba(255,255,255,.22); color: #fff; border-color: transparent; }

/* ---- comparison table --------------------------------------------------- */
.mk-compare {
    width: 100%; border-collapse: collapse; background: #fff;
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.mk-compare th, .mk-compare td {
    padding: 13px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border);
}
.mk-compare thead th {
    background: linear-gradient(135deg, var(--mk-ink), var(--mk-deep)); color: #fff; font-size: 13px;
}
.mk-compare thead th:not(:first-child) { text-align: center; }
.mk-compare tbody tr { transition: background .15s ease; }
.mk-compare tbody tr:hover { background: rgba(61, 139, 253, .05); }
.mk-compare td small { display: block; color: var(--muted); font-size: 11.5px; }
.mk-compare-group td {
    background: var(--cream, #f7f6f3); font-weight: 700; font-size: 12px;
    text-transform: uppercase; letter-spacing: .8px; color: var(--muted);
}
.mk-cell { text-align: center; font-weight: 700; }
.mk-cell.yes { color: var(--success, #198754); }
.mk-cell.no { color: var(--border); }

/* ---- institutions ------------------------------------------------------- */
.mk-client-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); }
.mk-client { display: flex; align-items: center; gap: 15px; padding: 18px 20px; border-radius: 15px; }
.mk-client-mark {
    width: 46px; height: 46px; border-radius: 13px; flex: none;
    background: linear-gradient(145deg, var(--mk-deep), var(--accent)); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: 19px;
    box-shadow: 0 10px 22px -12px var(--accent);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.mk-card:hover .mk-client-mark { transform: translateY(-3px) rotate(-4deg); }
.mk-client-body { min-width: 0; flex: 1; }
.mk-client strong { display: block; font-size: 15px; line-height: 1.3; }
.mk-client small {
    display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The type mark only appears on hover, so a wall of institutions stays calm. */
.mk-client-type {
    flex: none; width: 20px; height: 20px; color: var(--accent);
    opacity: 0; transform: translateX(-5px);
    transition: opacity .3s ease, transform .3s ease;
}
.mk-card:hover .mk-client-type { opacity: .8; transform: none; }

/* ---- forms -------------------------------------------------------------- */
.mk-split { display: grid; gap: 32px; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); align-items: start; }
.mk-form-card {
    background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 32px;
    box-shadow: 0 24px 60px -40px rgba(20, 40, 90, .55);
}
.mk-field-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.mk-form-card .form-group { margin-bottom: 16px; }
.mk-form-card label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.mk-form-card small { color: var(--muted); font-size: 12px; }
.mk-fineprint { color: var(--muted); font-size: 12.5px; line-height: 1.55; margin-top: 14px; }
.mk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mk-contact-side {
    background: linear-gradient(160deg, var(--cream, #f7f6f3), #eef2fb);
    border-radius: 18px; padding: 28px; border: 1px solid var(--border);
}
.mk-contact-side h3 { font-size: 15px; margin-bottom: 16px; }
.mk-contact-side p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.mk-contact-side p span {
    display: block; font-size: 11.5px; text-transform: uppercase;
    letter-spacing: .7px; color: var(--muted); margin-bottom: 2px;
}
.mk-side-cta { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.mk-side-cta strong { display: block; margin-bottom: 5px; }
.mk-side-cta p { color: var(--muted); font-size: 13.5px; }
.mk-ticklist { list-style: none; padding: 0; margin: 0; }
.mk-ticklist li { padding: 8px 0 8px 24px; position: relative; font-size: 14px; line-height: 1.45; }
.mk-ticklist li::before {
    content: "\2713"; position: absolute; left: 0; top: 8px;
    width: 16px; height: 16px; border-radius: 5px; font-size: 10px;
    display: grid; place-items: center; color: #fff;
    background: var(--mk-ramp);
}
.mk-summary { margin: 0 0 22px; }
.mk-summary > div {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 12px 0; border-bottom: 1px solid var(--border);
}
.mk-summary dt { color: var(--muted); font-size: 13px; }
.mk-summary dd { margin: 0; font-size: 14px; text-align: right; word-break: break-all; }
.mk-next { margin-top: 26px; }
.mk-next h3 { font-size: 15px; margin-bottom: 10px; }
.mk-next ol { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.8; }

/* ---- inner page headers ------------------------------------------------- */
.mk-page-head {
    position: relative; isolation: isolate; color: #fff; padding: 70px 0 62px;
    background:
        radial-gradient(760px 380px at 82% -20%, rgba(124, 92, 255, .42), transparent 62%),
        linear-gradient(160deg, var(--mk-ink) 0%, #16295c 100%);
    overflow: hidden;
}
.mk-page-head::after {
    content: ''; position: absolute; left: -20%; right: -20%; bottom: -40px; height: 200px;
    z-index: -1; opacity: .22;
    background-image:
        linear-gradient(rgba(140, 190, 255, .3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(140, 190, 255, .3) 1px, transparent 1px);
    background-size: 54px 54px;
    transform: perspective(300px) rotateX(66deg);
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(to top, #000, transparent 85%);
    mask-image: linear-gradient(to top, #000, transparent 85%);
}
.mk-page-head h1 {
    font-family: var(--display, inherit); font-size: clamp(27px, 3.6vw, 43px);
    letter-spacing: -.9px; margin: 10px 0 0;
}
.mk-page-head p { color: rgba(226, 236, 255, .8); max-width: 64ch; margin: 14px 0 0; font-size: 16px; line-height: 1.6; }

/* ---- closing band + footer ---------------------------------------------- */
.mk-cta-band {
    position: relative; isolation: isolate; color: #fff; padding: 84px 0; text-align: center;
    background:
        radial-gradient(620px 320px at 50% 0%, rgba(61, 139, 253, .3), transparent 65%),
        linear-gradient(150deg, var(--mk-ink), #14265a);
    overflow: hidden;
}
.mk-cta-band::before {
    content: ''; position: absolute; inset: -40%; z-index: -1; opacity: .5;
    background: conic-gradient(from 90deg at 50% 50%, transparent, rgba(124,92,255,.2), transparent 55%);
    animation: mk-aurora 28s linear infinite reverse;
}
.mk-cta-band h2 { font-family: var(--display, inherit); font-size: clamp(24px, 3vw, 36px); letter-spacing: -.7px; }
.mk-cta-band p { color: rgba(226, 236, 255, .78); max-width: 60ch; margin: 14px auto 0; line-height: 1.6; }
.mk-cta-band .mk-hero-actions { justify-content: center; }

.mk-foot { background: #060b18; color: rgba(190, 205, 235, .62); padding: 58px 0 26px; font-size: 14px; }
.mk-foot-inner { display: grid; gap: 32px; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(130px, 1fr)); }
.mk-foot h4 { color: #fff; font-size: 12.5px; text-transform: uppercase; letter-spacing: .9px; margin-bottom: 14px; }
.mk-foot a, .mk-foot span { display: block; color: rgba(190, 205, 235, .62); margin-bottom: 9px; transition: color .18s ease; }
.mk-foot a:hover { color: #fff; text-decoration: none; }
.mk-foot-brand {
    color: #fff; font-size: 19px; font-weight: 700; margin-bottom: 8px;
    background: linear-gradient(100deg, #fff, var(--mk-glow));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.mk-foot p { margin: 0 0 8px; line-height: 1.55; }
.mk-foot-note { color: rgba(160, 178, 210, .45); font-size: 13px; }
.mk-foot-legal {
    border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 36px; padding-top: 20px;
    color: rgba(160, 178, 210, .45); font-size: 12.5px;
}

/* ---- responsive --------------------------------------------------------- */
@media screen and (max-width: 980px) {
    .mk-hero-grid { grid-template-columns: 1fr; gap: 70px; }
    /* The console needs room below it for the panes that hang outside. */
    .mk-stage { margin-bottom: 30px; }

    /* The podium is an arrangement of three cards standing side by side. The
       grid drops to two columns a little below this width, which would leave
       the third plan rotated on a row of its own, so the whole arrangement
       comes apart into flat cards well before that happens. */
    .mk-plan-grid { perspective: none; padding: 14px 0; }
    .mk-plan-grid > .mk-plan:first-child,
    .mk-plan-grid > .mk-plan:last-child,
    .mk-plan.is-featured,
    .mk-plan-grid:hover > .mk-plan:not(:hover):first-child,
    .mk-plan-grid:hover > .mk-plan:not(:hover):last-child,
    .mk-plan-grid:hover > .mk-plan:not(:hover).is-featured,
    .mk-plan-grid > .mk-plan:hover { transform: none; }
    .mk-plinth { display: none; }
}

@media screen and (max-width: 860px) {
    .mk-burger { display: grid; place-items: center; width: 40px; height: 40px; cursor: pointer; }
    .mk-burger svg { width: 22px; height: 22px; fill: none; stroke: var(--mk-ink); stroke-width: 2; stroke-linecap: round; }
    .mk-nav {
        display: none; width: 100%; flex-direction: column; align-items: stretch;
        gap: 0; padding: 8px 0 12px; border-top: 1px solid var(--border);
    }
    .mk-nav a { padding: 12px 4px; }
    .mk-nav a:not(.mk-cta)::after { display: none; }
    .mk-nav-toggle:checked ~ .mk-nav { display: flex; }
    .mk-head-inner { flex-wrap: wrap; }
    .mk-split { grid-template-columns: 1fr; }
    .mk-foot-inner { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .mk-stats { gap: 26px; }
    .mk-hero { padding: 74px 0 70px; }
    .mk-section { padding: 66px 0; }
    /* Panes that hang off the console crowd a narrow screen. */
    .mk-pane-a, .mk-pane-b { display: none; }
    .mk-console { transform: none; animation: none; }
    /* The toolbar stacks rather than squeezing the search box to nothing, and
       the type buttons wrap onto a second row instead of clipping the longest
       label — "Universities" does not fit beside the other three at 375px. */
    .mk-toolbar { gap: 10px; }
    .mk-search { flex: 1 1 100%; }
    .mk-tally { margin-left: 0; }
    .mk-segmented { flex: 1 1 100%; flex-wrap: wrap; }
    .mk-segmented button { flex: 1 1 42%; padding: 9px 8px; }
    /* Sticky costs a fifth of a phone screen once it has wrapped, so it only
       sticks where there is room for it. */
    .mk-toolbar.is-sticky { position: static; }
    .mk-card { padding: 22px; }
    .mk-index { font-size: 68px; }
    .mk-billing .mk-segmented { flex-wrap: nowrap; }
    .mk-billing .mk-segmented button { flex: 1 1 auto; }
}

/* ---- motion off ---------------------------------------------------------
   Someone who has asked their system for less motion gets a page that is
   still complete, just still. Nothing here is load-bearing for meaning. */
@media (prefers-reduced-motion: reduce) {
    .mk-hero::before,
    .mk-cta-band::before,
    .mk-console,
    .mk-bars i,
    .mk-ring,
    .mk-hero h1 .mk-shine { animation: none !important; }
    .mk-hero h1 .mk-shine {
        -webkit-text-fill-color: #fff; color: #fff; background: none;
    }
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .mk-btn:hover, .mk-cta:hover, .mk-group li:hover { transform: none; }
    /* Cards keep their colour changes — those carry meaning — but stop
       moving. The spotlight is a gradient, not motion, so it stays. */
    .mk-card, .mk-ic, .mk-client-mark, .mk-client-type {
        transition-property: background, color, border-color, box-shadow, opacity;
    }
    .mk-card:hover .mk-ic { transform: none; }
    .mk-card:hover .mk-client-mark { transform: none; }
    .mk-card:hover .mk-client-type { transform: none; }
    #mkField, #mkGl { display: none; }
    /* The field is decoration with no information in it, and twenty drifting
       objects is exactly what someone turning motion off is asking to avoid. */
    .mk-bg { display: none; }
    .mk-section-alt { background: var(--cream, #f7f6f3); }
    /* The slab and the podium are motion. What they convey — which plan is
       recommended, which module belongs to which group — is already carried by
       the flag, the border and the headings, so nothing is lost by stilling
       them. Colour and shadow stay; only the movement goes. */
    .mk-aura, .mk-edge, .mk-gloss, .mk-plinth { display: none; }
    .mk-index { transition: none; }
    .mk-plan-grid { perspective: none; }
    .mk-plan-grid > .mk-plan:first-child,
    .mk-plan-grid > .mk-plan:last-child,
    .mk-plan.is-featured,
    .mk-plan-grid:hover > .mk-plan:not(:hover):first-child,
    .mk-plan-grid:hover > .mk-plan:not(:hover):last-child,
    .mk-plan-grid:hover > .mk-plan:not(:hover).is-featured,
    .mk-plan-grid > .mk-plan:hover { transform: none; }
    .mk-slab:hover .mk-pill { transform: none; }
    .mk-card.mk-slab:hover .mk-ic { transform: none; }
}