.hfc-demo-section{background:#edf0f5;color:#26364b;border-top:1px solid #cfd6e2;border-bottom:1px solid #cfd6e2}
.hfc-demo-section .eyebrow{color:#6877ad}.hfc-demo-section .intro{color:#68758a;max-width:650px}.hfc-demo-section [hidden]{display:none!important}.hfc-demo-section .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.hfc-demo-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:35px;align-items:start;max-width:1120px;margin-top:42px}
.hfc-demo-scenes{display:flex;flex-direction:column;gap:12px;padding-top:9px}.hfc-demo-scene{display:flex;gap:15px;align-items:flex-start;text-align:left;border:1px solid transparent;background:transparent;border-radius:9px;padding:17px 13px;width:100%;color:#67748b;cursor:pointer;line-height:1.5}.hfc-demo-scene:hover{background:#e1e6ef}.hfc-demo-scene.is-active{background:#fff;border-color:#d2d9e8;box-shadow:0 5px 18px #25345408;color:#26364b}.hfc-demo-number{font-family:ui-monospace,monospace;font-size:10px;padding-top:3px;color:#8390b4}.hfc-demo-scene strong{display:block;font-size:13px;font-weight:600;letter-spacing:-.1px}.hfc-demo-scene small{display:block;font-size:11px;color:#8490a3;margin-top:5px;line-height:1.6}.hfc-demo-rail-note{padding:14px 12px;font-size:11px;line-height:1.7;color:#8490a3;margin:10px 0}
.hfc-demo-window{--demo-paper:#fff;--demo-soft:#f7f8fa;--demo-line:#e6e9ee;--demo-ink:#293345;--demo-muted:#8892a3;--demo-accent:#547766;min-width:0;margin:0;border:1px solid #ced5e1;border-radius:13px;overflow:hidden;background:var(--demo-paper);color:var(--demo-ink);box-shadow:0 18px 60px #2634480d}
.hfc-demo-layout[data-host=claude] .hfc-demo-window{--demo-paper:#fffdf9;--demo-soft:#f5f1eb;--demo-line:#e6e0d6;--demo-ink:#3a352e;--demo-muted:#908679;--demo-accent:#bc7350}
.hfc-demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--demo-soft);padding:11px 14px;border-bottom:1px solid var(--demo-line)}
.hfc-demo-hosts{display:flex;align-items:center;gap:4px}.hfc-demo-hosts button{display:flex;align-items:center;gap:7px;border:1px solid transparent;background:transparent;color:var(--demo-muted);padding:7px 11px;font-size:11px;line-height:1.4;border-radius:6px;cursor:pointer}.hfc-demo-hosts button[aria-selected=true]{border-color:var(--demo-line);background:var(--demo-paper);color:var(--demo-ink);box-shadow:0 1px 3px #00000004}.hfc-host-symbol{font-size:15px;line-height:1}.hfc-chatgpt-symbol{color:#467c68}.hfc-claude-symbol{color:#bf7658}
.hfc-demo-playback{display:flex;gap:6px}.hfc-demo-playback button{display:flex;align-items:center;gap:5px;background:transparent;border:1px solid var(--demo-line);color:var(--demo-muted);font-size:9px;line-height:1.4;padding:6px 8px;border-radius:5px;cursor:pointer;min-height:28px}.hfc-demo-playback button:hover{color:var(--demo-ink);background:var(--demo-paper)}
.hfc-demo-disclosure{display:flex;align-items:center;gap:7px;padding:8px 20px;background:#f6f2e9;color:#91774a;font-size:9px;line-height:1.5;border-bottom:1px solid #eee8db}.hfc-demo-fiction-dot{width:5px;height:5px;border-radius:50%;background:#bbaa7c;flex-shrink:0}
.hfc-demo-panel{outline-offset:-3px}.hfc-demo-chat-header{display:flex;gap:9px;align-items:center;padding:16px 21px;border-bottom:1px solid var(--demo-line);font-size:9px;color:var(--demo-muted)}.hfc-demo-chat-header>strong{color:var(--demo-ink);font-size:12px;font-weight:600}.hfc-demo-chat-header>span:nth-child(2){font-size:8px;padding-left:8px;border-left:1px solid var(--demo-line)}.hfc-demo-connection{display:flex;align-items:center;gap:5px;margin-left:auto;font-size:8px;white-space:nowrap}
.hfc-demo-thread{padding:22px 26px;min-height:499px}.hfc-demo-user{max-width:88%;margin-left:auto;margin-bottom:24px;padding:11px 15px;background:#f1f3f6;border:1px solid #e8ecf1;border-radius:12px 12px 3px 12px;font-size:12px;line-height:1.65}.hfc-demo-user>span{display:block;font-size:8px;color:#94a0af;margin-bottom:2px}.hfc-demo-user p{margin:0;min-height:20px;color:var(--demo-ink)}
.hfc-demo-layout[data-host=claude] .hfc-demo-user{background:#efebe4;border-color:#e8e1d6;border-radius:9px}.hfc-demo-agent{display:flex;align-items:flex-start;gap:12px;min-width:0}.hfc-demo-agent-symbol{display:grid;place-content:center;flex-shrink:0;width:25px;height:25px;border:1px solid #e3ebe5;border-radius:7px;background:#eef5f0;color:#537a61;font-size:17px;line-height:1;margin-top:1px}.hfc-demo-layout[data-host=claude] .hfc-demo-agent-symbol{border:0;border-radius:50%;background:#f4e6dc;color:#bd7754;font-size:23px}.hfc-demo-agent-body{flex:1;min-width:0}
.hfc-demo-thinking{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--demo-muted);margin:5px 0 17px}.hfc-demo-thinking>span{display:inline-flex;gap:3px}.hfc-demo-thinking i{display:block;width:3px;height:3px;border-radius:50%;background:var(--demo-muted);animation:hfc-demo-think 1.2s infinite}.hfc-demo-thinking i:nth-child(2){animation-delay:.15s}.hfc-demo-thinking i:nth-child(3){animation-delay:.3s}@keyframes hfc-demo-think{50%{opacity:.3;transform:translateY(-2px)}}.hfc-demo-layout[data-paused=true] .hfc-demo-thinking i{animation-play-state:paused}
.hfc-demo-tools{background:var(--demo-soft);border:1px solid var(--demo-line);border-radius:7px;overflow:hidden;margin-bottom:14px}.hfc-demo-tools-heading{display:flex;align-items:center;gap:7px;padding:10px 12px;border-bottom:1px solid var(--demo-line);font-size:9px}.hfc-demo-tools-heading strong{font-weight:600}.hfc-demo-tools-heading>span{margin-left:auto;font-size:8px;color:var(--demo-muted)}.hfc-demo-tools ol{list-style:none;padding:4px 12px;margin:0}.hfc-demo-tools li{display:flex;gap:9px;align-items:center;padding:8px 0;font-size:10px;line-height:1.4}.hfc-demo-tools li+li{border-top:1px solid var(--demo-line)}.hfc-demo-step-dot{width:15px;height:15px;flex-shrink:0;display:grid;place-content:center;color:#7c9985;border:1px solid #d6e1d9;background:#edf3ee;border-radius:50%;font-size:8px}.hfc-demo-tools li[data-state=running] .hfc-demo-step-dot{background:#fff6e3;color:#ab8851;border-color:#e5d6b5}.hfc-demo-tools li code{display:block;font-family:ui-monospace,monospace;font-size:8px;color:var(--demo-muted);margin-top:3px;overflow-wrap:anywhere}.hfc-demo-tools li small{font-size:8px;color:var(--demo-muted);margin-left:auto;padding:2px 5px;border:1px solid var(--demo-line);border-radius:4px;white-space:nowrap}
.hfc-demo-reply{font-size:12px;line-height:1.8;color:var(--demo-ink);margin:0 0 16px}.hfc-demo-layout[data-host=claude] .hfc-demo-reply{font-family:Georgia,'Times New Roman',serif;font-size:14px;line-height:1.7}
.hfc-demo-app{background:#fff;border:1px solid #d7dfeb;border-radius:8px;overflow:hidden;color:#31425d;box-shadow:0 4px 16px #263b5e05;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}.hfc-demo-app-heading{display:flex;align-items:center;gap:9px;padding:13px 14px;border-bottom:1px solid #e8edf4;background:#f9fafc}.hfc-demo-app-heading strong{display:block;font-size:11px;font-weight:600}.hfc-demo-app-heading small{display:block;font-size:7px;color:#93a0b3;margin-top:2px}.hfc-demo-app-tag{margin-left:auto;padding:3px 6px;border-radius:4px;border:1px solid #dce4f0;background:#fff;color:#8997b5;font-size:7px;white-space:nowrap}
.hfc-demo-org-grid{padding:7px 12px}.hfc-demo-org-card{display:flex;align-items:center;gap:10px;padding:12px 4px;width:100%;text-align:left;background:#fff;color:#31425d;border:0;font:inherit;line-height:1.45;border-radius:4px}.hfc-demo-org-card+ .hfc-demo-org-card{border-top:1px solid #edf0f6}.hfc-demo-org-card strong{display:block;font-size:11px;font-weight:600}.hfc-demo-org-card small{display:block;font-size:8px;color:#8d9bb1;margin-top:3px}.hfc-demo-org-card button{font:inherit}.hfc-demo-cloud{display:grid;place-content:center;flex-shrink:0;width:31px;height:31px;border-radius:6px;background:#eef1fb;color:#8a97cd;font-size:20px}.hfc-demo-connected,.hfc-demo-separate{margin-left:auto;font-size:7px;padding:3px 6px;border-radius:4px;background:#f0f5ec;color:#889a70;white-space:nowrap}.hfc-demo-separate{background:#f7f0e7;color:#ad987a}.hfc-demo-unconnected .hfc-demo-cloud{background:#f2f4f8;color:#acb5c9}.hfc-demo-org-card[data-demo-org]{cursor:pointer}.hfc-demo-org-card[data-demo-org]:hover{background:#f7f9fd}.hfc-demo-app-note{font-size:8px;color:#929fb3;line-height:1.65;padding:0 14px 12px;margin:2px 0 0}.hfc-demo-app-notice{margin:0 12px 10px;padding:9px 10px;border:1px solid #e0e6f1;border-radius:5px;background:#f7f9fd;color:#7788a4;font-size:9px;line-height:1.6}
.hfc-demo-lead-toolbar{padding:11px 14px;display:flex;align-items:center;gap:10px}.hfc-demo-lead-toolbar label{flex:1;min-width:0}.hfc-demo-lead-toolbar input{width:100%;min-width:0;border:1px solid #dce3ef;border-radius:5px;padding:7px 8px;font-size:10px;background:#fff;color:#4a5f7e;line-height:1.5}.hfc-demo-lead-toolbar span{color:#96a2b6;font-size:7px;white-space:nowrap}.hfc-demo-lead-table{width:calc(100% - 28px);margin:0 14px 11px;table-layout:fixed;border-collapse:collapse;text-align:left}.hfc-demo-lead-table th{font-size:7px;letter-spacing:.4px;font-weight:500;color:#93a0b6;background:#f8f9fc;padding:7px 6px;border-top:1px solid #e7ecf5;border-bottom:1px solid #e7ecf5}.hfc-demo-lead-table th:first-child{width:43%}.hfc-demo-lead-table th:nth-child(2){width:32%}.hfc-demo-lead-table th:nth-child(3){width:25%}.hfc-demo-lead-table td{border-bottom:1px solid #e9edf5;padding:10px 6px;font-size:9px;vertical-align:middle;overflow-wrap:anywhere}.hfc-demo-record{border:0;background:transparent;color:#7c8dd2;font-size:10px;line-height:1.5;padding:0;text-align:left;cursor:pointer}.hfc-demo-record:hover{text-decoration:underline}.hfc-demo-lead-state{display:inline-block;font-size:7px;padding:3px 5px;border-radius:4px;background:#eef2fc;color:#8b9bcb}.hfc-demo-lead-table .hfc-demo-no-results{padding:20px 6px;text-align:center;color:#9ba6b8}
.hfc-demo-detail{padding:13px 14px}.hfc-demo-back{background:none;border:0;padding:0;color:#8d9bc2;font-size:9px;cursor:pointer;margin-bottom:12px;line-height:1.7}.hfc-demo-detail h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.3px;line-height:1.4}.hfc-demo-detail>p{font-size:9px;color:#97a3b7;margin:3px 0 14px}.hfc-demo-detail dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}.hfc-demo-detail dt{font-size:7px;letter-spacing:.3px;text-transform:uppercase;color:#99a7bb}.hfc-demo-detail dd{margin:3px 0 0;font-size:10px;color:#566a89;overflow-wrap:anywhere}.hfc-demo-detail-note{font-size:8px!important;margin:14px 0 0!important;padding-top:10px;border-top:1px solid #e7ecf5;line-height:1.7}
.hfc-demo-review-types{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid #eef1f7}.hfc-demo-review-types button{font-size:8px;padding:5px 8px;border:1px solid #dfe5f0;border-radius:4px;background:#fff;color:#93a0b7;cursor:pointer;line-height:1.6}.hfc-demo-review-types button[aria-pressed=true]{background:#eef1fd;color:#8190c7;border-color:#d2dafa}.hfc-demo-review{padding:12px 14px}.hfc-demo-review-target{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px;font-size:10px}.hfc-demo-review-target strong{font-weight:600;overflow-wrap:anywhere}.hfc-demo-review-target span{font-size:7px;color:#95a2b8}.hfc-demo-diff{display:grid;grid-template-columns:1fr 20px 1fr;gap:8px;align-items:center}.hfc-demo-diff>div{border:1px solid #e4e9f3;border-radius:5px;padding:9px;background:#f8f9fc}.hfc-demo-diff>span{font-size:10px;text-align:center;color:#a1acc0}.hfc-demo-diff small{display:block;font-size:7px;letter-spacing:.7px;color:#99a6bb;text-transform:uppercase;margin-bottom:5px}.hfc-demo-diff p{font-size:9px;line-height:1.65;margin:0;color:#7184a5}.hfc-demo-diff .hfc-demo-after{background:#f0f5ee;border-color:#dde7d7}.hfc-demo-diff .hfc-demo-after p{color:#8a9d77}.hfc-demo-human-review{margin:12px 0 0;padding:10px 11px;border:1px solid #dce4f3;background:#f4f6fc;border-radius:5px}.hfc-demo-human-review strong{font-size:9px;font-weight:600;color:#8191b8;display:block}.hfc-demo-human-review code{display:block;font-size:8px;color:#8c9dc4;overflow-wrap:anywhere;margin:5px 0}.hfc-demo-human-review p{font-size:8px;line-height:1.7;color:#9ba8be;margin:0}
.hfc-demo-composer{display:grid;grid-template-columns:19px 1fr 23px;gap:8px;align-items:center;background:var(--demo-soft);border:1px solid var(--demo-line);border-radius:11px;margin:0 26px 22px;padding:13px 14px;color:var(--demo-muted);font-size:10px;line-height:1.5}.hfc-demo-composer>span:first-child{grid-column:1/-1;color:var(--demo-muted);margin-bottom:5px}.hfc-demo-composer-plus{font-size:17px}.hfc-demo-composer-tag{font-size:8px;border:1px solid var(--demo-line);padding:3px 7px;border-radius:20px;width:max-content}.hfc-demo-composer-send{display:grid;place-content:center;width:23px;height:23px;background:#46494e;color:#fff;border-radius:50%;font-size:12px}.hfc-demo-layout[data-host=claude] .hfc-demo-composer{border-radius:8px}.hfc-demo-layout[data-host=claude] .hfc-demo-composer-send{background:#b57b5f;border-radius:5px}
.hfc-demo-window figcaption{padding:11px 18px;font-size:8px;line-height:1.7;color:var(--demo-muted);border-top:1px solid var(--demo-line);background:var(--demo-soft)}.hfc-demo-live,.hfc-demo-nojs{font-size:10px;color:#8b97ab;line-height:1.7;margin:17px 0 0}.hfc-demo-section button:focus-visible,.hfc-demo-section input:focus-visible{outline:2px solid #7584c2;outline-offset:3px}.hfc-demo-section button{transition:background .15s,border-color .15s}
@media(max-width:1000px){.hfc-demo-layout{grid-template-columns:210px minmax(0,1fr);gap:22px}.hfc-demo-thread{padding:22px 20px;min-height:525px}.hfc-demo-composer{margin-left:20px;margin-right:20px}.hfc-demo-scene{gap:11px;padding:15px 10px}.hfc-demo-scene strong{font-size:12px}.hfc-demo-org-card strong{font-size:10px}.hfc-demo-org-card small{font-size:7px}.hfc-demo-org-card{gap:7px}.hfc-demo-cloud{width:25px;height:25px;font-size:17px}}
@media(max-width:780px){.hfc-demo-layout{grid-template-columns:1fr;gap:21px}.hfc-demo-scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:0}.hfc-demo-scene{height:100%;padding:13px 10px;gap:8px}.hfc-demo-scene small{font-size:9px;line-height:1.55}.hfc-demo-scene strong{font-size:11px;line-height:1.5}.hfc-demo-number{font-size:8px}.hfc-demo-rail-note{display:none}.hfc-demo-thread{min-height:470px}.hfc-demo-window{max-width:700px;width:100%}.hfc-demo-layout{margin-top:30px}}
@media(max-width:480px){.hfc-demo-scene{flex-direction:column;gap:4px;padding:11px 8px}.hfc-demo-scene strong{font-size:10px;line-height:1.4}.hfc-demo-scene small{font-size:8px;line-height:1.45}.hfc-demo-toolbar{padding:9px 10px;gap:5px}.hfc-demo-hosts{gap:0}.hfc-demo-hosts button{padding:6px 8px;font-size:10px;gap:5px}.hfc-host-symbol{font-size:13px}.hfc-demo-playback{gap:4px}.hfc-demo-playback button{font-size:8px;padding:6px}.hfc-demo-playback button span:first-child{font-size:9px}.hfc-demo-disclosure{font-size:8px;padding:8px 13px}.hfc-demo-chat-header{padding:13px;font-size:8px;gap:7px}.hfc-demo-chat-header>strong{font-size:11px}.hfc-demo-chat-header>span:nth-child(2){display:none}.hfc-demo-thread{padding:17px 13px;min-height:546px}.hfc-demo-user{font-size:11px;padding:10px 12px;margin-bottom:21px;max-width:94%}.hfc-demo-agent{gap:8px}.hfc-demo-agent-symbol{width:20px;height:20px;font-size:13px}.hfc-demo-layout[data-host=claude] .hfc-demo-agent-symbol{font-size:19px}.hfc-demo-tools-heading{padding:9px;font-size:8px;gap:5px}.hfc-demo-tools-heading>span{font-size:7px}.hfc-demo-tools ol{padding:3px 9px}.hfc-demo-tools li{font-size:9px;gap:6px}.hfc-demo-reply{font-size:11px;line-height:1.7}.hfc-demo-layout[data-host=claude] .hfc-demo-reply{font-size:13px}.hfc-demo-app-heading{padding:11px 10px;gap:6px}.hfc-demo-app-heading strong{font-size:10px}.hfc-demo-app-heading .hfc-demo-app-tag{font-size:6px;padding:2px 4px}.hfc-demo-app-heading img{width:20px;height:20px}.hfc-demo-org-grid{padding:5px 8px}.hfc-demo-org-card{gap:6px;flex-wrap:wrap}.hfc-demo-org-card strong{font-size:10px}.hfc-demo-org-card small{font-size:7px}.hfc-demo-connected,.hfc-demo-separate{font-size:6px;padding:3px 4px}.hfc-demo-cloud{width:23px;height:23px;font-size:16px}.hfc-demo-app-note{font-size:7px;padding:0 10px 11px}.hfc-demo-lead-toolbar{padding:10px}.hfc-demo-lead-toolbar span{font-size:6px}.hfc-demo-lead-table{width:calc(100% - 20px);margin:0 10px 10px}.hfc-demo-lead-table th{padding:6px 4px;font-size:6px}.hfc-demo-lead-table td{padding:10px 4px;font-size:8px}.hfc-demo-record{font-size:9px}.hfc-demo-lead-state{font-size:6px;padding:2px 3px}.hfc-demo-review{padding:10px}.hfc-demo-review-types{padding:9px 10px}.hfc-demo-diff{gap:5px;grid-template-columns:1fr 13px 1fr}.hfc-demo-diff>div{padding:7px}.hfc-demo-diff p{font-size:8px}.hfc-demo-human-review{padding:9px}.hfc-demo-review-target{font-size:9px}.hfc-demo-composer{margin:0 13px 17px;padding:11px;font-size:9px}.hfc-demo-window figcaption{font-size:7px;padding:9px 13px}}
@media(prefers-reduced-motion:reduce){.hfc-demo-thinking i{animation:none}.hfc-demo-section button{transition:none}}
/* The approved white mark needs contrast on the simulated hosts' light surfaces. */
.hfc-demo-section img[src="/assets/helmet.svg"]{background:#182031;border-radius:4px;padding:2px;box-sizing:border-box}