/* ============================================================
   REPLACE YOUR AI TOOLS (home page). Five separate AI point tools on
   the left; one Askpilot card on the right where each comes back as a
   workflow. js/replace-stack.js moves them across one at a time; without
   JS (or with reduced motion) every workflow row shows.
   ============================================================ */

.rpl { padding: 112px 0; border-top: 1px solid var(--line); }
.rpl .sec-lede { max-width: 820px; margin-left: auto; margin-right: auto; }

.rpl-stage {
    display: grid; grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1.05fr); align-items: center;
    max-width: 1080px; margin: 56px auto 0; padding: 48px;
    border: 1px solid var(--line); border-radius: 32px;
    background-color: #fff;
    background-image:
        radial-gradient(45% 70% at 0% 0%, rgba(122, 116, 131, 0.08), transparent 70%),
        radial-gradient(45% 70% at 100% 100%, rgba(213, 59, 213, 0.10), transparent 70%);
}
.rpl-label { margin: 0 0 14px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }

/* left: the point tools, each its own little island */
.rpl-tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rpl-tool {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center;
    padding: 12px 14px; border-radius: 14px; background: #fff;
    border: 1px dashed #D6CFCD;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1), background-color .4s, border-color .4s;
}
.rpl-tool:nth-child(odd) { transform: translateX(-6px); }
.rpl-tool:nth-child(even) { transform: translateX(6px); }
.rpl-tool b { display: inline; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.rpl-tool div span { font-size: 0.8125rem; color: var(--muted); }
.rpl-tool em {
    font-style: normal; font-size: 0.6875rem; font-weight: 700; white-space: nowrap;
    padding: 3px 8px; border-radius: 999px; background: #FDEDEC; color: #B4442F;
}
.rpl-ico {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
    background: var(--soft); color: var(--body);
}
.rpl-ico svg { width: 18px; height: 18px; }
/* a tool that has moved into Askpilot: a magenta strike is drawn across its
   name, left to right, and the rest of the card goes quiet. The card itself
   keeps full opacity, so the strike stays bright. The strike is a background
   on the inline name, so it follows the text, also over 2 lines. */
.rpl-tool b, .rpl-flow-head b {
    display: inline;
    background-image: linear-gradient(var(--brand-magenta, #D53BD5), var(--brand-magenta, #D53BD5));
    background-repeat: no-repeat; background-position: 0 58%; background-size: 0% 2px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    transition: background-size .32s cubic-bezier(.4, 0, .2, 1), color .4s;
}
.rpl-tool:not(.rpl-tool--flow) > div > span, .rpl-flow-head > div > span { display: block; }
.rpl-tool .rpl-ico, .rpl-tool em, .rpl-tool > div > span, .rpl-flow-head > div > span, .rpl-flow {
    transition: opacity .4s, filter .4s, color .4s;
}
.rpl-tool.is-gone { background-color: #FAF8F7; border-color: #E6E0DE; transform: translateX(10px) scale(.98); }
.rpl-tool.is-gone b { background-size: 100% 2px; color: #9C95A0; }
.rpl-tool.is-gone .rpl-ico { opacity: .4; filter: grayscale(1); }
.rpl-tool.is-gone > div > span, .rpl-tool.is-gone .rpl-flow-head > div > span { color: #B5AFB7; }
.rpl-tool.is-gone em { opacity: .45; filter: grayscale(1); text-decoration: line-through; }

/* the arrow, same language as the handover arrow */
.rpl-arrow { position: relative; height: 48px; display: grid; place-items: center; }
.rpl-arrow-track {
    position: absolute; top: 50%; left: 8px; right: 8px; height: 1px;
    background: repeating-linear-gradient(90deg, #BDB5B9 0 5px, transparent 5px 10px);
    animation: rpl-flow .8s linear infinite;
}
.rpl-arrow-dot {
    position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px;
    background: var(--ink); color: #fff; box-shadow: 0 0 0 6px #fff;
    transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.rpl-arrow-dot svg { width: 20px; height: 20px; }
/* each time a tool is crossed out (js/replace-stack.js adds .is-push), the
   arrow pushes once toward Askpilot and a magenta ring leaves the disc */
@keyframes rpl-push { 0% { transform: translateX(0); } 35% { transform: translateX(6px); } 100% { transform: translateX(0); } }
@keyframes rpl-push-down { 0% { transform: rotate(90deg) translateX(0); } 35% { transform: rotate(90deg) translateX(6px); } 100% { transform: rotate(90deg) translateX(0); } }
@keyframes rpl-ring {
    from { box-shadow: 0 0 0 6px #fff, 0 0 0 6px rgba(213, 59, 213, .55); }
    to   { box-shadow: 0 0 0 6px #fff, 0 0 0 22px rgba(213, 59, 213, 0); }
}
.rpl-arrow.is-push .rpl-arrow-dot { animation: rpl-ring .7s ease-out 1; }
.rpl-arrow.is-push .rpl-arrow-dot svg { animation: rpl-push .55s cubic-bezier(.3, .7, .3, 1) 1; }
@keyframes rpl-flow { to { background-position: 10px 0; } }

/* right: the one Askpilot card */
.rpl-card {
    padding: 22px 22px 20px; border-radius: 20px; background: #fff; border: 1.5px solid var(--ink);
    box-shadow: 0 24px 50px -20px rgba(17, 24, 39, .22), 0 2px 6px -2px rgba(17, 24, 39, .06);
}
.rpl-card-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.rpl-card-head img { width: 38px; height: 38px; padding: 7px; border-radius: 11px; border: 1px solid var(--line); }
.rpl-card-head b { display: block; font-size: 1.125rem; color: var(--ink); }
.rpl-card-head div span { font-size: 0.8125rem; color: var(--muted); }
.rpl-wfs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rpl-wf {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center;
    padding: 8px 10px; border-radius: 12px; background: var(--cream); border: 1px solid var(--line);
}
.rpl-wf .rpl-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--pink-wash); color: var(--brand-magenta); }
.rpl-wf .rpl-ico svg { width: 16px; height: 16px; }
.rpl-wf b { font-size: 0.9375rem; color: var(--ink); }
.rpl-trig { font-size: 0.75rem; font-weight: 650; color: var(--body); padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--line); white-space: nowrap; }
/* with JS, rows wait to arrive */
.rpl.is-anim .rpl-wf { opacity: 0; transform: translateX(-12px); }
.rpl.is-anim .rpl-wf.is-in { opacity: 1; transform: none; transition: opacity .45s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.rpl-wf.is-in.is-new { box-shadow: 0 0 0 2px rgba(213, 59, 213, .25); }


@media (max-width: 900px) {
    .rpl { padding: 80px 0; }
    .rpl-stage { grid-template-columns: 1fr; padding: 24px 16px; border-radius: 24px; }
    .rpl-tool:nth-child(n) { transform: none; }
    .rpl-tool.is-gone { transform: scale(.98); }
    .rpl-arrow.is-push .rpl-arrow-dot svg { animation-name: rpl-push-down; }
    .rpl-arrow { height: 72px; }
    .rpl-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: rpl-flow-down; }
    .rpl-arrow-dot svg { transform: rotate(90deg); }
    @keyframes rpl-flow-down { to { background-position: 0 10px; } }
}
@media (max-width: 520px) {
    .rpl-tool { grid-template-columns: 36px minmax(0, 1fr); }
    .rpl-tool em { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
    .rpl-arrow-track { animation: none; }
    .rpl-arrow.is-push .rpl-arrow-dot, .rpl-arrow.is-push .rpl-arrow-dot svg { animation: none; }
    .rpl-tool, .rpl-wf { transition: none !important; }
}
.rpl .sec-lede { max-width: 900px; }

/* ---- the flowchart automation tool (Zapier-style) on the "today" side,
   and the row it becomes in Askpilot ---- */
.rpl-tool--flow { display: block; padding: 12px 14px 14px; }
.rpl-flow-head { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.rpl-flow-head b { display: inline; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.rpl-flow-head div span { font-size: 0.8125rem; color: var(--muted); }
.rpl-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; margin-top: 12px; padding: 10px; border-radius: 10px; background: var(--soft); }
.rpl-node {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 8px;
    background: #fff; border: 1px solid #DCD5D3; font-size: 0.75rem; font-weight: 650; color: var(--ink); white-space: nowrap;
}
.rpl-node.is-trig { border-color: #F4A15D; background: #FFF4EA; }
.rpl-node.is-trig svg { width: 11px; height: 11px; color: #E46A1C; }
.rpl-flow > i { width: 14px; height: 2px; background: #C9C1BF; flex: none; }
.rpl-tool--flow.is-gone .rpl-flow { opacity: .45; filter: grayscale(1); }
.rpl-wf--flow .rpl-ico { background: #FFF1E6; color: #E46A1C; }
@media (max-width: 520px) {
    .rpl-flow-head { grid-template-columns: 36px minmax(0, 1fr); }
}
/* flowchart card, tidier: the flow fits one line */
.rpl-flow-head { grid-template-columns: 36px minmax(0, 1fr); align-items: start; }
.rpl-flow-head div { display: block; }
.rpl-flow-head > div > span { margin-top: 2px; }
.rpl-flow { flex-wrap: nowrap; overflow: hidden; }
.rpl-node { padding: 4px 8px; font-size: 0.71875rem; }
.rpl-node.is-more { border-style: dashed; color: var(--muted); background: transparent; }
.rpl-flow > i { width: 12px; }
@media (max-width: 520px) { .rpl-flow { flex-wrap: wrap; } }
/* the Askpilot card's name and its line sit closer together */
.rpl-card-head div { display: flex; flex-direction: column; gap: 1px; }
.rpl-card-head b { line-height: 1.2; }
.rpl-card-head div span { display: block; line-height: 1.3; }
/* every Askpilot row ends the same way: a green check and "Workflow created" */
.rpl-trig.is-done {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--ok-fg, #1F6B49); background: var(--ok-bg, #E3F5EA); border-color: #CBEBD7;
}
.rpl-trig.is-done svg { width: 12px; height: 12px; flex: none; }
/* phones: the tag goes under the workflow name, as the tools' tags do on the left */
@media (max-width: 520px) {
    .rpl-wf { grid-template-columns: 30px minmax(0, 1fr); row-gap: 6px; }
    .rpl-wf .rpl-trig { grid-column: 2; justify-self: start; }
}
/* phones (2026-10-12): a tighter list of tools, so the before and the after
   sit closer together; the tool's name says what it does */
@media (max-width: 520px) {
    .rpl-tools { gap: 8px; }
    .rpl-tool { padding: 10px 12px; row-gap: 6px; }
    .rpl-tool:not(.rpl-tool--flow) > div > span { display: none; }
    .rpl-tool .rpl-ico { width: 32px; height: 32px; }
}