/* Only the copy area and illustrative UI layer. Approved landscapes, heading,
   stage geometry, accordion and shared navigation retain their original rules. */
#platform .kw-hw-detail { justify-content: center; gap: 12px; }
#platform .kw-hw-detail .kw-hw-description { margin: 0; line-height: 1.65; }
#platform .kw-hw-detail .kw-hw-value { margin: 0; width: 100%; padding-top: 14px; border-top: 1px solid #e8e8eb; color: #25262b; font-size: clamp(14px, 1.15vw, 17px); font-weight: 600; line-height: 1.6; text-wrap: pretty; }
#platform .kw-hw-indicator { right: 36px; bottom: 18px; height: 3px; }
#platform .kw-hw-scene { container-type: inline-size; }
.kw-demo-window { width: 86%; height: 80%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #ffffffdb; border-radius: 3cqw; background: #eef5f9d9; box-shadow: 0 16px 40px #193c571c; backdrop-filter: blur(20px); color: #28465a; font-size: 1.8cqw; line-height: 1.5; }
.kw-demo-top { display: flex; align-items: center; gap: 12px; flex: 0 0 10%; min-height: 26px; padding: 0 4%; font-size: 1.55cqw; color: #567182; }
.kw-demo-top > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-demo-dots { display: flex; flex-shrink: 0; gap: 5px; }
.kw-demo-dots i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #ff5e5a; }
.kw-demo-dots i:nth-child(2) { background: #ffbd2e; }
.kw-demo-dots i:nth-child(3) { background: #28c840; }
.kw-demo-body { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 3%; padding: 1% 4% 4%; }
.kw-demo-body h3,.kw-demo-body p { margin: 0; }
.kw-demo-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kw-demo-panel-head b { font-size: 1.9cqw; font-weight: 600; }
.kw-demo-panel-head > span { color: #718898; font-size: 1.45cqw; }
.kw-demo-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; flex: 0 0 22%; }
.kw-demo-metrics > div { display: flex; flex-direction: column; justify-content: center; padding: 7% 12%; background: #ffffffb8; border: 1px solid #ffffff; border-radius: 1.4cqw; }
.kw-demo-metrics span { color: #6f8799; font-size: 1.7cqw; }
.kw-demo-metrics strong { font-size: 3.5cqw; font-weight: 650; letter-spacing: -.04em; line-height: 1.3; white-space: nowrap; }
.kw-demo-metrics small { margin-left: 3px; font-size: 1.6cqw; font-weight: 400; }
.kw-demo-chart { position: relative; flex: 1; min-height: 0; padding: 3% 4% 2%; background: #ffffffc9; border: 1px solid #fff; border-radius: 1.7cqw; display: flex; flex-direction: column; }
.kw-demo-chart-legend { display: flex; gap: 14px; color: #7d909e; font-size: 1.35cqw; margin-top: 2%; }
.kw-demo-chart-legend span::before { content: ''; display: inline-block; width: 7px; height: 4px; border-radius: 2px; margin-right: 5px; vertical-align: middle; background: #348eff; }
.kw-demo-chart-legend span:nth-child(2)::before { background: #30c8c0; }
.kw-demo-chart-legend small { margin-left: auto; font-size: inherit; }
.kw-demo-bars { display: flex; flex: 1; min-height: 0; gap: 5%; margin-top: 4%; background: repeating-linear-gradient(to top, transparent 0, transparent calc(33.333% - 1px), #d8e5ee 33.333%); }
.kw-demo-bar-group { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kw-demo-bar-group > div { display: flex; align-items: flex-end; justify-content: center; gap: 4px; flex: 1; min-height: 0; padding: 0 8%; }
.kw-demo-bar-group i { display: block; flex: 1; height: var(--bar); background: linear-gradient(#52adff,#187bee); border-radius: 5px 5px 0 0; }
.kw-demo-bar-group i:nth-child(2) { background: linear-gradient(#50d6d0,#16bdb6); }
.kw-demo-bar-group > span { padding-top: 6px; font-size: 1.4cqw; color: #8095a4; text-align: center; background: #f8fbfd; }
.kw-demo-tooltip { position: absolute; left: 43%; top: 20%; display: flex; flex-direction: column; gap: 4px; width: 36%; padding: 3%; background: #fff; border: 1px solid #d8e6f2; border-radius: 1.2cqw; box-shadow: 0 8px 20px #24517820; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; z-index: 2; font-size: 1.6cqw; }
.kw-demo-tooltip > b { margin-bottom: 3px; }
.kw-demo-tooltip > span { display: flex; justify-content: space-between; color: #718495; }
.kw-demo-tooltip strong { color: #28465a; font-weight: 600; }
.kw-demo-summary { flex: 0 0 13%; padding: 2% 4%; display: flex; align-items: center; gap: 4%; border-radius: 1.2cqw; background: #ffffff8c; font-size: 1.6cqw; }
.kw-demo-summary > span { color: #718b9c; white-space: nowrap; }
.kw-demo-summary b { color: #207dd0; font-weight: 600; }
.kw-demo-pointer { position: absolute; width: 3cqw; height: 3.8cqw; filter: drop-shadow(0 2px 2px #20374e26); opacity: 0; pointer-events: none; transition: transform .7s cubic-bezier(.2,.7,.25,1), opacity .2s; z-index: 4; }
.kw-demo-chart > .kw-demo-pointer { left: 52%; top: 55%; transform: translate(80px,25px); }
[data-demo-phase="1"] .kw-demo-chart > .kw-demo-pointer { opacity: 1; transform: none; }
[data-demo-phase="2"] .kw-demo-chart > .kw-demo-pointer { opacity: 1; transform: none; }
[data-demo-phase="2"] .kw-demo-tooltip,[data-demo-phase="3"] .kw-demo-tooltip { opacity: 1; transform: none; }
[data-demo-phase="2"] .kw-demo-bar-group.is-target,[data-demo-phase="3"] .kw-demo-bar-group.is-target { background: #2e92ff10; border-radius: 7px; }
.kw-demo-slide-layout { display: grid; grid-template-columns: 19% minmax(0,1fr); gap: 4%; flex: 1; min-height: 0; }
.kw-demo-thumbs { display: flex; flex-direction: column; gap: 5%; padding: 8%; background: #ffffff80; border: 1px solid #fff; border-radius: 1.5cqw; font-size: 1.25cqw; }
.kw-demo-thumbs > span { color: #7e95a5; }
.kw-demo-thumbs > div { position: relative; display: flex; flex-direction: column; justify-content: center; flex: 1; padding: 12%; border: 1px solid #fff; border-radius: .7cqw; background: #ffffffc7; }
.kw-demo-thumbs > div:first-of-type { background: linear-gradient(135deg,#74bce8,#898bc7); color: #fff; }
.kw-demo-thumbs small { opacity: .6; font-size: 1cqw; }
.kw-demo-thumbs b { font-size: 1.35cqw; font-weight: 600; }
.kw-demo-thumbs > div:first-of-type b { font-size: 3cqw; }
.kw-demo-thumbs i { display: block; height: 3px; margin-top: 5px; width: 85%; background: #d7e5ec; }
.kw-demo-thumbs .is-selected { border-color: #338ff0; box-shadow: 0 0 0 2px #338ff02b; background: #edf7ff; }
.kw-demo-slide { position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 5%; border-radius: 1.5cqw; color: #fff; background: linear-gradient(140deg,#77c0e8,#738bcc); border: 1px solid #ffffffde; box-shadow: 0 8px 20px #38627f19; }
.kw-demo-slide::before { position: absolute; content: ''; width: 85%; aspect-ratio: 1; right: -23%; bottom: -22%; border: 2px solid #ffe4d6b5; border-radius: 50%; background: linear-gradient(140deg,#ecab8d,#ee825f); }
.kw-demo-slide > * { position: relative; }
.kw-demo-slide-kicker { color: #ffffffd9; font-size: 1.25cqw; }
.kw-demo-slide h3 { min-height: 2.45em; margin-top: 6%; font-size: 3.9cqw; line-height: 1.18; letter-spacing: -.03em; font-weight: 650; color: #fff; }
.kw-demo-after { display: none; }
[data-demo-phase="3"] .kw-demo-after { display: inline; }
[data-demo-phase="3"] .kw-demo-before { display: none; }
.kw-demo-slide-chart { width: 90%; margin-top: 5%; padding: 4%; border: 1px solid #fff8; border-radius: 1cqw; background: #f4faffdb; color: #376b94; }
.kw-demo-slide-chart > div:first-child { display: flex; justify-content: space-between; gap: 8px; font-size: 1.1cqw; white-space: nowrap; }
.kw-demo-slide-chart b { font-size: 1.8cqw; }
.kw-demo-slide-bars { display: flex; align-items: stretch; gap: 15%; height: 7.4cqw; padding: 6% 4% 0; }
.kw-demo-slide-bars > span { display: flex; flex-direction: column; flex: 1; justify-content: flex-end; align-items: center; }
.kw-demo-slide-bars i { width: 90%; height: var(--bar); border-radius: 3px 3px 0 0; background: linear-gradient(#52adf4,#2b8fdd); }
.kw-demo-slide-bars small { font-size: 1cqw; margin-top: 3px; white-space: nowrap; }
.kw-demo-slide-page { margin-top: auto; padding-top: 4%; align-self: flex-end; font-size: 1.1cqw; color: #fffb; }
.kw-demo-command { position: relative; display: flex; align-items: center; flex: 0 0 11%; min-height: 24px; gap: 3%; padding: 2% 3%; margin-top: 1%; background: #ffffffd9; border: 1px solid #fff; border-radius: 1.2cqw; font-size: 1.55cqw; }
.kw-demo-command-label { color: #8b9daa; white-space: nowrap; }
.kw-demo-command-text { opacity: 0; transform: translateY(3px); transition: opacity .25s, transform .25s; white-space: nowrap; }
.kw-demo-send { display: grid; place-items: center; margin-left: auto; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: #29495d; color: #fff; font-size: 2cqw; }
.kw-demo-command > .kw-demo-pointer { right: 5%; top: 55%; transform: translate(25px,15px); }
[data-demo-phase="1"] .kw-demo-command-text,[data-demo-phase="2"] .kw-demo-command-text,[data-demo-phase="3"] .kw-demo-command-text { opacity: 1; transform: none; }
[data-demo-phase="2"] .kw-demo-command > .kw-demo-pointer { opacity: 1; transform: none; }
.kw-demo-result { flex: 0 0 4%; color: #4b856f; font-size: 1.45cqw; opacity: 0; transition: opacity .25s; padding-left: 2%; }
.kw-demo-result i { font-style: normal; margin-right: 5px; }
[data-demo-phase="3"] .kw-demo-result { opacity: 1; }
.kw-demo-flow-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 15%; }
.kw-demo-flow-head > div { display: flex; flex-direction: column; gap: 3px; }
.kw-demo-flow-head b { font-size: 2.5cqw; font-weight: 600; }
.kw-demo-flow-head > div > span { color: #8595a0; font-size: 1.4cqw; }
.kw-demo-run { position: relative; background: #fff; border: 1px solid #d3e3ea; border-radius: .8cqw; padding: 6px 10px; color: #428cbb; font-size: 1.5cqw; }
.kw-demo-run > .kw-demo-pointer { right: 4%; top: 60%; transform: translate(40px,25px); }
[data-demo-phase="1"] .kw-demo-run > .kw-demo-pointer { opacity: 1; transform: none; }
.kw-demo-flow { flex: 0 0 29%; display: grid; grid-template-columns: repeat(4,1fr); gap: 3%; align-items: center; }
.kw-demo-node { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6%; height: 90%; padding: 10%; border-radius: 1cqw; border: 1px solid #dce6ec; background: #ffffffd4; transition: background .3s,border-color .3s; }
.kw-demo-node:not(:last-child)::after { content: ''; position: absolute; left: 100%; top: 50%; width: 20%; height: 1px; background: #b3cbdc; }
.kw-demo-node > span { color: #88a2b3; font-size: 1.3cqw; }
.kw-demo-node b { font-size: 1.65cqw; font-weight: 600; white-space: nowrap; }
.kw-demo-node small { font-size: 1.1cqw; color: #92a3ae; white-space: nowrap; }
.kw-demo-node i { position: absolute; right: 8%; top: 10%; opacity: 0; color: #32a980; font-style: normal; font-size: 1.5cqw; transition: opacity .2s; }
[data-flow-step="1"] .kw-demo-node:nth-child(-n+1),[data-flow-step="2"] .kw-demo-node:nth-child(-n+2),[data-flow-step="3"] .kw-demo-node:nth-child(-n+3),[data-demo-phase="3"] .kw-demo-node { border-color: #a1d8c4; background: #f1fcf7; }
[data-flow-step="1"] .kw-demo-node:nth-child(-n+1) i,[data-flow-step="2"] .kw-demo-node:nth-child(-n+2) i,[data-flow-step="3"] .kw-demo-node:nth-child(-n+3) i,[data-demo-phase="3"] .kw-demo-node i { opacity: 1; }
.kw-demo-output { flex: 1; min-height: 0; padding: 3%; background: #ffffffbf; border: 1px solid #fff; border-radius: 1.4cqw; }
.kw-demo-table { margin-top: 3%; }
.kw-demo-table > div { display: grid; grid-template-columns: 1fr 1.3fr .7fr; gap: 10px; align-items: center; padding: 2% 0; border-bottom: 1px solid #e7eef2; font-size: 1.55cqw; }
.kw-demo-table > div:first-child { color: #879aa7; font-size: 1.3cqw; }
.kw-demo-table > div:not(:first-child) { opacity: .08; transform: translateY(5px); transition: opacity .3s,transform .3s; }
.kw-demo-table b { font-weight: 500; }
.kw-demo-table em { font-style: normal; color: #a67a3b; font-size: 1.35cqw; justify-self: start; padding: 2px 6px; background: #fcf3df; border-radius: 4px; }
[data-demo-phase="3"] .kw-demo-table > div { opacity: 1; transform: none; }
.kw-demo-document-layout { display: grid; grid-template-columns: 25% minmax(0,1fr); gap: 4%; flex: 1; min-height: 0; }
.kw-demo-doc-outline { font-size: 1.5cqw; padding-top: 4%; }
.kw-demo-doc-outline > span { color: #8295a2; font-size: 1.35cqw; }
.kw-demo-doc-outline > div { display: flex; flex-direction: column; gap: 4px; margin-top: 10%; padding: 10%; border: 1px solid transparent; border-radius: .8cqw; }
.kw-demo-doc-outline b { font-weight: 500; }
.kw-demo-doc-outline small { color: #8096a5; font-size: 1.2cqw; }
.kw-demo-doc-outline .is-selected { background: #ffffffb5; border-color: #fff; }
.kw-demo-doc-outline .is-selected small { color: #b3894a; }
.kw-demo-paper { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 7%; background: #fff; border: 1px solid #e4ebed; border-radius: .9cqw; box-shadow: 0 5px 16px #29445a0a; }
.kw-demo-paper-kicker { font-size: 1.1cqw; color: #90a0ac; }
.kw-demo-paper h3 { font-size: 2.5cqw; font-weight: 600; color: #2f4859; margin: 8% 0 4%; }
.kw-demo-paper > p { font-size: 1.4cqw; color: #6b7e8b; }
.kw-demo-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 5%; padding: 5% 0; margin-top: 4%; border-top: 1px solid #e8edf0; }
.kw-demo-compare > div { display: flex; flex-direction: column; gap: 6px; padding: 5%; border-radius: .6cqw; border: 1px solid transparent; transition: background .25s,border-color .25s; }
.kw-demo-compare span { color: #7e919f; font-size: 1.3cqw; }
.kw-demo-compare strong { font-size: 2.1cqw; font-weight: 600; white-space: nowrap; }
[data-demo-phase="1"] .kw-demo-compare > div,[data-demo-phase="2"] .kw-demo-compare > div,[data-demo-phase="3"] .kw-demo-compare > div { background: #fff6e6; border-color: #f0d6a8; }
.kw-demo-paper .kw-demo-paper-note { font-size: 1.25cqw; line-height: 1.6; }
.kw-demo-review { margin-top: auto; padding: 5%; border: 1px solid #dae7f0; border-radius: .7cqw; background: #f5faff; font-size: 1.4cqw; }
.kw-demo-review > span { display: flex; align-items: center; justify-content: space-between; color: #6c899f; }
.kw-demo-review small { color: #ae8548; padding: 2px 4px; border-radius: 3px; background: #fff2d9; font-size: 1.15cqw; }
.kw-demo-review p { margin-top: 8px; min-height: 3em; }
.kw-demo-review .kw-demo-before { color: #a2b2bf; }
.kw-demo-paper > .kw-demo-pointer { left: 56%; top: 43%; transform: translate(60px,20px); }
[data-demo-phase="1"] .kw-demo-paper > .kw-demo-pointer { opacity: 1; transform: none; }
[data-demo-phase="2"] .kw-demo-paper > .kw-demo-pointer { opacity: 1; transform: translateY(15cqw); }
[data-demo-playback="paused"] .kw-demo-pointer { transition: none; }
@media (min-width: 981px) and (max-width: 1250px) {
  #platform .kw-hw-detail { top: 75px; left: 28px; right: 28px; bottom: 26px; gap: 12px; }
  #platform .kw-hw-detail .kw-hw-description { font-size: 15px; line-height: 1.55; }
  #platform .kw-hw-detail .kw-hw-value { font-size: 14px; line-height: 1.5; padding-top: 10px; }
}
@media (max-width: 980px) {
  #platform .kw-hw-detail .kw-hw-description { margin-bottom: 18px; }
  #platform .kw-hw-detail .kw-hw-value { font-size: 15px; padding-top: 14px; }
}
@container outcomes-canvas (max-width: 540px) {
  .kw-demo-window { width: 90%; height: 84%; margin-top: 0; border-radius: 3cqw; }
  .kw-demo-top { min-height: 21px; padding: 0 4%; gap: 7px; font-size: 2.6cqw; }
  .kw-demo-dots { gap: 3px; }
  .kw-demo-dots i { width: 1.7cqw; height: 1.7cqw; }
  .kw-demo-body { gap: 4%; padding: 0 4% 4%; }
  .kw-demo-metrics { flex-basis: 26%; }
  .kw-demo-metrics > div { padding: 4% 9%; }
  .kw-demo-metrics span { font-size: 2.5cqw; }
  .kw-demo-metrics strong { font-size: 5cqw; }
  .kw-demo-metrics small { font-size: 2.4cqw; }
  .kw-demo-panel-head b { font-size: 3cqw; }
  .kw-demo-panel-head > span { font-size: 2.3cqw; }
  .kw-demo-chart { padding: 2% 3%; }
  .kw-demo-chart-legend { font-size: 2.2cqw; margin-top: 1%; gap: 9px; }
  .kw-demo-chart-legend small { display: none; }
  .kw-demo-bars { margin-top: 3%; gap: 4%; }
  .kw-demo-bar-group > span { font-size: 2.2cqw; padding-top: 3px; }
  .kw-demo-bar-group > div { gap: 2px; }
  .kw-demo-tooltip { font-size: 2.5cqw; width: 46%; left: 36%; top: 25%; gap: 1px; padding: 3%; }
  .kw-demo-tooltip > b { margin-bottom: 1px; }
  .kw-demo-summary { display: none; }
  .kw-demo-pointer { width: 5cqw; height: 6cqw; }
  .kw-demo-thumbs { display: none; }
  .kw-demo-slide-layout { display: block; flex: 1; }
  .kw-demo-slide { width: 100%; height: 100%; padding: 3% 5%; }
  .kw-demo-slide-kicker { font-size: 2cqw; }
  .kw-demo-slide h3 { font-size: 5.2cqw; margin-top: 2%; min-height: 2.4em; width: 62%; }
  .kw-demo-slide-chart { position: absolute; right: 4%; bottom: 9%; width: 39%; padding: 3%; margin: 0; }
  .kw-demo-slide-chart > div:first-child { flex-direction: column; gap: 1px; font-size: 1.7cqw; }
  .kw-demo-slide-chart b { font-size: 2.7cqw; }
  .kw-demo-slide-bars { height: 7.5cqw; gap: 10%; padding-top: 3%; }
  .kw-demo-slide-bars small { font-size: 1.6cqw; margin-top: 2px; }
  .kw-demo-slide-page { align-self: flex-start; font-size: 1.7cqw; padding-top: 2%; }
  .kw-demo-command { font-size: 2.4cqw; flex-basis: 17%; gap: 3%; padding: 1% 3%; min-height: 26px; }
  .kw-demo-command-label { display: none; }
  .kw-demo-send { width: 4.5cqw; height: 4.5cqw; font-size: 3cqw; }
  .kw-demo-result { display: none; }
  .kw-demo-flow-head { flex-basis: 13%; }
  .kw-demo-flow-head b { font-size: 3.7cqw; }
  .kw-demo-flow-head > div > span { font-size: 2.3cqw; }
  .kw-demo-run { font-size: 2.6cqw; padding: 4px 6px; }
  .kw-demo-flow { grid-template-columns: repeat(2,1fr); gap: 8%; flex-basis: 40%; }
  .kw-demo-node { height: 100%; padding: 5% 8%; }
  .kw-demo-node > span { display: none; }
  .kw-demo-node b { font-size: 3cqw; }
  .kw-demo-node small { font-size: 2.2cqw; }
  .kw-demo-node i { font-size: 3cqw; }
  .kw-demo-node:nth-child(2)::after { display: none; }
  .kw-demo-node:not(:last-child)::after { width: 9%; }
  .kw-demo-output { padding: 3%; }
  .kw-demo-table > div { font-size: 2.5cqw; gap: 5px; padding: 3% 0; }
  .kw-demo-table > div:first-child { font-size: 2.2cqw; }
  .kw-demo-table em { font-size: 2.2cqw; padding: 1px 3px; }
  .kw-demo-table > div:last-child { display: none; }
  .kw-demo-document-layout { display: block; }
  .kw-demo-doc-outline { display: none; }
  .kw-demo-paper { height: 100%; padding: 4% 6%; }
  .kw-demo-paper-kicker { display: none; }
  .kw-demo-paper h3 { font-size: 3.9cqw; margin: 0 0 2%; }
  .kw-demo-paper > p { font-size: 2.5cqw; }
  .kw-demo-compare { padding: 2% 0; margin-top: 2%; }
  .kw-demo-compare > div { padding: 2% 4%; gap: 2px; }
  .kw-demo-compare span { font-size: 2.2cqw; }
  .kw-demo-compare strong { font-size: 3.6cqw; }
  .kw-demo-paper .kw-demo-paper-note { display: none; }
  .kw-demo-review { padding: 3%; font-size: 2.5cqw; }
  .kw-demo-review small { font-size: 2cqw; padding: 1px 3px; }
  .kw-demo-review p { margin-top: 3px; min-height: 1.5em; }
}
@media (prefers-reduced-motion: reduce) {
  #platform .kw-demo-window * { transition: none !important; animation: none !important; }
  .kw-demo-pointer { display: none; }
}
/* Keep result rows inside their panel at every stage size. */
.kw-demo-output { display: flex; flex-direction: column; }
.kw-demo-table { display: grid; flex: 1; min-height: 0; grid-template-rows: .7fr repeat(3,1fr); }
.kw-demo-table > div { padding-block: 0; min-height: 0; }
@container outcomes-canvas (max-width: 540px) {
  .kw-demo-table { grid-template-rows: .7fr repeat(2,1fr); }
}

@container outcomes-canvas (max-width: 540px) {
  .kw-demo-slide-chart > div:first-child { font-size: 2.2cqw; }
  .kw-demo-slide-chart b { font-size: 3.4cqw; }
  .kw-demo-slide-kicker { font-size: 2.4cqw; }
  .kw-demo-slide-bars small { display: none; }
}
@media (min-width: 1251px) and (max-width: 1399px) {
  #platform .kw-hw-detail { top: 88px; bottom: 26px; gap: 12px; }
  #platform .kw-hw-detail .kw-hw-description { font-size: 16px; line-height: 1.55; }
  #platform .kw-hw-detail .kw-hw-value { font-size: 14px; line-height: 1.5; padding-top: 12px; }
}
/* Reveal copy after the expanding card has made room for it. */
@media (width > 980px) {
  #platform .kw-hw-item.is-active .kw-hw-detail { transition-delay: .36s; }
}

/* 2026-10-08: desktop alignment and observed KuWork product chrome. */
@media (width > 980px) {
  #platform .kw-hw-item:not(.is-active) { display: flex; align-items: center; }
  #platform .kw-hw-item:not(.is-active) > h3 { width: 100%; }
  #platform .kw-hw-item:not(.is-active) .kw-hw-trigger { min-height: 0; padding-block: 0; }
}
.kw-product { display: grid; grid-template-columns: 17% minmax(0,1fr); width: 92%; height: 84%; overflow: hidden; border: 1px solid #d8dde1; border-radius: 1.8cqw; box-shadow: 0 16px 44px #25394324; color: #292b30; background: #fff; font-size: 1.4cqw; line-height: 1.5; }
.kw-product svg { width: 1.8cqw; height: 1.8cqw; flex-shrink: 0; }
.kw-product-sidebar { display: flex; flex-direction: column; min-width: 0; background: #f8f8f8; border-right: 1px solid #ededed; padding: 0 6%; }
.kw-product-windowbar { display: flex; align-items: center; justify-content: space-between; flex: 0 0 8%; padding: 0 4%; }
.kw-product-windowbar > svg { width: 1.55cqw; height: 1.55cqw; color: #989898; }
.kw-product .kw-demo-dots { gap: .4cqw; }
.kw-product .kw-demo-dots i { width: .85cqw; height: .85cqw; }
.kw-product-nav { display: flex; flex-direction: column; gap: .3cqw; }
.kw-product-nav > div { display: flex; align-items: center; gap: .7cqw; padding: .6cqw .65cqw; white-space: nowrap; border-radius: .65cqw; }
.kw-product .is-current { background: #ebebeb; }
.kw-product-nav-label { display: flex; justify-content: space-between; margin: 2cqw .6cqw .65cqw; color: #848484; font-size: 1.15cqw; }
.kw-product-project { display: flex; gap: .6cqw; align-items: center; padding: .5cqw .6cqw; white-space: nowrap; }
.kw-product-project > span:last-child { margin-left: auto; color: #888; }
.kw-product-task { padding: .6cqw .65cqw; border-radius: .65cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.2cqw; }
.kw-product-account { display: flex; align-items: center; gap: .6cqw; margin-top: auto; padding: 1cqw .4cqw; border-top: 1px solid #e8e8e8; font-size: 1.2cqw; }
.kw-product-account > span { display: grid; place-items: center; flex-shrink: 0; width: 2.9cqw; height: 2.9cqw; border-radius: 50%; color: #fff; background: #ef5374; font-size: 1.4cqw; }
.kw-product-account small { display: block; color: #919191; font-size: .95cqw; }
.kw-product-main { display: grid; grid-template-columns: 33% minmax(0,1fr); min-width: 0; min-height: 0; }
.kw-product-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid #eaeaea; background: #fff; }
.kw-product-chat > header { display: flex; align-items: center; gap: .6cqw; flex: 0 0 8%; padding: 0 1.3cqw; border-bottom: 1px solid #ededed; white-space: nowrap; }
.kw-product-chat > header b { font-size: 1.4cqw; font-weight: 550; overflow: hidden; text-overflow: ellipsis; }
.kw-product-chat > header svg { color: #929292; }
.kw-product-chat > header > span { margin-left: auto; color: #939393; font-size: 1.8cqw; }
.kw-product-messages { flex: 1; min-height: 0; padding: 1.5cqw 1.3cqw .6cqw; overflow: hidden; font-size: 1.3cqw; line-height: 1.65; }
.kw-product-user,.kw-product-followup { margin-left: 8%; padding: .9cqw 1cqw; border-radius: 1cqw; background: #f3f3f3; color: #3f3f3f; }
.kw-product-answer { margin-top: 1.6cqw; }
.kw-product-answer > small,.kw-product-updated > small { color: #969696; font-size: 1.05cqw; }
.kw-product-answer p,.kw-product-updated p { margin: .6cqw 0; }
.kw-product-file { display: flex; align-items: center; gap: .55cqw; padding: .8cqw; margin-top: .8cqw; border: 1px solid #e8e8e8; border-radius: .7cqw; background: #fff; font-size: 1.07cqw; }
.kw-product-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-product-answer-tools { display: flex; gap: .8cqw; align-items: center; padding-top: .6cqw; color: #aaa; font-size: 1.55cqw; }
.kw-product-answer-tools svg { width: 1.25cqw; height: 1.25cqw; }
.kw-product-followup { display: none; margin-top: 1.5cqw; }
.kw-product-updated { display: none; margin-top: 1.1cqw; }
.kw-product-composer { position: relative; flex: 0 0 21%; margin: .5cqw 1.1cqw 1.3cqw; padding: 1cqw; border: 1px solid #e8e8e8; border-radius: 1.2cqw; box-shadow: 0 3px 8px #00000004; background: #fff; display: flex; flex-direction: column; justify-content: space-between; font-size: 1.2cqw; }
.kw-product-placeholder { color: #919191; }
.kw-product-input { display: none; }
.kw-product-composer footer { display: flex; align-items: center; gap: .4cqw; margin-top: .8cqw; color: #777; }
.kw-product-composer footer > span:first-child { display: grid; place-items: center; width: 2.1cqw; height: 2.1cqw; border: 1px solid #eee; border-radius: 50%; }
.kw-product-composer footer > span:nth-child(2) { margin-left: auto; font-size: .82cqw; white-space: nowrap; }
.kw-product-composer footer > b { display: grid; place-items: center; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; border: 1px solid #ededed; color: #888; }
.kw-product-composer footer svg { width: 1.4cqw; height: 1.4cqw; }
.kw-product-composer > .kw-demo-pointer { right: 5%; bottom: 1%; width: 2.3cqw; height: 3cqw; transform: translate(20px,15px); }
[data-demo-phase="1"] .kw-product-input,[data-demo-phase="2"] .kw-product-input { display: inline; }
[data-demo-phase="1"] .kw-product-placeholder,[data-demo-phase="2"] .kw-product-placeholder { display: none; }
[data-demo-phase="2"] .kw-product-composer > .kw-demo-pointer { opacity: 1; transform: none; }
[data-demo-phase="1"] .kw-product-composer footer > b,[data-demo-phase="2"] .kw-product-composer footer > b { background: #252525; color: #fff; border-color: #252525; }
[data-demo-phase="3"] .kw-product-followup,[data-demo-phase="3"] .kw-product-updated { display: block; }
.kw-demo-dashboard .kw-product-followup,.kw-demo-dashboard .kw-product-updated,.kw-demo-dashboard .kw-product-input { display: none !important; }
.kw-demo-dashboard .kw-product-placeholder { display: inline !important; }
.kw-demo-dashboard .kw-product-composer > .kw-demo-pointer { display: none; }
.kw-product-preview { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #f6f7f9; }
.kw-product-tabs { display: flex; flex: 0 0 8%; align-items: center; gap: .8cqw; padding: 0 .8cqw; background: #fff; border-bottom: 1px solid #eee; color: #848484; }
.kw-product-tabs > span:first-child { display: flex; align-items: center; min-width: 0; gap: .5cqw; max-width: 77%; padding: .5cqw .7cqw; border-radius: .8cqw; background: #f3f3f3; color: #505050; }
.kw-product-tabs b { font-size: 1.12cqw; font-weight: 450; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.kw-product-tabs i { font-style: normal; color: #999; font-size: 1.5cqw; margin-left: .4cqw; }
.kw-product-tabs svg { width: 1.45cqw; height: 1.45cqw; }
.kw-product-tab-tools { display: flex; gap: .8cqw; margin-left: auto; }
.kw-product-toolbar { display: flex; align-items: center; justify-content: space-between; flex: 0 0 6%; padding: 0 1.4cqw; border-bottom: 1px solid #e9eaec; background: #fff; font-size: 1cqw; color: #989ba0; }
.kw-product-toolbar svg { width: 1.5cqw; height: 1.5cqw; }
.kw-product .kw-demo-window { container-type: inline-size; flex: 1; min-height: 0; width: 100%; height: auto; margin: 0; border: none; border-radius: 0; box-shadow: none; backdrop-filter: none; background: transparent; color: #353b43; }
.kw-product .kw-demo-body { padding: 5%; gap: 4%; }
.kw-product-preview .kw-demo-command,.kw-product-preview .kw-demo-result { display: none; }
.kw-product .kw-demo-metrics { flex-basis: 19%; }
.kw-product .kw-demo-metrics > div { border: 1px solid #e5e9ed; background: #fff; border-radius: 1.8cqw; padding: 7% 9%; }
.kw-product .kw-demo-metrics span { font-size: 2.6cqw; }
.kw-product .kw-demo-metrics strong { color: #303b47; font-size: 5.1cqw; }
.kw-product .kw-demo-metrics small { font-size: 2.4cqw; }
.kw-product .kw-demo-chart { background: #fff; border-color: #e6eaee; border-radius: 2cqw; padding: 5% 4%; }
.kw-product .kw-demo-panel-head b { font-size: 3.2cqw; }
.kw-product .kw-demo-panel-head > span { font-size: 2.4cqw; }
.kw-product .kw-demo-chart-legend { font-size: 2.4cqw; margin-top: 4%; }
.kw-product .kw-demo-bar-group > span { font-size: 2.4cqw; background: #fff; }
.kw-product .kw-demo-tooltip { width: 49%; left: 35%; top: 24%; font-size: 2.8cqw; }
.kw-product .kw-demo-summary { flex-basis: 15%; flex-direction: column; align-items: flex-start; justify-content: center; font-size: 2.8cqw; background: #fff; border: 1px solid #e6eaee; gap: 3px; }
.kw-product .kw-demo-summary > span { font-size: 2.4cqw; }
.kw-product .kw-demo-slide-layout { grid-template-columns: 16% minmax(0,1fr); gap: 4%; align-items: start; }
.kw-product .kw-demo-thumbs { height: 100%; padding: 10%; gap: 4%; border: none; background: transparent; }
.kw-product .kw-demo-thumbs > div { flex: 0 0 18%; min-height: 0; border-color: #dce3ea; }
.kw-product .kw-demo-thumbs > span { font-size: 2cqw; }
.kw-product .kw-demo-thumbs small { font-size: 1.5cqw; }
.kw-product .kw-demo-thumbs b { font-size: 2cqw; }
.kw-product .kw-demo-thumbs > div:first-of-type b { font-size: 4cqw; }
.kw-product .kw-demo-thumbs > div:first-of-type > span { font-size: 1.6cqw; }
.kw-product .kw-demo-slide { width: 100%; height: 62%; align-self: center; min-height: 0; border-radius: .4cqw; padding: 6%; box-shadow: 0 4px 12px #24405212; }
.kw-product .kw-demo-slide-kicker { font-size: 2cqw; }
.kw-product .kw-demo-slide h3 { font-size: 5.1cqw; margin-top: 6%; }
.kw-product .kw-demo-slide-chart { width: 100%; margin-top: 6%; padding: 4%; }
.kw-product .kw-demo-slide-chart > div:first-child { font-size: 1.4cqw; }
.kw-product .kw-demo-slide-chart b { font-size: 2.8cqw; }
.kw-product .kw-demo-slide-bars { height: 13cqw; }
.kw-product .kw-demo-slide-bars small { font-size: 1.7cqw; }
.kw-product .kw-demo-slide-page { font-size: 1.7cqw; }
.kw-product .kw-demo-flow-head { flex-basis: 12%; }
.kw-product .kw-demo-flow-head b { font-size: 4cqw; }
.kw-product .kw-demo-flow-head > div > span { font-size: 2.4cqw; }
.kw-product .kw-demo-run { font-size: 2.2cqw; padding: 4px 6px; background: #fff; }
.kw-product .kw-demo-flow { grid-template-columns: repeat(2,1fr); flex-basis: 36%; gap: 7%; }
.kw-product .kw-demo-node { padding: 7%; border-radius: 1.5cqw; border-color: #e1e5e9; }
.kw-product .kw-demo-node > span { font-size: 2cqw; }
.kw-product .kw-demo-node b { font-size: 3cqw; }
.kw-product .kw-demo-node small { font-size: 2cqw; }
.kw-product .kw-demo-node i { font-size: 2.5cqw; }
.kw-product .kw-demo-node:nth-child(2)::after { display: none; }
.kw-product .kw-demo-node::after { width: 16%; }
.kw-product .kw-demo-output { border: 1px solid #e6eaee; background: #fff; border-radius: 1.5cqw; }
.kw-product .kw-demo-table > div { font-size: 2.5cqw; gap: 4px; }
.kw-product .kw-demo-table > div:first-child { font-size: 2.1cqw; }
.kw-product .kw-demo-table em { font-size: 2.1cqw; padding: 1px 3px; }
.kw-product .kw-demo-document-layout { display: block; }
.kw-product .kw-demo-doc-outline { display: none; }
.kw-product .kw-demo-paper { height: 100%; padding: 8%; border-radius: .3cqw; border-color: #e4e6e8; box-shadow: 0 2px 8px #00000006; }
.kw-product .kw-demo-paper-kicker { font-size: 2cqw; }
.kw-product .kw-demo-paper h3 { font-size: 4.5cqw; margin: 10% 0 5%; }
.kw-product .kw-demo-paper > p { font-size: 2.6cqw; }
.kw-product .kw-demo-compare { margin-top: 8%; padding: 7% 0; }
.kw-product .kw-demo-compare span { font-size: 2.4cqw; }
.kw-product .kw-demo-compare strong { font-size: 3.6cqw; }
.kw-product .kw-demo-paper .kw-demo-paper-note { font-size: 2.5cqw; }
.kw-product .kw-demo-review { font-size: 2.6cqw; background: #fafbfd; border-color: #e2e7ee; border-radius: .6cqw; }
.kw-product .kw-demo-review small { font-size: 2.2cqw; }
.kw-product .kw-demo-pointer { width: 4cqw; height: 5cqw; }
@container outcomes-canvas (max-width: 540px) {
  .kw-product { grid-template-columns: 16% minmax(0,1fr); }
}
@container outcomes-canvas (max-width: 540px) {
  .kw-product { width: 90%; height: 86%; display: block; border-radius: 3cqw; }
  .kw-product-sidebar { display: none; }
  .kw-product-main { display: flex; flex-direction: column-reverse; height: 100%; }
  .kw-product-preview { flex: 1; min-height: 0; }
  .kw-product-tabs { flex-basis: 12%; min-height: 22px; padding: 0 3cqw; gap: 2cqw; }
  .kw-product-tabs b { font-size: 2.4cqw; }
  .kw-product-tabs svg { width: 3cqw; height: 3cqw; }
  .kw-product-tabs i { font-size: 3cqw; }
  .kw-product-tabs > span:first-child { padding: .7cqw 1.5cqw; border-radius: 1.4cqw; gap: 1cqw; }
  .kw-product-toolbar { display: none; }
  .kw-product-chat { flex: 0 0 22%; border-right: 0; border-top: 1px solid #eee; }
  .kw-product-chat > header,.kw-product-messages { display: none; }
  .kw-product-composer { flex: 1; margin: 2cqw; padding: 1.5cqw 2cqw; border-radius: 2cqw; font-size: 2.5cqw; }
  .kw-product-composer footer { margin-top: 1cqw; }
  .kw-product-composer footer > span:first-child { width: 3.8cqw; height: 3.8cqw; }
  .kw-product-composer footer > span:nth-child(2) { font-size: 2cqw; }
  .kw-product-composer footer > b { width: 3.8cqw; height: 3.8cqw; }
  .kw-product-composer footer svg { width: 2.6cqw; height: 2.6cqw; }
  .kw-demo-dashboard .kw-product-chat,.kw-demo-workflow .kw-product-chat { display: none; }
  .kw-product .kw-demo-body { padding: 4%; gap: 4%; }
  .kw-product .kw-demo-metrics { flex-basis: 25%; }
  .kw-product .kw-demo-summary { display: none; }
  .kw-product .kw-demo-thumbs { display: none; }
  .kw-product .kw-demo-slide-layout { display: block; }
  .kw-product .kw-demo-slide { height: 100%; padding: 4% 5%; }
  .kw-product .kw-demo-slide h3 { font-size: 6cqw; margin-top: 3%; }
  .kw-product .kw-demo-slide-chart { position: absolute; width: 38%; right: 4%; bottom: 8%; padding: 3%; }
  .kw-product .kw-demo-slide-chart > div:first-child { font-size: 2.1cqw; }
  .kw-product .kw-demo-slide-chart b { font-size: 3.4cqw; }
  .kw-product .kw-demo-slide-bars { height: 8cqw; }
  .kw-product .kw-demo-slide-page { font-size: 2cqw; }
  .kw-product .kw-demo-flow-head { flex-basis: 14%; }
  .kw-product .kw-demo-flow { flex-basis: 38%; }
  .kw-product .kw-demo-paper { padding: 4% 6%; }
  .kw-product .kw-demo-paper h3 { font-size: 4.2cqw; margin: 0 0 3%; }
  .kw-product .kw-demo-compare { margin-top: 2%; padding: 2% 0; }
  .kw-product .kw-demo-paper-kicker,.kw-product .kw-demo-paper-note { display: none; }
  .kw-product .kw-demo-review { padding: 3%; }
  .kw-product .kw-demo-review p { margin-top: 3px; min-height: 1.5em; }
}
/* Keep slides in their real landscape format inside the product preview. */
.kw-product .kw-demo-slide { display: block; height: auto; aspect-ratio: 16 / 9; padding: 0; }
.kw-product .kw-demo-slide-kicker { position: absolute; left: 6%; top: 7%; font-size: 1.7cqw; }
.kw-product .kw-demo-slide h3 { position: absolute; left: 6%; top: 21%; margin: 0; min-height: 0; font-size: 4.2cqw; line-height: 1.16; }
.kw-product .kw-demo-slide-chart { position: absolute; left: 6%; right: auto; bottom: 9%; width: 80%; height: 31%; margin: 0; padding: 3%; display: flex; flex-direction: column; }
.kw-product .kw-demo-slide-bars { flex: 1; min-height: 0; height: auto; padding-top: 3%; }
.kw-product .kw-demo-slide-bars small { display: none; }
.kw-product .kw-demo-slide-page { position: absolute; bottom: 3%; right: 5%; padding: 0; margin: 0; font-size: 1.4cqw; }
@container outcomes-canvas (max-width: 540px) {
  .kw-product .kw-demo-slide-layout { display: flex; align-items: center; }
  .kw-product .kw-demo-slide { height: auto; padding: 0; }
  .kw-product .kw-demo-slide h3 { font-size: 5.3cqw; top: 21%; margin: 0; }
  .kw-product .kw-demo-slide-kicker { font-size: 2.2cqw; }
  .kw-product .kw-demo-slide-chart { width: 76%; height: 31%; bottom: 9%; right: auto; padding: 3%; }
  .kw-product .kw-demo-slide-chart > div:first-child { flex-direction: row; font-size: 1.7cqw; }
  .kw-product .kw-demo-slide-chart b { font-size: 2.7cqw; }
}

/* Consistent copy rows: reserve the longest paragraph without clipping text. */
#platform .kw-howworks__items { overflow-anchor: none; }
#platform .kw-hw-item > h3 { border-radius: inherit; }
#platform .kw-hw-item { transition: background-color .22s ease, box-shadow .22s ease; }
@media (width > 980px) {
  #platform .kw-howworks__items { height: auto; }
  #platform .kw-hw-stage { height: auto; }
  #platform .kw-hw-item { flex: 0 0 clamp(68px, 6vw, 108px); }
  #platform .kw-hw-item.is-active {
    display: flex; flex-direction: column; flex: 1 0 auto;
    min-height: calc(180px + var(--outcome-description-height, 94px) + var(--outcome-value-height, 30px));
  }
  #platform .kw-hw-item.is-active > h3 { flex: 0 0 80px; }
  #platform .kw-hw-item.is-active .kw-hw-trigger { height: 80px; padding: 24px 36px 16px; }
  #platform .kw-hw-detail {
    top: 0; bottom: auto; left: 36px; right: 36px;
    gap: 16px; justify-content: flex-end;
  }
  #platform .kw-hw-item.is-active .kw-hw-detail {
    position: static; flex: 1; width: auto;
    margin: 0 36px; padding: 20px 0 44px; transition-delay: .12s;
  }
  #platform .kw-hw-detail .kw-hw-description {
    width: 100%; max-width: none; margin: 0;
    min-height: var(--outcome-description-height, 0px);
    font-size: clamp(15px, 1.3vw, 19px); line-height: 1.65;
  }
  #platform .kw-hw-detail .kw-hw-value {
    max-width: none; margin: 0; padding-top: 14px;
    min-height: calc(15px + var(--outcome-value-height, 0px));
    font-size: clamp(14px, 1.15vw, 17px); line-height: 1.6;
  }
  #platform .kw-hw-indicator { right: 36px; bottom: 18px; }
}
@media (max-width: 980px) {
  #platform .kw-hw-trigger { scroll-margin-top: 100px; }
  #platform .kw-hw-detail { padding: 8px 25px 26px; }
  #platform .kw-hw-item.is-active .kw-hw-detail { display: flex; flex-direction: column; gap: 16px; }
  #platform .kw-hw-detail .kw-hw-description { margin: 0; min-height: 0; max-width: none; font-size: 16px; line-height: 1.65; }
  #platform .kw-hw-detail .kw-hw-value { margin: 0; min-height: 0; max-width: none; padding-top: 14px; font-size: 15px; line-height: 1.6; }
  #platform .kw-hw-mobile-stage { flex: none; margin-top: 8px; }
}

/* Desktop copy uses the same 1920 reference geometry at every desktop width.
   The outer frame participates in grid layout; only its fixed inner canvas scales. */
@media (width > 980px) {
  #platform .kw-hw-copy-frame { position: relative; min-width: 0; aspect-ratio: 541.12 / 679.138462; }
  #platform .kw-hw-copy-frame .kw-howworks__items {
    position: absolute; inset: 0 auto auto 0; width: 541.12px; height: 679.138462px;
    gap: 12px; transform: scale(var(--outcome-copy-scale, 1)); transform-origin: top left;
  }
  #platform .kw-hw-item { flex: 0 0 108px; border-radius: 18px; }
  #platform .kw-hw-item.is-active { flex: 1 0 auto; box-shadow: 0 0 0 11px #f3f3f4 inset, 0 2px 0 #ededee; }
  #platform .kw-hw-trigger { padding: 13px 36px 13px 28px; gap: 15px; border-radius: inherit; }
  #platform .kw-hw-name { font-size: 26px; }
  #platform .kw-hw-detail .kw-hw-description { font-size: 19px; }
  #platform .kw-hw-detail .kw-hw-value { font-size: 17px; }
}