/* =========================================================
   LandscapesPA public site: the Momentum look, in green.

   Everything is scoped under .mk (the root element of MainLayout), so the dashboard (.mo), the SysAdmin area and the
   stand-alone login page keep their own styling. Like momentum.css, this works by (1) setting Bootstrap's own variables
   so existing markup picks up the palette and (2) overriding the few components Bootstrap 5.3 hard-codes colours for.
   The page-level pieces (hero, stat tiles, bento cards, steps, footer) are the new .mk-* classes below.

   The signature is the survey dimension line the brand already uses for its dividers: it underlines the hero headline
   (.mk-dim) and joins the steps in "How it works" (.mk-steps).
   ========================================================= */

.mk {
    --mk-bg: #f1f6f0;
    --mk-surface: #ffffff;
    --mk-surface-2: #f6faf5;
    --mk-surface-3: #e8f0e6;
    --mk-border: #dae6d8;
    --mk-border-strong: #bfd0bc;
    --mk-text: #10231a;
    --mk-text-2: #3a5142;
    --mk-muted: #566b5d;
    --mk-accent: #1b7a34;
    --mk-accent-hover: #156228;
    --mk-accent-soft: #e0f1e3;
    --mk-accent-text: #14602a;
    --mk-deep: #0b2f10;
    --mk-deep-2: #135019;
    --mk-lime: #92d050;
    --mk-lime-hover: #a6dd6b;
    --mk-lime-soft: #eaf6da;
    --mk-danger: #d64545;
    --mk-danger-soft: #fdeceb;
    --mk-danger-text: #b42f34;
    --mk-warn-soft: #fff4dc;
    --mk-warn-text: #7a4f00;
    --mk-shadow-sm: 0 1px 2px rgba(11, 47, 16, .06);
    --mk-shadow: 0 6px 22px rgba(11, 47, 16, .09);
    --mk-shadow-lg: 0 24px 60px rgba(4, 22, 8, .28);
    --mk-radius: 14px;
    --mk-radius-sm: 10px;
    --mk-font: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --mk-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --mk-mono: "IBM Plex Mono", "Cascadia Code", Consolas, monospace;

    /* Bootstrap variables, so every existing component picks the palette up. */
    --bs-body-bg: var(--mk-bg);
    --bs-body-color: var(--mk-text);
    --bs-body-color-rgb: 16, 35, 26;
    --bs-body-font-family: var(--mk-font);
    --bs-secondary-color: var(--mk-muted);
    --bs-secondary-bg: var(--mk-surface-3);
    --bs-tertiary-bg: var(--mk-surface-2);
    --bs-emphasis-color: var(--mk-text);
    --bs-border-color: var(--mk-border);
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 14px;
    --bs-link-color: var(--mk-accent-text);
    --bs-link-color-rgb: 20, 96, 42;
    --bs-link-hover-color: var(--mk-accent-hover);
    --bs-primary: var(--mk-accent);
    --bs-primary-rgb: 27, 122, 52;
    --bs-primary-text-emphasis: var(--mk-accent-text);
    --bs-primary-bg-subtle: var(--mk-accent-soft);
    --bs-primary-border-subtle: #b3d9bb;
    --bs-success: var(--mk-accent);
    --bs-success-rgb: 27, 122, 52;
    --bs-success-bg-subtle: var(--mk-accent-soft);
    --bs-success-border-subtle: #b3d9bb;
    --bs-success-text-emphasis: #0f4d20;
    --bs-danger: var(--mk-danger);
    --bs-danger-rgb: 214, 69, 69;
    --bs-danger-bg-subtle: var(--mk-danger-soft);
    --bs-danger-border-subtle: #f3c1c3;
    --bs-danger-text-emphasis: #8f2025;
    --bs-warning-bg-subtle: var(--mk-warn-soft);
    --bs-warning-border-subtle: #f4d9a0;
    --bs-warning-text-emphasis: var(--mk-warn-text);
    --bs-secondary-bg-subtle: var(--mk-surface-3);
    --bs-secondary-border-subtle: var(--mk-border);
    --bs-secondary-text-emphasis: var(--mk-text-2);

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--mk-font);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--mk-text);
    background: var(--mk-bg);
    -webkit-font-smoothing: antialiased;
}

.mk *, .mk *::before, .mk *::after { box-sizing: border-box; }
.mk ::selection { background: var(--mk-lime); color: var(--mk-deep); }
.mk :focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }
.mk-main { flex: 1 0 auto; }

@media (min-width: 1400px) { .mk .container { max-width: 1200px; } }

/* ---------- Typography ---------- */
.mk h1, .mk h2, .mk h3, .mk h4, .mk h5, .mk h6 { font-family: var(--mk-display); font-weight: 700; letter-spacing: -.02em; color: var(--mk-text); line-height: 1.15; }
/* Sizes use :where() so Bootstrap's .h1 to .h6 helper classes (e.g. h2.h5) still win over the element defaults. */
:where(.mk) h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); }
:where(.mk) h3 { font-size: 1.25rem; }
:where(.mk) h4 { font-size: 1.1rem; }
:where(.mk) h5 { font-size: 1.02rem; }
.mk .display-3, .mk .display-5 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
.mk .lead { font-size: 1.15rem; font-weight: 400; color: var(--mk-text-2); }
.mk .text-muted { color: var(--mk-muted) !important; }
.mk .text-success { color: var(--mk-accent-text) !important; }
.mk .text-primary { color: var(--mk-accent-text) !important; }
.mk .text-danger { color: var(--mk-danger-text) !important; }
.mk .text-warning { color: var(--mk-warn-text) !important; }
.mk a:not(.btn) { color: var(--mk-accent-text); }
.mk a:not(.btn):hover { color: var(--mk-accent-hover); }
.mk hr { border-color: var(--mk-border); opacity: 1; }
.mk .border-bottom { border-color: var(--mk-border) !important; }
.mk .bg-light { background-color: var(--mk-surface-2) !important; }
.mk .bg-white { background-color: var(--mk-surface) !important; }

/* On dark bands the text and link colours flip. */
.mk-dark { color: #fff; }
.mk-dark h1, .mk-dark h2, .mk-dark h3, .mk-dark h4 { color: #fff; }
.mk-dark .lead, .mk-dark p { color: rgba(255, 255, 255, .84); }
.mk-dark .text-muted { color: rgba(255, 255, 255, .72) !important; }
.mk-dark a:not(.btn) { color: var(--mk-lime); }

/* Small mono label with the dimension-line glyph in front of it. */
.mk-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mk-mono); font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-accent-text); margin-bottom: 12px; }
.mk-eyebrow::before { content: ""; width: 30px; height: 8px; border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; }
.mk-dark .mk-eyebrow { color: var(--mk-lime); }

/* ---------- Buttons ---------- */
.mk .btn { --bs-btn-border-radius: 10px; --bs-btn-font-weight: 600; font-size: .95rem; }
.mk .btn-lg { --bs-btn-border-radius: 12px; --bs-btn-padding-x: 1.4rem; --bs-btn-padding-y: .75rem; font-size: 1rem; }
.mk .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--mk-accent); --bs-btn-border-color: var(--mk-accent); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--mk-accent-hover); --bs-btn-hover-border-color: var(--mk-accent-hover); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--mk-accent-hover); --bs-btn-active-border-color: var(--mk-accent-hover); --bs-btn-disabled-bg: var(--mk-accent); --bs-btn-disabled-border-color: var(--mk-accent); --bs-btn-focus-shadow-rgb: 27, 122, 52; }
/* btn-light only ever sits on a dark green band in these pages, so it is the lime call-to-action. */
.mk .btn-light { --bs-btn-color: var(--mk-deep); --bs-btn-bg: var(--mk-lime); --bs-btn-border-color: var(--mk-lime); --bs-btn-hover-color: var(--mk-deep); --bs-btn-hover-bg: var(--mk-lime-hover); --bs-btn-hover-border-color: var(--mk-lime-hover); --bs-btn-active-color: var(--mk-deep); --bs-btn-active-bg: var(--mk-lime-hover); --bs-btn-active-border-color: var(--mk-lime-hover); --bs-btn-focus-shadow-rgb: 146, 208, 80; box-shadow: 0 6px 18px rgba(146, 208, 80, .28); }
.mk .btn-outline-light { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .38); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, .12); --bs-btn-hover-border-color: rgba(255, 255, 255, .7); --bs-btn-active-bg: rgba(255, 255, 255, .18); --bs-btn-active-border-color: #fff; --bs-btn-active-color: #fff; }
.mk .btn-outline-secondary { --bs-btn-color: var(--mk-text-2); --bs-btn-border-color: var(--mk-border-strong); --bs-btn-hover-color: var(--mk-text); --bs-btn-hover-bg: var(--mk-surface-3); --bs-btn-hover-border-color: var(--mk-border-strong); --bs-btn-active-color: var(--mk-text); --bs-btn-active-bg: var(--mk-surface-3); --bs-btn-active-border-color: var(--mk-border-strong); }
.mk-dark :focus-visible { outline-color: var(--mk-lime); }

/* ---------- Forms ---------- */
.mk .form-control, .mk .form-select { background-color: var(--mk-surface); color: var(--mk-text); border: 1px solid var(--mk-border-strong); border-radius: 10px; padding: .6rem .85rem; }
.mk .form-control::placeholder { color: var(--mk-muted); opacity: .8; }
.mk .form-control:focus, .mk .form-select:focus { border-color: var(--mk-accent); box-shadow: 0 0 0 4px var(--mk-accent-soft); }
.mk .form-label { font-weight: 600; color: var(--mk-text-2); font-size: .9rem; }
.mk .form-check-input { border-color: var(--mk-border-strong); }
.mk .form-check-input:checked { background-color: var(--mk-accent); border-color: var(--mk-accent); }
.mk .form-check-input:focus { border-color: var(--mk-accent); box-shadow: 0 0 0 4px var(--mk-accent-soft); }

/* ---------- Cards, badges, tables, alerts ---------- */
.mk .card, .mk-card { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-radius); box-shadow: var(--mk-shadow-sm); color: var(--mk-text); }
.mk .badge { font-weight: 600; border-radius: 999px; padding: .38em .75em; }
.mk .badge.bg-primary, .mk .badge.bg-success { background-color: var(--mk-accent-soft) !important; color: var(--mk-accent-text) !important; }
.mk .badge.bg-warning { background-color: var(--mk-warn-soft) !important; color: var(--mk-warn-text) !important; }
.mk .badge.bg-secondary, .mk .badge.bg-light { background-color: var(--mk-surface-3) !important; color: var(--mk-text-2) !important; }
.mk .table { --bs-table-bg: transparent; --bs-table-color: var(--mk-text); --bs-table-border-color: var(--mk-border); color: var(--mk-text); }
.mk .table > thead > tr > th { font-family: var(--mk-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mk-muted); font-weight: 500; background: var(--mk-surface-2); border-bottom: 1px solid var(--mk-border); padding: .9rem 1rem; }
.mk .table > tbody > tr > td { padding: .85rem 1rem; }
.mk .table-responsive { border: 1px solid var(--mk-border); border-radius: var(--mk-radius); background: var(--mk-surface); box-shadow: var(--mk-shadow-sm); }
.mk .table-responsive > .table { margin-bottom: 0; }
.mk .alert { border-radius: var(--mk-radius-sm); }
.mk .spinner-border.text-primary { color: var(--mk-accent) !important; }

/* ---------- Navigation ---------- */
.mk-nav { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--mk-border); }
.mk-nav .navbar { padding: .55rem 0; }
.mk-brand { display: inline-flex; align-items: center; margin-right: 1.5rem; }
.mk-brand img { height: 36px; width: auto; display: block; }
.mk-nav .nav-link { padding: .45rem .8rem; border-radius: 9px; color: var(--mk-text-2); font-weight: 550; font-size: .95rem; }
.mk-nav .nav-link:hover { background: var(--mk-surface-3); color: var(--mk-text); }
.mk-nav .nav-link.active { background: var(--mk-accent-soft); color: var(--mk-accent-text); }
.mk-nav .nav-link.mk-login { border: 1px solid var(--mk-accent); color: var(--mk-accent-text); padding: .45rem 1rem; }
.mk-nav .nav-link.mk-login:hover { background: var(--mk-accent); color: #fff; }
.mk-nav .navbar-toggler { border: 1px solid var(--mk-border-strong); border-radius: 10px; padding: .35rem .6rem; }
.mk-nav .navbar-toggler:focus { box-shadow: 0 0 0 4px var(--mk-accent-soft); }
@media (max-width: 991.98px) {
    .mk-nav .navbar-collapse { padding: .6rem 0 .9rem; }
    .mk-nav .nav-link.mk-login { display: inline-block; margin-top: .4rem; }
}

/* ---------- Hero (home) ---------- */
.mk-hero, .mk-pagehead, .mk-cta, .mk-contact-card, .mk-split-aside { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(900px 420px at 88% -10%, rgba(146, 208, 80, .22), transparent 60%), radial-gradient(700px 380px at -5% 110%, rgba(31, 122, 58, .55), transparent 60%), linear-gradient(135deg, var(--mk-deep-2) 0%, var(--mk-deep) 100%); }
/* Blueprint grid, fading out towards the bottom of the band. */
.mk-hero::before, .mk-pagehead::before, .mk-cta::before, .mk-contact-card::before, .mk-split-aside::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: linear-gradient(#000 20%, transparent 95%); mask-image: linear-gradient(#000 20%, transparent 95%); }
.mk-hero { padding: 4.5rem 0 8rem; }
.mk-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: .82rem; font-weight: 600; margin-bottom: 1.4rem; }
.mk-chip i { color: var(--mk-lime); }
.mk-hero-title { font-size: clamp(2.5rem, 5.4vw, 4.1rem); line-height: 1.04; letter-spacing: -.035em; margin: 0 0 2.2rem; max-width: 14em; }
.mk-hero-sub { font-size: 1.15rem; line-height: 1.65; max-width: 34em; margin-bottom: 2rem; }
.mk-cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.mk-hero-note { margin: 1.1rem 0 0; font-family: var(--mk-mono); font-size: .78rem; letter-spacing: .04em; color: rgba(255, 255, 255, .72) !important; }

/* The signature: a dimension line spanning the word it measures. */
.mk-dim { position: relative; display: inline-block; color: var(--mk-lime); padding-bottom: .12em; }
.mk-dim::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.1em; height: .2em; border-left: 2px solid currentColor; border-right: 2px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; transform-origin: left center; }
.mk-dim-label { position: absolute; right: 0; top: 100%; margin-top: .45em; font-family: var(--mk-mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; line-height: 1; text-transform: uppercase; white-space: nowrap; color: var(--mk-lime); }

/* The product, in the hero: a sample estimate card using the figures from the sample report page. */
.mk-quote-wrap { position: relative; padding: 18px 0 26px 14px; }
.mk-quote { position: relative; background: var(--mk-surface); color: var(--mk-text); border-radius: 18px; box-shadow: var(--mk-shadow-lg); padding: 22px 22px 18px; }
.mk-quote-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.mk-quote-kicker { font-family: var(--mk-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-muted); }
.mk-quote-title { font-weight: 650; font-size: 1.02rem; color: var(--mk-text); }
.mk-quote-total { font-family: var(--mk-display); font-weight: 700; font-size: 2.6rem; letter-spacing: -.03em; line-height: 1.05; color: var(--mk-text); }
.mk-quote-sub { font-size: .82rem; color: var(--mk-muted); margin-bottom: 16px; }
.mk-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 3px; margin-bottom: 14px; }
.mk-bar span { display: block; min-width: 6px; }
.mk-lines { list-style: none; padding: 0; margin: 0; }
.mk-lines li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--mk-border); font-size: .92rem; }
.mk-lines .dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.mk-lines .amt { margin-left: auto; font-family: var(--mk-mono); font-size: .86rem; font-variant-numeric: tabular-nums; color: var(--mk-text); }
.mk-float { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: var(--mk-deep); color: #fff; font-size: .82rem; font-weight: 600; box-shadow: 0 12px 30px rgba(4, 22, 8, .35); border: 1px solid rgba(146, 208, 80, .35); white-space: nowrap; }
.mk-float i { color: var(--mk-lime); }
.mk-float-a { top: -4px; left: -6px; }
.mk-float-b { bottom: 0; right: -6px; }

@media (prefers-reduced-motion: no-preference) {
    .mk-rise { animation: mk-rise .7s cubic-bezier(.16, 1, .3, 1) both; }
    .mk-rise.d2 { animation-delay: .12s; }
    .mk-dim::after { animation: mk-draw .9s cubic-bezier(.16, 1, .3, 1) .5s both; }
    @keyframes mk-rise { from { opacity: 0; transform: translateY(14px); } }
    @keyframes mk-draw { from { transform: scaleX(0); } }
    .mk-agent, .mk-btn-lift { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
}

/* ---------- Stat tiles (overlap the hero) ---------- */
.mk-stats { margin-top: -4.4rem; position: relative; z-index: 2; }
.mk-stat { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-radius); box-shadow: var(--mk-shadow); padding: 18px 20px; height: 100%; }
.mk-stat .value { font-family: var(--mk-display); font-weight: 700; font-size: 2rem; letter-spacing: -.03em; line-height: 1.1; color: var(--mk-text); }
.mk-stat .value small { font-size: .5em; letter-spacing: 0; color: var(--mk-accent-text); font-weight: 600; margin-left: 3px; }
.mk-stat .label { font-size: .85rem; color: var(--mk-muted); margin-top: 4px; }

/* ---------- Sections ---------- */
.mk-section { padding: 5rem 0; }
.mk-section.tight { padding: 3.5rem 0; }
.mk-section-head { max-width: 48rem; margin-bottom: 2.4rem; }
.mk-section-head p { color: var(--mk-text-2); font-size: 1.08rem; margin: .6rem 0 0; }

/* Problem / pain / solution */
.mk-pps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mk-pps article { display: flex; flex-direction: column; background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-radius); box-shadow: var(--mk-shadow-sm); overflow: hidden; }
.mk-pps .illus { width: 100%; aspect-ratio: 16 / 10; display: block; padding: 10px 14px; }
.mk-pps .illus.problem { background: linear-gradient(180deg, #f4f1e8, #ebe8dc); }
.mk-pps .illus.pain { background: linear-gradient(180deg, #fbf0ee, #f6e3e0); }
.mk-pps .illus.solution { background: linear-gradient(180deg, #e6f2e4, #d5ebd1); }
.mk-pps .body { padding: 22px 22px 24px; flex: 1; }
.mk-tag { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; margin-bottom: 14px; }
.mk-tag.problem { background: var(--mk-warn-soft); color: var(--mk-warn-text); }
.mk-tag.pain { background: var(--mk-danger-soft); color: var(--mk-danger-text); }
.mk-tag.solution { background: var(--mk-accent-soft); color: var(--mk-accent-text); }
.mk-pps p { color: var(--mk-text-2); margin-bottom: .9rem; }
.mk-pps ul { list-style: none; padding: 0; margin: 0; }
.mk-pps li { display: flex; gap: 10px; margin-bottom: .7rem; color: var(--mk-text-2); font-size: .96rem; }
.mk-pps li i { color: var(--mk-danger-text); margin-top: .28rem; flex: none; }
.mk-pps li strong { color: var(--mk-text); }
.mk-pps .logo-inline { height: 24px; width: auto; vertical-align: -6px; }
@media (max-width: 991.98px) { .mk-pps { grid-template-columns: 1fr; } .mk-pps article { flex-direction: row; } .mk-pps .illus { width: 38%; aspect-ratio: auto; height: auto; } }
@media (max-width: 575.98px) { .mk-pps article { flex-direction: column; } .mk-pps .illus { width: 100%; aspect-ratio: 16 / 10; } }

/* Agents: a bento rather than six identical tiles; the Estimate agent is the money one, so it is the dark tile. */
.mk-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.mk-agent { grid-column: span 6; display: flex; flex-direction: column; background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-radius); box-shadow: var(--mk-shadow-sm); padding: 26px; }
.mk-agent:hover { transform: translateY(-3px); box-shadow: var(--mk-shadow); border-color: var(--mk-border-strong); }
.mk-agent.s7 { grid-column: span 7; }
.mk-agent.s5 { grid-column: span 5; }
.mk-agent.s3 { grid-column: span 3; }
.mk-agent .ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 1.15rem; background: var(--mk-accent-soft); color: var(--mk-accent-text); margin-bottom: 18px; }
.mk-agent h3 { margin: 0 0 8px; }
.mk-agent p { color: var(--mk-text-2); margin: 0 0 18px; }
.mk-agent .out { margin-top: auto; font-family: var(--mk-mono); font-size: .74rem; letter-spacing: .05em; color: var(--mk-muted); border-top: 1px dashed var(--mk-border-strong); padding-top: 12px; }
.mk-agent.feature { background: linear-gradient(135deg, var(--mk-deep-2), var(--mk-deep)); border-color: transparent; color: #fff; }
.mk-agent.feature h3 { color: #fff; }
.mk-agent.feature p { color: rgba(255, 255, 255, .84); }
.mk-agent.feature .ico { background: rgba(146, 208, 80, .18); color: var(--mk-lime); }
.mk-agent.feature .out { color: rgba(255, 255, 255, .72); border-top-color: rgba(255, 255, 255, .25); }
@media (max-width: 991.98px) { .mk-agent, .mk-agent.s7, .mk-agent.s5, .mk-agent.s3 { grid-column: span 6; } }
@media (max-width: 640px) { .mk-agent, .mk-agent.s7, .mk-agent.s5, .mk-agent.s3 { grid-column: span 12; } }

/* How it works: a real sequence, joined by a dimension line with a tick at every step. */
.mk-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.mk-steps::before { content: ""; position: absolute; top: 16px; left: 12.5%; right: 12.5%; height: 14px; border-left: 2px solid var(--mk-border-strong); border-right: 2px solid var(--mk-border-strong); background: linear-gradient(var(--mk-border-strong), var(--mk-border-strong)) center / 100% 1.5px no-repeat; }
.mk-step { position: relative; text-align: center; padding: 0 8px; }
.mk-step .num { position: relative; width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--mk-accent); color: #fff; font-family: var(--mk-mono); font-weight: 500; font-size: 1rem; box-shadow: 0 0 0 6px var(--mk-bg); }
.mk-step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.mk-step p { color: var(--mk-text-2); font-size: .95rem; margin: 0; }
@media (max-width: 767.98px) {
    .mk-steps { grid-template-columns: 1fr; gap: 22px; }
    .mk-steps::before { top: 0; bottom: 0; left: 22px; right: auto; width: 1.5px; height: auto; border: 0; background: var(--mk-border-strong); }
    .mk-step { text-align: left; padding-left: 70px; }
    .mk-step .num { position: absolute; left: 0; top: 0; margin: 0; }
}

/* Closing call-to-action band */
.mk-cta { padding: 4.5rem 0; text-align: center; }
.mk-cta h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin-bottom: .8rem; }
.mk-cta p { max-width: 36rem; margin: 0 auto 1.8rem; font-size: 1.1rem; }
.mk-cta .mk-cta-row { justify-content: center; }
.mk-cta-wrap { padding: 0 0 5rem; }
.mk-cta-wrap .mk-cta { border-radius: 22px; margin: 0 auto; box-shadow: var(--mk-shadow); }

/* ---------- Inner page header ---------- */
.mk-pagehead { padding: 3.6rem 0 3.4rem; }
.mk-pagehead h1 { font-size: clamp(2.1rem, 4.2vw, 3.1rem); letter-spacing: -.03em; margin: 0 0 .8rem; max-width: 20em; }
.mk-pagehead .lead { max-width: 38em; margin: 0; color: rgba(255, 255, 255, .86); }
.mk-pagehead-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.mk-pagehead-stats .tile { min-width: 150px; padding: 12px 18px; border-radius: 12px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .18); }
.mk-pagehead-stats .num { display: block; font-family: var(--mk-display); font-weight: 700; font-size: 1.7rem; line-height: 1.1; color: var(--mk-lime); }
.mk-pagehead-stats .lbl { display: block; font-family: var(--mk-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .78); margin-top: 4px; }

/* ---------- Shared content blocks used by Features, About and Contact ---------- */
.mk-panel { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-radius); box-shadow: var(--mk-shadow-sm); padding: 28px; }
.mk-icon-chip { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: var(--mk-accent-soft); color: var(--mk-accent-text); font-size: 1.2rem; flex: none; }
.mk-icon-chip.warm { background: var(--mk-warn-soft); color: var(--mk-warn-text); }

/* ---------- Footer ---------- */
.mk-footer { flex-shrink: 0; background: var(--mk-deep); color: rgba(255, 255, 255, .78); padding: 3rem 0 2rem; font-size: .92rem; }
.mk-footer a { color: rgba(255, 255, 255, .86); text-decoration: none; }
.mk-footer a:hover { color: var(--mk-lime); text-decoration: underline; }
.mk-footer img { height: 38px; width: auto; display: block; margin-bottom: 12px; }
.mk-footer h6 { font-family: var(--mk-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-lime); font-weight: 500; margin-bottom: 12px; }
.mk-footer ul { list-style: none; padding: 0; margin: 0; }
.mk-footer li { margin-bottom: 6px; }
.mk-footer .legal { border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 2rem; padding-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; color: rgba(255, 255, 255, .7); font-size: .85rem; }

@media (max-width: 767.98px) {
    .mk-hero { padding: 3rem 0 7rem; }
    .mk-section { padding: 3.4rem 0; }
    .mk-quote-wrap { padding-left: 0; }
    .mk-float-a { left: 0; }
    .mk-float-b { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mk *, .mk *::before, .mk *::after { animation: none !important; transition: none !important; }
}

@media print {
    .mk-nav, .mk-footer { display: none !important; }
}


/* ---------- About page ---------- */
.mk-checks { list-style: none; padding: 0; margin: 0; }
.mk-checks li { display: flex; gap: .8rem; margin-bottom: .85rem; color: var(--mk-text-2); }
.mk-checks li .fa { flex: none; width: 24px; height: 24px; margin-top: .1rem; border-radius: 50%; display: grid; place-items: center; font-size: .68rem; background: var(--mk-accent-soft); color: var(--mk-accent-text); }
.mk-checks strong { color: var(--mk-text); }
.mk-planview { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--mk-border); box-shadow: var(--mk-shadow); }


/* ---------- Sign-in, sign-up and invitation pages (.mk-auth) ---------- */
.mk-auth-card { background: var(--mk-surface); border-radius: 18px; box-shadow: var(--mk-shadow-lg); padding: 32px 30px; }
@media (max-width: 575.98px) { .mk-auth-card { padding: 24px 20px; } }
.mk-auth-card h1 { font-size: 1.6rem; margin-bottom: .35rem; }
.mk-auth-card h2 { font-size: 1.4rem; }
.mk-auth-sub { color: var(--mk-muted); margin-bottom: 1.4rem; }
.mk-auth-card .form-label { font-weight: 600; font-size: .9rem; color: var(--mk-text-2); }
.mk-auth-card .form-text { color: var(--mk-muted); }
.mk-auth-card .btn-lg, .mk-auth-card .btn-primary { font-weight: 600; }
.mk-split .validation-message { color: var(--mk-danger-text); font-size: .85rem; }
.mk-split .form-control.invalid { border-color: var(--mk-danger); }
.mk-auth-icon { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; background: var(--mk-accent-soft); color: var(--mk-accent-text); margin-bottom: 1rem; }
.mk-auth-icon.warn { background: var(--mk-warn-soft); color: var(--mk-warn-text); }
.mk-steps-pill { display: flex; gap: .5rem; margin-bottom: 1.4rem; font-family: var(--mk-mono); font-size: .78rem; }
.mk-steps-pill span { padding: .3rem .75rem; border-radius: 999px; background: var(--mk-surface-3); color: var(--mk-text-2); }
.mk-steps-pill span.on { background: var(--mk-accent); color: #fff; }
.mk-split .plan-pick { border: 1px solid var(--mk-border); border-radius: var(--mk-radius); }
.mk-split .plan-pick.is-picked { border: 2px solid var(--mk-accent); background: var(--mk-accent-soft); }
.mk-split .btn-group .btn-outline-secondary { --bs-btn-color: var(--mk-text-2); --bs-btn-border-color: var(--mk-border-strong); --bs-btn-hover-bg: var(--mk-surface-3); --bs-btn-hover-color: var(--mk-text); --bs-btn-hover-border-color: var(--mk-border-strong); }
.mk-split .btn-outline-primary { --bs-btn-color: var(--mk-accent-text); --bs-btn-border-color: var(--mk-accent); --bs-btn-hover-bg: var(--mk-accent); --bs-btn-hover-border-color: var(--mk-accent); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--mk-accent-hover); --bs-btn-active-border-color: var(--mk-accent-hover); }

/* =========================================================
   Life: depth, ambient colour and gentle motion (public site only).
   Everything that moves sits inside prefers-reduced-motion: no-preference; the rest is static polish.
   ========================================================= */

/* Depth: layered, green-tinted shadows instead of one grey blur. */
.mk {
    --mk-shadow-sm: 0 1px 2px rgba(11, 47, 16, .06), 0 2px 6px -2px rgba(11, 47, 16, .06);
    --mk-shadow: 0 1px 2px rgba(11, 47, 16, .05), 0 10px 28px -8px rgba(11, 47, 16, .16), 0 24px 48px -24px rgba(11, 47, 16, .14);
    --mk-shadow-lg: 0 2px 4px rgba(4, 22, 8, .12), 0 30px 60px -12px rgba(4, 22, 8, .38), 0 18px 36px -18px rgba(4, 22, 8, .4);
}

/* A little colour in the page itself, so long pages are not one flat tint. */
.mk-main { background: radial-gradient(1000px 520px at 105% 38%, rgba(146, 208, 80, .10), transparent 62%), radial-gradient(900px 520px at -8% 72%, rgba(27, 122, 52, .07), transparent 62%); }

/* Nav picks up a shadow once the page scrolls under it. */
.mk-nav { transition: box-shadow .25s ease, background-color .25s ease; }
.mk-nav.is-scrolled { box-shadow: 0 8px 24px -10px rgba(11, 47, 16, .22); background: rgba(255, 255, 255, .94); }

/* Buttons: soft sheen and a coloured glow. */
.mk .btn-primary { background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0)); box-shadow: 0 1px 2px rgba(11, 47, 16, .2), 0 8px 18px -8px rgba(27, 122, 52, .65); }
.mk .btn-primary:hover { box-shadow: 0 1px 2px rgba(11, 47, 16, .2), 0 12px 24px -8px rgba(27, 122, 52, .75); }
.mk .btn-light { box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 10px 26px -8px rgba(146, 208, 80, .6); }
.mk .btn-outline-light:hover { box-shadow: 0 10px 24px -10px rgba(255, 255, 255, .5); }

/* Cursor light on cards (marketing.js sets --mx / --my). */
.mk-agent:not(.feature):hover, .mk-pps article:hover { background-image: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(146, 208, 80, .16), transparent 70%); }
.mk-agent.feature:hover { background-image: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(146, 208, 80, .2), transparent 70%), linear-gradient(135deg, var(--mk-deep-2), var(--mk-deep)); }

/* Landscape imagery: contour lines on the dark bands, like a site survey. */
.mk-pagehead::after, .mk-cta::after, .mk-contact-card::after, .mk-split-aside::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='320' viewBox='0 0 640 320' fill='none' stroke='white' stroke-opacity='.10' stroke-width='1.2'%3E%3Cpath d='M-20 250C90 190 170 280 290 230S490 150 660 220'/%3E%3Cpath d='M-20 222C95 160 175 252 295 202S490 122 660 192'/%3E%3Cpath d='M-20 194C100 130 180 224 300 174S490 94 660 164'/%3E%3Cpath d='M-20 166C105 100 185 196 305 146S490 66 660 136'/%3E%3Cpath d='M-20 138C110 70 190 168 310 118S490 38 660 108'/%3E%3Cpath d='M-20 110C115 40 195 140 315 90S490 10 660 80'/%3E%3C/svg%3E") right bottom / 640px 320px no-repeat; }
@media (max-width: 767.98px) { .mk-pagehead::after, .mk-cta::after { opacity: .6; } }

@media (prefers-reduced-motion: no-preference) {
    /* Hero: two slow pools of light drifting behind the grid. */
    .mk-hero::after { content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none; filter: blur(36px); background: radial-gradient(closest-side at 28% 38%, rgba(146, 208, 80, .20), transparent 70%), radial-gradient(closest-side at 76% 62%, rgba(70, 180, 100, .24), transparent 70%); animation: mk-drift 26s ease-in-out infinite alternate; }
    @keyframes mk-drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.08); } }

    /* Hero card: the floating chips bob gently, out of step with each other. */
    .mk-float-a { animation: mk-bob 6.5s ease-in-out infinite; }
    .mk-float-b { animation: mk-bob 7.5s ease-in-out -2.5s infinite; }
    @keyframes mk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

    /* Scroll reveal: marketing.js adds .mk-reveal to below-the-fold blocks and .is-in as they arrive. */
    .mk-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--mk-delay, 0ms); }
    .mk-reveal.is-in { opacity: 1; transform: none; }

    /* Lift on hover for every card type, not just the agent tiles. */
    .mk-pps article, .mk-stat { transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
    .mk-pps article:hover, .mk-stat:hover { transform: translateY(-3px); box-shadow: var(--mk-shadow); border-color: var(--mk-border-strong); }
    .mk .btn { transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
    .mk .btn-primary:hover, .mk .btn-light:hover { transform: translateY(-1px); }
}

/* ---------- Hero report carousel ----------
   Six slides, seven seconds each (a 42s loop: 2s fade in, 5s hold, 2s cross-fade out). Slides stack in one grid cell so the card is always as tall as the
   tallest one. Without motion only the first slide shows. Keep the 6 and 7s in step with HeroSlide data in Index.razor. */
.mk-stage { display: grid; }
.mk-stage > .mk-slide { grid-area: 1 / 1; }
.mk-slide:not(:first-child) { opacity: 0; visibility: hidden; }
.mk-flip { display: grid; }
.mk-flip-item { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; }
.mk-flip-item:not(:first-child) { opacity: 0; visibility: hidden; }
.mk-quote-total, .mk-quote-title { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
    .mk-slide, .mk-flip-item { animation: mk-slide 42s linear infinite both; animation-delay: calc(var(--i) * 7s); }
    .mk-slide:not(:first-child), .mk-flip-item:not(:first-child) { visibility: visible; }
    .mk-quote-wrap:hover .mk-slide, .mk-quote-wrap:hover .mk-flip-item { animation-play-state: paused; }
    /* Fade in over two seconds, hold for five, then fade out while the next slide fades in. */
    @keyframes mk-slide { 0% { opacity: 0; } 4.76% { opacity: 1; } 16.67% { opacity: 1; } 21.43% { opacity: 0; } 100% { opacity: 0; } }
}

/* ---------- Features page ----------
   Each agent is a section: what it does and four points on the left, the time saved drawn as two survey dimension
   lines on the right (the signature again), and the step-by-step workflow folded away until asked for. */
.mk-fx-jump { display: flex; flex-wrap: wrap; gap: .5rem; padding: 2.2rem 0 .5rem; }
.mk-fx-jump a:not(.btn) { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .95rem; border-radius: 999px; background: var(--mk-surface); border: 1px solid var(--mk-border); color: var(--mk-text-2); font-weight: 600; font-size: .9rem; text-decoration: none; box-shadow: var(--mk-shadow-sm); }
.mk-fx-jump a:not(.btn) .fa { color: var(--mk-accent); }
.mk-fx-jump a:not(.btn):hover { background: var(--mk-accent-soft); border-color: #b3d9bb; color: var(--mk-accent-text); }

.mk-fx { padding: 3.2rem 0; border-bottom: 1px solid var(--mk-border); scroll-margin-top: 80px; }
.mk-fx:last-child { border-bottom: 0; }
.mk-fx-tag { font-family: var(--mk-mono); font-weight: 500; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem; }
.mk-fx h2 { display: flex; align-items: center; gap: .75rem; font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 1rem; }
.mk-fx .lead { margin-bottom: 1.4rem; }
.mk-fx-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.mk-fx-feats li { display: flex; gap: .7rem; color: var(--mk-text-2); }
.mk-fx-feats li .fa { color: var(--mk-accent); margin-top: .3rem; flex: none; }
.mk-fx-feats strong { color: var(--mk-text); }

.mk-fx-time { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-radius); box-shadow: var(--mk-shadow); padding: 1.4rem 1.5rem 1.6rem; }
.mk-fx-time-title { font-family: var(--mk-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-muted); margin-bottom: 1.2rem; }
.mk-fx-row + .mk-fx-row { margin-top: 1.5rem; }
.mk-fx-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .55rem; font-size: .92rem; color: var(--mk-text-2); }
.mk-fx-row-head strong { font-family: var(--mk-display); font-size: 1.15rem; letter-spacing: -.01em; color: var(--mk-text); text-align: right; }
.mk-fx-row.manual .mk-fx-row-head strong { color: var(--mk-danger-text); }
.mk-fx-row.ai .mk-fx-row-head strong { color: var(--mk-accent-text); }
/* A dimension line: end ticks joined by a rule. Its length is the time. */
.mk-dimline { width: var(--w, 100%); min-width: 14px; height: 14px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; transform-origin: left center; }
.mk-fx-row.manual .mk-dimline { color: #c25b5b; }
.mk-fx-row.ai .mk-dimline { color: var(--mk-accent); }

.mk-fx-flow { margin-top: 1rem; background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-radius); box-shadow: var(--mk-shadow-sm); }
.mk-fx-flow summary { cursor: pointer; padding: .95rem 1.2rem; font-weight: 600; color: var(--mk-accent-text); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.mk-fx-flow summary::-webkit-details-marker { display: none; }
.mk-fx-flow summary::after { content: "+"; font-family: var(--mk-mono); font-size: 1.2rem; line-height: 1; }
.mk-fx-flow[open] summary::after { content: "–"; }
.mk-fx-flow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; padding: .3rem 1.2rem 1.3rem; }
.mk-fx-flow h3 { display: flex; align-items: center; gap: .5rem; font-size: .95rem; margin-bottom: .7rem; }
.mk-fx-flow .before h3 { color: var(--mk-danger-text); }
.mk-fx-flow .after h3 { color: #0f4d20; }
.mk-fx-flow ol { margin: 0; padding-left: 1.3rem; font-size: .9rem; color: var(--mk-text-2); }
.mk-fx-flow li { margin-bottom: .45rem; }
.mk-fx-flow li::marker { font-family: var(--mk-mono); font-size: .8rem; color: var(--mk-muted); }
@media (max-width: 575.98px) { .mk-fx-flow-grid { grid-template-columns: 1fr; } .mk-fx { padding: 2.4rem 0; } }

@media (prefers-reduced-motion: no-preference) {
    /* The lines draw themselves as the panel arrives (marketing.js tags .mk-fx-time for the reveal). */
    .mk-dimline { transition: transform 1s cubic-bezier(.16, 1, .3, 1) .25s; }
    .mk-reveal:not(.is-in) .mk-dimline { transform: scaleX(0); }
}

/* About page: story as an editorial spread, a pull quote, and the ROI tile. */
.mk-story-head { position: sticky; top: 96px; }
.mk-story-head h2 { margin-top: .4rem; }
.mk-story p { color: var(--mk-text-2); margin-bottom: 1.1rem; }
.mk-pull { position: relative; margin: 1.8rem 0; padding: .2rem 0 .2rem 1.6rem; font-family: var(--mk-display); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.3; letter-spacing: -.015em; color: var(--mk-text); }
.mk-pull::before { content: ""; position: absolute; left: 0; top: .2rem; bottom: .2rem; width: 10px; border-top: 2px solid var(--mk-accent); border-bottom: 2px solid var(--mk-accent); background: linear-gradient(var(--mk-accent), var(--mk-accent)) center / 2px 100% no-repeat; }
.mk-agent.accent { background: linear-gradient(160deg, var(--mk-lime-soft), var(--mk-surface) 70%); border-color: #cfe6a4; }
.mk-roi { display: flex; gap: 1.6rem; margin-bottom: 1rem; }
.mk-roi div { display: flex; flex-direction: column; }
.mk-roi strong { font-family: var(--mk-display); font-size: 2.6rem; line-height: 1; letter-spacing: -.035em; color: var(--mk-accent-text); }
.mk-roi span { font-size: .82rem; color: var(--mk-muted); margin-top: .3rem; }
@media (max-width: 991.98px) { .mk-story-head { position: static; } }
.mk-planview .dimdraw path { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
    .mk-planview .dimdraw path { transition: stroke-dashoffset 1.4s cubic-bezier(.16, 1, .3, 1) .3s; }
    .mk-planview.mk-reveal:not(.is-in) .dimdraw path { stroke-dashoffset: 1; }
}

/* ---------- Contact page ---------- */
.mk-contact-card { padding: 30px 30px 32px; border-radius: 20px; box-shadow: var(--mk-shadow-lg); height: 100%; }
.mk-reply { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.6rem; padding: .4rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); font-size: .85rem; font-weight: 600; color: #fff; }
.mk-reply .fa { color: var(--mk-lime); }
.mk-contact-item { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.mk-contact-item:first-of-type { border-top: 0; padding-top: 0; }
.mk-contact-item:last-child { padding-bottom: 0; }
.mk-contact-item h2 { margin: 0 0 4px; font-family: var(--mk-mono); font-size: .74rem !important; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-lime); }
.mk-contact-item p { margin: 0; color: #fff; }
.mk-contact-item p a:not(.btn) { color: #fff; font-family: var(--mk-display); font-weight: 600; font-size: clamp(.98rem, 4.3vw, 1.25rem); letter-spacing: -.01em; text-decoration: none; overflow-wrap: anywhere; }
.mk-contact-item p a:not(.btn):hover { color: var(--mk-lime); }
.mk-contact-card .mk-icon-chip { background: rgba(146, 208, 80, .16); color: var(--mk-lime); }
.mk-hours { margin: 0; }
.mk-hours div { display: flex; flex-direction: column; padding: .45rem 0; border-bottom: 1px dashed rgba(255, 255, 255, .2); font-size: .92rem; }
.mk-hours div:last-child { border-bottom: 0; }
.mk-hours dt { font-weight: 500; color: rgba(255, 255, 255, .92); }
.mk-hours dd { margin: 0; font-family: var(--mk-mono); font-size: .8rem; color: rgba(255, 255, 255, .8); }
@media (max-width: 575.98px) { .mk-contact-card { padding: 24px 20px; } }

/* Subject chosen as one of a few pills rather than a dropdown. */
.mk-topics { display: flex; flex-wrap: wrap; gap: .5rem; }
.mk-topic { position: relative; margin: 0; cursor: pointer; }
.mk-topic input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.mk-topic span { display: inline-block; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--mk-border-strong); background: var(--mk-surface); color: var(--mk-text-2); font-weight: 600; font-size: .9rem; }
.mk-topic:hover span { background: var(--mk-surface-3); }
.mk-topic input:checked + span { background: var(--mk-deep-2); border-color: var(--mk-deep-2); color: #fff; }
.mk-topic input:focus-visible + span { outline: 2px solid var(--mk-accent); outline-offset: 2px; }
.mk-form-note { font-size: .88rem; color: var(--mk-muted); }
legend.form-label { float: none; width: auto; padding: 0; font-size: .9rem; margin-bottom: .5rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Native accordion: no script, and it works with the keyboard out of the box. */
.mk-acc { max-width: 52rem; }
.mk-acc details { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: 14px; margin-bottom: .75rem; box-shadow: var(--mk-shadow-sm); overflow: hidden; }
.mk-acc details[open] { border-color: #b3d9bb; box-shadow: var(--mk-shadow); }
.mk-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.3rem; cursor: pointer; list-style: none; font-weight: 650; color: var(--mk-text); }
.mk-acc summary::-webkit-details-marker { display: none; }
.mk-acc summary::after { content: "+"; flex: none; font-family: var(--mk-mono); font-size: 1.3rem; line-height: 1; color: var(--mk-accent); }
.mk-acc details[open] summary { background: var(--mk-accent-soft); color: var(--mk-accent-text); }
.mk-acc details[open] summary::after { content: "–"; }
.mk-acc summary:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: -2px; }
.mk-acc p { margin: 0; padding: 1rem 1.3rem 1.2rem; color: var(--mk-text-2); }

/* ---------- Log in: brand side and form side ---------- */
.mk-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); min-height: 100vh; }
.mk-split-aside { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 2.4rem clamp(1.5rem, 4vw, 4rem) 3rem; }
.mk-split-logo img { height: 40px; width: auto; display: block; }
.mk-split-copy h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 2.4rem; max-width: 14em; }
.mk-split-copy p { font-size: 1.1rem; max-width: 28em; margin-bottom: 1.8rem; }
.mk-split-agents { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.mk-split-agents li { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: .82rem; font-weight: 600; }
.mk-split-agents .fa { color: var(--mk-lime); }
.mk-split-main { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; background: var(--mk-bg); }
.mk-split-form { width: 100%; max-width: 400px; }
.mk-split-form h1 { font-size: 2rem; margin-bottom: .35rem; }
.mk-split-form .form-text { color: var(--mk-muted); }
.mk-split-form .btn-lg { font-weight: 600; }
.mk-split-alt { margin: 1.4rem 0 0; text-align: center; font-size: .92rem; color: var(--mk-muted); }
.mk-split-alt a:not(.btn) { font-weight: 600; }
.mk-pw { position: relative; }
.mk-pw .form-control { padding-right: 3rem; }
.mk-pw-toggle { position: absolute; top: 50%; right: .4rem; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 8px; background: transparent; color: var(--mk-muted); }
.mk-pw-toggle:hover { background: var(--mk-surface-3); color: var(--mk-text); }
.mk-pw-toggle:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 1px; }
@media (max-width: 991.98px) {
    .mk-split { grid-template-columns: 1fr; min-height: 0; }
    .mk-split-aside { padding: 1.3rem 1.5rem 1.4rem; gap: 0; }
    .mk-split-copy { display: none; }
    .mk-split-main { align-items: flex-start; padding-top: 2rem; padding-bottom: 3rem; }
}

/* The sign-up and invitation pages share the log in layout; sign-up is wider because of the plan cards. */
.mk-split-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
@media (min-width: 992px) { .mk-split-aside { position: sticky; top: 0; align-self: start; height: 100vh; } }
.mk-split-form.wide { max-width: 720px; }
.mk-split-form .mk-auth-card { background: transparent; box-shadow: none; border-radius: 0; padding: 0; }
.mk-split-form .mk-auth-card.text-center { padding: 1rem 0; }
.mk-split-form .mk-auth-card h1 { font-size: 2rem; }
@media (max-width: 991.98px) { .mk-split-wide { grid-template-columns: 1fr; } }
/* ---------- System admin login: the log in layout plus a label that says where you are ---------- */
.mk-admin-label { display: block; margin-bottom: .6rem; font-family: var(--mk-mono); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-accent-text); }