/* ============================================================
   HOW ASKPILOT EXECUTES (home page, 2026-10-23): "Reliable like
   software. Flexible like a person." Under Why Askpilot. Four boxes, a
   title and a picture each, on the brand pink like the With Askpilot boxes
   above. Each picture plays once when its box is on screen
   (js/how-it-executes.js adds .is-on):
     env   the steps run one by one in a controlled environment, a step
           outside the allowed tools is blocked
     todo  the instruction's phrases light up, then become todos
     cost  the cost per run falls as the runs go by (no figures)
     ask   Ask types a question, two answers, one picked, it carries on
   The rules below the base styles are the finished frame (no script,
   reduced motion); .is-anim hides what has not played yet. Fixed heights:
   nothing moves the page.
   ============================================================ */
.ex { padding: 112px 0; border-top: 1px solid var(--line); }
.ex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin: 0 auto; }
.ex-box {
    display: flex; flex-direction: column; gap: 18px; padding: 26px;
    background: #fff; border: 1px solid #E8E1DE; border-radius: 24px;
    box-shadow: 0 22px 44px -36px rgba(38, 20, 40, .35);
}
.ex-box h3 { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.ex-vis {
    position: relative; height: 272px; margin-top: auto; display: flex; align-items: center; justify-content: center; padding: 20px;
    border-radius: 16px; border: 1px solid #F1E6EF; overflow: hidden;
    background: radial-gradient(120% 90% at 50% 0%, #FFF0FF 0%, #FFF7FD 55%, #FBF8F7 100%);
}
.ex-card { background: #fff; border: 1px solid #EADCE7; border-radius: 12px; box-shadow: 0 10px 24px -18px rgba(38, 20, 40, .35); }

/* ---- env: a controlled environment ---- */
.ex-env { width: 100%; max-width: 400px; padding: 12px 14px 6px; }
.ex-env-h {
    display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px dashed #E3CFE0;
    font-size: .8125rem; font-weight: 700; color: var(--ink);
}
.ex-lock { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--pink-wash); color: var(--pink-deep); }
.ex-lock svg { width: 13px; height: 13px; }
.ex-allow { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: .6875rem; font-weight: 600; color: var(--muted); }
.ex-allow img { width: 13px; height: 13px; }
.ex-steps { margin: 0; padding: 0; list-style: none; }
.ex-step { display: flex; align-items: center; gap: 9px; padding: 8px 0; font-size: .8125rem; color: var(--ink); white-space: nowrap; }
.ex-step + .ex-step { border-top: 1px solid #F3EAF1; }
.ex-step img { width: 14px; height: 14px; flex: none; }
.ex-step b { font-weight: 600; }
.ex-step em { margin-left: auto; font-style: normal; font-size: .75rem; color: var(--muted); }
.ex-st { position: relative; flex: none; width: 18px; height: 18px; }
.ex-spin { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #F0DDF0; border-top-color: var(--pink-deep); opacity: 0; }
.ex-ok { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: #2F9E6A; color: #fff; }
.ex-ok svg, .ex-st--no svg { width: 9px; height: 9px; }
.ex-st--no { display: grid; place-items: center; border-radius: 50%; background: #FCECEF; color: #D2486A; }
.ex-step--no b { color: #9A8E98; text-decoration: line-through; text-decoration-color: rgba(210, 72, 106, .55); }
.ex-step--no img { filter: grayscale(1); opacity: .5; }
.ex-step--no em { color: #D2486A; font-weight: 700; background: #FCECEF; padding: 2px 9px; border-radius: 999px; }

/* ---- todo: an instruction becomes todos ---- */
.ex-todo { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ex-say { margin: 0; padding: 11px 14px; font-size: .875rem; line-height: 1.6; color: var(--ink); }
.ex-say mark {
    --t: color-mix(in srgb, var(--c) 15%, transparent);
    color: inherit; padding: 0 1px; border-radius: 2px; background-color: transparent;
    background-image: linear-gradient(var(--t), var(--t)), linear-gradient(var(--c), var(--c));
    background-repeat: no-repeat; background-position: 0 0, 0 100%; background-size: 100% 100%, 100% 2px;
}
.ex-down { display: grid; place-items: center; color: var(--pink-deep); }
.ex-down svg { width: 16px; height: 16px; }
.ex-todos { width: 100%; margin: 0; padding: 4px 12px; list-style: none; }
.ex-todos li { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: .8125rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ex-todos li + li { border-top: 1px solid #F3EAF1; }
.ex-todos li em { flex: none; width: 12px; height: 12px; border-radius: 3.5px; border: 1.5px solid var(--c); }
.ex-badge { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--pink-wash); color: var(--pink-deep); font-size: .6875rem; font-weight: 700; }

/* ---- cost: the cost per run falls ---- */
.ex-chart { width: 100%; max-width: 400px; padding: 12px 14px 10px; }
.ex-chart-h { display: flex; align-items: center; margin: 0 0 6px; font-size: .8125rem; font-weight: 700; color: var(--ink); }
.ex-trend {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
    background: #EAF7F0; color: var(--ok-fg, #1E7A4E); font-size: .6875rem; font-weight: 700;
}
.ex-trend svg { width: 12px; height: 12px; }
.ex-graph { display: block; width: 100%; height: auto; overflow: visible; }
.ex-gridl path { fill: none; stroke: #F1E6EF; stroke-width: 1; stroke-dasharray: 3 4; }
.ex-line { fill: none; stroke: var(--pink-deep); stroke-width: 2.5; stroke-linecap: round; }
.ex-run { fill: #EBB8EB; }
.ex-pt { fill: #fff; stroke: var(--pink-deep); stroke-width: 2; }
.ex-pt--b { fill: var(--pink-deep); stroke: #fff; }
.ex-ring { fill: none; stroke: var(--pink-deep); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ex-axis { display: flex; justify-content: space-between; margin: 6px 0 0; font-size: .6875rem; font-weight: 600; color: var(--muted); }

/* ---- ask: a question when something is unclear ---- */
.ex-chat { width: 100%; max-width: 400px; padding: 14px; }
.ex-msg { display: flex; align-items: flex-start; gap: 10px; }
.ex-av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.ex-av img { width: 15px; height: 15px; }
.ex-bub { position: relative; flex: 1; min-width: 0; }
.ex-bub p { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--ink); }
.ex-bub p b { display: block; margin-bottom: 2px; font-size: .75rem; font-weight: 700; }
.ex-typing { position: absolute; left: 0; top: 24px; display: inline-flex; gap: 4px; opacity: 0; visibility: hidden; }
.ex-typing i { width: 6px; height: 6px; border-radius: 50%; background: #CDBFCB; }
.ex-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 36px; }
.ex-opt {
    padding: 6px 12px; border-radius: 999px; border: 1px solid #E3D6E1; background: #fff;
    font-size: .75rem; font-weight: 650; color: var(--body);
}
.ex-opt--pick { background: var(--brand-blue, #4C6BEE); border-color: var(--brand-blue, #4C6BEE); color: #fff; }
.ex-done { display: flex; align-items: center; gap: 7px; margin: 12px 0 0 36px; font-size: .75rem; font-weight: 600; color: var(--ok-fg, #1E7A4E); }
.ex-done-i { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #2F9E6A; color: #fff; }
.ex-done-i svg { width: 9px; height: 9px; }

/* ============================================================
   THE PLAY. Transitions carry the order (delays); .ex-box:not(.is-on)
   holds what has not played. .no-tr switches it on without animating.
   ============================================================ */
.ex.no-tr, .ex.no-tr * { transition: none !important; animation: none !important; }

/* env: a step every 650ms, a spinner, then its tick; the third is blocked */
.ex.is-anim .ex-step { transition: opacity .3s ease, transform .35s ease; transition-delay: calc(250ms + var(--i) * 650ms); }
.ex.is-anim .ex-box:not(.is-on) .ex-step { opacity: 0; transform: translateY(6px); }
.ex.is-anim .ex-box.is-on .ex-spin { animation: ex-turn .8s linear infinite, ex-life 500ms steps(1, end) both; animation-delay: 0s, calc(250ms + var(--i) * 650ms); }
.ex.is-anim .ex-ok { transition: transform .35s cubic-bezier(.2, 1.6, .4, 1); transition-delay: calc(750ms + var(--i) * 650ms); }
.ex.is-anim .ex-box:not(.is-on) .ex-ok { transform: scale(0); }
.ex.is-anim .ex-st--no, .ex.is-anim .ex-step--no em { transition: opacity .25s ease, transform .35s cubic-bezier(.2, 1.6, .4, 1); transition-delay: calc(600ms + var(--i) * 650ms); }
.ex.is-anim .ex-box:not(.is-on) .ex-st--no,
.ex.is-anim .ex-box:not(.is-on) .ex-step--no em { opacity: 0; transform: scale(.6); }
.ex.is-anim .ex-box.is-on .ex-step--no { animation: ex-shake .45s ease calc(650ms + var(--i) * 650ms); }
@keyframes ex-turn { to { transform: rotate(360deg); } }
@keyframes ex-life { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ex-shake { 25% { translate: -3px 0; } 50% { translate: 3px 0; } 75% { translate: -2px 0; } }

/* todo: the phrases light up one by one, then become todos */
.ex.is-anim .ex-say mark { transition: background-size .45s ease; transition-delay: calc(300ms + var(--i) * 450ms); }
.ex.is-anim .ex-box:not(.is-on) .ex-say mark { background-size: 0% 100%, 0% 2px; }
.ex.is-anim .ex-down { transition: opacity .3s ease, transform .35s ease; transition-delay: 1650ms; }
.ex.is-anim .ex-box:not(.is-on) .ex-down { opacity: 0; transform: translateY(-4px); }
.ex.is-anim .ex-todos { transition: opacity .3s ease; transition-delay: 1800ms; }
.ex.is-anim .ex-box:not(.is-on) .ex-todos { opacity: 0; }
.ex.is-anim .ex-todos li { transition: opacity .3s ease, transform .35s ease; transition-delay: calc(1900ms + var(--i) * 220ms); }
.ex.is-anim .ex-box:not(.is-on) .ex-todos li { opacity: 0; transform: translateX(-6px); }

/* cost: the line falls as the runs go by, then the end point and the trend */
.ex.is-anim .ex-line { stroke-dasharray: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.45, 0, .3, 1); transition-delay: 250ms; }
.ex.is-anim .ex-box:not(.is-on) .ex-line { stroke-dashoffset: 1; }
.ex.is-anim .ex-area { transition: opacity .8s ease; transition-delay: 900ms; }
.ex.is-anim .ex-box:not(.is-on) .ex-area { opacity: 0; }
.ex.is-anim .ex-run { transition: opacity .25s ease; transition-delay: calc(350ms + var(--i) * 160ms); }
.ex.is-anim .ex-box:not(.is-on) .ex-run { opacity: 0; }
.ex.is-anim .ex-pt--a { transition: opacity .25s ease; transition-delay: 200ms; }
.ex.is-anim .ex-box:not(.is-on) .ex-pt--a { opacity: 0; }
.ex.is-anim .ex-pt--b { transform-box: fill-box; transform-origin: center; transition: transform .4s cubic-bezier(.2, 1.6, .4, 1); transition-delay: 2000ms; }
.ex.is-anim .ex-box:not(.is-on) .ex-pt--b { transform: scale(0); }
.ex.is-anim .ex-box.is-on .ex-ring { animation: ex-ping 1.2s ease-out 2.2s 2; }
@keyframes ex-ping { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }
.ex.is-anim .ex-trend { transition: opacity .3s ease, transform .4s cubic-bezier(.2, 1.6, .4, 1); transition-delay: 2200ms; }
.ex.is-anim .ex-box:not(.is-on) .ex-trend { opacity: 0; transform: scale(.7); }

/* ask: typing, the question, the answers, one picked, it carries on */
/* the dots show for one second, then go for good: hidden with visibility as
   well as opacity, and their bounce stops with them, because iPhone Safari
   kept bouncing dots on screen over the question (Dom, 27 Oct 2026) */
.ex.is-anim .ex-box.is-on .ex-typing { animation: ex-type 1000ms linear both 150ms; }
@keyframes ex-type { 0%, 99% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
.ex.is-anim .ex-box.is-on .ex-typing i { animation: ex-bob .5s ease-in-out 150ms 2; }
.ex.is-anim .ex-box.is-on .ex-typing i:nth-child(2) { animation-delay: .3s; animation-iteration-count: 1.7; }
.ex.is-anim .ex-box.is-on .ex-typing i:nth-child(3) { animation-delay: .45s; animation-iteration-count: 1.4; }
@keyframes ex-bob { 50% { transform: translateY(-3px); } }
.ex.is-anim .ex-bub p { transition: opacity .35s ease; transition-delay: 1150ms; }
.ex.is-anim .ex-box:not(.is-on) .ex-bub p { opacity: 0; }
.ex.is-anim .ex-opt { transition: opacity .3s ease, transform .35s ease, background-color .25s ease, border-color .25s ease, color .25s ease; transition-delay: 1700ms; }
.ex.is-anim .ex-opt + .ex-opt { transition-delay: 1820ms; }
.ex.is-anim .ex-box:not(.is-on) .ex-opt { opacity: 0; transform: translateY(5px); }
.ex.is-anim .ex-opt--pick { transition-delay: 1700ms, 1700ms, 2500ms, 2500ms, 2500ms; }
.ex.is-anim .ex-box:not(.is-on) .ex-opt--pick { background-color: #fff; border-color: #E3D6E1; color: var(--body); }
.ex.is-anim .ex-box.is-on .ex-opt--pick { animation: ex-press .3s ease 2.45s; }
@keyframes ex-press { 50% { scale: .94; } }
.ex.is-anim .ex-done { transition: opacity .3s ease, transform .35s ease; transition-delay: 3000ms; }
.ex.is-anim .ex-box:not(.is-on) .ex-done { opacity: 0; transform: translateY(5px); }

@media (max-width: 767px) {
    .ex { padding: 80px 0; }
    .ex-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .ex-box { padding: 20px; gap: 14px; border-radius: 20px; }
    .ex-box h3 { font-size: 1.125rem; }
    .ex-env-h { white-space: nowrap; }
    .ex-allow-t { display: none; }
    .ex-opts, .ex-done { margin-left: 0; }
    .ex-vis { height: 262px; padding: 14px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .ex-typing { display: none; }
}