/* ============================================================
   RevOps MCP. Page-specific pieces on top of pages.css: a raw write
   log for the problem, the route from assistant to CRM, the request
   console, and the audience and compatibility lists. Lavender accent,
   no gradients.
   ============================================================ */

.hero--page .lede strong { font-weight: 600; color: var(--ink-900); }

/* ---- The problem: four writes that go straight in ---- */
.rawlog { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.rawlog-head, .rawlog-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; padding: 0 28px; }
.rawlog-head { padding-top: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); background: var(--parchment); font-size: 0.8125rem; color: var(--ink-500); }
.rawlog-row { align-items: baseline; padding-top: 20px; padding-bottom: 20px; }
.rawlog-row + .rawlog-row { border-top: 1px solid var(--ink-100); }
.rawlog-row code { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-800); overflow-wrap: anywhere; }
.rawlog-row p { color: #A86248; }
.rawlog + .caption { margin-top: 14px; }
html.js .rawlog-row[data-reveal] { transition-delay: calc(var(--i, 0) * 110ms); }
@media (max-width: 900px) {
    .rawlog-head, .rawlog-row { gap: 24px; }
}
@media (max-width: 640px) {
    .rawlog-head { display: none; }
    .rawlog-head, .rawlog-row { grid-template-columns: 1fr; gap: 6px; padding-left: 18px; padding-right: 18px; }
}

/* ---- How it works: the flow from agents through Quill to the CRM.
   Brought over from v2 (page-revops-mcp-v2.css) on its mcp- prefix:
   nodes sit on a fixed 740x278 canvas pinned to the SVG wire ends, the
   whole figure scales as one unit, dots travel the wires (lavender in,
   blue out), and phones get the nodes stacked with short vertical
   wires that carry the same dots. ---- */
.mcp-flow { --s: 1; height: calc(278px * var(--s)); margin: 0; display: flex; justify-content: center; }
.mcp-canvas { position: relative; width: 740px; height: 278px; flex-shrink: 0; transform: scale(var(--s)); transform-origin: top left; margin-right: calc(740px * (var(--s) - 1)); }
.mcp-wires { position: absolute; inset: 0; overflow: visible; max-width: none; }
.mcp-wires-in { stroke: var(--ink-400); }
.mcp-wires-out { stroke: var(--lavender-500); }
.mcp-dots-in { fill: var(--lavender-500); }
.mcp-dots-out { fill: var(--blue-500); }
.mcp-node { position: absolute; display: flex; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.mcp-agent { gap: 12px; padding: 0 16px; width: 164px; height: 50px; }
.mcp-crm { gap: 12px; padding: 0 18px; width: 150px; height: 48px; }
.mcp-node-name { font-size: 0.875rem; font-weight: 500; color: var(--ink-800); white-space: nowrap; }
/* Marks sit bare beside the names, no tiles */
.mcp-agent-glyph, .mcp-crm-glyph { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.mcp-agent-glyph svg { width: 13px; height: 13px; }
.mcp-agent-glyph svg * { stroke: var(--ink-700); }
.mcp-agent-glyph svg.brand { width: 15px; height: 15px; }
.mcp-agent-glyph svg.brand * { stroke: none; fill: var(--ink-800); }
.mcp-crm-glyph { color: var(--lavender-600); }
.mcp-crm-glyph svg { width: 16px; height: 16px; }
.mcp-hub { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; background: var(--lavender-50); border: 1px solid var(--lavender-500); border-radius: var(--r-card); }
.mcp-hub-name { font-family: var(--serif); font-size: 1.125rem; font-weight: 450; letter-spacing: -0.01em; color: var(--ink-900); }
.mcp-hub-sub { font-size: 0.8125rem; line-height: 1.45; color: var(--ink-600); }
.mcp-lane { position: absolute; font-size: 0.8125rem; font-weight: 500; color: var(--ink-500); white-space: nowrap; text-align: center; }
/* Scale as one unit rather than reflowing */
@media (max-width: 880px) { .mcp-flow { --s: 0.88; } }
@media (max-width: 780px) { .mcp-flow { --s: 0.80; } }
.mcp-vwire { display: none; }
@media (max-width: 680px) {
    .mcp-flow { height: auto; display: block; }
    .mcp-canvas { width: auto; height: auto; transform: none; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .mcp-wires { display: none; }
    .mcp-canvas > .mcp-lane { position: static; grid-column: 1 / -1; width: auto !important; text-align: left; margin-bottom: 2px; }
    .mcp-canvas > .mcp-node { position: static; width: auto; min-width: 0; }
    .mcp-agent { height: 46px; padding: 0 14px; }
    .mcp-crm { height: 46px; padding: 0 14px; }
    .mcp-canvas > .mcp-hub { position: static; grid-column: 1 / -1; width: auto !important; height: 84px !important; }
    .mcp-vwire { display: block; grid-column: 1 / -1; justify-self: center; width: 20px; height: 44px; overflow: visible; }
    .mcp-vwire path { fill: none; }
    .mcp-vwire--in path { stroke: var(--ink-400); stroke-width: 1.1; stroke-dasharray: 2 5; stroke-linecap: round; }
    .mcp-vwire--out path { stroke: var(--lavender-500); stroke-width: 1.5; }
    .mcp-vwire--out { margin-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) { .mcp-dots-in, .mcp-dots-out { display: none; } }
.route-note { margin-top: 72px; max-width: 62ch; font-size: 1.125rem; line-height: 1.55; color: var(--ink-700); }
.route-note em { color: var(--lavender-700); }

/* ---- Examples: one agent request, checked and answered ---- */
.app--mcp { grid-template-columns: 236px 1fr; }
.app--mcp .app-side a { align-items: flex-start; line-height: 1.4; padding: 8px 10px; margin-bottom: 2px; }
.app--mcp .app-main { padding: 24px 28px 28px; }
.app--mcp .finding { padding: 18px 22px 22px; }
@media (min-width: 861px) { .app--mcp .finding { min-height: 424px; } } /* no jump between requests */
.hop { list-style: none; position: relative; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.hop li { position: relative; padding-left: 28px; }
.hop li + li { margin-top: 18px; }
.hop li::before { content: ""; position: absolute; left: 0; top: 4px; width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--ink-300); background: #fff; z-index: 1; }
.hop li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 17px; bottom: -16px; width: 1px; background: var(--ink-200); }
.hop .hop-rules::before { border-color: var(--lavender-500); background: var(--lavender-100); }
.hop .hop-res::before { border-color: var(--lavender-600); background: var(--lavender-600); }
.hop-who { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--ink-600); }
.hop-code { margin-top: 8px; padding: 14px 16px; background: var(--parchment); border: 1px solid var(--ink-100); border-radius: var(--r); overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--ink-800); }
.hop-code code { font-family: inherit; }
.app--mcp .finding .hop p { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--ink-800); max-width: 68ch; }
.hop-rules p { color: var(--ink-700); }
.hop-res p strong { font-weight: 600; color: var(--ink-900); }
.hop-res p code { font-family: var(--mono); font-size: 12px; padding: 1px 5px; border-radius: var(--r-sm); background: var(--lavender-50); color: var(--lavender-800); }
/* Switching requests plays the hop in order: request, rules, answer */
.app--mcp .finding.is-current .hop li { animation: hop-in .5s var(--ease-out) both; }
.app--mcp .finding.is-current .hop li:nth-child(2) { animation-delay: .18s; }
.app--mcp .finding.is-current .hop li:nth-child(3) { animation-delay: .36s; }
@keyframes hop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
    .app--mcp .app-main { padding: 16px; }
    .app--mcp .finding { padding: 16px; }
    .hop-code { font-size: 11.5px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .app--mcp .finding.is-current .hop li { animation: none; } }
/* Phones hide the console sidebar elsewhere; here the requests stay, stacked above the card */
@media (max-width: 860px) {
    .app--mcp { grid-template-columns: 1fr; }
    .app--mcp .app-side { display: block; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; }
    .app--mcp .app-org, .app--mcp .app-side-label { display: none; }
}

/* ---- Rule types: a short intro under the sticky heading ---- */
.why-lede { margin-top: 24px; max-width: 46ch; color: var(--ink-700); }

/* ---- Who it's for: the audience reads across each row as one sentence ---- */
.audience { border-top: 1px solid var(--line); }
.audience li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); }
.audience h3 { font-family: var(--serif); font-weight: 450; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-900); }
.audience p { color: var(--ink-600); }
.audience-note { margin-top: 56px; max-width: 72ch; color: var(--ink-600); }
.audience-note strong { font-weight: 600; color: var(--ink-900); }
@media (max-width: 900px) { .audience li { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; } }

/* ---- Compatibility: clients and systems of record, side by side ---- */
.compat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; }
.compat h3 { font-size: 0.8125rem; font-weight: 500; color: var(--lavender-600); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.compat li { padding: 18px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-weight: 450; font-size: clamp(1.5rem, 1.95vw, 1.75rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--ink-900); }
.compat .compat-more { font-style: italic; color: var(--lavender-700); }
@media (max-width: 760px) { .compat { grid-template-columns: 1fr; gap: 48px; } }

/* ============================================================
   Original first-pass route diagram, restored for comparison
   (shown with ?orig=flow). v2's flow diagram is the default.
   ============================================================ */
/* ---- How it works: agents on the left, Quill in the middle, the CRM on the right ---- */
.route { display: grid; grid-template-columns: minmax(0, 1fr) minmax(40px, 0.8fr) minmax(0, 1.15fr) minmax(40px, 0.8fr) minmax(0, 1fr); grid-template-rows: auto 248px; row-gap: 16px; }
.route-col--agents, .route-col--crm, .route-col--hub { display: contents; }
.route-label { grid-row: 1; font-size: 0.8125rem; font-weight: 500; color: var(--ink-600); }
.route-col--agents .route-label { grid-column: 1; }
.route-col--crm .route-label { grid-column: 5; grid-row: 2; align-self: start; margin-top: 30px; } /* sits just above its two boxes */
.route ul { grid-row: 2; display: grid; grid-auto-rows: 56px; row-gap: 8px; align-content: start; }
.route-col--agents ul { grid-column: 1; }
.route-col--crm ul { grid-column: 5; padding-top: 64px; }
.route li { display: flex; align-items: center; padding: 0 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); font-weight: 500; color: var(--ink-900); }
.route-wires { grid-row: 2; width: 100%; height: 248px; overflow: visible; }
.route-wires--in { grid-column: 2; }
.route-wires--out { grid-column: 4; }
.route-wires path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.route-wires--in path { stroke: var(--ink-300); stroke-width: 1.25; }
.route-wires--out path { stroke: var(--lavender-500); stroke-width: 1.75; }
.route-hub { grid-column: 3; grid-row: 2; align-self: center; display: flex; flex-direction: column; justify-content: center; min-height: 128px; padding: 24px 28px; background: var(--lavender-700); border-radius: var(--r-card); color: #fff; }
.route-hub b { font-family: var(--serif); font-weight: 450; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; }
.route-hub span { margin-top: 6px; font-size: 0.9375rem; color: var(--lavender-100); }
.route-note { margin-top: 72px; max-width: 62ch; font-size: 1.125rem; line-height: 1.55; color: var(--ink-700); }
.route-note em { color: var(--lavender-700); }
/* The wires draw left to right once the diagram arrives */
html.js .route .route-wires { clip-path: inset(0 100% 0 0); transition: clip-path 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
html.js .route .route-wires--in { transition-delay: 0.35s; }
html.js .route .route-wires--out { transition-delay: 1.1s; }
html.js .route.is-shown .route-wires { clip-path: inset(0 0 0 0); }
@media (max-width: 760px) {
    .route { display: flex; flex-direction: column; align-items: stretch; }
    .route-wires { display: none; }
    .route ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
    .route-col--crm ul { padding-top: 0; }
    .route-col--crm .route-label { margin-top: 0; }
    .route-hub { position: relative; align-self: stretch; margin: 44px 0; min-height: 0; }
    .route-hub::before, .route-hub::after { content: ""; position: absolute; left: 50%; width: 1px; height: 36px; }
    .route-hub::before { bottom: 100%; margin-bottom: 4px; background: var(--ink-300); }
    .route-hub::after { top: 100%; margin-top: 4px; width: 2px; margin-left: -0.5px; background: var(--lavender-500); }
}
@media (prefers-reduced-motion: reduce) { html.js .route .route-wires { clip-path: none !important; transition: none !important; } }

/* ============================================================
   How it works, wide (the chosen version): v2's flow diagram drawn
   across the full content column like v1, agents on the left edge,
   CRMs on the right edge, Quill in the middle. Positions are shares
   of a 1160 x 400 canvas, so it scales as one piece. One lavender
   scheme: quiet dashed wires in, solid wires out, a solid Quill box.
   ============================================================ */
@media (min-width: 681px) {
    .mcp-flow { --s: 1; height: auto; display: block; margin-top: 8px; }
    .mcp-canvas { width: 100%; height: auto; aspect-ratio: 1160 / 400; transform: none; margin: 0; }
    .mcp-canvas > .mcp-node, .mcp-canvas > .mcp-hub { transform: translateY(-50%); }
    .mcp-agent, .mcp-crm { height: 56px; padding: 0 20px; gap: 14px; }
    .mcp-node-name { font-size: 0.9375rem; }
    .mcp-agent-glyph, .mcp-crm-glyph { width: 18px; height: 18px; }
    .mcp-agent-glyph svg.brand { width: 17px; height: 17px; }
    .mcp-hub { height: 112px; }
    .mcp-canvas > .mcp-lane { text-align: left; }
}
.mcp-wires-in { stroke: var(--lavender-300); }
.mcp-wires-out { stroke: var(--lavender-600); }
.mcp-dots-in { fill: var(--lavender-500); }
.mcp-dots-out { fill: var(--lavender-700); }
.mcp-hub { background: var(--lavender-600); border-color: var(--lavender-600); box-shadow: 0 18px 40px rgba(91, 79, 184, 0.18); }
.mcp-hub-name { color: #fff; font-size: 1.375rem; }
.mcp-hub-sub { color: rgba(255, 255, 255, 0.82); }
.mcp-crm-glyph { color: var(--lavender-600); }
.mcp-vwire--in path { stroke: var(--lavender-300) !important; }
.mcp-vwire--out path { stroke: var(--lavender-600) !important; }
@media (max-width: 680px) { .mcp-canvas > .mcp-node { width: auto !important; } }

/* Compatibility: other CRMs are welcome; the note invites the conversation */
.compat-note { margin-top: 28px; color: var(--ink-600); }
.compat-note a { color: var(--lavender-700); border-bottom: 1px solid var(--lavender-200); }
.compat-note a:hover { border-bottom-color: var(--lavender-700); }
/* Hub: deep ink-violet (the wordmark's ink with a hint of lavender) instead
   of bright lavender, so it anchors the diagram quietly */
.mcp-hub { background: #2B2748; border-color: #2B2748; box-shadow: 0 14px 32px rgba(30, 35, 48, 0.14); }
.mcp-hub-name { color: #fff; }
.mcp-hub-sub { color: rgba(255, 255, 255, 0.68); }
/* 14) compatibility, folded into How it works */
.how-compat { margin-top: 20px; max-width: 72ch; color: var(--ink-600); }
.how-compat a { color: var(--lavender-700); border-bottom: 1px solid var(--lavender-200); }
.how-compat a:hover { border-bottom-color: var(--lavender-700); }