/* ============================================================
   HOW IT WORKS (home page, right after the hero). Builds on
   css/ai-handover.css: same canvas, two cards and handover arrow. Inside
   the cards, the 2 steps drawn as small product screens: a Claude chat
   (step 1, your request, Claude using Askpilot and the workflow card going
   Live) and an Askpilot session (step 2, a lead being worked).
   js/ho-live.js plays them (data-step on the section); without JS the
   finished state shows.
   ============================================================ */

.ho--live .sec-lede { max-width: 860px; margin: 18px auto 0; }
.ho--live .ho-pair { max-width: 1000px; align-items: stretch; }
.ho--live .ho-canvas { max-width: 1120px; padding: 48px; }
.ho--live .ho-arrow { width: 88px; }
.ho--live .ho-card { padding: 28px 26px 24px; }
.ho--live .ho-card-title { margin-bottom: 8px; }

/* one step */
.hol-st { padding-top: 14px; transition: opacity .35s; }
.hol-st + .hol-st { margin-top: 14px; }
.hol-st-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hol-st-head > i {
    flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    font-style: normal; font-size: 0.75rem; font-weight: 800; background: var(--ho-magenta); color: #fff;
    transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s;
}
.hol-st-head > b { font-size: 1rem; font-weight: 750; color: var(--ho-ink); line-height: 1.3; }
.hol-time {
    margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 999px; background: #E7F6EE; color: #17794A;
    font-size: 0.6563rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.hol-time--live span { width: 7px; height: 7px; border-radius: 50%; background: var(--ho-ok); animation: hol-pulse 2s ease-out infinite; }

/* --- the Claude chat ------------------------------------------------------- */
.hol-chat {
    border: 1px solid #ECE8EE; border-radius: 14px; background: #fff; padding: 12px;
    font-size: 0.8125rem; line-height: 1.5; color: #16121A;
    box-shadow: 0 1px 2px rgba(20, 17, 26, .04);
}
.hol-chat-bar { display: flex; align-items: center; gap: 7px; margin: -2px 0 10px; padding-bottom: 9px; border-bottom: 1px solid #F1EEF2; font-size: 0.75rem; font-weight: 700; }
.hol-chat-bar img { width: 14px; height: 14px; }
.hol-you { display: flex; justify-content: flex-end; }
.hol-type { display: block; max-width: 88%; min-height: 4.5em; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: #F3F2F6; }
.hol-them { display: flex; gap: 8px; align-items: flex-start; }
.hol-them img { width: 14px; height: 14px; margin-top: 3px; }
.hol-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 22px; }
.hol-tool {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px;
    border: 1px solid #ECE8EE; background: #FCFBFC; font-size: 0.7188rem; color: #4E4854;
}
.hol-tool img { width: 11px; height: 11px; }
.hol-wfcard { margin: 10px 0 0 22px; border: 1px solid #ECE8EE; border-radius: 12px; background: #FCFCFD; overflow: hidden; }
.hol-wfcard-top { display: flex; align-items: center; gap: 7px; margin: 0; padding: 8px 10px; background: #fff; border-bottom: 1px solid #F1EEF2; }
.hol-wfcard-top img { width: 13px; height: 13px; }
.hol-wfcard-top b { flex: 1; font-size: 0.75rem; }
.hol-tag { padding: 2px 7px; border-radius: 999px; font-size: 0.5938rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; background: #EEF0FF; color: #4C4CE0; transition: background-color .3s, color .3s; }
.hol-tag.is-live { background: #DCFCE7; color: #15803D; }
.hol-wfcard-trig { margin: 0; padding: 8px 10px 4px; font-size: 0.75rem; }
.hol-wfcard-trig span { display: block; font-size: 0.5938rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #8B8492; }
.hol-todos { list-style: none; margin: 0; padding: 4px 10px 10px; display: grid; gap: 5px; }
.hol-todos li { display: flex; align-items: center; gap: 7px; font-size: 0.75rem; }
.hol-todos i {
    flex: none; display: grid; place-items: center; width: 12px; height: 12px; border-radius: 4px;
    border: 1.5px solid #C9C4D0; background: #fff; transition: background-color .2s, border-color .2s;
}
.hol-todos i svg { width: 8px; height: 8px; color: #fff; opacity: 0; transition: opacity .2s; }
.hol-todos li.is-done i { background: #16A34A; border-color: #16A34A; }
.hol-todos li.is-done i svg { opacity: 1; }

/* --- the Askpilot session -------------------------------------------------- */
.hol-app {
    border: 1px solid #ECE8EE; border-radius: 14px; background: #fff; overflow: hidden;
    font-size: 0.8125rem; color: #16121A; box-shadow: 0 1px 2px rgba(20, 17, 26, .04);
}
.hol-app-bar { display: flex; align-items: center; gap: 7px; margin: 0; padding: 9px 12px; background: #FAFAFA; border-bottom: 1px solid #F0EEF1; font-size: 0.75rem; }
.hol-app-bar img { width: 14px; height: 14px; }
.hol-app-bar span { margin-left: auto; color: #8B8492; }
.hol-app-bar span i { font-style: normal; margin: 0 3px; }
.hol-app-title { display: flex; align-items: center; gap: 8px; margin: 0; padding: 11px 12px; border-bottom: 1px solid #F0EEF1; }
.hol-app-title img { width: 14px; height: 14px; }
.hol-app-title b { font-size: 0.8125rem; }
.hol-autorun { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: #EEF0FF; color: #4C4CE0; font-size: 0.6875rem; font-weight: 650; white-space: nowrap; }
.hol-rows { padding: 12px; display: grid; gap: 12px; }
.hol-row-head { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 0.75rem; }
.hol-row-head img { width: 14px; height: 14px; border-radius: 3px; }
.hol-row-head time { color: #9CA3AF; font-size: 0.6875rem; }
.hol-row-sub { margin: 3px 0 0 21px; font-size: 0.75rem; }
.hol-row-sub.is-wait { display: flex; align-items: center; gap: 7px; color: #6B7280; }
.hol-row-sub.is-wait i { width: 7px; height: 7px; border-radius: 50%; background: #F5A524; animation: hol-pulse-amber 2s ease-out infinite; }
.hol-work { margin: 7px 0 0 21px; border: 1px solid #ECE8EE; border-radius: 10px; overflow: hidden; }
.hol-work-i { display: flex; gap: 8px; padding: 7px 10px; border-bottom: 1px solid #F5F4F6; }
.hol-work-i:last-child { border-bottom: 0; }
.hol-tick { flex: none; display: grid; place-items: center; width: 13px; height: 13px; margin-top: 1px; border-radius: 50%; background: #16A34A; color: #fff; }
.hol-tick svg { width: 8px; height: 8px; }
.hol-work-i b { display: block; font-size: 0.7188rem; }
.hol-work-i span span { display: block; font-size: 0.6875rem; color: #6B7280; }

.hol-note { margin: 22px auto 0; text-align: center; font-size: 0.9375rem; color: var(--ho-muted); }

/* --- the play (only once js/ho-live.js adds .is-anim) --------------------- */
.ho--live.is-anim .hol-in { opacity: 0; transform: translateY(5px); }
.ho--live.is-anim .hol-in.is-in { opacity: 1; transform: none; transition: opacity .35s, transform .4s cubic-bezier(.16, 1, .3, 1); }
.ho--live.is-anim .hol-type.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #16121A; animation: hol-caret .8s steps(1) infinite; }
.ho--live.is-anim .hol-st { opacity: .45; }
.ho--live.is-anim[data-step="1"] .hol-st[data-s="1"],
.ho--live.is-anim[data-step="2"] .hol-st { opacity: 1; }
.ho--live.is-anim[data-step="1"] .hol-st[data-s="1"] .hol-st-head > i,
.ho--live.is-anim[data-step="2"] .hol-st[data-s="2"] .hol-st-head > i { transform: scale(1.14); box-shadow: 0 0 0 5px rgba(213, 59, 213, .15); }
.ho--live .ho-arrow-dot { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.ho--live .ho-arrow.is-sending .ho-arrow-dot { transform: scale(1.14); }

@keyframes hol-caret { 50% { opacity: 0; } }
@keyframes hol-pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 157, 98, .45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(31, 157, 98, 0); } }
@keyframes hol-pulse-amber { 0% { box-shadow: 0 0 0 0 rgba(245, 165, 36, .5); } 70%, 100% { box-shadow: 0 0 0 6px rgba(245, 165, 36, 0); } }

@media (max-width: 767px) {
    .ho--live .ho-card { padding: 22px 16px 18px; }
    .hol-st-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .hol-time--live span, .hol-row-sub.is-wait i { animation: none; }
}

/* one chat for the whole setup step: the reply sits under your message */
.hol-you + .hol-them { margin-top: 12px; }
.hol-type { min-height: 0; }

/* Both cards keep one fixed height, so nothing moves while the steps play:
   the step fills the card and its chat or session panel takes the rest. */
.ho--live .ho-card { height: 600px; overflow: hidden; }
.ho--live .hol-st { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ho--live .hol-chat, .ho--live .hol-app { flex: 1; min-height: 0; overflow: hidden; }
@media (max-width: 767px) {
    .ho--live .ho-card { height: auto; overflow: visible; }
}
/* your message arrives whole, like a sent message */
.ho--live.is-anim .hol-type.is-shown { animation: hol-sent .4s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes hol-sent { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- box structure v2: one header per card (logos + step pill, one
   title), a Claude tool-use block, and the process checklist in the
   session that mirrors the workflow card ---- */
.hol-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.hol-top .ho-logos { margin: 0; }
.hol-step {
    display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 4px; border-radius: 999px;
    background: #F6F1F0; font-size: 0.75rem; font-weight: 750; color: var(--ho-muted);
    transition: background-color .3s, color .3s;
}
.hol-step > i {
    display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    font-style: normal; font-size: 0.6875rem; font-weight: 800; background: #fff; color: var(--ho-muted);
    transition: background-color .3s, color .3s;
}
.hol-running { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; padding-left: 9px; border-left: 1px solid rgba(22, 18, 26, .12); font-style: normal; color: #17794A; }
.hol-running span { width: 6px; height: 6px; border-radius: 50%; background: var(--ho-ok); animation: hol-pulse 2s ease-out infinite; }
.ho--live .ho-card-title { margin: 0 0 14px; font-size: 1.25rem; }
.ho--live .hol-st { padding-top: 0; }
/* the step being played: its pill turns magenta */
.ho--live:not(.is-anim) .hol-step,
.ho--live[data-step="1"] .hol-step[data-s="1"],
.ho--live[data-step="2"] .hol-step[data-s="2"] { background: #FDEBFD; color: var(--ho-ink); }
.ho--live:not(.is-anim) .hol-step > i,
.ho--live[data-step="1"] .hol-step[data-s="1"] > i,
.ho--live[data-step="2"] .hol-step[data-s="2"] > i { background: var(--ho-magenta); color: #fff; }

/* the chat panel is a column, so its parts space evenly */
.ho--live .hol-chat { display: flex; flex-direction: column; gap: 12px; }
.ho--live .hol-chat-bar { margin: -2px 0 0; }
.ho--live .hol-you + .hol-them { margin-top: 0; }
.ho--live .hol-type { max-width: 92%; }

/* Claude's tool-use block */
.hol-toolbox { margin-left: 22px; border: 1px solid #ECE8EE; border-radius: 12px; background: #FCFBFC; overflow: hidden; }
.hol-toolbox-h { display: flex; align-items: center; gap: 7px; margin: 0; padding: 7px 10px; border-bottom: 1px solid #F1EEF2; font-size: 0.7188rem; font-weight: 700; }
.hol-toolbox-h img { width: 12px; height: 12px; }
.hol-toolbox-h span { margin-left: auto; font-weight: 600; color: #8B8492; }
.hol-toolbox ul { list-style: none; margin: 0; padding: 7px 10px 8px; display: grid; gap: 5px; }
.hol-toolbox li { display: flex; align-items: center; gap: 7px; font-size: 0.7188rem; color: #4E4854; }
.ho--live .hol-wfcard { margin: 0 0 0 22px; }
.ho--live .hol-todos { padding-top: 8px; }

/* the session: rows on top, the process checklist pinned to the bottom */
.ho--live .hol-app { display: flex; flex-direction: column; }
.hol-proc { margin-top: auto; border-top: 1px solid #F0EEF1; background: #FCFCFD; padding: 10px 12px 12px; }
.hol-proc-h { display: flex; align-items: center; margin: 0 0 7px; font-size: 0.75rem; }
.hol-proc-h span { margin-left: auto; font-size: 0.6875rem; font-weight: 650; color: #17794A; }
.hol-proc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.hol-proc li { display: flex; align-items: center; gap: 7px; font-size: 0.75rem; color: #4E4854; transition: color .3s; }
.hol-proc li i {
    flex: none; display: grid; place-items: center; width: 12px; height: 12px; border-radius: 4px;
    border: 1.5px solid #C9C4D0; background: #fff; transition: background-color .25s, border-color .25s;
}
.hol-proc li i svg { width: 8px; height: 8px; color: #fff; opacity: 0; transition: opacity .2s; }
.hol-proc li.is-done i { background: #16A34A; border-color: #16A34A; }
.hol-proc li.is-done i svg { opacity: 1; }
.hol-proc li.is-doing i { border-color: #F5A524; animation: hol-pulse-amber 2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .hol-running span, .hol-proc li.is-doing i { animation: none; } }
.ho--live .ho-card { height: 640px; }
@media (max-width: 767px) { .ho--live .ho-card { height: auto; } }
/* Claude's message box, pinned to the bottom of the chat */
.hol-compose {
    margin: auto 0 0; display: flex; align-items: center; justify-content: space-between;
    padding: 8px 8px 8px 12px; border: 1px solid #ECE8EE; border-radius: 12px; background: #fff;
    font-size: 0.75rem; color: #B6B2BD;
}
.hol-compose span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #E9E7EE; color: #fff; }
.hol-compose svg { width: 12px; height: 12px; }
/* "Running" only once step 2 has started */
.ho--live.is-anim[data-step="1"] .hol-running { display: none; }
.ho--live.is-anim .hol-running { animation: hol-sent .35s cubic-bezier(.16, 1, .3, 1) both; }
/* Tom's session does not exist until step 2: its title and breadcrumb wait */
.ho--live.is-anim .hol-app-title, .ho--live.is-anim .hol-app-bar span { transition: opacity .35s; }
.ho--live.is-anim[data-step="1"] .hol-app-title,
.ho--live.is-anim[data-step="1"] .hol-app-bar span { opacity: 0; }
/* before the play starts, your message is not sent yet */
.ho--live.is-anim .hol-type:not(.is-shown) { opacity: 0; }
/* "Running" in ink, with an ink dot */
.hol-running { color: var(--ho-ink); }
.hol-running span { background: var(--ho-ink); animation-name: hol-pulse-ink; }
@keyframes hol-pulse-ink { 0% { box-shadow: 0 0 0 0 rgba(20, 17, 26, .35); } 70%, 100% { box-shadow: 0 0 0 6px rgba(20, 17, 26, 0); } }
/* "Running" takes the exact colour and weight of "Step 2" next to it */
.hol-running { color: inherit; font-weight: inherit; }
.hol-running span { background: currentColor; }

/* ---- step 2: the workflow's process as a checkbox flow. A header with
   the workflow, the lead and a progress bar; three compact step cards
   joined by short connectors (done green, the current one outlined with a
   spinner, the rest dimmed); a footer saying every lead runs the same flow. */
.ho--live .hol-app { display: flex; flex-direction: column; box-shadow: none; }
.ho--live .hol-proc { flex: 1; display: flex; flex-direction: column; margin: 0; padding: 16px; border: 0; background: #fff; }
.hol-proc-top { padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid #F0EEF1; }
.hol-proc-name { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 0.875rem; }
.hol-proc-name > img { width: 16px; height: 16px; }
.hol-proc-trig {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 6px;
    border-radius: 999px; border: 1px solid #ECE8EE; font-size: 0.75rem; font-weight: 600; color: #4E4854;
}
.hol-proc-trig img { width: 13px; height: 13px; }
.ho--live .hol-proc-h { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; }
.hol-proc-bar { flex: 1; height: 6px; border-radius: 999px; background: #F1EEF2; overflow: hidden; }
.hol-proc-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: #16A34A; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.ho--live .hol-proc-h span[data-el="proc-n"] { flex: none; font-size: 0.75rem; font-weight: 700; color: #17794A; padding: 0; background: none; }

.ho--live .hol-proc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ho--live .hol-proc li {
    position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start;
    padding: 12px 14px; border-radius: 12px; border: 1px solid #ECE8EE; background: #fff;
    transition: border-color .3s, box-shadow .3s, opacity .3s;
}
/* short connector from one card to the next, on the checkbox column */
.ho--live .hol-proc li:not(:last-child)::after {
    content: ""; position: absolute; left: 24px; bottom: -11px; width: 2px; height: 10px; border-radius: 2px;
    background: #E3DEE6; transition: background-color .4s;
}
.ho--live .hol-proc li.is-done:not(:last-child)::after { background: #16A34A; }
.ho--live .hol-proc li::before { content: none; }
.ho--live .hol-proc li i {
    display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px;
    border: 2px solid #D5CFDA; background: #fff; transition: background-color .25s, border-color .25s;
}
.ho--live .hol-proc li i svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity .2s; }
.ho--live .hol-proc li b { display: block; margin: 0; font-size: 0.875rem; font-weight: 700; color: var(--ho-ink); line-height: 1.35; }
.ho--live .hol-proc li span { display: block; margin-top: 3px; font-size: 0.75rem; line-height: 1.4; color: #6B7280; }
.ho--live .hol-proc li em {
    align-self: center; font-style: normal; font-size: 0.6875rem; font-weight: 700; white-space: nowrap;
    padding: 3px 8px; border-radius: 999px; background: #F3F2F6; color: var(--ho-ink); display: none;
}
/* not reached yet */
.ho--live .hol-proc li:not(.is-done):not(.is-doing) { opacity: .5; }
.ho--live .hol-proc li:not(.is-done):not(.is-doing) span { visibility: hidden; }
/* done */
.ho--live .hol-proc li.is-done i { background: #16A34A; border-color: #16A34A; animation: none; }
.ho--live .hol-proc li.is-done i svg { opacity: 1; }
/* the step Askpilot is on: outlined card, a spinner in the checkbox */
.ho--live .hol-proc li.is-doing { border-color: var(--ho-ink); box-shadow: 0 10px 22px -16px rgba(20, 17, 26, .5); }
.ho--live .hol-proc li.is-doing i { border-radius: 50%; border-color: #E3DEE6; border-top-color: var(--ho-ink); background: #fff; animation: hol-spin .9s linear infinite; }
.ho--live .hol-proc li.is-doing em { display: inline-block; }
@keyframes hol-spin { to { transform: rotate(360deg); } }

.hol-proc-foot { display: flex; align-items: center; gap: 10px; margin: auto 0 0; padding-top: 14px; border-top: 1px solid #F0EEF1; font-size: 0.75rem; color: #6B7280; }
.hol-avs { display: inline-flex; }
.hol-avs i {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin-left: -6px;
    border: 2px solid #fff; font-style: normal; font-size: 0.5625rem; font-weight: 800;
    background: #EEF0FF; color: #4C4CE0;
}
.hol-avs i:first-child { margin-left: 0; }
.hol-avs i:nth-child(2) { background: #FDEBFD; color: #A21CAF; }
.hol-avs i:nth-child(3) { background: #E7F6EE; color: #17794A; }
@media (prefers-reduced-motion: reduce) { .ho--live .hol-proc li.is-doing i { animation: none; } }
.ho--live .ho-cta { margin-top: 40px; }
/* the session header back on top of the process: the session's title, and
   the event that started the workflow */
.ho--live .hol-proc-top .hol-app-title { margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid #F0EEF1; }
.ho--live .hol-start { margin: 0 0 14px; }
.ho--live .hol-start .hol-row-sub { margin-top: 3px; }
/* before step 2 the session does not exist yet */
.ho--live.is-anim[data-step="1"] .hol-proc-top .hol-app-title,
.ho--live.is-anim[data-step="1"] .hol-start { opacity: 0; }
.ho--live.is-anim .hol-proc-top .hol-app-title, .ho--live.is-anim .hol-start { transition: opacity .4s; }
/* shorter now that the chat has no message box at the bottom */
.ho--live .ho-card { height: 596px; }
@media (max-width: 767px) { .ho--live .ho-card { height: auto; } }
/* "In progress" moves into the detail line, so the step title keeps one line */
.ho--live .hol-proc li { grid-template-columns: 22px minmax(0, 1fr); }
.ho--live .hol-proc li em, .ho--live .hol-proc li.is-doing em { display: none; }
.ho--live .hol-proc li.is-doing span::before { content: "In progress \00B7  "; font-weight: 700; color: var(--ho-ink); }
/* step 1 says "Setting up" only while it plays; it goes once step 2 starts */
.hol-setting { display: none; }
.ho--live.is-anim[data-step="1"] .hol-setting { display: inline-flex; }
/* no footer under the process any more: the boxes can be shorter */
.ho--live .ho-card { height: 560px; }
@media (max-width: 767px) { .ho--live .ho-card { height: auto; } }
.ho--live .ho-card { height: 584px; }
@media (max-width: 767px) { .ho--live .ho-card { height: auto; } }

/* skeleton for the session header and trigger, until step 2 fills them in */
.hol-proc-top { position: relative; }
.hol-skel { position: absolute; left: 0; right: 0; top: 0; display: none; flex-direction: column; gap: 16px; padding-top: 2px; }
.hol-skel p { display: flex; align-items: center; gap: 10px; margin: 0; }
.hol-skel i {
    display: block; height: 12px; width: 58%; border-radius: 6px;
    background: linear-gradient(90deg, #F1EEF2 0%, #F8F6F9 40%, #F1EEF2 80%); background-size: 220% 100%;
    animation: hol-shimmer 1.4s linear infinite;
}
.hol-skel i.is-s { width: 22%; margin-left: auto; height: 18px; border-radius: 999px; }
.hol-skel i.is-ico { flex: none; width: 14px; height: 14px; border-radius: 4px; }
.hol-skel i.is-m { width: 46%; margin-left: 24px; }
.hol-skel p:first-child { padding-bottom: 14px; border-bottom: 1px solid #F0EEF1; }
.ho--live.is-anim[data-step="1"] .hol-skel { display: flex; }
@keyframes hol-shimmer { from { background-position: 120% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .hol-skel i { animation: none; } }

/* ---- responsive ---- */
/* the fixed height only where the two boxes sit side by side with room */
@media (max-width: 1179px) {
    .ho--live .ho-card { height: auto; overflow: visible; }
    .ho--live .hol-chat, .ho--live .hol-app { flex: none; }
}
/* below 960px the boxes stack, the arrow points down */
@media (max-width: 959px) {
    .ho--live .ho-canvas { padding: 32px 24px; }
    .ho--live .ho-pair { grid-template-columns: 1fr; max-width: 560px; }
    .ho--live .ho-arrow { width: auto; height: 76px; flex-direction: row; justify-content: center; }
    .ho--live .ho-arrow::before { top: 38px; }
    .ho--live .ho-arrow-track {
        top: 0; bottom: 0; left: 50%; right: auto; width: 1px; height: auto;
        background: repeating-linear-gradient(180deg, #BDB5B9 0 5px, transparent 5px 10px);
        animation-name: ho-flow-down;
    }
    .ho--live .ho-arrow-dot svg { transform: rotate(90deg); animation: none; }
}
@keyframes ho-flow-down { to { background-position: 0 10px; } }
/* phones: the canvas frame goes, the cards use the full width */
@media (max-width: 767px) {
    .ho--live .ho-canvas { padding: 0; }
    .ho--live .ho-pair { max-width: none; }
    .ho--live .ho-card { padding: 20px 16px 18px; }
    .ho--live .hol-top { flex-wrap: wrap; }
    .ho--live .hol-type { max-width: 100%; }
    .ho--live .hol-toolbox, .ho--live .hol-wfcard { margin-left: 0; }
}

/* step 2, piece by piece (data-reveal set by js/ho-live.js). Until a piece
   arrives its skeleton line stands in for it. */
.ho--live.is-anim .hol-skel { display: flex; transition: opacity .3s; }
.ho--live.is-anim .hol-skel p { transition: opacity .3s; }
.ho--live.is-anim .hol-proc-top .hol-app-title,
.ho--live.is-anim .hol-start,
.ho--live.is-anim .hol-proc-h { opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s cubic-bezier(.16, 1, .3, 1); }
.ho--live.is-anim[data-reveal="1"] .hol-proc-top .hol-app-title,
.ho--live.is-anim[data-reveal="2"] .hol-proc-top .hol-app-title, .ho--live.is-anim[data-reveal="2"] .hol-start,
.ho--live.is-anim[data-reveal="3"] .hol-proc-top .hol-app-title, .ho--live.is-anim[data-reveal="3"] .hol-start,
.ho--live.is-anim[data-reveal="3"] .hol-proc-h { opacity: 1; transform: none; }
.ho--live.is-anim[data-reveal="1"] .hol-skel p:first-child,
.ho--live.is-anim[data-reveal="2"] .hol-skel p:nth-child(-n+3),
.ho--live.is-anim[data-reveal="3"] .hol-skel { opacity: 0; }
/* the progress bar has its own skeleton line until it arrives */
.ho--live .hol-proc-top::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 6px; border-radius: 999px;
    background: #F1EEF2; opacity: 0; transition: opacity .3s;
}
.ho--live.is-anim:not([data-reveal="3"]) .hol-proc-top::after { opacity: 1; }
/* like the left box: each process step arrives on its own (fades up) when
   Askpilot reaches it, rather than sitting there dimmed beforehand */
.ho--live.is-anim .hol-proc li { transition: opacity .4s, transform .45s cubic-bezier(.16, 1, .3, 1), border-color .3s, box-shadow .3s; }
.ho--live.is-anim .hol-proc li:not(.is-done):not(.is-doing) { opacity: 0; transform: translateY(8px); }
.ho--live.is-anim .hol-proc li:not(.is-done):not(.is-doing)::after { opacity: 0; }
.hol-running b { font-weight: inherit; }
/* once every step is done the dot stops pulsing */
.ho--live.is-complete .hol-running span { animation: none; background: #16A34A; }

/* The arrow between the boxes waits for box 1: idle (grey, still dashes)
   while your agent sets the workflow up, then it lights up in ink, its
   dashes flow toward Askpilot and a ring pulses once (.is-linked, set by
   js/ho-live.js when the workflow card turns Live). Without the play it
   simply shows lit. */
.ho--live.is-anim .ho-arrow-dot {
    background: #fff; color: #B6AFBB;
    box-shadow: 0 0 0 6px #fff, inset 0 0 0 1.5px #E3DEE6;
    transition: background-color .4s, color .4s, box-shadow .4s, transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.ho--live.is-anim .ho-arrow-dot svg { animation: none; }
.ho--live.is-anim .ho-arrow-track { animation-play-state: paused; opacity: .45; transition: opacity .4s; }
.ho--live.is-anim.is-linked .ho-arrow-dot { background: var(--ho-ink); color: #fff; box-shadow: 0 0 0 6px #fff; }
.ho--live.is-anim.is-linked .ho-arrow-dot svg { animation: ho-push 1.8s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
.ho--live.is-anim.is-linked .ho-arrow-track { animation-play-state: running; opacity: 1; }
.ho--live.is-anim.is-linked .ho-arrow-dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    box-shadow: 0 0 0 0 rgba(213, 59, 213, .55);
    animation: hol-link .9s ease-out 1 both;
}
@keyframes hol-link { from { box-shadow: 0 0 0 0 rgba(213, 59, 213, .55); } to { box-shadow: 0 0 0 18px rgba(213, 59, 213, 0); } }
@media (max-width: 959px) {
    .ho--live.is-anim.is-linked .ho-arrow-dot svg { animation: none; transform: rotate(90deg); }
}

/* ============================================================
   BEAT 3: CHANGE IT BY ASKING (2026-10-09; replaces the separate
   "Change it as fast as you can say it" section). After the run, a second
   message in the same Claude chat changes the workflow; the chat scrolls
   to it, the workflow card's first step changes, the arrow fires again and
   the Askpilot box shows the step updated, with a note.
   ============================================================ */
.ho--live .hol-chat { scroll-behavior: auto; }
.ho--live.is-anim .hol-p3:not(.is-in) { display: none; }
.ho--live .hol-p3.is-in { animation: hol-sent .4s cubic-bezier(.16, 1, .3, 1) both; }
.ho--live .hol-p3.hol-you { display: flex; justify-content: flex-end; }
.hol-msg2 { display: block; max-width: 92%; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: #F3F2F6; }
/* in beat 3 both boxes are fully on, and box 1's pill says it is updating */
.ho--live.is-anim[data-step="3"] .hol-st { opacity: 1; }
.ho--live.is-anim[data-step="3"] .hol-setting { display: inline-flex; }
.ho--live.is-anim[data-step="3"] .hol-step[data-s="1"] { background: #FDEBFD; color: var(--ho-ink); }
.ho--live.is-anim[data-step="3"] .hol-step[data-s="1"] > i { background: var(--ho-magenta); color: #fff; }
.ho--live .ho-card-title { transition: opacity .25s; }
.ho--live .ho-card-title.is-swap { opacity: 0; }
/* the changed step: a highlight in the workflow card, a tag in the box */
.hol-todos li span.is-new, .hol-proc li b.is-new { background: linear-gradient(transparent 55%, rgba(213, 59, 213, .18) 55%); }
.hol-upd-tag {
    display: none; margin-left: 8px; padding: 2px 8px; border-radius: 999px; vertical-align: 2px;
    background: #FDEBFD; color: #A21CAF; font-style: normal; font-size: 0.6875rem; font-weight: 800;
}
.hol-proc li.is-updated .hol-upd-tag { display: inline-block; animation: hol-sent .35s cubic-bezier(.16, 1, .3, 1) both; }
.hol-upd {
    display: none; align-items: center; gap: 7px; margin: 0 0 12px; padding: 7px 10px; border-radius: 10px;
    background: #FDF4FD; border: 1px solid #F6D9F6; font-size: 0.75rem; font-weight: 650; color: #6B2A6B;
}
.hol-upd img { width: 13px; height: 13px; }
.ho--live.is-updated .hol-upd { display: flex; animation: hol-sent .4s cubic-bezier(.16, 1, .3, 1) both; }
/* beat 3 layout: the chat keeps its messages full size and scrolls up to
   the new ones; the tag sits next to the step name; the note takes the
   progress bar's place, so the box keeps its height */
.ho--live .hol-chat > * { flex-shrink: 0; }
.ho--live .hol-proc li b { display: inline; }
.ho--live .hol-proc li b + .hol-upd-tag + span, .ho--live .hol-proc li b ~ span { display: block; }
.ho--live.is-updated .hol-proc-h { display: none; }
.ho--live .hol-upd { margin: 2px 0 0; }
.ho--live .hol-proc li.is-updated em.hol-upd-tag { display: inline-block; background: #FDEBFD; color: #A21CAF; padding: 2px 8px; font-size: 0.6875rem; font-weight: 800; }
/* once the chat has scrolled, its top edge fades instead of cutting text */
.ho--live .hol-chat.is-scrolled {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
            mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
}
/* "Customising" in box 1 looks and pulses exactly like "Setting up": the
   green, still dot of a finished run belongs only to box 2's status */
.ho--live.is-complete .hol-setting span { background: currentColor; animation: hol-pulse-ink 2s ease-out infinite; }
.ho--live.is-complete [data-el="run-state"] span { background: #16A34A; animation: none; }
/* no note in box 2 any more: the progress bar stays through beat 3 */
.ho--live.is-updated .hol-proc-h { display: flex; }

/* ---- one fixed height at every width (2026-10-12) ----
   Below 1180px the cards used to size to their content, so they grew and
   shrank while the steps played and everything under the box moved (on an
   iPhone, which has no scroll anchoring, the page visibly jumped). Each card
   now keeps one height at every width, sized for its fullest state on the
   home page and the three solution pages with about one line to spare; the
   chat scrolls inside its card when your change arrives, as on desktop.
   Side by side (960 to 1179px) both cards share a height. Stacked, each has
   its own: box 1 (your agent's chat) and box 2 (.ho-card--ask, Askpilot).
   Should the words ever need more, js/ho-live.js lets the card grow rather
   than cut them off. Measured by playing the loop at each width. */
@media (max-width: 1179px) {
    .ho--live .ho-card { height: 600px; overflow: hidden; }
    .ho--live .hol-chat, .ho--live .hol-app { flex: 1; min-height: 0; overflow: hidden; }
}
@media (max-width: 1099px) { .ho--live .ho-card { height: 680px; } }
@media (max-width: 959px) { .ho--live .ho-card { height: 582px; } }
@media (max-width: 409px) { .ho--live .ho-card--ask { height: 600px; } }
@media (max-width: 399px) { .ho--live .ho-card { height: 634px; } .ho--live .ho-card--ask { height: 618px; } }
@media (max-width: 379px) { .ho--live .ho-card { height: 650px; } .ho--live .ho-card--ask { height: 652px; } }
@media (max-width: 364px) { .ho--live .ho-card { height: 668px; } .ho--live .ho-card--ask { height: 652px; } }
@media (max-width: 359px) { .ho--live .ho-card { height: 708px; } .ho--live .ho-card--ask { height: 700px; } }
@media (max-width: 344px) { .ho--live .ho-card { height: 728px; } .ho--live .ho-card--ask { height: 704px; } }
@media (max-width: 334px) { .ho--live .ho-card { height: 766px; } .ho--live .ho-card--ask { height: 762px; } }

/* ---- the arrow's push when the boxes stack (2026-10-12) ----
   Below 960px the arrow points down, and it now gives the same push as on
   desktop, downward. The rotation sits inside the keyframes, because an
   animated transform replaces the static rotate(90deg) (with the desktop
   keyframes the arrow would turn back to the right). Idle until box 1 is
   done, as on desktop. */
@keyframes ho-live-push-down {
    0%, 60%, 100% { transform: rotate(90deg) translateX(-2px); }
    30%           { transform: rotate(90deg) translateX(3px); }
}
@media (max-width: 959px) {
    .ho--live .ho-arrow-dot svg,
    .ho--live.is-anim.is-linked .ho-arrow-dot svg { animation: ho-live-push-down 1.8s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
}
@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
    .ho--live .ho-arrow-dot svg,
    .ho--live.is-anim.is-linked .ho-arrow-dot svg { animation: none; transform: rotate(90deg); }
}