/* Mobile menu overlay */
.mobile-menu{position:fixed;inset:0;background:var(--bg);z-index:150;display:none;flex-direction:column;padding:20px}
.mobile-menu[data-open="true"]{display:flex}
.mobile-menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}
.mobile-menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.mobile-menu a{display:block;padding:16px 4px;text-decoration:none;color:var(--text);font-size:20px;font-weight:700;border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:24px}
.mobile-menu .btn-primary{color:var(--accent-contrast)}
.icon-close{background:none;border:1px solid var(--line);border-radius:10px;padding:10px;color:var(--text)}

/* UI mockup: Unified Inbox */
.mockup{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.mockup-inbox .mockup-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:13px;color:var(--muted)}
.mockup-thread{display:flex;flex-direction:column;gap:10px}
.bubble{max-width:80%;padding:12px 14px;border-radius:14px;font-size:14px}
.bubble-in{background:var(--surface-3);align-self:flex-start;border-bottom-left-radius:4px}
.bubble-out{background:var(--accent);color:var(--accent-contrast);align-self:flex-end;border-bottom-right-radius:4px;font-weight:600}
.bubble-meta{font-size:11px;color:var(--muted);margin-top:4px}
.mockup-status-row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

/* Lead card mockup */
.lead-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px;display:flex;flex-direction:column;gap:10px}
.lead-card .lead-top{display:flex;justify-content:space-between;align-items:flex-start}
.lead-card .lead-name{font-weight:800}
.lead-card .lead-channel{font-size:12px;color:var(--muted)}
.lead-card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px;margin:0}
.lead-card dt{color:var(--muted)}
.lead-card dd{margin:0;font-weight:600}

/* Funnel diagram */
.funnel{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;font-weight:700}
.funnel .funnel-step{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:10px 16px;white-space:nowrap}
.funnel .funnel-arrow{color:var(--accent);font-weight:800}

/* Analytics mockup */
.analytics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;min-width:0}
.analytics-grid>*{min-width:0}
@media(min-width:640px){.analytics-grid{grid-template-columns:repeat(3,1fr)}}
.analytics-tile{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px}
.analytics-tile .value{font-size:22px;font-weight:800;color:var(--accent)}
.analytics-tile .label{font-size:12px;color:var(--muted)}

/* Integration card */
.integration-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.integration-card .name{font-weight:700}

/* Icons (inline SVG sprite use) */
.icon{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-lg{width:28px;height:28px}

/* Control/security list */
.control-list{display:grid;gap:16px}
.control-item{display:flex;gap:14px;align-items:flex-start}
.control-item .icon{color:var(--accent);margin-top:2px}
.control-item p{margin:0;color:var(--muted)}
.control-item strong{display:block;margin-bottom:4px}