/* ==========================================================================
   XCRM - one stylesheet, written to look calm on a laptop and work on a phone
   ========================================================================== */

:root {
    /* MilixNow palette — same as www.milixnow.com (Midnight Navy · Electric Blue · Mint Teal · Coral) */
    --brand: #1463ff;
    --brand-dark: #0b4fe0;
    --brand-soft: #eef4ff;
    --accent: #00b89c;
    --accent-soft: #e6faf6;
    --coral: #ff7a45;
    --navy: #061a4a;
    --navy-2: #0a2260;
    --grad: linear-gradient(100deg, #1463ff 0%, #0b8fd6 55%, #009e86 100%);
    --grad-head: linear-gradient(90deg, #0c3aa8 0%, #1463ff 55%, #0b8fd6 100%);
    --grad-mark: linear-gradient(135deg, #1463ff 0%, #0b8fd6 55%, #00b89c 100%);
    --ink: #0d1b33;
    --body: #4e5b73;
    --muted: #8592a8;
    --line: #e3e9f3;
    --bg: #f5f8fe;
    --card: #ffffff;
    --green: #16a34a;
    --green-soft: #dcfce7;
    --amber: #d97706;
    --amber-soft: #fef3c7;
    --red: #dc2626;
    --red-soft: #fee2e2;
    --blue: #2563eb;
    --blue-soft: #dbeafe;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(6, 26, 74, .06), 0 8px 24px rgba(6, 26, 74, .05);
    --shadow-lg: 0 20px 50px rgba(6, 26, 74, .14);
    --sidebar: 248px;
    --font-head: "Space Grotesk", "Inter", -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* A class that sets its own display would otherwise beat the browser's own
   rule for this, and something told to go away would stay on screen. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--body);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { margin: 0; color: var(--ink); font-weight: 700; line-height: 1.25; }
h1 { font-size: 26px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p { margin: 0 0 12px; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
small { font-size: 12px; }

/* ---------------------------------------------------------------- forms */

label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
label .req { color: var(--red); }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="datetime-local"], input[type="search"],
select, textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    outline: 0;
    transition: border-color .15s, box-shadow .15s;
}

textarea { min-height: 96px; resize: vertical; }

input:focus, select:focus, textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(20, 99, 255, .14);
}

input::placeholder, textarea::placeholder { color: var(--muted); }

.field { margin-bottom: 16px; }
.field .hint { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.field .error { display: block; margin-top: 5px; color: var(--red); font-size: 12px; }

.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.row .full, .row-3 .full { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
}

.btn:hover { background: var(--brand-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(20, 99, 255, .25); }
.btn:active { transform: none; }
.btn[disabled] { opacity: .6; pointer-events: none; }
/* An icon in a button has no intrinsic size, so give every one a size here
   rather than per screen - one that forgets it stretches to fill the row. */
.btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
.btn-light { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-light:hover { background: #f1f5f9; color: var(--ink); box-shadow: none; }
.btn-danger { background: var(--red); }
.btn-danger:hover { background: #b91c1c; box-shadow: 0 8px 18px rgba(220, 38, 38, .25); }
.btn-ghost { background: transparent; color: var(--body); }
.btn-ghost:hover { background: #f1f5f9; color: var(--ink); box-shadow: none; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------- cards */

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.card-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.card-body { padding: 20px; }
.card + .card { margin-top: 18px; }

/* ---------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; }

table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
    padding: 12px 16px;
    background: #f8fafc;
    color: var(--body);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
}
table.data td { padding: 13px 16px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
table.data tbody tr:hover td { background: #fbfcfe; }
table.data .right { text-align: right; }
table.data b { color: var(--ink); }

.empty { padding: 48px 20px; text-align: center; color: var(--muted); }
.empty svg { width: 48px; height: 48px; margin-bottom: 10px; opacity: .45; }
.empty b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }

/* ---------------------------------------------------------------- pills */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 20px;
    background: #f1f5f9;
    color: var(--body);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.pill-green { background: var(--green-soft); color: #15803d; }
.pill-amber { background: var(--amber-soft); color: #b45309; }
.pill-red { background: var(--red-soft); color: #b91c1c; }
.pill-blue { background: var(--blue-soft); color: #1d4ed8; }
.pill-brand { background: var(--brand-soft); color: var(--brand); }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.avatar {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 34px;
}

/* ---------------------------------------------------------------- shell */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar);
    display: flex;
    flex-direction: column;
    background: #0f172a;
    color: #cbd5e1;
    z-index: 40;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 16px;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.sidebar-brand .mark {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--grad-mark);
    color: #fff;
    font-size: 15px;
}

.sidebar-company {
    margin: 0 14px 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(148, 163, 184, .12);
    font-size: 12.5px;
}
.sidebar-company b { display: block; color: #fff; font-size: 13px; }
.sidebar-company span { color: #94a3b8; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 0 12px 16px; }
.sidebar-nav .group { margin: 14px 8px 6px; color: #64748b; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    margin-bottom: 2px;
    border-radius: 9px;
    color: #cbd5e1;
    font-size: 13.5px;
    font-weight: 500;
    transition: background .12s, color .12s;
}

.sidebar-nav a:hover { background: rgba(148, 163, 184, .12); color: #fff; }
.sidebar-nav a.active { background: var(--brand); color: #fff; font-weight: 600; }
.sidebar-nav a svg { width: 17px; height: 17px; flex: 0 0 17px; }

.sidebar-foot { padding: 14px; border-top: 1px solid rgba(148, 163, 184, .14); }
.sidebar-foot a { display: flex; align-items: center; gap: 10px; color: #94a3b8; font-size: 13px; }
.sidebar-foot a:hover { color: #fff; }

.main { flex: 1; min-width: 0; margin-left: var(--sidebar); display: flex; flex-direction: column; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

.topbar .menu-btn { display: none; }
.topbar h1 { font-size: 18px; }
.topbar .spacer { flex: 1; }

.topbar .who { display: flex; align-items: center; gap: 10px; }
.topbar .who b { display: block; color: var(--ink); font-size: 13px; }
.topbar .who small { color: var(--muted); }

.page { padding: 24px; flex: 1; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- stats */

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }

.stat {
    padding: 18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.stat .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.stat .label { color: var(--muted); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat .icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); }
.stat .icon svg { width: 17px; height: 17px; }
.stat .value { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.stat .foot { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.stat.green .icon { background: var(--green-soft); color: var(--green); }
.stat.amber .icon { background: var(--amber-soft); color: var(--amber); }
.stat.blue .icon { background: var(--blue-soft); color: var(--blue); }

/* ---------------------------------------------------------------- board */

.board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; }

.column {
    flex: 0 0 290px;
    background: #f1f5f9;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
}

.column-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.column-head .dot { width: 9px; height: 9px; border-radius: 50%; }
.column-head b { flex: 1; color: var(--ink); font-size: 13.5px; }
.column-head .count { padding: 1px 8px; border-radius: 20px; background: #fff; font-size: 11.5px; font-weight: 700; color: var(--body); }
.column-body { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 9px; }

.lead-card {
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    cursor: grab;
    transition: box-shadow .12s, transform .12s;
}

.lead-card:hover { box-shadow: 0 8px 20px rgba(15, 23, 42, .1); transform: translateY(-1px); }
.lead-card.dragging { opacity: .5; }
.lead-card .name { color: var(--ink); font-weight: 700; font-size: 14px; }
.lead-card .phone { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--brand); font-size: 12.5px; font-weight: 600; }
.lead-card .meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.lead-card .value { margin-top: 8px; color: var(--green); font-weight: 700; font-size: 13px; }
.column.drop-target { outline: 2px dashed var(--brand); outline-offset: -4px; }

/* ---------------------------------------------------------------- modal */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    background: rgba(15, 23, 42, .5);
    overflow-y: auto;
}

.modal-backdrop.open { display: flex; }

.modal {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    animation: pop .16s ease-out;

    /* Centred down the page rather than pinned to the top. An auto margin
       rather than align-items, because a modal taller than the window then
       keeps both its ends reachable instead of having its head cut off. */
    margin: auto;
}

.modal.wide { max-width: 820px; }

@keyframes pop { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: 16px; }
.modal-head button { border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.modal-body { padding: 20px; max-height: 65vh; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- toast */

.toast-wrap { position: fixed; top: 18px; right: 18px; z-index: 80; display: flex; flex-direction: column; gap: 8px; }

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 260px;
    padding: 12px 16px;
    border-radius: 11px;
    background: #0f172a;
    color: #fff;
    font-size: 13.5px;
    box-shadow: var(--shadow-lg);
    animation: slide .18s ease-out;
}

.toast.success { background: #166534; }
.toast.error { background: #991b1b; }

@keyframes slide { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- auth */

.auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 3fr 2fr;
    background: var(--bg);
}

.auth-side {
    position: relative;
    padding: 48px;
    background: linear-gradient(150deg, #061a4a 0%, #0c3aa8 55%, #0a8f9e 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.auth-side::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -140px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
}

.auth-side::before {
    content: "";
    position: absolute;
    left: -100px;
    top: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}

.auth-side-mark {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 140px;
    height: 140px;
    border-radius: 32px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 64px;
    font-weight: 800;
}

.auth-main { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-box { width: 100%; max-width: 400px; }
.auth-box .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 19px; font-weight: 800; color: var(--ink); }
.auth-box .brand .mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--grad-mark); color: #fff; }
.auth-box .brand.centered { justify-content: center; }
.auth-box h1 { margin-bottom: 6px; font-size: 22px; }
.auth-box h1.centered { text-align: center; }
.auth-box .sub { color: var(--muted); margin-bottom: 24px; }
.auth-box .alt { margin-top: 14px; text-align: center; color: var(--muted); font-size: 13.5px; }
.auth-box .field-end { text-align: right; margin: -8px 0 14px; font-size: 13px; }
.auth-box .hint { display: block; margin: -8px 0 14px; color: var(--muted); font-size: 11.5px; }

.oauth-buttons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

.btn-oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow .12s, border-color .12s, transform .12s;
}

.btn-oauth:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(15, 23, 42, .08); transform: translateY(-1px); color: var(--ink); }
.btn-oauth svg { width: 18px; height: 18px; flex: 0 0 18px; }
.btn-oauth.facebook { background: #1877f2; border-color: #1877f2; color: #fff; }
.btn-oauth.facebook:hover { background: #166fe5; color: #fff; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 2px 0 14px; color: var(--muted); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.form-tight .field { margin-bottom: 12px; }

.field-password { position: relative; }
.field-password input { padding-right: 40px; }
.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
}
.password-toggle:hover { color: var(--body); }
.password-toggle svg { width: 18px; height: 18px; }
.password-toggle .eye-off { display: none; }
.password-toggle.showing .eye { display: none; }
.password-toggle.showing .eye-off { display: block; }

.notice { padding: 12px 14px; border-radius: 10px; font-size: 13.5px; margin-bottom: 16px; }
.notice-error { background: var(--red-soft); color: #991b1b; }
.notice-success { background: var(--green-soft); color: #166534; }
.notice-info { background: var(--brand-soft); color: var(--brand-dark); }

/* ---------------------------------------------------------------- public */

.top-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 32px;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.top-nav .brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; color: var(--ink); }
.top-nav .brand .mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--grad-mark); color: #fff; }
.top-nav .spacer { flex: 1; }
.top-nav .links { display: flex; align-items: center; gap: 22px; }
.top-nav .links a { color: var(--body); font-weight: 500; }
.top-nav .links a:hover { color: var(--ink); }

.hero { padding: 80px 32px 64px; text-align: center; background: radial-gradient(circle at 50% -10%, #eef4ff, transparent 60%); }
.hero h1 { font-size: 46px; letter-spacing: -.025em; max-width: 780px; margin: 0 auto 18px; }
.hero p { font-size: 18px; max-width: 620px; margin: 0 auto 28px; }
.hero .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero .note { margin-top: 16px; color: var(--muted); font-size: 13px; }

.section { padding: 64px 32px; }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 38px; }
.section-head h2 { font-size: 30px; margin-bottom: 10px; }
.section-head p { color: var(--body); font-size: 16px; }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1080px; margin: 0 auto; }
.feature { padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.feature .icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); margin-bottom: 14px; }
.feature h3 { margin-bottom: 6px; }
.feature p { margin: 0; font-size: 13.5px; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1000px; margin: 0 auto; }
.plan { padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.plan.featured { border-color: var(--brand); box-shadow: 0 16px 40px rgba(20, 99, 255, .18); position: relative; }
.plan.featured::before { content: "Most popular"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 20px; background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700; }
.plan h3 { font-size: 17px; }
.plan .price { margin: 12px 0 4px; font-size: 34px; font-weight: 800; color: var(--ink); }
.plan .price span { font-size: 14px; font-weight: 600; color: var(--muted); }
.plan ul { list-style: none; margin: 18px 0 22px; padding: 0; flex: 1; }
.plan li { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 10px; font-size: 13.5px; }
.plan li svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; color: var(--green); }

.foot { padding: 30px 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; text-align: center; }

/* ---------------------------------------------------------------- install */

.install { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; background: linear-gradient(160deg, #eef4ff, #f5f8fe); }
.install-box { width: 100%; max-width: 620px; }
.install-box .card-body { padding: 24px; }
.checks { list-style: none; margin: 0 0 20px; padding: 0; }
.checks li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f1f5f9; font-size: 13.5px; }
.checks li:last-child { border-bottom: 0; }
.checks .ok, .checks .no { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 700; }
.checks .ok { background: var(--green-soft); color: var(--green); }
.checks .no { background: var(--red-soft); color: var(--red); }
.checks .name { flex: 1; color: var(--ink); font-weight: 600; }
.checks .note { color: var(--muted); font-size: 12px; }
.step-title { display: flex; align-items: center; gap: 10px; margin: 22px 0 14px; font-size: 14px; font-weight: 700; color: var(--ink); }
.step-title span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; }

/* ---------------------------------------------------------------- errors */

.error-page { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; text-align: center; }
.error-page .code { font-size: 78px; font-weight: 800; color: var(--brand); line-height: 1; }
.error-page h1 { margin: 10px 0 8px; }
.error-page p { max-width: 460px; margin: 0 auto 20px; }

/* ---------------------------------------------------------------- phone */

@media (max-width: 1100px) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .features, .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .auth { grid-template-columns: 1fr; }
    .auth-side { display: none; }
}

@media (max-width: 820px) {
    .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); }
    .sidebar.open { transform: none; }
    .main { margin-left: 0; }
    .topbar .menu-btn { display: inline-flex; }
    .page { padding: 16px; }
    .stats, .features, .plans, .row, .row-3 { grid-template-columns: 1fr; }
    .hero h1 { font-size: 32px; }
    .hero { padding: 48px 20px 40px; }
    .section { padding: 44px 20px; }
    .top-nav { padding: 12px 16px; }
    .top-nav .links { display: none; }
}

/* ---------------------------------------------------------------- filters */

.filters {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 16px;
}

.filters .field { margin: 0; min-width: 160px; flex: 1 1 160px; }
.filters .field.grow { flex: 2 1 240px; }
.filters .go { display: flex; gap: 8px; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.pager .links { display: flex; gap: 6px; }

.muted { color: var(--muted); }
.right { text-align: right; }
.stack { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.tabs a { padding: 8px 14px; border-radius: 9px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--body); }
.tabs a.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 10px 14px; font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink); font-weight: 600; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 18px 22px; border-left: 2px solid var(--line); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); }
.timeline .when { display: block; color: var(--muted); font-size: 12px; margin-bottom: 3px; }

.items-table { width: 100%; border-collapse: collapse; }
.items-table th { text-align: left; padding: 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.items-table td { padding: 5px 8px; vertical-align: top; }
.items-table input { margin: 0; }
.items-table .num { width: 110px; }
.items-table .del { width: 40px; }

.totals { margin-left: auto; max-width: 320px; font-size: 14px; }
.totals .line { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #f1f5f9; }
.totals .line.grand { font-size: 17px; font-weight: 800; color: var(--ink); border-bottom: 0; }

@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; }
    .kv { grid-template-columns: 1fr; gap: 2px 0; }
    .kv dd { margin-bottom: 8px; }
}

/* ---------------------------------------------------------------- spark */

.spark { display: flex; align-items: flex-end; gap: 6px; height: 160px; }
.spark .bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.spark .bar span { display: block; width: 100%; max-width: 38px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #4d8bff, #1463ff); transition: opacity .12s; }
.spark .bar:hover span { opacity: .8; }
.spark .bar small { font-size: 11.5px; font-weight: 700; color: var(--ink); order: -1; }
.spark .bar em { font-size: 10.5px; color: var(--muted); font-style: normal; }

/* ---------------------------------------------------------------- meters */

.meter { margin-bottom: 14px; }
.meter:last-child { margin-bottom: 0; }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; margin-bottom: 5px; }
.meter-top b { color: var(--ink); }
.meter-bar { height: 8px; border-radius: 20px; background: #eef2f7; overflow: hidden; }
.meter-bar span { display: block; height: 100%; border-radius: 20px; background: linear-gradient(90deg, #1463ff, #00b89c); }

/* ==========================================================================
   The dashboard: one screen that answers what to do next
   ========================================================================== */

.birthday-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; margin-bottom: 14px; border-radius: var(--radius);
    background: linear-gradient(90deg, #fff4ee, #eef4ff);
    border: 1px solid #f5d0fe; color: var(--ink); font-size: 13.5px;
}
.birthday-bar .cake { font-size: 22px; line-height: 1; }

.trial-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* The strip of things you can add from anywhere ------------------------- */

.quickbar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap; padding: 10px 14px; margin-bottom: 18px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.quickbar-adds { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.quickbar-tools { display: flex; align-items: center; gap: 6px; }

.qa {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border: 0; border-radius: 9px;
    background: none; color: var(--body); font: inherit; font-weight: 600; font-size: 13px;
    cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.qa svg { width: 16px; height: 16px; }
.qa:hover { background: var(--bg); color: var(--ink); }
.qa-lead svg { color: var(--green); }
.qa-task svg { color: var(--amber); }
.qa-reminder svg { color: #db2777; }
.qa-meeting svg { color: #7c3aed; }
.qa-todo svg { color: var(--blue); }
.qa-note svg { color: #0891b2; }
.qa-invoice svg { color: var(--brand); }
.quickbar-adds .qa + .qa { border-left: 1px solid var(--line); border-radius: 0 9px 9px 0; }

.tool {
    position: relative; display: inline-grid; place-items: center;
    width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--card); color: var(--body); cursor: pointer; transition: all .15s;
}
.tool svg { width: 17px; height: 17px; }
.tool:hover { border-color: var(--brand); color: var(--brand); }
.tool i {
    position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px;
    padding: 0 4px; border-radius: 20px; background: var(--red); color: #fff;
    font-size: 10px; font-style: normal; font-weight: 700; line-height: 17px; text-align: center;
}

/* The four numbers across the top --------------------------------------- */

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }

.kpi {
    position: relative; padding: 14px 16px 16px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
}
.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; }
.kpi-label { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

.kpi-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; }
.kpi-icon svg { width: 16px; height: 16px; }
.kpi-value {
    margin-top: 6px; font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1.05;
    /* A rupee total can be long; shrink rather than spill out of the card. */
    overflow-wrap: anywhere;
}
.report-kpis .kpi-value { font-size: clamp(19px, 2.1vw, 28px); }
.kpi-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.kpi-meta small { color: var(--muted); }
.kpi-foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 16px; font-size: 12.5px; color: var(--body); }
.kpi-foot b { font-size: 13px; }

/* The bar runs the full width of the card, flush with its bottom edge, so it
   reads as the card's own gauge rather than another element inside it. */
.kpi-bar {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 5px; background: #eef2f7;
}
.kpi-bar i { display: block; height: 100%; }

.kpi.green .kpi-icon { background: var(--green-soft); color: var(--green); }
.kpi.green .kpi-bar i { background: var(--green); }
.kpi.green .kpi-foot b { color: var(--green); }
.kpi.red .kpi-icon { background: var(--red-soft); color: var(--red); }
.kpi.red .kpi-bar i { background: var(--red); }
.kpi.red .kpi-foot b { color: var(--red); }
.kpi.amber .kpi-icon { background: var(--amber-soft); color: var(--amber); }
.kpi.amber .kpi-bar i { background: var(--amber); }
.kpi.amber .kpi-foot b { color: var(--amber); }
.kpi.blue .kpi-icon { background: var(--blue-soft); color: var(--blue); }
.kpi.blue .kpi-bar i { background: var(--blue); }
.kpi.blue .kpi-foot b { color: var(--blue); }

.chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 20px;
    background: var(--brand-soft); color: var(--brand);
    font-size: 11.5px; font-weight: 700;
}
.chip.up { background: var(--green-soft); color: #15803d; }
.chip.down { background: var(--red-soft); color: #b91c1c; }

/* Widgets ---------------------------------------------------------------- */

.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }

.widget { display: flex; flex-direction: column; overflow: hidden; }
.widget-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.widget-head h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.widget-head h2 svg { width: 17px; height: 17px; color: var(--brand); }

.wtabs { display: flex; gap: 4px; flex-wrap: wrap; }
.wtab {
    padding: 5px 11px; border: 0; border-radius: 20px;
    background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all .15s; white-space: nowrap;
}
.wtab:hover { color: var(--ink); background: var(--bg); }
.wtab.on { background: var(--brand-soft); color: var(--brand); }

/* Every widget is the same height whatever it holds, so the grid stays even
   and a busy card scrolls inside itself instead of stretching the row. */
.dash-grid { align-items: stretch; }
.widget { height: 372px; }

.wpane { display: none; flex: 1; min-height: 0; padding: 6px 0 0; }
.wpane.on { display: flex; flex-direction: column; overflow-y: auto; }
.wpane .empty { padding: 30px 18px; margin: auto 0; }
.wpane .empty svg { width: 34px; height: 34px; }

.wpane::-webkit-scrollbar { width: 6px; }
.wpane::-webkit-scrollbar-thumb { background: #dbe2ea; border-radius: 20px; }
.wpane::-webkit-scrollbar-track { background: transparent; }

.wmore {
    display: block; width: 100%; margin-top: auto; padding: 11px 18px;
    position: sticky; bottom: 0; z-index: 1;
    border: 0; border-top: 1px solid var(--line); background: var(--card);
    color: var(--brand); font: inherit; font-size: 12.5px; font-weight: 600;
    text-align: center; cursor: pointer;
}
.wmore:hover { background: var(--brand-soft); }

/* A lead, an invoice - anything that is a line with actions on the end --- */

.lrow {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 18px; border-bottom: 1px solid var(--line);
}
.lrow:last-of-type { border-bottom: 0; }
.lrow:hover { background: var(--bg); }
.lrow-main {
    display: block; flex: 1; min-width: 0; padding: 0; border: 0;
    background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.lrow-main b { display: block; color: var(--ink); font-size: 13.5px; }
.lrow-main small { display: block; color: var(--muted); }
.lrow-end { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.lrow-end b { color: var(--ink); font-size: 13px; }

.icon-btn {
    display: inline-grid; place-items: center; width: 30px; height: 30px;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--card); color: var(--body); cursor: pointer; transition: all .15s;
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { border-color: var(--brand); color: var(--brand); }
.icon-btn.wa { color: #16a34a; }
.icon-btn.wa:hover { border-color: #16a34a; background: var(--green-soft); }
.icon-btn.brand { border-color: var(--brand); background: var(--brand); color: #fff; }
.icon-btn.brand:hover { background: var(--brand-dark); color: #fff; }

/* Schedules -------------------------------------------------------------- */

.sched { display: flex; align-items: stretch; gap: 12px; padding: 10px 18px; }
.sched-when {
    flex-shrink: 0; width: 52px; text-align: center; color: var(--muted);
    font-size: 10px; font-weight: 700; letter-spacing: .04em;
}
.sched-when b { display: block; color: var(--ink); font-size: 14px; letter-spacing: 0; }
.sched-when.late b { color: var(--red); }
.sched-body {
    flex: 1; min-width: 0; padding: 9px 12px;
    border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 10px;
    background: var(--bg);
}
.sched-title { color: var(--brand); font-weight: 700; font-size: 13.5px; }
.sched-body p { margin: 2px 0 4px; font-size: 12.5px; }
.sched-body small { color: var(--muted); }
.sched-done {
    flex-shrink: 0; align-self: center; width: 30px; height: 30px;
    display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px;
    background: var(--card); color: var(--muted); cursor: pointer; transition: all .15s;
}
.sched-done svg { width: 15px; height: 15px; }
.sched-done:hover { border-color: var(--green); background: var(--green-soft); color: var(--green); }

/* Tasks and to-dos ------------------------------------------------------- */

.tick { display: flex; align-items: flex-start; gap: 10px; padding: 9px 18px; cursor: pointer; }
.tick input { width: 17px; height: 17px; min-height: auto; margin: 2px 0 0; flex-shrink: 0; cursor: pointer; }
.tick span { min-width: 0; }
.tick b { display: block; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.tick small { display: block; color: var(--muted); }
.tick:hover { background: var(--bg); }

.tline {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border-left: 3px solid var(--line); border-bottom: 1px solid var(--line);
}
.tline:last-of-type { border-bottom: 0; }
.tline .tick { flex: 1; }
.tline.red { border-left-color: var(--red); }
.tline.amber { border-left-color: var(--amber); }
.tline.blue { border-left-color: var(--blue); }
.tline-end { display: flex; align-items: center; gap: 8px; padding-right: 18px; flex-shrink: 0; }
.tline-end small { color: var(--muted); white-space: nowrap; }

/* Money ------------------------------------------------------------------ */

.money-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 18px; }
.money-row div { padding: 10px 12px; border-radius: 10px; background: var(--bg); }
.money-row small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.money-row b { font-size: 16px; color: var(--ink); }
.money-row b.good { color: var(--green); }
.money-row b.bad { color: var(--red); }

/* Sticky notes ----------------------------------------------------------- */

.notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 16px 18px; }
.note { position: relative; padding: 12px 12px 10px; border-radius: 10px; font-size: 12.5px; color: #422006; }
.note b { display: block; margin-bottom: 4px; font-size: 13px; }
.note p { margin: 0; word-break: break-word; }
.note-acts { display: flex; gap: 4px; margin-top: 8px; opacity: 0; transition: opacity .15s; }
.note:hover .note-acts { opacity: 1; }
.note-acts button { padding: 3px; border: 0; background: none; color: inherit; opacity: .6; cursor: pointer; }
.note-acts button:hover { opacity: 1; }
.note-acts svg { width: 14px; height: 14px; display: block; }
.note-yellow { background: #fef9c3; }
.note-green { background: #dcfce7; color: #14532d; }
.note-blue { background: #dbeafe; color: #1e3a8a; }
.note-pink { background: #fce7f3; color: #831843; }
.note-purple { background: #ede9fe; color: #4c1d95; }

/* Small pickers inside the add forms ------------------------------------- */

.group-line {
    margin: 4px 0 2px; padding: 6px 0; color: var(--muted);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.group-line:first-child { margin-top: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-pick input, .swatch input { position: absolute; opacity: 0; pointer-events: none; }
.chip-pick span {
    display: inline-block; padding: 5px 11px; border: 1px solid var(--line); border-radius: 20px;
    font-size: 12px; font-weight: 600; color: var(--body); cursor: pointer; transition: all .15s;
}
.chip-pick input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.chip-btn {
    padding: 5px 11px; border: 1px solid var(--line); border-radius: 20px;
    background: var(--card); font: inherit; font-size: 12px; font-weight: 600;
    color: var(--body); cursor: pointer; transition: all .15s;
}
.chip-btn:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }

.swatch { position: relative; cursor: pointer; }
.swatch span { display: block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08); }
.swatch input:checked + span { border-color: var(--ink); }
.swatch-yellow span { background: #fef9c3; }
.swatch-green span { background: #dcfce7; }
.swatch-blue span { background: #dbeafe; }
.swatch-pink span { background: #fce7f3; }
.swatch-purple span { background: #ede9fe; }

/* ==========================================================================
   One lead, opened in place
   ========================================================================== */

.modal.xl { max-width: 1100px; }
.modal.narrow { max-width: 460px; }
.modal.tiny { max-width: 400px; }

/* The small pickers open on top of the lead panel, so they say where they
   sit rather than relying on the order they happen to appear in the page. */
#m-lead-status, #m-lead-labels, #m-lead-assign, #m-lead-convert, #m-lead-delete { z-index: 70; }

.lead-head {
    background: var(--grad-head);
    border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
}
.lead-head h3 { color: #fff; }
.lead-head button { color: rgba(255, 255, 255, .85); }
.lead-head button:hover { color: #fff; }

.lead-tools {
    display: flex; align-items: center; justify-content: center; gap: 2px;
    flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--line);
}
.ltool {
    display: grid; place-items: center; width: 38px; height: 38px;
    border: 0; border-radius: 10px; background: none; color: var(--body);
    cursor: pointer; transition: all .15s;
}
.ltool svg { width: 19px; height: 19px; }
.ltool:hover { background: var(--brand-soft); color: var(--brand); }
.ltool.danger:hover { background: var(--red-soft); color: var(--red); }
.ltool.good:hover { background: var(--green-soft); color: var(--green); }
.lead-tools .ltool + .ltool { border-left: 1px solid var(--line); border-radius: 0 10px 10px 0; }

.ltool-more { position: relative; }
.lmenu {
    display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
    min-width: 210px; padding: 6px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--card); box-shadow: var(--shadow-lg);
}
.lmenu.open { display: block; }
.lmenu a, .lmenu button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border: 0; border-radius: 8px; background: none;
    color: var(--body); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.lmenu a:hover, .lmenu button:hover { background: var(--bg); color: var(--ink); }
.lmenu svg { width: 17px; height: 17px; flex: 0 0 17px; }

.lead-tabs {
    display: flex; gap: 2px; overflow-x: auto; padding: 0 18px;
    border-bottom: 1px solid var(--line);
}
.lead-tabs button {
    display: flex; align-items: center; gap: 6px; padding: 12px 12px;
    border: 0; border-bottom: 2px solid transparent; background: none;
    color: var(--muted); font: inherit; font-size: 13px; font-weight: 600;
    white-space: nowrap; cursor: pointer; transition: all .15s;
}
.lead-tabs button:hover { color: var(--ink); }
.lead-tabs button.on { color: var(--brand); border-bottom-color: var(--brand); }
.lead-tabs i {
    min-width: 18px; padding: 1px 5px; border-radius: 20px;
    background: var(--brand-soft); color: var(--brand);
    font-size: 10.5px; font-style: normal; font-weight: 700; text-align: center;
}
.lead-tabs button.on i { background: var(--brand); color: #fff; }

.lcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lcard { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lcard-head {
    padding: 11px 16px; background: var(--grad-head);
    color: #fff; font-size: 13.5px; font-weight: 700; text-align: center;
}
.lcard dl { display: block; margin: 0; padding: 4px 16px 10px; }
.lcard dt {
    padding-top: 10px; color: var(--ink); font-size: 12.5px; font-weight: 600;
}
.lcard dd {
    margin: 2px 0 0; padding-bottom: 9px; border-bottom: 1px solid var(--line);
    color: var(--body); font-size: 13px; word-break: break-word;
}
.lcard dd:last-of-type { border-bottom: 0; }
.lcard .muted { color: var(--muted); }

.chip-label {
    display: inline-block; padding: 2px 9px; border-radius: 20px;
    font-size: 11.5px; font-weight: 700;
}
.chip-label.soft { background: var(--bg); color: var(--body); text-transform: capitalize; }

.ltable-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.ltable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ltable th {
    padding: 9px 12px; background: var(--grad-head);
    color: #fff; font-size: 11.5px; font-weight: 600; text-align: left; white-space: nowrap;
}
.ltable td { padding: 8px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.ltable tbody tr:hover { background: var(--bg); }
.ltable b { color: var(--ink); }
.ltable-none { padding: 30px 14px !important; color: var(--muted); text-align: center; }

.ltimeline { margin: 0; padding: 0; list-style: none; }
.ltimeline li {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 4px; border-bottom: 1px solid var(--line);
}
.ltimeline li:last-child { border-bottom: 0; }
.ltimeline .dot {
    flex: 0 0 10px; width: 10px; height: 10px; margin-top: 5px;
    border-radius: 50%; background: var(--green);
}
.ltimeline .dot.status { background: var(--blue); }
.ltimeline .dot.delete { background: var(--red); }
.ltimeline .dot.convert { background: var(--brand); }
.ltimeline .dot.label { background: var(--amber); }
.ltimeline div { flex: 1; min-width: 0; }
.ltimeline b { color: var(--ink); font-size: 13.5px; }
.ltimeline p { margin: 2px 0 0; font-size: 13px; }
.ltimeline small { color: var(--muted); }
.ltimeline time { flex-shrink: 0; color: var(--muted); font-size: 12px; }

/* Status picker - each stage in the colour the company gave it */
.status-picks { display: grid; gap: 8px; }
.status-pick {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px; border: 0; border-radius: 10px;
    color: #fff; font: inherit; font-size: 13.5px; font-weight: 600;
    text-align: left; cursor: pointer; opacity: .92; transition: all .15s;
}
.status-pick:hover { opacity: 1; transform: translateX(2px); }
.status-pick svg { width: 17px; height: 17px; opacity: 0; }
.status-pick.on svg { opacity: 1; }

/* Label picker */
.label-picks { display: grid; gap: 7px; max-height: 340px; overflow-y: auto; }
.label-pick {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px; border: 1px solid transparent; border-radius: 9px;
    font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.label-pick input { position: absolute; opacity: 0; pointer-events: none; }
.label-pick svg { width: 16px; height: 16px; opacity: 0; flex-shrink: 0; }
.label-pick.on { border-color: currentColor; }
.label-pick.on svg { opacity: 1; }

/* A question worth stopping for */
.centered-ask { text-align: center; padding: 30px 26px 26px; }
.ask-mark {
    display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 16px;
    border-radius: 50%; background: var(--brand-soft); color: var(--brand);
}
.ask-mark svg { width: 28px; height: 28px; }
.centered-ask h3 { margin-bottom: 8px; }
.centered-ask p { color: var(--muted); font-size: 13px; }
.ask-acts { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }

/* ==========================================================================
   The Leads screen: one bar, two views of the same list
   ========================================================================== */

.leads-bar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 14px 18px; margin-bottom: 18px;
}
.leads-bar h1 { display: flex; align-items: center; gap: 9px; font-size: 21px; }
.leads-count {
    padding: 2px 10px; border-radius: 20px; background: var(--brand-soft);
    color: var(--brand); font-size: 12.5px; font-weight: 700;
}

.leads-search { position: relative; flex: 1 1 220px; max-width: 320px; }
.leads-search svg { position: absolute; left: 12px; top: 50%; margin-top: -8px; width: 16px; height: 16px; color: var(--muted); }
.leads-search input { padding-left: 36px; }

.leads-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.leads-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
.leads-actions .btn svg { width: 16px; height: 16px; }
.btn-icon { padding: 0 10px; }
.caret { width: 13px !important; height: 13px !important; opacity: .6; }

/* Drop-downs ------------------------------------------------------------- */

.drop { position: relative; }
.drop-menu {
    display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 30;
    min-width: 262px; padding: 6px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--card); box-shadow: var(--shadow-lg);
}
.drop-menu.right { left: auto; right: 0; min-width: 200px; }
.drop-menu.tall { max-height: 420px; overflow-y: auto; }
.drop-menu.open { display: block; }
.drop-head {
    padding: 8px 10px 6px; color: var(--muted);
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
}
.drop-menu a, .drop-menu button {
    position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border: 0; border-radius: 8px; background: none;
    color: var(--body); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.drop-menu a:hover, .drop-menu button:hover { background: var(--bg); }
.drop-menu svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--brand); }
.drop-menu b { display: block; color: var(--ink); font-size: 13px; }
.drop-menu small { display: block; color: var(--muted); font-size: 11.5px; }
.drop-note { padding: 8px 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; }
.drop-badge {
    min-width: 20px; padding: 1px 6px; border-radius: 20px; margin-left: auto;
    background: var(--green-soft); color: #15803d;
    font-size: 11px; font-weight: 700; text-align: center;
}
.leads-actions .drop-badge { background: var(--brand); color: #fff; }

.view-toggle { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.view-toggle a { display: grid; place-items: center; width: 38px; height: 38px; color: var(--muted); }
.view-toggle a svg { width: 17px; height: 17px; }
.view-toggle a:hover { background: var(--bg); color: var(--ink); }
.view-toggle a.on { background: var(--brand); color: #fff; }

/* The filter drawer ------------------------------------------------------ */

.drawer-backdrop {
    position: fixed; inset: 0; z-index: 65; display: none;
    background: rgba(15, 23, 42, .4);
}
.drawer-backdrop.open { display: block; }
.drawer {
    position: absolute; top: 0; right: 0; bottom: 0; width: 100%; max-width: 360px;
    display: flex; flex-direction: column; background: var(--card);
    box-shadow: var(--shadow-lg); animation: slidein .18s ease-out;
}
@keyframes slidein { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.drawer-head b { color: var(--ink); font-size: 15px; }
.drawer-head div { display: flex; align-items: center; gap: 12px; }
.drawer-head .clear { color: var(--red); font-size: 12.5px; font-weight: 600; }
.drawer-head button { border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.drawer-body .field { margin-bottom: 14px; }
.drawer-group {
    margin: 4px 0 8px; color: var(--muted);
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
}
.drawer-foot { display: flex; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); }
.drawer-foot .btn { flex: 1; }
.tick-line { display: flex; align-items: center; gap: 9px; font-weight: 500; cursor: pointer; }
.tick-line input { width: 17px; height: 17px; min-height: auto; margin: 0; }

.import-help {
    margin-top: 6px; padding: 12px 14px; border-radius: 10px;
    background: var(--bg); font-size: 12.5px;
}
.import-help b { display: block; color: var(--ink); margin-bottom: 6px; }
.import-help p { margin: 0 0 6px; }
.import-help code {
    padding: 1px 6px; border-radius: 5px; background: var(--card);
    border: 1px solid var(--line); font-size: 11.5px;
}
.import-help small { color: var(--muted); }

/* The board -------------------------------------------------------------- */

.board {
    display: flex; gap: 16px; align-items: flex-start;
    overflow-x: auto; padding-bottom: 10px;
}
.bcol { flex: 0 0 246px; display: flex; flex-direction: column; }
.bcol-head {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 11px; border-radius: 10px 10px 0 0; color: #fff;
}
.bcol-name { font-size: 12.5px; font-weight: 700; }
.bcol-sum {
    padding: 1px 7px; border-radius: 20px; background: rgba(255, 255, 255, .22);
    font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.bcol-count {
    display: grid; place-items: center; min-width: 21px; height: 21px; margin-left: auto;
    padding: 0 6px; border-radius: 20px; background: var(--red);
    font-size: 11px; font-weight: 700;
}
.bcol-body {
    flex: 1; max-height: calc(100vh - 250px); overflow-y: auto;
    padding: 9px; border: 1px solid var(--line); border-top: 0;
    border-radius: 0 0 10px 10px; background: var(--card);
}
.bcol-body::-webkit-scrollbar { width: 6px; }
.bcol-body::-webkit-scrollbar-thumb { background: #dbe2ea; border-radius: 20px; }
.bcol-empty { padding: 26px 8px; color: var(--muted); font-size: 12.5px; text-align: center; }

/* One card --------------------------------------------------------------- */

.lcard {
    margin-bottom: 9px; border: 1px solid var(--line); border-left: 3px solid var(--accent);
    border-radius: 9px; background: var(--card); overflow: hidden;
    transition: box-shadow .15s;
}
.lcard:last-child { margin-bottom: 0; }
.lcard:hover { box-shadow: var(--shadow); }
.lcard.is-overdue { border-color: #fecaca; border-left-color: var(--red); }

.lcard-open {
    display: block; width: 100%; padding: 9px 11px 5px; border: 0;
    background: none; font: inherit; text-align: left; cursor: pointer;
}
.lc-name { display: block; color: var(--ink); font-size: 13px; font-weight: 700; }
.lc-phone { display: flex; align-items: center; gap: 4px; margin-top: 1px; color: var(--green); font-size: 11.5px; font-weight: 600; }
.lc-phone svg { width: 12px; height: 12px; }

.lc-labels { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 11px 8px; }
.lc-labels .chip-label { padding: 1px 7px; font-size: 10.5px; }
.chip-label.muted { background: var(--bg); color: var(--muted); }

.lc-lines { padding: 7px 11px; border-top: 1px solid var(--line); }
.lc-line { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 1.75; }
.lc-line svg { width: 12px; height: 12px; flex: 0 0 12px; color: var(--muted); }
.lc-line span { flex: 0 0 24px; color: var(--muted); font-weight: 700; }
.lc-line b { color: var(--body); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-line.alarm svg, .lc-line.alarm b { color: var(--red); font-weight: 600; }

.lc-amount {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    margin: 0 11px 9px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px;
}
.lc-amount small { color: var(--muted); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.lc-amount b { color: var(--ink); font-size: 12.5px; white-space: nowrap; }
.lc-amount.alarm { border-color: #fecaca; background: var(--red-soft); }
.lc-amount.alarm b { color: #b91c1c; }

.lc-foot {
    display: flex; align-items: center; gap: 0;
    padding: 5px 6px; border-top: 1px solid var(--line); background: #fbfcfe;
}
.lc-spacer { flex: 1; min-width: 2px; }
.lc-act {
    position: relative; display: grid; place-items: center; flex: 0 0 auto;
    width: 23px; height: 23px;
    border: 0; border-radius: 6px; background: none; color: var(--brand);
    cursor: pointer; transition: background .15s;
}
.lc-act svg { width: 13px; height: 13px; }
.lc-act:hover { background: var(--brand-soft); }
.lc-act.danger { color: var(--red); }
.lc-act.danger:hover { background: var(--red-soft); }
.lc-act.good { color: var(--green); }
.lc-act.good:hover { background: var(--green-soft); }
.lc-act.wa { color: #16a34a; }
.lc-act.wa:hover { background: var(--green-soft); }
.lc-act i {
    position: absolute; top: -1px; right: -1px; min-width: 14px; height: 14px;
    padding: 0 3px; border-radius: 20px; background: var(--muted); color: #fff;
    font-size: 9px; font-style: normal; font-weight: 700; line-height: 14px; text-align: center;
}
.lc-overdue {
    flex: 0 0 auto; padding: 2px 6px; margin-left: 2px;
    border-radius: 20px; background: var(--red); color: #fff;
    font-size: 8.5px; font-weight: 800; letter-spacing: .03em; white-space: nowrap;
}

/* The list --------------------------------------------------------------- */

.list-table td { vertical-align: middle; }
.list-table tbody tr { background: color-mix(in srgb, var(--row) 8%, #fff); }
.list-table tbody tr:hover { background: color-mix(in srgb, var(--row) 16%, #fff); }
.list-table .tight { width: 52px; white-space: nowrap; }
.list-table .nowrap { white-space: nowrap; }
.list-table .right { text-align: right; }

.row-acts { display: flex; align-items: center; gap: 1px; }
.row-dot {
    display: inline-block; width: 7px; height: 7px; margin-left: 4px;
    border-radius: 50%; background: var(--red); vertical-align: middle;
}
.row-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.link-name {
    padding: 0; border: 0; background: none; color: var(--brand);
    font: inherit; font-weight: 600; cursor: pointer; text-align: left;
}
.link-name:hover { text-decoration: underline; }
.overdue-text { color: var(--red); font-weight: 600; }

.row-status {
    height: 32px; min-height: 32px; padding: 0 26px 0 10px;
    border: 1.5px solid var(--line); border-radius: 8px; background-position: right 8px center;
    font-size: 12.5px; font-weight: 600;
}

.table-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--line);
}
.per-page { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.per-page label { margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.per-page select { height: 32px; min-height: 32px; padding: 0 26px 0 10px; font-size: 12.5px; }
.table-range { color: var(--muted); font-size: 12.5px; }
.pager { display: flex; align-items: center; gap: 4px; }
.pager a {
    display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px;
    border: 1px solid var(--line); border-radius: 8px; color: var(--body); font-size: 14px;
}
.pager a:hover { border-color: var(--brand); color: var(--brand); }
.pager a.off { opacity: .4; pointer-events: none; }
.pager span { padding: 0 8px; color: var(--muted); font-size: 12.5px; }

/* ==========================================================================
   Reports
   ========================================================================== */

.report-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.report-range span { color: var(--muted); font-size: 12.5px; }
.report-range input, .report-range select {
    height: 38px; min-height: 38px; width: auto; padding: 0 10px; font-size: 13px;
}
.report-range select { padding-right: 28px; }

.report-shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 18px; align-items: start; }

.report-nav {
    display: flex; flex-direction: column; gap: 2px; padding: 8px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.report-nav a { display: block; padding: 9px 11px; border-radius: 9px; color: var(--body); }
.report-nav a:hover { background: var(--bg); }
.report-nav b { display: block; color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.report-nav small { display: block; margin-top: 1px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.report-nav a.on { background: var(--brand-soft); }
.report-nav a.on b, .report-nav a.on small { color: var(--brand); }

.report-body { min-width: 0; }
.report-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.report-kpis .kpi-top { margin-bottom: 2px; }
.report-kpis .kpi-foot { margin-top: 10px; }

.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.chart-head.second { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.chart-head b { color: var(--ink); font-size: 13.5px; }
.chart-head small { color: var(--muted); }

/* One measure per row: a name, a bar, its own number on the end. */
.bars { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.bar-name {
    color: var(--body); font-size: 12.5px; text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bar-track { height: 18px; border-radius: 4px; background: #eef2f7; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; transition: width .25s ease-out; }
.bar-value { min-width: 74px; color: var(--ink); font-size: 12.5px; text-align: right; }

.ltable .dot {
    display: inline-block; width: 9px; height: 9px; margin-right: 7px;
    border-radius: 50%; vertical-align: middle;
}
.ltable .right { text-align: right; }
.ltable .nowrap { white-space: nowrap; }
.ltable .muted { color: var(--muted); font-size: 12px; }
.ltable.matrix td.zero { color: #cbd5e1; }
.ltable.matrix th .dot { margin-right: 5px; }

/* ==========================================================================
   Reminders
   ========================================================================== */

/* A strip of counts rather than four big cards: the table is what this page
   is for, and the numbers only need to be glanceable. */
.rem-strip {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 9px 18px; margin-bottom: 14px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--card); font-size: 12.5px; color: var(--body);
}
.rem-strip b { color: var(--ink); font-size: 14px; font-weight: 800; }
.rem-strip .late { color: var(--red); }
.rem-strip .late b { color: var(--red); }
.rem-strip .done { margin-left: auto; color: var(--muted); }
.rem-strip .done b { color: var(--green); }

.rem-table td { vertical-align: middle; }
/* Title and message stay on one line each, so every row is the same height
   and the table can be scanned down rather than read across. */
.rem-table .rem-title, .rem-table .rem-msg {
    display: block; max-width: 200px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rem-table .rem-title { color: var(--ink); font-weight: 600; }
.rem-table .rem-msg { color: var(--brand); }
.rem-table .muted { color: var(--muted); }

/* A meeting's row carries its own state, so the list can be read by colour
   before anything is read by word. */
.rem-table.has-state tbody tr.state-missed { background: #fef2f2; }
.rem-table.has-state tbody tr.state-missed:hover { background: #fee2e2; }
.rem-table.has-state tbody tr.state-pending { background: #fffbeb; }
.rem-table.has-state tbody tr.state-pending:hover { background: #fef3c7; }
.rem-table.has-state tbody tr.state-done { background: #f0fdf4; }
.rem-table.has-state tbody tr.state-done:hover { background: #dcfce7; }
.rem-table.has-state tbody tr.rem-detail { background: var(--bg); }

.state-pick {
    width: auto; min-width: 104px;
    height: 28px; min-height: 28px; padding: 0 24px 0 9px;
    border: 1.5px solid currentColor; border-radius: 7px; background-position: right 6px center;
    font-size: 11.5px; font-weight: 700;
}
.state-pick.pending { color: #b45309; background-color: var(--amber-soft); }
.state-pick.done { color: #15803d; background-color: var(--green-soft); }
.state-pick.missed { color: #b91c1c; background-color: var(--red-soft); }
.rem-table tr.is-done .rem-title { text-decoration: line-through; opacity: .55; }
.rem-table input[type="checkbox"] { width: 16px; height: 16px; min-height: auto; margin: 0; cursor: pointer; }
.rem-table th.tight, .rem-table td.tight { width: 1%; padding-left: 10px; padding-right: 10px; white-space: nowrap; }

.rem-open {
    display: grid; place-items: center; width: 26px; height: 26px;
    border: 0; border-radius: 7px; background: none; color: var(--muted);
    cursor: pointer; transition: all .15s;
}
.rem-open svg { width: 15px; height: 15px; transition: transform .15s; }
.rem-open:hover { background: var(--bg); color: var(--ink); }
.rem-open.on { background: var(--brand-soft); color: var(--brand); }
.rem-open.on svg { transform: rotate(90deg); }

.rem-detail td { padding: 0 !important; background: var(--bg); }
.rem-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px; padding: 16px 22px;
}
.rem-grid dl { margin: 0; }
.rem-grid dt { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.rem-grid dd { margin: 1px 0 10px; color: var(--ink); font-size: 13px; }

.auto-on, .auto-off {
    display: inline-grid; place-items: center; width: 24px; height: 24px;
    border-radius: 7px; vertical-align: middle;
}
.auto-on svg, .auto-off svg { width: 15px; height: 15px; }
.auto-on.wa { background: var(--green-soft); color: #16a34a; }
.auto-on.mail { background: var(--blue-soft); color: var(--blue); }
.auto-off { background: var(--red-soft); color: var(--red); }
.auto-sent {
    margin-left: 4px; padding: 1px 7px; border-radius: 20px;
    background: var(--green-soft); color: #15803d;
    font-size: 10px; font-weight: 700; vertical-align: middle;
}

/* A switch reads as on or off at a glance, which a bare tick box does not. */
.switch-line { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; font-weight: 500; }
.switch-line .switch { position: absolute; opacity: 0; pointer-events: none; }
.switch-track {
    position: relative; flex: 0 0 38px; width: 38px; height: 22px; margin-top: 1px;
    border-radius: 20px; background: #cbd5e1; transition: background .15s;
}
.switch-track::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
    transition: transform .15s;
}
.switch:checked + .switch-track { background: var(--brand); }
.switch:checked + .switch-track::after { transform: translateX(16px); }
.switch-line > span:last-child { color: var(--ink); font-size: 13.5px; }
.switch-line small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; }

.auto-box {
    padding: 14px 16px; margin-top: 4px; border: 1px solid var(--line);
    border-radius: 11px; background: var(--bg);
}
.auto-box > b { display: block; margin-bottom: 12px; color: var(--ink); font-size: 12.5px; }
.auto-box .switch-line + .switch-line { margin-top: 12px; }

.ask-mark.warn { background: var(--amber-soft); color: var(--amber); }
.btn-warn { background: var(--amber); }
.btn-warn:hover { background: #b45309; box-shadow: 0 8px 18px rgba(217, 119, 6, .25); }

@media (max-width: 1100px) {
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-grid { grid-template-columns: 1fr; }
    .lcards { grid-template-columns: 1fr; }
    .rem-grid { grid-template-columns: 1fr; }
    .report-shell { grid-template-columns: 1fr; }
    .report-nav { flex-direction: row; overflow-x: auto; }
    .report-nav a { flex: 0 0 auto; }
    .report-nav small { display: none; }
    .report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bar-row { grid-template-columns: 110px minmax(0, 1fr) auto; }
}

@media (max-width: 720px) {
    .leads-bar { gap: 10px; }
    .leads-search { max-width: none; order: 3; flex-basis: 100%; }
    .leads-actions { margin-left: 0; }
    .bcol { flex-basis: 84vw; }
}

@media (max-width: 640px) {
    .kpis { grid-template-columns: 1fr; }
    .quickbar { justify-content: center; }
    .quickbar-adds .qa + .qa { border-left: 0; border-radius: 9px; }
    .money-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Tasks
   ========================================================================== */

/* A task card carries a priority mark where a lead card carries a phone
   number - same frame, different first line. */
.tcard-head { display: flex; align-items: flex-start; gap: 7px; padding: 9px 11px 5px; }
.tcard-head b { color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.35; }

.prio {
    flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px;
    border-radius: 6px; font-size: 10px; font-weight: 800; line-height: 1;
}
.prio-red { background: var(--red-soft); color: #b91c1c; }
.prio-amber { background: var(--amber-soft); color: #b45309; }
.prio-blue { background: var(--blue-soft); color: #1d4ed8; }
.prio-grey { background: var(--bg); color: var(--muted); }

.prio-text { font-weight: 700; font-size: 12px; }
.prio-text.prio-red { background: none; color: #b91c1c; }
.prio-text.prio-amber { background: none; color: #b45309; }
.prio-text.prio-blue { background: none; color: #1d4ed8; }
.prio-text.prio-grey { background: none; color: var(--muted); }

/* The column picker sitting in a card's footer. */
.col-move {
    flex: 0 0 auto; width: auto; max-width: 104px;
    height: 22px; min-height: 22px; padding: 0 19px 0 7px;
    border: 1px solid var(--line); border-radius: 6px; background-position: right 5px center;
    background-size: 13px; color: var(--body); font-size: 10.5px; font-weight: 600;
}
.col-move:focus { border-color: var(--brand); }

/* The list ---------------------------------------------------------------- */

.task-table .pick { width: 34px; text-align: center; }
.task-table .pick input { width: 15px; height: 15px; min-height: auto; margin: 0; cursor: pointer; }

.row-plain {
    height: 30px; min-height: 30px; max-width: 150px; padding: 0 24px 0 8px;
    border: 1px solid transparent; border-radius: 7px; background-color: transparent;
    background-position: right 6px center; color: var(--body); font-size: 12.5px; font-weight: 500;
}
.row-plain:hover { border-color: var(--line); background-color: #fff; }

.row-prio {
    height: 28px; min-height: 28px; width: auto; padding: 0 23px 0 9px;
    border: 0; border-radius: 20px; background-position: right 6px center; background-size: 14px;
    font-size: 11.5px; font-weight: 700;
}

.caret-act svg { transition: transform .15s; }
.caret-act.on svg { transform: rotate(180deg); }

.detail-row > td { padding: 0 !important; background: var(--bg); }
.task-detail {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px;
    padding: 12px 18px; border-top: 1px solid var(--line);
}
.task-detail dl { margin: 0; }
.task-detail dl > div {
    display: flex; align-items: baseline; gap: 10px;
    padding: 5px 0; border-bottom: 1px dashed var(--line);
}
.task-detail dl > div:last-child { border-bottom: 0; }
.task-detail dl > div.wide { align-items: flex-start; }
.task-detail dt {
    flex: 0 0 96px; color: var(--muted); font-size: 11px; font-weight: 600;
    letter-spacing: .02em; text-transform: uppercase;
}
.task-detail dd { flex: 1; min-width: 0; margin: 0; color: var(--ink); font-size: 12.5px; }

/* A heading over each run of reports in the side list. */
.report-nav-group {
    padding: 10px 11px 4px; color: var(--muted);
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.report-nav-group:first-child { padding-top: 2px; }

@media (max-width: 900px) {
    .task-detail { grid-template-columns: minmax(0, 1fr); }
    .report-nav-group { display: none; }
}

/* ==========================================================================
   To-Do
   ========================================================================== */

/* The four ways of looking at the same list. */
.tabline {
    display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
    padding: 4px 10px 0; border-bottom: 1px solid var(--line);
}
.tabline a {
    display: flex; align-items: center; gap: 7px;
    padding: 11px 14px; border-bottom: 2px solid transparent;
    color: var(--body); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.tabline a svg { width: 15px; height: 15px; color: var(--muted); }
.tabline a:hover { color: var(--ink); }
.tabline a.on { border-bottom-color: var(--brand); color: var(--brand); }
.tabline a.on svg { color: var(--brand); }

.todo-board {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
    padding: 14px; background: var(--bg);
}

.tcol { display: flex; flex-direction: column; border-radius: 11px; overflow: hidden; }
.tcol-head {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; font-size: 13px;
}
.tcol-head b { flex: 1; font-weight: 700; }
.tcol-head i { font-style: normal; font-weight: 700; }
.tcol-mark { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 5px; }
.tcol-mark svg { width: 13px; height: 13px; }

.tcol.tone-red .tcol-head { background: var(--red-soft); color: #b91c1c; }
.tcol.tone-red .tcol-mark { background: var(--red); color: #fff; }
.tcol.tone-amber .tcol-head { background: var(--amber-soft); color: #b45309; }
.tcol.tone-amber .tcol-mark { background: var(--amber); color: #fff; }
.tcol.tone-green .tcol-head { background: var(--green-soft); color: #15803d; }
.tcol.tone-green .tcol-mark { background: var(--green); color: #fff; }

.tcol-body {
    flex: 1; min-height: 210px; max-height: calc(100vh - 340px); overflow-y: auto;
    padding: 12px; background: var(--card); border: 1px solid var(--line); border-top: 0;
    border-radius: 0 0 11px 11px;
}
.tcol-body::-webkit-scrollbar { width: 6px; }
.tcol-body::-webkit-scrollbar-thumb { background: #dbe2ea; border-radius: 20px; }

.tcol-none {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 44px 10px; color: var(--muted); font-size: 12.5px; text-align: center;
}
.tcol-none svg { width: 34px; height: 34px; opacity: .5; }

.tdcard {
    margin-bottom: 10px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--card); transition: box-shadow .15s;
}
.tdcard:last-child { margin-bottom: 0; }
.tdcard:hover { box-shadow: var(--shadow); }
.tdcard.is-done { opacity: .6; }
.tdcard.is-done .tdcard-text { text-decoration: line-through; }

.tdcard-top { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; }
.tdavatar {
    flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px;
    border: 2px solid var(--brand); border-radius: 50%;
    background: var(--brand-soft); color: var(--brand);
    font-size: 12.5px; font-weight: 800;
}
.tdcard-who { flex: 1; min-width: 0; }
.tdcard-who > b { display: block; color: var(--ink); font-size: 13px; font-weight: 700; }
.tdcard-text {
    display: flex; align-items: flex-start; gap: 5px; margin-top: 1px;
    color: var(--brand); font-size: 12.5px; word-break: break-word;
}
.tdcard-text svg { width: 11px; height: 11px; flex: 0 0 11px; margin-top: 4px; }

.tdpick { flex: 0 0 auto; cursor: pointer; }
.tdpick input { width: 16px; height: 16px; min-height: auto; margin: 0; cursor: pointer; }

.tdcard-foot {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px; border-top: 1px solid var(--line); background: #fbfcfe;
    border-radius: 0 0 10px 10px;
}
.tdwhen {
    display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0;
    color: var(--body); font-size: 11.5px; font-weight: 600;
}
.tdwhen svg { width: 13px; height: 13px; color: var(--muted); }
.tdwhen.late, .tdwhen.late svg { color: var(--red); }

.tdacts { display: flex; align-items: center; gap: 2px; }
.td-act {
    position: relative; display: grid; place-items: center; flex: 0 0 auto;
    width: 25px; height: 25px; border: 0; border-radius: 6px;
    background: none; color: var(--muted); cursor: pointer; transition: background .15s, color .15s;
}
.td-act svg { width: 14px; height: 14px; }
.td-act:hover { background: var(--bg); color: var(--ink); }
.td-act.edit { color: var(--brand); }
.td-act.edit:hover { background: var(--brand-soft); }
.td-act.look { color: var(--blue); }
.td-act.look:hover { background: var(--blue-soft); }
.td-act.tick, .td-act.say { color: var(--green); }
.td-act.tick:hover, .td-act.say:hover { background: var(--green-soft); }
.td-act.undo { color: var(--amber); }
.td-act.undo:hover { background: var(--amber-soft); }
.td-act i {
    position: absolute; top: -3px; right: -3px; min-width: 14px; height: 14px;
    padding: 0 3px; border-radius: 20px; background: #db2777; color: #fff;
    font-size: 9px; font-style: normal; font-weight: 700; line-height: 14px; text-align: center;
}

/* The delete menu, with a count beside every option. */
.btn-soft-danger { background: #fff1f2; border-color: #fecdd3; color: #be123c; }
.btn-soft-danger:hover { background: var(--red-soft); color: #9f1239; box-shadow: none; }
.btn-soft-danger svg { color: currentColor; }

.drop-menu.wide { min-width: 312px; }
.drop-head.danger { color: #be123c; }
.drop-row { align-items: flex-start !important; }
.drop-row span { flex: 1; min-width: 0; }
.drop-row svg { margin-top: 2px; color: var(--muted) !important; }
.drop-num {
    flex: 0 0 auto; min-width: 26px; padding: 2px 7px; border-radius: 7px;
    background: var(--bg); color: var(--body);
    font-size: 11.5px; font-style: normal; font-weight: 700; text-align: center;
}
.drop-num.tone-red { background: var(--red-soft); color: #b91c1c; }
.drop-num.tone-amber { background: var(--amber-soft); color: #b45309; }
.drop-num.tone-green { background: var(--green-soft); color: #15803d; }
.drop-plain { color: var(--ink) !important; font-weight: 600; }

/* Filters and saved filters share one drawer. */
.drawer-tabs {
    display: flex; align-items: center; gap: 4px;
    padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--brand-soft);
}
.drawer-tabs button {
    padding: 7px 12px; border: 0; border-radius: 8px; background: none;
    color: var(--body); font: inherit; font-size: 11.5px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
}
.drawer-tabs button.on { background: var(--card); color: var(--brand); }
.drawer-tabs .drawer-x {
    margin-left: auto; padding: 0 6px; color: var(--muted); font-size: 22px;
    letter-spacing: 0; text-transform: none;
}
.drawer-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.drawer-panel[hidden] { display: none; }
.drawer-line {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.drawer-line b { color: var(--ink); font-size: 14px; }
.drawer-line .clear { color: var(--red); font-size: 12.5px; font-weight: 600; }
.drawer-foot.stack { flex-direction: column; }
.btn.wide { width: 100%; justify-content: center; }
.btn-dark { background: var(--ink); }
.btn-dark:hover { background: #1e293b; box-shadow: 0 8px 18px rgba(15, 23, 42, .2); }

.saved-row {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 0 4px 6px; border-bottom: 1px solid var(--line);
}
.saved-row a { flex: 1; display: flex; align-items: center; gap: 9px; color: var(--body); font-weight: 600; }
.saved-row a svg { width: 15px; height: 15px; color: var(--brand); }
.saved-row a:hover { color: var(--brand); }
.empty.small { padding: 26px 10px; font-size: 12.5px; }
.empty.small b { font-size: 13.5px; }

/* The thread on one To-Do. */
.todo-chat-note {
    margin: 0 0 12px; padding: 10px 12px; border-radius: 9px;
    background: var(--bg); color: var(--body); font-size: 12.5px; white-space: pre-line;
}
.todo-chat-note:empty { display: none; }
.todo-thread { max-height: 320px; overflow-y: auto; padding-right: 4px; }
.thread-wait { padding: 26px 10px; color: var(--muted); font-size: 12.5px; text-align: center; }

.bubble {
    max-width: 78%; margin-bottom: 9px; padding: 8px 11px;
    border-radius: 11px 11px 11px 3px; background: var(--bg);
}
.bubble.mine { margin-left: auto; border-radius: 11px 11px 3px; background: var(--brand-soft); }
.bubble b { display: block; color: var(--brand); font-size: 11.5px; font-weight: 700; }
.bubble b:empty { display: none; }
.bubble p { margin: 0; color: var(--ink); font-size: 13px; white-space: pre-line; word-break: break-word; }
.bubble small { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; text-align: right; }

.todo-reply { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }
.todo-reply input { flex: 1; }

.pick-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.pick-list .tick { border-bottom: 1px solid var(--line); }
.pick-list .tick:last-child { border-bottom: 0; }

/* ==========================================================================
   Chat
   ========================================================================== */

.chat-note {
    margin-bottom: 14px; padding: 11px 16px; border-radius: 10px;
    background: var(--brand-soft); color: var(--brand);
    font-size: 12.5px; font-weight: 600; text-align: center;
}

.chat-shell {
    display: grid; grid-template-columns: 320px minmax(0, 1fr);
    height: calc(100vh - 186px); min-height: 440px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--card); overflow: hidden;
}

.chat-side { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); }
.chat-side-head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.chat-me {
    display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 50%; background: var(--ink); color: #fff;
    font-size: 13px; font-weight: 800;
}
.chat-tabs { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.chat-tabs a {
    display: grid; place-items: center; width: 32px; height: 32px;
    border-bottom: 2px solid transparent; color: var(--muted);
}
.chat-tabs a svg { width: 17px; height: 17px; }
.chat-tabs a:hover { color: var(--ink); }
.chat-tabs a.on { border-bottom-color: var(--brand); color: var(--brand); }
.chat-kebab {
    display: grid; place-items: center; width: 30px; height: 30px;
    border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer;
}
.chat-kebab svg { width: 16px; height: 16px; }
.chat-kebab:hover { background: var(--bg); color: var(--ink); }

.chat-find { position: relative; padding: 10px 12px; }
.chat-find svg {
    position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; color: var(--muted);
}
.chat-find input { height: 38px; min-height: 38px; padding-left: 34px; border-radius: 20px; background: var(--bg); }

.chat-list { flex: 1; overflow-y: auto; }
.chat-list::-webkit-scrollbar { width: 6px; }
.chat-list::-webkit-scrollbar-thumb { background: #dbe2ea; border-radius: 20px; }

.chat-row {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line);
    background: none; color: var(--body); font: inherit; text-align: left; cursor: pointer;
}
.chat-row:hover { background: var(--bg); }
.chat-row.on { background: var(--brand-soft); }
.chat-face {
    flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: 50%; background: #e2e8f0; color: var(--body);
    font-size: 14.5px; font-weight: 800;
}
.chat-face.group { background: var(--brand); color: #fff; }
.chat-row-mid { flex: 1; min-width: 0; }
.chat-row-mid b { display: block; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.chat-row-mid small { display: block; color: var(--muted); font-size: 12px; }
.chat-last {
    display: flex; align-items: center; gap: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-last .ticks { width: 14px; height: 14px; flex: 0 0 14px; color: var(--green); }
.chat-row-end { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.chat-row-end em { color: var(--muted); font-size: 11px; font-style: normal; }
.chat-unread {
    min-width: 19px; padding: 1px 6px; border-radius: 20px;
    background: var(--green); color: #fff;
    font-size: 10.5px; font-style: normal; font-weight: 700; text-align: center;
}
.chat-empty-list { padding: 30px 18px; color: var(--muted); font-size: 12.5px; text-align: center; }

.chat-main { display: flex; flex-direction: column; min-width: 0; background: #f6f7fb; }
.chat-blank {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 20px; text-align: center;
}
.chat-blank span {
    display: grid; place-items: center; width: 92px; height: 92px;
    border-radius: 50%; background: var(--card); box-shadow: var(--shadow);
}
.chat-blank span svg { width: 40px; height: 40px; color: var(--ink); }
.chat-blank b { color: var(--ink); font-size: 17px; }
.chat-blank p { margin: 0; color: var(--muted); font-size: 13px; max-width: 280px; }

.chat-main-head {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--card);
}
.chat-main-head b { display: block; color: var(--ink); font-size: 14px; }
.chat-main-head small { display: block; color: var(--muted); font-size: 11.5px; }
.chat-hide { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.chat-stream { flex: 1; overflow-y: auto; padding: 16px 18px; }
.chat-stream::-webkit-scrollbar { width: 6px; }
.chat-stream::-webkit-scrollbar-thumb { background: #dbe2ea; border-radius: 20px; }
.chat-stream .bubble { background: var(--card); box-shadow: 0 1px 1px rgba(15, 23, 42, .06); }
.chat-stream .bubble.mine { background: #dcf8c6; }
.chat-day { margin: 10px 0 14px; text-align: center; }
.chat-day span {
    padding: 3px 11px; border-radius: 20px; background: var(--card);
    color: var(--muted); font-size: 11px; font-weight: 600;
}
.chat-first { padding: 40px 10px; color: var(--muted); font-size: 13px; text-align: center; }

.chat-write {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 16px; border-top: 1px solid var(--line); background: var(--card);
}
.chat-write input { flex: 1; height: 42px; min-height: 42px; border-radius: 21px; background: var(--bg); }
.chat-write .btn { width: 42px; height: 42px; padding: 0; border-radius: 50%; justify-content: center; }
.chat-write .btn svg { width: 17px; height: 17px; }

@media (max-width: 960px) {
    .todo-board { grid-template-columns: minmax(0, 1fr); }
    .tcol-body { max-height: none; }
    .chat-shell { grid-template-columns: minmax(0, 1fr); height: auto; }
    .chat-side { border-right: 0; border-bottom: 1px solid var(--line); }
    .chat-list { max-height: 300px; }
    .chat-main { min-height: 420px; }
}

.widget-all {
    margin-left: 10px; color: var(--brand); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.widget-all:hover { text-decoration: underline; }

/* ==========================================================================
   Calendar
   ========================================================================== */

.cal-shell {
    display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px;
    align-items: start;
}

.cal-side {
    position: relative; display: flex; flex-direction: column;
    padding: 16px 14px 120px; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--card); min-height: 520px;
}
.cal-filter-head {
    margin: 20px 0 8px; color: var(--muted);
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

/* A type, its colour, and whether it is on. */
.cal-type {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 2px; color: var(--body); font-size: 13px; font-weight: 500; cursor: pointer;
}
.cal-type input { position: absolute; opacity: 0; width: 0; height: 0; }
.cal-box {
    display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px;
    border: 2px solid var(--tone); border-radius: 5px; background: transparent;
    color: #fff; transition: background .12s;
}
.cal-box svg { width: 11px; height: 11px; opacity: 0; }
.cal-type input:checked + .cal-box { background: var(--tone); }
.cal-type input:checked + .cal-box svg { opacity: 1; }
.cal-type:hover { color: var(--ink); }

.cal-art {
    position: absolute; left: 0; right: 0; bottom: 14px;
    display: grid; place-items: center; color: var(--line); pointer-events: none;
}
.cal-art svg { width: 96px; height: 96px; }

.cal-main {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--card); overflow: hidden;
}

.cal-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.cal-bar h1 { margin: 0 0 0 8px; color: var(--ink); font-size: 20px; font-weight: 600; }
.cal-step {
    display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 8px; color: var(--body);
}
.cal-step svg { width: 16px; height: 16px; }
.cal-step:hover { background: var(--bg); color: var(--ink); }
.cal-today {
    margin-left: 6px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 20px;
    color: var(--brand); font-size: 12px; font-weight: 600;
}
.cal-today:hover { border-color: var(--brand); background: var(--brand-soft); }

.cal-views { display: flex; margin-left: auto; border: 1px solid var(--brand); border-radius: 8px; overflow: hidden; }
.cal-views a {
    padding: 7px 18px; color: var(--brand); font-size: 13px; font-weight: 500;
    border-right: 1px solid var(--brand);
}
.cal-views a:last-child { border-right: 0; }
.cal-views a:hover { background: var(--brand-soft); }
.cal-views a.on { background: #dbe7ff; color: #0b4fe0; font-weight: 600; }

/* The month grid ---------------------------------------------------------- */

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow {
    padding: 9px 6px; border-bottom: 1px solid var(--line);
    color: var(--ink); font-size: 12.5px; font-weight: 600; text-align: center;
}

.cal-cell {
    min-height: 118px; padding: 5px 5px 6px;
    border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.cal-cell:nth-child(7n + 7) { border-right: 0; }
.cal-cell.out { background: #f1f5f9; }
.cal-cell.now { background: #eaf1ff; }

.cal-num {
    display: block; padding: 1px 3px 4px; color: var(--body);
    font-size: 12px; font-weight: 500;
}
.cal-cell.out .cal-num { color: var(--muted); }
.cal-cell.now .cal-num { color: var(--ink); font-weight: 700; }
.cal-num:hover { color: var(--brand); }

.cal-chip {
    display: block; width: 100%; margin-bottom: 3px;
    padding: 3px 6px; border: 0; border-radius: 4px;
    background: color-mix(in srgb, var(--tone) 14%, #fff);
    color: var(--tone); font: inherit; font-size: 11.5px; font-weight: 500;
    text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer;
}
.cal-chip:hover { background: color-mix(in srgb, var(--tone) 26%, #fff); }
.cal-more { display: block; padding: 1px 4px; color: var(--body); font-size: 11px; font-weight: 500; }
.cal-more:hover { color: var(--brand); }

/* One day ----------------------------------------------------------------- */

.cal-day { max-height: calc(100vh - 250px); overflow-y: auto; }
.cal-day::-webkit-scrollbar { width: 6px; }
.cal-day::-webkit-scrollbar-thumb { background: #dbe2ea; border-radius: 20px; }
.cal-day-name {
    padding: 8px; border-bottom: 1px solid var(--line);
    color: var(--ink); font-size: 12.5px; font-weight: 600; text-align: center;
}
.cal-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); min-height: 44px; }
.cal-row.allday { background: #eaf1ff; min-height: 52px; }
.cal-hour {
    flex: 0 0 62px; padding: 4px 8px; border-right: 1px solid var(--line);
    color: var(--muted); font-size: 11.5px; text-align: right;
}
.cal-slot { flex: 1; min-width: 0; padding: 4px 8px; }
.cal-slot .cal-chip { padding: 5px 8px; font-size: 12px; }

/* The plain list ---------------------------------------------------------- */

.cal-list { max-height: calc(100vh - 250px); overflow-y: auto; }
.cal-list::-webkit-scrollbar { width: 6px; }
.cal-list::-webkit-scrollbar-thumb { background: #dbe2ea; border-radius: 20px; }
.cal-list-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 18px; background: var(--bg); border-bottom: 1px solid var(--line);
}
.cal-list-head b { color: var(--ink); font-size: 13px; font-weight: 600; }
.cal-list-head span { color: var(--ink); font-size: 13px; font-weight: 600; }
.cal-list-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 11px 18px; border: 0; border-bottom: 1px solid var(--line);
    background: none; color: var(--body); font: inherit; text-align: left; cursor: pointer;
}
.cal-list-row:hover { background: var(--bg); }
.cal-list-time { flex: 0 0 74px; color: var(--body); font-size: 12.5px; }
.cal-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
.cal-list-title {
    flex: 1; min-width: 0; color: var(--ink); font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-list-kind { flex: 0 0 auto; color: var(--muted); font-size: 11.5px; }

/* What one entry says. */
.peek-line {
    display: flex; align-items: baseline; gap: 12px;
    padding: 7px 0; border-bottom: 1px dashed var(--line);
}
.peek-line span {
    flex: 0 0 78px; color: var(--muted);
    font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
}
.peek-line b { flex: 1; min-width: 0; color: var(--ink); font-size: 13px; }
.peek-note {
    margin: 12px 0 0; color: var(--body); font-size: 13px;
    white-space: pre-line; word-break: break-word;
}
.peek-note:empty { display: none; }

/* ==========================================================================
   Notes
   ========================================================================== */

.note-table tbody tr { background: var(--card); }
.note-table tbody tr:hover { background: var(--bg); }
.note-table .link-name { white-space: normal; }
.td-act.danger { color: var(--red); }
.td-act.danger:hover { background: var(--red-soft); }

@media (max-width: 960px) {
    .cal-shell { grid-template-columns: minmax(0, 1fr); }
    .cal-side { min-height: 0; padding-bottom: 16px; }
    .cal-art { display: none; }
    .cal-cell { min-height: 92px; }
    .cal-chip { font-size: 10.5px; }
    .cal-bar h1 { font-size: 17px; }
}

/* Nothing behind an open overlay may move. */
html.is-locked, html.is-locked body { overflow: hidden; }

/* Dragging a lead from one stage to another. */
.lcard[draggable="true"] { cursor: grab; }
.lcard.dragging { opacity: .45; cursor: grabbing; }
.bcol.over .bcol-body { background: var(--brand-soft); outline: 2px dashed var(--brand); outline-offset: -3px; }

/* A discount typed as money or as a percentage. */
.disc-pair { display: flex; gap: 6px; }
.disc-pair input { width: 92px; height: 34px; min-height: 34px; }
.disc-pair select { width: 62px; height: 34px; min-height: 34px; padding: 0 20px 0 8px; background-position: right 5px center; background-size: 13px; }
.totals .line.soft span, .totals .line.soft b { color: var(--muted); font-size: 12.5px; font-weight: 500; }

/* The quick-add bar in the header ---------------------------------------- */

.topbar-quick { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.topbar-quick .qa { padding: 6px 11px; font-size: 12.5px; }
.topbar-quick .qa + .qa,
.topbar-quick .qa + a.qa { border-left: 1px solid var(--line); border-radius: 0 9px 9px 0; }

/* Where you are is in the sidebar; the header only says it on a phone. */
.topbar-where { display: none; }
/* With the adds moved into the header, what is left is a few small shortcuts
   - they do not need a card of their own. */
.quickbar.only-tools {
    justify-content: flex-end; padding: 0; margin-bottom: 12px;
    background: none; border: 0; box-shadow: none;
}

@media (max-width: 1100px) {
    .topbar-quick .qa { padding: 6px 8px; font-size: 0; gap: 0; }
    .topbar-quick .qa svg { width: 17px; height: 17px; }
}

@media (max-width: 820px) {
    /* The sidebar is behind the menu button here, so the header says where
       you are - and the quick-add stays, just as icons. */
    .topbar { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
    .topbar-where { display: block; font-size: 17px; }
    .topbar-quick { order: 3; width: 100%; justify-content: space-between; }
    .topbar-quick .qa + .qa, .topbar-quick .qa + a.qa { border-left: 0; border-radius: 9px; }
    .quickbar.only-tools { justify-content: center; }
}

/* Matching a file's columns to the fields they belong in. */
.import-found { margin: 0 0 14px; color: var(--body); font-size: 13px; }
.map-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.map-row { display: flex; align-items: center; gap: 10px; }
.map-row > span {
    flex: 0 0 132px; color: var(--ink); font-size: 12.5px; font-weight: 600;
}
.map-row .req { color: var(--red); font-style: normal; }
.map-row select { flex: 1; min-width: 0; height: 36px; min-height: 36px; font-size: 12.5px; }

.map-peek { margin-top: 16px; max-height: 190px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.map-peek table { font-size: 12px; }
.map-peek th {
    position: sticky; top: 0; z-index: 1;
    background: var(--bg); color: var(--ink); font-size: 11.5px; white-space: nowrap;
}
.map-peek td { white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 760px) {
    .map-grid { grid-template-columns: minmax(0, 1fr); }
    .map-row > span { flex-basis: 110px; }
}

/* ==========================================================================
   Customers
   ========================================================================== */

.cust-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap; border-bottom: 1px solid var(--line);
}
.cust-head .tabline { flex: 1; min-width: 0; border-bottom: 0; }
.tab-n {
    display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px;
    border-radius: 20px; background: var(--bg); color: var(--body);
    font-size: 10.5px; font-style: normal; font-weight: 700; text-align: center;
}
.tabline a.on .tab-n { background: var(--brand-soft); color: var(--brand); }

/* The row of things a bulk selection can be put through. */
.cust-tools { display: flex; align-items: center; gap: 6px; padding: 8px 14px 8px 0; flex-wrap: wrap; }
.tbtn {
    display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto;
    border: 1px solid var(--line); border-radius: 9px; background: var(--card);
    color: var(--brand); cursor: pointer; transition: border-color .15s, background .15s;
}
.tbtn svg { width: 16px; height: 16px; }
.tbtn:hover { border-color: var(--brand); background: var(--brand-soft); }
.tbtn.danger { color: var(--red); }
.tbtn.danger:hover { border-color: #fecaca; background: var(--red-soft); }
.tbtn.wa { color: #16a34a; }
.tbtn.wa:hover { border-color: #bbf7d0; background: var(--green-soft); }

.cust-table .pick { width: 34px; text-align: center; }
.cust-table .pick input { width: 15px; height: 15px; min-height: auto; margin: 0; cursor: pointer; }
.cust-table tbody tr { background: var(--card); }
.cust-table tbody tr:hover { background: var(--bg); }
.cust-table .soft { color: var(--body); }
.cust-table .caret-act svg { transition: transform .15s; }
.cust-table .caret-act.on svg { transform: rotate(90deg); }
.cust-table .row-acts { gap: 0; }

.td-act.warn { color: var(--amber); }
.td-act.warn:hover { background: var(--amber-soft); }
.td-act.good { color: var(--green); }
.td-act.good:hover { background: var(--green-soft); }
.td-act.pink { color: #db2777; }
.td-act.pink:hover { background: #fce7f3; }
.td-act.wa { color: #16a34a; }
.td-act.wa:hover { background: var(--green-soft); }

/* The country code sits beside the number rather than inside it. */
.phone-pair { display: flex; gap: 8px; }
.phone-cc {
    display: grid; place-items: center; flex: 0 0 auto; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
    color: var(--body); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.phone-pair input { flex: 1; min-width: 0; }

/* Sending a message to whoever is ticked. */
.send-who { margin: 0 0 14px; color: var(--body); font-size: 13px; }
.send-vars { margin-top: 14px; }
.send-vars b { display: block; margin-bottom: 7px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.send-vars div { display: flex; flex-wrap: wrap; gap: 6px; }
.var-chip {
    padding: 4px 9px; border: 1px solid var(--line); border-radius: 20px;
    background: var(--bg); color: var(--brand); font: inherit; font-size: 11.5px;
    font-weight: 600; cursor: pointer;
}
.var-chip:hover { border-color: var(--brand); background: var(--brand-soft); }

.send-links {
    margin-top: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--bg); max-height: 220px; overflow-y: auto;
}
.send-links b { display: block; margin-bottom: 8px; color: var(--ink); font-size: 12.5px; }
.send-link {
    display: inline-block; margin: 0 6px 6px 0; padding: 5px 11px;
    border-radius: 20px; background: var(--green-soft); color: #15803d;
    font-size: 12px; font-weight: 600;
}
.send-link:hover { background: #bbf7d0; }

.tag-new { margin-top: 14px; }
.tag-new summary { color: var(--brand); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tag-new .row { margin-top: 10px; grid-template-columns: 1fr auto auto; align-items: end; }
.tag-new input[type="color"] { width: 44px; height: 42px; padding: 3px; }

.trash-note { margin: 14px 0 0; color: var(--muted); font-size: 12.5px; }
.linky {
    padding: 0; border: 0; background: none; color: var(--brand);
    font: inherit; font-weight: 600; cursor: pointer;
}
.linky:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .cust-head { align-items: stretch; }
    .cust-tools { padding: 0 12px 10px; justify-content: flex-start; }
}

/* The two counters that sit at the end of the header bar. */
.topbar-marks {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--line);
}
.topbar-marks .tool { width: 32px; height: 32px; }
.topbar-marks .tool svg { width: 16px; height: 16px; }

@media (max-width: 820px) {
    .topbar-marks { margin-left: auto; padding-left: 0; border-left: 0; }
}

/* A form opened over a panel dims what is behind it a shade more, so the two
   layers read as one on top of the other rather than as one busy screen. */
.modal-backdrop.open ~ .modal-backdrop.open { background: rgba(15, 23, 42, .62); }

/* ==========================================================================
   Campaign
   ========================================================================== */

/* The on/off switch on a campaign row. */
.switch { display: inline-flex; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch span {
    position: relative; display: block; width: 38px; height: 20px;
    border-radius: 20px; background: #cbd5e1; transition: background .18s;
}
.switch span::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .25); transition: transform .18s;
}
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.switch.big span { width: 46px; height: 24px; }
.switch.big span::after { width: 20px; height: 20px; }
.switch.big input:checked + span::after { transform: translateX(22px); }

.camp-table tbody tr { background: var(--card); }
.camp-table tbody tr:hover { background: var(--bg); }
.camp-table .caret-act svg { transition: transform .15s; }
.camp-table .caret-act.on svg { transform: rotate(90deg); }
.camp-table .soft { color: var(--body); }

/* The three steps across the top of the form. */
.wiz {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--bg);
}
.wiz-step {
    display: flex; align-items: center; gap: 10px; flex: 1; min-width: 150px;
    padding: 8px 10px; border: 0; border-radius: 10px; background: none;
    font: inherit; text-align: left; cursor: pointer;
}
.wiz-step:hover { background: var(--card); }
.wiz-step b { display: block; color: var(--muted); font-size: 13px; }
.wiz-step small { display: block; color: var(--muted); font-size: 11px; }
.wiz-step.on b, .wiz-step.done b { color: var(--brand); }
.wiz-mark {
    display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 9px; background: #e2e8f0; color: var(--muted);
}
.wiz-mark svg { width: 17px; height: 17px; }
.wiz-step.on .wiz-mark { background: var(--brand); color: #fff; }
.wiz-step.done .wiz-mark { background: var(--brand-soft); color: var(--brand); }
.wiz-arrow { color: var(--muted); font-size: 18px; }

.wiz-pane { display: none; }
.wiz-pane.on { display: block; }
.wiz-rule { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.wiz-group { margin-bottom: 4px; }

.pick-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.pick-radio {
    display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 150px;
    justify-content: center; padding: 10px 14px;
    border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
    color: var(--body); font-size: 13px; font-weight: 600; transition: border-color .15s, background .15s;
}
.pick-radio:hover { border-color: var(--brand); }
.pick-radio input { width: 15px; height: 15px; min-height: auto; margin: 0; }
.pick-radio:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.pick-row .field { flex: 1 1 220px; min-width: 200px; margin: 0; }

.wiz-note {
    margin: 12px 0 0; padding: 12px 14px; border-radius: 10px;
    background: var(--red-soft); color: #b91c1c; font-size: 12.5px;
}
.wiz-note b { display: block; margin-bottom: 3px; }
.wiz-note.soft { background: var(--bg); color: var(--body); }
.wiz-note.soft:empty { display: none; }

.wiz-count {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line);
}
.wiz-count span { color: var(--body); font-size: 12.5px; }

.wiz-foot { display: flex; align-items: center; }
.wiz-spacer { flex: 1; }

@media (max-width: 760px) {
    .wiz-arrow { display: none; }
    .wiz-step { min-width: 0; flex: 1 1 100%; }
    .pick-radio { flex: 1 1 100%; }
}

/* ==========================================================================
   Accounting
   ========================================================================== */

/* The branch tiles the section opens on. */
.branch-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px; padding: 18px;
}
.branch-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; min-height: 120px; padding: 18px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--brand-soft);
    color: var(--brand); text-align: center; transition: border-color .15s, transform .15s;
}
.branch-tile:hover { border-color: var(--brand); transform: translateY(-1px); }
.branch-tile b { font-size: 15px; }
.branch-tile small { color: var(--body); font-size: 12px; }
.branch-add { background: var(--bg); color: var(--muted); font: inherit; cursor: pointer; }
.branch-add svg { width: 26px; height: 26px; }

/* The bar of screens across the top of a branch. */
.acc-bar {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-bottom: 16px; padding: 8px; border-radius: 12px;
    background: var(--card); box-shadow: var(--shadow);
}
.acc-tab {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 13px; border: 0; border-radius: 9px; background: none;
    color: var(--body); font: inherit; font-size: 13px; font-weight: 600;
    white-space: nowrap; cursor: pointer;
}
.acc-tab:hover { background: var(--bg); color: var(--ink); }
.acc-tab.on { background: var(--brand); color: #fff; }
.acc-tab svg { width: 14px; height: 14px; }
.acc-bar-spacer { flex: 1; }
.acc-tab-back { color: var(--muted); }

.acc-tab-drop { position: relative; }
.acc-tab-menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
    min-width: 160px; padding: 6px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--card); box-shadow: var(--shadow-lg);
}
.acc-tab-drop:hover .acc-tab-menu, .acc-tab-drop:focus-within .acc-tab-menu { display: block; }
.acc-tab-menu a { display: block; padding: 8px 10px; border-radius: 7px; color: var(--body); font-size: 13px; }
.acc-tab-menu a:hover { background: var(--bg); color: var(--ink); }

.acc-where { display: flex; align-items: baseline; gap: 10px; margin: -6px 0 14px; padding: 0 4px; }
.acc-where b { color: var(--ink); font-size: 14px; }
.acc-where span { color: var(--muted); font-size: 12px; }

/* The two-pane screens: a list on the left, what it is about on the right. */
.acc-two { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.acc-list { overflow: hidden; }
.acc-detail { min-height: 320px; }
.acc-filters { padding: 14px 16px 0; }
.acc-filters .field { margin-bottom: 12px; }
.acc-search { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.acc-search input { flex: 1; min-width: 0; }
.acc-list .ltable tr.is-open { background: var(--brand-soft); }
.acc-list .ltable tr.is-open a { color: var(--brand); font-weight: 600; }

.acc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 18px; margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.acc-facts dt { color: var(--muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.acc-facts dd { margin: 3px 0 0; color: var(--ink); font-size: 13.5px; }

.acc-big { font-size: 20px; font-weight: 700; }
.is-up { color: var(--green); }
.is-down { color: var(--red); }

/* Cash and bank, across the top of the dashboard. */
.cash-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; padding: 18px; }
.cash-card { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.cash-card:hover { border-color: var(--brand); }
.cash-mark { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: var(--green-soft); color: #15803d; font-weight: 700; }
.cash-card b { display: block; color: var(--ink); font-size: 16px; }
.cash-card small { color: var(--muted); font-size: 12px; }

.acc-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.acc-range { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 14px 20px 0; }
.acc-range .field { margin-bottom: 0; flex: 1 1 140px; min-width: 130px; }

.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 18px 20px; }
.donut { position: relative; width: 132px; height: 132px; flex: 0 0 132px; border-radius: 50%; }
.donut::after { content: ''; position: absolute; inset: 26px; border-radius: 50%; background: var(--card); }
.donut span { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; color: var(--ink); font-size: 20px; font-weight: 700; }
.donut-keys { flex: 1; min-width: 180px; margin: 0; padding: 0; list-style: none; }
.donut-keys li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.5px; }
.donut-keys i { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 3px; }
.donut-keys span { flex: 1; color: var(--body); }
.donut-keys b { color: var(--ink); }
.donut-keys small { width: 46px; text-align: right; color: var(--muted); }

.bar-list { margin: 0; padding: 14px 20px 20px; list-style: none; }
.bar-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 12.5px; }
.bar-list span { width: 130px; flex: 0 0 130px; color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-list i { flex: 1; height: 8px; min-width: 2px; border-radius: 4px; background: var(--brand); }
.bar-list b { color: var(--ink); }

.month-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); }
.month-cell { padding: 16px 18px; background: var(--card); }
.month-cell small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.month-cell b { display: block; margin-top: 5px; color: var(--ink); font-size: 17px; }

/* The chart of accounts, in its three columns. */
.acc-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.acc-column-head { padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--brand-soft); color: var(--brand); font-size: 13px; font-weight: 700; text-align: center; }
.acc-group { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.acc-group:last-child { border-bottom: 0; }
.acc-group-name { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.acc-group-name b { color: var(--ink); font-size: 13px; }
.acc-group-empty { margin: 0; color: var(--muted); font-size: 12px; }
.acc-row { display: flex; align-items: center; gap: 8px; padding: 6px 0 6px 12px; font-size: 12.5px; }
.acc-row a { flex: 1; color: var(--body); }
.acc-row a:hover { color: var(--brand); }
.acc-row span { color: var(--ink); }

/* A journal voucher and its lines. */
.jv-line { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.jv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 16px; }
.jv-sum { color: var(--green); font-size: 12.5px; font-weight: 600; }
.jv-sum.is-off { color: var(--red); }

.form-part { margin: 18px 0 10px; color: var(--ink); font-size: 13px; }
.split-field { display: flex; gap: 6px; }
.split-field input { flex: 1; min-width: 0; }
.split-field select { width: 72px; flex: 0 0 72px; }

.pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.pager .is-off { opacity: .4; pointer-events: none; }

@media (max-width: 1100px) {
    .acc-two { grid-template-columns: minmax(0, 1fr); }
    .acc-columns, .acc-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .jv-line { grid-template-columns: minmax(0, 1fr); }
    .donut { margin: 0 auto; }
}

/* Pieces the accounting screens borrow that nothing else had needed yet. */
.modal-wide { max-width: 860px; }
.modal-sm { max-width: 440px; }

.tabs button.tab {
    padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line); background: #fff;
    color: var(--body); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.tabs button.tab.on { background: var(--brand); border-color: var(--brand); color: #fff; }

.td-act.is-danger { color: var(--red); }
.td-act.is-danger:hover { background: var(--red-soft); }

.card-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }

/* The small cross that closes a branch nobody has used yet. */
.branch-holder { position: relative; }
.branch-holder .branch-tile { width: 100%; }
.branch-x {
    position: absolute; top: 6px; right: 6px;
    width: 24px; height: 24px; display: grid; place-items: center;
    border: 0; border-radius: 50%; background: none;
    color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer;
    opacity: 0; transition: opacity .15s, background .15s, color .15s;
}
.branch-holder:hover .branch-x { opacity: 1; }
.branch-x:hover { background: var(--red-soft); color: var(--red); }

/* ==========================================================================
   HR
   ========================================================================== */

/* A status that can be changed without leaving the row. */
.mini-select {
    height: 30px; padding: 0 26px 0 10px; min-height: 0;
    border: 1px solid var(--line); border-radius: 8px; background-color: #fff;
    font-size: 12.5px;
}
.mini-select:disabled { opacity: .55; }

/* The address of the punch screen, ready to be copied onto a tablet. */
.kiosk-link { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 20px 20px; }
.kiosk-link input {
    flex: 1 1 320px; min-width: 0; height: 42px; padding: 0 12px;
    border: 1px dashed var(--line); border-radius: 10px; background: var(--bg);
    color: var(--body); font-size: 13px;
}

/* The figures across the top of the attendance report. */
.hr-tiles {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px; margin-bottom: 18px; border-radius: var(--radius); overflow: hidden;
    background: var(--line); box-shadow: var(--shadow);
}
.hr-tile { padding: 16px 18px; background: var(--card); }
.hr-tile b { display: block; color: var(--ink); font-size: 17px; }
.hr-tile small { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

.check-line { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; cursor: pointer; font-size: 13.5px; color: var(--body); }
.check-line input { width: 16px; height: 16px; min-height: auto; margin: 0; }

/* ==========================================================================
   The punch screen at the door
   ========================================================================== */

.punch-screen {
    display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 24px; align-items: start; max-width: 1000px; margin: 0 auto; padding: 32px 20px;
}
.punch-card { padding: 28px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.punch-head { margin-bottom: 22px; text-align: center; }
.punch-head b { display: block; color: var(--ink); font-size: 17px; }
.punch-head span { display: block; margin: 6px 0 2px; color: var(--brand); font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
.punch-head small { color: var(--muted); font-size: 12.5px; }
.punch-go { width: 100%; height: 48px; font-size: 15px; }
.punch-note { margin: 16px 0 0; color: var(--muted); font-size: 12px; text-align: center; }

.punch-list { padding: 24px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.punch-list h2 { margin: 0 0 14px; color: var(--ink); font-size: 15px; }
.punch-list ul { margin: 0; padding: 0; list-style: none; }
.punch-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.punch-list li:first-child { border-top: 0; }
.punch-list li b { flex: 1; color: var(--ink); font-weight: 600; }
.punch-list li small { color: var(--muted); font-size: 12px; }
.punch-list li span:last-child { min-width: 62px; text-align: right; color: var(--body); }
.punch-empty { margin: 0; color: var(--muted); font-size: 13px; }
.punch-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--muted); }
.punch-dot.is-in { background: var(--green); }

@media (max-width: 820px) {
    .punch-screen { grid-template-columns: minmax(0, 1fr); padding: 20px 16px; }
}

/* ==========================================================================
   Invoicing
   ========================================================================== */

/* A cancelled bill stays on the list, but reads as spent. */
.ltable tr.is-void td { opacity: .55; }
.ltable tr.is-void b { text-decoration: line-through; }

.in-words {
    margin: 16px 0 0; padding: 10px 14px; border-radius: 10px;
    background: var(--bg); color: var(--body); font-size: 12.5px;
}
.in-words b { color: var(--ink); }

.pay-to {
    margin-top: 14px; padding: 12px 14px;
    border: 1px dashed var(--line); border-radius: 10px;
}
.pay-to b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 12.5px; }
.pay-to p { margin: 0; color: var(--body); font-size: 12.5px; }

/* ==========================================================================
   Sidebar sections that fold away
   ========================================================================== */

.nav-parent {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 9px 12px; margin-bottom: 2px;
    border: 0; border-radius: 9px; background: none;
    color: #cbd5e1; font: inherit; font-size: 13.5px; font-weight: 500;
    text-align: left; cursor: pointer;
    transition: background .12s, color .12s;
}
.nav-parent:hover { background: rgba(148, 163, 184, .12); color: #fff; }
.nav-parent.lit { color: #fff; }
.nav-parent svg { width: 17px; height: 17px; flex: 0 0 17px; }
.nav-parent span { flex: 1; }

.nav-caret { transition: transform .15s; opacity: .7; }
.nav-tree.open .nav-caret { transform: rotate(90deg); }

/* The children sit in a lane of their own, so at a glance you can see
   which of them belong to the section above. */
.nav-kids { display: none; margin: 0 0 4px 21px; padding-left: 10px; border-left: 1px solid rgba(148, 163, 184, .22); }
.nav-tree.open .nav-kids { display: block; }
.sidebar-nav .nav-kids a { padding: 7px 10px; font-size: 13px; }

/* A line under a report saying how to read it without being misled. */
.report-note {
    margin: 16px 0 0; padding: 12px 14px; border-radius: 10px;
    background: var(--bg); color: var(--body); font-size: 12.5px; line-height: 1.55;
}

/* ==========================================================================
   The menu: its head, its narrow state, and a scrollbar that keeps quiet
   ========================================================================== */

.sidebar-top { display: flex; align-items: center; gap: 6px; padding-right: 10px; }
.sidebar-top .sidebar-brand { flex: 1; min-width: 0; }

.rail-toggle {
    display: grid; place-items: center; flex: 0 0 30px;
    width: 30px; height: 30px; padding: 0;
    border: 1px solid rgba(148, 163, 184, .2); border-radius: 9px;
    background: rgba(148, 163, 184, .08); color: #94a3b8;
    cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.rail-toggle:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.rail-toggle svg { width: 17px; height: 17px; }
.rail-arrow { transition: transform .2s; transform-origin: 14px 12px; }

/* A scrollbar that is there when it is needed and invisible when it is not.

   The two ways of asking do not stack: once a browser understands
   scrollbar-width it stops listening to the ::-webkit- rules, and its idea
   of "thin" is still thirteen pixels. So the exact rules come first, and
   the standard property is kept in reserve for browsers that need it. */
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .28); border-radius: 20px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, .5); }

@supports not selector(::-webkit-scrollbar) {
    .sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, .35) transparent; }
}

/* ---- Narrowed down to its icons ---- */

.shell.rail { --sidebar: 68px; }
.shell.rail .brand-word,
.shell.rail .sidebar-nav .group,
.shell.rail .sidebar-nav a span:not(.mark),
.shell.rail .nav-parent span,
.shell.rail .nav-caret,
.shell.rail .sidebar-foot a span { display: none; }

.shell.rail .sidebar-top { padding-right: 0; flex-direction: column; gap: 8px; }
.shell.rail .sidebar-brand { justify-content: center; padding: 14px 0 0; }
.shell.rail .rail-arrow { transform: rotate(180deg); }

.shell.rail .sidebar-nav { padding: 0 10px 16px; }
.shell.rail .sidebar-nav > a,
.shell.rail .nav-parent { justify-content: center; padding: 11px 0; gap: 0; }

/* A section that folds away has nowhere to fold to once the words are gone,
   so its children ride up as icons of their own. */
.shell.rail .nav-kids { display: block; margin: 0; padding: 0; border-left: 0; }
.shell.rail .nav-kids a { justify-content: center; padding: 9px 0; font-size: 0; }
.shell.rail .nav-kids a::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; opacity: .55;
}
.shell.rail .nav-kids a.active::before { opacity: 1; }

.shell.rail .sidebar-foot { padding: 12px 0; text-align: center; }
.shell.rail .sidebar-foot a { justify-content: center; }

/* The label comes back as a tooltip, so nothing is actually lost.

   It hangs off <body> rather than off the item, because the menu is a
   scrolling box and anything drawn inside one is cut off at its edge.
   app.js places it; this only says what it looks like. */
.rail-tip {
    position: fixed; z-index: 90; padding: 6px 11px; border-radius: 9px;
    background: #0f172a; color: #fff; font-size: 12.5px; font-weight: 500;
    white-space: nowrap; box-shadow: var(--shadow-lg);
    opacity: 0; pointer-events: none;
    transform: translateY(-50%) translateX(-5px);
    transition: opacity .13s ease, transform .13s ease;
}
.rail-tip::before {
    content: ''; position: absolute; right: 100%; top: 50%;
    margin-top: -4px; border: 4px solid transparent; border-right-color: #0f172a;
}
.rail-tip.on { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Below this the menu is a drawer that slides in, so there is nothing to
   narrow - and leaving the narrow state on would strand somebody who set it
   on a wide screen with no button to undo it. */
@media (max-width: 1000px) {
    .rail-toggle { display: none; }
    .shell.rail { --sidebar: 248px; }
    .shell.rail .nav-kids { display: none; margin: 0 0 4px 21px; padding-left: 10px; border-left: 1px solid rgba(148, 163, 184, .22); }
    .shell.rail .nav-tree.open .nav-kids { display: block; }
    .shell.rail .sidebar-nav > a,
    .shell.rail .nav-parent,
    .shell.rail .nav-kids a { justify-content: flex-start; }
    .shell.rail .sidebar-brand { justify-content: flex-start; }
    .shell.rail .brand-word,
    .shell.rail .sidebar-nav .group,
    .shell.rail .sidebar-nav a span:not(.mark),
    .shell.rail .nav-parent span,
    .shell.rail .nav-caret,
    .shell.rail .sidebar-foot a span { display: revert; }
    .shell.rail .sidebar-top { flex-direction: row; padding-right: 10px; }
    .shell.rail .sidebar-nav { padding: revert; }
    .shell.rail .sidebar-nav > a,
    .shell.rail .nav-parent { padding: revert; gap: revert; }
    .shell.rail .sidebar-nav .nav-kids a { padding: 7px 10px; }
    .shell.rail .sidebar-foot { padding: revert; text-align: revert; }
    .shell.rail .sidebar-foot a { justify-content: revert; }
    .shell.rail .rail-arrow { transform: none; }
    .shell.rail .nav-kids a { font-size: revert; }
    .shell.rail .nav-kids a::before { content: none; }
}

/* ==========================================================================
   Storage
   ========================================================================== */

.store-head { display: flex; align-items: center; gap: 16px; padding: 18px 22px; }
.store-head h1 { margin: 0; font-size: 19px; }
.store-head p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.store-mark {
    display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px;
    border-radius: 12px; background: var(--brand-soft); color: var(--brand);
}
.store-mark svg { width: 22px; height: 22px; }

.store-top { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 24px; }
.store-ring { position: relative; width: 132px; height: 132px; flex: 0 0 132px; border-radius: 50%; }
.store-ring::after { content: ''; position: absolute; inset: 15px; border-radius: 50%; background: var(--card); }
.store-ring span { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; text-align: center; }
.store-ring b { display: block; color: var(--ink); font-size: 21px; font-weight: 700; }
.store-ring small { color: var(--muted); font-size: 11.5px; }

.store-figures { flex: 1; min-width: 260px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.store-figure { display: flex; align-items: center; gap: 12px; }
.store-figure b { display: block; color: var(--ink); font-size: 16px; }
.store-figure small { color: var(--muted); font-size: 12px; }

.store-icon {
    display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px;
    border-radius: 10px; background: var(--bg); color: var(--body);
}
.store-icon svg { width: 18px; height: 18px; }
.store-icon.blue { background: var(--blue-soft); color: var(--blue); }
.store-icon.green { background: var(--green-soft); color: var(--green); }
.store-icon.amber { background: var(--amber-soft); color: var(--amber); }
.store-icon.brand { background: var(--brand-soft); color: var(--brand); }

.store-split { padding: 18px 20px 22px; }
.store-bar { display: flex; height: 12px; border-radius: 20px; overflow: hidden; background: var(--line); }
.store-bar i { display: block; height: 100%; }
.store-key { display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0 0; padding: 0; list-style: none; }
.store-key li { display: flex; align-items: center; gap: 7px; color: var(--body); font-size: 12.5px; }
.store-key i { width: 10px; height: 10px; border-radius: 3px; }
.store-key b { color: var(--ink); }

.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; padding: 18px 20px 22px; }
.store-tile { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.store-tile b { display: block; color: var(--ink); font-size: 13.5px; }
.store-tile small { color: var(--muted); font-size: 12px; }
.store-tile.is-empty { opacity: .55; }

/* ==========================================================================
   Settings - the screens a company fills in once
   ========================================================================== */

.set-tabs { margin-bottom: 18px; flex-wrap: wrap; }
.set-tabs a.tab {
    padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line); background: #fff;
    color: var(--body); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.set-tabs a.tab.on { background: var(--brand); border-color: var(--brand); color: #fff; }

.inline-form { display: inline; }
.inline-form + .inline-form { margin-left: 2px; }

.ltable td.soft, .soft { color: var(--muted); }
.ltable .row-sub { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; font-weight: 400; }
.row-icon { display: inline-block; width: 20px; }

/* A round of colour, so a list of names is also a list at a glance. */
.dot-chip {
    display: inline-block; width: 9px; height: 9px; margin-right: 7px;
    border-radius: 50%; vertical-align: middle;
}

.lbl { display: block; margin-bottom: 6px; color: var(--ink); font-size: 13px; font-weight: 500; }

.logo-row { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.logo-box {
    display: grid; place-items: center; flex: 0 0 72px; width: 72px; height: 72px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--bg); overflow: hidden;
}
.logo-box img { width: 100%; height: 100%; object-fit: contain; }
.logo-box span { color: var(--brand); font-size: 26px; font-weight: 700; }

.dial-row { display: flex; gap: 8px; }
.dial-row .dial { flex: 0 0 64px; text-align: center; }

/* A one-line form that sits inside a card rather than filling it. */
.ip-add { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.ip-add input, .ip-add select { width: auto; min-width: 150px; }
.ip-add .soft { font-size: 13px; }

/* ---- Rating rules ---- */

.rule-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px; margin-top: 18px;
}
.rule { padding: 14px; border: 1px solid var(--line); border-radius: 12px; text-align: center; }
.rule-stars { margin-bottom: 10px; color: var(--line); font-size: 15px; letter-spacing: 1px; }
.rule-stars .lit { color: var(--amber); }
.rule-range { display: flex; align-items: center; justify-content: center; gap: 7px; }
.rule-range input { width: 62px; padding: 7px 8px; text-align: center; }
.rule-range span { color: var(--muted); font-size: 12px; }
.rule small { display: block; margin-top: 7px; color: var(--muted); font-size: 11.5px; }

/* ---- Invoice designs ---- */

.design-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px; padding: 18px 20px 22px;
}
.design {
    display: block; padding: 12px; border: 1px solid var(--line); border-radius: 12px;
    cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.design:hover { border-color: var(--brand); }
.design.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.design input { position: absolute; opacity: 0; pointer-events: none; }
.design b { display: block; margin-top: 10px; color: var(--ink); font-size: 13px; }
.design small { color: var(--muted); font-size: 11.5px; }

/* A sketch of the layout rather than a picture of one - three bars is
   enough to tell the five designs apart without loading five images. */
.design-art {
    display: block; height: 66px; padding: 9px; border-radius: 9px;
    background: var(--bg); border: 1px solid var(--line);
}
.design-art i { display: block; height: 6px; border-radius: 3px; background: #cbd5e1; }
.design-art i + i { margin-top: 6px; }
.design-classic i:first-child { width: 45%; background: var(--brand); }
.design-bold i:first-child { width: 100%; height: 14px; background: var(--brand); }
.design-compact i { height: 4px; }
.design-compact i + i { margin-top: 4px; }
.design-soft i { height: 5px; background: #e2e8f0; }
.design-soft i:first-child { width: 60%; background: var(--brand); opacity: .55; }
.design-stamp i:first-child { width: 30%; height: 20px; margin-left: auto; background: var(--brand); opacity: .35; }

/* ---- Targets ---- */

.goal-bar { height: 8px; border-radius: 20px; background: var(--line); overflow: hidden; }
.goal-bar i { display: block; height: 100%; transition: width .2s; }

@media (max-width: 800px) {
    .rule-grid, .design-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .logo-row { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Automation - a canvas of its own
   ========================================================================== */

.flow-shell { display: flex; flex-direction: column; height: 100vh; background: var(--bg); }

/* ---- the bar across the top ---- */

.flow-bar {
    display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
    padding: 0 18px; height: 58px;
    background: var(--card); border-bottom: 1px solid var(--line);
}

.flow-back {
    display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px;
    border-radius: 9px; color: var(--muted); transition: background .15s, color .15s;
}
.flow-back:hover { background: var(--bg); color: var(--ink); }
.flow-back svg { width: 17px; height: 17px; }

.flow-name { flex: 1; min-width: 0; }
.flow-name input {
    width: 100%; max-width: 420px; padding: 6px 10px;
    border: 1px solid transparent; border-radius: 9px; background: transparent;
    color: var(--ink); font-size: 15px; font-weight: 700;
}
.flow-name input:hover { border-color: var(--line); }
.flow-name input:focus { border-color: var(--brand); background: var(--card); outline: none; }

.flow-chip {
    padding: 4px 10px; border-radius: 20px; background: var(--brand-soft);
    color: var(--brand); font-size: 11.5px; font-weight: 700;
}

.flow-bar-right { display: flex; align-items: center; gap: 14px; }
.flow-live { display: flex; align-items: center; gap: 8px; }
.flow-live span { color: var(--muted); font-size: 12.5px; font-weight: 600; }

/* The switch is the submit button, so one press is one act. */
.switch-track.as-btn { flex: 0 0 38px; border: 0; padding: 0; cursor: pointer; }
.switch-track.as-btn.on { background: var(--green); }
.switch-track.as-btn.on::after { transform: translateX(16px); }

/* ---- the canvas ---- */

.flow-canvas {
    flex: 1; min-height: 0; overflow: auto; padding: 34px 20px 120px;
    background-color: var(--bg);
    background-image: radial-gradient(rgba(148, 163, 184, .34) 1px, transparent 1px);
    background-size: 22px 22px;
}

.flow-track { display: flex; flex-direction: column; align-items: center; min-width: min-content; }

/* ---- a card ---- */

.flow-node { display: flex; flex-direction: column; align-items: center; }

.node {
    position: relative; width: 380px; overflow: hidden;
    border: 1px solid var(--line); border-radius: 14px; background: var(--card);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 16px rgba(15, 23, 42, .04);
    transition: box-shadow .15s, border-color .15s;
}
.flow-node.is-wide .node { width: 460px; }
.node:hover { border-color: #cbd5e1; box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 12px 26px rgba(15, 23, 42, .07); }
.node.is-open { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* The stripe down the left says what sort of card this is without a word. */
.node::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--tone, var(--brand));
}

[data-tone="fire"] { --tone: #2563eb; --tone-soft: #dbeafe; }
[data-tone="act"]  { --tone: #6d28d9; --tone-soft: #ede9fe; }
[data-tone="ask"]  { --tone: #d97706; --tone-soft: #fef3c7; }
[data-tone="fan"]  { --tone: #0891b2; --tone-soft: #cffafe; }
[data-tone="hold"] { --tone: #64748b; --tone-soft: #e2e8f0; }
[data-tone="end"]  { --tone: #dc2626; --tone-soft: #fee2e2; }

.node-head {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 13px 14px 13px 18px; border: 0; background: none;
    font: inherit; text-align: left; cursor: pointer;
}

.node-grip {
    flex: 0 0 10px; height: 16px; opacity: .45;
    background-image: radial-gradient(currentColor 1.1px, transparent 1.1px);
    background-size: 5px 5px; color: #94a3b8;
}

.node-icon {
    display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px;
    border-radius: 9px; background: var(--tone-soft, var(--brand-soft)); color: var(--tone, var(--brand));
}
.node-icon svg { width: 16px; height: 16px; }

.node-text { flex: 1; min-width: 0; }
.node-text small {
    display: block; color: var(--tone, var(--muted));
    font-size: 9.5px; font-weight: 800; letter-spacing: .9px;
}
.node-text b { display: block; margin-top: 1px; color: var(--ink); font-size: 14px; }
.node-text em {
    display: block; margin-top: 2px; color: var(--muted);
    font-size: 12px; font-style: normal;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.node-chev { flex: 0 0 18px; color: #94a3b8; transition: transform .18s; }
.node-chev svg { width: 18px; height: 18px; display: block; }
.node.is-open .node-chev { transform: rotate(180deg); }

.node-body { padding: 4px 16px 14px 18px; border-top: 1px solid var(--line); }
.node-body[hidden] { display: none; }
.node-body .field { margin-bottom: 12px; }
.node-body label { font-size: 12px; }
.node-body .row, .node-body .row-3 { gap: 0 12px; }

.node-foot { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.node-moves { display: flex; gap: 4px; margin-right: auto; }
.node-move {
    display: grid; place-items: center; width: 28px; height: 28px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--card);
    color: var(--muted); cursor: pointer;
}
.node-move:hover { border-color: var(--brand); color: var(--brand); }
.node-move svg { width: 14px; height: 14px; }

.node-kill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border: 0; border-radius: 8px;
    background: var(--red-soft); color: var(--red);
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.node-kill:hover { background: #fecaca; }
.node-kill svg { width: 14px; height: 14px; }

/* Placeholder chips under a message box. */
.chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.chip-tag {
    padding: 3px 8px; border: 1px solid var(--line); border-radius: 20px;
    background: var(--bg); color: var(--body);
    font: inherit; font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    cursor: pointer;
}
.chip-tag:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }

/* ---- the thread between cards ---- */

.flow-join { display: flex; justify-content: center; height: 16px; }
.flow-join i { display: block; width: 2px; height: 100%; background: #cbd5e1; }

.flow-plus {
    display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
    border: 1px solid #cbd5e1; border-radius: 50%; background: var(--card);
    color: #94a3b8; font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
    transition: border-color .15s, color .15s, background .15s, transform .15s;
}
.flow-plus:hover {
    border-color: var(--brand); color: var(--brand);
    background: var(--brand-soft); transform: scale(1.12);
}
.flow-plus.is-main { width: 28px; height: 28px; font-size: 17px; }

.flow-tail { width: 2px; height: 22px; margin-top: 6px; background: linear-gradient(#cbd5e1, transparent); }

/* ---- one point, several paths ---- */

.flow-fan { width: 100%; --leg: 372px; }

.flow-rail { position: relative; height: 30px; }
.flow-rail-stem {
    position: absolute; left: 50%; top: 0; width: 2px; height: 16px;
    margin-left: -1px; background: #cbd5e1;
}
.flow-rail-bar {
    position: absolute;
    left: calc(50% - (var(--legs) - 1) * var(--leg) / 2);
    right: calc(50% - (var(--legs) - 1) * var(--leg) / 2);
    top: 15px; height: 2px; background: #cbd5e1; border-radius: 2px;
}

.flow-legs {
    display: grid; grid-template-columns: repeat(var(--legs), var(--leg));
    justify-content: center;
}

.flow-leg { display: flex; flex-direction: column; align-items: center; }

/* A card inside a path is narrower, so three of them side by side still
   read as three rather than as one long wall. */
.flow-leg .node, .flow-leg .flow-node.is-wide .node { width: 320px; }
.flow-leg-drop { display: block; width: 2px; height: 14px; background: #cbd5e1; }
.flow-leg-name {
    margin: 6px 0 2px; padding: 3px 11px; border-radius: 20px;
    font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
}
.flow-leg[data-leg="yes"] .flow-leg-name { background: var(--green-soft); color: #15803d; }
.flow-leg[data-leg="no"] .flow-leg-name { background: var(--red-soft); color: var(--red); }
.flow-leg[data-leg^="p"] .flow-leg-name { background: #cffafe; color: #0e7490; }

/* ---- the step picker ---- */

.pick {
    position: absolute; z-index: 70; width: 330px;
    border: 1px solid var(--line); border-radius: 13px; background: var(--card);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
    overflow: hidden; animation: pop .12s ease-out;
}
.pick[hidden] { display: none; }

.pick-search { padding: 10px; border-bottom: 1px solid var(--line); }
.pick-search input { width: 100%; padding: 8px 11px; font-size: 13px; }

.pick-list { max-height: 330px; overflow-y: auto; padding: 6px; }
.pick-list::-webkit-scrollbar { width: 6px; }
.pick-list::-webkit-scrollbar-thumb { background: #dbe2ea; border-radius: 20px; }

.pick-one {
    display: flex; align-items: flex-start; gap: 10px; width: 100%;
    padding: 9px 10px; border: 0; border-radius: 9px; background: none;
    font: inherit; text-align: left; cursor: pointer;
}
.pick-one[hidden] { display: none; }
.pick-one:hover { background: var(--bg); }
.pick-one b { display: block; color: var(--ink); font-size: 13px; }
.pick-one small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.45; }

.pick-icon {
    display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px;
    border-radius: 8px; background: var(--tone-soft, var(--bg)); color: var(--tone, var(--muted));
}
.pick-icon svg { width: 15px; height: 15px; }

/* ---- the runs drawer ---- */

.flow-side {
    position: fixed; right: 0; top: 58px; bottom: 0; width: 390px; z-index: 40;
    display: flex; flex-direction: column;
    background: var(--card); border-left: 1px solid var(--line);
    box-shadow: -14px 0 34px rgba(15, 23, 42, .08);
    transform: translateX(100%); transition: transform .2s ease;
}
.flow-shell.side-open .flow-side { transform: translateX(0); }

.flow-side-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.flow-side-head b { color: var(--ink); font-size: 14px; }
.flow-side-body { flex: 1; overflow-y: auto; padding: 16px 18px 28px; }

.flow-side-tab {
    position: fixed; right: 0; top: 96px; z-index: 30;
    display: flex; align-items: center; gap: 7px;
    padding: 9px 14px 9px 12px; border: 1px solid var(--line); border-right: 0;
    border-radius: 11px 0 0 11px; background: var(--card);
    color: var(--body); font: inherit; font-size: 12.5px; font-weight: 600;
    cursor: pointer; box-shadow: -4px 0 14px rgba(15, 23, 42, .06);
}
.flow-side-tab:hover { color: var(--brand); }
.flow-side-tab svg { width: 15px; height: 15px; }
.flow-shell.side-open .flow-side-tab { display: none; }

.flow-warn {
    margin-bottom: 14px; padding: 11px 13px; border-radius: 10px;
    background: var(--amber-soft); color: #92400e; font-size: 12.5px; line-height: 1.6;
}
.flow-warn a { color: #92400e; font-weight: 700; text-decoration: underline; }

.flow-try { margin-bottom: 18px; }
.flow-try > label { display: block; margin-bottom: 7px; color: var(--ink); font-size: 12.5px; font-weight: 600; }
.flow-try-row { display: flex; gap: 8px; }
.flow-try-row input { flex: 1; }

.rule-run { padding: 12px 0; border-bottom: 1px solid var(--line); }
.rule-run:last-child { border-bottom: 0; }
.rule-run-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rule-run-head b { color: var(--ink); font-size: 13px; }
.rule-run-head small { color: var(--muted); font-size: 11.5px; }
.rule-log {
    margin: 8px 0 0; padding: 9px 11px; border-radius: 9px; background: var(--bg);
    color: var(--body); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word;
}

/* ---- the list page ---- */

.rule-start { text-align: left; border: 1px solid var(--line); background: var(--card); cursor: pointer; font: inherit; }
.rule-start:hover { border-color: var(--brand); box-shadow: 0 8px 20px rgba(20, 99, 255, .1); }

@media (max-width: 1000px) {
    .flow-fan { --leg: 300px; }
    .node, .flow-node.is-wide .node { width: 280px; }
    .flow-side { width: 100%; }
}

/* ==========================================================================
   The public site - phone first, then tablet, then desk
   ========================================================================== */

.site { background: var(--card); }

.btn-lg { height: 48px; padding: 0 26px; font-size: 15px; border-radius: 12px; }
.btn-ghost { border: 1px solid var(--line); }
.btn-white { background: #fff; color: var(--brand); }
.btn-white:hover { background: #fff; color: var(--brand-dark); box-shadow: 0 10px 26px rgba(15, 23, 42, .22); }
.btn-clear { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .45); }
.btn-clear:hover { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }

.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* Things arrive once, gently, the first time they are scrolled to. */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; transition-delay: var(--wait, 0ms); }
.rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .rise { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------- the bar */

.site-bar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 16px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s, box-shadow .2s;
}
.site-bar.is-down { border-bottom-color: var(--line); box-shadow: 0 1px 14px rgba(15, 23, 42, .05); }

.site-brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; color: var(--ink); }
.site-brand .mark {
    display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px;
    border-radius: 9px; background: var(--grad-mark);
    color: #fff; font-size: 16px; font-weight: 900;
}

.site-links { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.site-links > a {
    padding: 8px 14px; border-radius: 9px;
    color: var(--body); font-size: 14px; font-weight: 600;
    transition: background .15s, color .15s;
}
.site-links > a:hover { background: var(--bg); color: var(--ink); }
.site-links > a.on { color: var(--brand); }
.site-links-cta { display: flex; align-items: center; gap: 8px; margin-left: 12px; }

.site-burger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 0 9px; margin-left: auto;
    border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer;
}
.site-burger span { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
.site-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-burger.open span:nth-child(2) { opacity: 0; }
.site-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------- the top */

.hero2 { position: relative; overflow: hidden; padding: 56px 0 0; background: linear-gradient(180deg, #f3f7ff 0%, #eef4ff 40%, var(--card) 100%); }
.hero2::before {
    content: ''; position: absolute; inset: -40% 30% auto -20%; height: 620px;
    background: radial-gradient(closest-side, rgba(20, 99, 255, .18), transparent);
    pointer-events: none;
}
.hero2-in {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
    gap: 40px; align-items: center;
    width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px;
}

.hero2-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 10px; margin-bottom: 20px;
    border: 1px solid rgba(20, 99, 255, .28); border-radius: 30px;
    background: rgba(255, 255, 255, .7);
    color: var(--brand-dark); font-size: 12.5px; font-weight: 600;
}
.hero2-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(22, 163, 74, .14); }

.hero2-text h1 {
    font-size: clamp(34px, 7vw, 58px); line-height: 1.06;
    letter-spacing: -.033em; margin-bottom: 18px;
}
.hero2-text > p { max-width: 520px; font-size: clamp(15px, 2.4vw, 17.5px); line-height: 1.65; margin-bottom: 26px; }

.hero2-cta { display: flex; gap: 10px; flex-wrap: wrap; }

.hero2-notes { display: flex; gap: 18px; flex-wrap: wrap; list-style: none; margin: 24px 0 0; padding: 0; }
.hero2-notes li { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 500; }
.hero2-notes svg { width: 13px; height: 13px; color: var(--green); }

/* ---- the drawing of the board ---- */

.hero2-art { position: relative; }
.art-win {
    border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
    background: var(--card); box-shadow: 0 30px 70px rgba(15, 23, 42, .16);
    transform: perspective(1400px) rotateY(-9deg) rotateX(3deg);
}
.art-bar { display: flex; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--bg); }
.art-bar i { width: 9px; height: 9px; border-radius: 50%; background: #e2e8f0; }
.art-bar i:first-child { background: #fca5a5; }
.art-bar i:nth-child(2) { background: #fde68a; }
.art-bar i:nth-child(3) { background: #a7f3d0; }

.art-body { display: flex; min-height: 250px; }
.art-side { flex: 0 0 74px; padding: 12px 10px; background: #0f172a; }
.art-logo { display: block; width: 22px; height: 22px; margin-bottom: 14px; border-radius: 7px; background: var(--grad-mark); }
.art-row { display: block; height: 7px; margin-bottom: 9px; border-radius: 4px; background: rgba(255, 255, 255, .13); }
.art-row.on { background: rgba(255, 255, 255, .45); }

.art-main { flex: 1; padding: 14px; background: var(--bg); }
.art-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.art-col { display: flex; flex-direction: column; gap: 7px; }
.art-col-head { height: 16px; border-radius: 5px; font-size: 0; }
.art-col-head[data-tone="b"] { background: #bfdbfe; }
.art-col-head[data-tone="v"] { background: #ddd6fe; }
.art-col-head[data-tone="a"] { background: #fde68a; }
.art-col-head[data-tone="g"] { background: #bbf7d0; }

.art-card {
    display: block; padding: 8px 7px; border-radius: 7px;
    background: var(--card); box-shadow: 0 1px 3px rgba(15, 23, 42, .09);
    border-left: 3px solid #cbd5e1;
}
.art-card[data-tone="b"] { border-left-color: #3b82f6; }
.art-card[data-tone="v"] { border-left-color: #8b5cf6; }
.art-card[data-tone="a"] { border-left-color: #f59e0b; }
.art-card[data-tone="g"] { border-left-color: #22c55e; }
.art-card i { display: block; height: 5px; border-radius: 3px; background: #e2e8f0; }
.art-card i + i { width: 60%; margin-top: 5px; background: #eef2f7; }

.art-chip {
    position: absolute; display: flex; align-items: center; gap: 7px;
    padding: 9px 13px; border-radius: 11px;
    background: var(--card); box-shadow: 0 12px 30px rgba(15, 23, 42, .15);
    font-size: 12.5px; font-weight: 600; color: var(--ink);
    animation: bob 4s ease-in-out infinite;
}
.art-chip svg { width: 15px; height: 15px; }
.art-chip-1 { left: -14px; top: 22%; color: var(--amber); }
.art-chip-2 { right: -10px; bottom: 16%; color: var(--green); animation-delay: 1.6s; }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .art-chip { animation: none; } }

/* ---- the running strip of words ---- */

.hero2-strip {
    display: flex; gap: 40px; margin-top: 52px; padding: 16px 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .55);
    overflow: hidden; white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hero2-strip span {
    flex: 0 0 auto; color: var(--muted);
    font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    animation: slide 26s linear infinite;
}
@keyframes slide { to { transform: translateX(calc(-100% * 8 - 40px * 8)); } }
@media (prefers-reduced-motion: reduce) { .hero2-strip span { animation: none; } }

/* ------------------------------------------------------------- the blocks */

.section2 { padding: 72px 0; }
.band { padding: 72px 0; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-dark { background: linear-gradient(160deg, #061a4a, #0a2260); border-color: transparent; color: #cbd5e1; }
.band-dark h2 { color: #fff; }
.band-dark .head p { color: #a5b4fc; }

.head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.head h2 { font-size: clamp(24px, 4.4vw, 36px); line-height: 1.16; letter-spacing: -.025em; margin-bottom: 12px; }
.head p { font-size: clamp(14.5px, 2.2vw, 16.5px); line-height: 1.65; }
.head-note { margin-top: 30px; text-align: center; color: var(--muted); font-size: 13.5px; }
.head-note a { color: var(--brand); font-weight: 600; }

.lede { font-size: clamp(15px, 2.3vw, 17px); line-height: 1.7; }

/* ---- the four pains ---- */

.pains { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.pain { position: relative; padding: 24px 20px 20px; border: 1px solid var(--line); border-radius: 15px; background: var(--card); }
.pain-no {
    position: absolute; top: -14px; left: 20px;
    display: grid; place-items: center; width: 28px; height: 28px;
    border-radius: 9px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 800;
}
.pain b { display: block; margin-bottom: 7px; color: var(--ink); font-size: 15px; }
.pain p { margin: 0; font-size: 13.5px; line-height: 1.6; }

/* ---- the tabs and the tiles ---- */

.tabs2 { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.tab2 {
    padding: 10px 20px; border: 1px solid var(--line); border-radius: 30px;
    background: var(--card); color: var(--body);
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.tab2:hover { border-color: var(--brand); color: var(--brand); }
.tab2.on { background: var(--brand); border-color: var(--brand); color: #fff; }

.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }

.tile {
    padding: 24px 22px; border: 1px solid var(--line); border-radius: 15px; background: var(--card);
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.tile:hover { transform: translateY(-3px); border-color: rgba(20, 99, 255, .4); box-shadow: 0 16px 36px rgba(15, 23, 42, .08); }
.tile-icon {
    display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 15px;
    border-radius: 12px; background: var(--brand-soft); color: var(--brand);
}
.tile-icon svg { width: 21px; height: 21px; }
.tile h3 { margin-bottom: 7px; font-size: 16px; }
.tile p { margin: 0; font-size: 13.5px; line-height: 1.62; }

.mini { padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); }
.mini b { display: block; margin-bottom: 5px; color: var(--ink); font-size: 14px; }
.mini small { color: var(--muted); font-size: 12.5px; line-height: 1.6; display: block; }

/* ---- the three steps ---- */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.step { display: flex; gap: 16px; }
.step-no {
    display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px;
    border-radius: 13px; background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff; font-size: 16px; font-weight: 800;
}
.step b { display: block; margin-bottom: 6px; color: #fff; font-size: 16px; }
.step p { margin: 0; color: #a5b4fc; font-size: 13.5px; line-height: 1.65; }

/* ---- reasons and the quote ---- */

.split2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
.split2 h2 { font-size: clamp(24px, 4.4vw, 34px); letter-spacing: -.025em; margin-bottom: 12px; }

.reasons { list-style: none; margin: 26px 0 0; padding: 0; }
.reasons li { display: flex; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.reasons li:last-child { border-bottom: 0; }
.reasons li > span {
    display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; margin-top: 1px;
    border-radius: 50%; background: var(--green-soft); color: #15803d;
}
.reasons svg { width: 12px; height: 12px; }
.reasons b { display: block; margin-bottom: 3px; color: var(--ink); font-size: 14.5px; }
.reasons div { color: var(--body); font-size: 13.5px; line-height: 1.6; }

.quote-card {
    position: relative; padding: 30px 26px 26px; margin-bottom: 16px;
    border-radius: 18px; background: linear-gradient(150deg, #0c3aa8, #0a8f9e); color: #e1ebff;
    box-shadow: 0 22px 50px rgba(20, 99, 255, .26);
}
.quote-mark { position: absolute; top: 6px; left: 20px; font-size: 62px; line-height: 1; color: rgba(255, 255, 255, .22); }
.quote-card p { position: relative; margin: 0 0 20px; color: #fff; font-size: 16px; line-height: 1.6; font-weight: 500; }
.quote-by { display: flex; align-items: center; gap: 12px; }
.quote-by .mark {
    display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px;
    border-radius: 11px; background: rgba(255, 255, 255, .18); color: #fff; font-weight: 900;
}
.quote-by b { display: block; color: #fff; font-size: 14px; }
.quote-by small { color: #c7d2fe; font-size: 12.5px; }

.mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }

/* ---- plans ---- */

.plans2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; max-width: 1000px; margin: 0 auto; align-items: start; }
.plan2 {
    position: relative; display: flex; flex-direction: column;
    padding: 28px 24px; border: 1px solid var(--line); border-radius: 17px; background: var(--card);
    transition: transform .18s, box-shadow .18s;
}
.plan2:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(15, 23, 42, .09); }
.plan2.is-pick { border-color: var(--brand); box-shadow: 0 20px 48px rgba(20, 99, 255, .18); }
.plan2-flag {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    padding: 4px 14px; border-radius: 30px; background: var(--brand);
    color: #fff; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.plan2 h3 { font-size: 17px; }
.plan2-price { margin: 14px 0 2px; color: var(--ink); font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.plan2-cur { font-size: 24px; font-weight: 700; vertical-align: super; margin-right: 2px; }
.plan2-price small { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.plan2-year { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
.plan2-list { list-style: none; margin: 22px 0 16px; padding: 0; flex: 1; }
.plan2-list li { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 11px; font-size: 13.5px; line-height: 1.5; }
.plan2-list svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 3px; color: var(--green); }
.plan2-list b { color: var(--ink); }
.plan2-trial { display: block; text-align: center; color: var(--muted); font-size: 12px; }

/* ---- what is included ---- */

.incl { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.incl-col b { display: block; margin-bottom: 12px; color: var(--ink); font-size: 14px; }
.incl-col ul { list-style: none; margin: 0; padding: 0; }
.incl-col li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 9px; color: var(--body); font-size: 13.5px; line-height: 1.5; }
.incl-col svg { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 3px; color: var(--green); }

/* ---- questions ---- */

.asks { max-width: 780px; margin: 0 auto; }
.ask { border: 1px solid var(--line); border-radius: 13px; background: var(--card); margin-bottom: 10px; overflow: hidden; }
.ask[open] { border-color: rgba(20, 99, 255, .42); box-shadow: 0 10px 26px rgba(15, 23, 42, .06); }
.ask summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 17px 20px; cursor: pointer; list-style: none;
    color: var(--ink); font-size: 15px; font-weight: 600;
}
.ask summary::-webkit-details-marker { display: none; }
.ask-plus { position: relative; flex: 0 0 16px; width: 16px; height: 16px; }
.ask-plus::before, .ask-plus::after {
    content: ''; position: absolute; left: 50%; top: 50%; background: var(--brand);
    transform: translate(-50%, -50%); transition: transform .2s, opacity .2s;
}
.ask-plus::before { width: 14px; height: 2px; border-radius: 2px; }
.ask-plus::after { width: 2px; height: 14px; border-radius: 2px; }
.ask[open] .ask-plus::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.ask p { margin: 0; padding: 0 20px 19px; color: var(--body); font-size: 14px; line-height: 1.7; }

/* ---- the closing band ---- */

.closer {
    position: relative; overflow: hidden; padding: 74px 20px;
    background: linear-gradient(140deg, #061a4a, #0c3aa8 55%, #0a8f9e); text-align: center;
}
.closer::after {
    content: ''; position: absolute; inset: auto -10% -60% -10%; height: 340px;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .14), transparent);
}
.closer-in { position: relative; max-width: 700px; margin: 0 auto; }
.closer h2 { color: #fff; font-size: clamp(24px, 4.6vw, 38px); line-height: 1.16; letter-spacing: -.028em; margin-bottom: 14px; }
.closer p { color: #d3e2ff; font-size: clamp(15px, 2.3vw, 17px); margin-bottom: 28px; }
.closer-cta { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.closer small { display: block; color: #b9cdf2; font-size: 12.5px; }

/* ---------------------------------------------------- inner page toppings */

.page-hero { padding: 54px 0 40px; background: linear-gradient(180deg, #f3f7ff, var(--card)); text-align: center; }
.page-hero h1 { font-size: clamp(28px, 5.4vw, 46px); line-height: 1.1; letter-spacing: -.03em; margin-bottom: 14px; }
.page-hero .lede { max-width: 620px; margin: 0 auto; }
.page-hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

.crumb { margin-bottom: 14px; color: var(--muted); font-size: 13px; }
.crumb a { color: var(--brand); font-weight: 600; }
.crumb span { margin: 0 6px; }

.jump { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
.jump a {
    padding: 8px 16px; border: 1px solid var(--line); border-radius: 30px;
    background: var(--card); color: var(--body); font-size: 13.5px; font-weight: 600;
}
.jump a:hover { border-color: var(--brand); color: var(--brand); }

/* ---------------------------------------------------------------- contact */

.reach { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.reach-form { padding: 28px 24px; border: 1px solid var(--line); border-radius: 17px; background: var(--card); box-shadow: 0 14px 36px rgba(15, 23, 42, .06); }
.reach-note { margin: 12px 0 0; text-align: center; color: var(--muted); font-size: 12.5px; }

.reach-side { display: grid; gap: 14px; }
.reach-card { padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: var(--card); }
.reach-card.is-plain { background: var(--bg); }
.reach-card b { display: block; margin-bottom: 7px; color: var(--ink); font-size: 15px; }
.reach-card p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; }
.reach-steps { list-style: none; margin: 0; padding: 0; }
.reach-steps li { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 9px; font-size: 13.5px; line-height: 1.55; }
.reach-steps svg { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 3px; color: var(--green); }

/* ----------------------------------------------------------------- bottom */

.site-foot { padding: 52px 0 0; background: #0f172a; color: #94a3b8; }
.site-foot-in {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px;
    width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px 40px;
}
.site-foot .site-brand { color: #fff; margin-bottom: 14px; }
.site-foot-brand p { margin: 0; max-width: 330px; font-size: 13.5px; line-height: 1.7; color: #94a3b8; }
.site-foot-col { display: flex; flex-direction: column; gap: 10px; }
.site-foot-col b { color: #fff; font-size: 13.5px; margin-bottom: 2px; }
.site-foot-col a { color: #94a3b8; font-size: 13.5px; }
.site-foot-col a:hover { color: #fff; }

.site-foot-end {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    max-width: 1140px; margin: 0 auto; padding: 18px 20px 26px;
    border-top: 1px solid rgba(148, 163, 184, .18);
    font-size: 12.5px; color: #64748b;
}

.site-up {
    position: fixed; right: 18px; bottom: 18px; z-index: 45;
    display: grid; place-items: center; width: 42px; height: 42px;
    border-radius: 50%; background: var(--brand); color: #fff;
    box-shadow: 0 10px 26px rgba(20, 99, 255, .35);
    opacity: 0; pointer-events: none; transform: translateY(10px);
    transition: opacity .2s, transform .2s;
}
.site-up.show { opacity: 1; pointer-events: auto; transform: none; }
.site-up svg { width: 17px; height: 17px; }

/* ================================================================ tablet */

@media (min-width: 700px) {
    .site-bar { padding: 14px 28px; }
    .split2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
    .reach { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px; }
    .site-foot-in { grid-template-columns: 1.5fr repeat(3, 1fr); }
    .page-hero { padding: 66px 0 48px; }
}

/* ================================================================== desk */

@media (min-width: 1000px) {
    .hero2 { padding-top: 74px; }
    .hero2-in { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 54px; }
    .section2, .band { padding: 92px 0; }
    .wrap { padding: 0 28px; }
}

/* ================================================================= phone */

@media (max-width: 860px) {
    .site-burger { display: flex; }

    .site-links {
        position: fixed; left: 0; right: 0; top: 68px; z-index: 49;
        flex-direction: column; align-items: stretch; gap: 2px;
        margin: 0; padding: 12px 16px 18px;
        background: var(--card); border-bottom: 1px solid var(--line);
        box-shadow: 0 16px 30px rgba(15, 23, 42, .12);
        transform: translateY(-14px); opacity: 0; pointer-events: none;
        transition: opacity .18s, transform .18s;
    }
    .site-links.open { transform: none; opacity: 1; pointer-events: auto; }
    .site-links > a { padding: 13px 14px; font-size: 15px; }
    .site-links-cta { flex-direction: column; align-items: stretch; gap: 8px; margin: 8px 0 0; }
    .site-links-cta .btn { height: 44px; font-size: 14.5px; }

    .hero2-art { transform: none; margin-top: 6px; }
    .art-win { transform: none; }
    .art-chip-1 { left: 0; top: 10%; }
    .art-chip-2 { right: 0; bottom: 8%; }

    .hero2-strip { margin-top: 40px; gap: 26px; }
    .hero2-strip span { font-size: 11.5px; }

    .section2, .band { padding: 54px 0; }
    .head { margin-bottom: 30px; }
    .closer { padding: 56px 20px; }
    .quote-card { padding: 26px 20px 22px; }
    .site-foot-end { justify-content: center; text-align: center; }
}

@media (max-width: 420px) {
    .hero2-cta .btn, .closer-cta .btn, .page-hero-cta .btn { width: 100%; }
    .art-body { min-height: 190px; }
    .art-side { flex-basis: 56px; }
}