/* SCAI vs. Others animated comparison. Every rule is scoped under .cmp; internal animation colours are unchanged. */
.cmp { max-width: 1920px; margin: 0 auto; background: #eef2ef; color: #20302f; font: 15px/normal Arial, sans-serif; letter-spacing: normal; }
.cmp *, .cmp *::before, .cmp *::after { box-sizing: border-box; }
.cmp #stage { aspect-ratio: 3.2; position: relative; overflow: hidden; --split: 50%; isolation: isolate; }
.cmp .layer { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.cmp .legacy { background: #f6f5ef; clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.cmp .pane { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 3% 5%; }
.cmp .primary { position: relative; }
.cmp .primary h2 { position: absolute; top: 5%; margin: 0; font: 600 clamp(12px, 1.35vw, 24px) Arial; letter-spacing: -.025em; }
.cmp .legacy h2 { left: 5%; }
.cmp svg { display: block; width: 100%; overflow: visible; }
.cmp .illustration { display: flex; align-items: center; gap: 1%; padding-top: 4%; }
.cmp .portrait { width: 47%; }
.cmp .card { width: 52%; background: white; border: 1.5px solid #47504a; border-radius: 7px; padding: 3%; font-size: clamp(11px, 1.2vw, 23px); }
.cmp .card strong { display: block; font-size: 1.05em; margin-bottom: .55em; }
.cmp .card p { margin: .35em 0; min-height: 2.4em; }
.cmp .field { border: 1px solid #a3aaa4; border-radius: 3px; padding: .4em; margin-top: .35em; min-height: 1.9em; font: .85em Consolas, monospace; }
.cmp .modern .card { border: 0; box-shadow: 0 12px 28px #296d601f; color: #183f37; }
.cmp .modern .card small { color: #276858; }
.cmp .modern .portrait { stroke: #254841; fill: #fff8e9; }
.cmp .modern #figure > path:nth-child(1), .cmp .modern #figure > path:nth-child(2), .cmp .modern #writing path:first-child { fill: #e5af87; }
.cmp .modern #figure > path:nth-child(3) { fill: #483a33; }
.cmp .modern #figure > path:nth-child(6) { fill: #459f90; }
.cmp .modern #environment > path:first-child { fill: #ecab68; }
.cmp .modern #environment > path:nth-child(2) { fill: #fff1cb; }
.cmp .modern .portrait ellipse { fill: #e6d4ae; }
.cmp .extra { padding-inline: 11%; color: #405851; }
.cmp .extra h3 { font-size: clamp(15px, 2vw, 35px); margin: 0 0 .5em; letter-spacing: -.04em; }
.cmp .extra svg { max-height: 60%; }
.cmp .legacy .extra { color: #555b56; }
.cmp .divider { position: absolute; inset: 0 auto 0 clamp(2px, var(--split), calc(100% - 2px)); border-left: 2px solid #14675b; pointer-events: none; }
.cmp .handle { position: absolute; left: clamp(22px, var(--split), calc(100% - 22px)); top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #165e55; color: white; font-size: 21px; pointer-events: none; }
.cmp .drag { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.cmp .drag:focus-visible ~ .handle { outline: 3px solid #1c59c0; outline-offset: 3px; }
.cmp .graph { height: 2.6em; }
.cmp .signal { color: #087762; font-weight: 600; font-size: .85em; }

/* Modern (SCAI) layer */
.cmp .layer.modern { display: block; left: auto; right: 0; width: max(50%, calc(100% - var(--split))); overflow: hidden; background: linear-gradient(165deg, #fffdf6 20%, #f1f7ef 86%); }
.cmp .modern h2 { position: absolute; top: 5%; right: 5%; margin: 0; font-size: clamp(12px, 1.35vw, 24px); color: #105f56; z-index: 1; }
.cmp .cafe { height: 100%; padding: 6% 2% 2%; }
.cmp .modern .cafe { padding-top: max(6%, clamp(38px, 3.6vw, 58px)); }
.cmp .cafe svg { width: 100%; height: 100%; overflow: hidden; }
.cmp .cafe text { font-family: Arial, sans-serif; fill: #202729; stroke: none; }
.cmp .cafe #figure > path:nth-child(13) { fill: #459f90; }
.cmp .cafe #environment > path:nth-child(6) { fill: #93baa0; }
.cmp .cafe #person > ellipse:first-of-type { fill: #f0d7b8; }
.cmp .modern .skin, .cmp .modern #forearm path:first-child { fill: #e5af87; }

/* Legacy (Others) layer */
.cmp .legacy .office { width: 51%; }
.cmp .legacy .card { width: 48%; }
.cmp .legacy .field { overflow-wrap: anywhere; }
.cmp .legacy .failed { border-color: #9b412f; background: #fff8f2; }
.cmp .failed strong, .cmp .failed #status { color: #8a3629; }
.cmp .repair #value2 { border-color: #9c793a; background: #fbf6e9; }
.cmp #status:not(:empty) { display: block; margin-top: .6em; font-weight: bold; }

/* Identity: SCAI logo, same style as the site header (no box) */
.cmp .modern h2.identity { top: 6px; right: 2%; display: flex; align-items: center; gap: .6em; padding: 4px 6px; color: var(--ink, #1d2227); font-family: "Barlow", "Segoe UI", Arial, sans-serif; font-weight: 600; letter-spacing: normal; }
.cmp .identity .mark { font-size: clamp(18px, 1.9vw, 30px); font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--ink, #1d2227); }
.cmp .identity .mark span { color: var(--accent, #08a8bf); }
.cmp .identity .sep { flex-shrink: 0; width: 1px; height: clamp(18px, 1.9vw, 30px); background: var(--input-line, #d0d2d4); }
.cmp .identity .concept { display: flex; flex-direction: column; font-size: clamp(9px, .8vw, 12px); font-weight: 400; line-height: 1.25; letter-spacing: .01em; color: var(--fg-3, #5c5e62); white-space: nowrap; }

/* Controls, styled like the site's demo bar */
.cmp .cmp-bar { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 3%; background: #fafafa; border-top: 1px solid var(--line, #e3e5e7); font-family: var(--font, Arial, sans-serif); }
.cmp .cmp-bar button { flex-shrink: 0; height: 30px; min-width: 64px; padding: 0 12px; background: #fff; color: var(--fg, #171a20); border: 1px solid var(--input-line, #d0d2d4); border-radius: 5px; font: 500 13px/1 var(--font, Arial, sans-serif); letter-spacing: .02em; cursor: pointer; transition: background-color .2s, border-color .2s; }
.cmp .cmp-bar button:hover { background: var(--surface, #f3f4f5); border-color: #b9bcbf; }
.cmp .cmp-bar button:focus-visible { outline: 2px solid var(--link, #0a8597); outline-offset: 2px; }
.cmp .cmp-bar .seek { --p: 0%; flex: 1; min-width: 25px; height: 16px; margin: 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.cmp .cmp-bar .seek:focus-visible { outline: 2px solid var(--link, #0a8597); outline-offset: 4px; }
.cmp .cmp-bar .seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--ink, #1d2227) var(--p), var(--input-line, #d0d2d4) var(--p)); }
.cmp .cmp-bar .seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--ink, #1d2227); }
.cmp .cmp-bar .seek::-moz-range-track { height: 4px; border-radius: 2px; background: var(--input-line, #d0d2d4); }
.cmp .cmp-bar .seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ink, #1d2227); }
.cmp .cmp-bar .seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ink, #1d2227); }
.cmp .cmp-bar output { flex-shrink: 0; min-width: 5.2em; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--fg-3, #5c5e62); }

@media (max-width: 680px) {
  .cmp #stage { aspect-ratio: 1.08; }
  .cmp .illustration { flex-direction: column; padding-top: 10%; }
  .cmp .portrait { width: 73%; height: 33vw; }
  .cmp .card { width: 94%; font-size: 12px; padding: 6%; }
  .cmp .pane { padding-inline: 5%; }
  .cmp .primary h2 { top: 3%; }
  .cmp .extra { padding: 8%; }
  .cmp .handle { width: 32px; height: 32px; }
  .cmp .graph { height: 1.7em; }
  .cmp .legacy .office { width: 95%; height: 39vw; }
  .cmp .legacy .card { width: 94%; }
  .cmp .modern h2.identity { max-width: 94%; gap: 6px; padding: 4px 6px; }
  .cmp .cmp-bar { gap: 8px; }
}