/* A product-sized preview, with one continuous illustrative app session. */
.product-preview { position: relative; margin-top: 0; padding-bottom: 40px; isolation: isolate; scroll-margin-top: 100px; }
.product-preview::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -80px -32px 0; background: radial-gradient(ellipse at 50% 35%, var(--comparison-bg), transparent 68%); opacity: .16; filter: blur(40px); }
.product-app { --app-bg: #171614; --app-panel: #25231f; --app-text: #f5f1e9; --app-muted: #b5afa4; background: var(--app-bg); color: var(--app-text); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 90px #0002; }
.product-app [hidden] { display: none !important; }
.demo-window-bar { height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 20px; background: #ffffff08; font-size: 12px; color: var(--app-muted); }
.demo-window-dots { letter-spacing: 4px; color: #b6a18d; font-size: 10px; }
.demo-preview-badge { margin-left: auto; font-size: 10px; padding: 3px 7px; background: #ffffff0b; border-radius: 4px; }
/* One persistent conversation and evidence surface, rather than six slides. */
.demo-app-body { height: 430px; position: relative; }
.demo-session-viewport { position: absolute; inset: 0; overflow: hidden; mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 10px), transparent); }
.demo-session-track { position: absolute; inset: 0; display: flex; flex-direction: column; }
.demo-session { flex: 0 0 100%; min-height: 100%; width: 100%; position: relative; }
.demo-content { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 42px; padding: 28px 36px; }
.demo-thread { min-width: 0; position: relative; }
.demo-composer { position: relative; margin: 0 0 22px auto; width: 100%; padding: 16px 52px 16px 18px; border-radius: 16px; background: #ffffff0c; transform: translateY(calc(90px * (1 - var(--demo-request-sent, 0)))) ; }
.demo-prompt-label, .demo-agent-name { font-size: 11px; color: var(--app-muted); }
.demo-prompt-label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.demo-prompt-label .map-icon { width: 16px; height: 16px; }
.demo-typed-line { min-height: 24px; margin: 0; color: var(--app-text); font-size: 15px; line-height: 1.6; }
.demo-caret { display: inline-block; height: 1em; vertical-align: -.1em; border-left: 1px solid currentColor; margin-left: 2px; }
[data-demo-running] .demo-caret { animation: demo-caret .8s step-end infinite; }
.demo-session:not([data-phase="0"]) .demo-composer .demo-caret { display: none; }
.demo-send { position: absolute; right: 14px; bottom: 15px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #d3c6b5; color: #211c17; font-size: 19px; opacity: calc(1 - var(--demo-request-sent, 0)); }
.demo-agent-response { display: flex; align-items: flex-start; gap: 10px; opacity: var(--demo-request-sent, 0); transform: translateY(calc(12px * (1 - var(--demo-request-sent, 0)))); }
.demo-agent-response > .map-icon { width: 18px; height: 18px; color: #d3c6b5; flex-shrink: 0; }
.demo-response-line { color: var(--app-text); font-size: 14px; line-height: 1.65; margin: 8px 0 0; min-height: 46px; }
.demo-dossier { min-width: 0; opacity: var(--demo-request-sent, 0); transform: translateY(calc(24px * (1 - var(--demo-request-sent, 0)))); }
.demo-package { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 6px 0 20px; }
.demo-package > .ecosystem { flex-shrink: 0; width: 36px; height: 36px; }
.demo-package > div { display: grid; gap: 6px; font-size: 19px; }
.demo-package small { color: var(--app-muted); font-size: 11px; }
.demo-package-state { width: 100%; font-size: 11px; color: #b8cdbf; padding-left: 48px; }
.demo-evidence { opacity: var(--demo-detail-open, 0); transform: translateY(calc(14px * (1 - var(--demo-detail-open, 0)))); }
.demo-evidence-title { font-size: 11px; color: var(--app-muted); margin-bottom: 12px; }
.demo-evidence-check { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: 12px; color: var(--app-muted); }
.demo-evidence-check > .map-icon { width: 17px; height: 17px; }
.demo-check-mark { margin-left: auto; opacity: .15; }
.demo-evidence-check[data-checked] { color: var(--app-text); }
.demo-evidence-check[data-checked] .demo-check-mark { opacity: 1; color: #a8cbb5; }
.demo-human-action { position: relative; margin-top: 20px; opacity: 0; }
.demo-session:is([data-phase="3"], [data-phase="4"], [data-phase="5"]) .demo-human-action { opacity: 1; }
.demo-approval-action { display: inline-block; padding: 10px 14px; background: #d3c6b5; color: #211c17; border-radius: 8px; font-size: 12px; }
.demo-session[data-approved] .demo-approval-action { background: #adc7b51a; color: #b8d4c2; }
.demo-cursor { position: absolute; right: 12px; top: 28px; width: 22px; height: 22px; color: white; filter: drop-shadow(0 2px 3px #0008); opacity: 0; }
[data-demo-ready] .demo-session[data-phase="3"]:not([data-approved]) .demo-cursor { animation: demo-cursor 4.4s ease both; opacity: 1; }
.demo-tool-trace { position: absolute; top: 176px; left: 28px; right: 0; font-size: 12px; color: var(--app-muted); opacity: var(--demo-request-sent, 0); }
.demo-tool-trace > div { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.demo-event-mark { color: #a8cbb5; opacity: .15; }
[data-completed] .demo-event-mark { opacity: 1; }
.demo-session:is([data-phase="4"], [data-phase="5"]) .demo-tool-trace { font-size: 10px; }
.demo-terminal { position: absolute; left: 0; right: 0; top: 214px; margin-top: 0; padding: 15px 18px; background: #0d0e10; border-radius: 10px; text-align: left; opacity: var(--demo-terminal-open, 0); transform: translateY(calc(22px * (1 - var(--demo-terminal-open, 0)))); }
.demo-terminal > div { display: flex; justify-content: space-between; color: var(--app-muted); font-size: 10px; }
.demo-terminal code { background: transparent; color: inherit; padding: 0; border: 0; border-radius: 0; font-size: inherit; }
.demo-terminal pre { background: transparent; color: var(--app-text); padding: 0; border: 0; margin: 12px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono, 'Geist Mono', monospace); font-size: 11px; line-height: 1.9; }
.demo-terminal-line, .demo-install-prompt { color: var(--app-muted); }
.demo-install-prompt { font-family: var(--font-sans, 'Geist', sans-serif); font-size: 12px; }
.demo-install-success { color: #a8cbb5; }
.demo-session:not([data-phase="4"]) .demo-terminal .demo-caret { display: none; }
.demo-record-bar { min-height: 32px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; font-size: 10px; color: var(--app-muted); }
.demo-completed-record { display: flex; align-items: center; gap: 6px; color: #a8cbb5; }
.demo-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 16px 8px; position: relative; }
.demo-controls button { border: 0; background: transparent; color: var(--app-muted); font: inherit; font-size: 11px; min-height: 44px; padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.demo-controls button:hover, .demo-controls button[aria-current] { color: var(--app-text); background: #ffffff0c; }
.demo-controls button:focus-visible { outline: 2px solid var(--app-text); outline-offset: 3px; }
.demo-controls button:disabled { cursor: default; opacity: .4; }
.demo-step-controls, .demo-playback { display: flex; gap: 4px; }
.demo-progress { position: absolute; bottom: 0; height: 2px; left: 0; right: 0; background: #ffffff08; }
.demo-progress span { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--demo-progress, 0)); background: #c5aa8d; }
.demo-session[data-pose-ready] :is(.demo-composer, .demo-agent-response, .demo-dossier, .demo-evidence, .demo-terminal, .demo-tool-trace) { transition: transform 800ms cubic-bezier(.22,1,.36,1), opacity 650ms ease; }
[data-demo-ready]:not([data-demo-running]) :is(.demo-cursor, .demo-caret) { animation-play-state: paused !important; }
/* Same four-card rhythm as the reference, using our own product story and graphics. */
.product-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; text-align: left; }
.product-feature { padding: 32px; background: var(--surface); border-radius: 18px; min-width: 0; overflow: hidden; }
html[data-theme="light"] .product-feature { --scene-success: #2f7451; }
.product-feature > h3 { font-size: 23px; line-height: 1.4; margin: 0 0 12px; text-wrap: balance; }
.product-feature > p { font-size: 15px; margin-bottom: 12px; }
/* A fixed vertical baseline; scrolling gathers the header into a narrower capsule. */
body:has([data-product-demo]) .site-header { background: transparent; backdrop-filter: none; }
body:has([data-product-demo]) .nav-inner { isolation: isolate; padding-inline: 0; }
body:has([data-product-demo]) .site-header[data-compact] .nav-inner { width: min(980px, calc(100% - 64px)); padding-inline: 16px 6px; }
body:has([data-product-demo]) .nav-inner::before { content: ""; position: absolute; inset: 8px 0; z-index: -1; border-radius: 999px; background: color-mix(in srgb, var(--bg) 50%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 4px 20px #00000008; opacity: 0; pointer-events: none; }
body:has([data-product-demo]) .site-header[data-compact] .nav-inner::before { opacity: 1; }
body:has([data-product-demo]) .site-header[data-scroll-motion] .nav-inner { transition: width 300ms ease, padding 300ms ease; }
body:has([data-product-demo]) .site-header[data-scroll-motion] .nav-inner::before { transition: opacity 300ms ease; }
@media (max-width: 900px) {
 /* The 20px SVG has 8/3px after its stroked path; both visible edges sit 16px inside. */
 body:has([data-product-demo]) .site-header[data-compact] .nav-inner { width: calc(100% - 48px); padding-inline: 16px calc(16px - 8px / 3); }
 body:has([data-product-demo]) .nav-inner::before { inset-block: 5px; }
}
@media (max-width: 900px) {
  .demo-content { grid-template-columns: minmax(0, 1fr) 225px; gap: 24px; padding: 24px; }
  .demo-typed-line { font-size: 14px; }
}
@media (max-width: 760px) {
  .product-preview { margin-top: 0; padding-bottom: 12px; }
  .product-preview::before { inset: -50px 0 0; }
  .demo-window-bar { padding-inline: 16px; }
  .demo-app-body { height: 520px; }
  .demo-content { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
  .demo-thread { display: contents; }
  .demo-composer { padding: 14px 42px 14px 14px; margin: 0; order: 1; transform: translateY(calc(80px * (1 - var(--demo-request-sent, 0)))); }
  .demo-prompt-label { margin-bottom: 6px; }
  .demo-typed-line { font-size: 13px; }
  .demo-agent-response { order: 2; }
  .demo-response-line { font-size: 12px; margin-top: 6px; min-height: 30px; }
  .demo-tool-trace { display: none; }
  .demo-dossier { position: static; order: 3; }
  .demo-package { padding: 0; gap: 10px; }
  .demo-package > div { font-size: 16px; gap: 4px; }
  .demo-package > .ecosystem { width: 28px; height: 28px; }
  .demo-package-state { width: auto; padding: 0; margin-left: auto; font-size: 10px; max-width: 90px; }
  .demo-evidence { margin-top: 14px; }
  .demo-evidence-title { display: none; }
  .demo-evidence-check { min-height: 26px; font-size: 11px; }
  .demo-human-action { margin-top: 8px; }
  .demo-approval-action { padding: 8px 12px; font-size: 11px; }
  .demo-terminal { position: static; order: 4; margin: 0; padding: 12px; }
  .demo-terminal pre { font-size: 10px; line-height: 1.8; margin-top: 8px; }
  .demo-install-prompt { font-size: 11px; }
  .demo-record-bar { padding: 4px 16px; min-height: 46px; font-size: 9px; }
  .demo-controls { padding: 4px 8px 8px; }
  .demo-controls button { font-size: 10px; padding: 8px; }
  .demo-step-controls { width: 100%; justify-content: space-between; }
  .demo-playback { margin-left: auto; }
  .product-features { grid-template-columns: 1fr; gap: 20px; }
  .product-feature { padding: 24px; }
  .product-feature > h3 { font-size: 21px; }
  .product-feature > p { font-size: 13px; }
}
@media (max-width: 360px) {
  .demo-app-body { height: 570px; }
}
@media (prefers-reduced-motion: reduce) {
 body:has([data-product-demo]) .site-header[data-scroll-motion] .nav-inner,
 body:has([data-product-demo]) .site-header[data-scroll-motion] .nav-inner::before { transition: none; }
}
@keyframes demo-caret { 50% { opacity: 0; } }
@keyframes demo-cursor { 0%, 18% { transform: translate(25px, 18px); } 48%, 68% { transform: translate(-15px, -28px); } 74% { transform: translate(-15px, -28px) scale(.85); } 85%, 100% { transform: translate(-15px, -28px); } }
@keyframes demo-line { 0%, 15% { opacity: 0; } 28%, 100% { opacity: 1; } }
@keyframes demo-view-enter { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html[lang="ko"] :is(.product-preview h2, .product-preview h3, .product-preview p, .product-feature h3, .product-feature p) { word-break: keep-all; overflow-wrap: break-word; }
@media (prefers-reduced-motion: reduce) {
  [data-product-demo] *, body:has([data-product-demo]) .nav-inner { animation: none !important; transition: none !important; }
}

.product-app :is([data-demo-announcement], .demo-sr-only) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body:has([data-product-demo]) .site-header[data-compact] .nav-action { background: var(--primary); color: var(--on-primary); }

/* Keep the cake renderer intact; give the opening composition room for the app window. */
body:has([data-product-demo]) .hero-stage { --cake-reference-height: clamp(460px, calc(66svh - 64px), 680px); min-height: var(--cake-reference-height); }
/* The artwork spans the opening viewport independently of the shorter copy stage. */
body:has([data-product-demo]) .hero-art {
  top: calc(-1 * var(--hero-header-height));
  bottom: auto;
  height: 100svh;
}
body:has([data-product-demo]) .logo-fallback {
  width: calc(min(540px, var(--cake-reference-height) * .72, 95cqw) * 680 / 410.4);
  height: calc(min(540px, var(--cake-reference-height) * .72, 95cqw) * 570 / 410.4);
}
@media (max-width: 760px) {
  body:has([data-product-demo]) .hero-stage { --cake-reference-height: clamp(430px, calc(66svh - 60px), 600px); }
}
.product-feature { display: flex; flex-direction: column; }
.product-feature > h3 { font-weight: 400; font-size: 24px; letter-spacing: -.025em; }
.product-feature > p { font-size: 15px; margin-bottom: 20px; }
.comparison-accessible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ecosystem { display: inline-grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 9px; border-radius: 12px; background: #4589c31c; color: #4589c3; }
.ecosystem-icon { width: 100%; height: 100%; fill: currentColor; }
.ecosystem-npm { color: #e46161; background: #d458581a; }
.ecosystem-ubuntu { color: #ec7953; background: #e65d291a; }

.agent-examples { max-width:960px;margin:auto;background:var(--surface);border-radius:24px;padding:30px 40px;color:var(--text); }
.agent-example-toolbar { display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px; }
.agent-example-toolbar .cc-product-icon { width:21px;height:21px; }
.agent-example-choices { display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 34px; }
.agent-example-choices button { border:0;border-radius:999px;padding:10px 15px;background:transparent;color:var(--muted);font:inherit;font-size:14px;cursor:pointer; }
.agent-example-choices button:hover,.agent-example-choices button[aria-pressed="true"] { background:var(--bg);color:var(--text); }
.agent-example-choices button:focus-visible { outline:2px solid var(--focus);outline-offset:3px; }
.agent-example-output { min-height:250px; }
.agent-example-panel[hidden] { display:none; }
.agent-example-question { margin-left:auto;max-width:85%;width:fit-content;padding:16px 22px;border-radius:22px;background:var(--bg);font-size:25px;line-height:1.4;letter-spacing:-.025em; }
.agent-example-answer { display:flex;align-items:flex-start;gap:14px;margin-top:28px;font-size:19px;line-height:1.65; }
.agent-example-answer > .cc-product-icon { width:24px;height:24px;flex:0 0 24px;margin-top:4px; }
.agent-example-answer p { margin:0;max-width:640px; }
.agent-example-reference { display:flex;align-items:center;gap:12px;margin:22px 0 10px 38px;font-size:20px; }
.agent-example-reference > .cc-product-file-icon { width:38px;height:38px;flex:0 0 38px; }
.agent-example-reference small { display:block;font-size:14px;line-height:1.5;margin-top:5px;color:var(--muted); }
.toolchain-band { max-width:960px;margin:32px auto 0;text-align:center;color:var(--muted); }
.toolchain-caption { font-size:15px; }
.toolchain-band > div { display:flex;justify-content:center;flex-wrap:wrap;gap:12px 25px;margin-top:20px;font-size:18px;color:var(--text); }
@media(max-width:760px) {
 .agent-examples { padding:24px 20px;border-radius:20px; }
 .agent-example-choices { gap:4px;margin:22px -5px 28px; }
 .agent-example-choices button { padding:9px 10px;font-size:13px; }
 .agent-example-output { min-height:320px; }
 .agent-example-question { max-width:95%;font-size:22px;padding:14px 17px; }
 .agent-example-answer { font-size:17px;gap:10px; }
 .agent-example-reference { margin-left:0;font-size:18px; }
 .toolchain-band > div { gap:12px 20px;font-size:16px; }
}

html[lang="ko"] #supply-workflow .home-heading, html[lang="ko"] #verified-workflows .home-heading, html[lang="ko"] .agent-example-panel { word-break:keep-all;overflow-wrap:break-word; }