/* ============================================================
   YOUR AI CONNECTS ANY SYSTEM (#connect-any, the foot of #setup; Dom,
   26 Oct 2026). A dotted line runs down from the setup box to a dotted
   circle with an arrow, then the title in the middle and a full-width box:
   the four steps as its header, and under them one plain picture (Dom:
   the three-card network was messy for an average person). Your AI is a
   small chat on top, Askpilot and your tool two big tiles under it. One
   route runs the way a real integration does (Dom): your AI down to
   Askpilot through Askpilot MCP, on to your tool, and back; you sign in in
   Askpilot, and it says what Askpilot can now do in the tool. At the foot: three tools to try, and
   the ready-made integrations. Markup from tools/build-connect-any.py,
   played by js/connect-any.js (which draws the lines). The stage has
   fixed heights (phone-stability rules): nothing outside it moves while
   it plays.
   ============================================================ */

.cx {
    margin-top: 36px;
    /* the picture: tile size and the gap the connection crosses */
    --cx-tile: 188px; --cx-tile-h: 172px; --cx-gap: 420px; --cx-tile-top: 192px;
}

/* ---------- the way down, and the title ---------- */
.cx-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cx-lead { display: flex; flex-direction: column; align-items: center; }
.cx-lead::before {
    content: ""; width: 0; height: 76px;
    border-left: 2px dotted #CBC2C8;
}
.cx-lead i {
    display: grid; place-items: center; box-sizing: border-box; width: 46px; height: 46px; margin-top: 6px;
    border-radius: 50%; border: 2px dotted #CBC2C8; background: var(--cream, #FCF9F7); color: #8B8492;
}
.cx-lead svg { width: 19px; height: 19px; }
.cx-title {
    max-width: 100%; margin: 28px auto 0; font-size: 3.125rem; font-weight: 800; line-height: 1.06; letter-spacing: -.03em;
    color: var(--ink, #16121A); text-wrap: balance;
}
.cx-title-a { display: block; color: var(--brand-magenta, #D53BD5); }

/* ---------- the box ---------- */
.cx-demo {
    position: relative; margin: 44px 0 0; padding: 16px; border-radius: 24px;
    border: 1.5px solid var(--ink, #16121A); background: #fff;
    box-shadow: 0 24px 50px -20px rgba(17, 24, 39, .22), 0 2px 6px -2px rgba(17, 24, 39, .06);
}

/* ---------- the four steps, the box's header (Dom: move them up and
   make more of them; the picture under them shows how it works) ---------- */
.cx-steps {
    list-style: none; margin: 0 0 14px; padding: 18px 20px 16px;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border-radius: 16px; background: var(--pink-wash, #FFF3FF);
    box-shadow: inset 0 0 0 1px #F7DDF7;
}
.cx-step { position: relative; min-width: 0; padding-right: 18px; color: var(--muted, #8B8492); }
.cx-step:last-child { padding-right: 0; }
.cx-step i {
    position: relative; z-index: 1; display: grid; place-items: center; box-sizing: border-box; width: 32px; height: 32px;
    border-radius: 50%; border: 1.5px solid #E3D3E2; background: #fff;
    font-style: normal; font-size: .8125rem; font-weight: 800; color: var(--muted, #8B8492);
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.cx-step i svg { display: none; width: 12px; height: 12px; }
/* the line on to the next step: dotted until this one is done */
.cx-step:not(:last-child)::after {
    content: ""; position: absolute; top: 15px; left: 42px; right: 10px; height: 0;
    border-top: 2px dotted #DCC9DB; transition: border-color .3s ease;
}
.cx-step b { display: block; white-space: nowrap; margin-top: 12px; font-size: .9375rem; font-weight: 800; line-height: 1.25; letter-spacing: -.005em; transition: color .3s ease; }
.cx-step small { display: block; white-space: nowrap; margin-top: 4px; font-size: .8125rem; font-weight: 500; line-height: 1.4; color: var(--muted, #8B8492); transition: color .3s ease; }
.cx-step.is-on b, .cx-step.is-done b { color: var(--ink, #16121A); }
.cx-step.is-on small, .cx-step.is-done small { color: var(--body, #4E4854); }
.cx-step.is-on i {
    border-color: var(--brand-magenta, #D53BD5); background: var(--brand-magenta, #D53BD5); color: #fff;
    box-shadow: 0 0 0 5px rgba(213, 59, 213, .16);
}
.cx-step.is-done i { border-color: var(--ink, #16121A); background: var(--ink, #16121A); color: #fff; }
.cx-step.is-done i span { display: none; }
.cx-step.is-done i svg { display: block; }
.cx-step.is-done::after { border-top-style: solid; border-color: var(--ink, #16121A); }

/* ---------- the picture ---------- */
.cx-stage {
    position: relative; height: 400px; overflow: hidden; border-radius: 16px;
    background: linear-gradient(180deg, #FCFAFB 0%, #FAF5F8 100%);
    box-shadow: inset 0 0 0 1px #F1EAEE;
}
.cx-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cx-w { fill: none; stroke-linecap: round; }
/* your AI's way to Askpilot (through Askpilot MCP): dotted until they talk */
.cx-w--mcp { stroke: #D6CDD4; stroke-width: 2.5; stroke-dasharray: 1 6; transition: stroke .35s ease; }
.cx-stage.w-guide .cx-w--mcp { stroke: var(--brand-magenta, #D53BD5); stroke-dasharray: none; }
.cx-mcp-l {
    position: absolute; z-index: 1; left: 0; top: 0;
    display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px;
    border: 1px solid #F2CDF2; background: #fff; font-size: .7rem; font-weight: 750; color: var(--brand-magenta, #D53BD5); white-space: nowrap;
    opacity: 0; transition: opacity .35s ease;
}
.cx-stage.w-guide .cx-mcp-l { opacity: 1; }
/* the gap between your tool and Askpilot, then the connection across it */
.cx-w--base { stroke: #CFC5CC; stroke-width: 2.5; stroke-dasharray: 2 9; }
.cx-w--bridge {
    stroke: url(#cx-grad); stroke-width: 4;
    stroke-dasharray: var(--len, 400) var(--len, 400); stroke-dashoffset: var(--len, 400);
}
.cx-stage.w-bridge .cx-w--bridge { stroke-dashoffset: 0; }
/* once live, small pulses run along it */
.cx-w--flow { stroke: #fff; stroke-width: 2; stroke-dasharray: 2 12; opacity: 0; transition: opacity .3s ease; }
.cx-stage.w-live .cx-w--flow { opacity: .95; animation: cx-flow .9s linear infinite; }
/* and back: data goes both ways once it is live */
.cx-stage.w-live .cx-w--back { stroke-dashoffset: 7; animation-name: cx-flow-back; }
@keyframes cx-flow { to { stroke-dashoffset: -14; } }
@keyframes cx-flow-back { from { stroke-dashoffset: 7; } to { stroke-dashoffset: 21; } }

/* your AI: a small chat above the gap */
.cx-chat {
    position: absolute; z-index: 1; top: 22px; left: 50%; width: 440px; margin-left: -220px; height: 136px;
    box-sizing: border-box; padding: 12px 16px;
    border-radius: 18px; border: 1px solid #E6DFE4; background: #fff;
    box-shadow: 0 1px 2px rgba(22, 18, 26, .05), 0 16px 32px -20px rgba(22, 18, 26, .3);
}
.cx-chat-h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .8125rem; color: var(--ink, #16121A); }
.cx-chat-h b { font-weight: 750; }
.cx-ai-logos { display: flex; }
.cx-ai-logos img {
    box-sizing: border-box; width: 22px; height: 22px; padding: 3px; border-radius: 7px;
    border: 1px solid #ECE6EA; background: #fff;
}
.cx-ai-logos img + img { margin-left: -6px; }
.cx-you { display: flex; justify-content: flex-end; height: 31px; margin: 2px 0 8px; }
.cx-you-t {
    display: inline-block; max-width: 100%; padding: 6px 12px; border-radius: 12px 12px 4px 12px;
    background: var(--soft, #F4EFED); font-size: .84rem; font-weight: 650; line-height: 1.45; color: var(--ink, #16121A); white-space: nowrap;
}
.cx-you-t:empty { visibility: hidden; }
.cx-you-t.is-pop { animation: cx-pop .38s cubic-bezier(.2, .8, .2, 1); transform-origin: 100% 100%; }
@keyframes cx-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } }
.cx-say { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: .84rem; font-weight: 650; color: var(--body, #4E4854); opacity: 0; transition: opacity .3s ease; }
.cx-say.is-on, .cx-say.is-done { opacity: 1; }
/* up to two lines: the longest ("Done. Sign in to the booking system in
   Askpilot to finish.") wraps on a narrow chat */
.cx-say-t { min-width: 0; overflow: hidden; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cx-say i {
    flex: none; margin-top: 1px; display: grid; place-items: center; box-sizing: border-box; width: 18px; height: 18px;
    border-radius: 50%; border: 1.5px solid #E2DBE0; color: #fff;
}
.cx-say i svg { width: 10px; height: 10px; opacity: 0; }
.cx-say.is-on i { border-color: #F2CDF2; border-top-color: var(--brand-magenta, #D53BD5); animation: cx-spin .8s linear infinite; }
.cx-say.is-done i { border-color: var(--ink, #16121A); background: var(--ink, #16121A); animation: none; }
.cx-say.is-done i svg { opacity: 1; }
@keyframes cx-spin { to { transform: rotate(360deg); } }

/* the two tiles: your tool on the left, Askpilot on the right */
.cx-tile {
    position: absolute; z-index: 1; top: var(--cx-tile-top); box-sizing: border-box;
    width: var(--cx-tile); height: var(--cx-tile-h);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 22px; border: 1px solid #E6DFE4; background: #fff;
    box-shadow: 0 1px 2px rgba(22, 18, 26, .05), 0 18px 36px -22px rgba(22, 18, 26, .32);
}
.cx-tool { left: calc(50% + var(--cx-gap) / 2); transition: opacity .25s ease, transform .25s ease; }
.cx-tool.is-swap { opacity: 0; transform: translateY(6px); }
.cx-ap { left: calc(50% - var(--cx-gap) / 2 - var(--cx-tile)); border: 1.5px solid var(--ink, #16121A); }
.cx-tile-logo {
    display: grid; place-items: center; box-sizing: border-box; width: 68px; height: 68px;
    border-radius: 18px; border: 1px solid #ECE6EA; background: #fff; color: var(--brand-blue, #4C6BEE);
}
.cx-tile-logo img, .cx-tile-logo svg { width: 36px; height: 36px; }
.cx-tile-logo.is-own { border-color: transparent; background: #EEF1FD; }
.cx-tile-logo.is-own svg { width: 32px; height: 32px; }
.cx-tile-n { margin-top: 13px; font-size: 1.0625rem; font-weight: 800; color: var(--ink, #16121A); white-space: nowrap; }
.cx-tile-s { display: inline-flex; align-items: center; height: 26px; margin-top: 6px; font-size: .78rem; font-weight: 650; color: var(--muted, #8B8492); white-space: nowrap; }
/* a green light on your tool once it is connected */
.cx-tool::after {
    content: ""; position: absolute; top: 14px; right: 14px; width: 9px; height: 9px; border-radius: 50%;
    background: #22C55E; box-shadow: 0 0 0 3px #DCFCE7; opacity: 0; transition: opacity .3s ease;
}
.cx-stage.w-live .cx-tool::after { opacity: 1; }
/* Askpilot's line: runs your workflows, then Sign in, then Connected */
.cx-ap-st > span { display: none; align-items: center; }
.cx-ap[data-st="idle"] .cx-st-idle,
.cx-ap[data-st="wait"] .cx-st-wait,
.cx-ap[data-st="on"] .cx-st-on { display: inline-flex; }
.cx-st-wait {
    gap: 5px; height: 26px; padding: 0 11px; border-radius: 999px;
    border: 1.5px solid var(--brand-magenta, #D53BD5); background: #fff; color: var(--brand-magenta, #D53BD5); font-weight: 750;
    animation: cx-ask 1.4s ease-in-out infinite;
}
.cx-st-wait svg { width: 12px; height: 12px; }
@keyframes cx-ask { 50% { box-shadow: 0 0 0 5px rgba(213, 59, 213, .14); } }
.cx-ap.is-press .cx-st-wait { animation: cx-press .5s ease; }
@keyframes cx-press { 45% { transform: scale(.92); background: var(--pink-wash, #FFF3FF); } }
.cx-st-on { gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--ok-bg, #E3F5EA); color: var(--ok-fg, #1F6B49); font-weight: 750; }
.cx-st-on i { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; }

/* what travels: the guide (Askpilot to your AI), and your AI building
   the connection (it rides the tip of the line as it is drawn) */
.cx-pkt, .cx-builder { position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; pointer-events: none; will-change: transform; transition: opacity .2s ease; }
.cx-pkt {
    display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px;
    border-radius: 999px; border: 1.5px solid var(--brand-magenta, #D53BD5); background: #fff;
    font-size: .78rem; font-weight: 750; color: var(--brand-magenta, #D53BD5); white-space: nowrap;
    box-shadow: 0 8px 18px -10px rgba(22, 18, 26, .35);
}
.cx-pkt svg { flex: none; width: 14px; height: 14px; }
.cx-pkt-i { display: inline-flex; }
.cx-pkt-i:empty { display: none; }
.cx-pkt.is-ok { border-color: #22C55E; color: var(--ok-fg, #1F6B49); }
.cx-builder {
    display: flex; padding: 4px; border-radius: 999px; border: 1.5px solid var(--ink, #16121A); background: #fff;
    box-shadow: 0 8px 18px -10px rgba(22, 18, 26, .4);
}
.cx-builder img { width: 20px; height: 20px; }
.cx-builder img + img { margin-left: 2px; }
.cx-pkt.is-on, .cx-builder.is-on { opacity: 1; }

/* over the line: how it is connected (the one technical word); under it:
   what Askpilot can now do in your tool */
.cx-via {
    position: absolute; z-index: 1; left: 50%; top: calc(var(--cx-tile-top) + var(--cx-tile-h) / 2 - 42px);
    transform: translateX(-50%);
    display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px;
    border: 1px solid #E6DFE4; background: #fff; font-size: .75rem; font-weight: 700; color: var(--body, #4E4854); white-space: nowrap;
    opacity: 0; transition: opacity .35s ease;
}
.cx-stage.w-label .cx-via { opacity: 1; }
.cx-can {
    position: absolute; z-index: 1; left: 50%; top: calc(var(--cx-tile-top) + var(--cx-tile-h) / 2 + 20px);
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; width: calc(var(--cx-gap) - 24px); margin: 0;
    transform: translate(-50%, 6px); opacity: 0; transition: opacity .4s ease, transform .4s ease;
}
.cx-can-l { width: 100%; text-align: center; font-size: .75rem; font-weight: 650; color: var(--muted, #8B8492); }
.cx-can b {
    display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 9px;
    background: #fff; border: 1px solid #E6DFE4; font-size: .8125rem; font-weight: 750; color: var(--ink, #16121A); white-space: nowrap;
}
.cx-can b::before {
    content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--ink, #16121A)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5 6.8 11 12 5.5'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.cx-stage.w-live .cx-can { opacity: 1; transform: translate(-50%, 0); }

/* ---------- the foot: try it with, and the ready-made ones ---------- */
.cx-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 0 2px; }
.cx-cases {
    display: flex; align-items: center; gap: 4px; max-width: 100%;
    padding: 4px; border-radius: 999px; background: var(--soft, #F4EFED);
}
.cx-cases-l { padding: 0 8px 0 10px; font-size: .8125rem; font-weight: 600; color: var(--muted, #8B8492); white-space: nowrap; }
.cx-case {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 7px;
    border: 0; border-radius: 999px; background: transparent; cursor: pointer;
    font: inherit; font-size: .875rem; font-weight: 700; color: var(--body, #4E4854); white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.cx-case-ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #fff; color: var(--brand-blue, #4C6BEE); }
.cx-case-ico img, .cx-case-ico svg { width: 15px; height: 15px; }
.cx-case:hover { color: var(--ink, #16121A); }
.cx-case.is-on { background: #fff; color: var(--ink, #16121A); box-shadow: 0 1px 2px rgba(22, 18, 26, .08), 0 6px 14px -8px rgba(22, 18, 26, .25); }
.cx-case:focus-visible { outline: 2px solid var(--brand-blue, #4C6BEE); outline-offset: 2px; }
.cx-ready { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .8125rem; font-weight: 650; color: var(--muted, #8B8492); white-space: nowrap; }
.cx-ready-logos { display: flex; gap: 5px; }
.cx-ready-logos img {
    box-sizing: border-box; width: 28px; height: 28px; padding: 5px; border-radius: 8px;
    border: 1px solid #ECE6EA; background: #fff;
}

/* ---------- smaller screens ---------- */
/* below this the four steps do not fit on one line each: they wrap */
@media (max-width: 1099px) {
    .cx-step b, .cx-step small { white-space: normal; }
    .cx-foot { flex-direction: column; }
}
@media (max-width: 980px) {
    .cx { --cx-tile: 168px; --cx-tile-h: 164px; --cx-gap: 280px; }
    .cx-title { font-size: 2.5rem; }
    .cx-steps { padding: 16px; }
    .cx-step { padding-right: 12px; }
    .cx-step b { font-size: .875rem; }
    .cx-step small { font-size: .78rem; }
    .cx-chat { width: 400px; margin-left: -200px; }
}
@media (max-width: 767px) {
    .cx { --cx-tile: 150px; --cx-tile-h: 156px; --cx-gap: 200px; }
}
/* phones: the same picture, smaller; how it is connected moves under the
   tiles, with what Askpilot can now do */
@media (max-width: 640px) {
    .cx { margin-top: 24px; --cx-tile: calc(50% - 34px); --cx-tile-h: 168px; --cx-tile-top: 166px; }
    .cx-lead::before { height: 52px; }
    .cx-lead i { width: 40px; height: 40px; }
    .cx-title { margin-top: 22px; font-size: 2rem; }
    .cx-demo { margin-top: 28px; padding: 10px; border-radius: 20px; }
    .cx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; margin-bottom: 10px; padding: 14px; }
    .cx-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 9px; align-items: center; padding: 0; }
    .cx-step::after { display: none; }
    .cx-step i { width: 28px; height: 28px; font-size: .75rem; }
    .cx-step b { margin: 0; font-size: .8125rem; }
    .cx-step small { display: none; }
    .cx-stage { height: 470px; }
    .cx-chat { top: 12px; left: 12px; right: 12px; width: auto; margin: 0; height: 130px; padding: 11px 13px; }
    .cx-you-t, .cx-say { font-size: .8125rem; }
    .cx-ap { left: 12px; }
    .cx-tool { left: auto; right: 12px; }
    .cx-mcp-l { display: none; }
    /* each tile takes half the row less the gap the line crosses; its
       logo, name and line sit centred with even room round them, and a
       long name wraps rather than touch the edges */
    .cx-tile { box-sizing: border-box; padding: 14px 10px; border-radius: 18px; }
    .cx-tile-logo { width: 54px; height: 54px; border-radius: 15px; }
    .cx-tile-logo img, .cx-tile-logo svg { width: 28px; height: 28px; }
    .cx-tile-logo.is-own svg { width: 26px; height: 26px; }
    .cx-tile-n { margin-top: 12px; max-width: 100%; font-size: .875rem; line-height: 1.2; text-align: center; white-space: normal; }
    .cx-tile-s { height: 24px; margin-top: 8px; font-size: .72rem; }
    .cx-st-wait, .cx-st-on { padding: 0 9px; }
    .cx-tool::after { top: 12px; right: 12px; width: 8px; height: 8px; }
    .cx-builder img { width: 16px; height: 16px; }
    .cx-via { top: calc(var(--cx-tile-top) + var(--cx-tile-h) + 16px); }
    .cx-can { top: calc(var(--cx-tile-top) + var(--cx-tile-h) + 52px); width: calc(100% - 24px); }
    .cx-foot { margin-top: 10px; gap: 12px; }
    .cx-cases { width: 100%; box-sizing: border-box; }
    .cx-cases-l { display: none; }
    .cx-case { flex: 1 1 auto; justify-content: center; gap: 5px; padding: 0 8px 0 5px; font-size: .8125rem; }
    .cx-ready { flex-wrap: wrap; justify-content: center; white-space: normal; }
    .cx-ready-l { width: 100%; text-align: center; }
}
/* the smallest phones: the three tools fit on one row without their logos */
@media (max-width: 400px) {
    .cx-case-ico { display: none; }
    .cx-case { padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .cx-stage.w-live .cx-w--flow, .cx-say.is-on i, .cx-st-wait { animation: none; }
    .cx-tool, .cx-can, .cx-via { transition: none; }
}

/* LogiDebt's mark sits on its own red square: it fills the tile like an
   app icon instead of shrinking inside the white one */
.cx-tile-logo img[src*="logidebt"] { width: 100%; height: 100%; border-radius: 17px; }
.cx-case-ico img[src*="logidebt"] { width: 22px; height: 22px; border-radius: 6px; }
@media (max-width: 640px) {
    .cx-tile-logo img[src*="logidebt"] { width: 100%; height: 100%; border-radius: 14px; }
}