:root {
    --bg: #0f1116;
    --fg: #f2efe8;
    --muted: #b4afa6;
    --hubspot: #d4a44c;
    --owl-color: #d4a44c;
    --surface: rgba(255, 255, 255, 0.05);
    --surface-strong: rgba(255, 255, 255, 0.08);
    --surface-border: rgba(255, 255, 255, 0.12);
    --surface-border-strong: rgba(255, 255, 255, 0.2);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.5;
}

.container {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- mock-only banner ---------- */
.mock-banner {
    background: #1a1d24;
    border-bottom: 1px solid var(--surface-border);
    color: var(--muted);
    font-size: 13px;
    text-align: center;
    padding: 10px 16px;
}
.mock-banner strong { color: var(--hubspot); }

/* ---------- hero ---------- */
.hero {
    padding: 64px 0 40px;
    text-align: center;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    padding: .4rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--surface-border);
    background: var(--surface);
    color: var(--hubspot);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.hero h1 {
    font-size: 38px;
    font-weight: 700;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}
.hero .lead {
    color: var(--muted);
    font-size: 17px;
    max-width: 600px;
    margin: 0 auto;
}

/* ---------- section separator (diamond) ---------- */
.section-separator {
    display: flex;
    justify-content: center;
    padding: 8px 0;
}
.section-sep { width: 22px; height: 22px; }

/* ---------- integration block ---------- */
.section { padding: 0; }

.int-block {
    padding: 44px 0;
    border-bottom: 1px solid var(--surface-border);
}
.int-block:last-of-type { border-bottom: none; }

.int-type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hubspot);
    margin-bottom: 10px;
}
.int-type-icon {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.int-type-icon img { width: 13px; height: 13px; object-fit: contain; }

.int-block h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--fg);
}
.int-block p {
    color: var(--muted);
    font-size: 15px;
    margin: 0 0 10px;
}
.int-block p:last-of-type { margin-bottom: 22px; }

.int-cta {
    display: inline-block;
    font-size: 12px;
    padding: 6px 13px;
    border-radius: 8px;
    text-decoration: none;
    margin-bottom: 22px;
    margin-top: -8px;
    border: 1px solid rgba(255,122,89,.4);
    color: #ff7a59;
    background: rgba(255,122,89,.07);
}

/* small two-card grid used inside the task-management block */
.int-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom: 22px; }
@media (max-width:576px) { .int-grid { grid-template-columns:1fr; } }
.int-card {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    padding: 12px 14px;
}
.int-card-head { display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.int-card-icon {
    width: 26px; height: 26px; border-radius: 7px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.int-card-icon img { width:15px; height:15px; object-fit:contain; }
.int-card-name { font-size:13px; font-weight:700; color:var(--fg); }
.int-card-desc { font-size:12px; color:var(--muted); line-height:1.45; margin:0; }

/* ---------- visual wrapper (the "frame" under every description) ---------- */
.int-visual {
    width: 100%;
}

/* ===== HubSpot mock ===== */
.hs-mock, .slack-mock, .gcal-mock, .mcp-mock {
    border: 1px solid var(--surface-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg) 68%, transparent);
    overflow: hidden;
}
.hs-mock-topbar, .slack-mock-topbar, .gcal-topbar, .mcp-topbar {
    display:flex; align-items:center; gap:9px;
    padding: 10px 13px;
    border-bottom: 1px solid var(--surface-border);
    background: var(--surface);
}
.hs-logo-sq, .slack-logo-sq, .gcal-logo-sq, .mcp-logo-sq {
    width: 22px; height: 22px; border-radius: 6px;
    display:flex; align-items:center; justify-content:center;
    background: #fff; flex-shrink:0;
}
.service-logo-img { width: 14px; height: 14px; object-fit: contain; }
.hs-topbar-name, .gcal-topbar-title, .mcp-topbar-title { font-size: 13px; font-weight: 700; color: var(--fg); }
.hs-topbar-sub { font-size: 11px; color: var(--muted); margin-left: auto; }
.slack-topbar-channel { font-size: 13px; font-weight: 700; color: var(--fg); }

.hs-mock-body { padding: 13px; }
.hs-good-morning { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.hs-sec-label { font-size: 11px; color: var(--muted); margin-bottom: 7px; display:flex; align-items:center; gap:5px; }
.hs-task-row { display:flex; align-items:center; gap:8px; padding: 7px 0; border-top: 1px solid var(--surface-border); font-size:12.5px; }
.hs-task-row:first-of-type { border-top: none; }
.hs-task-circle { width:14px; height:14px; border-radius:50%; border:1.5px solid var(--surface-border-strong); flex-shrink:0; }
.hs-task-text { flex: 1; color: var(--fg); }
.hs-tag { color:var(--hubspot); font-weight:600; }
.hs-task-pri { font-size:10px; padding:2px 7px; border-radius:5px; font-weight:600; flex-shrink:0; }
.hs-task-pri.high { background:rgba(248,113,113,.15); color:#f87171; }
.hs-task-pri.med  { background:rgba(212,164,76,.15); color:var(--hubspot); }
.hs-task-date { font-size: 10px; color: var(--muted); flex-shrink: 0; width: 36px; text-align:right; }
.hs-actions { display:flex; gap:8px; margin-top:13px; }
.hs-btn { font-size:12px; padding:6px 13px; border-radius:8px; border:1px solid var(--surface-border); color:var(--muted); background:transparent; cursor:default; }
.hs-btn.orange { border-color: rgba(255,122,89,.4); color:#ff7a59; background: rgba(255,122,89,.07); text-decoration:none; }

.slack-mock-body { padding:12px 14px; display:flex; flex-direction:column; gap:12px; }
.slack-msg { display:flex; gap:10px; }
.slack-avi { width:30px; height:30px; border-radius:7px; background: rgba(212,164,76,.15); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:var(--hubspot); flex-shrink:0; }
.slack-content { flex:1; }
.slack-msg-header { display:flex; align-items:baseline; gap:7px; margin-bottom:3px; }
.slack-sender { font-weight:700; font-size:13px; color:var(--fg); }
.slack-app-badge { font-size:9px; padding:1px 5px; border-radius:3px; background:var(--surface-strong); color:var(--muted); }
.slack-ts { font-size:11px; color:var(--muted); }
.slack-msg-body { font-size:13px; color:var(--fg); line-height:1.5; }
.slack-co-link { color:var(--hubspot); font-weight:600; text-decoration:none; }
.slack-meta { font-size:12px; color:var(--muted); margin-top:5px; line-height:1.6; }
.slack-actions-list { color: var(--muted); }
.slack-footer-input { padding:8px 14px; font-size:12px; color:var(--muted); border-top:1px solid var(--surface-border); }

.gcal-body { padding: 13px; display:flex; flex-direction:column; gap:12px; }
.gcal-meeting { display:flex; gap:11px; }
.gcal-time { font-size:11px; color:var(--muted); width:42px; flex-shrink:0; padding-top:2px; }
.gcal-info { flex: 1; }
.gcal-name { font-size: 13px; font-weight: 700; color: var(--fg); margin-bottom:4px; }
.gcal-prep { font-size:11px; color:var(--muted); line-height:1.45; padding:6px 9px; background:rgba(212,164,76,.07); border-left:2px solid var(--hubspot); border-radius: 0 4px 4px 0; }
.gcal-prep strong { color:var(--hubspot); }

/* ===== MCP "coming soon" mock ===== */
.coming-soon-pill {
    display:inline-flex; align-items:center; gap:6px;
    font-size: 11px; font-weight: 700; letter-spacing:.04em; text-transform:uppercase;
    color: #0f1116; background: var(--hubspot);
    padding: 4px 10px; border-radius: 999px;
    margin-left: 10px; vertical-align: middle;
}
.mcp-logo-sq { background: rgba(212,164,76,.15); }
.mcp-logo-sq svg { width: 14px; height: 14px; }
.mcp-body { padding: 16px; }
.mcp-flow { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom: 16px; }
.mcp-node {
    flex: 1; text-align:center; padding: 12px 8px;
    border: 1px solid var(--surface-border); border-radius: 10px;
    background: var(--surface); font-size: 11.5px; color: var(--fg); font-weight: 600;
}
.mcp-node.dim { color: var(--muted); font-weight: 500; }
.mcp-node .mcp-node-sub { display:block; font-size: 10px; color: var(--muted); font-weight: 400; margin-top: 3px; }
.mcp-arrow { color: var(--surface-border-strong); font-size: 16px; flex-shrink: 0; }
.mcp-caption { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.5; }
.mcp-caption strong { color: var(--hubspot); }

@media (max-width: 600px) {
    .hero h1 { font-size: 28px; }
    .int-block h2 { font-size: 20px; }
    .mcp-flow { flex-direction: column; }
    .mcp-arrow { transform: rotate(90deg); }
}