/* ══════════════════════════════════════════════════
 MORPHDESK - Workspace hero (Jira-style)
 One soft window. Three zones separated by hairlines.
 No nested cards anywhere. Typographic hierarchy only.
══════════════════════════════════════════════════ */

#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] {
 position: relative;
 padding: calc(var(--header-h, 68px) + 64px) 0 132px;
 background:
 radial-gradient(60% 48% at 18% 8%, rgba(91, 61, 232, 0.07), transparent 60%),
 radial-gradient(45% 40% at 82% 14%, rgba(91, 61, 232, 0.035), transparent 65%),
 linear-gradient(180deg, #fbfaf6 0%, #f3f2ed 60%, #ecebe6 100%);
 overflow: visible;
}

#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .container { position: relative; z-index: 1; }

/* ── Hero head: title + sub + CTAs only (no right-side metrics) ── */
#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .md-hero-head {
 max-width: 780px;
 margin-bottom: 48px;
}

#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .ix-eyebrow {
 font-size: 10.5px;
 letter-spacing: 0.28em;
 font-weight: 600;
 border-left-width: 2px;
 padding-left: 12px;
 margin-bottom: 22px;
}

#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .ix-title {
 font-size: clamp(40px, 5vw, 72px);
 font-weight: 700;
 letter-spacing: -0.046em;
 line-height: 0.98;
 margin-bottom: 24px;
}

#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .ix-sub {
 font-size: 16px;
 line-height: 1.62;
 color: var(--ix-ink-muted);
 max-width: 620px;
 margin-bottom: 32px;
}

#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .ix-cta-row { gap: 10px; }

#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .ix-btn {
 font-size: 13.5px;
 font-weight: 600;
 padding: 13px 22px;
 border-radius: 10px;
 letter-spacing: -0.005em;
}

#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .ix-btn-primary {
 background: var(--ix-ink);
 box-shadow:
 0 1px 0 rgba(255, 255, 255, 0.07) inset,
 0 10px 24px rgba(15, 17, 26, 0.22);
}

#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .ix-btn-primary:hover {
 background: var(--ix-violet);
 box-shadow:
 0 1px 0 rgba(255, 255, 255, 0.12) inset,
 0 16px 36px rgba(91, 61, 232, 0.34);
}

#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .ix-btn-ghost {
 background: transparent;
 border-color: rgba(18, 20, 28, 0.14);
}

#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .ix-btn-ghost:hover {
 background: rgba(255, 255, 255, 0.7);
 border-color: rgba(18, 20, 28, 0.32);
}

/* ══ WORKSPACE WINDOW ══════════════════════════════ */
.md-workspace {
 position: relative;
 background: #ffffff;
 border: 1px solid rgba(18, 20, 28, 0.08);
 border-radius: 14px;
 box-shadow:
 0 1px 2px rgba(18, 20, 28, 0.03),
 0 28px 80px -20px rgba(18, 20, 28, 0.18),
 0 8px 24px -8px rgba(91, 61, 232, 0.08);
 overflow: hidden;
}

/* App bar - Jira-style breadcrumb + tabs + status */
.md-appbar {
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 align-items: center;
 gap: 24px;
 padding: 12px 22px;
 background: linear-gradient(180deg, #fbfaf6 0%, #f7f6f1 100%);
 border-bottom: 1px solid rgba(18, 20, 28, 0.08);
}

.md-appbar-crumb {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-family: var(--sans);
 font-size: 12px;
 color: var(--ix-ink-muted);
 letter-spacing: -0.005em;
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.md-appbar-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 22px;
 height: 22px;
 border-radius: 6px;
 background: linear-gradient(135deg, var(--ix-violet), #8b7cf0);
 color: #fff;
 font-family: var(--sans);
 font-weight: 800;
 font-size: 11px;
 letter-spacing: -0.02em;
 flex-shrink: 0;
 box-shadow: 0 2px 6px rgba(91, 61, 232, 0.28);
}

.md-appbar-app {
 font-weight: 700;
 color: var(--ix-ink);
 letter-spacing: -0.01em;
}

.md-appbar-sep {
 color: rgba(18, 20, 28, 0.18);
 font-weight: 400;
 margin: 0 2px;
}

.md-appbar-section {
 color: var(--ix-ink-muted);
 font-weight: 500;
}

.md-appbar-id {
 font-family: var(--mono);
 font-size: 11px;
 color: var(--ix-ink);
 font-weight: 600;
 padding: 3px 8px;
 background: rgba(18, 20, 28, 0.05);
 border-radius: 6px;
 letter-spacing: 0.02em;
}

.md-appbar-tabs {
 display: inline-flex;
 align-items: center;
 gap: 2px;
 padding: 3px;
 background: rgba(18, 20, 28, 0.04);
 border-radius: 8px;
}

.md-appbar-tab {
 font-family: var(--sans);
 font-size: 12px;
 font-weight: 500;
 letter-spacing: -0.005em;
 padding: 5px 12px;
 border-radius: 6px;
 border: none;
 background: transparent;
 color: var(--ix-ink-muted);
 cursor: pointer;
 transition: background 0.15s ease, color 0.15s ease;
}

.md-appbar-tab:hover { color: var(--ix-ink); }

.md-appbar-tab.is-active {
 background: #fff;
 color: var(--ix-ink);
 font-weight: 600;
 box-shadow: 0 1px 2px rgba(18, 20, 28, 0.06), 0 0 0 1px rgba(18, 20, 28, 0.05);
}

.md-appbar-status {
 justify-self: end;
 display: inline-flex;
 align-items: center;
 gap: 12px;
 font-family: var(--sans);
 font-size: 11.5px;
 color: var(--ix-ink-muted);
 letter-spacing: -0.005em;
}

.md-appbar-live {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 font-size: 11px;
 font-weight: 600;
 color: var(--ix-success);
 letter-spacing: 0.02em;
}

.md-live-dot {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--ix-success);
 position: relative;
 flex-shrink: 0;
}

.md-live-dot::after {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: 50%;
 background: var(--ix-success);
 animation: md-live-ping 1.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes md-live-ping {
 0% { transform: scale(1); opacity: 0.55; }
 80% { transform: scale(2.4); opacity: 0; }
 100% { transform: scale(2.4); opacity: 0; }
}

/* ══ WORKSPACE BODY: 3 zones, vertical hairlines ══════ */
.md-workspace-body {
 display: grid;
 grid-template-columns: 244px minmax(0, 1fr) 296px;
 align-items: stretch;
}

.md-zone {
 position: relative;
 padding: 24px 22px;
 min-width: 0;
}

.md-zone-left {
 background: linear-gradient(180deg, #fcfbf7 0%, #f8f7f2 100%);
 border-right: 1px solid rgba(18, 20, 28, 0.08);
}

.md-zone-center {
 padding: 28px 28px 32px;
 background: #ffffff;
 position: relative;
 overflow: hidden;
}

/* ── Animated demo cursor ────────────────────────── */
.md-cursor {
 position: absolute;
 left: 0;
 top: 0;
 width: 22px;
 height: 22px;
 pointer-events: none;
 transform: translate3d(-100px, -100px, 0);
 transition: transform 0.85s cubic-bezier(0.5, 0, 0.18, 1);
 z-index: 8;
 will-change: transform;
}

.md-cursor.is-ready {
 transition: transform 0.85s cubic-bezier(0.5, 0, 0.18, 1);
}

.md-cursor-arrow {
 position: relative;
 z-index: 2;
 width: 22px;
 height: 22px;
 display: block;
 filter: drop-shadow(0 3px 6px rgba(15, 17, 26, 0.32))
 drop-shadow(0 1px 2px rgba(15, 17, 26, 0.4));
 transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-cursor.is-clicking .md-cursor-arrow {
 transform: scale(0.82);
}

.md-cursor-ripple {
 position: absolute;
 left: 1px;
 top: 1px;
 width: 18px;
 height: 18px;
 border-radius: 50%;
 background: rgba(91, 61, 232, 0.35);
 opacity: 0;
 transform: scale(0.4);
 pointer-events: none;
 z-index: 1;
}

.md-cursor.is-clicking .md-cursor-ripple {
 animation: md-cursor-ripple 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes md-cursor-ripple {
 0% { opacity: 0.7; transform: scale(0.35); background: rgba(91, 61, 232, 0.55); }
 60% { opacity: 0.35; }
 100% { opacity: 0; transform: scale(3.4); background: rgba(91, 61, 232, 0.0); }
}

.md-zone-right {
 background: linear-gradient(180deg, #fcfbf7 0%, #f8f7f2 100%);
 border-left: 1px solid rgba(18, 20, 28, 0.08);
}

/* Zone heads */
.md-zone-h {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 margin-bottom: 14px;
}

.md-zone-title {
 font-family: var(--sans);
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.16em;
 color: var(--ix-ink);
}

.md-zone-sub {
 font-family: var(--sans);
 font-size: 10.5px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.18em;
 color: var(--ix-ink-soft);
 margin-bottom: 12px;
}

.md-zone-divider {
 height: 1px;
 background: rgba(18, 20, 28, 0.08);
 margin: 22px -22px 20px;
}

.md-zone-note {
 margin: 14px 0 0;
 font-family: var(--sans);
 font-size: 11.5px;
 line-height: 1.5;
 color: var(--ix-ink-soft);
 letter-spacing: -0.005em;
}

/* "Click to load" pill */
.md-zone-pill {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 3px 8px 3px 6px;
 background: rgba(91, 61, 232, 0.10);
 color: var(--ix-violet);
 border-radius: 999px;
 font-family: var(--sans);
 font-weight: 700;
 font-size: 9px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
}

.md-hint-pulse {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--ix-violet);
 position: relative;
 flex-shrink: 0;
}

.md-hint-pulse::before {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: 50%;
 background: var(--ix-violet);
 animation: md-hint-pulse 1.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes md-hint-pulse {
 0% { transform: scale(1); opacity: 0.6; }
 80% { transform: scale(2.6); opacity: 0; }
 100% { transform: scale(2.6); opacity: 0; }
}

/* ── Ticket list (left zone) ─────────────────────── */
.md-tix-list {
 display: flex;
 flex-direction: column;
 gap: 2px;
 margin: 0 -8px;
}

.md-tix {
 position: relative;
 display: grid;
 grid-template-columns: 28px 1fr auto;
 align-items: center;
 gap: 10px;
 padding: 9px 32px 9px 12px;
 background: transparent;
 border: none;
 border-radius: 8px;
 cursor: pointer;
 text-align: left;
 font-family: var(--sans);
 color: var(--ix-ink);
 transition: background 0.15s ease;
}

.md-tix::before {
 content: "";
 position: absolute;
 left: 4px;
 top: 18%;
 bottom: 18%;
 width: 2px;
 background: var(--src-color);
 border-radius: 2px;
 transform: scaleY(0);
 transform-origin: center;
 transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.md-tix:hover {
 background: rgba(18, 20, 28, 0.04);
}

.md-tix:hover::before { transform: scaleY(1); }

.md-tix.is-active {
 background: #fff;
 box-shadow: 0 1px 2px rgba(18, 20, 28, 0.05), 0 0 0 1px rgba(18, 20, 28, 0.06);
}

.md-tix.is-active::before { transform: scaleY(1); }

.md-tix-tag {
 width: 26px;
 height: 26px;
 border-radius: 6px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 font-family: var(--sans);
 font-weight: 700;
 font-size: 11px;
 letter-spacing: 0.02em;
 flex-shrink: 0;
}

.md-tix-meta {
 display: flex;
 flex-direction: column;
 gap: 1px;
 min-width: 0;
}

.md-tix-id {
 font-family: var(--sans);
 font-size: 12.5px;
 font-weight: 600;
 color: var(--ix-ink);
 letter-spacing: -0.005em;
}

.md-tix-sub {
 font-family: var(--sans);
 font-size: 10.5px;
 color: var(--ix-ink-soft);
 letter-spacing: -0.005em;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.md-tix-pri {
 font-family: var(--mono);
 font-size: 9.5px;
 font-weight: 600;
 color: var(--ix-ink-soft);
 letter-spacing: 0.05em;
 flex-shrink: 0;
}

.md-tix.is-active .md-tix-pri { color: var(--src-color); }

.md-tix-chev {
 position: absolute;
 right: 12px;
 top: 50%;
 transform: translate(-4px, -50%);
 font-family: var(--mono);
 font-size: 12px;
 font-weight: 600;
 color: var(--src-color);
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.15s ease, transform 0.15s ease;
}

.md-tix:hover .md-tix-chev,
.md-tix.is-active .md-tix-chev {
 opacity: 1;
 transform: translate(0, -50%);
}

.md-tix.is-active .md-tix-chev {
 animation: md-chev-nudge 1.6s ease-in-out infinite;
}

@keyframes md-chev-nudge {
 0%, 100% { transform: translate(0, -50%); }
 50% { transform: translate(3px, -50%); }
}

/* ── Key/value list (used in left + right zones) ─── */
.md-kv {
 margin: 0;
 padding: 0;
 display: flex;
 flex-direction: column;
}

.md-kv-row {
 display: flex;
 justify-content: space-between;
 align-items: baseline;
 gap: 12px;
 padding: 9px 0;
 font-family: var(--sans);
 font-size: 12px;
 color: var(--ix-ink-muted);
 border-bottom: 1px dashed rgba(18, 20, 28, 0.08);
 letter-spacing: -0.005em;
}

.md-kv-row:last-child { border-bottom: none; }

.md-kv-row dt {
 margin: 0;
 font-weight: 500;
 color: var(--ix-ink-muted);
}

.md-kv-row dd {
 margin: 0;
 font-weight: 600;
 color: var(--ix-ink);
 font-feature-settings: "tnum" 1;
}

.md-kv-row dd.pos { color: var(--ix-success); }

/* ── Audit-trail stat rows (right zone) ──────────── */
.md-stat-row {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 gap: 12px;
 padding: 10px 0;
 border-bottom: 1px dashed rgba(18, 20, 28, 0.08);
}

.md-stat-row:last-of-type { border-bottom: none; }

.md-stat-label {
 font-family: var(--sans);
 font-size: 12px;
 font-weight: 500;
 color: var(--ix-ink-muted);
 letter-spacing: -0.005em;
}

.md-stat-val {
 font-family: var(--sans);
 font-size: 22px;
 font-weight: 700;
 letter-spacing: -0.03em;
 color: var(--ix-ink);
 line-height: 1;
 font-feature-settings: "tnum" 1;
 display: inline-flex;
 align-items: baseline;
 gap: 6px;
}

.md-stat-val.pos { color: var(--ix-success); }

.md-stat-sub {
 font-family: var(--sans);
 font-style: normal;
 font-size: 10.5px;
 font-weight: 500;
 color: var(--ix-ink-soft);
 letter-spacing: -0.005em;
}

/* ══ CENTER ZONE: ticket detail + activity feed ══════ */
.md-detail-head {
 display: grid;
 grid-template-columns: 1fr auto;
 align-items: start;
 gap: 16px;
 padding-bottom: 20px;
 margin-bottom: 24px;
 border-bottom: 1px solid rgba(18, 20, 28, 0.08);
}

.md-detail-meta {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 10px;
 margin-bottom: 10px;
 grid-column: 1 / 2;
}

.md-detail-id {
 font-family: var(--mono);
 font-size: 11.5px;
 font-weight: 600;
 color: var(--ix-ink);
 padding: 4px 9px;
 background: rgba(18, 20, 28, 0.05);
 border-radius: 6px;
 letter-spacing: 0.02em;
}

.md-detail-tags {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-family: var(--sans);
 font-size: 11px;
 font-weight: 500;
 color: var(--ix-ink-soft);
 letter-spacing: 0.04em;
 text-transform: uppercase;
}

.md-detail-dot { color: rgba(18, 20, 28, 0.2); }

.md-detail-title {
 grid-column: 1 / 2;
 margin: 0;
 font-family: var(--sans);
 font-size: clamp(20px, 1.8vw, 26px);
 font-weight: 700;
 letter-spacing: -0.03em;
 line-height: 1.18;
 color: var(--ix-ink);
}

.md-detail-priority {
 grid-column: 2 / 3;
 grid-row: 1 / 3;
 align-self: start;
 font-family: var(--sans);
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 padding: 5px 10px;
 border-radius: 999px;
 background: rgba(220, 38, 38, 0.1);
 color: var(--ix-danger);
 white-space: nowrap;
 flex-shrink: 0;
}

.md-detail-priority.is-h { background: rgba(217, 119, 6, 0.12); color: var(--ix-warn); }
.md-detail-priority.is-m { background: rgba(91, 61, 232, 0.10); color: var(--ix-violet); }

.md-activity-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 margin-bottom: 16px;
}

.md-activity-h {
 font-family: var(--sans);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--ix-ink);
}

.md-activity-meta {
 font-family: var(--sans);
 font-size: 11px;
 color: var(--ix-ink-soft);
 letter-spacing: -0.005em;
}

/* ══ Activity feed: flat timeline (no nested cards) ══ */
#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .md-feed { gap: 6px; }

#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .md-feed::before {
 left: 15px;
 background: rgba(18, 20, 28, 0.10);
}

#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .md-step {
 grid-template-columns: 30px 1fr;
 gap: 14px;
}

#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .md-step-marker {
 width: 30px;
 height: 30px;
 border-width: 1.5px;
 background: #fff;
}

#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .md-step-card {
 background: transparent !important;
 border: none !important;
 box-shadow: none !important;
 border-radius: 0 !important;
 padding: 4px 0 16px !important;
 border-bottom: 1px dashed rgba(18, 20, 28, 0.08) !important;
}

#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .md-step:last-child .md-step-card {
 border-bottom: none !important;
}

#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .md-step.is-current .md-step-card {
 background: linear-gradient(180deg, rgba(91, 61, 232, 0.04), transparent 70%) !important;
 border-radius: 8px !important;
 padding: 12px 14px 16px !important;
 margin: 0 -14px;
 border-bottom: none !important;
 box-shadow: 0 0 0 1px rgba(91, 61, 232, 0.10) !important;
}

#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .md-step.is-pending .md-step-card {
 opacity: 0.5;
}

#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .md-step-title {
 font-size: 13px;
 font-weight: 600;
 letter-spacing: -0.01em;
}

#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .md-step-time {
 font-family: var(--mono);
 font-size: 10px;
 color: var(--ix-ink-soft);
 letter-spacing: 0.04em;
}

/* Hide the legacy ticket head inside the new center zone - we render it ourselves */
#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .ix-canvas { display: contents; }

/* Pulse the active gate button */
#page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .md-gate-btn.primary:not(:disabled):not(.is-approved) {
 background: var(--ix-violet);
 color: #fff;
 box-shadow:
 0 0 0 0 rgba(91, 61, 232, 0.35),
 0 8px 18px rgba(91, 61, 232, 0.28);
 animation: md-gate-pulse 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes md-gate-pulse {
 0%, 100% {
 box-shadow:
 0 0 0 0 rgba(91, 61, 232, 0.4),
 0 8px 18px rgba(91, 61, 232, 0.28);
 }
 50% {
 box-shadow:
 0 0 0 7px rgba(91, 61, 232, 0),
 0 8px 22px rgba(91, 61, 232, 0.34);
 }
}

/* Hide unused legacy hero block */
.md-hero,
.ticket-demo,
.td-header,
.td-title,
.td-status,
.td-dot,
.td-body,
.td-row,
.td-key,
.td-val,
.td-log,
.td-log-row,
.tdl-dot { /* legacy */ }

/* ══ Responsive ══ */
@media (max-width: 1100px) {
 .md-workspace-body {
 grid-template-columns: 220px minmax(0, 1fr) 268px;
 }
 .md-zone-center { padding: 24px 22px 28px; }
}

@media (max-width: 900px) {
 .md-appbar {
 grid-template-columns: 1fr auto;
 gap: 14px;
 padding: 12px 16px;
 }
 .md-appbar-tabs { display: none; }
 .md-workspace-body { grid-template-columns: 1fr; }
 .md-zone-left,
 .md-zone-right {
 border-right: none;
 border-left: none;
 border-top: 1px solid rgba(18, 20, 28, 0.08);
 }
 .md-zone-left { border-top: none; }
}

@media (prefers-reduced-motion: reduce) {
 .md-hint-pulse::before,
 .md-live-dot::after,
 .md-tix.is-active .md-tix-chev,
 .md-cursor.is-clicking .md-cursor-ripple,
 #page-content.mt-wrap .ix-hero[data-ix="morphdesk"] .md-gate-btn.primary:not(:disabled):not(.is-approved) {
 animation: none !important;
 }
 .md-cursor { transition: none !important; }
}

/* Pipeline diagram */
.pipeline-section { padding: 120px 0; background: var(--white); }

.pipeline-flow {
 display: flex;
 align-items: stretch;
 gap: 0;
 margin-top: 56px;
 border: 1px solid var(--border);
 border-radius: 3px;
 overflow: hidden;
}

.pipeline-stage {
 flex: 1;
 padding: 28px 24px;
 border-right: 1px solid var(--border);
 position: relative;
}

.pipeline-stage:last-child { border-right: none; }

.ps-num {
 font-family: var(--mono);
 font-size: 8px;
 font-weight: 400;
 letter-spacing: 0.22em;
 color: var(--violet);
 margin-bottom: 12px;
 text-transform: uppercase;
}

.ps-title {
 font-family: var(--sans);
 font-size: 14px;
 font-weight: 400;
 color: var(--ink);
 margin-bottom: 10px;
 letter-spacing: -0.01em;
}

.ps-body {
 font-family: var(--mono);
 font-size: 10px;
 font-weight: 300;
 color: var(--ink-muted);
 line-height: 1.65;
 letter-spacing: 0.02em;
}

.ps-owner {
 margin-top: 16px;
 font-family: var(--mono);
 font-size: 8px;
 font-weight: 400;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 padding: 4px 8px;
 border-radius: 1px;
 display: inline-block;
}

.ps-owner.ml,
.ps-owner.ai { background: var(--violet-dim); color: var(--violet); }
.ps-owner.human { background: rgba(22,163,74,0.08); color: var(--green); }
.ps-owner.auto { background: rgba(0,0,0,0.04); color: var(--ink-muted); }

/* Integrations dark */
.int-section { background: var(--dark); padding: 100px 0; }

.int-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 1px;
 background: rgba(255,255,255,0.04);
 border: 1px solid rgba(255,255,255,0.04);
 border-radius: 3px;
 overflow: hidden;
 margin-top: 48px;
}

.int-card {
 background: var(--dark-mid);
 padding: 20px;
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.int-name {
 font-family: var(--mono);
 font-size: 11px;
 font-weight: 400;
 color: rgba(255,255,255,0.65);
 letter-spacing: 0.04em;
}

.int-dir {
 font-family: var(--mono);
 font-size: 9px;
 font-weight: 300;
 color: rgba(255,255,255,0.22);
 letter-spacing: 0.1em;
 text-transform: uppercase;
}

.int-dir.bi { color: rgba(91,61,232,0.6); }

/* Who it's for - gaps use section bg; avoid grid container fill (was visible as stripes) */
.for-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1px;
 background: transparent;
 border: none;
 border-radius: 0;
 overflow: visible;
 margin-top: 40px;
}

.for-card {
 background: var(--white);
 padding: 28px 24px;
}

.for-role {
 font-family: var(--mono);
 font-size: 9px;
 font-weight: 400;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--violet);
 margin-bottom: 10px;
}

.for-title {
 font-family: var(--sans);
 font-size: 16px;
 font-weight: 400;
 color: var(--ink);
 margin-bottom: 10px;
}

.for-body {
 font-family: var(--mono);
 font-size: 11px;
 font-weight: 300;
 color: var(--ink-muted);
 line-height: 1.7;
}

@media (max-width: 900px) {
 .pipeline-flow { flex-direction: column; }
 .pipeline-stage { border-right: none; border-bottom: 1px solid var(--border); }
 .pipeline-stage:last-child { border-bottom: none; }
 .int-grid { grid-template-columns: repeat(2, 1fr); }
 .for-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════
 THE PROBLEM section grid - pairs the live ticket
 inbox feed with the outcome stat stack.
══════════════════════════════════════════════════ */

.md-prob-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
 gap: 64px;
 margin-top: 60px;
 align-items: start;
}

.md-prob-text > p { margin-bottom: 20px; }
.md-prob-text > p:last-of-type { margin-bottom: 0; }
.md-prob-text .lf { margin-top: 36px; }

.md-prob-stack {
 display: flex;
 flex-direction: column;
 gap: 20px;
}

.md-prob-stats { position: sticky; top: 100px; }

.md-prob-stats .stat-card {
 transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}

.md-prob-stats .stat-card:hover {
 transform: translateX(-4px);
 background: rgba(91, 61, 232, 0.04);
}

/* Human checkpoints card - under stat stack */
.md-human-gates {
 border: 1px solid var(--m-line, var(--border));
 border-radius: var(--m-radius-sm, 14px);
 overflow: hidden;
 background: linear-gradient(165deg, #fafbff 0%, var(--m-surface, #fff) 48%, #fafafa 100%);
 box-shadow: var(--m-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
 transition: box-shadow 0.35s ease, border-color 0.25s ease;
}

.md-prob-stats .md-human-gates:hover {
 border-color: rgba(91, 61, 232, 0.22);
 box-shadow: var(--m-shadow, 0 12px 32px rgba(18, 20, 28, 0.07));
}

.md-hg-top {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 14px 20px 12px;
 border-bottom: 1px solid var(--m-line, var(--border));
 background: linear-gradient(90deg, rgba(91, 61, 232, 0.07) 0%, rgba(91, 61, 232, 0) 55%);
}

.md-hg-connector {
 width: 3px;
 height: 18px;
 border-radius: 2px;
 background: linear-gradient(180deg, var(--violet, #5b3de8), rgba(91, 61, 232, 0.35));
 flex-shrink: 0;
}

.md-hg-eyebrow {
 font-family: var(--mono);
 font-size: 9px;
 font-weight: 600;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--violet, #5b3de8);
}

.md-hg-body {
 padding: 20px 20px 18px;
}

.md-hg-lead {
 margin: 0 0 12px;
 font-family: var(--sans);
 font-size: 17px;
 font-weight: 600;
 letter-spacing: -0.02em;
 line-height: 1.3;
 color: var(--m-ink, var(--ink));
}

.md-hg-copy {
 margin: 0 0 18px;
 font-family: var(--sans);
 font-size: 14px;
 line-height: 1.62;
 color: var(--m-muted, var(--ink-muted));
 letter-spacing: -0.01em;
}

.md-hg-gates {
 display: flex;
 flex-direction: column;
 gap: 0;
 border: 1px solid var(--m-line, var(--border));
 border-radius: var(--m-radius-sm, 10px);
 overflow: hidden;
 background: var(--m-surface, #fff);
}

.md-hg-gate {
 display: grid;
 grid-template-columns: 36px 1fr auto;
 gap: 12px 14px;
 align-items: center;
 padding: 14px 16px;
 border-bottom: 1px solid var(--m-line, var(--border));
}

.md-hg-gate:last-child {
 border-bottom: none;
}

.md-hg-gate-num {
 width: 32px;
 height: 32px;
 border-radius: 10px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--mono);
 font-size: 12px;
 font-weight: 700;
 color: var(--violet, #5b3de8);
 background: rgba(91, 61, 232, 0.1);
}

.md-hg-gate-text {
 display: flex;
 flex-direction: column;
 gap: 2px;
 min-width: 0;
}

.md-hg-gate-title {
 font-family: var(--sans);
 font-size: 14px;
 font-weight: 600;
 color: var(--m-ink, var(--ink));
 letter-spacing: -0.01em;
}

.md-hg-gate-sub {
 font-family: var(--mono);
 font-size: 10px;
 font-weight: 400;
 color: var(--m-soft, var(--ink-light));
 letter-spacing: 0.04em;
 line-height: 1.45;
}

.md-hg-gate-badge {
 font-family: var(--mono);
 font-size: 9px;
 font-weight: 700;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: #b45309;
 background: rgba(217, 119, 6, 0.12);
 padding: 5px 10px;
 border-radius: 999px;
 white-space: nowrap;
}

.md-hg-rail {
 display: flex;
 height: 6px;
 border-top: 1px solid var(--m-line, var(--border));
}

.md-hg-rail-seg {
 flex: 1;
 min-width: 0;
}

.md-hg-rail--auto {
 background: linear-gradient(90deg, rgba(91, 61, 232, 0.2), rgba(91, 61, 232, 0.45));
}

.md-hg-rail--human {
 background: linear-gradient(90deg, rgba(217, 119, 6, 0.35), rgba(217, 119, 6, 0.55));
}

@media (max-width: 1100px) {
 .md-prob-grid { grid-template-columns: 1fr; gap: 48px; }
 .md-prob-stats { position: static; }
 .md-prob-text .lf { max-width: 640px; }
}