/* ==========================================================================
   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.
   ========================================================================== */

/* Smoother page-to-page navigation. A cross-document view transition makes moving between the
   marketing pages (clicking Support, a resource, Home) a soft cross-fade instead of a hard flash,
   on browsers that support it; the rest just navigate as before. Readers who ask for less motion
   get the plain navigation. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}

: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; }
/* Full width, and a touch shorter than the default button so it sits level with the ~42px store
   badges on the entry plan (Michael, 2026-09-21). */
.mk-plan-foot .mk-btn { width: 100%; padding-top: 9px; padding-bottom: 9px; }

/* --------------------------------------------------------------------------
   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; align-items: center; gap: 16px; margin-top: 38px; }
/* Both store badges share one box and are centred inside it, so the two official badges
   (different proportions) present as a matched, equal-size pair rather than one looking bigger. */
.mk-stores img { height: 56px; width: 184px; object-fit: contain; object-position: center; display: block; }

/* Apple's badge is drawn with a hairline #A6A6A6 border; Google's official badge is not, so on the
   dark panel Apple's pill has a clean edge and Google's black rectangle floats without one. Give the
   Google badge the same hairline: fill the letterbox black so the pill is solid to the box edge, then
   trace it with the identical border and radius so the pair reads as a matched, framed set. box-sizing
   keeps the border inside the shared 184px box so the two badges stay the same size. */
.mk-stores img.is-android {
    box-sizing: border-box;
    background: #000;
    border: 1.5px solid #a6a6a6;
    border-radius: 9px;
}

/* On a phone the two badges did not fit on one row at 58px, so they wrapped, and because Apple's
   artwork and Google's have different aspect ratios the stacked pair came out 196px and 177px
   wide: two different-sized black rectangles with their right edges not lining up.

   Both store guidelines say to keep the badges the same height and let the widths fall where they
   may, so the fix is to shrink the height until the row fits rather than to force the widths equal.
   At 44px they are 149 and 134, which fits a 375px screen with room to spare; the second step
   covers the 320px phones that are still around. flex-wrap stays as a safety net for the day
   somebody uploads a wider badge. */
@media (max-width: 560px) {
    .mk-stores { gap: 12px; margin-top: 26px; }
    .mk-stores img { height: 44px; width: 145px; }
}
@media (max-width: 380px) {
    .mk-stores { gap: 10px; }
    .mk-stores img { height: 40px; width: 132px; }
}

/* The entry plan's card links to the stores instead of a web checkout (BL-68 Phase 0). It reuses
   the matched App Store / Google Play pair from the #apps section, sized down and centred so the
   two badges sit side by side inside the narrower plan card at every width — equal size, no
   preference. Declared after the media blocks so this fixed card size wins over the responsive one. */
/* Side by side, as tall as two official badges fit in the card (~42px, width:auto keeps their real
   aspect ratio). The pricing Contact button is brought down to the same height below so the store
   card's call-to-action matches the invoiced plans' rather than towering over the badges. */
.mk-plan-stores { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 0; }
.mk-plan-stores img { height: 42px; width: auto; }

/* 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;
    position: relative;
}
.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;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.mk-phone-caret { font-size: 10px; color: var(--muted); }
/* The app's logo mark, recoloured from its brand blue to the light ink tone so it reads on the
   dark header — the CSS equivalent of the srcIn recolour the app itself does. */
.mk-phone-mark { width: 15px; height: 15px; object-fit: contain; filter: brightness(0) invert(0.92); }
.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-hint { font-size: 9px; font-weight: 600; color: var(--muted); padding-left: 2px; }

.mk-phone-list { display: grid; gap: 5px; }
/* Colour-forward: each row tinted with its own level colour and edged in it, a bar down the left,
   the name over its meaning. color-mix does the tint; the flat card colours are the fallback. */
.mk-phone-row {
    display: grid;
    grid-template-columns: 4px 1fr auto;
    gap: 9px;
    align-items: stretch;
    background: var(--card);
    background: color-mix(in srgb, var(--band) 14%, transparent);
    border: 1px solid var(--line);
    border: 1px solid color-mix(in srgb, var(--band) 42%, transparent);
    border-radius: 9px;
    padding: 7px 9px;
    font-size: 10.5px;
}
.mk-phone-row > i:not(.mk-phone-chev) { width: 4px; border-radius: 2px; background: var(--band); display: block; align-self: stretch; }
.mk-phone-rtext { display: grid; gap: 1px; align-content: center; min-width: 0; }
.mk-phone-row b { color: var(--ink); font-weight: 700; }
.mk-phone-rtext span { color: var(--muted); font-size: 9.5px; }
.mk-phone-nowtag { color: var(--muted); font-weight: 600; }
.mk-phone-chev { align-self: center; color: var(--muted); font-size: 11px; }
.mk-phone-row.is-now { border-color: var(--band); background: color-mix(in srgb, var(--band) 22%, transparent); }
.mk-phone-note { font-size: 9.5px; color: var(--muted); text-align: center; padding-top: 2px; }


.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; }
/* Groups get a green users icon — the calm-end alarm green, as a per-row accent (the way folders
   are amber), not a status. An inactive group is simply hidden, so there is no state to show. */
.mk-file > .fa-users { color: #5cb874; }
/* Group rows carry no date column, so they collapse to three: icon, name, member count. */
.mk-file.mk-file-3 { grid-template-columns: 18px minmax(0, 1fr) auto; }
.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 bottom action bar: the quick actions and More, on a divider with a soft lift, the way
   the rebuilt app draws it. It replaced the old More / Set Level pair — the level list is the
   control now, so there is no Set Level button to draw. */
.mk-phone-tabbar {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 8px 8px 16px;
    border-top: 1px solid var(--line);
    box-shadow: 0 -3px 14px rgba(0, 0, 0, .25);
}
.mk-phone-tab { display: grid; justify-items: center; gap: 3px; }
.mk-phone-tab i { font-size: 13px; color: var(--ink); }
.mk-phone-tab b { font-size: 8px; font-weight: 600; color: var(--muted); }

.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. */
/* Three links now rather than one, so they need separating. A gap rather than bullets or pipes:
   the row is quiet by design and punctuation between the items would make it louder than the
   copyright line beside it. */
.mk-site .footer_menu ul { gap: 18px; flex-wrap: wrap; list-style: none; padding: 0; }
.mk-site .footer_menu a { font-size: 12px; color: var(--muted); opacity: .75; }
.mk-site .footer_menu a:hover { color: var(--ink); opacity: 1; }

/* --- what a feature in a pricing box actually means ---

   Half these names are house words. "SMS Groups" and "Free-Text SMS" are precise to somebody who
   already uses the platform and mean nothing to somebody deciding whether to buy it, and a pricing
   box is exactly where that person is standing.

   A tooltip rather than a line of explanation under each bullet: six boxes times a dozen features
   is a wall of text, and the name is enough for most of them. The text is also in a title
   attribute on the same element, so it survives a screen reader and a touch screen, where :hover
   does not exist. */
.mk-feat {
    /* No underline of any kind. A dotted rule under every bullet reads as a page full of links in
       a box whose only link is the button at the bottom. The help cursor is the affordance, and
       the explanation is one that rewards finding rather than one somebody has to be sent after. */
    cursor: help;
    position: relative;
    outline-offset: 3px;
}
.mk-feat::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    transform: translateX(-50%);
    width: max-content;
    max-width: 250px;
    padding: 9px 11px;
    border-radius: 9px;
    /* A surface and the text colour that belongs to it, rather than ink-on-page inverted. The
       inverted pair reads as a translucent panel on the dark theme, with the list showing through
       it, because --ink is a text colour and was never drawn as a background. */
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
    z-index: 30;
    pointer-events: none;
}
/* The item being hovered has to come out in front of the ones above it, which are later in the
   document and would otherwise paint over the tooltip. */
.mk-feat:hover, .mk-feat:focus-visible { z-index: 40; }
.mk-feat:hover::after,
.mk-feat:focus-visible::after { opacity: 1; visibility: visible; }

/* The first and last boxes in a row would push their tooltip off the page. Anchoring to the edge
   instead of the centre costs nothing on the middle boxes and keeps the outer ones on screen. */
li:first-child > .mk-feat::after { left: 0; transform: none; }

@media (max-width: 767px) { .mk-feat::after { max-width: 200px; } }
@media (prefers-reduced-motion: reduce) { .mk-feat::after { transition: none; } }

/* --------------------------------------------------------------------------
   The support page (/support) — a command center

   A status bar and DEFCON strip, a left rail (status, the level gauge, contact)
   and a knowledge base whose topics open step-by-step walkthroughs, with the
   questions and a security note below. The accordion, modal and step rules are
   shared with the walkthroughs; the .dcs-* rules are the console shell.
   -------------------------------------------------------------------------- */

/* Accordion (native <details>) */
.mk-site .mk-disc > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-weight: 700; color: var(--ink); letter-spacing: -.005em;
}
.mk-site .mk-disc > summary::-webkit-details-marker { display: none; }
.mk-site .mk-disc > summary::after {
    content: ""; flex: none; width: 8px; height: 8px; margin-top: -3px;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg); transition: transform .2s ease;
}
.mk-site .mk-disc[open] > summary::after { transform: rotate(-135deg); }
.mk-site .mk-disc-body { color: var(--muted); font-size: clamp(14.5px, 1.35vw, 16px); line-height: 1.65; overflow: hidden; }
.mk-site .mk-disc-body p { margin: 12px 0 0; max-width: 72ch; }
.mk-site .mk-disc-body ol { margin: 12px 0 0; padding-left: 20px; }
.mk-site .mk-disc-body li { margin: 0 0 7px; }
.mk-site .mk-disc-body b { color: var(--ink); font-weight: 600; }
.mk-site .mk-disc-body a { color: var(--link); }
.mk-site .mk-faq2 .mk-disc { border-bottom: 1px solid var(--line); padding: 18px 2px; }
.mk-site .mk-faq2 .mk-disc:last-child { border-bottom: 0; }
.mk-site .mk-faq2 .mk-disc > summary { font-size: clamp(15.5px, 1.55vw, 18px); }

@media (prefers-reduced-motion: reduce) { .mk-site .mk-disc > summary::after { transition: none; } }

/* Console shell */
.mk-site .dcs { padding-block: clamp(24px, 4vw, 44px) clamp(40px, 6vw, 72px); }

.mk-site .dcs-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; }
.mk-site .dcs-title { font-size: clamp(32px, 4.4vw, 46px); font-weight: 800; letter-spacing: -.025em; margin: 0; color: var(--ink); }
.mk-site .dcs-lead { margin: 8px 0 0; color: var(--muted); font-size: clamp(14.5px, 1.4vw, 16px); max-width: 52ch; }
.mk-site .dcs-top-actions { display: flex; align-items: center; gap: 16px; }
.mk-site .dcs-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--muted); font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.mk-site .dcs-dot { width: 8px; height: 8px; border-radius: 50%; background: #3f9e4d; box-shadow: 0 0 0 3px color-mix(in srgb, #3f9e4d 22%, transparent); }

.mk-site .dcs-strip { display: flex; height: 3px; border-radius: 2px; overflow: hidden; margin: 18px 0 24px; }
.mk-site .dcs-strip i { flex: 1; display: block; }

.mk-site .dcs-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .mk-site .dcs-grid { grid-template-columns: 1fr; } }

.mk-site .dcs-rail { display: flex; flex-direction: column; gap: 16px; }
.mk-site .dcs-panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.mk-site .dcs-panel-h { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }

.mk-site .dcs-mon { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.mk-site .dcs-mon li { display: flex; align-items: center; gap: 10px; }
.mk-site .dcs-mdot { width: 7px; height: 7px; border-radius: 50%; background: #3f9e4d; flex: none; }
.mk-site .dcs-mname { flex-grow: 1; color: var(--ink); }

.mk-site .dcs-levels { display: flex; align-items: center; gap: 16px; }
.mk-site .dcs-gauge { display: flex; align-items: flex-end; gap: 5px; height: 44px; flex: none; }
.mk-site .dcs-gauge i { width: 9px; border-radius: 3px; display: block; }
.mk-site .dcs-levels p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.mk-site .dcs-contact { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
.mk-site .dcs-contact a { color: var(--link); }

.mk-site .dcs-get-note { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
/* Same pairing as .mk-stores: Apple's badge is drawn with a hairline border and Google's is not,
   so trace the Google badge with the identical #a6a6a6 frame and radius and the pair reads as a
   matched set on the dark panel. box-sizing keeps the border inside the shared box so both stay
   the same size. */
.mk-site .dcs-get { display: flex; align-items: center; gap: 12px; }
.mk-site .dcs-get a { display: inline-flex; min-width: 0; }
.mk-site .dcs-get img { height: 44px; width: 140px; object-fit: contain; object-position: center; display: block; }
.mk-site .dcs-get img.is-android { box-sizing: border-box; background: #000; border: 1.5px solid #a6a6a6; border-radius: 8px; }

.mk-site .dcs-news { list-style: none; margin: 0; padding: 0; }
.mk-site .dcs-news li { position: relative; padding: 0 0 18px 20px; }
.mk-site .dcs-news li:last-child { padding-bottom: 0; }
.mk-site .dcs-news li::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: -6px; width: 2px; background: var(--line); }
.mk-site .dcs-news li:last-child::before { display: none; }
.mk-site .dcs-news li::after { content: ""; position: absolute; left: 0; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-fill); }
.mk-site .dcs-news b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.mk-site .dcs-news span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.mk-site .dcs-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.mk-site .dcs-search { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid color-mix(in srgb, var(--ink) 14%, var(--line)); border-radius: 12px; padding: 0 16px; height: 52px; color: var(--muted); }
.mk-site .dcs-search input { flex-grow: 1; background: transparent; border: 0; outline: none; color: var(--ink); font: inherit; font-size: 15px; }
.mk-site .dcs-search input::placeholder { color: var(--muted); }
.mk-site .dcs-search input:focus-visible { outline: none; }
.mk-site .dcs-search:focus-within { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }

/* "How Defcon works": a three-step orientation above the FAQ. A sequence, so the steps are
   numbered; cards keep it level with the rest of the page. */
.mk-site .dcs-how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .mk-site .dcs-how-steps { grid-template-columns: 1fr; } }
.mk-site .dcs-how-step { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.mk-site .dcs-how-n {
    width: 28px; height: 28px; border-radius: 8px; background: var(--accent-fill); color: var(--accent-ink);
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 800; font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 2px;
}
.mk-site .dcs-how-step b { font-size: 14.5px; color: var(--ink); font-weight: 700; line-height: 1.3; }
.mk-site .dcs-how-step p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

.mk-site .dcs-h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0 0 18px; }
.mk-site .dcs-faq { margin-top: 40px; }
.mk-site .dcs-faq .mk-faq2 { max-width: 820px; margin: 0; }
/* FAQ accordions: native <details>, a quiet card each, with a + / en-dash toggle. */
.mk-site .dcs-q { max-width: 820px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 2px 18px; margin-bottom: 10px; }
.mk-site .dcs-q summary { list-style: none; cursor: pointer; padding: 15px 30px 15px 0; font-weight: 600; color: var(--ink); font-size: 15px; position: relative; }
.mk-site .dcs-q summary::-webkit-details-marker { display: none; }
.mk-site .dcs-q summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; color: var(--muted); }
.mk-site .dcs-q[open] summary::after { content: "\2013"; }
.mk-site .dcs-q summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.mk-site .dcs-q p { margin: 0 0 16px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.mk-site .dcs-q p a { color: var(--link); }
.mk-site .dcs-security { margin-top: clamp(36px, 4vw, 52px); max-width: 72ch; }
.mk-site .dcs-security p { margin: 0; color: var(--muted); font-size: clamp(14.5px, 1.35vw, 16px); line-height: 1.65; }
.mk-site .dcs-security a { color: var(--link); }

/* Walkthrough modal */
.mk-modal {
    width: min(720px, 92vw); max-height: 86vh; padding: 0; color: var(--ink);
    border: 1px solid var(--line); border-radius: 16px; background: var(--card);
    box-shadow: 0 24px 60px rgba(2, 6, 20, .5);
}
.mk-modal::backdrop { background: rgba(6, 9, 20, .62); }
.mk-modal-inner { display: flex; flex-direction: column; max-height: 86vh; }
.mk-modal-top {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.mk-modal-title { margin: 0; font-size: clamp(18px, 2vw, 22px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.mk-modal-close {
    border: 0; background: transparent; color: var(--muted); font-size: 26px; line-height: 1;
    cursor: pointer; padding: 0 6px; border-radius: 8px;
}
.mk-modal-close:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.mk-modal-body { padding: 4px 22px 22px; overflow-y: auto; }

.mk-steps { list-style: none; margin: 0; padding: 6px 0 2px; display: flex; flex-direction: column; gap: 6px; }
.mk-step {
    display: grid; grid-template-columns: 16px 1fr; gap: 12px; padding: 10px 0;
}
.mk-step-b {
    width: 7px; height: 7px; border-radius: 50%; background: var(--amber); margin-top: 9px; align-self: start;
}
.mk-step-t { margin: 0; color: var(--ink); font-size: clamp(14.5px, 1.4vw, 16px); line-height: 1.55; }
.mk-step-shot {
    margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
    background: var(--page); max-width: 240px;
}
.mk-step-shot img { display: block; width: 100%; height: auto; }

/* Explainer guides (prose) in the walkthrough modal */
.mk-prose2 { padding: 6px 0 2px; }
.mk-lead2 { margin: 12px 0 0; color: var(--ink); font-size: clamp(15px, 1.5vw, 17px); font-weight: 500; line-height: 1.55; }
.mk-p2 { margin: 14px 0 0; color: var(--muted); font-size: clamp(14.5px, 1.4vw, 16px); line-height: 1.6; }
.mk-p2 a { color: var(--link); }
.mk-levels2 { list-style: none; margin: 18px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mk-levels2 li { border-left: 4px solid; background: var(--soft); border-radius: 8px; padding: 10px 14px; display: flex; align-items: baseline; gap: 10px; }
.mk-levels2 b { color: var(--ink); font-size: 14px; flex: none; }
.mk-levels2 span { color: var(--muted); font-size: 13px; }

/* Social proof band. Draft on development (not shipped). Sector descriptors, no count.
   The gradient top-rule is the DEFCON alert scale, the same hues as config/marketing.php. */
.mk-site .mk-proof-lead { text-align: center; color: var(--muted); max-width: 60ch;
    margin: 12px auto 0; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.55; text-wrap: balance; }
/* No icon boxes or cards (that reads as a stock feature grid). Three quiet columns divided by a
   hairline, each led by a short accent rule: editorial and discreet, not a logo wall. */
.mk-site .mk-proof { display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(22px, 3vw, 44px); margin-top: clamp(28px, 3.2vw, 44px); }
.mk-site .mk-proof-item { position: relative; padding-top: 2px; }
.mk-site .mk-proof-item + .mk-proof-item { border-left: 1px solid var(--line);
    padding-left: clamp(22px, 3vw, 44px); }
.mk-site .mk-proof-item::before { content: ""; display: block; width: 26px; height: 2px;
    border-radius: 2px; background: var(--accent-fill); opacity: .9; margin-bottom: 15px; }
.mk-site .mk-proof-item h3 { margin: 0 0 9px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.3; }
.mk-site .mk-proof-item p { margin: 0; color: var(--muted);
    font-size: clamp(14px, 1.3vw, 15.5px); line-height: 1.6; }
.mk-site .mk-proof-note { margin: clamp(24px, 2.8vw, 34px) auto 0; max-width: 72ch;
    text-align: center; color: var(--ink); font-weight: 500;
    font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.6; }
.mk-site .mk-proof-disclaimer { margin: 22px auto 0; max-width: 64ch; text-align: center;
    color: var(--faint); font-size: 13px; line-height: 1.55; }
@media (max-width: 760px) {
    .mk-site .mk-proof { grid-template-columns: 1fr; gap: clamp(24px, 6vw, 32px); }
    .mk-site .mk-proof-item + .mk-proof-item { border-left: 0; padding-left: 0; }
}

/* Resource cards (Guide, Scorecard) on the one-page site: two cards that each unfold their full page
   inline below the row, sized to content by script. The gradient top rule matches the proof band. */
.mk-site .res-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.5vw, 24px); margin-top: clamp(24px, 3vw, 38px); }
.mk-site .res-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center;
    background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px 26px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 32px -22px rgba(0, 0, 0, 0.7); }
.mk-site .res-ic { width: 52px; height: 52px; border-radius: 13px; background: var(--soft);
    display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.mk-site .res-card h3 { margin: 0 0 8px; }
.mk-site .res-card p { color: var(--muted); margin: 0 0 22px; font-size: 14.5px; line-height: 1.6; max-width: 38ch; }
.mk-site .res-card .res-more { margin-top: auto; min-width: 190px; justify-content: center; }
.mk-site .res-embed { margin-top: 26px; }
.mk-site .res-frame { width: 100%; border: 0; display: block; overflow: hidden; }
@media (max-width: 700px) { .mk-site .res-cards { grid-template-columns: 1fr; } }