/* Exact semantic colors from TEM frontend/src/main.css. Scope prevents changes outside Product. */
.product-section, .platform-section {
  --product-background: oklch(0.985 0.008 70);
  --product-foreground: oklch(0.15 0.022 35);
  --product-card: oklch(0.995 0.006 70);
  --product-primary: oklch(0.5 0.16 35);
  --product-primary-subtle: oklch(0.96 0.04 35);
  --product-primary-muted: oklch(0.85 0.1 35);
  --product-muted: oklch(0.95 0.014 70);
  --product-muted-foreground: oklch(0.42 0.02 40);
  --product-surface-subtle: oklch(0.97 0.014 70);
  --product-border: oklch(0.86 0.014 60);
  --product-border-subtle: oklch(0.92 0.012 60);
  --product-border-strong: oklch(0.75 0.018 50);
  --product-success: oklch(0.48 0.16 145);
  --product-success-muted: oklch(0.92 0.07 145);
  --product-success-text: oklch(0.4 0.16 145);
  --product-sidebar: oklch(0.95 0.014 70);
  --product-sidebar-foreground: oklch(0.35 0.02 40);
  --product-sidebar-accent: oklch(0.91 0.014 70);
  --product-sidebar-border: oklch(0.9 0.012 60);
  --product-warning-text: oklch(0.45 0.17 70);
  --product-warning: oklch(0.62 0.18 70);
  --product-warning-muted: oklch(0.92 0.08 70);
}
/* Shared illustration semantics: muted routes, primary motion, separate status colors. */
.product-section, .platform-section {
  --feature-connector:color-mix(in oklab,var(--product-primary) 55%,var(--product-border-strong));
  --feature-flow:var(--product-primary);
  --feature-connector-width:1.25px;
}
/* Product: one headline and one supporting text style; interface detail carries the story. */
.product-section { padding-block:104px; color:var(--product-foreground); background:var(--product-background); }
.product-section .section-head { max-width:1100px; }
#features-title { font-size:clamp(26px, 2.6vw, 36px); line-height:1.25; }
.features-heading-support { color:color-mix(in oklch,var(--product-muted-foreground) 75%,var(--product-background)); font:inherit; font-weight:400; }
.legacy-section-anchor { position:absolute; top:0; }
.feature-grid { --feature-title-size:14px; --feature-body-size:12px; --feature-support-size:11px; --feature-meta-size:10px; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,7fr); gap:20px; }
.feature-card { color:var(--product-foreground); min-width:0; overflow:hidden; border:1px solid var(--product-border); border-radius:10px; background:var(--product-surface-subtle); }
/* A quiet hover treatment: no layout shift and no motion on touch devices. */
.feature-card { position:relative; isolation:isolate; transition:transform 650ms cubic-bezier(.22,1,.36,1),border-color 650ms cubic-bezier(.22,1,.36,1); }
.feature-card::after { content:''; position:absolute; inset:0; z-index:3; padding:1px; border-radius:inherit; pointer-events:none; opacity:0; background:linear-gradient(125deg,var(--product-primary-muted) 0%,var(--product-primary) 35%,var(--product-warning-muted) 68%,var(--product-border-strong) 100%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; transition:opacity 650ms cubic-bezier(.22,1,.36,1); }
@media (hover:hover) and (pointer:fine) {
 .feature-card:hover { transform:scale(1.01); border-color:transparent; }
 .feature-card:hover::after { opacity:1; }
}
@media (prefers-reduced-motion:reduce) {
 .feature-card { transition:none; }
 .feature-card:hover { transform:none; }
 .feature-card::after { transition:none; }
}
.feature-copy { padding:30px 30px 0; }
.feature-copy h3 { margin:0; font:500 25px/1.25 var(--font-sans); letter-spacing:-.035em; max-width:440px; }

.feature-visual { position:relative; height:370px; margin-top:20px; font:12px/1.5 var(--font-sans); }
/* Operator knowledge becomes a versioned exception policy. */
.feature-knowledge::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url('/resources/artwork/knowledge-gradient-v2.webp') center bottom / cover no-repeat; mask-image:linear-gradient(to bottom,transparent 0%,transparent 20%,#000 65%); }
.feature-knowledge .knowledge-visual { display:flex; flex-direction:column; justify-content:center; padding:12px 22px 30px; height:auto; min-height:370px; }
.knowledge-guidance { padding:18px; border:1px solid var(--product-border-subtle); border-radius:12px 12px 12px 3px; background:var(--product-card); box-shadow:0 8px 24px color-mix(in oklch,var(--product-foreground) 4%,transparent); }
.guidance-author { display:flex; align-items:center; gap:9px; margin-bottom:12px; font-size:var(--feature-support-size); font-weight:500; }
.guidance-author > span > span { color:var(--product-muted-foreground); font-weight:400; }
.guidance-avatar,.reviewer-avatar { display:grid; place-items:center; flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--product-muted); color:var(--product-muted-foreground); font-size:var(--feature-meta-size); font-weight:500; }
.knowledge-guidance p { font-size:var(--feature-body-size); line-height:1.55; letter-spacing:-.012em; }
.knowledge-response { padding:14px 16px; border:1px solid var(--product-border-subtle); border-radius:10px 10px 3px 10px; background:var(--product-card); box-shadow:0 6px 20px color-mix(in oklch,var(--product-foreground) 6%,transparent); }
.knowledge-response .guidance-author { margin-bottom:7px; }
.callback-avatar { display:grid; place-items:center; flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--product-muted); }
.callback-avatar img { display:block; width:20px; height:20px; }
.knowledge-response p { font-size:var(--feature-body-size); line-height:1.55; color:var(--product-foreground); }
.knowledge-thread { height:20px; flex-shrink:0; padding-left:30px; }
.knowledge-thread span { display:block; height:100%; width:var(--feature-connector-width); background:var(--feature-connector); transform-origin:top; }
.knowledge-process { padding:16px; border:1px solid var(--product-border); border-radius:8px; background:var(--product-card); box-shadow:0 8px 24px color-mix(in oklch,var(--product-foreground) 4%,transparent); }
.knowledge-process-title { display:flex; justify-content:space-between; gap:8px; margin-bottom:14px; font-size:var(--feature-support-size); color:var(--product-muted-foreground); }
.knowledge-condition,.knowledge-approval { display:flex; align-items:center; gap:10px; font-size:var(--feature-body-size); }
.knowledge-condition { padding:0 14px; }
.knowledge-condition svg { width:18px; height:18px; color:var(--product-muted-foreground); }
.knowledge-step-link { height:20px; width:var(--feature-connector-width); margin-left:calc(23px - var(--feature-connector-width) / 2); background:var(--product-border-strong); }
.knowledge-approval { padding:10px; border:1px solid var(--product-border); border-radius:5px; background:var(--product-card); }
.reviewer-avatar { width:24px; height:24px; background:var(--product-card); color:var(--product-muted-foreground); }
.knowledge-approval > svg { width:15px; height:15px; margin-left:auto; color:var(--product-success); }
.feature-evolution { display:block; background:var(--product-surface-subtle); border-color:var(--product-border); }
.feature-evolution .feature-copy { padding:30px 30px 0; }
.feature-evolution h3 { color:var(--product-foreground); max-width:440px; }
@media (prefers-reduced-motion:no-preference) {
 .is-animating .knowledge-guidance { animation:product-arrive 600ms both; }
 .is-animating .knowledge-thread-input span { animation:knowledge-connect 300ms 600ms both; }
 .is-animating .knowledge-response { animation:product-arrive 650ms 900ms both; }
 .is-animating .knowledge-thread:not(.knowledge-thread-input) span { animation:knowledge-connect 300ms 1550ms both; }
 .is-animating .knowledge-process { animation:product-arrive 700ms 1850ms both; }
 @keyframes knowledge-connect { from { transform:scaleY(0); background:var(--feature-flow); } 70% { background:var(--feature-flow); } to { transform:scaleY(1); background:var(--feature-connector); } }
 @keyframes product-arrive { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
}
@media (max-width:1000px) {
 .product-section { padding-block:80px; }
 .feature-copy { padding:24px 24px 0; }
 .feature-copy h3 { font-size:22px; }

 .feature-evolution .feature-copy { padding:24px 24px 0; }
}
@media (max-width:760px) {
 .feature-grid { grid-template-columns:1fr; }
 .feature-evolution { grid-column:auto; display:block; }
 .feature-evolution .feature-copy { padding:24px 24px 0; }
 .feature-evolution h3 { max-width:440px; }
 .feature-visual { height:360px; }
}
@media (max-width:480px) {
 .product-section { padding-block:64px; }
 .feature-copy { padding:22px 22px 0; }
 .feature-visual { height:345px; }
}

.feature-evolution::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url('/resources/artwork/knowledge-gradient-v2.webp') center bottom / cover no-repeat; opacity:.32; mask-image:linear-gradient(transparent 15%,#000 100%); }
/* Individual process objects form the illustration; there is no enclosing UI panel. */
.feature-evolution .evolution-visual { height:auto; min-height:440px; display:flex; align-items:center; padding:24px 24px 36px; }
.evolution-workflow { position:relative; width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:96px 28px; padding:0 0 10px; align-items:stretch; }
.workflow-step { position:relative; display:flex; flex-direction:column; z-index:1; min-width:0; padding:17px 14px 0; border:1px solid var(--product-border-subtle); border-radius:8px; background:var(--product-card); box-shadow:0 2px 3px color-mix(in oklab,var(--product-foreground) 3%,transparent),0 12px 24px -9px color-mix(in oklab,var(--product-foreground) 14%,transparent),inset 0 1px 0 var(--product-card); }
.workflow-step-title { display:flex; align-items:center; gap:9px; font-size:var(--feature-body-size); font-weight:500; white-space:nowrap; }
.workflow-icon,.workflow-person { width:26px; height:26px; flex-shrink:0; display:grid; place-items:center; color:var(--product-muted-foreground); background:var(--product-muted); border-radius:5px; }
.workflow-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
.workflow-icon-success { color:var(--product-success); background:color-mix(in oklab,var(--product-success-muted) 45%,var(--product-card)); }
.workflow-person { border-radius:50%; background:var(--product-muted); font-size:11px; font-weight:400; }
.workflow-facts { display:grid; gap:7px; margin:14px 0 16px; font-size:var(--feature-meta-size); }
.workflow-facts > div { display:flex; justify-content:space-between; gap:6px; }
.workflow-facts span { color:var(--product-muted-foreground); }
.workflow-facts strong { font-weight:400; text-align:right; }
.workflow-facts .workflow-warning { color:var(--product-warning-text); }
.workflow-check-meter { height:3px; margin:-6px 0 12px; background:var(--product-success-muted); border-radius:2px; overflow:hidden; }
.workflow-check-meter i { display:block; height:100%; width:88.889%; background:var(--product-success); }
.workflow-step-source { min-height:34px; margin:auto -14px 0; padding:10px 14px; display:flex; align-items:center; gap:5px; font-size:var(--feature-meta-size); color:var(--product-muted-foreground); border-top:1px solid var(--product-border-subtle); }
.workflow-terms { grid-column:1; grid-row:2; }
.workflow-notify { grid-column:3; grid-row:2; }
.workflow-insertion { grid-column:2; grid-row:2; position:relative; display:flex; }
.workflow-insertion > .workflow-step { flex:1; }
.workflow-condition { position:absolute; bottom:calc(100% + 6px); right:12px; white-space:nowrap; text-align:right; font-size:var(--feature-support-size); color:var(--product-warning-text); }
.workflow-approval { border-color:color-mix(in oklab,var(--product-warning-muted) 55%,var(--product-border)); }
.workflow-approval .workflow-step-source { color:var(--product-success); }
.workflow-change-mark { position:relative; flex:0 0 10px; width:10px; height:10px; }
.workflow-change-mark::before,.workflow-change-mark::after { content:''; position:absolute; background:currentColor; border-radius:1px; }
.workflow-change-mark::before { width:8px; height:1px; left:1px; top:4.5px; }
.workflow-change-mark::after { width:1px; height:8px; left:4.5px; top:1px; }
.workflow-connections { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.workflow-connections > path { stroke:var(--feature-connector); stroke-width:var(--feature-connector-width); stroke-linecap:round; stroke-linejoin:round; }

.workflow-traveler { fill:var(--feature-flow); opacity:0; }
@media(prefers-reduced-motion:no-preference) {
 .is-animating .workflow-insertion { animation:workflow-insert 800ms 700ms both; }
 .is-animating .workflow-new-route { animation:workflow-connect 800ms 1200ms both; }
 .is-animating .workflow-traveler { animation:workflow-travel 2500ms 2400ms both; }
 @keyframes workflow-insert { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
 @keyframes workflow-connect { from { stroke-dasharray:100; stroke-dashoffset:100; opacity:0; } to { stroke-dasharray:100; stroke-dashoffset:0; opacity:1; } }
 @keyframes workflow-travel { 0%,100% { opacity:0; } 5%,95% { opacity:1; } }
}
@media(max-width:699px) {
 .feature-evolution .evolution-visual { padding:24px 18px 30px; }
 .evolution-workflow { grid-template-columns:repeat(2,minmax(0,1fr)); gap:62px 22px; }
 .workflow-inventory { grid-column:1; grid-row:1; }
 .workflow-terms { grid-column:2; grid-row:1; }
 .workflow-delivery { grid-column:1; grid-row:2; }
 .workflow-insertion { grid-column:2; grid-row:2; }
 .workflow-release { grid-column:1; grid-row:3; }
 .workflow-notify { grid-column:2; grid-row:3; }
 .workflow-condition { right:12px; bottom:calc(100% + 6px); }
 .workflow-step { padding:12px 10px 0; }
 .workflow-step-title { white-space:normal; gap:6px; min-height:36px; }
 .workflow-step-source { margin-inline:-10px; padding:9px 10px; min-height:44px; }
 .workflow-facts > div { flex-wrap:wrap; }
 .workflow-facts strong { text-align:left; }
 .workflow-icon,.workflow-person { width:24px; height:24px; }
}

/* Connected source → received record → review task. */
.feature-integrations { grid-column:1 / -1; background:var(--product-surface-subtle); overflow:clip; }
.feature-integrations .feature-copy h3 { max-width:none; }
/* Original raster material, art-directed independently for desktop and mobile. */
.systems-artwork { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; border-radius:inherit; mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 100%); }
.systems-artwork img { display:block; width:100%; height:100%; object-fit:cover; object-position:center bottom; }
@media(max-width:760px) {
 .systems-artwork img { object-position:right bottom; }
}
.systems-composition { display:grid; grid-template-columns:238px 88px minmax(0,1fr); align-items:start; padding:38px 42px 44px; color:var(--product-foreground); font:12px/1.5 var(--font-sans); background:transparent; }
.systems-sources { padding-top:71px; }
.systems-source { height:60px; display:flex; align-items:center; gap:20px; padding:12px 15px; background:var(--product-card); border:1px solid var(--product-border-subtle); border-radius:5px; margin-bottom:9px; }
/* Shared logo slot aligns labels; optical widths balance different silhouettes. */
.systems-mark { flex:0 0 76px; width:76px; height:40px; display:flex; align-items:center; justify-content:center; }
.systems-mark img { display:block; width:var(--mark-width); max-width:100%; height:auto; max-height:40px; object-fit:contain; }
.systems-mark-sap { --mark-width:60px; }
.systems-mark-workday { --mark-width:70px; }
.systems-mark-salesforce { --mark-width:57px; }
.systems-mark-epic { --mark-width:64px; }
.systems-mark-aws { --mark-width:56px; }
.systems-mark-dell { --mark-width:66px; }
.systems-source span { font-size:var(--feature-support-size); color:var(--product-muted-foreground); }
.systems-source-selected { position:relative; border-color:var(--product-primary-muted); background:var(--product-card); }
.systems-source-selected i { position:absolute; right:-3px; top:calc(50% - 3px); width:6px; height:6px; border:1px solid var(--product-primary); border-radius:50%; background:var(--product-card); }
.systems-bridge { position:relative; height:410px; }
.systems-bridge svg { position:absolute; top:0; width:100%; height:410px; stroke:var(--feature-connector); stroke-width:var(--feature-connector-width); stroke-linecap:round; stroke-linejoin:round; }
.process-preview-window { --document-inset:22px; overflow:hidden; border:1px solid var(--product-border); border-radius:8px; background:var(--product-card); box-shadow:0 16px 32px -16px color-mix(in oklch,var(--product-foreground) 18%,transparent),0 3px 8px color-mix(in oklch,var(--product-foreground) 3%,transparent); }
.process-preview-bar { height:49px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--product-border-subtle); color:var(--product-muted-foreground); font-size:var(--feature-support-size); }
.process-preview-slash { margin-inline:8px; color:var(--product-border-strong); }
.process-preview-title { font-size:var(--feature-title-size); font-weight:500; letter-spacing:-.025em; }
.process-preview-record { min-width:0; }
.process-preview-record-head { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:var(--feature-body-size); }
.process-preview-origin { font-size:var(--feature-meta-size); color:var(--product-muted-foreground); }
.process-preview-rule svg { width:18px; height:18px; flex-shrink:0; stroke:var(--product-success); stroke-width:1.4; }
.process-preview-result { margin-top:4px; padding-top:12px; border-top:1px solid var(--product-border); }
.process-preview-result-top { display:flex; gap:11px; align-items:center; }
.process-preview-task-icon { width:30px; height:30px; flex-shrink:0; display:grid; place-items:center; color:var(--product-muted-foreground); background:var(--product-muted); border-radius:4px; }
.process-preview-task-icon svg { width:24px; height:24px; stroke:currentColor; stroke-width:1.5; }
.process-preview-task-icon .lucide-package > path:first-child { fill:var(--product-muted); }
.process-preview-result-top > div { display:flex; flex-direction:column; gap:4px; font-size:var(--feature-body-size); }
.process-preview-result-top > div > span:last-child { color:var(--product-muted-foreground); font-size:var(--feature-meta-size); }
.synthesis-evidence { display:flex; align-items:start; gap:16px; border-top:1px solid var(--product-border-subtle); }
.synthesis-evidence > span { flex:0 0 65px; color:var(--product-muted-foreground); font-size:var(--feature-meta-size); padding-top:2px; }
.synthesis-evidence > div { font-size:var(--feature-body-size); }
.synthesis-evidence > div > span { display:block; font-size:var(--feature-meta-size); color:var(--product-muted-foreground); margin-top:4px; }
.feature-integrations.is-animating .synthesis-evidence > * { animation:record-arrive 4.8s ease both; }
.feature-integrations.is-animating .synthesis-evidence-second > * { animation-delay:.3s; }
.feature-integrations.is-animating .synthesis-evidence-third > * { animation-delay:.6s; }
@media(max-width:480px) {
 .synthesis-evidence { gap:10px; }
 .synthesis-evidence > span { flex-basis:53px; font-size:var(--feature-meta-size); }
 .synthesis-evidence > div { font-size:var(--feature-body-size); }
 .synthesis-evidence > div > span { font-size:var(--feature-meta-size); }
 .process-preview-record-head { flex-wrap:wrap; }
}
/* Evidence and proposed actions share the product's restrained document styling. */
.synthesis-evidence > div { flex:1; min-width:0; }
.evidence-meter { display:flex; height:4px; border-radius:2px; background:var(--product-success-muted); margin-top:12px; overflow:hidden; }
.evidence-meter i { width:88.889%; background:var(--product-success); transform-origin:left; }
.evidence-caption { display:flex; justify-content:space-between; margin-top:5px; color:var(--product-muted-foreground); font-size:var(--feature-meta-size); }
.synthesis-evidence > div > .evidence-document { display:flex; align-items:center; gap:5px; }
.evidence-document svg { width:12px; height:14px; flex-shrink:0; stroke:currentColor; stroke-width:1; stroke-linejoin:round; }
.evidence-summary { color:var(--product-muted-foreground); font-size:var(--feature-body-size); }
.evidence-summary p { display:flex; align-items:flex-start; gap:9px; margin:0; line-height:1.5; }
.evidence-summary p + p { margin-top:8px; }
.evidence-summary svg { flex:0 0 14px; width:14px; height:14px; margin-top:2px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.evidence-summary .evidence-complete { color:var(--product-success); }
.feature-integrations.is-animating .evidence-meter i { animation:evidence-reveal 1s 1.2s both; }
@keyframes evidence-reveal { from { transform:scaleX(0); } to { transform:scaleX(1); } }

/* Finite, sequential motion. Resting state remains fully readable. */
.systems-bridge .systems-transfer { stroke:var(--feature-flow); stroke-width:2.5; stroke-dasharray:12 100; stroke-dashoffset:12; opacity:0; }
.feature-integrations.is-animating .systems-source-selected { animation:source-receive 4.8s ease both; }
.feature-integrations.is-animating .systems-transfer { animation:record-transfer 4.8s ease-in-out both; }

.feature-integrations.is-animating .process-preview-rule { animation:comparison-arrive 4.8s ease both; }
.feature-integrations.is-animating .process-preview-rule svg path { stroke-dasharray:20; animation:comparison-check 4.8s ease both; }
.feature-integrations.is-animating .process-preview-result { animation:review-arrive 4.8s ease both; }
.feature-integrations.is-animating .systems-source-second, .feature-integrations.is-animating .systems-transfer-1 { animation-delay:.3s; }
.feature-integrations.is-animating .systems-source-third, .feature-integrations.is-animating .systems-transfer-2 { animation-delay:.6s; }
@keyframes source-receive { 0%,40%,100% { box-shadow:0 0 0 0 transparent; } 15%,28% { box-shadow:0 0 0 3px var(--product-primary-subtle); border-color:var(--product-primary); } }
@keyframes record-transfer { 0%,12% { opacity:0; stroke-dashoffset:12; } 15% { opacity:1; } 35% { opacity:1; stroke-dashoffset:-100; } 39%,100% { opacity:0; stroke-dashoffset:-100; } }
@keyframes record-arrive { 0%,25% { opacity:.35; } 43%,100% { opacity:1; } }
@keyframes comparison-arrive { 0%,40% { opacity:.25; } 57%,100% { opacity:1; } }
@keyframes comparison-check { 0%,45% { stroke-dashoffset:20; } 60%,100% { stroke-dashoffset:0; } }
@keyframes review-arrive { 0%,57% { opacity:.2; transform:translateY(7px); } 78%,100% { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) {
 .feature-integrations.is-animating * { animation:none !important; }
}
@media (max-width:1000px) {
 .systems-composition { grid-template-columns:202px 50px minmax(0,1fr); padding:32px 25px; }
 .systems-source { padding-inline:10px; gap:12px; }
 .systems-source span { font-size:var(--feature-meta-size); }
 .process-preview-title { font-size:var(--feature-title-size); }
}
@media (max-width:760px) {
 .systems-composition { grid-template-columns:minmax(0,1fr); padding:28px 22px; }
 .systems-sources { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0; }
 .systems-source { height:79px; margin:0; flex-direction:column; gap:4px; justify-content:center; padding:8px; }
 .systems-source-selected i { display:none; }
 .systems-mark { flex:0 0 40px; }
 .systems-source span { font-size:var(--feature-meta-size); }
 .systems-bridge { display:none; }
 .systems-composition { row-gap:24px; }
}
@media (max-width:480px) {
 .systems-composition { padding:25px 13px 20px; }
 .systems-source span { font-size:var(--feature-meta-size); }
 .process-preview-bar { font-size:var(--feature-meta-size); height:43px; }
 .process-preview-slash { margin-inline:4px; }
 .process-preview-title { font-size:var(--feature-title-size); }
 .process-preview-record-head { font-size:var(--feature-body-size); }
 .process-preview-origin { font-size:var(--feature-meta-size); }
 .process-preview-result-top { flex-wrap:wrap; gap:8px; }
 .process-preview-result-top > div { font-size:var(--feature-body-size); }
 .process-preview-result-top > div > span:last-child { font-size:var(--feature-meta-size); }
}

/* Compact evidence-to-action layout; connector coordinates follow the rendered tiles. */
.systems-composition { padding-block:24px 28px; }
.systems-sources { padding-top:35px; }
.systems-source-selected i { top:50%; transform:translateY(-50%); }
.systems-bridge svg { overflow:visible; }
.process-preview-bar { height:40px; }
.process-preview-result-top > div > span:only-child { color:var(--product-foreground); font-size:var(--feature-body-size); }

@media(max-width:760px) { .systems-sources { padding-top:0; } }


/* Shared document rhythm; evidence and outcome stay on one surface. */
.process-preview-bar { padding-inline:var(--document-inset); }
.process-preview-body { padding:20px var(--document-inset); }
.process-preview-title { margin-bottom:12px; }
.process-preview-record-head { padding:0 0 12px; }
.synthesis-evidence { padding:12px 0; }
.process-preview-result-top { padding:0 0 12px; gap:11px; }
.evidence-summary { padding:0; }
.evidence-summary svg { flex-basis:32px; width:32px; padding-inline:9px; box-sizing:border-box; }
@media(max-width:480px) {
 .process-preview-window { --document-inset:16px; }
 .process-preview-body { padding-block:18px; }
}

/* A compact knowledge card alongside the wider process activity view. */
@media (min-width:1101px) {
 .feature-knowledge, .feature-evolution { display:flex; flex-direction:column; }
 .knowledge-visual, .evolution-visual { min-height:440px; flex:1; }
 .feature-evolution h3 { max-width:620px; }
}
@media (min-width:700px) and (max-width:1100px) {
 .feature-grid { grid-template-columns:minmax(0,1fr); }
 .feature-card .feature-copy h3 { max-width:none; }
 .feature-knowledge .knowledge-visual { max-width:560px; margin-inline:auto; }
}

/* Keep the process flow close to its heading on phones and tablets. */
@media(max-width:1366px) {
 .feature-evolution .evolution-visual { margin-top:24px; padding-top:0; min-height:0; align-items:flex-start; }
}

.platform-section { padding-block:104px; background:var(--bg-2); color:var(--product-foreground); }
.platform-section .section-head { max-width:1100px; }
#product-title { font-size:clamp(26px,2.6vw,36px); line-height:1.25; }
.product-showcase { position:relative; isolation:isolate; padding:128px 60px 144px; border:1px solid var(--product-border-subtle); border-radius:10px; background:var(--product-muted); overflow:hidden; }
.product-showcase::before { content:''; position:absolute; inset:0; z-index:-1; background:url('/resources/artwork/model-harness-backdrop-peach.webp') center / cover; opacity:1; }
.product-app { background:var(--product-background); border:1px solid color-mix(in oklab,var(--product-border-strong) 65%,var(--product-card)); border-radius:9px; box-shadow:0 30px 65px -25px color-mix(in oklab,var(--product-foreground) 25%,transparent),0 3px 9px color-mix(in oklab,var(--product-foreground) 5%,transparent); font:11px/1.5 var(--font-sans); }
.product-app-bar { height:51px; display:flex; align-items:center; gap:28px; padding:0 18px; border-bottom:1px solid var(--product-border-subtle); }
.product-app-brand { display:flex; align-items:center; gap:6px; font-size:14px; font-weight:500; }
.product-app-breadcrumb { display:flex; align-items:center; gap:12px; color:var(--product-muted-foreground); }
.product-app-breadcrumb > span { color:var(--product-border-strong); }
.product-workspace-avatar { width:25px; height:25px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:var(--product-muted); color:var(--product-muted-foreground); font-size:10px; }
.product-app-layout { display:grid; grid-template-columns:136px minmax(0,1fr) 252px; }
.product-app-nav { display:flex; flex-direction:column; gap:5px; padding:23px 9px 20px; background:var(--product-sidebar); color:var(--product-sidebar-foreground); border-right:1px solid var(--product-sidebar-border); border-radius:0 0 0 9px; }
.product-nav-item { display:flex; align-items:center; gap:8px; padding:9px 8px; border-radius:5px; color:var(--product-muted-foreground); }
.product-nav-item svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.4; }
.product-nav-item.selected { background:var(--product-sidebar-accent); color:var(--product-foreground); }
.product-nav-count { margin-left:auto; font-size:10px; color:var(--product-muted-foreground); }
.product-nav-bottom { display:flex; align-items:center; gap:6px; margin-top:auto; padding:10px 0 0; }
.product-nav-bottom .product-workspace-avatar { width:26px; height:26px; border-radius:7px; background:var(--product-card); border:1px solid var(--product-border); color:var(--product-foreground); font-weight:500; }
.product-workspace-label { min-width:0; font-size:11px; line-height:1.25; }
.product-nav-bottom small { display:block; margin-top:3px; font-size:9px; line-height:1.35; white-space:nowrap; color:var(--product-muted-foreground); }
.product-run { display:flex; flex-direction:column; padding:22px 24px 20px; min-width:0; }
.product-run > * { flex-shrink:0; }
.product-run-heading { display:flex; align-items:start; justify-content:space-between; gap:8px; }
.product-run-heading h3 { font-size:17px; font-weight:500; letter-spacing:-.025em; line-height:1.25; margin:0; }
.product-run-heading p { margin:6px 0 0; font-size:10px; color:var(--product-muted-foreground); }
.product-run-heading p > span { margin-inline:6px; }
.product-run-status { display:flex; align-items:center; gap:5px; white-space:nowrap; font-size:9px; padding:3px 6px; border:1px solid var(--product-warning-muted); border-radius:4px; color:var(--product-warning-text); }
.product-run-status i { width:4px; height:4px; border-radius:50%; background:currentColor; }
.product-definition { margin-top:18px; padding:12px 14px; border:1px solid var(--product-border-subtle); border-radius:5px; background:var(--product-card); }
.product-request { margin:18px 0 16px; display:flex; align-items:flex-start; gap:10px; }
.product-request p { margin:0; padding:9px 12px; border-radius:9px 9px 9px 3px; background:var(--product-muted); font-size:11px; color:var(--product-foreground); }
.product-agent-message { display:flex; align-items:flex-start; gap:8px; margin:0 0 18px; }
.product-agent-avatar { flex-shrink:0; display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:var(--product-muted); }
.product-agent-avatar img { width:20px; height:20px; }
.product-agent-message > p { margin:3px 0 0; font-size:12px; line-height:1.6; color:var(--product-foreground); }
.product-chat-composer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; margin:auto 0 18px; border:1px solid var(--product-border); border-radius:16px; background:var(--product-card); box-shadow:0 2px 4px color-mix(in oklab,var(--product-foreground) 4%,transparent); color:color-mix(in oklab,var(--product-muted-foreground) 60%,transparent); font-size:11px; }
.product-chat-composer svg { width:14px; height:14px; fill:none; stroke:var(--product-muted-foreground); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.product-chat-composer > span:first-child { display:flex; align-items:center; gap:8px; }
.product-chat-send { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:var(--product-muted); }
.product-run-steps { list-style:none; margin:0 0 48px; padding:0; }
.product-run-steps li { display:flex; align-items:start; gap:11px; position:relative; padding:0 0 16px; }
.product-run-steps li:not(:last-child)::before { content:''; position:absolute; left:9px; top:22px; bottom:3px; width:var(--feature-connector-width); background:var(--product-border-strong); }
.product-step-state { width:20px; height:20px; display:grid; place-items:center; flex-shrink:0; border-radius:50%; font-size:11px; }
.product-step-state.complete { background:var(--product-success-muted); color:var(--product-success-text); }
.product-step-state.pending { background:var(--product-warning-muted); color:var(--product-warning-text); }
.product-step-state svg { width:12px; height:12px; stroke:currentColor; stroke-width:1.3; }
.product-run-steps strong { font-size:12px; font-weight:500; }
.product-audit { margin-top:5px; padding-top:15px; border-top:1px solid var(--product-border-subtle); }
.product-audit-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:10px; }
.product-audit-heading strong { font-size:11px; font-weight:500; }
.product-audit-heading span { color:var(--product-muted-foreground); }
.product-audit > div:not(:first-child) { display:flex; gap:8px; padding:6px 0; font-size:9px; }
.product-audit time,.product-audit-id { color:var(--product-muted-foreground); font-variant-numeric:tabular-nums; }
.product-inspector { background:var(--product-card); border-radius:0 0 9px 0; border-left:1px solid var(--product-border-subtle); }
.product-context { padding:25px 18px 17px; }
.product-inspector-title { display:flex; justify-content:space-between; align-items:center; gap:7px; font-size:11px; font-weight:500; }
.product-inspector-title > span { font-size:9px; font-weight:400; color:var(--product-muted-foreground); }
.product-context-source { display:flex; align-items:center; gap:10px; padding-top:20px; }
.product-source-logo { width:33px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.product-source-logo img { width:30px; max-height:22px; object-fit:contain; }
.product-context-source strong { font-size:10px; font-weight:500; }
.product-context-source p { margin:3px 0 0; font-size:9px; color:var(--product-muted-foreground); }
.product-approval { margin:9px 12px 18px; padding:15px 12px; border:1px solid var(--product-border); border-radius:6px; background:var(--product-card); }
.product-reviewer { display:flex; align-items:center; gap:8px; border-top:1px solid var(--product-border-subtle); margin-top:15px; padding-top:13px; }
.product-approval-note { margin-top:13px; font-size:9px; color:var(--product-muted-foreground); }
.product-annotation { position:absolute; z-index:2; width:318px; padding:20px 22px; border:1px solid var(--product-border-subtle); border-radius:7px; background:var(--product-card); box-shadow:0 14px 32px -10px color-mix(in oklab,var(--product-foreground) 18%,transparent); }
.product-annotation strong { display:block; font-size:14px; font-weight:500; letter-spacing:-.015em; }
.product-annotation p { margin:7px 0 0; font-size:12px; line-height:1.6; color:var(--product-muted-foreground); }
.annotation-context { left:24px; top:24px; width:330px; }
.annotation-versions { right:72px; top:52px; width:345px; }
.annotation-history { left:190px; bottom:24px; width:345px; }
.annotation-approval { right:24px; bottom:58px; }
@media(max-width:1100px) {
 .product-showcase { padding:145px 24px 140px; }
 .product-annotation { width:calc(50% - 36px); }
 .annotation-context { left:24px; top:20px; }
 .annotation-versions { right:24px; top:38px; }
 .annotation-history { left:24px; bottom:20px; }
 .annotation-approval { right:24px; bottom:38px; }
 .product-app-layout { grid-template-columns:minmax(0,1fr) 240px; }
 .product-app-nav { display:none; }
 .product-run { padding-inline:20px; }
 .product-run-status { display:none; }
}
@media(max-width:699px) {
 .platform-section { padding-block:80px; }
 .product-showcase { padding:22px 16px; }
 .product-app-layout { grid-template-columns:1fr; }
 .product-app-breadcrumb { display:none; }
 .product-run { padding:24px 18px; }
 .product-run-status { display:flex; }
 .product-inspector { background:var(--product-card); border-radius:0 0 9px 0; border-left:0; border-top:1px solid var(--product-border-subtle); }
 .product-inspector-title { font-size:12px; }
 .product-context-source strong { font-size:12px; }
 .product-context-source p { font-size:10px; }
 .product-annotation { position:relative; inset:auto; width:auto; margin-top:18px; padding:16px; box-shadow:0 6px 16px color-mix(in oklab,var(--product-foreground) 5%,transparent); }
  .product-annotation strong { font-size:13px; }
 .product-annotation p { font-size:12px; }
 .product-approval { margin:8px 18px 20px; padding:16px; }
}
@media(max-width:480px) {
 .platform-section { padding-block:64px; }
 .product-showcase { padding:18px 10px; }
 .product-run { padding-inline:14px; }
 .product-run-heading { flex-wrap:wrap; }
 .product-run-heading h3 { font-size:16px; }
 .product-run-status { margin-top:6px; }
 .product-context { padding-inline:16px; }
}

/* Balanced desktop presentation. The pinned frame is fitted to the visible viewport. */
@media(min-width:700px) {
 .product-showcase { padding:90px 48px 98px; }
 .product-app-bar { height:44px; }
 .product-run { padding:22px 20px; }
 .product-run-heading h3 { font-size:16px; }
 .product-definition { margin-top:16px; padding:10px 12px; }
 .product-request { margin:18px 0; }
 .product-request p { padding:6px 10px; }
 .product-agent-message { margin-bottom:18px; }
 .product-agent-message > p { margin-top:3px; line-height:1.5; }
 .product-run-steps { display:grid; grid-template-columns:1fr 1fr; gap:16px 14px; }
 .product-run-steps li { padding:0; gap:7px; }
 .product-run-steps li::before { display:none; }
 .product-run-steps time,.product-source-chips,.product-rule-reference { display:none; }
 .product-run-steps strong { font-size:11px; }
 .product-chat-composer { padding:6px 10px; margin-bottom:18px; }
 .product-audit { padding-top:9px; }
 .product-audit-heading { margin-bottom:5px; }
 .product-audit > div:not(:first-child) { padding:3px 0; }
 .product-context { padding:24px 16px 18px; }
 .product-context-source { padding-top:18px; }
 .product-approval { margin-top:9px; padding:16px; }
 .product-reviewer { margin-top:16px; padding-top:14px; }
 .product-approval-note { margin-top:9px; }
 .product-annotation { width:340px; padding:13px 16px; }
 .product-annotation strong { font-size:13px; }
 .product-annotation p { font-size:11px; margin-top:4px; line-height:1.5; }
 .annotation-context { top:70px; left:204px; }
 .annotation-versions { top:140px; right:90px; }
 .annotation-history { bottom:32px; left:90px; }
 .annotation-approval { bottom:36px; right:20px; }
}
@media(min-width:700px) and (max-width:1000px) {
 .product-annotation { width:calc(50% - 36px); }
 .annotation-history { left:20px; }
 .annotation-context { left:48px; }
}
.product-scroll-track.is-pinned { height:calc(var(--product-frame-height) + 1100px); }
.is-pinned .product-pin { position:sticky; top:80px; height:var(--product-frame-height); }
.is-pinned .product-showcase { transform:scale(var(--product-fit,1)); transform-origin:top center; }
.is-pinned .product-annotation { opacity:0; transition:opacity 450ms ease; }
.is-pinned .product-annotation.is-revealed { opacity:1; }
@media(prefers-reduced-motion:reduce) {
 .product-annotation { transition:none; }
}

/* Approval: action first, exception second, facts and ownership below. */
.product-approval > .product-inspector-title { font-size:10px; font-weight:400; color:var(--product-muted-foreground); }
.product-approval-reason { margin:0 0 14px; font-size:10px; line-height:1.5; color:var(--product-muted-foreground); }
.product-approval-note { line-height:1.4; }

@media(min-width:1101px) {
 .product-app-bar { display:grid; grid-template-columns:136px minmax(0,1fr); gap:0; padding-inline:0; }
 .product-app-brand { padding-left:18px; }
 .product-app-breadcrumb { padding-left:20px; }
}

/* Callouts stay outside the workspace on tablets, touch devices, and short screens. */
.product-annotations { display:contents; }
@media(max-width:1366px), (pointer:coarse), (max-height:700px) {
 .product-showcase { padding:28px 24px; }
 .product-app-layout { grid-template-columns:minmax(0,1fr) 220px; }
 .product-run { padding:22px 18px; }
 .product-annotations { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:24px; }
 .product-annotations .product-annotation { position:static; width:auto; margin:0; padding:16px; }
 .product-annotations .product-annotation strong { font-size:13px; }
 .product-annotations .product-annotation p { font-size:12px; }
}
@media(max-width:699px) {
 .product-showcase { padding:22px 16px; }
 .product-app-layout { grid-template-columns:minmax(0,1fr); }
 .product-run { padding:24px 18px; }
}
@media(max-width:480px) {
 .product-showcase { padding:18px 10px; }
 .product-run { padding-inline:14px; }
 .product-annotations { grid-template-columns:minmax(0,1fr); gap:12px; margin-top:18px; }
}

@media(max-width:1366px), (pointer:coarse), (max-height:700px) {
 .product-app-nav { display:none; }
 .product-app-bar { display:flex; gap:24px; padding-inline:18px; }
 .product-app-brand,.product-app-breadcrumb { padding-left:0; }
}
/* Small-screen mock: preserve the execution story without desktop metadata density. */
@media(max-width:699px) {
 .product-primitive,.product-source-chips,.product-rule-reference,.product-run-steps time { display:none; }
 .product-run-steps li { padding-bottom:12px; }
 .product-agent-message > p { font-size:12px; line-height:1.5; }
 .product-context { padding:20px 18px; }
 .product-context-source { padding-top:14px; }
}
@media(min-width:540px) and (max-width:699px) {
 .product-inspector { display:grid; grid-template-columns:1fr 1fr; }
 .product-approval { margin:18px 14px 18px 0; }
}
/* Narrow phones get full-width steps, with side routes for skipped steps. */
@media(max-width:480px) {
 .evolution-workflow { grid-template-columns:minmax(0,1fr); gap:40px; padding-inline:16px; }
 .workflow-inventory { grid-column:1; grid-row:1; }
 .workflow-terms { grid-column:1; grid-row:2; }
 .workflow-delivery { grid-column:1; grid-row:3; }
 .workflow-insertion { grid-column:1; grid-row:4; }
 .workflow-release { grid-column:1; grid-row:5; }
 .workflow-notify { grid-column:1; grid-row:6; }
 .workflow-step-title { min-height:26px; }
 .workflow-facts > div { flex-wrap:nowrap; }
}

/* Wide desktop keeps floating callouts in reserved space above and below the app. */
@media(min-width:1367px) and (min-height:701px) and (pointer:fine) {
 .product-showcase { padding-block:142px 146px; }
 .annotation-context { top:24px; left:24px; }
 .annotation-versions { top:24px; right:24px; }
 .annotation-history { bottom:24px; left:24px; }
 .annotation-approval { bottom:24px; right:24px; }
}

/* Keep the condition beside the vertical review connector, not across its centerline. */
@media(min-width:700px), (max-width:480px) {
 .workflow-condition { left:calc(50% + 12px); right:auto; text-align:left; }
}

/* Mobile communicates the handoff through source emphasis and evidence, without a connector. */
@media(max-width:760px) and (prefers-reduced-motion:no-preference) {
 .feature-integrations.is-animating .process-preview-record { animation:record-arrive 4.8s ease both; }
}

@media(max-width:480px) {
 .feature-evolution { --feature-body-size:11px; --feature-support-size:10px; }
 .feature-evolution .feature-copy h3 { font-size:20px; line-height:1.3; }
 .workflow-step-title { min-height:26px; line-height:1.4; }
}

/* A restrained workspace hierarchy: title, body, and supporting evidence. */
.product-definition { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:12px 0; border:0; border-bottom:1px solid var(--product-border-subtle); border-radius:0; background:none; font-size:11px; }
.product-definition-version { color:var(--product-muted-foreground); }
.product-request p,.product-agent-message > p { font-size:12px; line-height:1.6; }
.product-run-steps strong { font-size:12px; font-weight:400; line-height:20px; }
.product-run-heading p,.product-context-source p,.product-audit-heading,.product-audit > div:not(:first-child) { font-size:11px; }
.product-inspector-title,.product-context-source strong,.product-audit-heading strong { font-size:12px; font-weight:500; }
.product-approval { margin:0 18px 20px; padding:18px 0 0; border:0; border-top:1px solid var(--product-border-subtle); border-radius:0; background:none; }
.product-approval > .product-inspector-title { font-size:12px; font-weight:500; color:var(--product-foreground); }
.product-approval-reason { margin:10px 0 16px; font-size:11px; line-height:1.6; }
.product-reviewer { margin:0; padding:0; border:0; font-size:11px; }
.product-reviewer-status { color:var(--product-muted-foreground); }
.product-approval-note { margin:16px 0 0; font-size:11px; line-height:1.6; }
@media(min-width:540px) and (max-width:699px) {
 .product-approval { margin:20px 18px 20px 0; padding:0 0 0 18px; border-top:0; border-left:1px solid var(--product-border-subtle); }
}

/* Desktop workspace proportions follow a landscape laptop display. */
@media(min-width:1101px) and (pointer:fine) {
 .product-app { aspect-ratio:16 / 10; display:flex; flex-direction:column; }
 .product-app-bar { flex-shrink:0; }
 .product-app-layout { flex:1; min-height:0; }
}

@media(prefers-reduced-motion:no-preference) {
 .product-annotation.is-waiting { opacity:0; }
 .product-annotation.is-entering { animation:callout-enter 700ms ease-out both; }
 @keyframes callout-enter {
  from { opacity:0; }
  to { opacity:1; }
 }
}