/* ============================================================
   YOUR AI AGENT PLANS THE WORK, ASKPILOT RUNS IT. The gap, stated once.

   A band right after the hero demo, drawn in the same blueprint language
   as the hero canvas: a thin rule on top of the section, then one canvas
   with a 1px frame, lit by a soft orange and magenta glow, with faint rings
   spreading out from the handover arrow.
   On it sit two plain cards of equal weight, the AI agent the visitor
   already uses on the left and Askpilot on the right, joined by the
   handover arrow. Black and white with one accent: Askpilot's magenta
   checks and closing line. No glows, no gradient borders. On a phone the
   canvas runs edge to edge, the cards stack and the arrow points down.
   ============================================================ */

.ho {
    --ho-ink: #14111A;
    --ho-body: #4B4553;
    --ho-muted: #7A7483;
    --ho-line: #EAE3E1;
    --ho-magenta: var(--brand-magenta, #D53BD5);
    --ho-ok: #1F9D62;

    padding: 104px 0 112px;
    border-top: 1px solid var(--ho-line);
    color: var(--ho-body);
}
.ho .sec-title { margin-bottom: 0; color: var(--ho-ink); }

/* --- the canvas ------------------------------------------------------------ */
.ho-canvas {
    position: relative; isolation: isolate; overflow: hidden;
    max-width: 1080px; margin: 56px auto 0; padding: 56px;
    border: 1px solid var(--ho-line); border-radius: 32px;
    /* white, with a soft orange light from the top left (the AI agent side)
       and a soft magenta light from the bottom right (the Askpilot side) */
    background-color: #FFFFFF;
    background-image:
        radial-gradient(45% 70% at 0% 0%, rgba(245, 128, 56, 0.14), transparent 70%),
        radial-gradient(45% 70% at 100% 100%, rgba(213, 59, 213, 0.12), transparent 70%);
}
/* The rings: faint concentric circles spreading out from the black disc of
   the handover arrow, like ripples, so the eye settles on the handover.
   Drawn by the arrow itself (.ho-arrow::before, below), so their centre is
   always the centre of the disc, on desktop and on a phone. Hairline rings
   every 36px at low strength, fading out well before the canvas edge, and
   painted behind the cards. Static. */

/* --- the two cards and the arrow between them ---------------------------- */
.ho-pair {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
    gap: 0; max-width: 920px; margin: 0 auto;
}
.ho-card {
    display: flex; flex-direction: column;
    padding: 32px 32px 28px; border-radius: 20px;
    background: #FFFFFF; border: 1px solid #E3DCDA;
    /* lifted off the canvas: a crisp contact shadow plus a soft,
       wide one, so the cards read as the focus of the frame */
    box-shadow:
        0 1px 2px rgba(20, 17, 26, 0.06),
        0 4px 10px -4px rgba(20, 17, 26, 0.08),
        0 20px 40px -20px rgba(20, 17, 26, 0.22);
}
/* Askpilot, the card the handover points to, is outlined in the page's ink. */
.ho-card--ask { border-color: var(--ho-ink); }
.ho-logos { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.ho-logos img {
    width: 34px; height: 34px; padding: 6px; border-radius: 10px;
    background: #FFFFFF; border: 1px solid var(--ho-line);
}
.ho-card-title { margin: 0 0 16px; font-size: 1.25rem; font-weight: 700; color: var(--ho-ink); }
.ho-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; flex: 1; }
.ho-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 1rem; line-height: 1.5; color: var(--ho-body); }
.ho-list svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--ho-ok); }
.ho-card--ask .ho-list svg { color: var(--ho-magenta); }
.ho-foot {
    margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--ho-line);
    font-size: 0.9375rem; font-weight: 600; color: var(--ho-muted);
}
.ho-card--ask .ho-foot { color: var(--ho-magenta); }

/* The handover: a dashed line from card to card whose dashes flow toward
   Askpilot, a dark disc on it whose arrow gives a small push on each beat,
   and the "hands over" label under the disc. */
.ho-arrow {
    position: relative; align-self: center; width: 112px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    font-size: 0.8125rem; font-weight: 600; color: var(--ho-muted); text-align: center;
}
.ho-arrow::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: 50%; top: 24px; width: 900px; height: 900px; margin: -450px 0 0 -450px;
    background-image: repeating-radial-gradient(circle at 50% 50%,
        transparent 0 35px, rgba(22, 18, 26, 0.045) 35px 36px);
    -webkit-mask-image: radial-gradient(closest-side circle, #000 30%, transparent 100%);
            mask-image: radial-gradient(closest-side circle, #000 30%, transparent 100%);
}
.ho-arrow-track {
    position: absolute; top: 23px; left: 0; right: 0; height: 1px;
    background: repeating-linear-gradient(90deg, #BDB5B9 0 5px, transparent 5px 10px);
    animation: ho-flow 0.8s linear infinite;
}
.ho-arrow-dot {
    position: relative; z-index: 1; display: grid; place-items: center;
    width: 48px; height: 48px; border-radius: 999px;
    background: var(--ho-ink); color: #FFFFFF;
    box-shadow: 0 0 0 6px #FFFFFF;
}
.ho-arrow-dot svg {
    width: 20px; height: 20px;
    animation: ho-push 1.8s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
@keyframes ho-flow { to { background-position: 10px 0; } }
@keyframes ho-push {
    0%, 60%, 100% { transform: translateX(-2px); }
    30%           { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .ho-arrow-track, .ho-arrow-dot svg { animation: none; }
}

/* Where to go next, under the box: the page's two actions, centred. */
.ho-cta {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    margin: 36px 0 0;
}

@media (max-width: 767px) {
    /* On a phone the glow lights the whole section, from the title down,
       instead of a frame inside it. */
    .ho {
        position: relative; isolation: isolate; overflow: hidden;
        padding: 72px 0 80px;
        background-color: #FFFFFF;
        background-image:
            radial-gradient(90% 35% at 0% 0%, rgba(245, 128, 56, 0.15), transparent 70%),
            radial-gradient(90% 35% at 100% 100%, rgba(213, 59, 213, 0.13), transparent 70%);
    }
    /* the canvas stays positioned so the rings stay centred on the arrow,
       but lets them spill past the cards into the section */
    .ho-canvas {
        position: relative; overflow: visible;
        margin: 40px 0 0; padding: 0;
        border: 0; border-radius: 0; background: none;
    }
    .ho .sec-head, .ho-pair { position: relative; }
    .ho-pair { grid-template-columns: 1fr; }
    .ho-card { padding: 24px 20px 20px; }
    /* Between the stacked cards: the line runs down, the arrow points down,
       the label sits beside the disc. */
    .ho-arrow { width: auto; height: 76px; flex-direction: row; justify-content: center; }
    .ho-arrow::before { top: 38px; }
    .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-arrow-label { position: absolute; left: calc(50% + 36px); }
    .ho-arrow-dot svg { animation-name: ho-push-down; }
    @keyframes ho-flow-down { to { background-position: 0 10px; } }
    @keyframes ho-push-down {
        0%, 60%, 100% { transform: rotate(90deg) translateX(-2px); }
        30%           { transform: rotate(90deg) translateX(3px); }
    }
}