/* F24: harness demo copied from the Commerce Spine site (markup, CSS, JS, logos); FirmTrove colours. */
.agents { background: var(--deeper, #0B211D); color: var(--bone, #F5F2EA); --ag-mint: #B8E870; --ag-sub: #9DB0A6; --ag-ink: #F5F2EA; --ag-ink2: rgba(245,242,234,.78); --ag-line: rgba(245,242,234,.10); }
.marketing-page .agents { padding-left: clamp(20px, 4vw, 48px); padding-right: clamp(20px, 4vw, 48px); }
/* One grid: heading left, copy and buttons right, the chat window across the full width below. */
.ag-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "head side" "demo demo"; column-gap: clamp(40px, 6vw, 96px); row-gap: clamp(44px, 5vw, 64px); align-items: end; }
.ag-head { grid-area: head; }
.agents .ag-head h2 { color: var(--bone, #F5F2EA); margin: 0; max-width: 16ch; }
.ag-side { grid-area: side; display: flex; flex-direction: column; gap: 28px; }
.agents .ag-side p { margin: 0; color: rgba(245,242,234,.78); font-size: 1.06rem; line-height: 1.62; max-width: 46ch; }
.ag-demo { grid-area: demo; min-width: 0; }
.ag-cta { grid-area: cta; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.ag-cta .btn { min-height: 56px; padding: 0 30px; background: var(--mint, #B8E870); color: var(--ink, #0B211D); border-radius: 8px; box-shadow: none; }
@media (hover: hover) { .ag-cta .btn:hover { background: #DDF2B5; } }
.agents .ag-cta .ag-link { min-height: 56px; display: inline-flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 600; text-decoration: none; }
.ag-link .u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.ag-link span[aria-hidden] { font-size: 1.25em; }
@media (max-width: 1180px) {
  .ag-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "side" "demo"; row-gap: 28px; }
  .agents .ag-head h2 { max-width: 20ch; }
  .ag-demo { margin-top: 20px; }
}
@media (max-width: 900px) {
  .ag-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "copy" "demo" "cta"; row-gap: 24px; }
  .ag-side { display: contents; }
  .agents .ag-side p { grid-area: copy; }
  .ag-demo { margin-top: 12px; }
  .ag-cta { margin-top: 8px; }
  .agents .ag-head h2 { max-width: 20ch; }
}

.hwin { font-size: 16px; line-height: 1.6; }
.harness-wrap { position: relative; }

/* ---------- harness demo (fixed-height app windows, per-harness theming) ---------- */

.harness-pills { position: relative; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; }
.hp-ind {
  position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0;
  background: rgba(184,232,112,.09); border: 1px solid rgba(184,232,112,.34); border-radius: 9px; z-index: 0;
  transition: left .4s cubic-bezier(.4,0,.2,1), top .4s cubic-bezier(.4,0,.2,1), width .4s cubic-bezier(.4,0,.2,1), height .4s cubic-bezier(.4,0,.2,1), opacity .3s;
  pointer-events: none;
}
.hp {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 9px; background: transparent; border: 1px solid transparent;
  color: var(--ag-sub); font-family: var(--body, sans-serif); font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: color .18s;
}
.hp:hover { color: var(--ag-ink); }
.hp:focus-visible { outline: 2px solid var(--ag-mint); outline-offset: 2px; }
.hp.on { color: #fff; }
.hp-badge { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; letter-spacing: .04em; color: var(--ag-mint); }
.hp-badge.alt { color: var(--ag-sub); }
.hp.on .hp-badge { color: var(--ag-mint); opacity: 1; }
.hp-more { display: inline-flex; align-items: center; margin-left: auto; padding: 8px 0; font-size: 0.8rem; color: var(--ag-sub); }

.hwin { position: relative; z-index: 1; }

/* one window shell, themed per harness */
.hpane {
  --bg: #0F1412; --sbg: #151B18; --line2: rgba(255,255,255,.09);
  --txt: #EEF1EC; --sub: #8E9A93; --bub: rgba(255,255,255,.06); --sact: rgba(255,255,255,.07);
  --accent: #B8E870; --inbg: rgba(255,255,255,.03);
  display: none; flex-direction: column; height: 580px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(184,232,112,.15); background: var(--bg); color: var(--txt);
  box-shadow: 0 32px 70px -24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
}
.hpane:not([hidden]) { display: flex; }
.w-claude { --bg: #262624; --sbg: #1F1E1D; --line2: #33322F; --txt: #ECEAE4; --sub: #8F8B81; --bub: #33322F; --sact: #33322F; --accent: #B8E870; --inbg: transparent; }
.w-cursor { --bg: #0D1411; --sbg: rgba(255,255,255,.025); }

.hp-title { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line2); background: var(--sbg); flex: 0 0 auto; }
.hp-dots { display: flex; gap: 5px; }
.hp-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.hp-title .tt { font-family: var(--font-mono); font-size: 0.72rem; color: var(--sub); }

.hp-cols { flex: 1; display: flex; min-height: 0; }
.hp-side { width: 232px; flex: 0 0 auto; background: var(--sbg); border-right: 1px solid var(--line2); padding: 12px 10px; display: flex; flex-direction: column; overflow: hidden; }
.hp-word { font-size: 0.95rem; font-weight: 700; letter-spacing: -.01em; padding: 2px 10px 10px; color: var(--txt); }
.hp-seg { display: flex; gap: 4px; margin: 0 6px 10px; background: rgba(255,255,255,.05); border-radius: 9px; padding: 3px; }
.hp-seg span { flex: 1; text-align: center; padding: 5px 0; border-radius: 7px; font-size: 0.72rem; color: var(--sub); }
.hp-seg .on { background: var(--sact); color: var(--txt); }
.hp-nav { display: flex; align-items: center; gap: 9px; padding: 5px 10px; border-radius: 7px; font-size: 0.75rem; color: var(--sub); }
.hp-nav .crc { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--sub); display: flex; align-items: center; justify-content: center; font-size: 0.68rem; flex: 0 0 auto; }
.hp-slbl { font-size: 0.68rem; color: var(--sub); padding: 10px 10px 4px; opacity: .85; letter-spacing: .06em; text-transform: uppercase; }
.hp-sit { display: block; padding: 5px 10px; border-radius: 7px; font-size: 0.77rem; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-sit.on { background: var(--sact); color: var(--txt); }
.hp-me { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 12px 10px 14px; }
.hp-me .av { width: 24px; height: 24px; border-radius: 50%; background: #2E7B62; color: #fff; font-size: 0.62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.hp-me .nm { display: block; font-size: 0.75rem; color: var(--txt); line-height: 1.2; }
.hp-me .pl2 { display: block; font-size: 0.62rem; color: var(--sub); line-height: 1.2; }

.hp-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hp-body > * { flex-shrink: 0; }
.hp-body { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 24px 24px 8px; display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 780px; margin: 0 auto; }

/* cascade: each element declares its own delay */
.hpane .m { opacity: 0; transform: translateY(6px); }
.hpane.play .m { animation: hin .45s cubic-bezier(.16,1,.3,1) var(--d,.2s) forwards; }
@keyframes hin { to { opacity: 1; transform: none; } }
.hpane .tx { opacity: 0; display: block; min-width: 0; }
.hpane.play .tx { animation: hin .35s ease var(--dt,1s) forwards; }
.hp-dts { position: absolute; top: 0; left: 0; display: flex; gap: 4px; padding: 6px 2px; opacity: 0; }
.hpane.play .hp-dts { opacity: 1; animation: hhide .25s var(--dt,1s) forwards; }
.hp-dts i { width: 6px; height: 6px; border-radius: 50%; background: var(--sub); animation: hbob .9s ease infinite; }
.hp-dts i:nth-child(2) { animation-delay: .15s; }
.hp-dts i:nth-child(3) { animation-delay: .3s; }
@keyframes hhide { to { opacity: 0; visibility: hidden; } }
@keyframes hbob { 30% { transform: translateY(-4px); } 60% { transform: none; } }
html:not(.js) .hpane .m, html:not(.js) .hpane .tx { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hpane .m, .hpane .tx { opacity: 1; transform: none; }
  .hpane.play .m, .hpane.play .tx { animation: none; }
  .hp-dts, .hpane.play .hp-dts { display: none; }
}

.hp-u { align-self: flex-end; max-width: 72%; background: var(--bub); padding: 9px 14px; border-radius: 16px 16px 6px; font-size: 0.82rem; line-height: 1.5; }
.hp-a { align-self: flex-start; max-width: 94%; font-size: 0.82rem; line-height: 1.6; position: relative; min-height: 20px; }
.hp-a b { font-weight: 600; color: var(--txt); }
.hp-tool {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: .04em; font-weight: 600;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding: 5px 10px; border-radius: 6px;
}
.hp-tool.sk { border-style: dashed; }
.hp-tool i { font-style: normal; opacity: .65; font-weight: 500; }
.hp-tool { max-width: 100%; }

.hp-card { display: block; border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; margin-top: 10px; max-width: 400px; background: var(--sbg); }
.hp-card.wide { max-width: 460px; margin: 10px 0; }
.hp-chd { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-bottom: 1px solid var(--line2); font-size: 0.72rem; font-weight: 700; }
.hp-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: .16em; font-weight: 700;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding: 2px 7px; border-radius: 4px;
}
.hp-live::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); animation: hpulse 1.4s ease infinite; }
@keyframes hpulse { 50% { opacity: .4; } }
.hp-kpis { display: flex; gap: 5px; padding: 9px 9px 0; }
.hp-kpi { flex: 1; background: rgba(255,255,255,.05); border: 1px solid transparent; border-radius: 6px; padding: 6px 8px; }
.hp-kpi .n { display: block; font-size: 0.84rem; font-weight: 700; line-height: 1.1; }
.hp-kpi .l { display: block; font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sub); margin-top: 3px; white-space: nowrap; }
.hp-kpi.hot { border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.hp-kpi.hot .n { color: var(--accent); }
.hp-bars { display: flex; align-items: flex-end; gap: 3px; height: 36px; padding: 8px 9px 9px; }
.hp-bars i { flex: 1; background: color-mix(in srgb, var(--accent) 24%, transparent); border-radius: 2px 2px 0 0; }
.hp-bars i.h { background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent); }
.hp-lrow { display: flex; align-items: center; gap: 10px; padding: 7px 12px; font-size: 0.72rem; border-top: 1px solid var(--line2); }
.hp-lrow .lb { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sub); }
.hp-lrow .vl { font-family: var(--font-mono); font-size: 0.66rem; color: var(--accent); }
.hp-lrow .vl.w { color: #E8C07D; }
.hp-cft { display: block; padding: 7px 11px; border-top: 1px solid var(--line2); font-family: var(--font-mono); font-size: 0.52rem; color: var(--sub); letter-spacing: .06em; }

.hp-acts { display: flex; gap: 11px; margin-top: 9px; opacity: 0; }
.hpane.play .hp-acts { animation: hin .3s ease var(--da,5s) forwards; }
.hp-acts svg { width: 13px; height: 13px; stroke: var(--sub); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }

.hp-inp {
  width: calc(100% - 48px); max-width: 732px; margin: 6px auto 16px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;
  background: var(--inbg); border: 1px solid var(--line2); border-radius: 12px; padding: 11px 15px;
  color: #B5B1A7; font-size: 0.8rem; flex: 0 0 auto;
}
.hp-inp.sm { width: auto; max-width: none; margin: auto 0 0; padding: 9px 12px; font-size: 0.74rem; }
.hp-model { font-family: var(--font-mono); font-size: 0.66rem; color: var(--txt); border: 1px solid var(--line2); padding: 3px 9px; border-radius: 6px; }


/* result card: big number, label rows, chips, provenance footer */
.hp-big { display: block; padding: 12px 12px 4px; font-size: 1.35rem; font-weight: 700; color: var(--accent); letter-spacing: -.02em; }
.hp-big small { display: block; font-size: 0.64rem; font-weight: 500; color: var(--sub); letter-spacing: 0; margin-top: 3px; }
.hp-chips { display: flex; gap: 5px; padding: 9px 12px 11px; flex-wrap: wrap; }
.hp-chip { font-family: var(--font-mono); font-size: 0.55rem; color: var(--sub); border: 1px solid var(--line2); padding: 3px 8px; border-radius: 5px; }

/* artifact / built-app preview */
.hp-app { display: block; border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; margin-top: 10px; max-width: 400px; background: var(--sbg); }
.hp-apph { display: flex; align-items: center; gap: 5px; padding: 8px 11px; border-bottom: 1px solid var(--line2); background: rgba(255,255,255,.03); }
.hp-apph i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.16); }
.hp-apph .url { flex: 1; margin-left: 6px; font-family: var(--font-mono); font-size: 0.6rem; color: var(--sub); }
.hp-apph .opn { font-family: var(--font-mono); font-size: 0.56rem; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding: 2px 8px; border-radius: 5px; font-weight: 700; }
.hp-apr { display: flex; align-items: center; gap: 8px; padding: 7px 11px; font-size: 0.68rem; border-top: 1px solid var(--line2); }
.hp-apr .oid { font-family: var(--font-mono); font-size: 0.58rem; color: var(--sub); flex: 0 0 auto; }
.hp-apr .onm { flex: 1; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-apr .ost { font-family: var(--font-mono); font-size: 0.52rem; padding: 2px 7px; border-radius: 4px; font-weight: 700; letter-spacing: .08em; flex: 0 0 auto; }
.hp-apr .ost.ok { color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.hp-apr .ost.pn { color: #E8C07D; border: 1px solid rgba(232,192,125,.3); background: rgba(232,192,125,.07); }

/* inline code inside a reply */
.hp-code2 { display: block; border: 1px solid var(--line2); border-radius: 9px; padding: 10px 0; margin-top: 10px; background: rgba(255,255,255,.025); font-family: var(--font-mono); font-size: 0.66rem; line-height: 1.75; max-width: 430px; }
.hp-code2 .c2 { display: block; padding: 0 14px; white-space: pre-wrap; }

.hp-tool img { display: block; opacity: .85; flex-shrink: 0; }
.hp-tool .ok { color: var(--accent); margin-left: 2px; }

/* per-product chrome */
.w-code { --bg: #262624; --sbg: #1F1E1D; --line2: #33322F; --txt: #ECEAE4; --sub: #8F8B81; --bub: #33322F; --sact: #33322F; --accent: #B8E870; --inbg: transparent; }
.w-codex { --bg: #0F0F10; --sbg: #171718; --line2: #2A2A2C; --txt: #ECECF1; --sub: #8E8EA0; --bub: #2A2A2C; --sact: #2A2A2C; --accent: #B8E870; --inbg: transparent; }

/* terminals */
.hp-term { flex: 1; padding: 20px 24px; font-family: var(--font-mono); font-size: 0.79rem; line-height: 1.85; color: var(--ag-ink2); display: flex; flex-direction: column; overflow: hidden; }
.tl { white-space: pre-wrap; word-break: break-word; }
.tl.sp { height: .5em; }
.tl.ind { padding-left: 15px; }
.tl.ind2 { padding-left: 22px; }
.t-dim { color: var(--ag-sub); }
.t-user { color: var(--ag-ink); }
.t-sky { color: var(--ag-mint); }
.t-num { color: var(--ag-mint); font-weight: 600; }
.t-file, .t-str { color: #9BE7C4; }
.t-kw { color: #8AB4FF; }
.t-cm { color: var(--ag-sub); }
.t-bullet { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ag-mint); vertical-align: 1px; }
.t-elbow { color: var(--ag-sub); }
.hp-box { margin-top: auto; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(184,232,112,.22); border-radius: 10px; padding: 11px 14px; }
.bx-hint { margin-left: auto; font-size: 0.68rem; color: var(--ag-sub); }
.caret { display: inline-block; width: 8px; height: 15px; background: var(--ag-mint); vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hp-code { border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 12px 0; margin: 10px 0; background: rgba(255,255,255,.025); }
.cb-line { padding: 1px 16px; white-space: pre-wrap; }
.ln { display: inline-block; width: 26px; color: var(--ag-sub); opacity: .55; user-select: none; }

/* cursor editor */
.ed-files { width: 172px; flex: 0 0 auto; background: var(--sbg); border-right: 1px solid var(--line2); padding: 12px 10px; display: flex; flex-direction: column; gap: 3px; font-family: var(--font-mono); font-size: 0.74rem; }
.ed-f { color: var(--ag-sub); padding: 5px 9px; border-radius: 6px; }
.ed-f.on { background: rgba(184,232,112,.12); color: var(--ag-mint); }
.ed-code { flex: 1; padding: 18px 0; font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.95; min-width: 0; }
.ed-code .cb-line.add { background: rgba(184,232,112,.09); box-shadow: inset 2px 0 0 var(--ag-mint); }
.ed-diff { margin: 14px 16px 0; font-family: var(--font-mono); font-size: 0.66rem; color: var(--ag-mint); }
.ed-chat { width: 300px; flex: 0 0 auto; border-left: 1px solid var(--line2); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; background: rgba(255,255,255,.02); }

.hwin-note { text-align: center; color: var(--ag-sub); font-size: 0.88rem; max-width: 64ch; margin: 18px auto 0; }
.hwin-syn { color: var(--ag-sub); opacity: .75; }
.hwin { transition: box-shadow .4s ease; border-radius: 16px; }
.hwin:hover { box-shadow: 0 34px 90px -20px rgba(3, 8, 20, 0.95), 0 0 0 1px rgba(184,232,112,.22); }
@media (max-width: 820px) {
  /* harness windows: drop the chrome columns, let the conversation breathe */
  .hpane { height: auto; min-height: 420px; }
  .hp-cols { flex-direction: column; }
  .hp-side, .ed-files { display: none; }
  .ed-chat { width: auto; border-left: 0; border-top: 1px solid var(--line2); }
  .ed-code { padding: 14px 0; font-size: 0.68rem; line-height: 1.8; }
  .hp-body { padding: 16px 16px 6px; gap: 11px; }
  .hp-u, .hp-a { max-width: 100%; font-size: 0.78rem; }
  .hp-card, .hp-card.wide { max-width: 100%; }
  .hp-kpis { flex-wrap: wrap; }
  .hp-kpi { min-width: 30%; }
  .hp-inp { width: calc(100% - 32px); margin: 6px auto 12px; }
  .hp-more { display: none; }
  .harness-pills { gap: 7px; }
  .hp { padding: 8px 13px; font-size: 0.82rem; }
  .hp-badge { display: none; }
  .hp-term { font-size: 0.62rem; padding: 14px 12px; line-height: 1.75; }
  .hp-box { padding: 9px 11px; }
  .bx-hint { display: none; }
}
/* harness logos */
.hp-logo { display: block; width: 15px; height: 15px; opacity: .65; transition: opacity .18s; flex-shrink: 0; }
.hp:hover .hp-logo, .hp.on .hp-logo { opacity: 1; }
.hp-title .tt { display: inline-flex; align-items: center; gap: 7px; }
.hp-title .tt img { display: block; opacity: .8; }
.hp-word { display: flex; align-items: center; gap: 8px; }
.hp-word img { display: block; }
/* the OpenAI + Cursor marks are monochrome: tint them to the pane's ink */
.hp[data-h="codex"] .hp-logo, .hp[data-h="cursor"] .hp-logo { color: var(--ag-ink2); }
.w-codex .hp-title .tt img, .w-cursor .hp-title .tt img { color: var(--ag-ink2); }

.hp-body::-webkit-scrollbar { width: 0; height: 0; }
.hp-body::-webkit-scrollbar { width: 0; height: 0; }



/* connect guide on the developers page */
.connect-shots figure { margin: 18px 0 26px; }
.connect-shots img { width: 100%; height: auto; border-radius: 12px; display: block; }
@media (max-width: 600px) {
  /* one left edge: tabs, window and buttons share the column width */
  .harness-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .harness-pills .hp { justify-content: center; width: 100%; }
  .hwin { width: 100%; }
  .ag-cta { flex-direction: column; align-items: stretch; gap: 4px; }
  .ag-cta .btn { width: 100%; }
  .agents .ag-cta .ag-link { justify-content: center; }
}