/* ============================================================
   LOWER COSTS (home page and the three solution pages, 25 Oct 2026; Dom:
   combine "Replace your automation tools. Pay for just one." and "The most
   cost-effective model for every task." into one section, with all their
   content kept, then: "highlight this section background to be really
   highlighted and noticeable", with points 1 and 2 as switching steps for
   how Askpilot saves money; then no backdrop boxes, and "still looks
   weird, keep improving"). Right before Pricing.
     band     a dark band with the brand's magenta and blue light, the one
              dark ground on the page, so the section stands out
     head     eyebrow and the one title: save on tools, save on every run
     frame    ONE glass panel (900px and up, with js/savings.js): steps 1
              and 2 are its two tabs, each with its tag, its title and a
              progress line along the tab's foot; the open step's demo
              plays inside, from the top, then the other step opens.
              Both demos sit in one grid cell, so the height never changes
              (phone stability rules)
     demos    #replace (css/replace-stack.css, js/replace-stack.js) and
              #ai-models (css/model-routing.css, css/ai-models.css,
              js/model-routing.js), restyled for the dark in one language:
              what you have today is dark glass (the separate tools, the
              run's tasks); the result is the one white card with a magenta
              glow (the Askpilot card, "Save on every run")
   Without JS, and under 900px, there is no frame: the two parts stack,
   each under its own numbered head (.sv-part).
   ============================================================ */
.sv {
    position: relative; isolation: isolate; overflow: hidden;
    padding: 120px 0 128px; background: #0A1330; color: #fff;
    --sv-edge: rgba(255, 255, 255, .12);
    --sv-text: rgba(255, 255, 255, .88);
    --sv-dim: rgba(255, 255, 255, .55);
    --sv-faint: rgba(255, 255, 255, .32);
    --sv-pink: #AFC0FF;
}
/* the light: magenta from the top left, blue from the bottom right, a soft
   glow behind the title, and a faint grid that fades out from the top */
.sv::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(40% 46% at 14% 0%, rgba(76, 107, 238, .50), transparent 72%),
        radial-gradient(40% 50% at 90% 100%, rgba(120, 90, 255, .30), transparent 72%),
        radial-gradient(34% 26% at 50% 12%, rgba(120, 150, 255, .18), transparent 72%);
}
.sv::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    /* the header's pattern (Dom, 26 Oct 2026: "copy pattern from header",
       less visible): the 56px grid with the Askpilot mark at every fourth
       crossing, in white and fainter on the navy, fading out from the top */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='224' height='224'%3E%3Cpath d='M0 .5H224M0 56.5H224M0 112.5H224M0 168.5H224M.5 0V224M56.5 0V224M112.5 0V224M168.5 0V224' stroke='white' stroke-opacity='.03'/%3E%3Csvg x='106.00' y='106.46' width='13.00' height='12.08' viewBox='0 0 490 455.462' opacity='.1' fill='white'%3E%3Cg transform='translate%28-66.191 -400.36%29'%3E %3Cpath d='M330.635,237.129l-.569-.957-32.208-65.115q-3.3-6.675-6.131-12.5c-12.521-25.611-18.808-38.443-27.707-43.746-8.9-5.277-24.37-5.122-54.948-4.734H182.528c-18.575,0-36.606,0-54.612-.052h-.155A30,30,0,0,0,98.5,125.189c-14.694,27.578-28.483,55.052-43,84.182q-6.791,13.582-13.556,27.138l.078.052-4.838,8.382a250.483,250.483,0,0,0,70.134,36.089l.362-.776h0l-.052-.052q6.558-13.077,12.987-25.948c13.866-27.707,26.957-53.862,40.487-80.534,6.959-13.659,15.522-20.619,25.43-20.619h0c9.857,0,18.368,6.856,25.223,20.36,11.46,22.636,22.895,45.79,33.916,68.142q6.83,13.892,13.737,27.733c1.863,3.751,3.751,7.476,5.666,11.305l.078-.052v.052l.233.492a250.262,250.262,0,0,0,69.617-35.7c-.129-.259-3.958-8.046-4.243-8.408M44.3,235.163v-.052h0v.052' transform='translate%28125.195 574.688%29'/%3E %3Cpath d='M221.879,140.976c-8.434,15.833-16.816,31.769-25.482,48.17l-10.5,19.894-1.889,3.7c-13.918,27.138-20.9,40.849-29.932,46.308s-23.412,4.838-52.361,3.725l-14.1-.517L12.848,259.72H2.268A249.61,249.61,0,0,1,4.13,181h0c4.294.129,8.537.31,12.806.414l31.406,1.061c25.327.854,51.507,1.733,77.248,2.38,15.393.362,25.534-3.881,30.139-12.573,4.6-8.718,2.406-19.635-6.674-32.286C131.049,114.9,113.25,90.426,94.417,64.5q-7.412-10.167-14.9-20.489l.233-.207A250.245,250.245,0,0,1,144.89.01l3.1,4.734h.052q9.042,12.418,18.083,24.861c19.454,26.724,37.874,52.025,55.8,78.128a29.905,29.905,0,0,1-.078,33.243' transform='translate%2866.186 400.35%29'/%3E %3Cpath d='M106.743,140.945c8.434,15.833,16.816,31.769,25.482,48.17l10.5,19.894,1.889,3.7c13.918,27.138,20.9,40.849,29.932,46.308s23.412,4.838,52.361,3.725l14.1-.517,74.765-2.509H326.38a249.769,249.769,0,0,0-1.863-78.749h0c-4.294.129-8.537.31-12.806.414l-31.406,1.061c-25.327.854-51.507,1.733-77.248,2.38-15.393.362-25.534-3.881-30.139-12.573s-2.406-19.635,6.675-32.286c18.005-25.094,35.8-49.567,54.638-75.489q7.412-10.167,14.9-20.489l-.233-.207A249.125,249.125,0,0,0,183.732.03l-3.1,4.734h-.052q-9.042,12.418-18.083,24.861c-19.454,26.724-37.874,52.025-55.8,78.128A29.905,29.905,0,0,0,106.768,141' transform='translate%28227.549 400.372%29'/%3E %3C/g%3E%3C/svg%3E%3C/svg%3E");
    background-size: 224px 224px; background-position: 50% 0;
    /* and a fade toward the foot (Dom, 26 Oct 2026) */
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 18%, transparent 52%), radial-gradient(75% 60% at 50% 0%, #000 25%, transparent 80%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(180deg, #000 0, #000 18%, transparent 52%), radial-gradient(75% 60% at 50% 0%, #000 25%, transparent 80%);
            mask-composite: intersect;
}
.sv .sec-head { margin-bottom: 64px; }
.sv .sec-eyebrow { color: var(--sv-pink); }
.sv .sec-title { color: #fff; }

/* ---------- the frame and its two tabs (900px and up, with JS) ---------- */
.sv-steps { display: none; }
.sv.is-steps .sv-frame {
    max-width: 1120px; margin: 0 auto; border-radius: 28px; overflow: hidden;
    border: 1px solid var(--sv-edge);
    background: linear-gradient(180deg, #17224A, #111A3B);   /* solid, so the blueprint stops at its edge */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 50px 120px -50px rgba(0, 0, 0, .9);
}
.sv.is-steps .sv-steps { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--sv-edge); }
.sv-step {
    position: relative;
    display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-items: center;   /* no eyebrows (Dom) */
    padding: 26px 32px 28px; margin: 0; border: 0; border-radius: 0; text-align: left; cursor: pointer;
    font: inherit; color: var(--sv-dim); background: transparent;
    transition: background-color .3s ease, color .3s ease;
}
.sv-step + .sv-step { border-left: 1px solid var(--sv-edge); }
.sv-step:hover { color: var(--sv-text); background: rgba(255, 255, 255, .025); }
.sv-step:focus-visible { outline: 2px solid var(--sv-pink); outline-offset: -4px; border-radius: 22px; }
.sv-step.is-on { color: #fff; background: rgba(255, 255, 255, .05); }
.sv-step-n {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: transparent; border: 1.5px solid rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .7); font-size: 1rem; font-weight: 800;
    transition: background .3s ease, border-color .3s ease;
}
.sv-step.is-on .sv-step-n { border-color: #fff; background: #fff; color: #0A1330; box-shadow: 0 0 0 5px rgba(175, 192, 255, .14); }
.sv-step-tag { font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sv-pink); opacity: .7; }
.sv-step.is-on .sv-step-tag { opacity: 1; }
.sv-step-t { font-size: 1.5625rem; font-weight: 780; line-height: 1.18; letter-spacing: -.02em; text-wrap: balance; }   /* a size up, still two lines (Dom) */
/* the progress line along the tab's foot, over the frame's rule */
.sv-step-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.sv-step-bar i {
    display: block; width: 0; height: 100%;
    background: linear-gradient(90deg, #6E8BFF, #C9D4FF);
    box-shadow: 0 0 12px rgba(140, 165, 255, .7);
}
.sv-step.is-run .sv-step-bar i { animation: sv-fill var(--sv-dur, 10s) linear forwards; }
.sv.is-paused .sv-step.is-run .sv-step-bar i { animation-play-state: paused; }
@keyframes sv-fill { to { width: 100%; } }

/* ---------- the two parts ---------- */
.sv-panels { max-width: 1080px; margin: 0 auto; }
.sv-panels > section { padding: 0; border-top: 0; background: transparent; }
.sv-panels > section + section { margin-top: 96px; }
.sv-panels .wrap { max-width: none; padding: 0; }
.sv .rpl-stage, .sv .mr {
    max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}

/* steps on: the frame's body; one demo at a time, both in the same cell */
.sv.is-steps .sv-panels { display: grid; max-width: none; padding: 44px 48px 48px; }
.sv.is-steps .sv-part { display: none; }
.sv.is-steps .sv-panels > section {
    grid-area: 1 / 1; margin: 0; display: flex; flex-direction: column;
    transition: opacity .45s ease, visibility 0s linear .45s;
}
.sv.is-steps .sv-panels > section > .wrap { flex: 1; display: flex; flex-direction: column; width: 100%; }
.sv.is-steps .rpl-stage, .sv.is-steps .mr { flex: 1; }
.sv.is-steps .mr { display: flex; align-items: center; }
.sv.is-steps .mr-stage { width: 100%; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.sv.is-steps .sv-panels > section:not(.is-on) { opacity: 0; visibility: hidden; }
.sv.is-steps .sv-panels > section.is-on { transition: opacity .45s ease, visibility 0s; }

/* ---------- step 1: the separate tools are dark glass ---------- */
.sv .rpl-label { color: var(--sv-dim); }
.sv .rpl-tool, .sv .rpl-tool:nth-child(n) { transform: none; }
.sv .rpl-tool { background: rgba(255, 255, 255, .07); border: 1px dashed rgba(255, 255, 255, .22); }
.sv .rpl-tool b, .sv .rpl-flow-head b { color: #fff; }
.sv .rpl-tool div span, .sv .rpl-flow-head div span { color: var(--sv-dim); }
.sv .rpl-tool .rpl-ico { background: rgba(255, 255, 255, .08); color: var(--sv-text); }
.sv .rpl-tool em { background: rgba(255, 112, 92, .14); color: #FF9F90; }
.sv .rpl-flow { background: rgba(255, 255, 255, .04); }
.sv .rpl-node { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: var(--sv-text); }
.sv .rpl-node.is-trig { background: rgba(244, 161, 93, .14); border-color: rgba(244, 161, 93, .5); color: #FFC9A0; }
.sv .rpl-node.is-trig svg { color: #F4A15D; }
.sv .rpl-node.is-more { background: transparent; border-color: rgba(255, 255, 255, .2); color: var(--sv-dim); }
.sv .rpl-flow > i { background: rgba(255, 255, 255, .2); }
/* replaced: the strike, and the card fades into the dark */
.sv .rpl-tool.is-gone, .sv .rpl-tool.is-gone:nth-child(n) {
    transform: scale(.985); background: rgba(255, 255, 255, .025); border-color: rgba(255, 255, 255, .1);
}
.sv .rpl-tool.is-gone b { color: var(--sv-faint); background-image: linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)); }
.sv .rpl-tool.is-gone > div > span, .sv .rpl-tool.is-gone .rpl-flow-head > div > span { color: rgba(255, 255, 255, .24); }
.sv .rpl-tool.is-gone .rpl-ico { opacity: .5; filter: none; }
.sv .rpl-tool.is-gone em { opacity: .45; filter: grayscale(1); }
.sv .rpl-tool--flow.is-gone .rpl-flow { opacity: .4; filter: grayscale(1); }
/* the arrow: a magenta to blue disc on a faint ring, dashes in white */
.sv .rpl-arrow-track { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .3) 0 5px, transparent 5px 10px); }
.sv .rpl-arrow-dot {
    /* glass, not a solid white disc (Dom): a light frosted circle with a
       white ring and a white arrow */
    background: rgba(255, 255, 255, .12); color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .45);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 0 0 6px rgba(175, 192, 255, .08), 0 12px 30px -10px rgba(0, 0, 0, .5);
}
@keyframes sv-ring {
    from { box-shadow: 0 0 0 6px rgba(175, 192, 255, .08), 0 0 0 6px rgba(175, 192, 255, .45); }
    to   { box-shadow: 0 0 0 6px rgba(175, 192, 255, .08), 0 0 0 24px rgba(175, 192, 255, 0); }
}
.sv .rpl-arrow.is-push .rpl-arrow-dot { animation-name: sv-ring; }

/* ---------- step 2: the run's tasks are dark glass ---------- */
.sv .mr-run { background: rgba(255, 255, 255, .05); border-color: var(--sv-edge); box-shadow: none; }
.sv .mr-run-h { border-bottom-color: var(--sv-edge); }
.sv .mr-run-h b { color: #fff; }
.sv .mr-cols { color: var(--sv-faint); }
.sv .mr-step + .mr-step { border-top-color: rgba(255, 255, 255, .07); }
.sv .mr-step.is-doing { background: rgba(110, 139, 255, .16); }
.sv .mr-step.is-doing .mr-n { background: #6E8BFF; color: #fff; }
.sv .mr-n { background: rgba(255, 255, 255, .08); color: var(--sv-dim); }
.sv .mr-step.is-done .mr-n { background: #fff; color: var(--ink, #16121A); }
.sv .mr-t { color: var(--sv-text); }
.sv .mr-chip { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); color: #fff; }
.sv .mr-chip i { background: #fff; }
.sv .mr-chip small { color: var(--sv-dim); }
.sv .mr-cost u { background: rgba(255, 255, 255, .18); }
.sv .mr-cost u.on { background: #8FA6FF; }
.sv .mr-sum::before { background: rgba(255, 255, 255, .28); }
/* a size up in the frame, so the two steps carry the same weight */
.sv.is-steps .mr-run-h { padding: 17px 22px; }
.sv.is-steps .mr-run-h b { font-size: 1rem; }
.sv.is-steps .mr-cols { padding: 12px 22px 2px; }
.sv.is-steps .mr-step { padding: 15px 22px; }
.sv.is-steps .mr-t { font-size: 1rem; }
.sv.is-steps .mr-chip { padding: 6px 12px 6px 7px; font-size: .8125rem; }
.sv.is-steps .mr-sum { padding: 26px; }
.sv.is-steps .mr-sum-k { font-size: 1.5rem; }
.sv.is-steps .mr-bar { margin-top: 20px; }
.sv.is-steps .mr-bar p { font-size: .875rem; }
.sv.is-steps .mr-track { height: 12px; }

/* ---------- the result: a plain white card on the navy ---------- */
/* no coloured outline or ring (Dom, 26 Oct 2026: "dont like the border and
   colors"): white, a hairline of light at its edge and a soft deep shadow;
   the section's accents are white and one clear blue, so nothing pink
   fights the navy */
.sv .rpl-card, .sv .mr-sum {
    border: 0; background: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 34px 70px -30px rgba(2, 6, 24, .9), 0 12px 30px -16px rgba(60, 90, 220, .35);
}
.sv .mr-sum-k { color: #0A1330; }
.sv .mr-note svg { color: #4C6BEE; }
.sv .rpl-wf.is-in.is-new { box-shadow: 0 0 0 2px rgba(76, 107, 238, .3); }
/* the Askpilot cost: brand pink, glowing, on a faint pink track (Dom: highlighted, "more pinky") */
.sv .mr-bar--best .mr-fill { background: linear-gradient(90deg, #B5179E, #D53BD5 55%, #F28BEF); box-shadow: 0 0 14px rgba(213, 59, 213, .4); }
.sv .mr-bar--best .mr-track { background: #FCEBFB; }
.sv .mr-bar--best p b { color: #B5179E; }
/* in the frame, each result card is as tall as what sits beside it, so the
   two columns line up top and bottom instead of the card floating */
.sv.is-steps .rpl-stage { align-items: stretch; }
.sv.is-steps .rpl-arrow { align-self: center; }
.sv.is-steps .rpl-side--after { display: flex; flex-direction: column; padding-top: 33px; }
.sv.is-steps .rpl-card { flex: 1; display: flex; flex-direction: column; }
.sv.is-steps .rpl-wfs { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.sv.is-steps .rpl-wf { padding: 11px 12px; }
.sv.is-steps .rpl-wf b { font-size: 1rem; }
.sv.is-steps .mr-stage { align-items: stretch; }
/* "Save on every run" in the frame: the two bars stand up as two columns
   that grow as the tasks finish (js/model-routing.js sets --w on each fill),
   so the card fills its height with the comparison, not with space */
.sv.is-steps .mr-sum {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr); column-gap: 18px;   /* no note under the columns: they fill the card (Dom) */
}
.sv.is-steps .mr-sum-k { grid-column: 1 / -1; }
.sv.is-steps .mr-sum .mr-bar { display: flex; flex-direction: column-reverse; min-height: 0; margin-top: 22px; }
.sv.is-steps .mr-sum .mr-bar p { justify-content: center; margin: 12px 0 0; text-align: center; line-height: 1.3; min-height: 2.6em; align-items: flex-start; }
.sv.is-steps .mr-sum .mr-track { flex: 1; width: 96px; height: auto; align-self: center; display: flex; align-items: flex-end; border-radius: 14px; }
.sv.is-steps .mr-sum .mr-fill { width: 100%; height: var(--w, 100%); border-radius: 14px; transition: height .6s cubic-bezier(.3, .7, .3, 1); }
.sv.is-steps .mr-bar--best .mr-fill { background: linear-gradient(0deg, #B5179E, #D53BD5 55%, #F59CF2); box-shadow: 0 -6px 22px -4px rgba(213, 59, 213, .5); }
.sv.is-steps .mr-bar--best .mr-track { background: linear-gradient(0deg, #FBE6FA, #FEF4FE); box-shadow: inset 0 0 0 1px #F5D2F3; }

/* ---------- stacked (under 900px, or without JS): each part's own head ---------- */
.sv-part { text-align: center; margin: 0 auto 36px; }
.sv-tag {
    display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 5px;
    border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
    font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sv-pink);
}
.sv-tag b {
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-magenta, #D53BD5), var(--brand-blue, #4C6BEE));
    color: #fff; font-size: .75rem; letter-spacing: 0;
}
.sv-title {
    margin: 0 auto; max-width: 20em;
    font-size: 2.75rem; font-weight: 800; line-height: 1.08; letter-spacing: -.025em; color: #fff;
    text-wrap: balance;
}

/* the arrow points down once the replace demo stacks (css/replace-stack.css, 900px) */
@media (max-width: 900px) {
    .sv .rpl-arrow-track { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .3) 0 5px, transparent 5px 10px); }
}
@media (max-width: 899px) {
    /* no frame here, so the blueprint stays behind the title, not the cards */
    .sv::after {
        -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 300px);
                mask-image: linear-gradient(180deg, #000 0, transparent 300px);
    }
}
@media (max-width: 767px) {
    .sv { padding: 80px 0 88px; }
    .sv .sec-head { margin-bottom: 48px; }
    .sv-panels > section + section { margin-top: 72px; }
    .sv-part { margin-bottom: 28px; }
    .sv-title { font-size: 1.5rem; }
    .sv-title br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sv-step, .sv-step-n, .sv.is-steps .sv-panels > section { transition: none; }
}

/* step 1's Askpilot card (Dom): darker icons, and each row tagged "Tool
   replaced" in violet instead of a green "Workflow created" */
.sv .rpl-wf .rpl-ico, .sv .rpl-wf--flow .rpl-ico { background: #EFEAF0; color: #3F3846; }
.sv .rpl-trig.is-done { color: #5B2FD9; background: #F1ECFF; border-color: #DCCFFF; }
.sv .rpl-wf.is-in.is-new { background: #F7F3FF; border-color: #CDBBFF; box-shadow: 0 0 0 3px rgba(124, 77, 255, .16); }