/* ============================================================
   WHY ASKPILOT, SIMPLIFIED (#compare, home page, 26 Oct 2026; Dom: show at
   a glance how hard flowcharts and agent systems are to build, how easy
   Askpilot is to start, and that it does more; then "not professional, does
   not show the problem": real product windows). It replaced
   #from-flowcharts on all four pages (Dom, 26 Oct 2026). Markup: scratch build_compare.py.
     left    Building it yourself: an app window with two tabs.
             Lead follow-up flow, a flow editor that fills with steps and
             branches, zooming out as it grows, until a reply nobody drew a
             branch for stops the run. my-agent, the agent's code beside the
             list of what is still to build before go-live, and a failed
             deploy.
     right   With Askpilot, kept simple (Dom: "not an editor"): the same lead
             follow-up as a PROCESS.md note of three plain sentences, Live,
             and under it what is built in.
     facts   the same three answers under both cards.
   js/compare.js plays it once (Dom: no restart), the left first and then
   the right (which peeks from behind the left while it waits); the left tabs stay clickable. Without JS everything shows,
   finished. Fixed heights: nothing moves the page.
   ============================================================ */
.cmp { padding: 112px 0; border-top: 1px solid var(--line); background: var(--cream); }
.cmp-stage {
    position: relative;   /* the cards are measured from it (js/compare.js) */
    /* the hard way takes more room than the easy one (Dom: show more complexity) */
    display: grid; grid-template-columns: minmax(0, 1.3fr) 64px minmax(0, 1fr); align-items: stretch;
    max-width: 1180px; margin: 0 auto;
}
.cmp-side { display: flex; flex-direction: column; min-width: 0; border-radius: 24px; overflow: hidden; }
.cmp-side--old { background: #F3EEEB; border: 1px solid #E4DCD8; }
.cmp-side--new {
    background: #fff; border: 1.5px solid var(--ink, #16121A);
    box-shadow: 0 1px 2px rgba(20, 17, 26, .05), 0 30px 60px -34px rgba(20, 17, 26, .35);
}
.cmp-arrow { align-self: center; justify-self: center; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink, #16121A); color: #fff; }
.cmp-arrow svg { width: 20px; height: 20px; }

/* a card's head */
.cmp-h { display: flex; flex-direction: column; gap: 3px; padding: 26px 28px 0; }
.cmp-h b { display: flex; align-items: center; gap: 10px; font-size: 1.75rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.cmp-h b img { width: 26px; height: 26px; }
.cmp-h span { font-size: .9375rem; color: var(--muted, #8B8492); }
.cmp-side--old .cmp-h b { color: #5E5763; }
.cmp-side--new .cmp-h b { color: var(--ink, #16121A); }

/* ---------- the windows ---------- */
.cmp-win {
    margin: 18px 20px 24px; border-radius: 14px; overflow: hidden; background: #fff;
    border: 1px solid #E2DAD7; box-shadow: 0 1px 2px rgba(20, 17, 26, .04), 0 18px 40px -30px rgba(20, 17, 26, .35);
}
.cmp-win--new { border-color: #EAE2E6; }
.cmp-bar { display: flex; align-items: center; gap: 4px; height: 42px; padding: 0 8px; background: #F8F5F3; border-bottom: 1px solid #ECE6E3; }
.cmp-tab {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px; border: 1px solid transparent;
    font-size: .75rem; font-weight: 700; color: #8B8492; white-space: nowrap;
    transition: background-color .25s, border-color .25s, color .25s, box-shadow .25s;
}
.cmp-tab svg, .cmp-tab img { width: 14px; height: 14px; flex: none; }
.cmp-tab.is-on { background: #fff; border-color: #E4DDDA; color: var(--ink, #16121A); box-shadow: 0 1px 2px rgba(20, 17, 26, .06); }
.cmp.is-ready .cmp-win--old .cmp-tab { cursor: pointer; }
.cmp.is-ready .cmp-win--old .cmp-tab:not(.is-on):hover { color: #5E5763; background: rgba(255, 255, 255, .6); }
.cmp-body { position: relative; height: 446px; overflow: hidden; }
.cmp-scene { position: absolute; inset: 0; transition: opacity .45s ease, visibility 0s linear .45s; }
.cmp-scene:not(.is-on) { opacity: 0; visibility: hidden; }
.cmp-scene.is-on { transition: opacity .45s ease, visibility 0s; }

/* ---------- left, tab 1: the flow editor ---------- */
.cf-canvas {
    position: absolute; inset: 0; overflow: hidden;
    background-color: #FBF9F8; background-image: radial-gradient(rgba(22, 18, 26, .1) 1px, transparent 1.2px); background-size: 16px 16px;
}
.cf-zoom { position: absolute; left: 6px; top: 40px; width: 1090px; transform-origin: 0 0; transform: scale(var(--z, .5)); transition: transform .7s cubic-bezier(.3, .7, .3, 1); }
.cf-svg { display: block; width: 1090px; height: 520px; overflow: visible; }
.cf-e path { fill: none; stroke: #C3BABE; stroke-width: 1.5; }
.cf-box { fill: #fff; stroke: #DCD4D1; }
.cf-t { font: 600 12px/1 Manrope, system-ui, sans-serif; fill: #3F3846; }
.cf-lab { font: 700 10px/1 Manrope, system-ui, sans-serif; fill: #8B8492; }
.cf-err-l { fill: none; stroke: #E0457B; stroke-width: 1.6; stroke-dasharray: 4 3; }
.cf-err-c { fill: #FFF0F4; stroke: #E0457B; stroke-width: 1.6; }
.cf-err-x { stroke: #E0457B; stroke-width: 1.8; stroke-linecap: round; }
.cf-err .cf-lab { fill: #E0457B; }
.cf-av {
    flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: #FDE7D6; color: #B4561F; font-size: .75rem; font-weight: 800;
}
.cf-msg {
    position: absolute; left: 14px; bottom: 62px; display: flex; align-items: center; gap: 10px; margin: 0; max-width: calc(100% - 28px);
    padding: 9px 14px 9px 10px; border-radius: 12px; background: #fff; border: 1px solid #E4DDDA;
    box-shadow: 0 12px 26px -16px rgba(20, 17, 26, .4); font-size: .875rem; font-weight: 650; color: var(--ink, #16121A);
}
.cf-msg small { display: block; font-size: .6875rem; font-weight: 600; color: #8B8492; }
.cf-toast {
    position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 8px; margin: 0;
    padding: 9px 12px; border-radius: 10px; background: #FFF1F4; border: 1px solid #F6C3D2; font-size: .8125rem; color: #B42D57;
}
.cf-toast b { font-weight: 800; color: #9E2048; }
.cf-toast span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #E0457B; color: #fff; flex: none; }
.cf-toast svg { width: 11px; height: 11px; }

/* ---------- left, tab 2: the agent project ---------- */
.cmp-scene[data-scene="agent"] { display: grid; grid-template-columns: 118px minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
/* the project's files: folders inside folders */
.cd-tree { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 8px 0; background: #17141C; border-right: 1px solid #2B2633; overflow: hidden; }
.cd-tree li { padding: 1px 8px 1px calc(8px + var(--d, 0) * 10px); font: 500 .625rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: #8C8496; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-tree .cd-d { color: #C9C2D2; }
.cd-tree .cd-d::before { content: "\25BE  "; color: #6E6878; }
.cd-tree li:nth-child(2) { background: #2A2433; color: #EDE7F3; }
.cd-ed { grid-column: 2; grid-row: 1; min-width: 0; background: #1E1A24; }
.cd-tabs { display: flex; margin: 0; background: #17141C; border-bottom: 1px solid #2B2633; overflow: hidden; }
.cd-tabs span { padding: 8px 10px; font: 500 .6875rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #7D7588; white-space: nowrap; border-right: 1px solid #2B2633; }
.cd-tabs span.is-on { color: #EDE7F3; background: #1E1A24; box-shadow: inset 0 -2px 0 #B58CFF; }
.cd-code { list-style: none; margin: 0; padding: 10px 0; }
.cd-code li { display: grid; grid-template-columns: 26px minmax(0, 1fr); font: 500 .6875rem/1.68 ui-monospace, SFMono-Regular, Menlo, monospace; color: #D9D3E0; }
.cd-code li i { font-style: normal; text-align: right; padding-right: 8px; color: #57505F; }
.cd-code li span { white-space: pre; overflow: hidden; }
.cd-code .ck { color: #FF8FC7; } .cd-code .cs { color: #A6E3B5; } .cd-code .cfn { color: #8EC5FF; } .cd-code .cc { color: #7C7486; font-style: italic; }
.cd-todo { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; padding: 14px 14px 10px; background: #fff; border-left: 1px solid #ECE6E3; }
.cd-todo-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.cd-todo-h > b { font-size: .8125rem; font-weight: 800; color: var(--ink, #16121A); }
.cd-todo-h span { font-size: .6875rem; font-weight: 600; color: #8B8492; white-space: nowrap; }
.cd-todo-h span b { color: #5E5763; }
.cd-prog { display: block; height: 4px; border-radius: 2px; background: #F0EBE8; overflow: hidden; margin-bottom: 8px; }
.cd-prog i { display: block; height: 100%; width: var(--p, 33%); border-radius: inherit; background: #8B8492; transition: width .5s ease; }
.cd-todo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; flex: 1; }
.cd-todo li { display: flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 600; color: #8B8492; white-space: nowrap; }
.cd-ck { position: relative; box-sizing: border-box; flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #D2C9CD; background: #fff; transition: background-color .3s, border-color .3s; }
.cd-todo li.is-done { color: #3F3846; }
/* the tick: an SVG centred in the circle (a rotated border sat off-centre, Dom) */
.cd-todo li.is-done .cd-ck {
    border-color: #2F9E6A;
    background: #2F9E6A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4 6.8 11 12 5.4' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px 9px no-repeat;
}
.cd-term { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 10px 14px; background: #16131A; font: 500 .6875rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #B8B0BC; }
.cd-t2 { display: flex; align-items: flex-start; gap: 6px; color: #FF8FAE; }
.cd-t2 svg { margin-top: 3px; flex: none; }
.cd-warn { color: #F2C46D; }
.cd-t2 svg { width: 11px; height: 11px; }

/* ---------- right: the same workflow in Askpilot, kept simple (Dom) ---------- */
/* as tall as the window on the left; a note and what is built in, at the top */
.cmp-easy {
    /* the note fills the card, close under the title (Dom: no chips, expand the note) */
    display: flex; flex-direction: column;
    min-height: 490px; margin: 18px 20px 24px; padding: 0 14px; border-radius: 14px;
    background: radial-gradient(80% 50% at 50% 22%, rgba(242, 123, 230, .10), transparent 72%);
}
.cmp-note {
    flex: 1; display: flex; flex-direction: column;
    padding: 22px 26px 22px; border-radius: 18px; background: #fff; border: 1px solid #ECE4E9;
    box-shadow: 0 1px 2px rgba(20, 17, 26, .04), 0 26px 50px -32px rgba(20, 17, 26, .38);
}
.cmp-note p { margin: 0; }
.cmp-note-h { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid #F2ECEF; }
.cmp-note-h svg { width: 18px; height: 18px; color: var(--brand-magenta, #D53BD5); }
.cmp-note-h b { font-size: .8125rem; font-weight: 800; color: #6E6774; letter-spacing: .01em; }
.cmp-note-t { margin: 22px 0 10px !important; font-size: 1.625rem; font-weight: 800; letter-spacing: -.025em; color: var(--ink, #16121A); }
.cmp-note-when {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 999px;
    background: #FFF4EC; color: #A4521B; font-size: .875rem; font-weight: 700;
}
.cmp-note-when svg { width: 14px; height: 14px; color: #E46A1C; }
.cmp-note-body { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 26px; }
.cmp-note-l { display: flex; align-items: baseline; gap: 12px; font-size: 1.25rem; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: #2D2733; }
.cmp-note-l::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #B9B1B6; transform: translateY(-3px); }   /* grey, as in a text editor (Dom) */
.cmp-note-uses { margin-top: auto !important; display: flex; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid #F2ECEF; }
.cmp-note-uses span { margin-right: 4px; font-size: .75rem; font-weight: 700; color: #8B8492; }
.cmp-note-uses img { width: 26px; height: 26px; padding: 4px; border-radius: 8px; background: #fff; border: 1px solid #ECE4E8; }
/* one line under the note: everything it needs comes with it (Dom) */
.cmp-infra { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 16px 0 0; font-size: .9375rem; font-weight: 700; color: #3F3846; }
.cmp-infra span { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink, #16121A); color: #fff; }
.cmp-infra svg { width: 11px; height: 11px; }
.cmp-live {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px;
    font: 800 .625rem/1 Manrope, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
    background: #E7F6EE; color: #17794A; font-style: normal; transition: background-color .3s, color .3s;
}
.cmp-live i { width: 6px; height: 6px; border-radius: 50%; background: #16A34A; }
.cmp-live-off { display: none; }


/* ---------- the cues that replace the facts row (Dom: let the pictures say it) ---------- */
/* left bar: the developers it takes, and the weeks going by */
.cmp-devs { display: inline-flex; align-items: center; margin-left: auto; }
.cmp-devs i {
    display: grid; place-items: center; width: 22px; height: 22px; margin-left: -6px; border-radius: 50%;
    font-size: .5625rem; font-style: normal; font-weight: 800; color: #fff; box-shadow: 0 0 0 2px #F8F5F3;
}
.cmp-devs i:nth-child(1) { margin-left: 0; background: #6B7FD7; }
.cmp-devs i:nth-child(2) { background: #3BA58A; }
.cmp-devs i:nth-child(3) { background: #C7703A; }
.cmp-devs em { margin-left: 6px; font-size: .6875rem; font-style: normal; font-weight: 700; color: #8B8492; white-space: nowrap; }
.cmp-time {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 4px 0 12px; padding: 4px 9px 4px 8px; border-radius: 999px;
    background: #FFF4E5; border: 1px solid #F3D9B4; color: #A15C10; white-space: nowrap;
}
.cmp-time svg { width: 13px; height: 13px; }
.cmp-time b { font-size: .75rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cmp-time small { font-size: .6875rem; font-weight: 600; color: #B67B33; }
/* the flow's size, on its canvas */
.cf-count {
    position: absolute; right: 12px; top: 10px; z-index: 2; margin: 0; padding: 4px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, .92); border: 1px solid #E4DDDA; font-size: .6875rem; font-weight: 600; color: #8B8492;
}
.cf-count b { color: #3F3846; font-weight: 800; font-variant-numeric: tabular-nums; }
/* right: a two-minute clock, the author, and the same reply handled */
.cmp-clock { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 700; color: #6E6774; font-variant-numeric: tabular-nums; }
.cmp-clock svg { width: 13px; height: 13px; color: #8B8492; }
.cmp-note-h .cmp-live { margin-left: auto; }
.cmp-note-by { display: flex; align-items: center; gap: 8px; margin-top: 12px !important; padding-top: 12px; border-top: 1px solid #F2ECEF; font-size: .8125rem; font-weight: 600; color: #6E6774; }
.cmp-you { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink, #16121A); color: #fff; font-size: .5625rem; font-weight: 800; letter-spacing: .02em; }
.cmp-exc { padding: 12px 14px; border-radius: 14px; background: #F4FBF7; border: 1px solid #D5EFE1; }
.cmp-exc p { margin: 0; display: flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 650; color: var(--ink, #16121A); line-height: 1.35; }
.cmp-exc-in small { display: block; font-size: .6875rem; font-weight: 600; color: #8B8492; }
.cmp-exc-in .cf-av { width: 26px; height: 26px; }
.cmp-exc-out { margin-top: 10px !important; color: #17794A !important; }
.cmp-exc-out > span { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #16A34A; color: #fff; }
.cmp-exc-out svg { width: 13px; height: 13px; }

/* ---------- playing once (js/compare.js) ---------- */
.cmp.is-anim .cf-n, .cmp.is-anim .cf-e, .cmp.is-anim .cf-err, .cmp.is-anim .cf-msg, .cmp.is-anim .cf-toast,
.cmp.is-anim .cd-code li, .cmp.is-anim .cd-tree li, .cmp.is-anim .cd-term > span,
.cmp.is-anim .cmp-note .cmp-md-l, .cmp.is-anim .cmp-infra {
    opacity: 0; transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.cmp.is-anim .cf-msg, .cmp.is-anim .cf-toast, .cmp.is-anim .cmp-note .cmp-md-l, .cmp.is-anim .cmp-infra { transform: translateY(6px); }
.cmp.is-anim .is-in { opacity: 1 !important; }
/* only the HTML parts slide; the flowchart's boxes keep their SVG positions */
.cmp.is-anim .cf-msg.is-in, .cmp.is-anim .cf-toast.is-in, .cmp.is-anim .cmp-note .cmp-md-l.is-in, .cmp.is-anim .cmp-infra.is-in { transform: none; }
.cmp.is-anim .cf-n, .cmp.is-anim .cf-e, .cmp.is-anim .cf-err { transition: opacity .3s ease; }
/* the right card waits, quiet, until the left has played */
/* the left card plays alone, in the middle, while the Askpilot card waits
   tucked behind it: a little smaller, under a frosted veil, PEEK px showing
   past the left card's edge with the Askpilot logo on it, and the progress
   bar above (Dom: so visitors know to wait; no label, no dot). Then the two slide apart, the arrow comes in, the veil lifts. */
.cmp-side { position: relative; }
.cmp-side--old { z-index: 2; }
.cmp-side--new { z-index: 1; }
.cmp.is-anim .cmp-side--old { transform: translateX(var(--shift, 0px)); transition: transform 1s cubic-bezier(.65, 0, .25, 1), box-shadow .8s ease; }
.cmp.is-anim:not(.is-right) .cmp-side--old { box-shadow: 0 2px 4px rgba(20, 17, 26, .04), 24px 30px 60px -28px rgba(20, 17, 26, .38); }
.cmp.is-anim .cmp-side--new {
    transform-origin: 100% 50%;
    transition: transform 1.05s cubic-bezier(.65, 0, .25, 1) .05s, box-shadow .8s ease, border-color .8s ease;
}
.cmp.is-anim:not(.is-right) .cmp-side--new {
    transform: translateX(var(--peek-x, 0px)) scale(.94);
    border-color: #CFC6CB; box-shadow: 0 18px 40px -30px rgba(20, 17, 26, .3); pointer-events: none;
}
/* the veil over the waiting card, and the label on the strip that shows */
.cmp-side--new::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: rgba(250, 247, 249, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .7s ease .35s;
}
.cmp.is-anim:not(.is-right) .cmp-side--new::after { opacity: 1; transition-delay: 0s; }
.cmp-peek {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 4; width: 98px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.cmp.is-anim:not(.is-right) .cmp-peek { opacity: 1; }
.cmp-peek img {
    width: 52px; height: 52px; padding: 12px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 1px #ECE4E9, 0 12px 26px -14px rgba(20, 17, 26, .45);
}
/* the progress bar over the cards: part 1 (the hard way) fills while the
   left plays, part 2 (Askpilot) waits grey, then fills (Dom: a wordless
   "wait for it") */
.cmp-prog { display: flex; justify-content: center; gap: 14px; margin: -24px auto 30px; }
.cmp-prog-s { display: flex; align-items: center; gap: 10px; }
.cmp-prog-s i {
    flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: #fff; border: 1px solid #E4DDDA; color: #8B8492; transition: border-color .4s, color .4s, box-shadow .4s;
}
.cmp-prog-s i svg { width: 15px; height: 15px; }
.cmp-prog-s i img { width: 15px; height: 15px; filter: grayscale(1); opacity: .45; transition: filter .4s, opacity .4s; }
.cmp-prog-s b { display: block; width: 150px; height: 4px; border-radius: 2px; background: #E9E2DF; overflow: hidden; }
.cmp-prog-s u { display: block; width: 0; height: 100%; border-radius: inherit; text-decoration: none; transition-property: width; transition-timing-function: linear; }
.cmp-prog-s[data-p="1"] u { background: #9A9298; }
.cmp-prog-s[data-p="2"] u { background: linear-gradient(90deg, var(--brand-magenta, #D53BD5), #F27BE6); }
.cmp-prog-s.is-on i { border-color: #CFC6CA; color: #5E5763; }
.cmp-prog-s[data-p="2"].is-on i { border-color: #EFB6EF; box-shadow: 0 0 0 4px rgba(213, 59, 213, .1); }
.cmp-prog-s[data-p="2"].is-on i img { filter: none; opacity: 1; }
.cmp:not(.is-anim) .cmp-prog { display: none; }
.cmp.is-anim .cmp-arrow { transition: opacity .5s ease .7s, transform .6s cubic-bezier(.2, .8, .2, 1) .7s; }
.cmp.is-anim:not(.is-right) .cmp-arrow { opacity: 0; transform: scale(.6); }
.cmp.is-anim .cmp-live:not(.is-in) { background: #F1EEF2; color: #8B8492; }
.cmp.is-anim .cmp-live:not(.is-in) i { background: #B9B0BC; }
.cmp.is-anim .cmp-live:not(.is-in) .cmp-live-on { display: none; }
.cmp.is-anim .cmp-live:not(.is-in) .cmp-live-off { display: inline; }

@media (max-width: 1179px) {
    .cmp-stage { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 620px; }
    .cmp-arrow, .cmp.is-anim.is-right .cmp-arrow { transform: rotate(90deg); }
    .cmp.is-anim:not(.is-right) .cmp-arrow { transform: rotate(90deg) scale(.6); }
    .cmp.is-anim:not(.is-right) .cmp-side--new { transform: none; }
    .cmp-peek { left: 0; width: auto; }
    .cmp-prog { margin: -16px auto 22px; gap: 10px; }
    .cmp-prog-s b { width: 96px; }
    /* stacked: nothing waits (Dom, 26 Oct 2026). The Askpilot card and the
       arrow show at once, so no veil, no peek and no progress bar */
    .cmp-prog, .cmp-peek { display: none !important; }
    .cmp.is-anim:not(.is-right) .cmp-side--new::after { opacity: 0; }
    .cmp.is-anim:not(.is-right) .cmp-arrow { opacity: 1; transform: rotate(90deg); }
}
@media (max-width: 767px) {
    .cmp { padding: 80px 0; }
    .cmp-h { padding: 20px 20px 0; }
    .cmp-h b { font-size: 1.375rem; }
    .cmp-win { margin: 14px 12px 12px; }   /* the same gap at the bottom as at the sides (Dom) */
    .cmp-devs, .cmp-time small, .cmp-tab svg { display: none; }
    .cmp-time { margin-left: auto; margin-right: 0; padding: 4px 8px; }
    .cmp-bar { gap: 2px; padding: 0 6px; }
    .cmp-tab { padding: 5px 8px; font-size: .6875rem; }
    .cmp-easy { height: auto; margin: 14px 12px 12px; padding: 22px 4px; }
    .cmp-note-l { font-size: 1.0625rem; }
    .cmp-note-t { font-size: 1.375rem; margin-top: 16px !important; }
    .cmp-note-body { margin: 20px 0; gap: 10px; }
    .cmp-easy { min-height: 0; }
    .cmp-body { height: 430px; }
    .cmp-scene[data-scene="agent"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
    .cd-tree { display: none; }
    .cd-ed { grid-column: 1; grid-row: 1; }
    .cd-code { padding: 6px 0; }
    .cd-code li:nth-child(n+7) { display: none; }   /* room for the checklist above the terminal */
    .cd-todo { grid-column: 1 !important; grid-row: 2; border-left: 0; border-top: 1px solid #ECE6E3; padding: 10px 12px 8px; }
    .cd-todo ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
    .cd-todo li { font-size: .6875rem; }
    .cd-term { grid-row: 3; }
    .cf-msg { font-size: .8125rem; }
}

/* the button under the section (from css/from-flowcharts.css, which this
   section replaced) */
.ff-more { margin: 48px 0 0; text-align: center; }
.ff-btn { background: var(--brand-magenta, #D53BD5); border-color: var(--brand-magenta, #D53BD5); color: #fff; }
.ff-btn:hover { background: #BE2EBE; border-color: #BE2EBE; color: #fff; }
.ff-btn:focus-visible { outline: 2px solid var(--brand-magenta, #D53BD5); outline-offset: 3px; }
@media (max-width: 767px) { .ff-more { margin-top: 36px; } }