/* How It Works - Redesign (Bold Black & White + Macbook Aesthetic) */
/* Works on both standalone page (body.how-it-works-page) and combined homepage (body.homepage-black-white) */
:root {
    --hiw-bg: #ffffff;
    --hiw-text: #000000;
    --hiw-accent: #000000;
    --hiw-gray: #f5f5f7;
    /* Apple-like light gray */
    --hiw-border: #e1e1e1;
    --hiw-mac-gray: #c8c9cc;
    --hiw-screen-bg: #ffffff;
    --hiw-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --hiw-font-mono: 'JetBrains Mono', monospace;
}

/* ============================================
   SECTION HEADER (Renovated)
============================================ */

/* Normal-flow black banner at the top of the section. Previously this was
   position:absolute overlapping step 1, which caused the sticky laptop to
   render over the title. The black background keeps the white title legible
   independently of the step backgrounds. */
.hiw-section-header {
    position: relative;
    text-align: center;
    z-index: 30;
    background: #000;
    padding: 5rem 20px 3.5rem;
}

.hiw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.hiw-eyebrow .eyebrow-dot {
    width: 8px;
    height: 8px;
    background: #000;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
}

.hiw-eyebrow span:last-child {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'JetBrains Mono', monospace;
}

.hiw-main-title {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 900;
    color: #fff;
    letter-spacing: -2px;
    margin: 0;
    line-height: 1.15;
}

.hiw-main-title .title-accent {
    display: block;
    color: #ffffff;
}

/* Light step variant */
.hiw-step:not(.hiw-step-dark).active~.hiw-section-header .hiw-eyebrow span:last-child {
    color: rgba(0, 0, 0, 0.5);
}

.hiw-step:not(.hiw-step-dark).active~.hiw-section-header .hiw-main-title {
    color: #000;
}

.hiw-step:not(.hiw-step-dark).active~.hiw-section-header .hiw-main-title .title-accent {
    color: #000000;
}

/* Apply to both standalone and combined pages */
body.how-it-works-page,
body.homepage-black-white {
    --hiw-bg: #ffffff;
    --hiw-text: #000000;
}


/* Sticky Scroll Section */
.hiw-scroll-container {
    position: relative;
    padding: 0 0 4rem;
    overflow: visible;
    /* Allow backgrounds to extend beyond container */
}

.hiw-sticky-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
}

@media (min-width: 1024px) {
    .hiw-sticky-wrapper {
        flex-direction: row;
        align-items: flex-start;
    }

    .hiw-visual-container {
        top: 14vh;
        height: 76vh;
    }}


@media (min-width: 1024px) and (max-width: 1440px) {
    .hiw-main-title {
        font-size: clamp(36px, 4.4vw, 56px);
        line-height: 1.12;
    }}


@media (min-width: 1024px) {
    .hiw-steps-content .hiw-step:first-child {
        /* Header is now a flow banner above the columns, so the large
           top clearance that dodged the old absolute header is gone. */
        padding-top: 2rem;
    }}


/* Left Side: Steps Content */
.hiw-steps-content {
    flex: 1;
    padding-right: 4rem;
    position: relative;
    z-index: 2;
}

.hiw-step {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.2;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: translateY(20px);
}

.hiw-step.active {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   ALTERNATING DARK/LIGHT STEP BACKGROUNDS
============================================ */

/* Dark step styling - creates full-width dark background */
.hiw-step-dark {
    position: relative;
    z-index: 1;
    /* Add padding to ensure content doesn't touch edges */
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.hiw-step-dark::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    /* Position from left edge of viewport */
    left: -100vw;
    right: -100vw;
    background: #000000;
    z-index: -1;
    pointer-events: none;
}

/* Override text colors for dark steps */
.hiw-step-dark .hiw-step-number {
    color: rgba(255, 255, 255, 0.5);
}

.hiw-step-dark .hiw-step-title {
    color: #ffffff;
}

.hiw-step-dark .hiw-step-desc {
    color: rgba(255, 255, 255, 0.7);
}

.hiw-step-dark .hiw-feature-item {
    color: #ffffff;
}

.hiw-step-dark .hiw-feature-icon {
    background: #ffffff;
    color: #000000;
}

.hiw-step-number {
    font-family: var(--hiw-font-mono);
    font-size: 1rem;
    color: #666;
    margin-bottom: 1rem;
    display: block;
}

.hiw-step-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.hiw-step-desc {
    font-size: 1.25rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.hiw-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hiw-feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    font-weight: 500;
}

.hiw-feature-icon {
    width: 24px;
    height: 24px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 12px;
}

/* Right Side: Sticky Macbook */
.hiw-visual-container {
    flex: 1.5;
    position: sticky;
    top: 10vh;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    z-index: 10;
    /* Ensure MacBook stays above step backgrounds */
}

/* Enhanced MacBook shadow for dark backgrounds */
.hiw-macbook {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* CSS Macbook */
.macbook {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16/10;
    background: #000;
    border-radius: 20px 20px 0 0;
    padding: 2% 2% 0 2%;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
}

.macbook-screen {
    background: #fff;
    width: 100%;
    height: 100%;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    position: relative;
}

.macbook-base {
    position: absolute;
    bottom: -12px;
    left: -5%;
    width: 110%;
    height: 12px;
    background: #e1e1e1;
    border-radius: 0 0 20px 20px;
    background: #dcdcdc;
}

.macbook-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 20px;
    background: #000;
    border-radius: 0 0 10px 10px;
    z-index: 10;
}

/* Screen Content Animation */
.screen-content {
    /* Mockup design tokens — scoped here so the miniature dashboard is a
       self-contained black-and-white system. */
    --mk-ink: #0b0b0d;
    --mk-text: #3b3b42;
    --mk-muted: #7b7b84;
    --mk-faint: #a6a6ae;
    --mk-line: #eaeaee;
    --mk-line-2: #f3f3f5;
    --mk-surface: #ffffff;
    --mk-surface-2: #f7f7f9;
    --mk-surface-3: #eeeef1;
    --mk-side: #0e0e12;
    --mk-side-text: #9a9aa4;
    --mk-side-line: rgba(255, 255, 255, 0.09);

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.6s ease;
    transform: scale(1.02);
    background: var(--mk-surface);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    color: var(--mk-text);
    font-family: var(--hiw-font);
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
}

.screen-content.active {
    opacity: 1;
    transform: scale(1);
    z-index: 5;
}

/* (legacy .ui-* mockup styles removed — superseded by the .mk-* system) */

/* Animations */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.floating {
    animation: float 6s ease-in-out infinite;
}


/* ============================================
   RESPONSIVE STYLES FOR HOW IT WORKS
============================================ */

@media (max-width: 1023px) {
    .hiw-sticky-wrapper {
        flex-direction: column;
    }

    .hiw-steps-content {
        padding-right: 0;
        order: 2;
    }

    .hiw-visual-container {
        position: relative;
        top: 0;
        height: auto;
        min-height: 400px;
        order: 1;
        margin-bottom: 2rem;
    }

    .hiw-step {
        min-height: auto;
        padding: 2rem 0;
    }

    .hiw-macbook,
    .macbook {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .hiw-step-title {
        font-size: 1.75rem;
    }

    .hiw-step-desc {
        font-size: 1rem;
    }}


/* ================================================================
   PRODUCT MOCKUP — miniature B&W dashboard inside the MacBook screen
   Four screens cross-fade with the scroll steps. New classes are
   prefixed .mk-. (Legacy .ui-* mockup styles above are unused.)
================================================================ */

/* ---- Browser/window title bar ---- */
.mk-titlebar {
    height: 32px;
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    background: #ededf0;
    border-bottom: 1px solid #dcdce1;
}

.mk-lights {
    display: flex;
    gap: 7px;
    width: 52px;
}

.mk-lights i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: block;
    background: #cfcfd5;
}

.mk-lights i:nth-child(1) { background: #bcbcc3; }
.mk-lights i:nth-child(2) { background: #d4d4da; }
.mk-lights i:nth-child(3) { background: #dedee3; }

.mk-url {
    flex: 1;
    max-width: 260px;
    margin: 0 auto;
    height: 20px;
    background: #fff;
    border: 1px solid #dedee3;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 10.5px;
    color: #86868f;
}

.mk-url svg { width: 10px; height: 10px; opacity: 0.55; }
.mk-titlebar .mk-spacer { width: 52px; flex: none; }

/* ---- App shell ---- */
.mk-app {
    flex: 1;
    display: flex;
    min-height: 0;
}

.mk-side {
    width: 132px;
    flex: none;
    background: var(--mk-side);
    color: var(--mk-side-text);
    display: flex;
    flex-direction: column;
    padding: 11px 7px 9px;
}

.mk-brand {
    display: flex;
    align-items: center;
    padding: 2px 5px 11px;
}

.mk-brand-logo { height: 16px; width: auto; display: block; }

.mk-nav { display: flex; flex-direction: column; }
.mk-nav-group { display: flex; flex-direction: column; gap: 1px; margin-bottom: 5px; }

.mk-nav-label {
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
    padding: 5px 8px 3px;
}

.mk-nav-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4.5px 7px;
    border-radius: 6px;
    font-size: 9.5px;
    font-weight: 500;
    color: var(--mk-side-text);
}

.mk-nav-item svg { width: 12px; height: 12px; flex: none; opacity: 0.78; }

.mk-nav-item.active {
    background: #fff;
    color: #0b0b0d;
    font-weight: 650;
}

.mk-nav-item.active svg { opacity: 1; }

.mk-side-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 4px 0;
    border-top: 1px solid var(--mk-side-line);
}

.mk-user-name { color: #fff; font-size: 10px; font-weight: 600; line-height: 1.25; }
.mk-user-plan { color: rgba(255, 255, 255, 0.42); font-size: 8.5px; }

/* Main column */
.mk-main {
    flex: 1;
    min-width: 0;
    background: var(--mk-surface);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--mk-line);
    flex: none;
}

.mk-head h3 { font-size: 15px; font-weight: 750; color: var(--mk-ink); letter-spacing: -0.02em; margin: 0; }
.mk-head p { font-size: 10.5px; color: var(--mk-muted); margin: 2px 0 0; }
.mk-head-tools { display: flex; align-items: center; gap: 9px; }

.mk-ava {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #0b0b0d;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    flex: none;
}

.mk-ava.line { background: var(--mk-surface-2); color: var(--mk-ink); border: 1px solid var(--mk-line); }
.mk-ava.sm { width: 24px; height: 24px; font-size: 9px; }

.mk-body { padding: 11px 14px; overflow: hidden; flex: 1; min-height: 0; }

.mk-btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 12px;
    background: #0b0b0d; color: #fff;
    border-radius: 8px; font-size: 11px; font-weight: 600; border: none;
}

.mk-btn svg { width: 12px; height: 12px; }

.mk-legend { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; color: var(--mk-muted); }
.mk-legend b { width: 8px; height: 8px; border-radius: 2px; background: var(--mk-ink); display: inline-block; }
.mk-legend.o b { background: var(--mk-surface-3); }
.mk-flow-ico {
    width: 26px; height: 26px; border-radius: 8px;
    background: var(--mk-surface-2); border: 1px solid var(--mk-line);
    display: flex; align-items: center; justify-content: center; flex: none; color: var(--mk-ink);
}
.mk-flow-ico svg { width: 13px; height: 13px; }
.mk-hub-month .mk-progress { margin-top: auto; }

/* ---- Properties page (matches the live app: black header bar, filter
   dropdowns, centred cards with a rent | tenants footer + issue badge) ---- */
.mk-prop-topbar { flex: none; margin: 10px 14px 9px; background: #0b0b0d; border-radius: 12px; padding: 8px 12px 8px 16px; display: flex; align-items: center; justify-content: space-between; }
.mk-prop-topbar span { color: #fff; font-size: 13px; font-weight: 800; letter-spacing: -0.02em; }
.mk-prop-add { display: inline-flex; align-items: center; gap: 5px; background: #fff; color: #0b0b0d; border: none; border-radius: 8px; height: 24px; padding: 0 11px; font-size: 10.5px; font-weight: 700; }
.mk-prop-add svg { width: 11px; height: 11px; }

.mk-prop-filters { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px 11px; }
.mk-prop-drop { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border: 1px solid var(--mk-line); border-radius: 9px; background: var(--mk-surface); font-size: 10px; font-weight: 600; color: var(--mk-ink); }
.mk-prop-drop svg { width: 11px; height: 11px; opacity: 0.5; }
.mk-prop-search-box { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; width: 148px; border: 1px solid var(--mk-line); border-radius: 9px; background: var(--mk-surface); font-size: 10px; color: var(--mk-faint); }
.mk-prop-search-box svg { width: 12px; height: 12px; opacity: 0.6; }

.mk-prop-scroll { flex: 1; min-height: 0; overflow: hidden; padding: 0 14px 14px; }
.mk-prop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mk-prop-card { border: 1px solid var(--mk-line); border-radius: 14px; overflow: hidden; background: var(--mk-surface); }
.mk-prop-thumb { height: 50px; position: relative; overflow: hidden; background: var(--mk-surface-3); }
.mk-prop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05) brightness(1.02); }
.mk-prop-issue { position: absolute; top: 7px; right: 7px; background: #0b0b0d; color: #fff; font-size: 8.5px; font-weight: 700; padding: 3px 8px; border-radius: 100px; }
.mk-prop-issue.warn { background: #fff; color: #0b0b0d; border: 1px solid rgba(0, 0, 0, 0.12); }
.mk-prop-body { padding: 7px 8px 8px; text-align: center; }
.mk-prop-name { display: block; font-size: 11px; font-weight: 750; color: var(--mk-ink); letter-spacing: -0.01em; }
.mk-prop-addr { display: none; }
.mk-prop-specs { display: none; }
.mk-prop-stats { display: grid; grid-template-columns: 1fr 1fr; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--mk-line-2); }
.mk-prop-stats > div { text-align: center; }
.mk-prop-stats > div:first-child { border-right: 1px solid var(--mk-line-2); }
.mk-prop-stats span { display: block; font-size: 6.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mk-muted); margin-bottom: 1px; }
.mk-prop-stats b { font-size: 10.5px; font-weight: 800; color: var(--mk-ink); letter-spacing: -0.02em; }

/* Clickable cards + list <-> detail toggle */
.mk-prop-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mk-prop-card { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.mk-prop-card:hover { transform: translateY(-2px); border-color: rgba(0, 0, 0, 0.18); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07); }

/* ---- Mini property-management detail view (mirrors the real property page) ---- */
.mk-pd-view { flex: 1; min-height: 0; display: none; flex-direction: column; }
.mk-main.detail-open .mk-prop-view { display: none; }
.mk-main.detail-open .mk-pd-view { display: flex; }

.mk-pd-top { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; }
.mk-pd-back, .mk-pd-act { display: inline-flex; align-items: center; gap: 5px; background: #0b0b0d; color: #fff; border: none; border-radius: 8px; height: 26px; padding: 0 11px; font-size: 10.5px; font-weight: 650; cursor: pointer; }
.mk-pd-back svg, .mk-pd-act svg { width: 12px; height: 12px; }
.mk-pd-top-actions { display: flex; gap: 7px; }

.mk-pd-scroll { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.mk-pd-titlehead { text-align: center; padding: 2px 14px 12px; }
.mk-pd-titlehead h4 { font-size: 17px; font-weight: 800; color: var(--mk-ink); margin: 0 0 6px; letter-spacing: -0.03em; }
.mk-pd-metarow { display: inline-flex; align-items: center; gap: 7px; }
.mk-pd-type { background: #0b0b0d; color: #fff; font-size: 7.5px; font-weight: 700; letter-spacing: 0.08em; padding: 3px 7px; border-radius: 5px; text-transform: uppercase; }
.mk-pd-mdot { color: var(--mk-faint); }
.mk-pd-loc { font-size: 10.5px; color: var(--mk-muted); }

.mk-pd-tabsbar { flex: none; display: flex; justify-content: center; gap: 20px; background: #0b0b0d; padding: 9px 14px; }
.mk-pd-tabsbar span { position: relative; font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, 0.55); cursor: pointer; padding-bottom: 3px; }
.mk-pd-tabsbar span.active { color: #fff; }
.mk-pd-tabsbar span.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; background: #fff; }

.mk-pd-content { flex: 1; min-height: 0; overflow: hidden; padding: 14px; }
.mk-tn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.mk-tn-card { border: 1px solid var(--mk-line); border-radius: 12px; overflow: hidden; background: var(--mk-surface); }
.mk-tn-top { position: relative; padding: 13px 11px 11px; text-align: center; }
.mk-tn-issue { position: absolute; top: 8px; right: 8px; font-size: 8px; font-weight: 700; color: #0b0b0d; background: var(--mk-surface-2); border: 1px solid var(--mk-line); border-radius: 100px; padding: 2px 7px; }
.mk-tn-ava { width: 36px; height: 36px; border-radius: 50%; margin: 0 auto 8px; background: var(--mk-surface-2); border: 1px solid var(--mk-line); color: var(--mk-ink); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.mk-tn-name { display: block; font-size: 11px; font-weight: 700; color: var(--mk-ink); }
.mk-tn-email { display: block; font-size: 8.5px; color: var(--mk-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-tn-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 11px; border-top: 1px solid var(--mk-line-2); }
.mk-tn-dates { font-size: 8.5px; color: var(--mk-muted); }
.mk-tn-dates em { font-style: normal; color: var(--mk-faint); }
.mk-tn-arrow { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--mk-line); display: flex; align-items: center; justify-content: center; color: var(--mk-ink); flex: none; }
.mk-tn-arrow svg { width: 11px; height: 11px; }
.mk-tn-add { max-width: 200px; margin: 12px auto 0; border: 1.5px dashed var(--mk-line); border-radius: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px; }
.mk-tn-add-btn { width: 30px; height: 30px; border-radius: 50%; background: var(--mk-ink); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 2px; }
.mk-tn-add-btn svg { width: 15px; height: 15px; }
.mk-tn-add b { font-size: 10.5px; font-weight: 700; color: var(--mk-ink); }
.mk-tn-add small { font-size: 8.5px; color: var(--mk-muted); }

/* Detail tab panels (Tenants / Issues / Documents / Certificates / Appliances / Keys) */
.mk-pd-panel { display: none; }
.mk-pd-panel.active { display: block; }
.mk-pd-list { display: flex; flex-direction: column; }
.mk-pd-li { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--mk-line-2); }
.mk-pd-li:first-child { border-top: none; }
.mk-pd-li-tx { flex: 1; min-width: 0; }
.mk-pd-li-tx b { display: block; font-size: 11px; font-weight: 650; color: var(--mk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-pd-li-tx small { font-size: 9px; color: var(--mk-muted); }
.mk-pd-li-act { font-size: 10px; font-weight: 600; color: var(--mk-ink); text-decoration: underline; cursor: pointer; flex: none; }

/* ---- Badges ---- */
.mk-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 100px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.02em;
    border: 1px solid var(--mk-line);
    color: var(--mk-ink); background: var(--mk-surface-2);
}
.mk-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--mk-ink); }
.mk-badge.solid { background: var(--mk-ink); color: #fff; border-color: var(--mk-ink); }
.mk-badge.solid::before { background: #fff; }
.mk-badge.hollow { color: var(--mk-muted); }
.mk-badge.hollow::before { background: var(--mk-faint); }

/* ---- Table ---- */
.mk-table { width: 100%; border-collapse: collapse; }
.mk-table thead th {
    text-align: left; font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--mk-muted); font-weight: 700;
    padding: 0 8px 6px; border-bottom: 1px solid var(--mk-line);
}
.mk-table td { padding: 6px 8px; border-bottom: 1px solid var(--mk-line-2); font-size: 11px; color: var(--mk-text); vertical-align: middle; }
.mk-table tbody tr:last-child td { border-bottom: none; }
.mk-strong { font-weight: 700; color: var(--mk-ink); }
.mk-progress { height: 6px; width: 240px; max-width: 100%; border-radius: 100px; background: var(--mk-surface-3); overflow: hidden; margin-top: 9px; }
.mk-progress i { display: block; height: 100%; background: var(--mk-ink); border-radius: 100px; }

/* ---- Documents screen ---- */
.mk-doc { display: grid; grid-template-columns: 148px 1fr 128px; gap: 12px; height: 100%; }
.mk-col-lbl { font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mk-muted); margin-bottom: 6px; }
.mk-doc-list { display: flex; flex-direction: column; gap: 3px; }
.mk-doc-type { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; font-size: 11px; font-weight: 500; color: var(--mk-text); border: 1px solid transparent; }
.mk-doc-type svg { width: 14px; height: 14px; opacity: 0.7; flex: none; }
.mk-doc-type.active { background: var(--mk-surface-2); border-color: var(--mk-line); color: var(--mk-ink); font-weight: 650; }

.mk-doc-stage { display: flex; flex-direction: column; gap: 12px; }
.mk-doc-step { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--mk-muted); }
.mk-doc-step .tick { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--mk-line); display: flex; align-items: center; justify-content: center; flex: none; }
.mk-doc-step .tick svg { width: 9px; height: 9px; color: #fff; }
.mk-doc-step.done .tick { background: var(--mk-ink); border-color: var(--mk-ink); }
.mk-doc-step.now { color: var(--mk-ink); font-weight: 650; }
.mk-doc-step.now .tick { border-color: var(--mk-ink); position: relative; }
.mk-doc-step.now .tick::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mk-ink); }

/* A4 page preview */
.mk-page-wrap { background: var(--mk-surface-3); border: 1px solid var(--mk-line); border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 12px; overflow: hidden; }
.mk-page {
    /* Width-driven. Height-driven with max-width:100% was self-defeating: the
       width clamp won, so aspect-ratio never got to size the box — the page
       stayed 142x248 while its content needed 347px, and the whole signature
       block fell outside. Driving from width lets the ratio actually apply,
       and max-height keeps the page inside its wrapper. */
    width: 100%;
    height: auto;
    max-height: 100%;
    aspect-ratio: 1 / 1.414;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    padding: 11px 13px;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.mk-page-badge { align-self: flex-start; font-size: 6.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mk-muted); border: 1px solid var(--mk-line); border-radius: 4px; padding: 2px 5px; margin-bottom: 6px; }
.mk-page h6 { font-size: 10.5px; font-weight: 800; color: var(--mk-ink); letter-spacing: -0.01em; margin: 0 0 3px; line-height: 1.2; }
.mk-page .sub { font-size: 7px; color: var(--mk-muted); margin-bottom: 7px; }
.mk-ln { height: 4px; border-radius: 2px; background: var(--mk-line); margin-bottom: 3px; }
.mk-ln.w1 { width: 100%; } .mk-ln.w2 { width: 92%; } .mk-ln.w3 { width: 74%; }
.mk-para { margin: 6px 0; }
.mk-para .h { height: 5px; width: 40%; background: #d4d4da; border-radius: 2px; margin-bottom: 5px; }
.mk-sign { margin-top: auto; display: flex; gap: 12px; padding-top: 8px; }
.mk-sign div { flex: 1; }
.mk-sign .rule { height: 1px; background: #d4d4da; margin-bottom: 3px; }
.mk-sign small { font-size: 6px; color: var(--mk-muted); }

/* ---- Certificate cards (used by screen 1's property-detail
   Certificates tab; the standalone compliance screen was removed because the
   app has no compliance page) ---- */
.mk-cert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; align-content: start; }
.mk-cert { border: 1px solid var(--mk-line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.mk-cert-top { display: flex; align-items: center; justify-content: space-between; }
.mk-cert-ico { width: 25px; height: 25px; border-radius: 7px; background: var(--mk-surface-2); border: 1px solid var(--mk-line); display: flex; align-items: center; justify-content: center; color: var(--mk-ink); }
.mk-cert-ico svg { width: 13px; height: 13px; }
.mk-cert b { font-size: 11px; font-weight: 650; color: var(--mk-ink); display: block; }
.mk-cert small { font-size: 9px; color: var(--mk-muted); }
/* ---- Shared toolbar (mirrors .dash2-toolbar / .fin-toolbar: a dark identity
   row over a light row of tabs or filter chips). Same idiom as the Properties
   screen's .mk-prop-topbar, kept separate so either can move alone. ---- */
.mk-tb {
    flex: none;
    margin: 10px 14px 8px;
    background: #0b0b0d;
    border-radius: 12px;
    padding: 7px 10px 7px 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.mk-tb-title { color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.mk-tb-acts { display: flex; align-items: center; gap: 6px; }
.mk-tb-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: #fff; color: #0b0b0d; border: none; border-radius: 8px;
    height: 22px; padding: 0 9px;
    font-size: 9.5px; font-weight: 700; white-space: nowrap;
}
.mk-tb-btn svg { width: 10px; height: 10px; }
/* Left-grouped. A trailing control (the Finance year picker) pushes itself
   right with margin-left:auto — the same idiom .mk-prop-search-box already
   uses. space-between here would spread the Dashboard's three chips edge to
   edge instead of grouping them. */
.mk-tb-filters {
    flex: none;
    display: flex; align-items: center; justify-content: flex-start; gap: 6px;
    padding: 0 14px 8px;
}
.mk-tb-filters > .mk-prop-drop { margin-left: auto; }
.mk-chip {
    height: 22px; padding: 0 11px;
    display: inline-flex; align-items: center;
    border: 1px solid var(--mk-line); border-radius: 100px;
    background: var(--mk-surface);
    font-size: 9.5px; font-weight: 650; color: var(--mk-muted);
}
.mk-chip.active { background: var(--mk-ink); border-color: var(--mk-ink); color: #fff; }
/* ---- Dashboard screen (miniature of dashboard.html: feed column beside the
   "This month" / "Upcoming" / "Compliance" side cards) ---- */
.mk-dash {
    flex: 1; min-height: 0; overflow: hidden;
    display: grid; grid-template-columns: 1.18fr 1fr; gap: 8px;
    padding: 0 14px 10px;
}
.mk-dash-feed, .mk-dash-side { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 5px; }
/* Feed rows — .dash2-row. Tone is carried by the left edge, not by colour. */
/* gap: 0 by default — the stacked (maintenance) variant already spaces its
   children with their own margins, so a container gap applied twice more. Only
   the row-direction .split variant needs one, between body and due badge. */
.mk-row {
    border: 1px solid var(--mk-line);
    border-left-width: 3px;
    border-radius: 10px;
    background: var(--mk-surface);
    padding: 6px 9px;
    display: flex; align-items: flex-start; gap: 0;
    flex-direction: column;
}
.mk-row.danger { border-left-color: var(--mk-ink); }
.mk-row.warn { border-left-color: #8a8a90; }
.mk-row-main { flex: 1; min-width: 0; }
.mk-row-top { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; width: 100%; }
.mk-row-title { font-size: 10.5px; font-weight: 700; color: var(--mk-ink); margin: 0 0 2px; letter-spacing: -0.01em; }
.mk-row-meta { display: flex; align-items: center; gap: 5px; font-size: 9px; color: var(--mk-muted); flex-wrap: wrap; }
.mk-row-meta strong { color: var(--mk-text); font-weight: 650; }
.mk-row-open { margin-left: auto; font-size: 9px; font-weight: 700; color: var(--mk-ink); }
.mk-pill {
    display: inline-flex; align-items: center;
    padding: 1.5px 6px; border-radius: 100px;
    background: var(--mk-surface-2); border: 1px solid var(--mk-line);
    font-size: 8px; font-weight: 700; color: var(--mk-text);
}
/* Alert rows put a due badge beside the body; maintenance rows stack, exactly
   as renderAlertRow and renderMaintRow differ. .split marks the former. */
.mk-row.split { flex-direction: row; align-items: flex-start; gap: 8px; }
.mk-row-side { flex: none; }
/* Side cards — .dash2-side-card.
   flex: none is load-bearing. These sit in a column flex container, and
   `overflow: hidden` zeroes a flex item's automatic minimum size — so without
   it the browser shrinks each card below its content and the card silently
   amputates its own last row ("Outstanding", the Compliance card). Let them
   keep their natural height and clip at a CARD boundary instead. */
.mk-sc {
    flex: none;
    border: 1px solid var(--mk-line);
    border-radius: 11px;
    background: var(--mk-surface);
    overflow: hidden;
}
.mk-sc-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 3px 9px;
    border-bottom: 1px solid var(--mk-line-2);
}
.mk-sc-title { font-size: 10px; font-weight: 750; color: var(--mk-ink); }
.mk-sc-link { font-size: 8.5px; font-weight: 650; color: var(--mk-muted); }
.mk-sc-metric { font-size: 12px; font-weight: 800; color: var(--mk-ink); letter-spacing: -0.02em; }
.mk-sc-body { padding: 3px 9px 4px; }
.mk-sc-foot { display: block; margin-top: 4px; font-size: 8.5px; font-weight: 650; color: var(--mk-muted); }
.mk-money { display: flex; align-items: center; justify-content: space-between; padding: 0; font-size: 9.5px; color: var(--mk-muted); }
.mk-money strong { font-size: 10.5px; font-weight: 800; color: var(--mk-ink); letter-spacing: -0.02em; }
.mk-sc-prog { margin-top: 2px; }
.mk-sc-prog-head { display: flex; align-items: center; justify-content: space-between; font-size: 8.5px; color: var(--mk-muted); }
.mk-sc-prog .mk-progress { width: 100%; margin-top: 3px; height: 4px; }
/* Upcoming rows — .dash2-up-row, a date block then the event */
.mk-up { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.mk-up + .mk-up { border-top: 1px solid var(--mk-line-2); }
.mk-up-date {
    flex: none; width: 22px; text-align: center;
    border: 1px solid var(--mk-line); border-radius: 5px; padding: 1px 0;
}
.mk-up-day { display: block; font-size: 10px; font-weight: 800; color: var(--mk-ink); line-height: 1; }
.mk-up-mon { display: block; font-size: 6px; font-weight: 700; letter-spacing: 0.06em; color: var(--mk-muted); }
.mk-up-text { flex: 1; min-width: 0; }
.mk-up-name { display: block; font-size: 9.5px; font-weight: 650; color: var(--mk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-up-sub { display: block; font-size: 8.5px; color: var(--mk-muted); }
.mk-up-when { flex: none; font-size: 8.5px; color: var(--mk-muted); }
.mk-up-when.urgent { color: var(--mk-ink); font-weight: 750; }
/* Compliance rows — .dash2-comp-row */
.mk-cr { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.mk-cr + .mk-cr { border-top: 1px solid var(--mk-line-2); }
.mk-cr-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--mk-faint); }
.mk-cr-dot.danger { background: var(--mk-ink); }
.mk-cr-dot.warn { background: var(--mk-surface-3); border: 1px solid var(--mk-faint); }
.mk-cr-text { flex: 1; min-width: 0; }
.mk-cr-name { display: block; font-size: 9.5px; font-weight: 650; color: var(--mk-ink); }
.mk-cr-sub { display: block; font-size: 8.5px; color: var(--mk-muted); }
.mk-cr-meta { flex: none; font-size: 8.5px; color: var(--mk-muted); }

/* ---- Rent Collection screen (miniature of banking/rent_collection.html's
   .bento-grid: a full-width tenants band over a payments list beside a right
   rail of two cards. The real page has no toolbar, no tabs and no table —
   the tenant statuses are CARDS and the payments are LIST ROWS.) ---- */
.mk-rc {
    flex: 1; min-height: 0; overflow: hidden;
    padding: 0 14px 12px;
    display: flex; flex-direction: column; gap: 8px;
}

/* Two .mk-prop-drop children here, so the shared
   `.mk-tb-filters > .mk-prop-drop { margin-left: auto }` would let the FIRST
   one eat the free space and shove the whole row right. The search box carries
   its own margin-left:auto, so it still self-aligns. */
.screen-3 .mk-tb-filters > .mk-prop-drop { margin-left: 0; }

.mk-rc-card {
    flex: none;
    border: 1px solid var(--mk-line);
    border-radius: 11px;
    background: var(--mk-surface);
    padding: 6px;
    overflow: hidden;
}
.mk-rc-title { font-size: 10px; font-weight: 750; color: var(--mk-ink); letter-spacing: -0.01em; display: block; margin-bottom: 4px; }
.mk-rc-foot { font-size: 8px; color: var(--mk-muted); margin-top: 3px; }

/* Tenants Payment Status — .tenants-grid drops to 3 columns at <=1360px */
.mk-rc-tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk-rc-tcard {
    border: 1px solid var(--mk-line); border-radius: 9px;
    padding: 5px 6px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px;
    align-items: start;
}
.mk-rc-tinfo { min-width: 0; }
.mk-rc-tname { display: block; font-size: 10px; font-weight: 700; color: var(--mk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-rc-tprop { display: block; font-size: 8px; color: var(--mk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-rc-tcard .mk-badge { justify-self: end; font-size: 7.5px; padding: 1px 5px; }
.mk-rc-tcard .mk-badge::before { width: 4px; height: 4px; }

/* span-8 payments list + span-4 right rail */
.mk-rc-row { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; }
.mk-rc-rail { min-height: 0; display: flex; flex-direction: column; gap: 8px; }

.mk-rc-tx { display: flex; flex-direction: column; min-height: 0; }
.mk-rc-txlist { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 3px; }
.mk-rc-txrow { display: flex; align-items: center; gap: 7px; }
.mk-rc-txmain { flex: 1; min-width: 0; }
.mk-rc-txname { display: block; font-size: 9px; font-weight: 650; color: var(--mk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-rc-txmeta { display: block; font-size: 7.5px; color: var(--mk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-rc-txamt { flex: none; font-size: 9px; font-weight: 700; color: var(--mk-ink); }
.mk-rc-txact { flex: none; width: 30px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; color: var(--mk-ink); }
.mk-rc-txact svg { width: 11px; height: 11px; }
.mk-rc-match {
    border: 1px solid var(--mk-ink); border-radius: 6px;
    background: var(--mk-ink); color: #fff;
    height: 15px; padding: 0 6px;
    font-size: 7.5px; font-weight: 700;
}

/* Bank Account & Pay Now Setup */
.mk-rc-kv { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0; }
.mk-rc-kv span { font-size: 7.5px; color: var(--mk-muted); }
.mk-rc-kv b { font-size: 8px; font-weight: 700; color: var(--mk-ink); }
.mk-rc-kv b.mono { font-family: var(--hiw-font-mono), monospace; letter-spacing: -0.02em; }
.mk-rc-acts { display: flex; gap: 4px; margin-top: 4px; }
.mk-rc-btn {
    flex: 1; height: 15px;
    border: 1px solid var(--mk-line); border-radius: 6px;
    background: var(--mk-surface); color: var(--mk-ink);
    font-size: 7.5px; font-weight: 700;
}
.mk-rc-btn.solid { background: var(--mk-ink); border-color: var(--mk-ink); color: #fff; }

/* Extension Requests */
.mk-rc-exthead { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.mk-rc-exthead .mk-rc-title { margin-bottom: 0; }
.mk-rc-count {
    min-width: 14px; height: 14px; padding: 0 4px;
    border-radius: 100px; background: var(--mk-ink); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 7.5px; font-weight: 800;
}
.mk-rc-extcard { border: 1px solid var(--mk-line); border-radius: 8px; padding: 4px 6px; }
.mk-rc-extname { display: block; font-size: 8.5px; font-weight: 700; color: var(--mk-ink); margin-bottom: 2px; }
.mk-rc-extmetrics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mk-rc-extmetrics span { display: block; font-size: 7px; color: var(--mk-muted); }
.mk-rc-extmetrics b { font-size: 8.5px; font-weight: 800; color: var(--mk-ink); letter-spacing: -0.02em; }

/* ---- Messages screen (miniature of messages.html: a flush conversations rail
   beside the chat area — no cards, no page header, as on the real page) ---- */
.mk-msg { display: grid; grid-template-columns: 172px 1fr; height: 100%; min-height: 0; }

.mk-conv { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--mk-line); }
.mk-conv-head { flex: none; display: flex; align-items: center; gap: 6px; padding: 11px 12px 8px; }
.mk-conv-title { font-size: 14px; font-weight: 800; color: var(--mk-ink); letter-spacing: -0.03em; }
.mk-conv-unread {
    min-width: 15px; height: 15px; padding: 0 4px;
    border-radius: 100px; background: var(--mk-ink); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 8.5px; font-weight: 800;
}
.mk-conv-search {
    flex: none; display: flex; align-items: center; gap: 6px;
    margin: 0 12px 8px; height: 24px; padding: 0 9px;
    border: 1px solid var(--mk-line); border-radius: 8px;
    background: var(--mk-surface-2);
    font-size: 9.5px; color: var(--mk-faint);
}
.mk-conv-search svg { width: 11px; height: 11px; opacity: 0.55; flex: none; }
.mk-conv-list { flex: 1; min-height: 0; overflow: hidden; padding: 0 6px 8px; }

.mk-conv-item {
    display: flex; align-items: center; gap: 7px;
    padding: 7px; border-radius: 9px; position: relative;
}
.mk-conv-item.active { background: var(--mk-surface-2); }
.mk-conv-ava {
    width: 24px; height: 24px; flex: none; border-radius: 50%;
    background: #0b0b0d; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700;
}
.mk-conv-ava.line { background: var(--mk-surface-2); color: var(--mk-ink); border: 1px solid var(--mk-line); }
.mk-conv-content { flex: 1; min-width: 0; }
.mk-conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; }
.mk-conv-name { font-size: 10px; font-weight: 650; color: var(--mk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-conv-time { flex: none; font-size: 8px; color: var(--mk-faint); }
.mk-conv-prev { font-size: 8.5px; color: var(--mk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.mk-conv-item.unread .mk-conv-name { font-weight: 800; }
.mk-conv-item.unread .mk-conv-prev { color: var(--mk-text); }
.mk-conv-dot { position: absolute; right: 7px; bottom: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--mk-ink); }

.mk-chat { display: flex; flex-direction: column; min-height: 0; }
.mk-chat-head {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 12px; border-bottom: 1px solid var(--mk-line);
}
.mk-chat-info h4 { font-size: 11.5px; font-weight: 750; color: var(--mk-ink); margin: 0; letter-spacing: -0.01em; }
.mk-chat-info p { font-size: 9px; color: var(--mk-muted); margin: 1px 0 0; }
.mk-chat-btn {
    flex: none; height: 22px; padding: 0 10px;
    border: 1px solid var(--mk-line); border-radius: 8px;
    background: var(--mk-surface); color: var(--mk-ink);
    font-size: 9px; font-weight: 700;
}

.mk-chat-area {
    flex: 1; min-height: 0; overflow: hidden;
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 7px;
}
.mk-chat-div { text-align: center; }
.mk-chat-div span { font-size: 7.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mk-faint); }

/* .message-bubble is an avatar plus a content wrapper; .sent flips the row. */
.mk-bub { display: flex; align-items: flex-end; gap: 6px; max-width: 82%; }
.mk-bub.sent { flex-direction: row-reverse; align-self: flex-end; }
.mk-bub-ava {
    width: 19px; height: 19px; flex: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 7.5px; font-weight: 700;
    background: var(--mk-surface-2); border: 1px solid var(--mk-line); color: var(--mk-ink);
}
.mk-bub.sent .mk-bub-ava { background: #0b0b0d; border-color: #0b0b0d; color: #fff; }
.mk-bub-wrap { min-width: 0; }
.mk-bub-content {
    padding: 6px 9px; border-radius: 11px;
    font-size: 9.5px; line-height: 1.45;
    background: var(--mk-surface-2); border: 1px solid var(--mk-line); color: var(--mk-text);
    border-bottom-left-radius: 4px;
}
.mk-bub.sent .mk-bub-content {
    background: var(--mk-ink); border-color: var(--mk-ink); color: #fff;
    border-bottom-left-radius: 11px; border-bottom-right-radius: 4px;
}
.mk-bub-time { display: block; margin-top: 2px; font-size: 7.5px; color: var(--mk-faint); }
.mk-bub.sent .mk-bub-time { text-align: right; }

.mk-chat-input {
    flex: none; display: flex; align-items: center; gap: 7px;
    padding: 8px 12px; border-top: 1px solid var(--mk-line);
}
.mk-chat-input > span {
    flex: 1; height: 24px; padding: 0 10px;
    display: flex; align-items: center;
    border: 1px solid var(--mk-line); border-radius: 100px;
    background: var(--mk-surface-2);
    font-size: 9.5px; color: var(--mk-faint);
}
.mk-chat-send {
    width: 24px; height: 24px; flex: none; border: none; border-radius: 50%;
    background: var(--mk-ink); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.mk-chat-send svg { width: 11px; height: 11px; }

/* ---- Tax & Finance screen (miniature of finance.html's Overview panel:
   the wide trend card beside "Current Month Rent" / "Operating Cash", with
   "Property Performance" beneath. Card headers are dark on the real page.) ---- */
.mk-fin { flex: 1; min-height: 0; overflow: hidden; padding: 0 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.mk-fin-tabs { display: flex; align-items: center; gap: 2px; }
.mk-fin-tabs span {
    font-size: 9.5px; font-weight: 650; color: var(--mk-muted);
    padding: 4px 8px; border-radius: 7px;
}
.mk-fin-tabs span.active { background: var(--mk-surface-3); color: var(--mk-ink); font-weight: 750; }

/* Explicit height so the vertical budget is arithmetic we control, not a
   shrink race between the trend band and the Property Performance card.
   .mk-fc is flex:none, but these are GRID items here so they still stretch. */
.mk-fin-2col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; flex: none; }
.mk-fin-narrow { display: flex; flex-direction: column; gap: 8px; min-height: 0; }

/* Same flex-shrink trap as .mk-sc — see the note there. min-height: 0 is
   deliberately absent: it would defeat the automatic minimum size and let the
   card shrink below its content again. */
.mk-fc {
    flex: none;
    border: 1px solid var(--mk-line); border-radius: 11px;
    background: var(--mk-surface); overflow: hidden;
    display: flex; flex-direction: column;
}
.mk-fc-head {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: #0b0b0d; padding: 4px 9px;
}
.mk-fc-title { font-size: 9.5px; font-weight: 750; color: #fff; letter-spacing: -0.01em; }
.mk-fc-legend { display: inline-flex; align-items: center; gap: 8px; }
.mk-fc-legend .mk-legend { color: rgba(255, 255, 255, 0.6); font-size: 8px; }
.mk-fc-legend .mk-legend b { background: #fff; width: 6px; height: 6px; }
.mk-fc-legend .mk-legend.o b { background: rgba(255, 255, 255, 0.38); }

/* Paired income/expense bars — the real chart plots both series per month. */
.mk-fin-chart { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 7px; padding: 7px 9px 5px; }
.mk-fin-bar {
    flex: 1; height: 100%;
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto;
    align-items: end; column-gap: 2px; row-gap: 4px;
}
.mk-fin-bar i { display: block; width: 100%; align-self: end; border-radius: 2px 2px 0 0; background: var(--mk-ink); }
.mk-fin-bar i.ex { background: var(--mk-surface-3); }
.mk-fin-bar em { grid-column: 1 / -1; font-size: 7px; font-style: normal; color: var(--mk-faint); text-align: center; }

.mk-fin-month { padding: 4px 9px 5px; }
.mk-fin-month .mk-money { padding: 3px 0; }

.mk-cf { padding: 4px 9px 5px; }
.mk-cf-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 1px 0; }
.mk-cf-label { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; color: var(--mk-muted); }
.mk-cf-dot { width: 6px; height: 6px; border-radius: 2px; background: var(--mk-ink); flex: none; }
.mk-cf-dot.ex { background: var(--mk-surface-3); }
.mk-cf-dot.dep { background: var(--mk-faint); }
.mk-cf-val { font-size: 9.5px; font-weight: 700; color: var(--mk-ink); }
.mk-cf-div { height: 1px; background: var(--mk-line); margin: 3px 0; }
.mk-cf-item.total .mk-cf-label { color: var(--mk-ink); font-weight: 700; }
.mk-cf-item.total .mk-cf-val { font-size: 11px; font-weight: 800; letter-spacing: -0.02em; }

.mk-fin-table { margin: 0; }
.mk-fin-table th, .mk-fin-table td { padding: 3px 9px; font-size: 8.5px; }
.mk-fin-table th { font-size: 7.5px; }

/* ---- Mockup responsive: simplify on very small screens ---- */
@media (max-width: 600px) {
    .mk-side { display: none; }
    .mk-kpis { grid-template-columns: repeat(2, 1fr); }
    .mk-panels { grid-template-columns: 1fr; }
    .mk-doc { grid-template-columns: 1fr; }
    .mk-doc-list, .mk-doc-stage { display: none; }
    .mk-comp { grid-template-columns: 1fr; }
}

/* ================================================================
   FEATURE GRID — homepage breadth section, below How It Works
================================================================ */
.feat-strip { padding: 110px 0; background: #fafafa; border-top: 1px solid #eee; }
.feat-strip-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.feat-strip-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #666; font-family: 'JetBrains Mono', monospace; margin-bottom: 20px; }
.feat-strip-eyebrow .eyebrow-dot { width: 7px; height: 7px; background: #000; border-radius: 50%; animation: none; }
.feat-strip-head h2 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 900; letter-spacing: -0.03em; color: #000; line-height: 1.1; margin: 0 0 14px; }
.feat-strip-head p { font-size: 1.05rem; color: #555; line-height: 1.6; margin: 0; }
.feat-strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feat-strip-card { border: 1px solid #e6e6e6; border-radius: 16px; padding: 26px 24px; background: #fff; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.feat-strip-card:hover { transform: translateY(-3px); border-color: rgba(0, 0, 0, 0.22); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.07); }
.feat-strip-ico { width: 44px; height: 44px; border-radius: 12px; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.feat-strip-ico svg { width: 22px; height: 22px; }
.feat-strip-card h3 { font-size: 16px; font-weight: 750; letter-spacing: -0.01em; color: #0a0a0a; margin: 0 0 6px; }
.feat-strip-card p { font-size: 13.5px; color: #666; line-height: 1.55; margin: 0; }
.feat-strip-foot { text-align: center; margin-top: 44px; }
.feat-strip-link { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 650; color: #000; text-decoration: none; border-bottom: 1.5px solid #000; padding-bottom: 2px; }
.feat-strip-link svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.feat-strip-link:hover svg { transform: translateX(4px); }

@media (max-width: 900px) {
    .feat-strip-grid { grid-template-columns: repeat(2, 1fr); }}


@media (max-width: 560px) {
    .feat-strip { padding: 72px 0; }
    .feat-strip-grid { grid-template-columns: 1fr; }}


/* ================================================================
   MOCKUP — entrance animations + hands-on interactivity
================================================================ */

/* Only the active screen takes clicks (inactive screens are stacked at opacity 0). */
.macbook-screen .screen-content { pointer-events: none; }
.macbook-screen .screen-content.active { pointer-events: auto; }

/* In-page interactivity — hover/press feedback on the ACTIVE screen only.
   The screen sequence itself stays scroll-driven. */
/* Only items carrying .mk-nav-item--live actually switch a screen, so only they
   get the cursor and the hover state. A nav item without it stays inert on
   purpose — the mockup must not advertise a click it cannot honour. */
.screen-content.active .mk-nav-item--live,
.screen-content.active .mk-tabs span,
.screen-content.active .mk-doc-type,
.screen-content.active .mk-btn { cursor: pointer; }

.screen-content.active .mk-nav-item,
.screen-content.active .mk-tabs span,
.screen-content.active .mk-doc-type,
.screen-content.active .mk-table tbody tr td,
.screen-content.active .mk-flow-item,
.screen-content.active .mk-cert,
.screen-content.active .mk-alert,
.screen-content.active .mk-btn { transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }

.screen-content.active .mk-nav-item--live:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.screen-content.active .mk-nav-item--live:hover svg { opacity: 1; }
.screen-content.active .mk-nav-item--live:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.55);
    outline-offset: 1px;
}
.screen-content.active .mk-doc-type:hover { background: var(--mk-surface-2); }
.screen-content.active .mk-table tbody tr:hover td { background: var(--mk-surface-2); }
.screen-content.active .mk-cert:hover,
.screen-content.active .mk-alert:hover { border-color: rgba(0, 0, 0, 0.2); }
.screen-content.active .mk-btn:hover { background: #24242c; }

/* ---- Entrance animations (replay each time a screen becomes .active) ---- */
@keyframes mkFadeUp { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes mkRiseY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mkGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mkRingDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 8; } }

.screen-content.active .mk-panel,
.screen-content.active .mk-page-wrap,
.screen-content.active .mk-doc-list,
.screen-content.active .mk-doc-stage,
.screen-content.active .mk-score,
.screen-content.active .mk-rent-top { animation: mkFadeUp 0.55s ease both 0.12s; }

/* Messages: the two panes settle, then the conversation fills in.
   .mk-chat-div is child 1 of .mk-chat-area, so the bubbles are children 2-4.
   Counting by :nth-child (not :nth-of-type) keeps that explicit — both are
   divs, so :nth-of-type would silently leave the last bubble undelayed. */
.screen-content.active .mk-conv { animation: mkFadeUp 0.5s ease both 0.06s; }
.screen-content.active .mk-chat { animation: mkFadeUp 0.5s ease both 0.12s; }
.screen-content.active .mk-bub { animation: mkFadeUp 0.42s ease both; }
.screen-content.active .mk-bub:nth-child(2) { animation-delay: 0.26s; }
.screen-content.active .mk-bub:nth-child(3) { animation-delay: 0.36s; }
.screen-content.active .mk-bub:nth-child(4) { animation-delay: 0.46s; }

/* Dashboard: feed rows then side cards. Finance: cards, then the paired bars
   rise from the baseline the same way .mk-bar does. */
.screen-content.active .mk-row { animation: mkFadeUp 0.5s ease both; }
.screen-content.active .mk-row:nth-child(1) { animation-delay: 0.10s; }
.screen-content.active .mk-row:nth-child(2) { animation-delay: 0.17s; }
.screen-content.active .mk-row:nth-child(3) { animation-delay: 0.24s; }
.screen-content.active .mk-row:nth-child(4) { animation-delay: 0.31s; }
.screen-content.active .mk-sc,
.screen-content.active .mk-fc { animation: mkFadeUp 0.5s ease both; }
.screen-content.active .mk-sc:nth-child(1) { animation-delay: 0.12s; }
.screen-content.active .mk-sc:nth-child(2) { animation-delay: 0.19s; }
.screen-content.active .mk-sc:nth-child(3) { animation-delay: 0.26s; }
.screen-content.active .mk-fin-bar i { transform-origin: bottom; animation: mkRiseY 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.screen-content.active .mk-fin-bar:nth-child(1) i { animation-delay: 0.22s; }
.screen-content.active .mk-fin-bar:nth-child(2) i { animation-delay: 0.28s; }
.screen-content.active .mk-fin-bar:nth-child(3) i { animation-delay: 0.34s; }
.screen-content.active .mk-fin-bar:nth-child(4) i { animation-delay: 0.40s; }
.screen-content.active .mk-fin-bar:nth-child(5) i { animation-delay: 0.46s; }
.screen-content.active .mk-fin-bar:nth-child(6) i { animation-delay: 0.52s; }

/* Property cards stagger in */
.screen-content.active .mk-prop-card { animation: mkFadeUp 0.5s ease both; }
.screen-content.active .mk-prop-card:nth-child(1) { animation-delay: 0.06s; }
.screen-content.active .mk-prop-card:nth-child(2) { animation-delay: 0.12s; }
.screen-content.active .mk-prop-card:nth-child(3) { animation-delay: 0.18s; }
.screen-content.active .mk-prop-card:nth-child(4) { animation-delay: 0.24s; }
.screen-content.active .mk-prop-card:nth-child(5) { animation-delay: 0.30s; }
.screen-content.active .mk-prop-card:nth-child(6) { animation-delay: 0.36s; }

/* Rent progress bar fills */
.screen-content.active .mk-progress i { transform-origin: left; animation: mkGrowX 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both 0.25s; }

/* Rows / activity / cards / alerts stagger in */
.screen-content.active .mk-table tbody tr,
.screen-content.active .mk-flow-item,
.screen-content.active .mk-cert,
.screen-content.active .mk-alert { animation: mkFadeUp 0.5s ease both; }
.screen-content.active .mk-doc-step { animation: mkFadeUp 0.5s ease both 0.18s; }
.screen-content.active .mk-table tbody tr:nth-child(1),
.screen-content.active .mk-flow-item:nth-child(1),
.screen-content.active .mk-cert:nth-child(1),
.screen-content.active .mk-alert:nth-child(1) { animation-delay: 0.18s; }
.screen-content.active .mk-table tbody tr:nth-child(2),
.screen-content.active .mk-flow-item:nth-child(2),
.screen-content.active .mk-cert:nth-child(2),
.screen-content.active .mk-alert:nth-child(2) { animation-delay: 0.24s; }
.screen-content.active .mk-table tbody tr:nth-child(3),
.screen-content.active .mk-flow-item:nth-child(3),
.screen-content.active .mk-cert:nth-child(3) { animation-delay: 0.30s; }
.screen-content.active .mk-table tbody tr:nth-child(4),
.screen-content.active .mk-flow-item:nth-child(4),
.screen-content.active .mk-cert:nth-child(4) { animation-delay: 0.36s; }
.screen-content.active .mk-table tbody tr:nth-child(5),
.screen-content.active .mk-flow-item:nth-child(5) { animation-delay: 0.42s; }
.screen-content.active .mk-table tbody tr:nth-child(6) { animation-delay: 0.48s; }

/* Respect reduced-motion: show every screen in its final state, no motion. */
@media (prefers-reduced-motion: reduce) {
    .macbook-screen *,
    .hiw-live-hint { animation: none !important; }
}