:root {
    --ink: #172033;
    --muted: #667085;
    --line: #e6eaf0;
    --paper: #ffffff;
    --canvas: #f6f8fc;
    --brand: #5b4bdb;
    --brand-dark: #4134ae;
    --success: #16794c;
    --pending: #9a6700;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.app-shell { min-height: 100vh; }
.saas-shell { min-height: 100vh; display: flex; }
.sidebar { width: 248px; flex: 0 0 248px; background: #171b2b; color: #d8deed; display: flex; flex-direction: column; padding: 25px 15px 18px; }
.sidebar .brand { color: white; margin: 0 10px 26px; }
.workspace-switch { display: flex; align-items: center; gap: 10px; border: 1px solid #343a50; border-radius: 10px; color: #eef1ff; margin-bottom: 22px; padding: 10px; }
.workspace-switch:hover { background: #252a3c; text-decoration: none; }.workspace-switch small { color: #9da5bd; display: block; font-size: 11px; margin-top: 1px; }
.workspace-icon { align-items: center; background: var(--brand); border-radius: 8px; color: white; display: inline-flex; font-size: 13px; font-weight: 800; height: 28px; justify-content: center; width: 28px; }
.side-nav { display: grid; gap: 3px; }.side-nav a { border-radius: 7px; color: #c4cbdf; font-size: 13px; font-weight: 650; padding: 9px 10px; }.side-nav a:hover { background: #292e41; color: white; text-decoration: none; }.nav-label { color: #7f879f; font-size: 10px; font-weight: 800; letter-spacing: .08em; margin: 16px 10px 4px; text-transform: uppercase; }
.sidebar-footer { border-top: 1px solid #343a50; display: grid; gap: 6px; margin-top: auto; padding: 16px 10px 0; }.sidebar-footer a { color: #c4cbdf; font-size: 13px; }.sidebar-footer form { max-width: none; }.logout-button { background: transparent; color: #c4cbdf; font-size: 13px; min-height: 28px; padding: 0; text-align: left; }.logout-button:hover { background: transparent; color: white; }
.app-main { min-width: 0; flex: 1; }.app-main .content-wrap { width: min(100% - 56px, 1120px); }.mobile-topbar,.mobile-nav-drawer,.mobile-nav-backdrop { display: none; }
.topbar { height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(24px, calc((100vw - 1180px) / 2)); background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.brand { color: var(--ink); font-size: 20px; font-weight: 850; letter-spacing: -.8px; text-decoration: none; }
.brand span { color: var(--brand); }
nav { display: flex; align-items: center; gap: 22px; }
nav a { color: #4b5568; font-size: 14px; font-weight: 650; }
nav a:hover { color: var(--brand); text-decoration: none; }
.nav-cta { color: white; background: var(--brand); padding: 9px 15px; border-radius: 8px; }
.nav-cta:hover { color: white; background: var(--brand-dark); }
.content-wrap { width: min(100% - 40px, 1050px); margin: 0 auto; padding: 52px 0 80px; }
main { width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -1.4px; line-height: 1.15; margin-bottom: 10px; }
h2 { font-size: 18px; letter-spacing: -.25px; }
p { color: var(--muted); }
.page-heading { align-items: flex-start; display: flex; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.eyebrow { color: var(--brand); display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 5px 20px rgba(20, 32, 51, .04); padding: 24px; margin-bottom: 20px; }
.billing-page .card { overflow: visible; padding: 26px; }.billing-page .invoice-items { margin: 0; }.billing-page .invoice-items th:first-child,.billing-page .invoice-items td:first-child { padding-left: 14px; }.billing-page .invoice-items th:last-child,.billing-page .invoice-items td:last-child { padding-right: 14px; }
form { display: grid; gap: 15px; max-width: 540px; }
.inline-form { display: flex; align-items: end; flex-wrap: wrap; max-width: none; gap: 12px; }
.customer-picker { position: relative; }.customer-search-results { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 30px rgba(16,24,40,.14); left: 0; max-height: 260px; overflow: auto; padding: 6px; position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; }.customer-search-results button { background: transparent; border: 0; color: var(--ink); display: grid; gap: 2px; padding: 10px; text-align: left; width: 100%; }.customer-search-results button:hover { background: #f5f3ff; }.customer-search-results small { color: var(--muted); }.table-wrap { overflow-x: auto; }.invoice-items { border-collapse: collapse; min-width: 680px; width: 100%; }.invoice-items th { color: var(--muted); font-size: 11px; letter-spacing: .05em; padding: 14px 10px 8px; text-align: left; text-transform: uppercase; }.invoice-items td { border-top: 1px solid var(--line); padding: 10px; vertical-align: middle; }.invoice-items td:first-child { min-width: 260px; }.invoice-items input { margin: 0; min-width: 80px; width: 100%; }.line-total { font-weight: 800; white-space: nowrap; }.invoice-summary { display: flex; flex-wrap: wrap; gap: 20px; justify-content: flex-end; margin: 20px 0; }.invoice-summary span { color: var(--muted); display: grid; font-size: 12px; gap: 3px; text-align: right; }.invoice-summary strong { color: var(--ink); font-size: 16px; }.invoice-summary .invoice-grand-total strong { color: var(--brand); font-size: 20px; }
.company-logo-preview { border: 1px solid var(--line); border-radius: 10px; display: block; height: 64px; margin-top: 10px; max-width: 220px; object-fit: contain; padding: 6px; }
.customer-validation { color: #b42318; font-size: 13px; font-weight: 700; margin: 12px 0 0; }
.payment-disclosure { position: relative; }.payment-disclosure summary { background: #f7f6ff; border: 1px solid #dcd7ff; border-radius: 9px; color: var(--brand-dark); cursor: pointer; font-size: 13px; font-weight: 800; list-style: none; padding: 10px 12px; white-space: nowrap; }.payment-disclosure summary::-webkit-details-marker { display: none; }.payment-disclosure summary:after { content: '+'; float: right; font-size: 17px; line-height: 14px; margin-left: 9px; }.payment-disclosure[open] summary:after { content: '−'; }.payment-form { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 24px rgba(16,24,40,.14); display: grid; gap: 10px; margin-top: 8px; min-width: 260px; padding: 14px; position: absolute; right: 0; top: 100%; z-index: 12; }.payment-form p { margin: 0; }.payment-form label { font-size: 12px; }.payment-form input,.payment-form select { margin-top: 4px; }.payment-form button { width: 100%; }
@media (max-width: 620px) { .payment-form { min-width: 0; position: static; } }
.invoice-customer-panel { background: #fafaff; border: 1px solid var(--line); border-radius: 14px; margin: 0 0 20px; padding: 20px; }.invoice-customer-panel [hidden] { display: none !important; }.invoice-customer-panel h3 { font-size: 17px; margin: 0 0 4px; }.invoice-customer-panel .section-heading { margin-bottom: 14px; }.customer-mode { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }.customer-mode-button { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); display: flex; gap: 9px; min-height: 54px; padding: 9px 11px; text-align: left; transition: border-color .15s ease, box-shadow .15s ease; }.customer-mode-button:hover { border-color: var(--brand); box-shadow: 0 4px 12px rgba(81,66,210,.10); }.customer-mode-button > span:last-child { display: grid; gap: 2px; }.customer-mode-button strong { font-size: 13px; }.customer-mode-button small { color: var(--muted); font-size: 11px; font-weight: 500; }.customer-mode-icon { align-items: center; background: #f0eeff; border-radius: 8px; color: var(--brand); display: inline-flex; flex: 0 0 29px; font-size: 18px; height: 29px; justify-content: center; width: 29px; }.customer-mode-button.is-active { background: #f7f6ff; border: 2px solid var(--brand); box-shadow: 0 4px 12px rgba(81,66,210,.12); padding: 8px 10px; }.customer-mode-button.is-active .customer-mode-icon { background: var(--brand); color: #fff; }.customer-gstin-field { display: block; margin-top: 14px; max-width: 360px; }.visually-hidden { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }@media (max-width: 620px) { .customer-mode { grid-template-columns: 1fr; } }
[hidden] { display: none !important; }
label { color: #344054; display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.check { display: flex; align-items: center; gap: 8px; }
.check input { width: auto; min-height: 0; }
input, select { min-height: 42px; width: 100%; border: 1px solid #d5dbe5; border-radius: 8px; background: white; color: var(--ink); font: inherit; padding: 9px 11px; outline: none; }
textarea { min-height: 92px; width: 100%; border: 1px solid #d5dbe5; border-radius: 8px; background: white; color: var(--ink); font: inherit; padding: 9px 11px; outline: none; resize: vertical; }
input:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(91,75,219,.12); }
button { min-height: 42px; border: 0; border-radius: 8px; background: var(--brand); color: white; cursor: pointer; font: inherit; font-size: 14px; font-weight: 750; padding: 0 16px; }
button:hover { background: var(--brand-dark); }
[role="alert"] { color: #b42318; background: #fef3f2; border: 1px solid #fecdca; border-radius: 8px; padding: 10px 12px; }
.data-list { display: grid; gap: 12px; }
.pagination { align-items: center; display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; }
.pagination span { color: var(--muted); font-size: 13px; font-weight: 700; }
.member-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }.member-actions form { max-width: none; }.member-actions > form:not(.inline-form) { display: block; }.member-actions > form:not(.inline-form) button { font-size: 13px; min-height: 34px; padding: 0 11px; }.danger-button { background: #b42318; }.danger-button:hover { background: #912018; }
.list-filter { margin-bottom: 16px; max-width: 380px; }.toast { animation: toast-in .2s ease-out; background: #172033; border-radius: 10px; box-shadow: 0 12px 30px rgba(23,32,51,.24); color: white; font-weight: 700; max-width: min(420px, calc(100vw - 32px)); padding: 13px 16px; position: fixed; right: 20px; top: 20px; z-index: 9999; }.toast-success { background: #16794c; }.toast-error { background: #b42318; }@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.admin-plan-form { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 12px; max-width: none; }
.danger-zone { border-color: #fecdca; }.danger-zone hr { border: 0; border-top: 1px solid #fecdca; margin: 22px 0; }
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.workspace-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }.workspace-card { background: white; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); display: grid; gap: 10px; padding: 20px; transition: transform .15s, box-shadow .15s; }.workspace-card:hover { box-shadow: 0 10px 25px rgba(20,32,51,.08); text-decoration: none; transform: translateY(-2px); }.workspace-card small { color: var(--muted); }.action-link { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; white-space: nowrap; }.empty-workspace { max-width: 460px; }.empty-workspace .workspace-icon { margin-bottom: 8px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.metric { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.metric-brand { border-top: 4px solid var(--brand); }.metric-success { background: #f1fcf5; border-color: #b7ebc8; border-top: 4px solid #16794c; }.metric-success strong { color: #11643f; }.metric-warning { background: #fffaf0; border-color: #f6d99c; border-top: 4px solid #c58512; }.metric-warning strong { color: #9a650b; }.metric-danger { background: #fff5f4; border-color: #f5c0bb; border-top: 4px solid #b42318; }.metric-danger strong { color: #9f1c13; }.metric-info { background: #f3f8ff; border-color: #bfd9f5; border-top: 4px solid #3478c9; }.metric-info strong { color: #215f9f; }
.status-danger { background: #fee4e2; color: #b42318; }.report-filter { align-items: end; display: grid; gap: 12px; grid-template-columns: 1fr 1fr auto; max-width: 720px; }
.landing-url { display: flex; gap: 10px; max-width: 760px; }.landing-url input { flex: 1; }
.metric span, .metric small { display: block; color: var(--muted); font-size: 12px; }
.metric strong { display: block; font-size: 28px; letter-spacing: -1px; margin: 6px 0; }
.dashboard-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.quick-links { display: flex; flex-wrap: wrap; gap: 10px; }
.pipeline-list { display: grid; gap: 13px; }.pipeline-list div { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; align-items: center; }.pipeline-list span { color: var(--muted); font-size: 13px; }.pipeline-list strong { font-size: 14px; }.pipeline-list i { grid-column: 1 / -1; display: block; height: 8px; min-width: 6px; border-radius: 99px; background: var(--brand); }
.revenue-chart { align-items: end; display: flex; gap: 12px; height: 180px; padding-top: 20px; }.revenue-chart div { align-items: center; display: flex; flex: 1; flex-direction: column; gap: 7px; height: 100%; justify-content: end; min-width: 28px; }.revenue-chart i { background: linear-gradient(180deg, var(--brand), var(--brand-dark)); border-radius: 7px 7px 3px 3px; display: block; min-height: 5px; width: 100%; }.revenue-chart small { color: var(--muted); font-size: 11px; }.revenue-total { color: var(--brand); font-size: 28px; font-weight: 850; margin: 3px 0 0; }
.quick-links a { background: #f6f5ff; border-radius: 8px; font-weight: 700; padding: 9px 12px; }
.theme-card { border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.theme-card h3 { margin: 12px 0 6px; }
.theme-card p { min-height: 48px; }
.theme-swatch { display: block; height: 9px; border-radius: 999px; }
.data-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding: 18px 0 0; }
.contact-row .data-row { align-items: flex-start; }.contact-row details { position: relative; }.contact-row summary { color: var(--brand); cursor: pointer; font-size: 13px; font-weight: 750; list-style: none; }.contact-row summary::-webkit-details-marker { display: none; }.contact-edit { background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 25px rgba(20,32,51,.14); margin-top: 10px; padding: 14px; position: absolute; right: 0; width: min(360px, 78vw); z-index: 5; }.contact-row details > form:last-child { margin-top: 10px; }
.data-row:first-child { border-top: 0; padding-top: 0; }
.data-row p { margin: 7px 0 0; }
.verification { min-width: min(100%, 480px); }
.verification code { display: block; overflow-wrap: anywhere; margin: 7px 0 12px; padding: 8px; background: #f6f5ff; border-radius: 6px; color: #4a3abc; font-size: 12px; }
.status { display: inline-block; border-radius: 999px; padding: 3px 9px; background: #fff3d6; color: var(--pending); font-size: 12px; font-weight: 750; text-transform: capitalize; }
.status-active { background: #dff7ea; color: var(--success); }
.success { color: var(--success); font-weight: 700; }
.muted { color: var(--muted); }
ul { padding-left: 20px; }
li { margin: 8px 0; }
dl { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
dt { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
dd { margin: 3px 0 14px; font-weight: 700; }

@media (max-width: 620px) {
    .sidebar { display: none; }.app-main .content-wrap { width: min(100% - 28px, 1050px); }.mobile-topbar { align-items: center; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 14px 18px; position: sticky; top: 0; z-index: 70; }.mobile-topbar-actions { align-items: center; display: flex; gap: 12px; }.mobile-workspace-link { color: #4b5568; font-size: 12px; font-weight: 800; }.mobile-menu-trigger { align-items: center; background: #f1f0fb; border: 1px solid #dfdcf8; border-radius: 9px; display: grid; gap: 4px; justify-content: center; min-height: 38px; padding: 0; width: 40px; }.mobile-menu-trigger:hover { background: #e8e5ff; }.mobile-menu-trigger i { background: #3d347f; border-radius: 4px; display: block; height: 2px; width: 17px; }.mobile-nav-backdrop { background: rgba(18,23,39,.44); inset: 0; opacity: 0; position: fixed; transition: opacity .2s ease,visibility .2s ease; visibility: hidden; z-index: 90; }.mobile-nav-drawer { background: #171b2b; box-shadow: -16px 0 42px rgba(12,16,30,.28); color: #d8deed; display: flex; flex-direction: column; height: 100dvh; max-width: 340px; padding: 20px 15px 16px; position: fixed; right: 0; top: 0; transform: translateX(105%); transition: transform .24s ease; width: min(88vw,340px); z-index: 100; }.mobile-nav-open { overflow: hidden; }.mobile-nav-open .mobile-nav-backdrop { opacity: 1; visibility: visible; }.mobile-nav-open .mobile-nav-drawer { transform: translateX(0); }.mobile-nav-head { align-items: center; display: flex; justify-content: space-between; margin: 0 6px 22px; }.mobile-nav-head .brand { color: white; }.mobile-nav-close { align-items: center; background: #2b3147; border: 1px solid #3a425a; border-radius: 8px; color: #fff; display: inline-flex; font-size: 25px; font-weight: 400; height: 37px; justify-content: center; min-height: 37px; padding: 0; width: 37px; }.mobile-nav-close:hover { background: #353d56; }.mobile-workspace-switch { align-items: center; border: 1px solid #343a50; border-radius: 10px; color: #eef1ff; display: flex; gap: 10px; margin: 0 0 20px; padding: 10px; }.mobile-workspace-switch:hover { background: #252a3c; text-decoration: none; }.mobile-workspace-switch small { color: #9da5bd; display: block; font-size: 11px; margin-top: 1px; }.mobile-side-nav { display: grid; gap: 3px; overflow-y: auto; padding-right: 3px; }.mobile-side-nav a { border-radius: 7px; color: #c4cbdf; font-size: 14px; font-weight: 650; padding: 10px; }.mobile-side-nav a:hover,.mobile-side-nav a.is-current { background: #292e41; color: white; text-decoration: none; }.mobile-side-nav a.is-current { box-shadow: inset 3px 0 0 #8275f2; }.mobile-side-nav .nav-label { margin-top: 12px; }.mobile-nav-footer { border-top: 1px solid #343a50; display: grid; gap: 6px; margin-top: auto; padding: 16px 10px 0; }.mobile-nav-footer a { color: #c4cbdf; font-size: 13px; }.mobile-nav-footer form { max-width: none; }
    .topbar { height: auto; align-items: flex-start; flex-direction: column; gap: 16px; padding: 18px 20px; }
    nav { width: 100%; justify-content: space-between; gap: 10px; }
    nav a { font-size: 12px; }
    .content-wrap { width: min(100% - 28px, 1050px); padding-top: 32px; }
    .card { padding: 18px; }
    .data-row { align-items: flex-start; flex-direction: column; }
    .verification { min-width: 100%; }
    .theme-grid { grid-template-columns: 1fr; }
    .metric-grid, .dashboard-grid { grid-template-columns: 1fr; }
    .workspace-grid { grid-template-columns: 1fr; }
    .admin-plan-form { grid-template-columns: 1fr; }
}

/* Public JANVIRA marketing homepage */
.marketing-home { display: grid; gap: 0; }.marketing-home h1,.marketing-home h2,.marketing-home h3,.marketing-home p { margin: 0; }.marketing-home { color: #172033; }.home-hero { align-items: center; display: grid; gap: 52px; grid-template-columns: minmax(0,.92fr) minmax(460px,1.08fr); min-height: 620px; padding: 62px 0 80px; }.marketing-eyebrow { align-items: center; color: var(--brand); display: inline-flex; font-size: 12px; font-weight: 850; gap: 8px; letter-spacing: .08em; text-transform: uppercase; }.marketing-eyebrow i { background: #7b6ff0; border-radius: 99px; box-shadow: 0 0 0 5px #eeecff; height: 7px; width: 7px; }.home-hero h1 { font-size: clamp(44px,5.3vw,70px); letter-spacing: -.065em; line-height: .98; margin: 18px 0 21px; }.home-hero h1 em { color: var(--brand); font-style: normal; }.home-hero-copy > p { font-size: 18px; line-height: 1.62; max-width: 590px; }.home-hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin: 29px 0 22px; }.home-primary,.home-secondary { align-items: center; border-radius: 10px; display: inline-flex; font-size: 14px; font-weight: 800; gap: 14px; justify-content: center; min-height: 48px; padding: 0 19px; }.home-primary { background: var(--brand); box-shadow: 0 11px 24px rgba(91,75,219,.25); color: #fff; }.home-primary:hover { background: var(--brand-dark); color: #fff; text-decoration: none; transform: translateY(-1px); }.home-primary span { font-size: 19px; line-height: 1; }.home-secondary { background: #fff; border: 1px solid #dfe2ec; color: #344054; }.home-secondary:hover { background: #f8f8fb; color: #172033; text-decoration: none; }.home-trust { color: #667085; display: flex; flex-wrap: wrap; font-size: 12px; font-weight: 700; gap: 12px 18px; }.home-trust span { white-space: nowrap; }.home-preview { min-width: 0; position: relative; }.preview-glow { background: #d9d5ff; border-radius: 50%; filter: blur(58px); height: 210px; opacity: .55; position: absolute; right: 2%; top: 13%; width: 210px; z-index: -1; }.preview-window { background: #fff; border: 1px solid #dfe3ed; border-radius: 17px; box-shadow: 0 28px 70px rgba(32,39,67,.16); overflow: hidden; transform: perspective(1600px) rotateY(-5deg) rotateX(2deg); }.preview-top { align-items: center; border-bottom: 1px solid #e8ebf1; color: #172033; display: flex; font-size: 10px; font-weight: 850; gap: 7px; height: 45px; padding: 0 15px; }.preview-top .preview-mark { align-items: center; background: var(--brand); border-radius: 5px; color: white; display: inline-flex; height: 18px; justify-content: center; width: 18px; }.preview-top i { background: #eef0f5; border-radius: 99px; height: 7px; margin-left: auto; width: 72px; }.preview-top b { background: #f5f4ff; border-radius: 5px; color: var(--brand); padding: 4px 7px; }.preview-top strong { align-items: center; background: #dae7ff; border-radius: 50%; color: #2b5d95; display: inline-flex; height: 22px; justify-content: center; width: 22px; }.preview-body { display: grid; grid-template-columns: 140px 1fr; min-height: 385px; }.preview-body aside { background: #181c2c; color: #aeb6cb; display: grid; align-content: start; gap: 5px; padding: 19px 12px; }.preview-body aside small { color: #737e9a; font-size: 7px; font-weight: 800; letter-spacing: .08em; }.preview-body aside b { color: #fff; font-size: 10px; margin: 2px 0 15px; }.preview-body aside a { border-radius: 5px; color: #bdc5d9; font-size: 9px; font-weight: 700; padding: 7px; }.preview-body aside a.active { background: #30364e; color: #fff; }.preview-body > section { background: #f7f8fc; padding: 23px 20px; }.preview-title { align-items: start; display: flex; justify-content: space-between; }.preview-title small { color: var(--brand); font-size: 8px; font-weight: 850; letter-spacing: .07em; }.preview-title h2 { font-size: 21px; letter-spacing: -.05em; margin-top: 3px; }.preview-title button { font-size: 9px; min-height: 27px; padding: 0 9px; }.preview-metrics { display: grid; gap: 8px; grid-template-columns: repeat(3,1fr); margin: 18px 0; }.preview-metrics > div { background: #fff; border: 1px solid #e4e7ef; border-radius: 8px; padding: 10px; }.preview-metrics small { color: #737b8c; display: block; font-size: 7px; font-weight: 850; }.preview-metrics b { display: block; font-size: 17px; letter-spacing: -.04em; margin: 4px 0; }.preview-metrics span { color: #667085; font-size: 7px; font-weight: 700; }.preview-metrics .green { color: #168250; }.preview-metrics .amber { color: #ad6b06; }.preview-queue { background: #fff; border: 1px solid #e4e7ef; border-radius: 8px; padding: 12px; }.preview-queue > div { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 7px; }.preview-queue > div b { font-size: 10px; }.preview-queue > div small { color: #7b8392; font-size: 7px; }.preview-queue p { align-items: center; border-top: 1px solid #eef0f5; color: #172033; display: grid; font-size: 8px; gap: 3px 7px; grid-template-columns: 7px 1fr auto; margin: 0; padding: 9px 0; }.preview-queue p i { background: #f4bd45; border-radius: 50%; height: 6px; width: 6px; }.preview-queue p strong { font-size: 8px; }.preview-queue p span { color: #7b8392; grid-column: 2; }.preview-queue p em { background: #fff2d6; border-radius: 99px; color: #a86400; font-size: 7px; font-style: normal; font-weight: 800; grid-column: 3; grid-row: 1 / span 2; padding: 3px 5px; }.home-proof { border-bottom: 1px solid #e4e7ef; border-top: 1px solid #e4e7ef; display: grid; grid-template-columns: repeat(3,1fr); margin: 0 calc((100vw - 100%) / -2); padding: 25px max(20px, calc((100vw - 1050px) / 2)); }.home-proof > div { border-left: 1px solid #e4e7ef; display: grid; gap: 2px; padding: 0 26px; }.home-proof > div:first-child { border-left: 0; }.home-proof b { font-size: 15px; }.home-proof span { color: var(--muted); font-size: 12px; }.home-section { padding: 100px 0; }.marketing-section-heading { max-width: 650px; }.marketing-section-heading h2 { font-size: clamp(30px,3.6vw,46px); letter-spacing: -.052em; line-height: 1.05; margin: 13px 0; }.marketing-section-heading > p { font-size: 17px; line-height: 1.6; }.industry-grid { display: grid; gap: 14px; grid-template-columns: repeat(4,1fr); margin-top: 38px; }.industry-grid article { background: #fff; border: 1px solid #e1e5ed; border-radius: 15px; min-height: 254px; padding: 20px; transition: box-shadow .2s,transform .2s; }.industry-grid article:hover { box-shadow: 0 16px 30px rgba(28,37,63,.09); transform: translateY(-3px); }.industry-icon { align-items: center; border-radius: 10px; display: inline-flex; font-size: 21px; height: 43px; justify-content: center; margin-bottom: 38px; width: 43px; }.industry-icon.car { background: #e7f0ff; }.industry-icon.shield { background: #eeeaff; }.industry-icon.health { background: #e4f9ed; color: #168250; font-size: 25px; }.industry-icon.event { background: #fff1db; }.industry-grid h3,.feature-grid h3,.steps-grid h3 { font-size: 17px; letter-spacing: -.025em; margin-bottom: 8px; }.industry-grid p,.feature-grid p,.steps-grid p { font-size: 13px; line-height: 1.6; }.industry-grid small { color: var(--brand); display: block; font-size: 10px; font-weight: 800; line-height: 1.5; margin-top: 14px; }.home-features { background: #171b2b; box-shadow: 0 0 0 100vmax #171b2b; clip-path: inset(0 -100vmax); color: #fff; }.home-features .marketing-eyebrow { color: #a99fff; }.home-features .marketing-eyebrow i { background: #b7afff; box-shadow: 0 0 0 5px #2e3148; }.home-features .marketing-section-heading h2 { max-width: 640px; }.feature-grid { display: grid; gap: 12px; grid-template-columns: repeat(3,1fr); margin-top: 36px; }.feature-grid article { background: #21263a; border: 1px solid #323850; border-radius: 13px; min-height: 202px; padding: 21px; }.feature-grid article > span { align-items: center; background: #343950; border-radius: 8px; color: #bfb8ff; display: inline-flex; font-size: 22px; height: 38px; justify-content: center; margin-bottom: 28px; width: 38px; }.feature-grid h3 { color: #fff; }.feature-grid p { color: #b9c0d1; }.home-steps { padding-bottom: 88px; }.steps-grid { display: grid; gap: 16px; grid-template-columns: repeat(3,1fr); margin-top: 37px; }.steps-grid article { border-top: 1px solid #dce1ea; padding: 21px 6px 0; }.steps-grid b { color: var(--brand); font-size: 13px; letter-spacing: .08em; }.steps-grid h3 { margin-top: 21px; }.home-cta { align-items: center; background: linear-gradient(120deg,#5b4bdb,#7869ed); border-radius: 19px; color: #fff; display: flex; gap: 28px; justify-content: space-between; margin: 0 0 88px; overflow: hidden; padding: 45px 52px; position: relative; }.home-cta:after { border: 50px solid rgba(255,255,255,.10); border-radius: 50%; content: ''; height: 210px; position: absolute; right: -80px; top: -125px; width: 210px; }.home-cta .marketing-eyebrow { color: #e9e7ff; }.home-cta .marketing-eyebrow i { background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.18); }.home-cta h2 { font-size: clamp(26px,3vw,38px); letter-spacing: -.045em; line-height: 1.08; margin: 13px 0 8px; max-width: 670px; }.home-cta p { color: #e7e5ff; }.home-cta .home-primary { background: #fff; color: #4335b8; flex: 0 0 auto; position: relative; z-index: 1; }.home-cta .home-primary:hover { background: #f2f0ff; }.home-footer { align-items: center; border-top: 1px solid #e2e6ee; display: grid; gap: 12px 24px; grid-template-columns: 1fr auto; padding: 26px 0 0; }.home-footer p { font-size: 12px; grid-row: 2; margin: 0; }.home-footer > div { display: flex; gap: 18px; }.home-footer > div a { color: #667085; font-size: 12px; font-weight: 700; }
@media (max-width: 860px) { .home-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 40px; }.home-hero-copy { max-width: 680px; }.home-preview { margin: 5px auto 0; max-width: 640px; width: 100%; }.industry-grid { grid-template-columns: repeat(2,1fr); }.feature-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px) { .marketing-home { overflow: hidden; }.home-hero { gap: 34px; padding: 28px 0 54px; }.home-hero h1 { font-size: 45px; }.home-hero-copy > p { font-size: 16px; }.home-hero-actions { display: grid; grid-template-columns: 1fr; }.home-primary,.home-secondary { width: 100%; }.home-trust { display: grid; gap: 8px; }.preview-window { border-radius: 12px; transform: none; }.preview-body { grid-template-columns: 92px 1fr; min-height: 282px; }.preview-body aside { padding: 13px 8px; }.preview-body aside a { font-size: 7px; padding: 6px 4px; }.preview-body > section { padding: 15px 11px; }.preview-title h2 { font-size: 15px; }.preview-metrics { gap: 5px; margin: 13px 0; }.preview-metrics > div { padding: 7px; }.preview-metrics b { font-size: 13px; }.preview-queue { padding: 8px; }.preview-queue p { font-size: 7px; padding: 7px 0; }.home-proof { grid-template-columns: 1fr; margin: 0 -14px; padding: 18px 14px; }.home-proof > div { border-left: 0; border-top: 1px solid #e4e7ef; padding: 13px 6px; }.home-proof > div:first-child { border-top: 0; }.home-section { padding: 66px 0; }.marketing-section-heading h2 { font-size: 32px; }.marketing-section-heading > p { font-size: 15px; }.industry-grid,.feature-grid,.steps-grid { grid-template-columns: 1fr; margin-top: 25px; }.industry-grid article { min-height: auto; }.industry-icon { margin-bottom: 23px; }.feature-grid article { min-height: auto; }.feature-grid article > span { margin-bottom: 20px; }.home-cta { align-items: stretch; flex-direction: column; margin-bottom: 55px; padding: 31px 24px; }.home-footer { grid-template-columns: 1fr; padding-bottom: 8px; }.home-footer p { grid-row: auto; }.home-footer > div { flex-wrap: wrap; } }
.drawer-backdrop { background: rgba(23,32,51,.45); inset: 0; position: fixed; z-index: 900; }
.drawer { background: white; box-shadow: -12px 0 36px rgba(20,32,51,.2); display: grid; gap: 18px; height: 100dvh; overflow-y: auto; padding: 24px; position: fixed; right: 0; top: 0; width: min(520px, 100vw); z-index: 1000; }
.drawer[hidden], .drawer-backdrop[hidden] { display: none !important; }
.drawer-head { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding-bottom: 14px; }.drawer-head h2 { margin: 0; }.drawer form { max-width: none; }.secondary-button { background: #f1f3f8; color: #344054; }.secondary-button:hover { background: #e5e8f0; }.drawer hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.crm-detail { width: min(600px, 100vw); }.detail-summary { background: #f7f8fc; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 14px; grid-template-columns: 1fr 1fr; padding: 16px; }.detail-summary div { display: grid; gap: 3px; }.detail-summary span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.detail-summary strong { font-size: 14px; overflow-wrap: anywhere; }.detail-section { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 20px; }.detail-section h3 { font-size: 16px; margin-bottom: 12px; }
@media (min-width: 621px) { body.drawer-open .app-main { padding-right: 540px; transition: padding-right .2s ease; } body.drawer-open .content-wrap { width: min(100% - 48px, 1120px); } }
.contact-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }.contact-actions form { max-width: none; }.contact-actions .action-link, .contact-actions button { min-height: 36px; padding: 0 11px; font-size: 12px; }
.contact-main { min-width: 0; width: 100%; }.contact-actions-inline { justify-content: flex-start; margin-top: 13px; }
.directory-tools { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }.directory-tools .list-filter { margin: 0; }.directory-tools button { min-height: 42px; }
.platform-announcement-stack { display: grid; gap: 10px; margin: 0 0 22px; }.platform-announcement { align-items: flex-start; border: 1px solid #c7d7fe; border-radius: 12px; color: #163970; display: flex; flex-direction: column; gap: 4px; padding: 15px 18px; background: #edf4ff; }.platform-announcement strong { font-size: 15px; }.platform-announcement span { color: inherit; line-height: 1.45; }.platform-announcement.tone-success { background: #ecfdf3; border-color: #b7ebc8; color: #12633d; }.platform-announcement.tone-warning { background: #fff9e9; border-color: #f2d38a; color: #8a5a00; }.platform-announcement.tone-urgent { background: #fff0ef; border-color: #f5b6b0; color: #a42b24; }
.reminder-contact-preview { background: #f7f8fc; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 3px; padding: 13px; }.reminder-contact-preview span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.reminder-contact-preview strong { overflow-wrap: anywhere; }.reminder-contact-preview p { font-size: 13px; margin: 0; overflow-wrap: anywhere; }
.crm-directory-card .section-heading { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; }.crm-filter-form { align-items: end; display: grid; gap: 12px; grid-template-columns: 2fr 1fr 1fr auto; max-width: none; margin: 22px 0; }.filter-actions { align-items: center; display: flex; gap: 12px; min-height: 42px; }.filter-actions a { font-size: 13px; font-weight: 700; }.crm-table-wrap { overflow-x: auto; }.crm-table { border-collapse: collapse; min-width: 760px; width: 100%; }.crm-table th { color: var(--muted); font-size: 11px; letter-spacing: .05em; padding: 0 12px 10px; text-align: left; text-transform: uppercase; }.crm-table td { border-top: 1px solid var(--line); color: #475467; font-size: 13px; padding: 14px 12px; vertical-align: middle; }.crm-table td:first-child { color: var(--ink); min-width: 220px; }.crm-table td strong, .crm-table td span { display: block; }.crm-table td span:not(.status) { color: var(--muted); font-size: 12px; margin-top: 3px; }.back-link { color: var(--muted); display: inline-block; font-size: 13px; font-weight: 700; margin-bottom: 14px; }.detail-layout { align-items: start; display: grid; gap: 20px; grid-template-columns: minmax(0, 1.4fr) minmax(320px, .8fr); }.detail-primary { display: grid; gap: 20px; }.detail-sidebar { display: grid; gap: 20px; position: sticky; top: 18px; }.profile-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }.profile-grid div { background: #f8f9fc; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 4px; padding: 13px; }.profile-grid span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.profile-grid strong { overflow-wrap: anywhere; }.profile-notes { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }.profile-notes p { margin: 6px 0 0; }.activity-timeline { list-style: none; margin: 0; padding: 0; }.activity-timeline li { display: grid; gap: 12px; grid-template-columns: 14px 1fr; margin: 0; padding: 0 0 20px; position: relative; }.activity-timeline li:before { background: var(--line); bottom: 0; content: ''; left: 6px; position: absolute; top: 12px; width: 2px; }.activity-timeline li:last-child:before { display: none; }.timeline-dot { background: var(--brand); border: 3px solid #e7e3ff; border-radius: 50%; height: 14px; margin-top: 3px; position: relative; width: 14px; z-index: 1; }.activity-timeline p { font-size: 12px; margin: 3px 0 0; }
.reminder-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 18px; margin: 18px 0; }.reminder-tabs a { border-bottom: 2px solid transparent; color: var(--muted); font-size: 13px; font-weight: 750; padding: 0 2px 10px; }.reminder-tabs a.active { border-bottom-color: var(--brand); color: var(--brand); }.followup-list { display: grid; }.followup-row { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 18px; justify-content: space-between; padding: 15px 0; }.followup-row:first-child { border-top: 0; }.followup-summary p { font-size: 13px; margin: 4px 0 0; }.followup-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }.followup-actions form { display: block; max-width: none; }.followup-actions button, .followup-actions .action-link { font-size: 12px; min-height: 36px; padding: 0 10px; }.reschedule { position: relative; }.reschedule summary { color: var(--brand); cursor: pointer; font-size: 12px; font-weight: 750; list-style: none; }.reschedule summary::-webkit-details-marker { display: none; }.reschedule form { background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 24px rgba(20,32,51,.14); display: grid; gap: 8px; padding: 10px; position: absolute; right: 0; top: 25px; width: 250px; z-index: 5; }
.followup-action-card.queue-loading { opacity: .58; pointer-events: none; }.followup-action-card.queue-enter { animation: queue-enter .2s ease-out; }@keyframes queue-enter { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
.queue-overdue { border-left: 4px solid #b42318; }.queue-today { border-left: 4px solid #c58512; }.queue-upcoming { border-left: 4px solid #3478c9; }.success-button { background: #16794c; }.success-button:hover { background: #11643f; }.warning-button { background: #fff3d6; color: #9a650b; }.warning-button:hover { background: #f9e6b5; }
@media (max-width: 620px) { .page-heading { flex-direction: column; }.quick-links { width: 100%; }.quick-links button, .quick-links a { flex: 1; }.contact-actions { justify-content: flex-start; width: 100%; }.contact-actions .action-link, .contact-actions form, .contact-actions button { flex: 1; }.contact-actions form button { width: 100%; }.detail-summary { grid-template-columns: 1fr; }.drawer { padding: 18px; } }
@media (max-width: 620px) {
    .crm-page { overflow-x: hidden; }
    .crm-page .page-heading { gap: 16px; margin-bottom: 20px; }
    .crm-page .page-heading h1 { font-size: 30px; }
    .crm-page .quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
    .crm-page .quick-links > * { align-self: stretch; min-width: 0; width: 100%; }
    .crm-page .quick-links > *:last-child { grid-column: 1 / -1; }
    .crm-page .section-heading { display: grid; gap: 14px; }
    .crm-page .section-heading h2 { margin-bottom: 5px; }
    .crm-page .list-filter { margin: 0; max-width: none; }
    .crm-page .directory-tools { display: grid; grid-template-columns: 1fr; }
    .crm-page .directory-tools button { min-height: 46px; width: 100%; }
    .crm-page .card { padding: 18px; }
    .crm-page .data-list { gap: 0; }
    .crm-page .contact-list-row { gap: 0; padding: 17px 0; width: 100%; }
    .crm-page .contact-main { overflow: hidden; }
    .crm-page .contact-main > strong { display: block; font-size: 16px; overflow-wrap: anywhere; }
    .crm-page .contact-main p { overflow-wrap: anywhere; }
    .crm-page .contact-actions-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
    .crm-page .contact-actions-inline .action-link, .crm-page .contact-actions-inline form, .crm-page .contact-actions-inline form button { min-height: 42px; width: 100%; }
    .crm-page .contact-actions-inline .action-link { padding: 0 8px; }
    .crm-page .drawer { gap: 16px; height: 100dvh; padding: 16px; width: 100vw; }
    .crm-page .drawer-head { background: white; position: sticky; top: -16px; z-index: 1; }
    .crm-page .drawer-head .secondary-button { min-height: 40px; }
    .crm-page .detail-section { margin-top: 16px; padding-top: 16px; }
    .crm-directory-card .section-heading { align-items: stretch; flex-direction: column; }.crm-directory-card .section-heading .action-link { width: 100%; }
    .crm-filter-form { grid-template-columns: 1fr; }.filter-actions { display: grid; grid-template-columns: 1fr 1fr; }.filter-actions button, .filter-actions a { align-items: center; display: flex; justify-content: center; min-height: 42px; }.detail-layout { grid-template-columns: 1fr; }.detail-sidebar { position: static; }.profile-grid { grid-template-columns: 1fr; }
    .reminder-tabs { gap: 12px; overflow-x: auto; }.reminder-tabs a { white-space: nowrap; }.followup-row { align-items: stretch; flex-direction: column; }.followup-actions { justify-content: flex-start; }.followup-actions > * { flex: 1; }.followup-actions button, .followup-actions .action-link { width: 100%; }.reschedule form { left: 0; right: auto; width: min(280px, 80vw); }
    .report-filter { grid-template-columns: 1fr; }
    .landing-url { flex-direction: column; }.landing-url button, .landing-url a { width: 100%; }
}