/* ==========================================================================
   defcon-app.com, the public site
   BL-38.

   Layered on top of defcon-ui.css so the site and the product are the same
   thing: the same navy and amber, the same Inter, the same panels, the same
   status tints on the alarm levels.

   Dark, and not a preference. The product is dark, the alarm board people watch
   during an incident is dark, and this site is where somebody decides whether
   the two are worth buying. A white brochure in front of a dark product asks
   the reader to imagine the join. So the tokens are pinned to their dark values
   here rather than following the reader's theme, which is also why nothing on
   this site reads defcon-ui's light block.

   The old site is not being patched: its type came from Roboto and Raleway, its
   colours from main.css and a hundred inline hexes, and its sections faded in
   on scroll from opacity 0, which means a reader whose observer never fires
   sees an empty page. This replaces that, section by section.
   ========================================================================== */

:root[data-theme="dark"] .mk-site,
.mk-site {
    --mk-max: 1180px;
    font-family: var(--dc-font);
    color: var(--ink);
    background: var(--page);
}

.mk-wrap {
    max-width: var(--mk-max);
    margin: 0 auto;
    padding: 0 clamp(18px, 4vw, 40px);
}

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

.mk-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--page) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.mk-header-in {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 40px);
    height: 72px;
}
.mk-logo { line-height: 0; }
.mk-logo img { max-height: 38px; max-width: 170px; width: auto; }

.mk-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.mk-nav a {
    font-size: calc(13.5px * var(--dc-text));
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    padding: 8px 13px;
    border-radius: var(--radius-control);
    white-space: nowrap;
}
.mk-nav a:hover { color: var(--ink); background: var(--hover); text-decoration: none; }

.mk-signin {
    font-size: calc(13.5px * var(--dc-text));
    font-weight: 700;
    padding: 9px 18px;
    border-radius: var(--radius-control);
    background: var(--accent-fill);
    color: var(--accent-ink) !important;
    text-decoration: none;
    white-space: nowrap;
}
.mk-signin:hover { filter: brightness(1.08); text-decoration: none; }

.mk-burger {
    display: none;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    color: var(--ink);
    padding: 8px 12px;
    cursor: pointer;
}
@media (max-width: 860px) {
    .mk-nav { display: none; }
    .mk-nav.is-open {
        display: flex;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px clamp(18px, 4vw, 40px) 18px;
        background: var(--card);
        border-bottom: 1px solid var(--line);
    }
    .mk-burger { display: block; margin-left: auto; }
}

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

.mk-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
    padding: clamp(40px, 7vw, 96px) 0 clamp(36px, 6vw, 80px);
}
@media (max-width: 980px) { .mk-hero { grid-template-columns: minmax(0, 1fr); } }

.mk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: calc(11.5px * var(--dc-text));
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--amber);
    margin: 0 0 18px;
}
.mk-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--amber);
}

.mk-hero h1 {
    font-size: clamp(34px, 5.4vw, 62px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.04;
    margin: 0 0 20px;
    color: var(--ink);
    text-wrap: balance;
}
/* The body comes from the banner-section row as rich text, so the paragraphs inside it are
   whatever the editor produced. They are styled here rather than in the markup. */
.mk-hero-body p,
.mk-hero p {
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 16px;
    max-width: 56ch;
}
.mk-hero-body p:last-child { margin-bottom: 0; }
.mk-hero-body strong, .mk-hero p strong { color: var(--ink); font-weight: 600; }
.mk-hero-body a { color: var(--link); }

.mk-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.mk-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: calc(14px * var(--dc-text));
    font-weight: 700;
    padding: 13px 22px;
    border-radius: var(--radius-control);
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
}
.mk-btn-primary { background: var(--accent-fill); color: var(--accent-ink); }
.mk-btn-primary:hover { filter: brightness(1.08); color: var(--accent-ink); text-decoration: none; }
.mk-btn-quiet { background: transparent; border-color: var(--line); color: var(--ink); }
.mk-btn-quiet:hover { background: var(--hover); color: var(--ink); text-decoration: none; }

/* --------------------------------------------------------------------------
   The board in the hero

   Not a screenshot. The old hero carried a PNG of the alarm page as it looked
   in 2024, and it had been wrong since the day the page changed. This is the
   real thing, built from the same tokens and the same alarm colours, so it
   cannot go stale, it is sharp on any screen, and it costs no image to load.
   -------------------------------------------------------------------------- */

.mk-board {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    overflow: hidden;
}
.mk-board-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    background: var(--bar);
    border-bottom: 1px solid var(--line);
}
.mk-board-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
.mk-board-bar span {
    margin-left: 8px;
    font-size: 11px;
    color: var(--muted);
    font-family: ui-monospace, Menlo, monospace;
}

.mk-board-body { padding: clamp(16px, 2.4vw, 26px); display: grid; gap: 14px; }

.mk-board-now {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: clamp(14px, 2vw, 22px);
    border-radius: 14px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-left: 6px solid var(--mk-level, var(--amber));
}
.mk-gauge { display: flex; align-items: flex-end; gap: 4px; height: 46px; }
.mk-gauge i { width: 9px; border-radius: 3px; display: block; }
.mk-board-k {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.mk-board-level {
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--mk-level, var(--ink));
    margin: 3px 0 2px;
}
.mk-board-meta { font-size: 12px; color: var(--muted); }

.mk-levels { display: grid; gap: 6px; }
.mk-level {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-left: 5px solid var(--band);
    font-size: 12.5px;
}
.mk-level.is-now { background: var(--band); border-color: var(--band); color: var(--band-ink); }
.mk-level b { font-weight: 800; letter-spacing: -.01em; }
.mk-level span { color: var(--muted); }
.mk-level.is-now span { color: inherit; opacity: .9; }

/* --------------------------------------------------------------------------
   Shared section furniture

   The sections themselves are defined further down, under .mk-site, along with
   the three grounds. There used to be a second, earlier copy of those rules here
   from the first pass at this sheet, carrying border-top: 1px solid var(--line).
   Between two sections of different grounds that line is invisible; on a page
   with one section, like the privacy policy, it is a hairline stretched across
   the width of the window under the header for no reason.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* --------------------------------------------------------------------------
   Pricing, which is the last section still built out of the old markup

   The plan card and its feature list are staying as they are for now: the copy
   inside them comes from thirty columns on the plans table and rearranging that
   is a job of its own. What changes here is the furniture around it.
   -------------------------------------------------------------------------- */

.mk-site .mk-section-head { text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.mk-site .mk-section-head h2 { margin: 0; }

.mk-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
    gap: clamp(14px, 1.8vw, 22px);
    align-items: stretch;
}

.mk-site .pricing {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    padding: clamp(20px, 2.2vw, 26px);
    height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--ink);
}

/* The plan name sat in a filled band flush to the card's edge, because the ground
   under it was being repainted while the padding still belonged to the old design.
   A heading does not need a box: it needs to be the largest thing in the card and
   to have a rule under it. */
.mk-site .pricing_header {
    background: none;
    padding: 0 0 14px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--line);
}
.mk-site .pricing_section .pricing_header h4,
.mk-site .pricing_header h4 {
    font-size: clamp(18px, 1.7vw, 21px);
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--ink);
    margin: 0 0 3px;
}
.mk-site .pricing_header small { font-size: 12px; color: var(--muted); }

.mk-site .pricing .pb-5 { padding-bottom: 0 !important; margin-bottom: 0 !important; flex: 1; }
.mk-site .pricing .features ul { padding: 0; margin: 0; list-style: none; }
/* Not a grid and not a flex row, which is what broke it the first time: the item's
   text sits in the markup as bare text nodes around a <strong>, and a grid turns
   each of those into a grid item of its own. "Subscription:", "$49" and "/ Month"
   were laid out as three cells, the price landing in the 22px icon column and
   wrapping down the middle of the number. The tick is taken out of the flow
   instead, and the text stays one paragraph. */
.mk-site .pricing_section .pricing .features ul li,
.mk-site .pricing .features ul li {
    position: relative;
    padding: 6px 0 6px 30px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
}
.mk-site .pricing .features ul li strong { color: var(--ink); font-weight: 700; white-space: nowrap; }
.mk-site .pricing .features ul li svg { position: absolute; left: 0; top: 7px; }

.mk-plan-foot { padding-top: 18px; display: grid; }
.mk-plan-foot .mk-btn { width: 100%; }

/* --------------------------------------------------------------------------
   Odds and ends from the old sheet

   Bootstrap's colour utilities, which the remaining markup still uses directly.
   text-white is left alone: it sits on coloured fills where white is right
   either way.
   -------------------------------------------------------------------------- */

.mk-site .bg-white       { background-color: var(--card) !important; color: var(--ink) !important; }
.mk-site .bg-light       { background-color: var(--soft) !important; color: var(--ink) !important; }
.mk-site .text-dark      { color: var(--ink) !important; }
.mk-site .text-body      { color: var(--ink) !important; }
.mk-site .text-muted     { color: var(--muted) !important; }
.mk-site .text-secondary,
.mk-site .text-body-secondary { color: var(--muted) !important; }
.mk-site .border, .mk-site .border-top, .mk-site .border-bottom { border-color: var(--line) !important; }

.mk-site h1, .mk-site h2, .mk-site h3,
.mk-site h4, .mk-site h5, .mk-site h6 { color: var(--ink); }

/* The file is a transparent PNG of a book standing up, and a box-shadow on a
   transparent PNG is drawn around the canvas, not around the book: it put a
   rectangle of shade behind an image that has no rectangle in it, which is what
   made it look like it was sitting on an invisible white card. A drop-shadow
   filter follows the alpha, so it falls where the book is. */
.mk-site .mk-cover {
    max-width: 340px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .45));

    /* The bottom sixth of the file is the mockup renderer's own shadow, painted as
       opaque neutral grey around #212121. There is nothing brown in it, but a
       neutral grey against a blue-tinted navy reads warm, so it appears as a brown
       smear under the book and the handset. The artwork proper ends at 84% of the
       height; below that is only shade, and it is faded into the page. */
    -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
}
.mk-prose-wide { max-width: 78ch; }

/* The footer, which was its own near-black. */
.mk-site footer, .mk-site .footer_section {
    background: var(--card) !important;
    border-top: 1px solid var(--line);
    color: var(--muted);
}
.mk-site footer a, .mk-site .footer_section a { color: var(--muted); }
.mk-site footer a:hover, .mk-site .footer_section a:hover { color: var(--ink); }
.mk-site .footer_sec { padding: 26px 0 !important; }
.mk-site .copyright p { font-size: 12.5px; margin: 0; }


/* --------------------------------------------------------------------------
   The logo, in the header and in the footer

   The file in settings is a 3840 by 2160 canvas carrying a wordmark 511px tall
   across the middle: under a quarter of the height is ink. Both places used to
   cap it with max-height, so they reserved four times the room the mark needed
   and drew the mark at a quarter of the size they had asked for. logoTrimmed()
   crops the empty margin and resamples once, so what arrives here is the
   wordmark and nothing else, and the height below is the height you get.

   White, because the mark is a single flat #235479 and this site is dark: at
   its own colour it measures 1.4:1 against the header. brightness(0) flattens
   it to black whatever it was, invert(1) lifts that to white, which keeps the
   letterforms exactly as drawn rather than tinting them.
   -------------------------------------------------------------------------- */

.mk-site .mk-logo-img {
    height: 34px;
    width: auto;
    max-width: min(300px, 52vw);
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.mk-site .mk-logo-foot { height: 28px; opacity: .85; }
.mk-site .mk-brand { padding: 0; margin: 0; display: inline-flex; align-items: center; }

@media (max-width: 575.98px) {
    .mk-site .mk-logo-img { height: 26px; }
}

/* --------------------------------------------------------------------------
   Sections

   Three grounds, alternating, so a reader can tell one section from the next
   without a rule between them. About and the e-book used to share one, which
   made the bottom of the page read as a single long block.
   -------------------------------------------------------------------------- */

.mk-site .mk-section { padding: clamp(52px, 7vw, 104px) 0; background: var(--page); }
.mk-site .mk-section-card { background: var(--card); }
.mk-site .mk-section-deep { background: var(--soft); }

.mk-site .mk-section h2 {
    font-size: clamp(25px, 3.1vw, 38px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0 0 22px;
    color: var(--ink);
    text-wrap: balance;
}
.mk-site .mk-section h3 {
    font-size: clamp(16px, 1.5vw, 18.5px);
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 8px;
    color: var(--ink);
}

.mk-prose { color: var(--muted); font-size: clamp(14.5px, 1.35vw, 16.5px); line-height: 1.7; max-width: 58ch; }
.mk-prose p { margin: 0 0 16px; }
.mk-prose p:last-child { margin-bottom: 0; }
.mk-prose strong, .mk-prose b { color: var(--ink); font-weight: 600; }
.mk-prose a { color: var(--link); }
.mk-prose ul { margin: 0 0 12px; padding-left: 20px; }

/* Text one side, the product the other. The figure column is sized to what it
   holds rather than to half the row, so a phone does not sit in the middle of
   an empty half-page. */
.mk-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}
.mk-split-wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
.mk-figure { display: flex; justify-content: center; min-width: 0; }
.mk-split-flip .mk-figure { order: -1; }

@media (max-width: 860px) {
    .mk-split, .mk-split-wide { grid-template-columns: minmax(0, 1fr); }
    .mk-split-flip .mk-figure { order: 0; }
}

/* The store badges are supplied artwork and keep their own colours. */
/* Supplied artwork, so the badges keep their own colours and only their height is
   set here, which is also the only way to make the pair sit level: one is drawn
   with a hairline border and the other is not. */
.mk-stores { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; }
.mk-stores img { height: 58px; width: auto; display: block; }

/* A plate for artwork that is not ours to restyle: the handset in the
   notification section is a photograph of somebody's Messages app, and a white
   rectangle laid straight on a dark page reads as a hole rather than a screen. */
.mk-plate {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 14px 14px 0;
    box-shadow: var(--shadow);
    max-width: 340px;
}
.mk-plate img { display: block; width: 100%; height: auto; border-radius: 12px 12px 0 0; }

/* --------------------------------------------------------------------------
   Where the three feature cards used to be

   Made for the big screen, Off your network, A link you can share. Three boxes
   asserting things the rest of the page demonstrates: the hero board is the big
   screen, the app section is the link, and the notification section is the alert.
   A row of three cards is also the most templated device a B2B page has, and
   everything else here argues by showing the product rather than by claiming.

   The one fact they carried that nothing else on the page says is that the
   platform runs independently of the customer's own infrastructure. That is now a
   line under the hero, .mk-hero-note, rather than a box.
   -------------------------------------------------------------------------- */

/* Specific enough to beat ".mk-hero p", which is where the hero's paragraph rhythm
   is set and which was zeroing the space above this. */
.mk-site .mk-hero .mk-hero-note {
    margin: 30px 0 0;
    padding-left: 13px;
    border-left: 2px solid var(--accent-fill);
    font-size: clamp(13.5px, 1.25vw, 15px);
    line-height: 1.6;
    color: var(--muted);
    max-width: 46ch;
}

/* --------------------------------------------------------------------------
   The drawn screens: a phone, and a window
   -------------------------------------------------------------------------- */

.mk-phone {
    width: min(266px, 78vw);
    aspect-ratio: 9 / 18.5;
    border-radius: 36px;
    background: #0A1120;
    border: 1px solid var(--line);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .38);
    padding: 9px;
    position: relative;
    flex: none;
}
.mk-phone::before {
    content: "";
    position: absolute;
    top: 17px; left: 50%;
    transform: translateX(-50%);
    width: 78px; height: 18px;
    border-radius: 11px;
    background: #0A1120;
    z-index: 2;
}
.mk-phone-screen {
    height: 100%;
    border-radius: 28px;
    overflow: hidden;
    background: var(--page);
    display: flex;
    flex-direction: column;
}
.mk-phone-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 18px 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ink);
}
.mk-phone-icons { display: inline-flex; gap: 5px; font-size: 9px; color: var(--muted); }
.mk-phone-title {
    padding: 6px 16px 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    text-align: center;
}
.mk-phone-body { padding: 12px; display: grid; gap: 9px; align-content: start; min-height: 0; }

.mk-phone-now {
    background: var(--band);
    color: var(--band-ink);
    border-radius: 12px;
    padding: 11px 13px;
    display: grid;
    gap: 1px;
}
.mk-phone-k { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .82; }
.mk-phone-now strong { font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.mk-phone-meaning { font-size: 11px; opacity: .9; }

.mk-phone-list { display: grid; gap: 4px; }
.mk-phone-row {
    display: grid;
    grid-template-columns: 4px auto 1fr;
    gap: 8px;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 7px 9px;
    font-size: 10.5px;
}
.mk-phone-row i { width: 4px; height: 16px; border-radius: 2px; background: var(--band); display: block; }
.mk-phone-row b { color: var(--ink); font-weight: 700; }
.mk-phone-row span { color: var(--muted); }
.mk-phone-row.is-now { border-color: var(--band); background: var(--soft); }
.mk-phone-note { font-size: 9.5px; color: var(--muted); text-align: center; padding-top: 2px; }

.mk-field { display: grid; gap: 5px; }
.mk-field-label { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mk-field-box {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 9px 10px;
    font-size: 11.5px;
    color: var(--ink);
}
.mk-field-box i { width: 4px; height: 14px; border-radius: 2px; background: var(--band); display: block; }
.mk-field-box em { margin-left: auto; font-size: 9px; color: var(--muted); font-style: normal; }

.mk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 8px;
}
.mk-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--chip);
    color: var(--chip-ink);
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 9.5px;
    font-weight: 600;
    white-space: nowrap;
}
.mk-chip i { font-size: 8px; opacity: .65; }

.mk-phone-actions { display: flex; gap: 7px; margin-top: 3px; }
.mk-phone-btn {
    flex: 1;
    text-align: center;
    border-radius: 9px;
    padding: 9px;
    font-size: 11px;
    font-weight: 700;
    background: var(--accent-fill);
    color: var(--accent-ink);
}
.mk-phone-btn-quiet { background: var(--card); border: 1px solid var(--line); color: var(--ink); }

.mk-window {
    width: 100%;
    max-width: 480px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
    overflow: hidden;
}
.mk-window-body { padding: 16px; display: grid; gap: 12px; }
.mk-window-tools { display: flex; align-items: center; gap: 8px; }
.mk-tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink);
}
.mk-window-search {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 10px;
}
.mk-filelist { display: grid; gap: 4px; }
.mk-file {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto auto;
    gap: 11px;
    align-items: center;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--soft);
    font-size: 12.5px;
}
.mk-file > .fa-folder { color: #e6b64c; }
.mk-file b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-file span, .mk-file em { color: var(--muted); font-size: 11px; font-style: normal; }

/* --------------------------------------------------------------------------
   Dialogues

   Bootstrap's modal is white paper with a white close button and grey hairlines
   drawn for it. On this site it was a white sheet dropped over a dark page.
   -------------------------------------------------------------------------- */

.mk-site .modal-content {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
    color: var(--ink);
}
/* main.css makes this a centred block with the close button absolutely placed
   25px down and 15px in, which puts it level with nothing in particular. A row,
   with the heading on the left and the control on the right. */
.mk-site .modal-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
    padding: 16px 20px;
}
.mk-site .modal-header .btn-close {
    position: static;
    margin: 0;
    padding: 10px;
    flex: none;
}
.mk-site .modal-title { font-size: 17px; font-weight: 700; color: var(--ink); }
.mk-site .modal-body { padding: 20px 22px 22px; }
.mk-site .modal-body.px-xl-5 { padding-left: 22px; padding-right: 22px; }
.mk-site .modal-backdrop.show { opacity: .62; }

/* The close button is a black SVG baked into Bootstrap's stylesheet as a data
   URI, so it cannot be recoloured. Inverting it is what makes it visible. */
.mk-site .btn-close {
    filter: invert(1) grayscale(1) brightness(1.7);
    opacity: .65;
}
.mk-site .btn-close:hover { opacity: 1; }

.mk-site .modal .form-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}
.mk-site .modal .form-control {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    color: var(--ink);
    font-size: 14px;
    padding: 10px 12px;
}
.mk-site .modal .form-control::placeholder { color: var(--placeholder); }
.mk-site .modal .form-control:focus {
    background: var(--soft);
    color: var(--ink);
    border-color: var(--accent-fill);
    box-shadow: 0 0 0 3px rgba(127, 178, 224, .22);
}
.mk-site .modal textarea.form-control { min-height: 104px; resize: vertical; }
.mk-site .modal .text-danger { color: var(--ink-red) !important; }
.mk-site .modal .btn-primary {
    background: var(--accent-fill);
    border-color: var(--accent-fill);
    color: var(--accent-ink);
    border-radius: var(--radius-control);
    font-weight: 700;
    padding: 11px 16px;
}
.mk-site .modal .btn-primary:hover { filter: brightness(1.08); color: var(--accent-ink); }

/* Google's badge sits fixed in the corner of every page and is the one piece of
   another company's furniture on the site. Hiding it is allowed as long as the
   attribution it carries is written out, which each form now does. */
.grecaptcha-badge { visibility: hidden; }
.mk-recaptcha-note {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted);
    margin: 14px 0 0;
}
.mk-recaptcha-note a { color: var(--muted); text-decoration: underline; }
.mk-recaptcha-note a:hover { color: var(--ink); }

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

   main.css pins it to the top of the window on a white ground with uppercase
   700-weight links in near-black. On a dark page that is a white band across
   the top, and a white wordmark inside it is invisible.
   -------------------------------------------------------------------------- */

.mk-site .header_sec {
    background-color: #0F1422 !important;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
}
.mk-site .header_sec .container { padding-top: 10px; padding-bottom: 10px; }

.mk-site .header_sec .nav-link {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: none;
    padding: 8px 13px !important;
    border-radius: 8px;
}
.mk-site .header_sec .nav-link:hover,
.mk-site .header_sec .nav-link:focus { color: var(--ink); background: var(--hover); }
.mk-site .header_sec .dropdown-toggle::after { color: var(--muted); }

/* Login. btn-dark on a dark header is a shape you cannot see. */
.mk-site .header_sec .btn-dark {
    background: var(--accent-fill);
    border-color: var(--accent-fill);
    color: var(--accent-ink);
    font-size: 12.5px;
    letter-spacing: .04em;
    padding: 8px 18px !important;
}
.mk-site .header_sec .btn-dark:hover { filter: brightness(1.08); color: var(--accent-ink); }

.mk-site .header_sec .dropdown-menu {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 6px;
    box-shadow: var(--shadow);
}
/* main.css names this one four classes deep, ".header_sec .navbar-nav
   .dropdown-menu .dropdown-item", at #212121, so the PDF names under Resources
   stayed near-black on the dark panel. Matched, rather than reached for
   !important. */
.mk-site .header_sec .navbar-nav .dropdown-menu .dropdown-item,
.mk-site .header_sec .dropdown-item {
    color: var(--ink);
    border-radius: 8px;
    font-size: 13px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mk-site .header_sec .navbar-nav .dropdown-menu .dropdown-item:hover,
.mk-site .header_sec .dropdown-item:hover { background: var(--hover) !important; color: var(--ink); }

.mk-site .navbar-toggler {
    border-color: var(--line);
    padding: 6px 10px;
}
.mk-site .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(127, 178, 224, .22); }
.mk-site .navbar-toggler-icon {
    filter: invert(1) brightness(1.6);
}

/* --------------------------------------------------------------------------
   Copy that came out of the editor

   Every section's body is rich text typed into Summernote, and Summernote bakes
   the colour and the font stack of whatever was on screen at the time into the
   markup: three of the feature cards carry color: rgb(51, 51, 51) on a span,
   which is a grey chosen for white paper and all but invisible here.

   An inline style beats any class, so this is one of the few places !important
   is the answer rather than a shortcut. It is narrow on purpose: it applies only
   to elements that carry an inline colour or face, and it hands them back the
   colour they would have inherited, so nothing that was deliberately coloured
   for meaning is touched, because none of it is.
   -------------------------------------------------------------------------- */

.mk-site .mk-prose [style*="color"],
.mk-site .mk-prose [style*="COLOR"] { color: inherit !important; }
.mk-site .mk-prose [style*="font-family"] { font-family: inherit !important; }
.mk-site .mk-prose [style*="background"] { background: none !important; }
.mk-site .mk-prose strong [style*="color"],
.mk-site .mk-prose b [style*="color"] { color: var(--ink) !important; }
.mk-site .mk-prose [style*="font-size"] { font-size: inherit !important; }

/* The header is fixed, so an anchor lands under it unless the target says how
   much room to leave. prefers-reduced-motion turns the travel off; the browser
   honours that for scrollIntoView on its own, and this makes the page agree. */
.mk-site [id] { scroll-margin-top: 86px; }
@media (prefers-reduced-motion: reduce) {
    .mk-site { scroll-behavior: auto; }
}


/* --------------------------------------------------------------------------
   The price on a plan card
   -------------------------------------------------------------------------- */

.mk-price {
    padding: 0 0 16px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--line);
}
.mk-price-line { display: flex; align-items: baseline; gap: 7px; }
.mk-price-note { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.mk-price-amount {
    font-size: clamp(26px, 2.6vw, 33px);
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.mk-price-per { font-size: 13px; color: var(--muted); }

/* The plan name and the price both want a rule under them, and two rules 16px
   apart is a stack of lines rather than a heading. The name keeps the space and
   loses the rule. */
.mk-site .pricing_header { border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; }

/* --------------------------------------------------------------------------
   About

   Two columns rather than one long measure: at this width a single column runs
   to about 110 characters a line, which is twice what anybody reads comfortably.
   The map behind it is removed below.
   -------------------------------------------------------------------------- */

.mk-about {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: clamp(22px, 3vw, 48px);
    align-items: start;
}
.mk-about .mk-prose { max-width: none; }

/* main.css draws a world map behind #about and .features_section, at whatever
   size the viewport happens to be, and centres their contents with flex on top
   of the layout the sections already have. Neither section wants either now. */
.mk-site #about,
.mk-site .features_section {
    background-image: none !important;
    display: block !important;
}

/* And its ground, which main.css sets on the id rather than the class, so it beat
   .mk-section-deep and left this one section a neutral #242628 among seven navy
   ones. Matched to the token the class was asking for. */
.mk-site #about { background-color: var(--soft) !important; }

/* --------------------------------------------------------------------------
   The message screen

   iOS colours, not ours. This is the one screen on the page that belongs to
   somebody else, and a reader knows what their own Messages app looks like.

     ground           #000000   the conversation view in dark mode
     incoming bubble  #3B3B3D   grey; green is a message you sent
     ink              #FFFFFF
     controls         #0A84FF   the dark-mode system blue
     secondary text   #8E8E93   systemGray
   -------------------------------------------------------------------------- */

/* Black is not a stylistic choice here: iOS Messages in dark mode is #000, which
   on the OLED screens every current iPhone has is a genuinely unlit panel. It is
   what the reader would see on their own phone.

   What it needed was an edge. A black screen inside a near-black frame on a navy
   page reads as a hole rather than a device, so the frame is lifted a little and
   given the rim light a piece of glass has. */
.mk-phone-ios {
    background: #14192B;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.mk-phone-ios::before { background: #14192B; }
.mk-phone-ios .mk-phone-screen {
    background: #000;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.mk-phone-ios .mk-phone-status { color: #fff; }
.mk-phone-ios .mk-phone-icons { color: #fff; }

.mk-sms-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 9px;
    border-bottom: 1px solid #1C1C1E;
}
.mk-sms-head > i { font-size: 12px; color: #0A84FF; }
.mk-sms-contact { display: flex; align-items: center; gap: 6px; margin: 0 auto; }
.mk-sms-head b { font-size: 11.5px; font-weight: 600; color: #fff; }
.mk-sms-who {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #48484A;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 8.5px;
    font-weight: 600;
}

.mk-sms-body { gap: 10px; padding: 14px 12px 0; }
.mk-sms-when { font-size: 9px; color: #8E8E93; text-align: center; line-height: 1.5; }
.mk-sms-when b { color: #8E8E93; font-weight: 700; }

.mk-sms-bubble {
    background: #3B3B3D;
    color: #fff;
    border-radius: 17px 17px 17px 5px;
    padding: 9px 13px;
    font-size: 11.5px;
    line-height: 1.4;
    align-self: flex-start;
    margin-right: 34px;
}

.mk-sms-compose {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px 16px;
    font-size: 10.5px;
    color: #8E8E93;
}
.mk-sms-compose i { color: #8E8E93; }
.mk-sms-compose span {
    flex: 1;
    border: 1px solid #3A3A3C;
    border-radius: 999px;
    padding: 6px 11px;
}

/* --------------------------------------------------------------------------
   The Book a demo popup

   Nothing. Deliberately.

   Calendly's widget.css ships with the script and sizes, rounds, scrims and
   closes the popup itself. Rules were added here to cap its width, round its
   corners and paint its ground white, and the result was a white box standing
   around the frame: the sheet lays the popup out to its own measurements, and a
   container shrunk underneath it leaves the difference showing.

   The frame's appearance is set on the URL instead, by demoLink(), which is the
   interface Calendly offers for it. See config/marketing.php.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Legal pages

   One stored blob of editor HTML each, so the measure, the rhythm and the
   headings all have to be imposed from here. The inline colours and faces it
   carries are handled by the .mk-prose rules further up.
   -------------------------------------------------------------------------- */

.mk-doc-title {
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 800;
    letter-spacing: -.022em;
    color: var(--ink);
    margin: 0 0 28px;
}
.mk-doc { max-width: 74ch; }
.mk-doc h1, .mk-doc h2, .mk-doc h3, .mk-doc h4, .mk-doc h5, .mk-doc h6 {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 34px 0 10px;
}
/* Specific enough to beat ".mk-site .mk-section h2", which is sized for a section
   heading and made every clause of the policy look like one. */
.mk-site .mk-doc h1, .mk-site .mk-doc h2 { font-size: clamp(17.5px, 1.7vw, 21px); }
.mk-site .mk-doc h3, .mk-site .mk-doc h4,
.mk-site .mk-doc h5, .mk-site .mk-doc h6 { font-size: clamp(15.5px, 1.5vw, 17.5px); }
.mk-doc > :first-child { margin-top: 0; }
.mk-doc ul, .mk-doc ol { margin: 0 0 16px; padding-left: 22px; }
.mk-doc li { margin-bottom: 7px; }
.mk-doc a { color: var(--link); }
.mk-doc hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.mk-doc table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.mk-doc th, .mk-doc td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.mk-doc th { color: var(--ink); font-weight: 700; }

/* The blob arrives wrapped in whatever the editor was showing at the time, which
   on these two pages is a div carrying background-color:aliceblue as an inline
   style. Inline beats a class, so this is the one way to reach it. */
.mk-doc [style*="background"] { background: none !important; }
.mk-doc [style*="padding"] { padding: 0 !important; }
.mk-doc [style*="margin"] { margin-left: 0 !important; margin-right: 0 !important; }

/* --------------------------------------------------------------------------
   The Resources caret

   main.css draws it with FontAwesome's \f107 in a pseudo-element positioned
   absolutely at top:11px, which puts it wherever 11px happens to land rather
   than on the label's centre line. A caret belongs next to the word it opens.
   -------------------------------------------------------------------------- */

.mk-site .header_sec .dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; }
.mk-site .header_sec .dropdown-toggle::after {
    content: "";
    position: static;
    top: auto;
    display: block;
    width: 7px;
    height: 7px;
    margin: -3px 0 0;
    border: 0;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
    opacity: .7;
    font-size: 0;
}

.mk-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: 22px;
}
.mk-back:hover { color: var(--ink); text-decoration: none; }

/* The app's two controls, More and Set Level, in the house style rather than the
   white-and-orange pills the current build draws. Same shapes as the buttons in
   the hero: one filled, one quiet. */
.mk-phone-controls {
    margin-top: auto;
    display: flex;
    gap: 8px;
    padding: 0 12px 20px;
}
.mk-phone-pill {
    flex: 1;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    border-radius: 9px;
    padding: 7px 12px;
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--muted);
}
/* Set Level is the one thing on this screen somebody presses, so it carries the
   ink rather than a fill. Two filled pills at the foot of a phone the size of a
   postcard is more attention than the picture needs. */
.mk-phone-pill-go { color: var(--ink); }

.mk-doc-meta { font-size: 12.5px; color: var(--muted); margin: -12px 0 26px; }

/* The footer's one outbound link. Quiet: it is an attribution, not an invitation. */
.mk-site .footer_menu a { font-size: 12px; color: var(--muted); opacity: .75; }
.mk-site .footer_menu a:hover { color: var(--ink); opacity: 1; }