/* LeadVault. Plus Jakarta Sans on LeadVault's own pages (the app, homepage, sign-in ...), Inter on customers' white-label forms, landing and booking pages, Manrope for the logo (SIL Open Font License), Latin subset, self-hosted. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('/fonts/manrope-latin.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2'); }

:root {
    --ink: #0F172A;
    --text: #334155;
    --muted: #475569;
    --faint: #64748B;
    --line: #E2E8F0;
    --line-soft: #EEF2F6;
    --bg: #F6F7F9;
    --card: #FFFFFF;
    --accent: #1D4ED8;
    --accent-dark: #1E3A8A;
    --accent-soft: #E8EEFC;
    --navy: #0F172A;
    --navy-2: #1E293B;
    --navy-line: #334155;
    --warn-bg: #FFF7ED;
    --warn-line: #FDBA74;
    --warn-text: #7C2D12;
    --warn-strong: #9A3412;
    --ok-bg: #DCFCE7;
    --ok-text: #166534;
    --stop-bg: #FEE2E2;
    --stop-text: #991B1B;
    --radius: 12px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* LeadVault's own pages: Plus Jakarta Sans, a touch heavier in the app so it reads with some presence. Customers'
   white-label pages (forms, landing pages, booking) keep the neutral Inter, to sit well on any site. */
body.app, body.home, body.lv-own { font-family: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; }
body.app { font-weight: 500; }
body.app h1, body.app h2, body.app h3, body.app strong, body.app b, body.app th { font-weight: 700; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 10; padding: 10px 14px; border-radius: 8px; background: var(--card); }
.skip:focus { top: 8px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.strong { font-weight: 600; }
/* Digits line up in phones and amounts. Only there: Inter's tabular setting also widens hyphens in words. */
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grow { flex: 1 1 auto; }
.push { margin-left: auto; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid #CBD5E1; border-radius: 8px; background: var(--card); color: var(--ink); font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:hover { color: var(--ink); background: #F8FAFC; }
.btn-primary { border-color: var(--accent); background: linear-gradient(180deg, #2563EB, var(--accent)); color: #FFFFFF; font-weight: 600; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 1px 2px rgb(15 23 42 / 0.18); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #FFFFFF; }
.btn-quiet { border-color: transparent; background: transparent; color: var(--accent); }
.btn-warn { border-color: #C2410C; color: var(--warn-strong); font-weight: 600; }
.btn-danger { border-color: #DC2626; color: var(--stop-text); font-weight: 600; }
.btn-primary.is-danger { border-color: #DC2626; background: #DC2626; }
.btn-primary.is-danger:hover { border-color: #B91C1C; background: #B91C1C; }
.btn-small { min-height: 32px; padding: 0 10px; font-size: 13px; }
.btn-wide { width: 100%; }

/* Header */
.top { position: relative; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 64px; padding: 8px 24px; background: var(--navy); color: #FFFFFF; }
.logo { display: flex; align-items: center; gap: 10px; color: #FFFFFF; text-decoration: none; white-space: nowrap; }
.logo:hover { color: #FFFFFF; }
.logo-word { font-family: Manrope, Inter, sans-serif; font-size: 21px; letter-spacing: -0.02em; }
.logo-lead { font-weight: 500; }
.logo-vault { font-weight: 800; }
.logo-tm { margin-left: 1px; font-size: 0.45em; font-weight: 500; vertical-align: 0.95em; letter-spacing: 0; }
.top .shield-light { fill: #60A5FA; }
.top .shield-dark { fill: #2563EB; }
.plain .shield-light { fill: #2563EB; }
.plain .shield-dark { fill: #1E3A8A; }
.account-switch { display: flex; align-items: center; gap: 8px; max-width: 200px; min-height: 40px; padding: 0 12px; border: 1px solid var(--navy-line); border-radius: 8px; background: var(--navy-2); color: #FFFFFF; text-decoration: none; }
a.account-switch:hover { color: #FFFFFF; border-color: #475569; }
.search { flex: 1 1 200px; min-width: 0; max-width: 400px; margin-left: auto; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 8px; background: var(--navy-2); color: #CBD5E1; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; color: #FFFFFF; }
.search input::placeholder { color: #94A3B8; }
.search input:focus-visible { outline-offset: 6px; }
@media (min-width: 1181px) { .search { max-width: 480px; margin: 0 auto 0 24px; } } /* menus in the bar: the box sits right after them, not off at the far right */
.search-mic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-right: -6px; border: 0; border-radius: 50%; background: transparent; color: #CBD5E1; cursor: pointer; }
.search-mic:hover { background: var(--navy-line); color: #FFFFFF; }
.search-mic.is-recording { background: #DC2626; color: #FFFFFF; }
.search-mic:disabled { opacity: 0.6; cursor: progress; }
.ask-vaulty { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-right: -6px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--accent); color: #FFFFFF; font-weight: 600; font-size: 13px; white-space: nowrap; cursor: pointer; }
.ask-vaulty:hover { background: #2563EB; }
.ask-vaulty[hidden] { display: none; }
.add-lead { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #FFFFFF; }
.add-lead:hover { background: #2563EB; color: #FFFFFF; }
.me { position: relative; }
.me summary { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--navy-line); font-weight: 600; cursor: pointer; list-style: none; }
.me summary::-webkit-details-marker { display: none; }
.me-menu { position: absolute; right: 0; top: 48px; z-index: 5; width: 240px; display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: 0 8px 24px rgb(15 23 42 / 0.12); }
.me-menu form { margin-top: 8px; }
.me-menu .btn { width: 100%; justify-content: flex-start; padding: 0; }
.me summary { position: relative; }
.me-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
/* Availability (088) on the picture: green while On, grey while Off. */
.me-dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border: 2px solid var(--navy, #0F172A); border-radius: 50%; background: #94A3B8; }
.me-dot.is-on { background: #16A34A; }
.me-menu { width: 260px; }
.me-menu .me-who { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.me-menu .me-who form { margin: 0; }
.me-names { flex: 1; min-width: 0; }
.me-names p { margin: 0; }
.me-pic { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; cursor: pointer; }
.me-pic img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.me-pic-edit { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 18px; height: 18px; border: 2px solid var(--card); border-radius: 50%; background: var(--accent); color: #FFFFFF; }
.me-pic:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.me-menu form.me-row, .me-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; padding: 6px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; }
.me-row > span:first-of-type { flex: 1; min-width: 0; }
.card .me-row { border: 0; padding: 0; }
.me-avail { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: #94A3B8; vertical-align: middle; }
.me-avail.is-on { background: #16A34A; }
@media (forced-colors: active) { .me-dot, .me-avail { forced-color-adjust: none; } }

/* The top menus (2026-11-06), replacing the left menu: a few drop-downs and links along the dark bar. */
.shell { display: flex; flex-wrap: wrap; align-items: flex-start; }
.topnav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.tlink, .tmenu > summary { position: relative; display: flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 10px; border-radius: 8px; color: #CBD5E1; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; list-style: none; }
.tmenu > summary::-webkit-details-marker { display: none; }
.tlink:hover, .tmenu > summary:hover, .tmenu[open] > summary { background: var(--navy-2); color: #FFFFFF; }
.tlink[aria-current="page"], .tmenu > summary.is-here { color: #FFFFFF; }
.tlink[aria-current="page"]::after, .tmenu > summary.is-here::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -12px; height: 3px; border-radius: 3px 3px 0 0; background: #60A5FA; }
.tchev { transition: transform .15s; }
.tmenu[open] .tchev { transform: rotate(180deg); }
.tcount { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #F97316; color: #FFFFFF; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.tmenu { position: relative; }
.tdrop { position: absolute; top: 48px; left: 0; z-index: 30; min-width: 230px; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); box-shadow: 0 18px 40px rgb(15 23 42 / 0.18); }
.tdrop hr { width: 100%; margin: 6px 0; border: 0; border-top: 1px solid var(--line); }
.nav-item { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 8px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav-item:hover { background: var(--bg); color: var(--ink); }
.nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item .count { margin-left: auto; padding: 0 8px; border-radius: 999px; background: #FFEDD5; color: var(--warn-strong); font-size: 12px; font-weight: 600; }
.top-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: #CBD5E1; }
.top-icon:hover, .top-icon[aria-current="page"] { background: var(--navy-2); color: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { .tchev { transition: none; } }
/* Narrower screens: the menus take their own row under the logo and search, and scroll sideways if they must. */
@media (max-width: 1180px) {
    .topnav { order: 10; flex: 1 1 100%; margin: 0 -8px; overflow-x: auto; }
    .tlink[aria-current="page"]::after, .tmenu > summary.is-here::after { bottom: 0; }
    .tdrop { position: fixed; top: auto; left: 12px; right: 12px; min-width: 0; margin-top: 4px; }
}

/* Page */
.main { flex: 999 1 560px; min-width: 0; padding: 24px 24px 32px; display: flex; flex-direction: column; gap: 16px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.page-head .filters { margin-right: auto; }
.page-head > h1 + p { flex: 1 1 0; min-width: min(240px, 100%); margin-right: auto; } /* the line about the page sits right after its title, not pushed to the far right */
.page-head > p.nowrap { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* a long line under the title stops at the screen's edge */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); }
.tabs a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; white-space: nowrap; }
.tabs a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--ink); font-weight: 600; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.select select, .field select, .inline-form select, .hours-row select, .dash-filters select, .person-row select, .note-buttons select, .merge-fields select, .pace-row select, .page-size select, .drip-add select, .wait-row select, .dock-drop select { min-height: 40px; max-width: 100%; padding: 0 32px 0 12px; border: 1px solid #CBD5E1; border-radius: 8px; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; appearance: none; cursor: pointer; }
.js [data-apply] { display: none; }
.notice { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--warn-line); border-radius: 10px; background: var(--warn-bg); color: var(--warn-text); }
.notice .grow { flex: 1 1 260px; }
/* The test copy, while an admin uses LeadVault as someone else (Switch to on Users). */
.switched { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border: 1px solid var(--warn-line); border-radius: 10px; background: var(--warn-bg); color: var(--warn-text); }
.switched p { flex: 1; min-width: 0; margin: 0; }
.switched .btn { flex: none; }
.billing-note { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 8px 16px; border: 1px solid var(--warn-line); border-radius: 10px; background: var(--warn-bg); color: var(--warn-text); white-space: nowrap; }
.billing-note .ellipsis { flex: 1; min-width: 0; }
.billing-note a { flex: none; font-weight: 600; color: inherit; }
.alert { padding: 12px 14px; border: 1px solid #FCA5A5; border-radius: 10px; background: #FEF2F2; color: var(--stop-text); }
.alert ul { margin: 0; padding-left: 18px; }

/* Lead list: one line per row; wide tables scroll inside their box */
.table-box { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); } /* relative: the sr-only caption stays inside the scroll box */
table.leads { width: 100%; border-collapse: collapse; }
.leads th, .leads td { padding: 12px; text-align: left; vertical-align: middle; white-space: nowrap; }
.leads th:first-child, .leads td:first-child { padding-left: 16px; }
.leads th:last-child, .leads td:last-child { padding-right: 16px; }
.leads thead tr { border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.leads tbody tr { border-bottom: 1px solid var(--line-soft); }
.leads tbody tr:last-child { border-bottom: 0; }
.leads tbody tr.is-waiting { background: #FFFBF5; }
.leads td.details { max-width: 360px; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.leads td.empty { padding: 32px 16px; color: var(--muted); text-align: center; }
.lead-name { color: var(--ink); font-weight: 600; text-decoration: none; }
.lead-name:hover { color: var(--accent); }
.other-link { margin-left: 8px; font-size: 13px; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.tag-mortgage { background: #E0E7FF; color: #1E3A8A; }
.tag-debt { background: #FFEDD5; color: #9A3412; }
.tag-insurance { background: #DCFCE7; color: #166534; }
.tag-legal { background: #EDE9FE; color: #5B21B6; }
.tag-solar { background: #FEF9C3; color: #854D0E; }
.tag-education { background: #FCE7F3; color: #9D174D; }
.tag-business-funding { background: #CCFBF1; color: #115E59; }
.tag-other { background: #E0F2FE; color: #075985; }
.tag-plain { margin-left: 8px; background: #F1F5F9; color: var(--muted); font-weight: 500; }
/* Keeps its width; the words beside it shrink instead. */
.tag-outcome { flex: none; background: #F1F5F9; color: var(--text); font-weight: 500; }
/* A hint beside a value, e.g. an IP address in a state other than the lead's. The place shortens before the tag does. */
.tag-warn { flex: none; margin-left: 6px; background: var(--warn-bg); color: var(--warn-strong); }
.rows dd.with-tag { display: flex; align-items: center; justify-content: flex-end; }
.note-buttons .note-outcome { width: 180px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-new { background: var(--ok-bg); color: var(--ok-text); }
.badge-wait { background: #FFEDD5; color: var(--warn-strong); }
.badge-stop { background: var(--stop-bg); color: var(--stop-text); }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pager-buttons { display: flex; align-items: center; gap: 8px; }

/* Cards and label/value rows (label left, value right, one line) */
.card { padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.rows { margin: 0; display: flex; flex-direction: column; }
.rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #F1F5F9; }
.rows > div:last-child { border-bottom: 0; }
.rows > .rows-total dt, .rows > .rows-total dd { color: var(--ink); font-weight: 600; } /* the bill so far, on Billing */
/* A label with an info icon: hovering either says where the value comes from (a home value estimate). */
.rows dt.dt-hint { display: inline-flex; align-items: center; gap: 5px; cursor: help; }
.dt-hint svg { flex: none; color: var(--faint); }
/* The value shows in full whenever it fits: the label shortens first (a long one carries its whole text as a title), and
   only a value wider than the row is cut, leaving the label a few letters. */
.rows dt { flex: 0 1 auto; min-width: 2.5em; overflow: hidden; text-overflow: ellipsis; color: var(--muted); white-space: nowrap; }
.rows dd { flex: 0 0 auto; max-width: calc(100% - 4em); margin: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; white-space: nowrap; }

/* Lead page */
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--muted); text-decoration: none; white-space: nowrap; }

/* Stage colors (096): --hue for text and the strong fill, --hue-soft for a light fill. */
.hue-red { --hue: #DC2626; --hue-soft: #FEE2E2; --hue-text: #991B1B; }
.hue-orange { --hue: #EA580C; --hue-soft: #FFEDD5; --hue-text: #9A3412; }
.hue-amber { --hue: #D97706; --hue-soft: #FEF3C7; --hue-text: #92400E; }
.hue-yellow { --hue: #CA8A04; --hue-soft: #FEF9C3; --hue-text: #854D0E; }
.hue-lime { --hue: #65A30D; --hue-soft: #ECFCCB; --hue-text: #3F6212; }
.hue-green { --hue: #16A34A; --hue-soft: #DCFCE7; --hue-text: #166534; }
.hue-teal { --hue: #0D9488; --hue-soft: #CCFBF1; --hue-text: #115E59; }
.hue-cyan { --hue: #0891B2; --hue-soft: #CFFAFE; --hue-text: #155E75; }
.hue-blue { --hue: #2563EB; --hue-soft: #DBEAFE; --hue-text: #1E40AF; }
.hue-indigo { --hue: #4F46E5; --hue-soft: #E0E7FF; --hue-text: #3730A3; }
.hue-violet { --hue: #7C3AED; --hue-soft: #EDE9FE; --hue-text: #5B21B6; }
.hue-pink { --hue: #DB2777; --hue-soft: #FCE7F3; --hue-text: #9D174D; }
.hue-gray { --hue: #64748B; --hue-soft: #F1F5F9; --hue-text: #334155; }
.hue-slate { --hue: #1E293B; --hue-soft: #E2E8F0; --hue-text: #0F172A; }
.hue-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--hue); }
.stage-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--hue-soft); color: var(--hue-text); font-size: 13px; font-weight: 600; white-space: nowrap; }
.stage-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hue); }
.stage-color { flex-wrap: nowrap; align-items: center; gap: 8px; }
.column { border-top: 3px solid var(--hue, var(--line)); }
.column-head:has(.hue-dot) { align-items: center; }
.column-head .hue-dot + h2 { flex: 1; min-width: 0; }
.stage-color select { min-height: 34px; }

/* The lead page (2026-11-06): bar, stage track, person column on the left, tabs on the right. */
.lead-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: -24px -24px 0; padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--card); }
.lead-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.lead-crumb .back { padding-right: 12px; border-right: 1px solid var(--line); }
.lead-crumb h1 { font-size: 20px; }
.lead-crumb .tag { padding: 2px 10px; font-size: 13px; }
.lead-bar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.bar-chip { display: flex; align-items: center; gap: 8px; max-width: 260px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); text-decoration: none; white-space: nowrap; }
.bar-chip:hover { border-color: #CBD5E1; color: var(--ink); }
.bar-chip-label { color: var(--faint); font-size: 12px; }
.lead-bar .loan-file { margin: 0; }
.stage-track { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: -16px -24px 0; padding: 10px 24px; border-bottom: 1px solid var(--line); background: var(--card); }
.track-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--faint); font-size: 13px; }
.track-meta strong { color: var(--text); font-weight: 600; }
.track-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; min-width: 0; max-width: 100%; }
.stages { display: flex; margin: 0; padding: 0; list-style: none; max-width: 100%; overflow-x: auto; }
.stage { height: 36px; margin-left: -6px; padding: 0 18px 0 24px; border: 0; background: #EEF2F6; color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%); }
.stages li:first-child .stage { margin-left: 0; padding-left: 16px; border-radius: 8px 0 0 8px; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%); }
.stage:hover { background: var(--hue-soft); color: var(--hue-text); }
.stage.is-done { background: var(--hue-soft); color: var(--hue-text); }
.stage.is-current { background: var(--hue); color: #FFFFFF; font-weight: 600; }
.stages-closed { display: flex; gap: 6px; }
.stage-end { height: 36px; padding: 0 12px; border: 1px dashed #CBD5E1; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13px; white-space: nowrap; cursor: pointer; }
.stage-end:hover { border-style: solid; border-color: var(--hue); color: var(--hue-text); }
.stage-end.is-current { border: 1px solid var(--hue); background: var(--hue); color: #FFFFFF; font-weight: 600; }
@media (forced-colors: active) { .stage, .stage-end { border: 1px solid ButtonText; clip-path: none; } .stage.is-current, .stage-end.is-current { forced-color-adjust: none; } }

.lead-work { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.lead-person { display: flex; flex-direction: column; gap: 16px; padding: 22px 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.who { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.who-avatar { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 8px; border-radius: 50%; background: linear-gradient(135deg, #2563EB, #1E3A8A); color: #FFFFFF; font-size: 26px; font-weight: 600; letter-spacing: .02em; }
.who-name { max-width: 100%; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.who-place { max-width: 100%; color: var(--faint); font-size: 13px; }
/* Reach buttons, style B (Philip's pick): soft tiles, each action its own color; the tile fills in on hover. */
.reach { display: flex; justify-content: center; gap: 4px; }
.reach-btn { --c: var(--accent); --c-soft: var(--accent-soft); --c-line: #BFD3FB;
    display: flex; flex-direction: column; align-items: center; gap: 6px; width: 54px; color: var(--text); font-size: 12px; text-decoration: none; }
.reach-btn:hover { color: var(--ink); }
.reach-sq { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-soft); color: var(--c); transition: background .12s, color .12s; }
.reach-btn:hover .reach-sq, .reach-btn:focus-visible .reach-sq { background: var(--c); color: #FFFFFF; }
.reach-call { --c: #15803D; --c-soft: #ECFDF3; --c-line: #BBF7D0; }
.reach-text { --c: #0F766E; --c-soft: #EBFBF8; --c-line: #99F6E4; }
.reach-email { --c: #1D4ED8; --c-soft: #EEF3FE; --c-line: #BFD3FB; }
.reach-book { --c: #7C3AED; --c-soft: #F4EFFE; --c-line: #DDD0FC; }
.reach-remind { --c: #B45309; --c-soft: #FFF7EB; --c-line: #FDE0A8; }
.reach-btn.is-off { color: #94A3B8; cursor: not-allowed; }
.reach-btn.is-off .reach-sq { --c: #94A3B8; --c-soft: #F8FAFC; --c-line: var(--line); }
.reach-btn.is-off:hover .reach-sq { background: var(--c-soft); color: var(--c); }
@media (prefers-reduced-motion: reduce) { .reach-sq { transition: none; } }
.quick-facts { margin: 0; border: 1px solid var(--line); border-radius: 12px; }
.quick-facts > div { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-top: 1px solid var(--line-soft); }
.quick-facts > div:first-child { border-top: 0; }
.quick-facts dt { flex: none; width: 64px; color: var(--faint); }
.quick-facts dd { flex: 1; min-width: 0; margin: 0; font-weight: 500; }
.quick-facts a.is-due { color: var(--warn-strong); }
.person-notes { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.person-notes h2 { margin: 0; }
.person-notes .note-buttons { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px; }
.person-notes .note-outcome { grid-column: 1 / -1; order: 1; width: 100%; }
.person-notes .btn-voice { grid-column: 1 / -1; order: 2; justify-self: start; }
.recent-events { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.recent-events li { display: flex; align-items: center; gap: 8px; min-height: 38px; border-bottom: 1px solid var(--line-soft); font-size: 13px; white-space: nowrap; }
.recent-events li:last-child { border-bottom: 0; }
.see-all { font-size: 13px; font-weight: 500; }

.lead-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lead-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.lead-tabs a { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; color: var(--faint); font-weight: 500; text-decoration: none; white-space: nowrap; }
.lead-tabs a:hover { color: var(--ink); }
.lead-tabs a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.lead-tabs a[aria-current="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.tab-count { padding: 0 6px; border-radius: 9px; background: #EEF2F6; color: var(--muted); font-size: 11px; font-weight: 600; }
.lead-panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lead-panel:empty { display: none; }
.js .lead-panel.is-hidden { display: none; }
.lead-panel .card { padding: 18px 20px 20px; border-radius: 14px; }
.lead-panel .card > h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.lead-panel .card > h2::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.panel-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
/* Values in boxes with the label above, several across (Philip liked Shape's fields). One line each, cut short with … */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 14px 16px; }
.vfield { min-width: 0; }
.vlabel { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.vlabel.dt-hint { cursor: help; }
.vbox { display: block; min-height: 40px; padding: 9px 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #FBFCFD; text-overflow: ellipsis; white-space: nowrap; }
.vbox.protected-value { display: flex; align-items: center; gap: 8px; padding-block: 0; }
.vbox.protected-value .btn-small { min-height: 28px; }
.protected-edit { margin-top: 14px; }
@media (max-width: 1000px) { .lead-work { grid-template-columns: minmax(0, 1fr); } }

/* Settings: its own left menu (groups that fold open, a search box) beside the page. */
.settings-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-body { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.snav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 14px 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }

.snav-search { width: 100%; min-height: 38px; margin: 0 0 8px; padding: 0 12px; border: 1px solid #CBD5E1; border-radius: 8px; background: #F8FAFC; }
.snav-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--card); }
.snav-group summary { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 8px; border-radius: 8px; color: var(--ink); font-weight: 600; cursor: pointer; list-style: none; white-space: nowrap; }
.snav-group summary::-webkit-details-marker { display: none; }
.snav-group summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(-45deg); transition: transform .15s; }
.snav-group[open] summary::after { transform: rotate(45deg); }
.snav-group summary:hover { background: var(--line-soft); }
.snav-group summary svg { flex: none; color: var(--faint); }
.snav-link { display: block; overflow: hidden; margin: 1px 0; padding: 8px 10px 8px 34px; border-radius: 8px; color: var(--text); text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.snav-link:hover { background: var(--line-soft); color: var(--ink); }
.snav-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
.snav-none { margin: 4px 8px; }
.snav-link.is-hidden, .snav-group.is-hidden { display: none; }
@media (prefers-reduced-motion: reduce) { .snav-group summary::after { transition: none; } }
@media (max-width: 900px) {
    .settings-shell { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .snav { position: static; max-height: none; }
}
.note-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.note-form textarea { width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 8px; resize: vertical; }
.note-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-voice .rec-dot { display: none; width: 10px; height: 10px; border-radius: 50%; background: #DC2626; }
.btn-voice.is-recording { border-color: #DC2626; color: var(--stop-text); }
.btn-voice.is-recording .mic { display: none; }
.btn-voice.is-recording .rec-dot { display: inline-block; }
.btn-voice:disabled { cursor: progress; opacity: 0.7; }
[data-dictate-status]:empty { display: none; }
.events { margin: 0; padding: 0; list-style: none; }
.events li { border-top: 1px solid #F1F5F9; }
.event-line, .events summary { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.events summary { cursor: pointer; list-style: none; }
.events summary::-webkit-details-marker { display: none; }
.event-kind { flex: none; width: 72px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.event-full { margin: 0 0 10px 84px; white-space: pre-wrap; }
.clip { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 8px; border: 1px solid #CBD5E1; border-radius: 999px; font-size: 12px; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.clip:hover { border-color: var(--accent); }
.clip .stop, .clip.is-playing .play { display: none; }
.clip.is-playing .stop { display: inline; }
.plain-list { margin: 0 0 12px; padding: 0; list-style: none; }
.plain-list li { display: flex; align-items: center; gap: 10px; min-height: 40px; border-bottom: 1px solid #F1F5F9; }
.reminder.is-due .grow { color: var(--warn-strong); font-weight: 600; }
/* An appointment on the lead page, in the narrow right column: its time gives way (cut short, whole in the row's
   tooltip) so Join and the cancel cross always fit on its one line. */
.plain-list li.appointment { gap: 4px; }
.appointment .btn-quiet { flex: none; padding: 0 4px; }
.appointment form { flex: none; }
.appointment .icon-btn { width: 28px; border: 0; background: none; cursor: pointer; }
.appointment .icon-btn:hover { background: #E2E8F0; }
.inline-form { display: flex; gap: 8px; }
.inline-form select { flex: 1; min-width: 0; }

/* Forms */
.stack { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { color: var(--muted); font-weight: 500; }
.field input { min-height: 44px; padding: 0 12px; border: 1px solid #CBD5E1; border-radius: 8px; background: var(--card); }
.field textarea { min-height: 64px; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 8px; background: var(--card); resize: vertical; }
.field-row { display: flex; flex-wrap: wrap; gap: 14px; }
.field-row > .field { flex: 1 1 220px; }
.field-short { max-width: 120px; }
.check { display: flex; align-items: center; gap: 8px; }
.check input { flex: none; width: 18px; height: 18px; }
.form-card { max-width: 720px; display: flex; flex-direction: column; gap: 16px; padding: 24px; }

/* Pipeline: columns share the width on wide screens and scroll sideways on small ones */
.board-box { overflow-x: auto; padding-bottom: 8px; }
.board { display: flex; gap: 12px; align-items: flex-start; }
.column { flex: 1 1 230px; min-width: 230px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius); background: #EEF1F5; }
.column.is-over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.column-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.column-head h2 { margin: 0; font-size: 14px; }
.column-head .muted { font-size: 13px; }
.card-lead { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); text-decoration: none; cursor: grab; }
.card-lead:hover { border-color: #CBD5E1; color: var(--ink); }
.card-lead.is-waiting { border-color: var(--warn-line); }
.card-lead.is-dragging { opacity: 0.5; }
.card-line { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; }
.card-line strong { font-weight: 600; }
.initials { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #E2E8F0; color: var(--text); font-size: 10px; font-weight: 600; }
.more { padding: 4px 2px; font-size: 13px; }

/* Sign-in and other plain pages */
.plain-main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 32px 16px; }
.plain-logo { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.plain-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.account-list { display: flex; flex-direction: column; gap: 8px; }
.account-pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); text-align: left; cursor: pointer; }
.account-pick:hover { border-color: var(--accent); }
.or-line { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--faint); font-size: 13px; }
.or-line::before, .or-line::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.provider-buttons { gap: 10px; }
.provider-buttons .btn { min-height: 44px; gap: 10px; }
.provider-list li svg, .inline-actions .btn svg { flex: none; }

/* Two-step sign-in */
/* Its ways, one line each: a passkey, the app, texts; the button stays whole while the words shorten. */
.way-list { margin: 0; }
.way-list li { gap: 12px; }
.way-list li .btn { flex: none; }
.plain-card .way-list li { min-height: 52px; }
.setup-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.qr { align-self: center; width: 200px; height: 200px; image-rendering: pixelated; }
.key, .recovery-codes { font-family: ui-monospace, 'SF Mono', Consolas, monospace; white-space: nowrap; }
.key { margin: 0; overflow-x: auto; padding: 10px 8px; border-radius: 8px; background: #F1F5F9; font-size: 12.5px; text-align: center; }
.recovery-codes { margin: 0; padding: 12px 12px 12px 40px; border-radius: 8px; background: #F1F5F9; line-height: 1.9; }
.code-input { letter-spacing: 0.12em; font-size: 18px; }
.narrow { max-width: 480px; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.plain-list li.is-low { color: var(--warn-strong); font-weight: 600; }

/* Protected values on the lead page: masked, Show beside each, the edit form folded away. */
.card-title-icon { display: flex; align-items: center; gap: 6px; }
.card-title-icon svg { color: var(--muted); }
.protected-value { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.mono { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 13px; }
.protected-value .btn-small { min-height: 26px; }
.protected-edit, .give-back { margin-top: 10px; }
.protected-edit summary, .give-back summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; }
.protected-edit .stack, .protected-edit .inline-actions, .give-back .stack { margin-top: 12px; }
.grabs-list td.details { max-width: 300px; }
/* Take it / Give to stays at the right edge of the box while the table scrolls sideways (on a phone). */
.grabs-list .grabs-act { position: sticky; right: 0; z-index: 1; width: 1%; background: var(--card); white-space: nowrap; box-shadow: -8px 0 8px -8px rgba(15, 23, 42, .18); }
.grabs-act .inline-form select { flex: none; width: 180px; }
.grabs-list tr.is-asked td { background: var(--accent-soft); } /* what Vaulty was asked for */
.returns-list td.details { max-width: 280px; }
.returns-list .tag-plain { margin-left: 0; }
.returns-list .returns-act { position: sticky; right: 0; z-index: 1; width: 1%; background: var(--card); white-space: nowrap; box-shadow: -8px 0 8px -8px rgba(15, 23, 42, .18); }

@media (max-width: 640px) {
    .top { padding: 10px 16px; }
    .ask-vaulty { padding: 0 10px; }
    .ask-name { display: none; } /* "Ask" on a phone, so the box keeps room for the words */
    .main { padding: 16px 16px 24px; }
    .add-lead { margin-left: 0; }
    .lead-bar, .stage-track { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
    .lead-bar { margin-top: -16px; }
    .plain-card { padding: 24px 20px; }
    .event-line, .events summary { gap: 8px; }
    /* A call's outcome (Voicemail, No answer ...) says it was a call, so it takes the kind's place; so does a call in that
       went to voicemail or was missed. Who and when give way last, cut short rather than past the edge. */
    .event-line:has(.tag-outcome, .tag-call) .event-kind, .events summary:has(.tag-outcome, .tag-call) .event-kind { display: none; }
    .event-line > .muted.nowrap, .events summary > .muted.nowrap { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .clip { min-width: 32px; justify-content: center; padding: 0; }
    .clip-time { display: none; }
}

/* Lead list filters: the Add filter and Save view menus, the chips for filters in use, the editor for one filter */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-bar .filters { flex: 1 1 auto; }
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] > summary { border-color: var(--accent); }
.menu-panel { position: absolute; left: 0; top: 46px; z-index: 6; width: min(300px, calc(100vw - 32px)); max-height: 400px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: 0 8px 24px rgb(15 23 42 / 0.12); }
.menu-right .menu-panel { left: auto; right: 0; }
.menu-group { padding: 10px 10px 4px; color: var(--faint); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.menu-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 10px; border-radius: 6px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.menu-item:hover { background: #F1F5F9; color: var(--ink); }
.menu-item svg { flex: none; color: var(--accent); }
.menu-form { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.menu-form input { min-height: 40px; padding: 0 12px; border: 1px solid #CBD5E1; border-radius: 8px; }
.asked { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; color: var(--muted); white-space: nowrap; }
.asked svg { flex: none; color: var(--accent); }
.asked-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 500; }
.asked-missed { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.asked-missed::before { content: "·"; margin-right: 10px; }
.asked a { flex: none; }
.chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; max-width: 100%; min-height: 34px; border: 1px solid #BFDBFE; border-radius: 999px; background: var(--accent-soft); }
.chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px 0 12px; color: var(--accent-dark); font-weight: 500; text-decoration: none; }
.chip-text:hover { text-decoration: underline; }
.chip-remove { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--accent-dark); }
.chip-remove:hover { background: #DBEAFE; }
.filter-editor { max-width: 720px; }
.filter-editor h2 { margin: 0; }
.filter-editor .field-row > .field { flex: 1 1 200px; }
.filter-editor .field select { min-height: 44px; }
.choices { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; max-height: 300px; overflow-y: auto; }
.choices .check { min-height: 32px; max-width: 100%; white-space: nowrap; }
.choices-short .check { width: 64px; }

/* Sortable column headings: click to sort, click again to flip */
.leads th a.sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.leads th a.sort:hover { color: var(--ink); }
.leads th[aria-sort] { color: var(--ink); }
.sort-icon { flex: none; color: #CBD5E1; }
.leads th a.sort:hover .sort-icon, .leads th[aria-sort] .sort-icon { color: var(--accent); }

/* The header box's examples, under the empty box: a click puts one in the box */
.search { position: relative; }
.search-tips { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; gap: 2px; padding: 8px 6px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: 0 12px 32px rgb(15 23 42 / 0.18); }
.search-tips[hidden] { display: none; }
.search-tips p { margin: 0 10px 4px; }
.search-tip { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.search-tip:hover, .search-tip:focus-visible { background: #F1F5F9; }
.search-tip-kind { flex: none; width: 76px; color: var(--accent); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

/* How many: a count from the header box, split one line per source, stage, day... */
.count-card { max-width: 720px; }
.count-rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.count-rows li { display: flex; align-items: center; gap: 12px; min-height: 24px; white-space: nowrap; }
.count-label { flex: 0 0 200px; min-width: 0; }
.count-bar { flex: 1 1 auto; min-width: 40px; height: 8px; fill: var(--accent); }
.count-num { flex: 0 0 56px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* A command from the header box on the lead page: what will be saved, one line each, saved by hand */
.command { border-color: #BFDBFE; box-shadow: 0 0 0 3px var(--accent-soft); scroll-margin-top: 12px; }
.command h2.asked { margin-bottom: 12px; font-size: 14px; }
.command .alert { margin-bottom: 12px; }
.command-form { display: flex; flex-direction: column; gap: 10px; }
.command-row { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; }
.command-row-top { align-items: flex-start; }
.command-row-top .command-label { padding-top: 10px; }
.command-label { flex: 0 0 84px; color: var(--muted); font-weight: 500; }
.command-row input, .command-row textarea { min-height: 40px; padding: 0 12px; border: 1px solid #CBD5E1; border-radius: 8px; background: var(--card); }
.command-row textarea { padding: 10px 12px; white-space: pre-wrap; resize: vertical; }
.command-row .grow { flex: 1 1 auto; min-width: 0; }
.command-row select { min-height: 40px; max-width: 100%; padding: 0 32px 0 12px; border: 1px solid #CBD5E1; border-radius: 8px; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; appearance: none; cursor: pointer; }
.command-buttons { display: flex; gap: 8px; padding-left: 94px; }
/* The lead page's Email box: one line closed (who it's to, from which mailbox), the form when open. */
.compose > summary { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; cursor: pointer; list-style: none; }
.compose > summary::-webkit-details-marker { display: none; }
.compose > summary h2 { margin: 0; }
.compose[open] > summary { margin-bottom: 12px; }
.compose .alert { margin-bottom: 12px; }
.command-hint { margin: 0; padding-left: 94px; }

@media (max-width: 640px) {
    .count-label { flex-basis: 120px; }
    .command h2.asked .muted { display: none; }
    .command-row { flex-wrap: wrap; }
    .command-label { flex-basis: 100%; }
    .command-row-top .command-label { padding-top: 0; }
    .command-row .grow { flex-basis: 100%; }
    .command-buttons, .command-hint { padding-left: 0; }
}

/* Users and teams */
.flash { padding: 12px 14px; border: 1px solid #86EFAC; border-radius: 10px; background: var(--ok-bg); color: var(--ok-text); }
.people tr.is-off td { color: var(--faint); }
.people tr.is-off .lead-name { color: var(--muted); }
.teams-card { display: flex; flex-direction: column; gap: 12px; }
.teams-card h2 { margin: 0; }
/* Settings, Web phone: the account's numbers, getting one by area code, and who calls from which (051). One line each. */
.phone-settings > summary, .return-card > summary { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; cursor: pointer; list-style: none; }
.phone-settings > summary::-webkit-details-marker, .return-card > summary::-webkit-details-marker { display: none; }
.phone-settings[open] > summary, .return-card[open] > summary { margin-bottom: 12px; }
.summary-link { flex: none; color: var(--accent); font-size: 13px; font-weight: 600; }
.phone-settings[open] .when-closed, .phone-settings:not([open]) .when-open,
.return-card[open] .when-closed, .return-card:not([open]) .when-open { display: none; }
/* A lead's standing with its vendor (074): one line each, under its header. */
.return-line, .return-card { padding-top: 10px; padding-bottom: 10px; }
.return-line .inline-form { flex: none; margin: 0; }
.return-form { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.return-form select { flex: none; max-width: 45%; }
.return-form input.grow { flex: 1; min-width: 0; }
.card-focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.card-line { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; }
.phone-settings > summary h2, .card-line h2 { margin: 0; }
a.summary-link { text-decoration: none; }
.caller-id-form .field select { min-height: 44px; }
.texting-form .field select { min-height: 44px; }
.texting-volume { margin: 0; padding: 0; border: 0; display: grid; gap: 4px; }
.texting-volume legend { margin-bottom: 4px; padding: 0; font-weight: 500; }
.texting-volume .check, .texting-form > .card > .check { min-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.number-list li, .caller-list li { min-width: 0; }
/* Bring your number (067): what Twilio says about each number, then each number's name and PIN. */
.port-checks .tag { flex: none; margin: 0; }
.tag-good { background: var(--ok-bg); color: var(--ok-text); font-weight: 500; }
.port-numbers li { flex-wrap: wrap; padding: 6px 0; }
.port-numbers li strong { flex: none; min-width: 130px; }
.port-numbers li input { flex: 1 1 200px; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid #CBD5E1; border-radius: 8px; background: var(--card); font: inherit; color: inherit; }
.port-numbers li input.pin { flex: 0 1 120px; }
.port-head h2 { flex: none; max-width: 100%; } /* the numbers first; where it is gives way (the paragraph below says it too) */
.port-head .port-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.port-sent dt { flex: none; }
.port-sent dd { flex: 0 1 auto; min-width: 0; }
.number-list .confirm-row { width: 100%; min-width: 0; }
.number-find { max-width: 640px; flex-wrap: wrap; }
.number-find input { flex: 1 1 160px; max-width: 220px; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid #CBD5E1; border-radius: 8px; background: var(--card); }
.number-picks { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; border: 0; min-width: 0; }
.number-picks .check { min-height: 36px; min-width: 0; }
.caller-list label { flex: 1 1 0; min-width: 0; }
.caller-list .select { flex: none; width: min(300px, 58%); }
.caller-list select { width: 100%; }
.row-actions { display: flex; justify-content: flex-end; gap: 4px; }
.add-team { max-width: 480px; }
.add-team input, .teams-card .inline-form input { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid #CBD5E1; border-radius: 8px; }
.field-fixed { display: flex; align-items: center; min-height: 40px; margin: 0; }
.link-box { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid #CBD5E1; border-radius: 8px; background: #F8FAFC; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.person-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.person-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.person-side h2 { margin: 0 0 12px; }
.person-side .card > p.muted { margin: 0 0 14px; }
.person-side .card > p.muted:last-child { margin-bottom: 0; }
.turn-off { border-color: var(--warn-line); }
/* Lead distribution */
.page-head .head-link { margin-left: auto; }
.rules .rule-name { max-width: 260px; }
.rules .rule-which { max-width: 320px; color: var(--muted); }
.rules .rule-to { max-width: 240px; }
.move-form { display: flex; justify-content: flex-end; gap: 2px; }
.move-btn { width: 32px; padding: 0; color: var(--muted); }
.move-btn:disabled { opacity: 0.3; cursor: default; }
.rule-set { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 10px; }
.rule-set legend { padding: 0 6px; font-weight: 600; }
.rule-set > p { margin: 0; }
.field-label { color: var(--muted); font-weight: 500; }
.check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 16px; max-height: 220px; overflow-y: auto; }
.check-list .check { min-width: 0; min-height: 32px; }
.check-list .check input { min-height: 0; padding: 0; } /* not the text box size that .field input gives */
.choice-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.choice-row .check { flex: 0 0 190px; }
.choice-row select { flex: 1 1 200px; min-width: 0; max-width: 320px; min-height: 40px; padding: 0 10px; border: 1px solid #CBD5E1; border-radius: 8px; background: var(--card); }
.field-short-wide input { max-width: 200px; }
.field-short-wide p { margin: 0; }
@media (max-width: 640px) {
    .rules .rule-name { max-width: 170px; }
    .rules .rule-to { max-width: 130px; }
}
.rule-delete { border-top: 1px solid var(--line-soft); padding-top: 12px; }
.btn-warn-text { padding-left: 0; color: var(--warn-strong); }
.turns-form .field-row > .field { flex: 1 1 160px; }

/* People in roles on a lead, and someone's usual helpers */
.people-fields { gap: 12px; }
.people-fields:empty { display: none; }
.rows + .people-fields { margin-top: 12px; }
.people-rows { display: flex; flex-direction: column; gap: 8px; }
.person-row { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); align-items: center; gap: 12px; min-height: 40px; margin: 0; }
.person-role { color: var(--muted); font-weight: 500; }
.person-row select { width: 100%; max-width: 320px; }
.confirm-row { display: flex; align-items: center; gap: 8px; width: 0; min-width: 100%; } /* fills the row without widening the table */
@media (max-width: 900px) { .person-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .wide-only { display: none; } } /* columns a phone leaves out; the person's page has them */
@media (min-width: 641px) { .phone-only { display: none; } } /* a phone's shorter stand-in for something wide-only */

/* API keys */
.api-keys tr.is-off td { color: var(--faint); }
.api-keys tr.is-off .lead-name { color: var(--muted); }
.revoke-form { align-items: center; }
.revoke-form .ellipsis { flex: 1 1 auto; }
td[colspan] > .revoke-form, .change-row .row-actions { width: 0; min-width: 100%; } /* fills the row without widening the table, so a phone gets an ellipsis */
.new-source { margin: 0; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 10px; }
.new-source legend { padding: 0 6px; }
.new-source[hidden] { display: none; }
.field-cost { flex: 0 1 160px !important; }
.warn-text { color: var(--warn-strong); }
.hooks .hook-url { max-width: 420px; }
.hooks .hook-url .lead-name { display: block; }
.hooks tr.is-off td { color: var(--faint); }
.hook-posts h2 { margin: 8px 0 10px; }
.field textarea.mono { white-space: pre; overflow-x: auto; }

/* API docs (a plain page anyone can read) */
.plain-main:has(.docs) { justify-content: flex-start; }
.docs { width: 100%; max-width: 880px; display: flex; flex-direction: column; gap: 12px; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); line-height: 1.6; }
.docs h2 { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 19px; scroll-margin-top: 16px; }
.docs h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 15px; }
.docs ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.docs code { padding: 1px 5px; border-radius: 4px; background: #F1F5F9; font: 13px ui-monospace, 'SF Mono', Consolas, monospace; }
.docs pre { margin: 0; overflow-x: auto; padding: 14px 16px; border-radius: 10px; background: var(--navy); color: #E2E8F0; font: 13px/1.55 ui-monospace, 'SF Mono', Consolas, monospace; }
.docs h3 code { background: transparent; padding: 0; font-size: 14px; }
.docs-lede { color: var(--muted); font-size: 16px; }
.docs-toc { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.docs-table td { white-space: normal; vertical-align: top; }
.docs-table td:first-child, .docs-table td:nth-child(2) { white-space: nowrap; }
.docs-params { table-layout: fixed; }
.docs-params td:first-child { width: 190px; }
.docs-params td:nth-child(2) { width: 130px; }
.docs-call { display: flex; flex-direction: column; gap: 10px; padding: 16px 0 4px; border-top: 1px solid var(--line-soft); scroll-margin-top: 16px; }
.docs-call-name { color: var(--muted); font-weight: 500; }
.docs-call .tag { margin-left: auto; }
.method { display: inline-block; min-width: 56px; padding: 2px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-dark); font-size: 12px; font-weight: 700; text-align: center; letter-spacing: 0.03em; }
.method-post { background: var(--ok-bg); color: var(--ok-text); }
.method-patch { background: #FFEDD5; color: var(--warn-strong); }
@media (max-width: 640px) {
    .docs { padding: 20px 16px; }
    .docs-call .tag { margin-left: 0; }
    .docs-params td:first-child { width: 140px; }
    .docs-params td:nth-child(2) { display: none; }
}

/* Calendar. A wide screen gets a grid of 15-minute rows (an appointment's place comes from its cal-r and cal-s
   classes, since the page allows no inline styles); a phone gets the same things as a list, one line each. */
.cal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cal-bar { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cal-nav { display: flex; flex: none; gap: 6px; }
.cal-nav .btn { padding: 0 11px; }
.cal-range { flex: 1 1 auto; margin: 0; font-size: 17px; }
.seg { display: inline-flex; flex: none; border: 1px solid #CBD5E1; border-radius: 8px; background: var(--card); overflow: hidden; }
.seg a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; color: var(--muted); font-weight: 500; text-decoration: none; }
.seg a + a { border-left: 1px solid #CBD5E1; }
.seg a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.cal { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.cal-row { display: grid; grid-template-columns: 72px repeat(7, minmax(0, 1fr)); }
.cal-1 .cal-row { grid-template-columns: 72px minmax(0, 1fr); }
.cal-heads { border-bottom: 1px solid var(--line); }
.cal-head { display: flex; align-items: baseline; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 4px; border-left: 1px solid var(--line-soft); color: var(--muted); text-decoration: none; white-space: nowrap; }
.cal-head strong { color: var(--ink); font-size: 16px; }
.cal-head:hover { background: #F8FAFC; color: var(--muted); }
.cal-head.is-today strong { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 999px; background: var(--accent); color: #fff; }
.cal-calls { border-bottom: 1px solid var(--line); }
.cal-label { padding: 9px 8px 0 0; color: var(--faint); font-size: 11px; text-align: right; white-space: nowrap; }
.cal-callcell { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 6px 4px; border-left: 1px solid var(--line-soft); }
.cal-call { display: flex; gap: 6px; min-width: 0; padding: 2px 6px; border-radius: 6px; background: var(--warn-bg); color: var(--warn-text); font-size: 12px; text-decoration: none; }
.cal-call:hover { color: var(--warn-strong); }
.cal-body { max-height: 70vh; overflow-y: auto; }
.cal-hours, .cal-col { display: grid; grid-auto-rows: 14px; padding-top: 8px; }
.cal-col { border-left: 1px solid var(--line-soft); background-image: repeating-linear-gradient(to bottom, var(--line-soft) 0 1px, transparent 1px 56px); background-position: 0 8px; }
.cal-col.is-today { background-color: #FAFBFF; }
.cal-hour { grid-column: 1; grid-row-end: span 4; padding-right: 8px; color: var(--faint); font-size: 11px; line-height: 1; text-align: right; transform: translateY(-5px); white-space: nowrap; }
.cal-end { grid-column: 1; }
.cal-item { grid-column: 1; display: flex; align-items: flex-start; gap: 6px; min-width: 0; margin: 1px 4px; padding: 0 6px; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--accent-soft); color: var(--accent-dark); font-size: 12px; line-height: 12px; text-decoration: none; overflow: hidden; }
.cal-item > span { padding-top: 1px; }
.cal-busy { grid-column: 1; margin: 1px 2px; border-radius: 6px; background: repeating-linear-gradient(135deg, #EEF0F4 0 6px, #E4E7EC 6px 12px); }
.cal-note { display: flex; align-items: center; gap: 6px; margin: -4px 0 10px; font-size: 13px; }
.cal-busy-key { width: 14px; height: 14px; border-radius: 4px; background: repeating-linear-gradient(135deg, #EEF0F4 0 3px, #E4E7EC 3px 6px); }
.cal-item:hover { background: #DCE5FB; color: var(--accent-dark); }
.cal-item.by-lead { border-left-color: var(--ok-text); background: var(--ok-bg); color: var(--ok-text); }
.cal-list { display: none; flex-direction: column; gap: 12px; }
.cal-list-day h2 { margin: 0 0 4px; }
.cal-list-day h2.is-today { color: var(--accent); }
.cal-list-day .plain-list { margin: 0; }
.cal-list-day .plain-list li:last-child { border-bottom: 0; }
.cal-line-time { flex: none; width: 64px; color: var(--muted); white-space: nowrap; }
@media (max-width: 900px) {
    .cal { display: none; }
    .cal-list { display: flex; }
    .cal-bar { flex-wrap: wrap; }
    .cal-range { order: 3; flex-basis: 100%; }
}
.cal-r1{grid-row-start:1} .cal-r2{grid-row-start:2} .cal-r3{grid-row-start:3} .cal-r4{grid-row-start:4} .cal-r5{grid-row-start:5} .cal-r6{grid-row-start:6} .cal-r7{grid-row-start:7} .cal-r8{grid-row-start:8} .cal-r9{grid-row-start:9} .cal-r10{grid-row-start:10} .cal-r11{grid-row-start:11} .cal-r12{grid-row-start:12} .cal-r13{grid-row-start:13} .cal-r14{grid-row-start:14} .cal-r15{grid-row-start:15} .cal-r16{grid-row-start:16} .cal-r17{grid-row-start:17} .cal-r18{grid-row-start:18} .cal-r19{grid-row-start:19} .cal-r20{grid-row-start:20} .cal-r21{grid-row-start:21} .cal-r22{grid-row-start:22} .cal-r23{grid-row-start:23} .cal-r24{grid-row-start:24} .cal-r25{grid-row-start:25} .cal-r26{grid-row-start:26} .cal-r27{grid-row-start:27} .cal-r28{grid-row-start:28} .cal-r29{grid-row-start:29} .cal-r30{grid-row-start:30} .cal-r31{grid-row-start:31} .cal-r32{grid-row-start:32} .cal-r33{grid-row-start:33} .cal-r34{grid-row-start:34} .cal-r35{grid-row-start:35} .cal-r36{grid-row-start:36} .cal-r37{grid-row-start:37} .cal-r38{grid-row-start:38} .cal-r39{grid-row-start:39} .cal-r40{grid-row-start:40} .cal-r41{grid-row-start:41} .cal-r42{grid-row-start:42} .cal-r43{grid-row-start:43} .cal-r44{grid-row-start:44} .cal-r45{grid-row-start:45} .cal-r46{grid-row-start:46} .cal-r47{grid-row-start:47} .cal-r48{grid-row-start:48} .cal-r49{grid-row-start:49} .cal-r50{grid-row-start:50} .cal-r51{grid-row-start:51} .cal-r52{grid-row-start:52} .cal-r53{grid-row-start:53} .cal-r54{grid-row-start:54} .cal-r55{grid-row-start:55} .cal-r56{grid-row-start:56} .cal-r57{grid-row-start:57} .cal-r58{grid-row-start:58} .cal-r59{grid-row-start:59} .cal-r60{grid-row-start:60} .cal-r61{grid-row-start:61} .cal-r62{grid-row-start:62} .cal-r63{grid-row-start:63} .cal-r64{grid-row-start:64} .cal-r65{grid-row-start:65} .cal-r66{grid-row-start:66} .cal-r67{grid-row-start:67} .cal-r68{grid-row-start:68} .cal-r69{grid-row-start:69} .cal-r70{grid-row-start:70} .cal-r71{grid-row-start:71} .cal-r72{grid-row-start:72} .cal-r73{grid-row-start:73} .cal-r74{grid-row-start:74} .cal-r75{grid-row-start:75} .cal-r76{grid-row-start:76} .cal-r77{grid-row-start:77} .cal-r78{grid-row-start:78} .cal-r79{grid-row-start:79} .cal-r80{grid-row-start:80} .cal-r81{grid-row-start:81} .cal-r82{grid-row-start:82} .cal-r83{grid-row-start:83} .cal-r84{grid-row-start:84} .cal-r85{grid-row-start:85} .cal-r86{grid-row-start:86} .cal-r87{grid-row-start:87} .cal-r88{grid-row-start:88} .cal-r89{grid-row-start:89} .cal-r90{grid-row-start:90} .cal-r91{grid-row-start:91} .cal-r92{grid-row-start:92} .cal-r93{grid-row-start:93} .cal-r94{grid-row-start:94} .cal-r95{grid-row-start:95} .cal-r96{grid-row-start:96}
.cal-s1{grid-row-end:span 1} .cal-s2{grid-row-end:span 2} .cal-s3{grid-row-end:span 3} .cal-s4{grid-row-end:span 4} .cal-s5{grid-row-end:span 5} .cal-s6{grid-row-end:span 6} .cal-s7{grid-row-end:span 7} .cal-s8{grid-row-end:span 8} .cal-s9{grid-row-end:span 9} .cal-s10{grid-row-end:span 10} .cal-s11{grid-row-end:span 11} .cal-s12{grid-row-end:span 12} .cal-s13{grid-row-end:span 13} .cal-s14{grid-row-end:span 14} .cal-s15{grid-row-end:span 15} .cal-s16{grid-row-end:span 16} .cal-s17{grid-row-end:span 17} .cal-s18{grid-row-end:span 18} .cal-s19{grid-row-end:span 19} .cal-s20{grid-row-end:span 20} .cal-s21{grid-row-end:span 21} .cal-s22{grid-row-end:span 22} .cal-s23{grid-row-end:span 23} .cal-s24{grid-row-end:span 24} .cal-s25{grid-row-end:span 25} .cal-s26{grid-row-end:span 26} .cal-s27{grid-row-end:span 27} .cal-s28{grid-row-end:span 28} .cal-s29{grid-row-end:span 29} .cal-s30{grid-row-end:span 30} .cal-s31{grid-row-end:span 31} .cal-s32{grid-row-end:span 32}
.field-wide { max-width: 340px; }
.hours { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; }
.hours legend { margin-bottom: 6px; padding: 0; }
.hours-row { display: grid; grid-template-columns: 130px minmax(0, 120px) auto minmax(0, 120px); align-items: center; gap: 10px; }
@media (max-width: 640px) {
    .hours-row { grid-template-columns: 64px minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
    .hours-row select { padding: 0 24px 0 10px; background-position: right 6px center; }
}
.hours-row:has(input:not(:checked)) select, .hours-row:has(input:not(:checked)) > .muted { opacity: 0.45; }
.booking-link { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; padding: 10px; border: 1px solid #BFDBFE; border-radius: 10px; background: #F8FAFF; }
.booking-link p { margin: 0; }
.booking-link .inline-actions { gap: 6px; }

/* The booking page a lead sees */
.book-main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 16px 24px; }
.book-head { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 4px; }
.book-head p { margin: 0; }
.book-company { color: var(--accent); font-weight: 600; }
.book-card { width: 100%; max-width: 640px; margin: 0; }
section.book-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
section.book-card p { margin: 0; }
.book-when { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.book-zone { align-items: center; }
.book-zone select { flex: 0 1 220px; }
.book-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.book-days { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }
.book-day { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.book-day:hover { background: #F1F5F9; color: var(--ink); }
.book-day[aria-current] { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.book-times { display: flex; flex-direction: column; gap: 8px; }
.book-times h2 { margin: 6px 0 2px; }
.book-time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.book-time { border-color: #BFDBFE; color: var(--accent); font-weight: 600; }
.book-time:hover { border-color: var(--accent); background: var(--accent-soft); }
.book-foot { margin: auto 0 0; padding-top: 24px; color: var(--faint); font-size: 12px; }
@media (max-width: 560px) {
    .book-pick { grid-template-columns: minmax(0, 1fr); }
    .book-days { max-height: 220px; }
}

/* Shortcut bar on the right: thin icons; a panel opens to their left, over the page. Wide screens only. */
.rail { flex: 0 0 52px; align-self: stretch; min-height: calc(100vh - 60px); border-left: 1px solid var(--line); background: var(--card); } /* down to the bottom under the 60px top bar */
.rail-inner { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 0; }
.rail-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--muted); }
.rail-btn:hover, .rail-btn[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
.rail-count { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #FB923C; color: #FFFFFF; font-size: 11px; font-weight: 600; line-height: 16px; text-align: center; }
.shortcut-panel { position: absolute; top: 8px; right: calc(100% + 8px); z-index: 30; width: 380px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16); }
.shortcut-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.shortcut-head h2 { margin: 0; }
.shortcut-head a { font-size: 13px; }
.shortcut-list { margin: 0; }
.shortcut-list li:last-child { border-bottom: 0; }
.shortcut-list li.is-past { opacity: .55; }
.shortcut-list li.is-due .shortcut-time { color: var(--warn-strong); font-weight: 600; }
.shortcut-time { flex: none; min-width: 64px; color: var(--muted); white-space: nowrap; }
.shortcut-name { flex: 0 0 auto; max-width: 55%; } /* the note gives way before the name does */
.shortcut-note { flex: 0 1 auto; margin-left: auto; }
.shortcut-page { max-width: 560px; }
.shortcut-loading { padding: 8px 0; }
@media (max-width: 900px) { .rail { display: none; } }

/* Dashboard: filters in one row, stat tiles, the funnel and goals as meters (SVG widths in %, so no inline styles), the
   chart, and tables by source and person. */
.dash-head h1 { margin-right: auto; }
.dash-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-filters input[type="date"] { min-height: 40px; padding: 0 10px; border: 1px solid #CBD5E1; border-radius: 8px; background: var(--card); }
.dash-range { margin: 6px 0 16px; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.tile-label { color: var(--muted); font-size: 13px; font-weight: 500; }
.tile-value { color: var(--ink); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.tile-under { color: var(--text); font-size: 13px; }
.tile-change { margin-top: auto; padding-top: 4px; font-size: 12px; }
.tile-way { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-weight: 600; }
.is-good .tile-way { background: var(--ok-bg); color: var(--ok-text); }
.is-bad .tile-way { background: var(--stop-bg); color: var(--stop-text); }
.is-flat .tile-way { background: #F1F5F9; color: var(--muted); }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.dash-card { min-width: 0; }
.dash-section { margin-top: 16px; }
.funnel, .goals { margin: 0 0 10px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.funnel li { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr) 64px 44px; align-items: center; gap: 12px; }
.funnel-count, .funnel-share { text-align: right; white-space: nowrap; }
.goals li { display: grid; grid-template-columns: minmax(0, 130px) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 16px; }
.goal-part { display: grid; grid-template-columns: minmax(32px, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.goal-text { color: var(--text); font-size: 13px; white-space: nowrap; }
.meter { display: block; }
.meter-track { fill: var(--accent-soft); }
.meter-fill { fill: var(--accent); }
.chart-box { position: relative; }
.chart { display: block; overflow: visible; }
.chart-tip { position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12px; white-space: nowrap; pointer-events: none; transform: translate(-50%, calc(-100% - 8px)); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18); }
.chart-tip[hidden] { display: none; }
.chart-tip strong { font-weight: 600; }
.chart-tip span { color: #CBD5E1; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .bar { fill: var(--accent); }
.chart .col:hover .bar { fill: var(--accent-dark); }
.chart .hit { fill: transparent; }
.chart-table { margin-top: 8px; }
.chart-table summary { color: var(--accent); font-size: 13px; cursor: pointer; }
.chart-table .table-box { max-height: 320px; margin-top: 8px; overflow-y: auto; }
.dash-table .num { text-align: right; }
.import-holders { width: auto; min-width: 320px; }
.import-holders .num { text-align: right; }
@media (max-width: 1200px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
    .funnel li { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) 52px; }
    .funnel-share { display: none; }
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chart .axis.alt { display: none; }
    .goals li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .dash-filters select, .dash-filters input[type="date"] { flex: 1 1 140px; }
}
.goals-form .leads td, .goals-form .leads th { padding-top: 8px; padding-bottom: 8px; }
.goal-for { font-weight: 400; }
.goal-input { width: 100%; min-width: 120px; min-height: 40px; padding: 0 12px; border: 1px solid #CBD5E1; border-radius: 8px; background: var(--card); }

/* CSV import: one line per column of the file */
.wide-form { max-width: 880px; }
.imports .file { max-width: 280px; }
.import-columns th, .import-columns td { padding-top: 8px; padding-bottom: 8px; }
.import-columns .col-name { max-width: 260px; color: var(--ink); font-weight: 600; }
.import-columns .col-example { max-width: 260px; }
.import-columns .select, .import-columns select { width: 100%; min-width: 220px; }
.import-tiles { margin-bottom: 0; }
.import-settings .field select { min-height: 44px; }
.field input[type="file"] { padding: 9px 12px; }
@media (max-width: 640px) {
    .import-columns .col-name { max-width: 110px; }
    .import-columns .select, .import-columns select { min-width: 132px; }
}

/* The lead list's tick boxes and row icons, and the bar for changes to many leads. The icons show over the row's right
   end while it's pointed at or focused, from a last cell with no width that stays in view as the table scrolls sideways. */
.lead-list tbody tr { --row-bg: var(--card); background: var(--row-bg); }
.lead-list tbody tr.is-waiting { --row-bg: #FFFBF5; }
.lead-list tbody tr:hover, .lead-list tbody tr:focus-within { --row-bg: #F8FAFC; }
.lead-list tbody tr:has(.pick input:checked) { --row-bg: var(--accent-soft); }
.lead-list th.pick, .lead-list td.pick { width: 1px; padding-right: 0; }
.lead-list .pick input { display: block; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
/* Each row's quick actions: always shown, as small colored tiles (button style B) right after the lead's name. */
.lead-list th.act, .lead-list td.act { width: 1px; padding-left: 4px; }
.quick-actions { display: flex; gap: 4px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: var(--muted); }
.icon-btn:hover { background: #E2E8F0; color: var(--ink); }
.quick-actions .icon-btn { --ib: #475569; --ib-soft: #F1F5F9; border: 1px solid color-mix(in srgb, var(--ib) 18%, transparent); background: var(--ib-soft); color: var(--ib); transition: background .12s, color .12s; }
.quick-actions .icon-btn:hover { background: var(--ib); color: #FFFFFF; }
.quick-actions .ib-call { --ib: #15803D; --ib-soft: #ECFDF3; }
.quick-actions .ib-text { --ib: #0F766E; --ib-soft: #E6FAF7; }
.quick-actions .ib-email { --ib: #1D4ED8; --ib-soft: #EEF3FE; }
.quick-actions .ib-note { --ib: #475569; --ib-soft: #F1F5F9; }
.quick-actions .ib-callback { --ib: #B45309; --ib-soft: #FFF7EA; }
.quick-actions .ib-book { --ib: #7C3AED; --ib-soft: #F4EEFF; }
.quick-actions .icon-btn.is-off, .icon-btn.is-off { border-color: transparent; background: none; color: #CBD5E1; }
@media (prefers-reduced-motion: reduce) { .quick-actions .icon-btn { transition: none; } }
@media (forced-colors: active) { .quick-actions .icon-btn { border: 1px solid ButtonText; } }
.phone-link { color: inherit; text-decoration: none; }
.phone-link:hover { color: var(--accent); text-decoration: underline; }

.bulk-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 8px 8px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); white-space: nowrap; }
.bulk-count { color: var(--ink); font-weight: 600; }
.bulk-bar [hidden] { display: none; }
.bulk-grip { display: none; }
/* With JavaScript the bar floats over the page once a lead is ticked: dark so it stands out, near the top of the screen
   above the tick boxes, and wherever it's dragged to after that (app.js places it and remembers the spot). */
.js .bulk-bar { position: fixed; left: 24px; top: 16px; z-index: 20; max-width: calc(100vw - 32px); margin: 0; padding-left: 4px; border-color: var(--navy); background: var(--navy); color: #FFFFFF; box-shadow: 0 16px 40px rgb(15 23 42 / 0.35); }
.js .bulk-bar:not(.is-on) { display: none; }
.js .bulk-bar.is-new { animation: bulk-in 0.25s ease-out; }
@keyframes bulk-in { from { opacity: 0; transform: translateY(-8px) scale(0.97); } }
@media (prefers-reduced-motion: reduce) { .js .bulk-bar.is-new { animation: none; } }
.js .bulk-grip { display: flex; align-items: center; justify-content: center; width: 24px; height: 32px; border-radius: 6px; color: #94A3B8; cursor: grab; touch-action: none; }
.js .bulk-grip:hover { color: #FFFFFF; background: var(--navy-2); }
.js .bulk-bar.is-dragging, .js .bulk-bar.is-dragging .bulk-grip { cursor: grabbing; user-select: none; }
.js .bulk-bar .bulk-count { color: #FFFFFF; }
.js .bulk-bar .btn { border-color: var(--navy-line); background: var(--navy-2); color: #FFFFFF; }
.js .bulk-bar .btn:hover { background: var(--navy-line); }
.js .bulk-bar .btn-quiet { border-color: transparent; background: transparent; color: #BFDBFE; }
.js .bulk-bar .bulk-clear { color: #CBD5E1; }
.js .bulk-bar.is-low .menu-panel { top: auto; bottom: 42px; } /* dragged to the lower half: menus open upward */
button.menu-item { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
/* The bulk bar's Bulk actions menu: an icon, then what it does. */
.bulk-more .menu-panel { width: min(280px, calc(100vw - 32px)); max-height: 440px; }
.bulk-more .menu-item { justify-content: flex-start; gap: 10px; }
.mi-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 7px; background: #F1F5F9; }
.mi-icon svg, .menu-item .mi-icon svg { color: #475569; }
.mi-call { background: #ECFDF3; } .mi-call svg, .menu-item .mi-call svg { color: #15803D; }
.mi-email { background: #EEF3FE; } .mi-email svg, .menu-item .mi-email svg { color: #1D4ED8; }
.mi-vaulty { background: #F4EEFF; } .mi-vaulty svg, .menu-item .mi-vaulty svg { color: #7C3AED; }
.mi-drip { background: #E6FAF7; } .mi-drip svg, .menu-item .mi-drip svg { color: #0F766E; }
.menu-item.is-danger, .menu-item.is-danger:hover { color: #B91C1C; }
.menu-item.is-danger .mi-icon { background: #FEF2F2; } .menu-item.is-danger .mi-icon svg { color: #B91C1C; }
.menu-rule { margin: 6px 4px; border: 0; border-top: 1px solid var(--line); }
.bulk-clear { width: 32px; padding: 0; color: var(--muted); }

.dialog { width: min(520px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: 0 24px 48px rgb(15 23 42 / 0.2); }
.dialog::backdrop { background: rgb(15 23 42 / 0.4); }
.dialog h2 { margin: 0; font-size: 18px; }
.dialog-small { width: min(420px, calc(100vw - 32px)); }
@media (max-width: 640px) {
    .bulk-bar { gap: 4px; padding-left: 12px; }
    .js .bulk-bar { left: 16px !important; right: 16px; top: auto !important; bottom: 16px; padding-left: 12px; } /* a phone keeps it at the bottom, full width */
    .js .bulk-grip { display: none; }
    .js .bulk-bar .menu-panel { top: auto; bottom: 42px; }
    .bulk-bar .btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* icons only; the words stay for screen readers */
    .bulk-bar .btn-small { padding: 0 8px; }
}
.dialog [hidden] { display: none; }

/* The call panel (phone.js, _CallPanel), docked on the right at full height, like Shape's web phone. On a wide screen
   the page makes room for it; on a narrower one it sits over the page, and on a phone it fills the screen. */
.call-dock { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; display: flex; flex-direction: column; width: 400px; max-width: 100vw;
             border-left: 1px solid var(--line); background: var(--card); box-shadow: -16px 0 40px rgb(15 23 42 / 0.16); }
.call-dock[hidden], .call-dock [hidden] { display: none; }
@media (min-width: 1180px) {
    body.has-dock { padding-right: 400px; }
    body.has-dock .call-dock { box-shadow: none; }
}
.dock-top { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.dock-label { color: var(--muted); font-weight: 500; }
.dock-stage { min-width: 0; max-width: 220px; height: 34px; padding: 0 30px 0 12px; border: 1px solid #BFDBFE; border-radius: 999px; background-color: var(--accent-soft);
              color: var(--accent-dark); font-weight: 600; text-overflow: ellipsis; }
.dock-kind { margin-left: auto; color: var(--muted); font-weight: 500; white-space: nowrap; }
.dock-bar { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 8px 0 16px; background: var(--navy); color: #FFFFFF; font-weight: 500; }
.dock-close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: #FFFFFF; cursor: pointer; }
.dock-close:hover { background: var(--navy-2); }
.dock-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 16px 24px; }
.dock-name { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; text-align: center; }
.dock-name a { color: var(--ink); text-decoration: none; }
.dock-name a:hover { color: var(--accent); }
.dock-number { margin-top: 2px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.dock-time { min-height: 34px; margin: 10px 0 6px; color: var(--faint); font-size: 26px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.dock-time:empty { min-height: 0; margin: 0; }
.dock-note { margin: 8px 0; color: var(--muted); font-size: 13px; text-align: center; }
.call-dock .alert { margin: 8px 0; }
.dock-buttons { display: flex; gap: 8px; margin: 10px 0 4px; }
.dock-buttons .btn { flex: 1; justify-content: center; }
.dock-buttons .btn[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #FFFFFF; }
.call-dock .btn-stop { border-color: #DC2626; background: #DC2626; color: #FFFFFF; }
.call-dock .btn-stop:hover { background: #B91C1C; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.keypad .btn { justify-content: center; font-variant-numeric: tabular-nums; }
.dock-form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.dock-form .field { margin: 0; }
.dock-form textarea { resize: vertical; }
.dock-form .field-row { flex-wrap: nowrap; gap: 10px; }
.dock-form .field-row > .field { flex: 1 1 0; min-width: 0; }
.call-dock .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.dock-next { display: flex; flex-direction: column; gap: 8px; }
.dock-next.is-offered { padding: 12px; border-radius: 10px; background: var(--accent-soft); }
.dock-warn { padding: 10px 12px; border: 1px solid var(--warn-line); border-radius: 10px; background: var(--warn-bg); color: var(--warn-text); }
.when-chips { display: flex; gap: 6px; }
.when-chip { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid #BFDBFE; border-radius: 999px; background: var(--card); color: var(--accent-dark);
             font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.when-chip:hover { background: #DBEAFE; }
.when-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #FFFFFF; }
.dock-actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 640px) {
    .call-dock { width: 100vw; border-left: 0; }
}

/* A call coming in (066): one dark bar at the top, over everything, with who's calling and Answer. */
.ring-bar { position: fixed; top: 12px; left: 50%; z-index: 60; display: flex; align-items: center; gap: 10px; width: min(560px, calc(100vw - 32px));
            min-height: 56px; padding: 8px 8px 8px 12px; border-radius: 14px; background: var(--navy); color: #FFFFFF; transform: translateX(-50%);
            box-shadow: 0 16px 40px rgb(15 23 42 / 0.32); }
.ring-bar[hidden] { display: none; }
.ring-icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: #16A34A; animation: ring-pulse 1.2s ease-in-out infinite; }
.ring-text { min-width: 0; }
.ring-line { color: #CBD5E1; font-variant-numeric: tabular-nums; }
.ring-bar .btn { flex: none; }
.ring-bar .btn-answer { border-color: #16A34A; background: #16A34A; color: #FFFFFF; font-weight: 600; }
.ring-bar .btn-answer:hover { background: #15803D; }
.ring-bar .btn-quiet { color: #E2E8F0; }
.ring-bar .btn-quiet:hover { background: var(--navy-2); color: #FFFFFF; }
@keyframes ring-pulse { 50% { box-shadow: 0 0 0 6px rgb(22 163 74 / 0.35); } }
@media (prefers-reduced-motion: reduce) { .ring-icon { animation: none; } }
@media (max-width: 640px) {
    .ring-line { display: none; }
}

/* Vaulty's summary of a recorded call, over its words on the timeline. */
.call-summary { margin: 0 0 8px 84px; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; }
.call-summary-by { display: block; margin-bottom: 2px; color: var(--accent-dark); font-size: 12px; font-weight: 600; }
.vaulty-heard ul { margin: 2px 0 8px; padding: 0; list-style: none; }
.vaulty-heard form { margin: 0; }
@media (max-width: 640px) {
    .call-summary { margin-left: 0; }
}

/* A recorded call's words, under its line on the timeline. */
.transcript { margin: 0 0 10px 84px; padding: 10px 12px; border-left: 3px solid var(--line); background: #F8FAFC; border-radius: 0 8px 8px 0; }
.transcript p { margin: 0 0 4px; }
@media (max-width: 640px) {
    .transcript { margin-left: 0; }
}

/* Quote forms (/f/...): one question a step, no script needed. Made for the people who fill them in, often older
   (Philip, 2026-11-06, after MortgageRefinance.com's form): big, clear type, large boxes with strong borders, a choice
   a row with an arrow, and the company's logo at the top in a box of its own. */
.qf-main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 40px 16px 24px; background: linear-gradient(180deg, #EEF2FA 0, var(--bg) 320px); }
/* In a frame on a customer's page: the page's own background, and no taller than the form. */
.qf-embed { background: transparent; }
.qf-embed .qf-main { min-height: 0; padding: 2px 2px 8px; background: none; }
.qf-card { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 22px; padding: 0 40px 32px; border: 1px solid #DCE3EE; border-radius: 20px; background: var(--card); box-shadow: 0 1px 2px rgb(15 23 42 / 0.05), 0 12px 32px rgb(15 23 42 / 0.08); font-size: 18px; line-height: 1.5; color: var(--ink); }
.qf-embed .qf-card { box-shadow: 0 1px 2px rgb(15 23 42 / 0.06); }
.qf-card:not(:has(> .qf-brand)) { padding-top: 32px; } /* "This form isn't available" */
.qf-card form { display: flex; flex-direction: column; gap: 20px; }
.qf-card h1 { margin: 0; font-size: 28px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
/* The top: the company's logo (or name), which goes back to the first question. */
.qf-brand { display: flex; align-items: center; justify-content: center; min-height: 88px; margin: 0 -40px; padding: 16px 40px; border-bottom: 1px solid #E5EAF2; }
.qf-home { display: inline-flex; align-items: center; max-width: 100%; border-radius: 8px; text-decoration: none; }
.qf-home:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.qf-logo { display: block; max-width: min(280px, 100%); max-height: 64px; width: auto; height: auto; object-fit: contain; }
.qf-company { color: var(--accent-dark); font-size: 22px; font-weight: 700; }
.qf-choices { display: flex; flex-direction: column; gap: 12px; }
/* The first step under the form's welcome: how long it takes, this week's rates (mortgage), the welcome, the question. */
.qf-time { display: inline-block; align-self: flex-start; margin: 0 0 -6px; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.qf-card .qf-time.small { font-size: 15px; }
.qf-ask { margin: -8px 0 0; color: var(--text); font-size: 20px; font-weight: 500; }
.qf-rates { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border: 1px solid #C7D5F5; border-radius: 16px; background: #F3F6FD; }
.qf-rates p { margin: 0; }
.qf-rates-from { color: var(--muted); font-size: 16px; }
.qf-rates-are { font-weight: 600; }
.qf-rate-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.qf-rate-row li { flex: 1 1 180px; display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px #DCE3EE; white-space: nowrap; }
.qf-rate-row strong { color: var(--accent-dark); font-size: 32px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
.qf-rate-row span { color: var(--text); font-weight: 600; }
/* Choices next to other questions: taps in a row (wrapping), one picked. */
.qf-taps { margin: 0; padding: 0; border: 0; min-width: 0; }
.qf-taps legend { padding: 0; margin-bottom: 8px; color: var(--ink); font-weight: 600; }
.qf-tap-row { display: flex; flex-wrap: wrap; gap: 10px; }
.qf-tap { position: relative; }
.qf-tap input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qf-tap span { display: inline-flex; align-items: center; min-height: 56px; padding: 0 20px; border: 2px solid #CBD5E1; border-radius: 12px; background: var(--card); color: var(--ink); font-size: 18px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.qf-tap span:hover { border-color: var(--accent); background: var(--accent-soft); }
.qf-tap input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.qf-tap input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.qf-taps[aria-invalid="true"] .qf-tap span { border-color: #DC2626; }
.qf-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 0 18px 0 22px; border: 2px solid #CBD5E1; border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; font-size: 20px; font-weight: 600; text-align: left; cursor: pointer; transition: border-color 0.12s, background-color 0.12s; }
a.qf-choice { text-decoration: none; } /* "No, I'll enter my own" opens a page, looks like the others */
.qf-chev { flex: none; color: #94A3B8; }
.qf-choice:hover { border-color: var(--accent); background: var(--accent-soft); }
.qf-choice:hover .qf-chev, .qf-choice[aria-pressed="true"] .qf-chev { color: var(--accent); }
.qf-choice:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.qf-choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.qf-field { display: flex; flex-direction: column; gap: 8px; }
.qf-field label { color: var(--ink); font-weight: 600; }
.qf-field > input, .qf-input { min-height: 64px; border: 2px solid #94A3B8; border-radius: 12px; background: var(--card); font-size: 20px; }
.qf-field > input { padding: 0 16px; color: var(--ink); }
.qf-field > input::placeholder, .qf-input input::placeholder { color: #94A3B8; }
.qf-field > input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgb(29 78 216 / 0.22); }
.qf-field > select { min-height: 64px; border: 2px solid #94A3B8; border-radius: 12px; background: var(--card); font-size: 20px; padding: 0 14px; color: inherit; }
.qf-field select[aria-invalid="true"] { border-color: #DC2626; }
.qf-input { display: flex; align-items: center; gap: 8px; padding: 0 16px; }
.qf-input:focus-within { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgb(29 78 216 / 0.22); }
.qf-input input { flex: 1 1 auto; min-width: 0; min-height: 60px; border: 0; background: transparent; font-size: 20px; color: var(--ink); outline: none; }
.qf-unit { color: var(--faint); font-size: 20px; font-weight: 700; }
.qf-field input[aria-invalid="true"], .qf-input:has(input[aria-invalid="true"]) { border-color: #DC2626; }
.qf-error { margin: 0; color: var(--stop-text); font-size: 17px; font-weight: 600; }
.qf-card .alert { font-size: 17px; }
.qf-next { min-height: 64px; border-radius: 14px; font-size: 20px; font-weight: 700; box-shadow: 0 2px 0 rgb(30 58 138 / 0.35); }
.qf-consent.small { margin: 0; font-size: 12.5px; line-height: 1.5; } /* the calls-and-texts consent: there in full, in fine print */
/* The address step's lookup: what matches what they've typed, under the box, one line each. */
.qf-field:has(> .qf-suggest) { position: relative; }
.qf-suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5; margin: 0; padding: 4px 0; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 8px 24px rgb(15 23 42 / 0.12); }
.qf-suggest li { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 10px 14px; cursor: pointer; white-space: nowrap; overflow: hidden; }
.qf-suggest li[aria-selected="true"], .qf-suggest li:hover { background: var(--accent-soft); }
.qf-suggest .qf-street { flex: none; font-weight: 600; }
.qf-suggest .qf-place { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 16px; }
.qf-suggest .by { min-height: 0; padding: 4px 12px 2px; justify-content: flex-end; color: var(--faint); font-size: 11px; cursor: default; }
.qf-suggest .by:hover { background: none; }
.qf-estimate { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-dark); line-height: 1.5; }
.qf-secure { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 15px; } /* under a date of birth or SSN */
.qf-secure svg { flex: none; }
.qf-optional { font-weight: 400; color: var(--muted); } /* "Apt or unit (optional)" */
/* "Not a US number?" under the phone box: a quiet link that opens the country list. */
.qf-country { margin-top: -8px; }
.qf-country summary { width: fit-content; color: var(--accent-dark); font-size: 16px; cursor: pointer; }
.qf-country select { width: 100%; min-height: 60px; margin-top: 8px; padding: 0 14px; border: 2px solid #94A3B8; border-radius: 12px; background: var(--card); color: inherit; font-size: 18px; }
/* Conversation style: the welcome and each answered question above the current one, as a chat; the answers as
   replies on the right, each with a way back to change it. */
.qf-thread { display: flex; flex-direction: column-reverse; max-height: min(50vh, 480px); overflow-y: auto; margin: 0 -6px; padding: 2px 6px; }
.qf-thread ol { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.qf-bot { align-self: flex-start; max-width: 88%; margin: 0; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: #EEF2F7; color: var(--ink); line-height: 1.45; }
.qf-me { align-self: flex-end; display: flex; align-items: center; gap: 10px; max-width: 88%; }
.qf-me span { padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: var(--accent); color: #fff; line-height: 1.45; overflow-wrap: anywhere; }
.qf-me a { flex: none; color: var(--accent-dark); font-size: 15px; }
.qf-card h1.qf-now { font-size: 20px; font-weight: 600; animation: qf-in 0.25s ease-out; }
@keyframes qf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qf-card h1.qf-now { animation: none; } }
/* An AI form (FormChat): what they typed on this step and the replies, under the question; the message box under the
   step, with the send arrow; the AI note; "typing" while a reply comes. */
.qf-said { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.qf-say-row { display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 0 6px 0 18px; border: 2px solid #94A3B8; border-radius: 30px; background: var(--card); }
.qf-say-row:focus-within { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgb(29 78 216 / 0.22); }
.qf-say-row:has(input[aria-invalid="true"]) { border-color: #DC2626; }
.qf-say-row input { flex: 1 1 auto; min-width: 0; min-height: 56px; border: 0; background: transparent; font-size: 18px; outline: none; }
.qf-send { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; }
.qf-send:disabled { opacity: 0.5; cursor: default; }
.qf-ai-note { margin: -10px 0 0; color: var(--faint); font-size: 14px; }
.qf-typing { display: inline-flex; gap: 4px; align-items: center; min-height: 40px; }
.qf-typing span:not(.sr-only) { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); animation: qf-dot 1s infinite ease-in-out; }
.qf-typing span:nth-child(2) { animation-delay: 0.15s; }
.qf-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes qf-dot { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .qf-typing span:not(.sr-only) { animation: none; } }
.qf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qf-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.qf-foot form { display: block; }
.qf-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding-right: 8px; color: var(--accent-dark); font-size: 18px; font-weight: 600; text-decoration: none; }
.qf-back:hover { text-decoration: underline; }
.qf-restart { padding: 0; border: 0; background: none; color: var(--accent-dark); font-size: 16px; text-decoration: underline; cursor: pointer; }
.qf-done h1 { margin-top: 4px; }
@media (max-width: 560px) {
    .qf-main { padding: 12px 10px 20px; }
    .qf-card { gap: 20px; padding: 0 20px 24px; border-radius: 16px; }
    .qf-brand { min-height: 76px; margin: 0 -20px; padding: 14px 20px; }
    .qf-logo { max-height: 52px; }
    .qf-card h1 { font-size: 24px; }
    .qf-choice { min-height: 64px; font-size: 19px; }
    .qf-rate-row li { flex: 1 1 0; flex-direction: column; gap: 4px; padding: 12px 14px; }
    .qf-rate-row strong { font-size: 28px; }
    .qf-rate-row span { font-size: 16px; }
    .qf-rates { padding: 16px; }
}
.form-edit { display: flex; flex-direction: column; gap: 16px; }
.install-ai { display: flex; flex-direction: column; gap: 8px; }
.install-ai summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.install-ai textarea { width: 100%; min-height: 200px; margin: 8px 0; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 8px;
    background: var(--card); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.install-result { margin: 0; }
.install-result li { min-width: 0; white-space: nowrap; }
.form-style { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.form-style legend { margin-bottom: 4px; font-weight: 600; }
.form-actions { display: flex; gap: 8px; }
.form-actions.middle { align-items: center; }
.new-form input, .add-step input, #form-url { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid #CBD5E1; border-radius: 8px; background: var(--card); }
.new-form select { flex: 0 1 220px; }
.add-step select { flex: 0 1 240px; }
#form-url { color: var(--muted); }
.form-steps td.step-q { width: 60%; }
.form-steps .step-q input { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid #CBD5E1; border-radius: 8px; background: var(--card); }
.form-steps tr.is-contact td { background: #F8FAFC; }
.form-steps tr.is-off td { color: var(--faint); }
.company-logo { display: inline-flex; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.company-logo img { display: block; max-width: 280px; max-height: 64px; }
/* A "delete it?" question is read whole on a phone: its words over its buttons, rather than cut short. */
/* Data retention: three settings, each a card; a days box sits in its sentence. */
.retention { display: flex; flex-direction: column; gap: 16px; }
.retention h2 { margin: 0 0 6px; }
.field-days { margin-top: 10px; }
.days { display: flex; align-items: center; gap: 8px; color: var(--muted); white-space: nowrap; }
.field .days input, .check input.days-input { width: 72px; height: auto; min-height: 40px; padding: 0 10px; border: 1px solid #CBD5E1; border-radius: 8px; background: var(--card); text-align: right; }
.closed-rule { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 10px; padding: 0; border: 0; }
.closed-rule .check { white-space: nowrap; }
.field-problem { margin: 0; color: var(--stop-text); font-size: 0.875rem; }
.retention-ask { display: flex; align-items: center; gap: 8px; }
.retention-ask .ellipsis { flex: 1 1 auto; }

@media (max-width: 640px) {
    .ask-row { flex-wrap: wrap; }
    .ask-row > .ellipsis { flex: 1 1 100%; white-space: normal; }
}
.form-steps tr.is-off .step-q input { border-style: dashed; background: #F8FAFC; color: var(--faint); }
.form-steps tr.step-part th { max-width: 0; padding-top: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-weight: 400; }
.form-steps tbody tr.step-part:first-child th { padding-top: 10px; }
.step-part-name { color: var(--ink); font-weight: 600; }
.step-part-about { color: var(--faint); }
/* On or off: a switch the size of the other row buttons, a track and a knob drawn in it. */
.step-switch { position: relative; flex: none; width: 44px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.step-switch::before { content: ""; position: absolute; top: 7px; left: 4px; width: 36px; height: 18px; border-radius: 9px; background: #CBD5E1; }
.step-switch::after { content: ""; position: absolute; top: 9px; left: 6px; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.3); transition: transform 0.15s; }
.step-switch[aria-checked="true"]::before { background: var(--accent); }
.step-switch[aria-checked="true"]::after { transform: translateX(18px); }
.step-switch:disabled { opacity: 0.4; cursor: default; }
@media (prefers-reduced-motion: reduce) { .step-switch::after { transition: none; } }
@media (forced-colors: active) { .step-switch::before { border: 1px solid ButtonText; } .step-switch::after { background: ButtonText; } }
.forms-list td.num a { font-weight: 600; text-decoration: none; }
/* Connected AI on the Forms page: fixed columns, so a long app name ends in … instead of widening the page. */
.ai-list { table-layout: fixed; }
.ai-list th, .ai-list td, .ai-list th:first-child, .ai-list td:first-child { padding-left: 0; padding-right: 12px; }
.ai-list th.ai-by { width: 32%; }
.ai-list th.ai-used { width: 120px; }
.ai-list th.ai-end { width: 112px; }
@media (max-width: 560px) {
    .new-form, .add-step { flex-wrap: wrap; }
    .new-form select, .add-step select { flex: 1 1 100%; }
    .form-steps th, .form-steps td { padding-left: 6px; padding-right: 6px; }
    .form-steps th:first-child, .form-steps td:first-child { padding-left: 12px; }
    .form-steps th:last-child, .form-steps td:last-child { padding-right: 8px; }
    .form-steps .move-btn { width: 28px; }
    .form-steps .step-switch { width: 40px; }
    .form-steps .step-switch::before { left: 2px; }
    .form-steps .step-switch::after { left: 4px; }
}

/* Privacy policy, contact form and the Messages page they feed. */
.privacy { margin: 0 auto; }
.privacy p, .privacy li { max-width: 72ch; }
.plain-foot { margin: 0; text-align: center; }
.contact-card { max-width: 520px; }
.contact-about { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.contact-about legend { margin-bottom: 6px; padding: 0; color: var(--muted); font-weight: 500; }
.contact-about .check { white-space: nowrap; }
.contact-website { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.chat-lines.messages details[open] .said { white-space: nowrap; } /* the whole message shows below it */
.message-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.messages .inline-actions { margin-bottom: 10px; }
.messages .ask-row { margin-bottom: 10px; }

/* Settings: stages, lead sources, who may show SSNs */
.add-stage, .add-source, .add-type, .add-question { max-width: 600px; }
.add-stage select { flex: none; width: 160px; }
.add-question select { flex: none; width: 180px; }
.add-type select { flex: 1; }
.question-edit .check { flex: none; white-space: nowrap; }
.question-table .question { max-width: 220px; }
@media (min-width: 641px) { /* the question and when it's asked share what the other columns leave */
    .question-table th { width: 1%; }
    .question-table th.grow { width: auto; }
    .question-table td.question, .question-table td.shown-when { max-width: 0; }
}
.choice-edit { display: flex; flex-direction: column; gap: 8px; max-width: 480px; }
.choice-edit .inline-actions { margin-top: 4px; }
.teams-card .inline-form .cost-input { flex: none; width: 130px; }
.teams-card .inline-form .days-input { flex: none; width: 120px; }
.inline-form select.move-to { flex: none; width: 180px; }
.stage-move { display: flex; gap: 2px; }
.stage-move .icon-btn { border: 0; background: none; cursor: pointer; }
.stage-move .icon-btn:disabled { cursor: default; background: none; }
.source-table tr.is-off td, .type-table tr.is-off td, .question-table tr.is-off td { color: var(--faint); }
.source-table tr.is-off .lead-name, .type-table tr.is-off .lead-name, .question-table tr.is-off strong { color: var(--muted); }
/* How a source's returns reach its vendor (075): only the chosen way's fields show (all of them where :has() isn't known). */
.return-setup { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.return-ways { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; border: 0; min-width: 0; }
.return-ways .check { min-height: 36px; min-width: 0; }
.return-setup .for-email, .return-setup .for-leadbyte, .return-setup .for-hookup { display: none; flex-direction: column; gap: 12px; }
.return-setup:has(input[name=method][value=email]:checked) .for-email,
.return-setup:has(input[name=method][value=leadbyte]:checked) .for-leadbyte,
.return-setup:has(input[name=method][value=hookup]:checked) .for-hookup { display: flex; }
@supports not selector(:has(*)) { .return-setup .for-email, .return-setup .for-leadbyte, .return-setup .for-hookup { display: flex; } }
.return-codes-box { max-width: 560px; }
.return-codes { width: 100%; table-layout: fixed; }
.return-codes th:first-child { width: 58%; }
.return-codes td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* fits a phone: a long reason stops short, the code box keeps its room */
.return-codes input { width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid #CBD5E1; border-radius: 8px; background: var(--card); }
.reveal-roles { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.reveal-roles .check { white-space: nowrap; }
@media (max-width: 640px) { /* the new name takes the whole first line; what kind, or the cost, and the button the next */
    .add-stage, .add-source, .add-question { flex-wrap: wrap; }
    .teams-card .add-stage input[name=name], .teams-card .add-source input[name=name], .teams-card .add-question input[name=label] { flex: 1 1 100%; }
    .add-stage select, .add-question select { flex: 1; }
    .teams-card .add-source .cost-input { flex: 1; }
    .teams-card .add-source .days-input { flex: 1; }
}

/* An AI form's chat, on the lead and the form's page: a message a line, opened to read it all with the reply. */
.chat-lines { margin: 0; padding: 0; list-style: none; }
.chat-lines > li { border-bottom: 1px solid #F1F5F9; }
.chat-lines > li:last-child { border-bottom: 0; }
.chat-lines summary { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; cursor: pointer; list-style: none; }
.chat-lines summary::-webkit-details-marker { display: none; }
.chat-lines .said { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-lines details[open] .said { white-space: normal; }
.chat-lines summary time, .chat-lines summary .chat-meta { flex: none; color: var(--muted); font-size: 13px; white-space: nowrap; }
.chat-lines details > p { margin: 0 0 6px; }
.chat-lines details > p:last-child { margin-bottom: 10px; }


/* The lead page's loan file button, under a mortgage lead's answers: one line. */
.loan-file { display: flex; align-items: center; gap: 10px; min-width: 0; }
.loan-file .btn { flex: none; }

/* leadvault.com for someone signed out (Pages/Home): a navy top with what LeadVault is and the lead list, then what it
   does with screenshots of the app (made-up leads), Vaulty, security, connections, prices, questions. */
.home { background: #FFFFFF; }
.home img { display: block; max-width: 100%; height: auto; }
.hm-skip { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 14px; border-radius: 8px; background: #FFFFFF; color: var(--ink); font-weight: 600; }
.hm-skip:focus { top: 12px; }
.hm-top { display: flow-root; background: radial-gradient(1100px 520px at 88% -8%, rgba(37, 99, 235, 0.38), transparent 62%), var(--navy); color: #FFFFFF; }
.hm-top .shield-light { fill: #60A5FA; }
.hm-top .shield-dark { fill: #2563EB; }
.hm-bar { display: flex; align-items: center; gap: 24px; max-width: 1160px; margin: 0 auto; padding: 16px 24px; }
.hm-nav { display: flex; gap: 28px; margin: 0 auto; }
.hm-nav a, .hm-signin { color: #CBD5E1; font-weight: 500; text-decoration: none; white-space: nowrap; }
.hm-nav a:hover, .hm-signin:hover { color: #FFFFFF; }
.hm-bar-end { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.hm-nav + .hm-bar-end { margin-left: 0; }
.hm-signin { color: #FFFFFF; font-weight: 600; }
.hm-bar-cta.btn { min-height: 38px; padding: 0 14px; }
.hm-hero { max-width: 1160px; margin: 0 auto; padding: 56px 24px 0; }
.hm-hero-text { max-width: 980px; }
.hm-hero h1, .home main h2 { text-wrap: balance; }
.hm-eyebrow { margin: 0 0 14px; color: #93C5FD; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }
.hm-hero h1 { margin: 0 0 18px; font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: clamp(36px, 6vw, 60px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.hm-lede { max-width: 640px; margin: 0 0 28px; color: #CBD5E1; font-size: 18px; line-height: 1.55; }
.hm-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hm-actions .btn { min-height: 48px; padding: 0 22px; font-size: 16px; }
.hm-ghost { border-color: #475569; background: transparent; color: #FFFFFF; }
.hm-ghost:hover { border-color: #94A3B8; background: transparent; color: #FFFFFF; }
.hm-note { margin: 16px 0 0; color: #94A3B8; font-size: 14px; }
.hm-top .hm-hero-shot { position: relative; margin: 48px 0 -140px; }

/* A screenshot in a plain window, and the quote form on a phone. */
.hm-frame { margin: 0; overflow: hidden; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 12px; background: #FFFFFF;
            box-shadow: 0 30px 60px -24px rgba(15, 23, 42, 0.45), 0 12px 24px -12px rgba(15, 23, 42, 0.18); }
.hm-frame > img { width: 100%; }
.hm-frame-bar { display: flex; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #F8FAFC; }
.hm-frame-bar span { width: 10px; height: 10px; border-radius: 50%; background: #CBD5E1; }
.hm-phone { justify-self: center; width: 300px; max-width: 100%; margin: 0; overflow: hidden; border: 10px solid var(--navy); border-radius: 38px; background: var(--bg);
            box-shadow: 0 30px 60px -24px rgba(15, 23, 42, 0.45); }

.hm-steps { padding: 188px 24px 64px; background: var(--bg); }
.hm-steps ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1160px; margin: 0 auto; padding: 0; list-style: none; }
.hm-steps li { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.hm-steps svg, .hm-grid svg { box-sizing: content-box; padding: 9px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.hm-steps h2 { margin: 14px 0 6px; font-size: 17px; font-weight: 700; }
.hm-steps p { color: var(--muted); font-size: 15px; line-height: 1.5; }

.hm-features { max-width: 1160px; margin: 0 auto; padding: 24px 24px 40px; }
.hm-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 64px; padding: 56px 0; }
.hm-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hm-flip .hm-feature-text { order: 2; }
.hm-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.hm-feature h2, .hm-section h2, .hm-vaulty h2, .hm-end h2 { margin: 0 0 14px; font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.hm-feature-text > p:not(.hm-kicker) { margin: 0 0 20px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.hm-ticks { margin: 0; padding: 0; list-style: none; }
.hm-ticks li { position: relative; padding: 6px 0 6px 30px; color: var(--ink); font-size: 15px; line-height: 1.5; }
.hm-ticks li::before { content: ""; position: absolute; left: 0; top: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D4ED8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; }

.hm-inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.hm-narrow { max-width: 820px; }
.hm-section { padding: 88px 0; }
.hm-tint { background: var(--bg); }
.hm-section-lede { max-width: 680px; margin: 0 0 36px; color: var(--muted); font-size: 17px; line-height: 1.6; }

.hm-vaulty { padding: 88px 0; background: radial-gradient(900px 420px at 10% 110%, rgba(37, 99, 235, 0.35), transparent 60%), var(--navy); color: #FFFFFF; }
.hm-vaulty .hm-kicker { color: #93C5FD; }
.hm-vaulty .hm-section-lede { color: #CBD5E1; }
.hm-asks { display: flex; flex-wrap: wrap; gap: 10px; max-width: 900px; margin: 0 0 24px; padding: 0; list-style: none; }
.hm-asks li { padding: 9px 16px; border: 1px solid var(--navy-line); border-radius: 999px; background: var(--navy-2); color: #E2E8F0; font-size: 15px; }
.hm-asks li::before { content: "\201C"; color: #60A5FA; }
.hm-asks li::after { content: "\201D"; color: #60A5FA; }
.hm-fine { margin: 0; color: var(--faint); font-size: 14px; }
.hm-vaulty .hm-fine { color: #94A3B8; }

.hm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.hm-grid li { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.hm-grid h3 { margin: 14px 0 6px; font-size: 17px; }
.hm-grid p { color: var(--muted); font-size: 15px; line-height: 1.55; }

.hm-connect { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.hm-connect li { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.hm-connect strong { font-size: 16px; }
.hm-connect span { color: var(--muted); font-size: 15px; line-height: 1.5; }

.hm-pricing { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: 20px; margin-top: 28px; }
.hm-price-card, .hm-included { min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.hm-price-card { border: 2px solid var(--accent); box-shadow: 0 20px 40px -24px rgba(29, 78, 216, 0.45); }
.hm-pricing h3 { margin: 0 0 12px; font-size: 17px; }
.hm-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.hm-price strong { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.hm-price span { color: var(--muted); font-size: 17px; }
.hm-price-long strong { font-size: 30px; line-height: 1.2; }
/* A line for each tier: the amounts in one column, what they're for beside them. */
.hm-prices-tiers { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.hm-prices-tiers .hm-price { display: contents; }
.hm-prices-tiers .hm-price strong { font-size: 44px; }
.hm-prices-tiers .hm-price span { line-height: 1.35; }
.hm-price-sub { margin: 0 0 20px; color: var(--muted); font-size: 15px; }
.hm-price-card .btn { width: 100%; min-height: 48px; margin-bottom: 16px; font-size: 16px; }
.hm-pricing .rows > div { padding: 10px 0; font-size: 15px; }
.hm-included .hm-ticks { margin: 0; }
.hm-included .hm-fine { margin-top: 18px; }

.hm-faq details { border-bottom: 1px solid var(--line); }
.hm-faq details:first-child { border-top: 1px solid var(--line); }
.hm-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; }
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(45deg) translateY(-3px); transition: transform 0.15s; }
.hm-faq details[open] summary::after { transform: rotate(-135deg) translateX(-3px); }
.hm-faq details p { max-width: 720px; margin: -6px 0 22px; color: var(--muted); font-size: 16px; line-height: 1.6; }

.hm-end { padding: 80px 0; background: linear-gradient(135deg, var(--accent-dark), var(--navy)); color: #FFFFFF; text-align: center; }
.hm-end p { margin: 0 0 28px; color: #CBD5E1; font-size: 17px; }
.hm-end .hm-actions { justify-content: center; }

.hm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; max-width: 1160px; margin: 0 auto; padding: 28px 24px 40px; color: var(--faint); font-size: 13px; }
.hm-foot nav { display: flex; flex-wrap: wrap; gap: 16px; }
.hm-foot a { color: var(--muted); }

@media (max-width: 1000px) {
    .hm-nav { display: none; }
    /* With the links hidden, Sign in and the button keep to the right, away from the logo. */
    .hm-nav + .hm-bar-end { margin-left: auto; }
    .hm-feature { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px 0; }
    .hm-flip { grid-template-columns: minmax(0, 1fr); }
    .hm-flip .hm-feature-text { order: 0; }
    .hm-grid, .hm-connect { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hm-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .hm-bar { gap: 12px; padding: 12px 16px; }
    .hm-bar-end { gap: 14px; }
    .hm-hero { padding: 36px 16px 0; }
    .hm-lede { font-size: 17px; }
    .hm-top .hm-hero-shot { margin: 36px 0 -48px; }
    .hm-steps { padding: 80px 16px 40px; }
    .hm-features, .hm-inner { padding-left: 16px; padding-right: 16px; }
    .hm-section, .hm-vaulty { padding: 64px 0; }
    .hm-grid, .hm-connect, .hm-pricing { grid-template-columns: minmax(0, 1fr); }
    /* Cards with an icon put it beside the heading on phones, so each takes less of the screen. */
    .hm-grid li, .hm-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 18px; }
    .hm-grid li svg, .hm-steps li svg { grid-row: span 1; }
    .hm-grid h3, .hm-steps h2 { margin: 0; }
    .hm-grid p, .hm-steps p { grid-column: 1 / -1; margin-top: 8px; }
    .hm-price-card, .hm-included { padding: 22px; }
    /* The price rows' longer values wrap on phones instead, so their labels stay whole. */
    .hm-pricing .rows dt { flex: none; max-width: 50%; white-space: normal; }
    .hm-pricing .rows dd { flex: 0 1 auto; max-width: none; min-width: 0; white-space: normal; }
    .hm-end { padding: 64px 0; }
    .hm-foot { padding: 24px 16px 32px; }
}
@media (max-width: 480px) {
    .hm-steps ol { grid-template-columns: minmax(0, 1fr); }
    .hm-bar .logo-word { font-size: 19px; }
    .hm-actions .btn { flex: 1 1 auto; }
}

/* The homepage's top at work (home.js sets data-step 1 to 4 on .hm-live): cards over the lead list, sized to it. */
.hm-live { position: relative; container-type: inline-size; }
.hm-live > img { display: block; width: 100%; height: auto; }
.hm-live-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; font-size: 1.22cqw; }
.hm-live-row { position: absolute; top: 43.0%; left: 1.7%; width: 93.0%; height: 6.1%; border: 2px solid var(--accent); border-radius: 6px;
               background: rgba(37, 99, 235, 0.07); opacity: 0; transition: opacity 0.4s; }
.hm-live[data-step="1"] .hm-live-row, .hm-live[data-step="2"] .hm-live-row { opacity: 1; animation: hm-glow 1.6s ease-in-out infinite; }
@keyframes hm-glow { 50% { box-shadow: 0 0 0 0.45em rgba(37, 99, 235, 0.16); } }
.hm-pop { position: absolute; display: flex; gap: 0.8em; align-items: flex-start; padding: 1em 1.15em; border-radius: 0.9em; background: #FFFFFF; color: var(--ink);
          box-shadow: 0 1.4em 2.8em -1em rgba(15, 23, 42, 0.5), 0 0 0 1px rgba(15, 23, 42, 0.08); line-height: 1.4;
          opacity: 0; transform: translateY(0.9em) scale(0.97); transition: opacity 0.45s, transform 0.45s; }
.hm-pop strong { display: block; font-size: 1.08em; }
.hm-pop strong + span { display: block; margin-top: 0.15em; color: var(--muted); }
.hm-pop-icon { flex: none; box-sizing: content-box; width: 1.4em; height: 1.4em; padding: 0.5em; border-radius: 0.6em; background: var(--accent-soft); color: var(--accent); }
.hm-pop-lead { top: 51%; left: 6%; width: 31em; }
.hm-pop-text { top: 4%; right: 2.5%; display: block; width: 25em; background: #F1F5F9; }
.hm-pop-label { display: flex; justify-content: space-between; margin: 0 0 0.6em; color: var(--muted); font-size: 0.92em; font-weight: 600; }
.hm-pop-label span { font-weight: 400; }
.hm-sms { margin: 0; padding: 0.75em 0.95em; border-radius: 1.1em 1.1em 1.1em 0.3em; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06); }
.hm-pop-call { top: 7%; right: 2.5%; display: block; width: 27em; padding: 1.1em 1.2em; }
.hm-call-who { display: flex; align-items: center; gap: 0.75em; padding-bottom: 0.85em; border-bottom: 1px solid var(--line); }
.hm-avatar { flex: none; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.hm-call-name { flex: 1; min-width: 0; }
.hm-call-name strong { font-size: 1.15em; }
.hm-call-name span { display: block; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
/* The recording's time, its dot slowly blinking. */
.hm-rec { flex: none; display: inline-flex; align-items: center; gap: 0.45em; padding: 0.25em 0.7em; border-radius: 999px; background: #FEE2E2; color: #B91C1C;
          font-weight: 600; font-variant-numeric: tabular-nums; }
.hm-rec i { width: 0.55em; height: 0.55em; border-radius: 50%; background: #DC2626; animation: hm-rec 1.4s ease-in-out infinite; }
@keyframes hm-rec { 50% { opacity: 0.25; } }
.hm-call-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin: 0.8em 0 0; }
.hm-call-row > span:first-child { color: var(--muted); font-weight: 600; }
.hm-call-row b { padding: 0.2em 0.7em; border-radius: 999px; background: #DCFCE7; color: #15803D; font-weight: 600; }
.hm-call-note { margin-top: 0.2em; }
.hm-dictate { display: inline-flex; align-items: center; gap: 0.35em; color: var(--accent); font-weight: 600; }
.hm-dictate svg { width: 1em; height: 1em; }
/* Two lines' room, so the card keeps its size as the note types itself out (home.js). */
.hm-call-words { height: 2.8em; margin: 0.45em 0 0; padding: 0.55em 0.75em; box-sizing: content-box; overflow: hidden; border: 1px solid #CBD5E1; border-radius: 0.6em; background: #F8FAFC; }
.hm-call-words.is-typing span::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; background: currentColor; vertical-align: -0.2em; animation: hm-blink 0.8s steps(1) infinite; }
.hm-call-foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin: 0.9em 0 0; color: var(--muted); }
.hm-hang { flex: none; padding: 0.45em 1em; border-radius: 0.6em; background: #DC2626; color: #FFFFFF; font-weight: 600; }
.hm-pop-done { top: 14%; right: 2.5%; width: 26em; }
.hm-pop-done .hm-pop-icon { background: #DCFCE7; color: #15803D; }
.hm-live[data-step="1"] .hm-pop-lead, .hm-live[data-step="2"] .hm-pop-text, .hm-live[data-step="3"] .hm-pop-call,
.hm-live[data-step="4"] .hm-pop-done { opacity: 1; transform: none; }
/* How it works lights up the step on show, with a bar for its four seconds. */
.hm-steps li { position: relative; overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s; }
.hm-steps li.is-on { border-color: var(--accent); box-shadow: 0 14px 30px -18px rgba(29, 78, 216, 0.55); }
.hm-steps li.is-on::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); animation: hm-fill 4s linear forwards; }
@keyframes hm-fill { from { width: 0; } to { width: 100%; } }

/* Who it's for: tabs once home.js runs; each role under its name without it. */
.hm-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 28px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); }
.hm-tabs[hidden] { display: none; }
.hm-tabs button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.hm-tabs button:hover { color: var(--ink); }
.hm-tabs button[aria-selected="true"] { background: var(--navy); color: #FFFFFF; }
.hm-role { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: start; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.hm-role + .hm-role { margin-top: 16px; }
.hm-role[hidden] { display: none; }
.is-tabs .hm-role-name { display: none; }
.hm-role-name { margin: 0 0 8px; color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.hm-role h3 { margin: 0 0 12px; font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.hm-role-text p:not(.hm-role-name) { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }

/* LeadVault and the usual CRM. */
.hm-compare { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); font-size: 15px; }
.hm-compare th, .hm-compare td { padding: 16px 20px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.5; }
.hm-compare tbody tr:last-child > * { border-bottom: 0; }
.hm-compare thead th { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.hm-compare thead .hm-us { color: var(--accent); }
.hm-compare tbody th { width: 24%; font-weight: 600; }
.hm-compare td { width: 38%; color: var(--muted); }
.hm-compare td:last-child { background: rgba(37, 99, 235, 0.05); color: var(--ink); font-weight: 500; }
.hm-compare td:last-child::before { content: ""; display: inline-block; width: 16px; height: 16px; margin: 0 8px -3px 0; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D4ED8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 10px no-repeat; }

/* What calling first is worth: the visitor's numbers beside what they come to. */
.hm-calc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px; align-items: start; }
.hm-calc-form { display: grid; gap: 14px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.hm-calc-form label { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 15px; font-weight: 500; }
.hm-calc-form input { flex: none; width: 120px; min-height: 42px; padding: 0 12px; border: 1px solid #CBD5E1; border-radius: 8px; background: #FFFFFF; font: inherit; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.hm-calc-out { padding: 28px; border-radius: var(--radius); background: var(--navy); color: #FFFFFF; }
.hm-calc-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 18px; }
.hm-calc-big strong { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hm-calc-big span { color: #CBD5E1; font-size: 17px; }
.hm-calc-out .rows > div { padding: 10px 0; border-color: var(--navy-line); font-size: 15px; }
.hm-calc-out .rows dt { color: #CBD5E1; }
.hm-calc-out .rows dd { color: #FFFFFF; font-variant-numeric: tabular-nums; }
.hm-calc-out .rows a { color: #93C5FD; }
.hm-calc-out .rows > div[hidden] { display: none; }
.hm-calc-out .hm-fine { margin-top: 14px; color: #94A3B8; }

@media (max-width: 1000px) {
    .hm-role, .hm-calc { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 760px) {
    /* The cards over the lead list would be too small to read on a phone: it shows the list, and How it works moves on. */
    .hm-live-layer { display: none; }
    .hm-tabs { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 14px; }
    .hm-tabs button { border-radius: 10px; }
    .hm-role { padding: 22px; }
    .hm-role h3 { font-size: 21px; }
    /* Each comparison row as a card: what's compared, then the two answers with their labels. */
    .hm-compare, .hm-compare tbody, .hm-compare tr, .hm-compare th, .hm-compare td { display: block; }
    .hm-compare tbody th, .hm-compare td { width: auto; }
    .hm-compare thead { display: none; }
    .hm-compare { border: 0; background: none; }
    .hm-compare tr { margin-bottom: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
    .hm-compare tbody th { padding: 14px 16px 6px; border: 0; }
    .hm-compare td { padding: 8px 16px; border: 0; }
    .hm-compare td:last-child { padding-bottom: 14px; }
    .hm-compare td::after { content: none; }
    .hm-compare td:first-of-type::before { content: attr(data-label) ": "; color: var(--faint); }
    .hm-compare td:last-child::before { margin-right: 6px; }
    .hm-calc-form, .hm-calc-out { padding: 22px; }
    .hm-calc-form input { width: 96px; }
    .hm-calc-big strong { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .hm-pop { transform: none; transition: opacity 0.3s; }
    .hm-live-row, .hm-rec i { animation: none; }
    .hm-steps li.is-on::after { animation: none; width: 100%; }
}

/* Scenes (home.js): small pieces of the app playing out what a feature does, over a picture of it or in the Vaulty
   section. Sizes are in pixels, so they read the same on a phone. */
.hm-scene { box-sizing: border-box; width: 320px; max-width: 100%; padding: 14px 16px; border-radius: 14px; background: #FFFFFF; color: var(--ink);
            font-size: 13px; line-height: 1.45; text-align: left; box-shadow: 0 24px 48px -22px rgba(15, 23, 42, 0.55), 0 0 0 1px rgba(15, 23, 42, 0.08); }
.hm-scene p, .hm-scene ul { margin: 0; }
.hm-scene ul { padding: 0; list-style: none; }
.hm-scene.is-live [data-at] { opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s; }
.hm-scene.is-live [data-at].is-on { opacity: 1; transform: none; }
/* Pieces that take each other's place, in one spot: standing still, only the last shows. */
.hm-stack { display: grid; }
.hm-stack > * { grid-area: 1 / 1; min-width: 0; }
.hm-scene:not(.is-live) .hm-stack > :not(:last-child) { display: none; }
/* Typed text keeps the room of the whole of it (home.js), so nothing moves as it types. */
.hm-type { position: relative; display: block; }
.hm-type-whole { visibility: hidden; }
.hm-type-now { position: absolute; top: 0; left: 0; right: 0; }
.is-typing .hm-type-now::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; background: currentColor; vertical-align: -0.2em; animation: hm-blink 0.8s steps(1) infinite; }
@keyframes hm-blink { 50% { opacity: 0; } }

.hm-scene .hm-scene-head { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.hm-scene-head strong { min-width: 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; }
.hm-scene-head strong + span { flex: none; margin-left: auto; color: var(--muted); }
.hm-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22); }
.hm-dot-call { background: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22); }
.hm-scene.is-live .hm-dot { animation: hm-pulse 1.6s ease-in-out infinite; }
@keyframes hm-pulse { 50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); } }

/* What happened, a line each. */
.hm-log li, .hm-scene .hm-scene-end { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 6px 0; white-space: nowrap; }
.hm-log span, .hm-scene-end span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hm-scene .hm-scene-end { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-weight: 600; }
.hm-log i, .hm-scene-end i { flex: none; width: 20px; height: 20px; border-radius: 50%; background-position: center; background-size: 12px; background-repeat: no-repeat; }
.hm-i-ok { background-color: #DCFCE7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E"); }
.hm-i-rule { background-color: var(--accent-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D4ED8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3h5v5M4 20 21 3M21 16v5h-5M15 15l6 6M4 4l5 5'/%3E%3C/svg%3E"); }
.hm-i-pass { background-color: #F1F5F9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 4 10 8-10 8zM19 5v14'/%3E%3C/svg%3E"); }
.hm-i-text { background-color: var(--accent-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D4ED8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.hm-log li:has(.hm-i-pass) span { color: var(--muted); }
.hm-days b { flex: none; width: 76px; color: var(--muted); font-weight: 600; }

/* A conversation: what's said to them on the left, what they say on the right. */
.hm-scene .hm-bubble { width: fit-content; max-width: 90%; margin-top: 8px; padding: 8px 11px; border-radius: 12px 12px 12px 4px; background: #F1F5F9; }
.hm-scene .hm-them { margin-left: auto; border-radius: 12px 12px 4px 12px; background: var(--accent); color: #FFFFFF; }
.hm-scene .hm-chips { display: flex; gap: 6px; margin-top: 8px; overflow: hidden; mask-image: linear-gradient(90deg, #000 80%, transparent); }
.hm-chips span { flex: none; padding: 4px 10px; border: 1px solid #CBD5E1; border-radius: 999px; font-weight: 500; }
.hm-scene .hm-words { display: flex; gap: 8px; min-width: 0; padding: 3px 0; white-space: nowrap; }
.hm-words b { flex: none; width: 52px; color: var(--muted); font-weight: 600; }
.hm-words span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hm-scene .hm-summary { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); }
.hm-scene .hm-summary-head { margin-bottom: 4px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* The power dialer's call panel. */
.hm-scene .hm-dial { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; min-height: 42px; padding: 6px 8px 6px 12px;
                     border-radius: 10px; background: var(--navy); color: #FFFFFF; white-space: nowrap; }
.hm-dial b { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; }
.hm-dial > span { flex: none; color: #93C5FD; }
.hm-dial > .hm-main { padding: 5px 10px; border-radius: 7px; background: #2563EB; color: #FFFFFF; font-weight: 600; }
.hm-dial > .hm-rec { padding: 3px 9px; background: rgba(220, 38, 38, 0.2); color: #FCA5A5; }
.hm-dial > .hm-rec i { width: 7px; height: 7px; }

/* Ask Vaulty: the box at the top of the app, and what it gives back. */
.hm-scene-ask { width: 100%; max-width: 560px; padding: 16px; font-size: 14px; }
.hm-scene .hm-askbox { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border: 2px solid var(--accent); border-radius: 12px;
                       box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); font-size: 15px; }
.hm-askbox svg { flex: none; color: var(--accent); }
.hm-askbox svg:last-child { color: var(--faint); }
.hm-askbox .hm-stack { flex: 1; min-width: 0; }
.hm-scene-ask > .hm-stack { margin-top: 14px; }
/* While Vaulty works it out: grey lines where the answer comes. */
.hm-scene .hm-answer-wait { display: flex; flex-direction: column; gap: 22px; padding-top: 12px; }
.hm-answer-wait span { width: 80%; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #EEF2F7, #E2E8F0, #EEF2F7) 0 0 / 200% 100%; }
.hm-answer-wait span:nth-child(1) { width: 40%; }
.hm-answer-wait span:nth-child(3) { width: 65%; }
.hm-answer-wait span:nth-child(5) { width: 55%; }
.hm-scene.is-live .is-on.hm-answer-wait span { animation: hm-shine 1.2s linear infinite; }
@keyframes hm-shine { to { background-position: -200% 0; } }
.hm-scene .hm-answer-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin-bottom: 6px; white-space: nowrap; }
.hm-answer-head strong { flex: none; font-size: 15px; }
.hm-answer-head span { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; }
.hm-rows li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 0; border-top: 1px solid var(--line); white-space: nowrap; }
.hm-rows b { flex: none; width: 96px; font-weight: 600; }
.hm-rows span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hm-rows em { flex: none; color: var(--faint); font-style: normal; }
.hm-to { color: var(--accent); font-weight: 700; }
.hm-scene .hm-answer-btns { display: flex; gap: 8px; margin-top: 12px; }
.hm-answer-btns span { padding: 6px 14px; border: 1px solid #CBD5E1; border-radius: 8px; font-weight: 600; }
.hm-answer-btns .hm-main { border-color: var(--accent); background: var(--accent); color: #FFFFFF; }

/* Vaulty's section: the ask beside what to ask, then what else it does, each with its scene. */
.hm-vaulty-ask { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 56px; margin: 8px 0 56px; }
.hm-vaulty h3 { margin: 0 0 10px; color: #FFFFFF; font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.hm-vaulty-say p { margin: 0 0 22px; color: #CBD5E1; font-size: 16px; line-height: 1.6; }
.hm-vaulty-say .hm-asks { margin: 0; }
.hm-vaulty-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 40px; padding: 0; list-style: none; }
.hm-vaulty-cards > li { display: flex; flex-direction: column; min-width: 0; padding: 22px; border: 1px solid var(--navy-line); border-radius: var(--radius); background: var(--navy-2); }
.hm-vaulty-cards h3 { font-size: 19px; }
.hm-vaulty-cards > li > p:not(.sr-only) { margin: 0 0 18px; color: #CBD5E1; font-size: 15px; line-height: 1.55; }
.hm-vaulty-cards .hm-scene { width: 100%; margin-top: auto; }
.hm-vaulty-ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-bottom: 20px; }
.hm-vaulty .hm-ticks li { color: #E2E8F0; }

/* A feature's scene floats over a corner of its picture: the outer one, and beside the phone. */
.hm-stage { position: relative; min-width: 0; }
.hm-stage > .hm-scene { position: absolute; right: -20px; bottom: -36px; z-index: 1; width: 320px; }
.hm-flip .hm-stage > .hm-scene { right: auto; left: -20px; }
.hm-stage-phone .hm-phone { margin: 0 0 0 auto; }
.hm-stage-phone > .hm-scene { right: auto; left: 0; bottom: 48px; width: 290px; }

@media (max-width: 1000px) {
    .hm-stage > .hm-scene, .hm-flip .hm-stage > .hm-scene { right: 16px; left: auto; bottom: -32px; }
    .hm-stage-phone .hm-phone { margin: 0 auto; }
    .hm-stage-phone > .hm-scene { right: auto; left: max(0px, calc(50% - 400px)); bottom: 48px; }
    .hm-vaulty-ask { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .hm-vaulty-cards { grid-template-columns: minmax(0, 1fr); }
    .hm-vaulty-cards > li { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto 1fr; column-gap: 28px; align-items: start; }
    .hm-vaulty-cards .hm-scene { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}
@media (max-width: 760px) {
    /* On a phone the scene sits under its picture, over the edge of it. */
    .hm-stage > .hm-scene, .hm-flip .hm-stage > .hm-scene, .hm-stage-phone > .hm-scene { position: relative; left: auto; right: auto; bottom: auto;
        width: calc(100% - 24px); max-width: 340px; margin: -28px auto 0; }
    .hm-vaulty-ask { gap: 28px; margin-bottom: 40px; }
    .hm-vaulty-cards > li { display: flex; padding: 18px; }
    .hm-vaulty-cards .hm-scene { margin-top: 2px; }
    .hm-vaulty-ticks { grid-template-columns: minmax(0, 1fr); }
}

/* Bulk email (060): a bad outcome's tag on the timeline, the DNS records, the compose page and the lists. */
.tag-bad { margin-left: 8px; background: var(--stop-bg); color: var(--stop-text); font-weight: 500; }
.dns-list li { gap: 8px; min-height: 48px; }
.dns-list li input { flex: 1 1 0; min-width: 0; min-height: 36px; padding: 0 10px; border: 1px solid #CBD5E1; border-radius: 8px; background: #F8FAFC; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.dns-connect { align-items: center; min-width: 0; margin: 4px 0 12px; }
.dns-connect .btn { flex: none; }
.dns-connect span { min-width: 0; }
.from-local { align-items: center; }
.from-local input { flex: 0 1 200px; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid #CBD5E1; border-radius: 8px; background: var(--card); }
.from-local span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.merge-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.merge-fields .merge-answers { width: auto; max-width: 260px; min-height: 32px; font-size: 13px; }
.write-ask { display: flex; align-items: center; gap: 8px; }
.write-ask input { flex: 1 1 auto; min-width: 0; }
.write-ask .btn { flex: none; }
.email-preview { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: #F8FAFC; }
.email-preview p { margin: 0; }
.email-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); line-height: 1.55; }
.campaign-list .row-actions { flex: none; align-items: center; }
.campaign-list .inline-form { flex: 1 1 auto; min-width: 0; align-items: center; }
.teams-card .campaign-list .inline-form input[type="datetime-local"] { flex: none; width: 220px; padding: 0 10px; background: var(--card); }
.campaign-list li, .problem-list li { gap: 10px; min-width: 0; }
.campaign-counts { flex: none; width: 150px; text-align: right; }
.campaign-who { flex: 0 1 auto; max-width: 180px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.campaign-when { flex: none; width: 210px; text-align: right; }
.problem-why { flex: 0 1 45%; text-align: right; }
@media (max-width: 720px) {
    .campaign-who, .campaign-when { display: none; }
    .campaign-counts { width: auto; }
    .campaign-list li:has(.row-actions) { flex-wrap: wrap; }
}

/* Alert choices on Sign-in & security (070): one line per kind of alert, an Email and a Text box each. */
.alert-choices { display: grid; grid-template-columns: minmax(0, 1fr) 56px 56px; align-items: center; row-gap: 10px; }
.alert-choices > span:not(.alert-choice-head) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-choices .alert-choice-head { font-size: 13px; font-weight: 600; color: var(--muted); }
.alert-choices .alert-choice-head:not(:first-child), .alert-choices input { justify-self: center; }
.alert-choices input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }

/* Drips (076): the list, a drip's steps, the step editor's wait, and the box on a lead's page. */
.drips .drip-name { max-width: 260px; }
.drips .drip-starts { max-width: 340px; color: var(--muted); }
.drips tr.is-off td { color: var(--faint); }
.drips tr.is-off .lead-name { color: var(--muted); }
.drip-stats { margin: -4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head h1 .tag { margin-left: 8px; vertical-align: middle; font-size: 13px; }
.drip-steps .step-wait { width: 1%; color: var(--muted); }
.drip-steps .step-what { max-width: 520px; }
.drip-when { display: flex; flex-direction: column; gap: 12px; padding-left: 28px; }
.wait-row { display: flex; align-items: center; gap: 8px; }
.wait-row input { max-width: 96px; }
.wait-row select { flex: 0 1 140px; min-width: 0; }
.step-delete, .drip-add-step { align-self: flex-start; }
.drip-run.is-ended .grow { color: var(--muted); }
.drip-add { display: flex; align-items: center; gap: 8px; }
.drip-add select { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) {
    .drips .drip-name { max-width: 150px; }
    .drip-steps .step-what { max-width: 170px; }
    .drip-when { padding-left: 0; }
}

/* The power dialer (077): one line per thing (a session, a recording, a lead on the list), the counts, the list's states,
   and the call panel's voicemail drop. */
.dial-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dial-line h1 { margin: 0; font-size: 22px; }
.dial-line form { margin: 0; }
.dial-head { display: flex; flex-direction: column; gap: 8px; }
.dial-head [hidden], .drop-record [hidden] { display: none; }
.drop-record .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.dial-status { margin: 0; color: var(--muted); }
.dial-stats { margin: 4px 0 0; color: var(--muted); }
.dial-stats strong { color: var(--text); }
.dial-quick form { margin: 0; }
.drop-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.drop-list audio, .drop-record audio { height: 36px; max-width: 240px; }
.drop-record [data-drop-start].is-recording { border-color: #DC2626; color: var(--stop-text); }
.dial-queue td.name { max-width: 260px; }
.dial-queue .dial-result { max-width: 360px; }
.dial-queue tr.dial-called td, .dial-queue tr.dial-skipped td { color: var(--muted); }
.dial-queue tr.dial-skipped .dial-result, .dial-queue tr.dial-waits .dial-result { color: var(--faint); }
.dial-queue tr.dial-calling td { background: var(--accent-soft); font-weight: 600; }
.dock-drop { display: flex; gap: 8px; margin: 8px 0 4px; }
.dock-drop select { flex: 1 1 auto; min-width: 0; }
.dock-drop .btn { flex: 1 0 auto; justify-content: center; }
.dock-hours { color: var(--warn-text); }
@media (max-width: 640px) {
    .dial-line { flex-wrap: wrap; }
    .dial-line h1 { flex-basis: 100%; font-size: 19px; }
    .dial-queue td.name { max-width: 150px; }
    .dial-queue .dial-result { max-width: 150px; }
    .drop-list .dial-line { flex-wrap: nowrap; }
    .drop-list audio { max-width: 130px; }
}

/* Deleting leads (078): the lead page's Delete card, Recently deleted, and LeadVault's own Deleted leads page. */
.delete-card form { align-items: flex-start; }
.delete-card p { margin: 0; }
.deleted-list td.name { max-width: 240px; }
.deleted-list td.company { max-width: 160px; }
.deleted-list td.email { max-width: 220px; }
.deleted-list td form { margin: 0; }
.deleted-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.deleted-tools form { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.deleted-tools input[type=search] { min-width: 220px; min-height: 44px; padding: 0 12px; border: 1px solid #CBD5E1; border-radius: 8px;
    background: var(--card); font: inherit; color: inherit; }
.deleted-list .inline-actions { flex-wrap: nowrap; align-items: center; }
.deleted-list .tag-bad { margin-left: 0; white-space: nowrap; }

/* leadvault.com's Industries (Pages/Shared/_Marketing, Pages/Industry): the menu in the top bar, the cards for them, and
   each industry's page. */
.hm-menu { position: relative; }
.hm-menu summary { display: flex; align-items: center; gap: 7px; color: #CBD5E1; font-weight: 500; white-space: nowrap; cursor: pointer; list-style: none; }
.hm-menu summary::-webkit-details-marker { display: none; }
.hm-menu summary::after { content: ""; width: 6px; height: 6px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.15s, margin 0.15s; }
.hm-menu[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.hm-menu summary:hover, .hm-menu[open] summary { color: #FFFFFF; }
.hm-menu ul { position: absolute; top: calc(100% + 14px); left: -14px; z-index: 20; min-width: 230px; margin: 0; padding: 8px; list-style: none; border-radius: 12px; background: #FFFFFF;
              box-shadow: 0 24px 48px -16px rgba(15, 23, 42, 0.5), 0 0 0 1px rgba(15, 23, 42, 0.08); }
.hm-nav .hm-menu li a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; color: var(--ink); font-weight: 600; }
.hm-nav .hm-menu li a:hover, .hm-nav .hm-menu li a:focus-visible { background: var(--bg); color: var(--ink); }
.hm-nav .hm-menu li a[aria-current="page"] { color: var(--accent); }
.hm-menu li svg { flex: none; box-sizing: content-box; padding: 6px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }

.hm-industries { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.hm-industries a { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius);
                   background: var(--card); color: var(--ink); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.hm-industries a:hover { border-color: var(--accent); box-shadow: 0 14px 30px -18px rgba(29, 78, 216, 0.55); }
.hm-industries svg { flex: none; box-sizing: content-box; margin-bottom: 10px; padding: 9px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.hm-industries strong { font-size: 17px; }
.hm-industries span { color: var(--muted); font-size: 15px; line-height: 1.5; }

.hm-foot-industries { display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.hm-foot-industries b { color: var(--ink); font-weight: 600; }
.hm-foot-industries a[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* An industry's top: the words, and its lead at work beside them (no picture of the app under it, as the homepage has). */
.hm-hero-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 56px; padding-bottom: 88px; }
.hm-hero-split .hm-hero-text { max-width: none; }
.hm-hero-split h1 { font-size: clamp(34px, 4.6vw, 54px); }
.hm-scene-hero { justify-self: end; width: 440px; padding: 18px 20px; font-size: 14px; }
.hm-scene-hero .hm-scene-head strong { font-size: 15px; }

/* A new form's first step on a phone, in the form's own look, and the questions it asks in order. */
.hm-form-show { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 64px; }
.hm-phone-form { padding: 14px 10px 22px; }
.hm-phone-form .qf-card { gap: 14px; padding: 18px 16px; font-size: 14px; }
.hm-phone-form .qf-time { margin-bottom: 8px; }
.hm-phone-form .hm-mock-h { margin: 0 0 12px; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.hm-phone-form .qf-ask { margin: 0; font-size: 15px; }
.hm-phone-form .qf-choices { gap: 8px; }
.hm-phone-form .qf-choice { display: flex; align-items: center; min-height: 44px; overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; cursor: default; }
.hm-box-label { margin-bottom: -8px; font-weight: 600; }
.hm-box { display: block; min-height: 44px; border: 1px solid #CBD5E1; border-radius: 10px; background: #FFFFFF; }
.hm-box-go.btn { min-height: 46px; cursor: default; }
.hm-small-h { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.hm-questions { counter-reset: q; margin: 0 0 18px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.hm-questions li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; white-space: nowrap; }
.hm-questions li::before { counter-increment: q; content: counter(q); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
                           background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; }
.hm-questions li.hm-more { color: var(--muted); }
.hm-questions li.hm-more::before { content: "+"; counter-increment: none; background: #F1F5F9; color: var(--muted); font-size: 14px; }
.hm-questions span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* The pipeline a type starts with: its stages in a row, the won one green, and the ones set aside after it. */
.hm-stages { display: flex; flex-wrap: wrap; align-items: center; row-gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; }
.hm-stages li { display: flex; align-items: center; font-size: 15px; font-weight: 600; white-space: nowrap; }
.hm-stages li + li::before { content: ""; width: 28px; height: 2px; background: #CBD5E1; }
.hm-stages span { padding: 10px 18px; border: 1px solid #CBD5E1; border-radius: 999px; background: var(--card); }
.hm-stages .hm-won span { border-color: #86EFAC; background: #DCFCE7; color: #15803D; }
.hm-stages-off { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 15px; }
.hm-stages-off b { padding: 6px 14px; border-radius: 999px; background: #E2E8F0; color: #475569; font-weight: 600; white-space: nowrap; }
.hm-more-link { margin: 20px 0 0; font-size: 15px; font-weight: 600; }

@media (max-width: 1000px) {
    .hm-hero-split, .hm-form-show { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .hm-scene-hero { justify-self: start; }
    .hm-phone-form { justify-self: center; }
}
@media (max-width: 760px) {
    .hm-hero-split { padding-bottom: 56px; }
    .hm-scene-hero { width: 100%; padding: 14px 16px; font-size: 13px; }
    .hm-industries { grid-template-columns: minmax(0, 1fr); }
    .hm-industries a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 18px; }
    .hm-industries svg { margin: 0; }
    .hm-industries span { grid-column: 1 / -1; margin-top: 8px; }
    .hm-questions li { gap: 10px; font-size: 14px; }
    .hm-questions li::before { width: 22px; height: 22px; }
    /* The stages go down the page, joined by a line. */
    .hm-stages { flex-direction: column; align-items: flex-start; row-gap: 0; }
    .hm-stages li { flex-direction: column; align-items: flex-start; }
    .hm-stages li + li::before { width: 2px; height: 14px; margin-left: 24px; }
}

/* Each person's own page (085): the editor (/my-page) and the page itself (/p/{slug}), white-label like a quote form. */
.prefix-row { display: flex; align-items: center; gap: 4px; }
.prefix-row > span { flex: 0 1 auto; max-width: 55%; }
.prefix-row input { flex: 1 1 auto; min-width: 0; }
.page-qr { display: flex; align-items: center; gap: 16px; }
.page-qr img { flex: none; border: 1px solid var(--line); border-radius: 8px; image-rendering: pixelated; }
.page-qr .stack { gap: 10px; align-items: flex-start; min-width: 0; }
.page-photo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-photo-row .inline-form { flex: 1 1 280px; min-width: 0; }
.page-photo-row input[type="file"] { flex: 1 1 auto; min-width: 0; padding: 8px 0; }
.page-photo { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.lp-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; font-size: 28px; }
body.lp { display: flex; flex-direction: column; min-height: 100vh; }
.lp-top { padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--card); color: var(--ink); font-weight: 700; font-size: 16px; text-align: center; }
.lp-main { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 24px 16px 8px; display: flex; flex-direction: column; gap: 20px; }
.lp-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.lp-card h1, .lp-words h2 { margin: 0; color: var(--ink); }
.lp-person { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.lp-photo { flex: none; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; }
.lp-photo.lp-initials { font-size: 40px; }
.lp-who { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lp-who h1 { font-size: 24px; line-height: 1.2; }
.lp-who p { margin: 0; }
.lp-contact { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.lp-words { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
.lp-words h2 { font-size: 22px; line-height: 1.25; }
.lp-intro { margin: 0; white-space: pre-line; color: var(--text); font-size: 15px; line-height: 1.6; }
.lp-form { min-height: 200px; }
.lp-foot { width: 100%; max-width: 640px; margin: 0 auto; padding: 16px 16px 28px; color: var(--muted); font-size: 13px; text-align: center; }
.lp-foot p { margin: 4px 0; }
.lp-ehl { display: inline-flex; align-items: center; gap: 6px; }
/* Reviews and booking on someone's page (086) */
.lp-rating { color: var(--ink); text-decoration: none; font-weight: 600; }
.lp-rating span[aria-hidden], .lp-stars, .lp-stars-cell { color: #B45309; }
.lp-book-note { margin: 0 4px 8px; color: var(--text); font-size: 15px; }
.lp-reviews { display: flex; flex-direction: column; gap: 12px; padding: 0 4px; }
.lp-reviews h2 { margin: 0; font-size: 22px; color: var(--ink); }
.lp-reviews > p { margin: 0; }
.lp-review { margin: 0; gap: 6px; padding: 18px 20px; }
.lp-review blockquote { margin: 0; white-space: pre-line; color: var(--text); font-size: 15px; line-height: 1.6; }
.lp-stars { margin: 0; font-size: 18px; letter-spacing: 2px; }
.lp-stars-cell { white-space: nowrap; letter-spacing: 1px; }
.lp-photo-small { width: 64px; height: 64px; }
.lp-photo-small.lp-initials { font-size: 24px; }
.lp-name { font-weight: 700; color: var(--ink); font-size: 18px; }
.lp-rate { border: 0; margin: 0; padding: 0; }
.lp-rate legend { padding: 0; margin-bottom: 6px; font-weight: 600; color: var(--ink); }
.lp-rate-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.lp-rate-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lp-rate-stars label { font-size: 34px; line-height: 1; color: #CBD5E1; cursor: pointer; }
.lp-rate-stars input:checked ~ label, .lp-rate-stars label:hover, .lp-rate-stars label:hover ~ label { color: #B45309; }
.lp-rate-stars:hover input:checked ~ label { color: #CBD5E1; } /* while pointing, the stars pointed at */
.lp-rate-stars:hover label:hover, .lp-rate-stars:hover label:hover ~ label { color: #B45309; }
.lp-rate-stars input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.lp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.review-words { max-width: 280px; }
.review-from { max-width: 200px; }
.review-decision { width: 230px; min-height: 32px; font-size: 13px; }
/* Facebook lead ads (/facebook): one line per Page, its choices as small selects that save themselves. */
.fb-page { max-width: 200px; }
.fb-select { width: 140px; min-height: 32px; font-size: 13px; }
.fb-actions { display: inline-flex; gap: 4px; justify-content: flex-end; }
.fb-pages { border: 0; padding: 0; margin: 0; min-width: 0; }
.fb-pick select { max-width: 360px; }
.reviews-table tr.is-off td:not(:last-child) { color: var(--faint); }
@media (max-width: 480px) {
    .lp-person { flex-direction: column; text-align: center; }
    .lp-who { flex-basis: auto; width: 100%; }
    .lp-contact { justify-content: center; }
    .page-qr { flex-direction: column; align-items: flex-start; }
}

/* A bulk email's Sending box (092): how many a day, the lead's hours, weekdays, the 7-day rule. One line where it fits. */
.pace { margin: 16px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line, #E2E8F0); display: grid; gap: 10px; min-width: 0; }
.pace-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pace-row label { white-space: nowrap; }
.pace .check { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The lead list's page size, beside Previous and Next. */
.page-size { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.page-size select { min-height: 36px; }

/* The ask before a bulk email goes (Send now, Schedule): one line each, and a box to type the number of leads. */
.send-confirm { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.send-confirm p { margin: 0; }
.sure-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.sure-row label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sure-box { width: 8em; flex: none; }

/* Boxes side by side when there is room (Sign-in and security): as many 420px-or-wider columns as fit, each box its own height. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; }
.card-grid > .card { max-width: none; min-width: 0; }

/* Popups (_Layout, app.js data-popup): a page like Your profile or Add lead over the page behind, its own cards flattened. */
.dialog-page { position: fixed; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; padding: 24px 28px; }
.dialog-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.dialog-x:hover { background: var(--bg); color: var(--ink); }
.popup-page > .back { display: none; }
.popup-page .page-head { margin: 0 40px 12px 0; }
.popup-page .card { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.popup-page .card + .card { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); border-radius: 0; }
.popup-page .form-card h1 { margin: 0 40px 16px 0; font-size: 22px; }
.profile-form { display: grid; gap: 6px; margin-bottom: 18px; }
.profile-form > label { font-weight: 600; }
.profile-form .inline-form input { flex: 1 1 0; min-width: 0; }
.profile-form p { margin: 0; }
@media (max-width: 640px) { .profile-form .inline-form { flex-wrap: wrap; } .profile-form .inline-form input { flex-basis: 100%; } }
.edit-sub { margin: 8px 0 0; font-size: 16px; }
.lead-panel .card > h2 .h2-action { order: 2; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; padding: 2px 8px; border-radius: 6px; }
.lead-panel .card > h2 .h2-action:hover { background: var(--accent-soft); }

/* Lead details edited box by box (098, app.js): Edit shows on the box when it's clicked, pointed at or reached by Tab. */
.vfield-editable { position: relative; }
.vfield-editable .vbox { position: relative; cursor: pointer; }
.vfield-editable .vbox:hover, .vfield-editable.is-picked .vbox, .vfield-editable .vbox:focus-within { padding-right: 64px; }
.vfield.is-editing > .vbox { display: none; }
.vfield-empty:not(.is-editing) { display: none; }
.shows-empty .vfield-empty { display: block; }
.show-empty { display: none; margin-top: 12px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.js .show-empty { display: inline-block; }
.vfield-editable .vbox.protected-value { padding-right: 6px; }
.protected-value .vedit { position: static; transform: none; flex: none; }
.vfield-editable .vbox:hover { border-color: #CBD5E1; background: var(--card); }
.vedit { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); min-height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; opacity: 0; }
.vfield-editable .vbox:hover .vedit, .vfield-editable.is-picked .vedit, .vedit:focus-visible { opacity: 1; }
@media (hover: none) { .vfield-editable .vbox { padding-right: 64px; } }
@media (hover: none) { .vedit { opacity: 1; } }

.vedit-form { display: flex; flex-direction: column; gap: 8px; }
.vedit-inputs { display: flex; gap: 8px; min-width: 0; }
.vedit-inputs > input, .vedit-inputs > select { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--accent); border-radius: 9px; background: var(--card); font: inherit; }
.vedit-inputs > [aria-invalid="true"] { border-color: #DC2626; }
.vedit-inputs.has-suggest { position: relative; }
.vedit-suggest { max-height: 320px; overflow-y: auto; }
.vedit-suggest li { min-height: 38px; padding: 8px 12px; }
.vedit-suggest[hidden] { display: none; }
.vfield.is-changed .vedit-inputs > input, .vfield.is-changed .vedit-inputs > select { background: #F5F9FF; }
.vedit-bar { position: fixed; left: 50%; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 18px; transform: translateX(-50%); border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 10px 30px rgba(15, 23, 42, .18); white-space: nowrap; }
.vedit-bar[hidden] { display: none; }
.vedit-bar-text { font-weight: 600; }
.vedit-bar { padding-left: 8px; }
.vedit-grip { display: flex; align-items: center; justify-content: center; width: 24px; height: 32px; margin-right: -4px; border-radius: 6px; color: #94A3B8; cursor: grab; touch-action: none; }
.vedit-grip:hover { color: var(--ink); background: #EEF2F6; }
.vedit-bar.is-dragging, .vedit-bar.is-dragging .vedit-grip { cursor: grabbing; user-select: none; }
.vedit-bar .vedit-problem { overflow: hidden; text-overflow: ellipsis; }
.vedit-bar .vedit-problem:empty { display: none; }
body.has-vedit-bar { padding-bottom: 80px; }
.vedit-problem { margin: 0; color: #B91C1C; font-size: 13px; }