/* ============================================================
   WHY ASKPILOT: "Powerful automation you describe, not build." (home page test
   copy, 2026-10-23). Right under the hero. Left, muted ("Instead of…"):
   the two things a buyer would otherwise build, each with a picture of the
   effort (a tangled flowchart with a reply it has no branch for; an agent
   project's files and code). Right, highlighted ("With Askpilot…"): what
   replaces each, with the picture of how little it takes (a few plain
   English lines of a PROCESS.md; the agent project's parts, already built
   into Askpilot and ticked). Under each
   title, tags instead of a sentence: what it costs (✕) or what it gives you
   (✓). An arrow links each pair. Left
   is the old way and right is Askpilot, as in the hero's animation above.
   Below 768px the two groups stack, one arrow pointing down between them.
   Static, fixed heights: nothing moves the page.
   ============================================================ */
.ff { padding: 112px 0; border-top: 1px solid var(--line); }

.ff-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
    gap: 16px 0; max-width: 1040px; margin: 0 auto;
}
.ff-lab {
    margin: 0 0 4px; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted);
}
.ff-lab--instead { grid-area: 1 / 1; }
.ff-lab--with { grid-area: 1 / 3; color: var(--pink-deep); }
.ff-box--flow { grid-area: 2 / 1; }
.ff-arrow--1 { grid-area: 2 / 2; }
.ff-box--md { grid-area: 2 / 3; }
.ff-box--agents { grid-area: 3 / 1; }
.ff-arrow--2 { grid-area: 3 / 2; }
.ff-box--kit { grid-area: 3 / 3; }

/* ---- a box: its picture, then a title and one sentence ---- */
.ff-box { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; }
.ff-vis {
    position: relative; height: 224px; display: flex; align-items: center; justify-content: center;
    padding: 16px; border-bottom: 1px solid transparent;
}
.ff-t { flex: 1; padding: 22px 28px 26px; }
.ff-t h3 { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }

/* Instead of: muted */
.ff-box--off { background: #F3EEEC; border: 1px solid #E8E1DE; }
.ff-box--off .ff-vis { border-bottom-color: #E8E1DE; }
.ff-box--off h3 { color: #6E6874; }

/* With Askpilot: the hero's black border, the picture on the brand pink */
.ff-box--on { background: #fff; border: 1.5px solid var(--ink); box-shadow: 0 22px 44px -32px rgba(38, 20, 40, .45); }
.ff-box--on .ff-vis {
    border-bottom-color: #F0E3EE;
    background: radial-gradient(120% 90% at 50% 0%, #FFF0FF 0%, #FFF7FD 55%, #fff 100%);
}
.ff-box--on h3 { color: var(--ink); }

/* the flowchart: the hero canvas's dots, the reply it has no branch for in red */
.ff-vis--flow {
    background-color: #F7F2F0;
    background-image: radial-gradient(#E0D8D5 1px, transparent 1.3px);
    background-size: 14px 14px;
}
.ff-flow { display: block; width: 100%; max-width: 460px; height: auto; overflow: visible; }
.ff-flow text { font-family: var(--font-sans); }

/* the agent project: files to write, code to maintain */
.ff-ed {
    width: 100%; max-width: 420px; border-radius: 12px; overflow: hidden;
    background: #FBF9F8; border: 1px solid #DED6D3;
}
.ff-ed-bar {
    display: flex; align-items: center; gap: 5px; margin: 0; padding: 7px 10px;
    border-bottom: 1px solid #E6DFDC; background: #F1ECEA;
}
.ff-ed-bar i { width: 7px; height: 7px; border-radius: 50%; background: #D6CECB; }
.ff-ed-bar span { margin-left: 8px; font: 600 .6875rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #A39CA8; }
.ff-ed-body { display: flex; }
.ff-ed-files {
    flex: none; width: 112px; margin: 0; padding: 8px 0; list-style: none; border-right: 1px solid #E6DFDC;
    font: 500 .6875rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #A39CA8;
}
.ff-ed-files li { padding: 4px 12px; white-space: nowrap; }
.ff-ed-files li:first-child { color: #7E7783; background: #EEE8E6; }
.ff-ed-code { flex: 1; min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.ff-ed-code i { display: block; height: 5px; border-radius: 3px; background: #E3DCD9; width: var(--w); margin-left: calc(var(--x, 0) * 14px); }
.ff-ed-code i:nth-child(3n+2) { background: #DCD2DC; }

/* the PROCESS.md: a few lines anyone could write */
.ff-md {
    width: 100%; max-width: 420px; padding: 12px 16px 14px; border-radius: 12px;
    background: #fff; border: 1px solid #EADCE7; box-shadow: 0 10px 24px -18px rgba(38, 20, 40, .35);
}
.ff-md p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-md .ff-md-file {
    display: flex; align-items: center; gap: 6px; padding-bottom: 8px; margin-bottom: 6px;
    border-bottom: 1px solid #F1E8EF; font: 500 .6875rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted);
}
.ff-md-file svg { width: 13px; height: 13px; flex: none; color: var(--pink-deep); }
.ff-md-file b { color: var(--ink); font-weight: 700; }
.ff-md-h { padding-top: 4px; font: 700 .6875rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--pink-deep); }
.ff-md-l { display: flex; align-items: center; gap: 7px; font-size: .8125rem; line-height: 1.65; color: var(--ink); }
.ff-md-l em { flex: none; width: 10px; height: 10px; border-radius: 3px; border: 1.3px solid #CFC5CD; }
.ff-caret {
    display: inline-block; flex: none; width: 1.5px; height: 14px; margin-left: -5px; background: var(--pink-deep);
    animation: ff-blink 1.1s steps(1) infinite;
}
@keyframes ff-blink { 50% { opacity: 0; } }

/* everything already built in: the agent project's parts (left), ready */
.ff-kit {
    width: 100%; max-width: 420px; padding: 10px 14px 10px; border-radius: 12px;
    background: #fff; border: 1px solid #EADCE7; box-shadow: 0 10px 24px -18px rgba(38, 20, 40, .35);
}
.ff-kit-h {
    display: flex; align-items: center; gap: 7px; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px solid #F1E8EF;
    font-size: .8125rem; font-weight: 700; color: var(--ink);
}
.ff-kit-h img { width: 15px; height: 15px; }
.ff-live {
    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;
}
.ff-live i { width: 6px; height: 6px; border-radius: 50%; background: #2F9E6A; }
.ff-kit-list { margin: 0; padding: 0; list-style: none; }
.ff-kit-list li {
    display: flex; align-items: center; gap: 8px; padding: 3px 0;
    font-size: .8125rem; font-weight: 600; line-height: 1.35; color: var(--ink); white-space: nowrap;
}
.ff-kit-ok {
    flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
    background: var(--ink); color: #fff;
}
.ff-kit-ok svg { width: 9px; height: 9px; }
.ff-kit-v { margin-left: auto; padding-left: 10px; font-size: .75rem; font-weight: 500; color: var(--muted); }
.ff-kit-logos { display: inline-flex; gap: 5px; }
/* the smallest phones: one size down, so "Memory and approvals" keeps its value on one line */
@media (max-width: 379px) {
    .ff-kit-list li { font-size: .75rem; gap: 7px; }
    .ff-kit-v { font-size: .6875rem; padding-left: 6px; }
}
.ff-kit-logos img { width: 13px; height: 13px; display: block; }

/* ---- the tags under each title: what it costs (✕, grey with a red cross)
   or what it gives you (✓, the brand pink). They carry the point, so nobody
   has to read a sentence; the picture above shows the detail. ---- */
.ff-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.ff-tags li {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 7px; border-radius: 999px;
    font-size: .9375rem; font-weight: 650; line-height: 1.25; letter-spacing: -.005em; white-space: nowrap;
}
.ff-tag-i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
.ff-tag-i svg { width: 10px; height: 10px; }
.ff-box--off .ff-tags li { background: #fff; border: 1px solid #E8DFDC; color: #6E6874; }
.ff-box--off .ff-tag-i { background: #FCECEF; color: #D2486A; }
.ff-box--on .ff-tags li { background: var(--pink-wash); border: 1px solid var(--pink-surface); color: var(--ink); }
.ff-box--on .ff-tag-i { background: var(--pink-deep); color: #fff; }

/* the arrow from each old way to what replaces it */
.ff-arrow { display: grid; place-items: center; }
.ff-arrow span {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: var(--ink); color: #fff;
}
.ff-arrow svg { width: 16px; height: 16px; }

@media (max-width: 767px) {
    .ff { padding: 80px 0; }
    .ff-grid { display: flex; flex-direction: column; gap: 12px; }
    .ff-lab { margin: 0; }
    .ff-lab--with { margin-top: 4px; }
    .ff-arrow--2 { display: none; }
    .ff-arrow--1 { padding: 6px 0; }
    .ff-arrow--1 svg { transform: rotate(90deg); }
    .ff-box { border-radius: 18px; }
    .ff-vis { height: 216px; padding: 14px 12px; }
    .ff-t { padding: 18px 20px 22px; }
    .ff-t h3 { font-size: 1.125rem; }
    .ff-tags { gap: 6px; margin-top: 12px; }
    .ff-tags li { font-size: .875rem; padding: 5px 11px 5px 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .ff-caret { animation: none; }
}

/* ============================================================
   THE PLAY (js/from-flowcharts.js). With .is-anim on the section, every
   picture starts empty and every tag hidden; the script switches the boxes
   on (.is-on) one at a time, left box, arrow, right box, row by row (on a
   phone: in the stacked order), each when it is on screen. A box waiting its
   turn is faded. Only opacity, transforms and clip-paths change, so nothing
   moves the page. Each box plays once and stays finished. .no-tr switches
   the play on without animating. Reduced motion, or no script: the finished
   section.
   ============================================================ */
.ff.no-tr, .ff.no-tr * { transition: none !important; animation: none !important; }
.ff.is-anim .ff-box { transition: opacity .45s ease; }
.ff.is-anim .ff-box:not(.is-on) { opacity: .45; }
/* wide screens: a box waiting its turn is hidden; the left box of a row
   first plays in the middle of the section (.is-center: half its width
   plus half the arrow column to the right), then slides to its place; the
   column labels come in with their side */
@media (min-width: 768px) {
    .ff.is-anim .ff-box { transition: opacity .45s ease, transform .8s cubic-bezier(.65, 0, .25, 1); }
    .ff.is-anim .ff-box:not(.is-on) { opacity: 0; }
    .ff.is-anim .ff-box.is-center { position: relative; z-index: 2; transform: translateX(calc(50% + 32px)); }
    .ff.is-anim .ff-lab { transition: opacity .4s ease; }
    .ff.is-anim .ff-lab:not(.is-on) { opacity: 0; }
}

/* the tags pop in once the picture has played (--td: when, per box) */
.ff-box--flow { --td: 1500ms; }
.ff-box--agents { --td: 1300ms; }
.ff-box--md { --td: 1650ms; }
.ff-box--kit { --td: 1700ms; }
.ff.is-anim .ff-tags li {
    opacity: 0; transform: translateY(6px) scale(.94);
    transition: opacity .3s ease, transform .45s cubic-bezier(.2, 1.4, .4, 1);
    transition-delay: calc(var(--td) + var(--i, 0) * 130ms);
}
.ff.is-anim .ff-box.is-on .ff-tags li { opacity: 1; transform: none; }

/* the flowchart: boxes column by column, each line drawn after its box, then
   the reply it has no branch for */
.ff.is-anim .ff-fn {
    opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center;
    transition: opacity .25s ease, transform .4s cubic-bezier(.2, 1.4, .4, 1);
    transition-delay: calc(var(--i) * 160ms);
}
.ff.is-anim .ff-fe {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    transition: stroke-dashoffset .3s ease; transition-delay: calc(var(--i) * 160ms + 140ms);
}
.ff.is-anim .ff-fx { opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; transition-delay: 1100ms; }
.ff.is-anim .ff-box.is-on .ff-fn,
.ff.is-anim .ff-box.is-on .ff-fx { opacity: 1; transform: none; }
.ff.is-anim .ff-box.is-on .ff-fe { stroke-dashoffset: 0; }
.ff.is-anim .ff-box.is-on .ff-fx { animation: ff-shake .45s ease 1.45s; }
@keyframes ff-shake { 25% { translate: -3px 0; } 50% { translate: 3px 0; } 75% { translate: -2px 0; } }

/* the cards in the pictures arrive first, then what is in them */
.ff.is-anim .ff-ed, .ff.is-anim .ff-md, .ff.is-anim .ff-kit {
    opacity: 0; transform: translateY(10px);
    transition: opacity .4s ease, transform .5s cubic-bezier(.2, .9, .3, 1);
}
.ff.is-anim .ff-box.is-on .ff-ed,
.ff.is-anim .ff-box.is-on .ff-md,
.ff.is-anim .ff-box.is-on .ff-kit { opacity: 1; transform: none; }

/* the agent project: the files to write, then the code */
.ff.is-anim .ff-ed-files li {
    opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .3s ease;
    transition-delay: calc(250ms + var(--i) * 110ms);
}
.ff.is-anim .ff-ed-code i {
    transform: scaleX(0); transform-origin: left center; transition: transform .35s ease;
    transition-delay: calc(400ms + var(--j) * 90ms);
}
.ff.is-anim .ff-box.is-on .ff-ed-files li,
.ff.is-anim .ff-box.is-on .ff-ed-code i { opacity: 1; transform: none; }

/* the PROCESS.md: typed in, a line at a time */
.ff.is-anim .ff-md > p {
    clip-path: inset(0 100% 0 0); transition: clip-path .4s linear;
    transition-delay: calc(300ms + var(--i) * 220ms);
}
.ff.is-anim .ff-box.is-on .ff-md > p { clip-path: inset(0 -4px 0 0); }

/* built in: each part ticked off, in the order the agent project lists them */
.ff.is-anim .ff-kit-list li {
    opacity: 0; transform: translateY(5px); transition: opacity .3s ease, transform .4s ease;
    transition-delay: calc(350ms + var(--i) * 190ms);
}
.ff.is-anim .ff-kit-ok { transform: scale(0); transition: transform .4s cubic-bezier(.2, 1.6, .4, 1); transition-delay: calc(500ms + var(--i) * 190ms); }
.ff.is-anim .ff-box.is-on .ff-kit-list li,
.ff.is-anim .ff-box.is-on .ff-kit-ok { opacity: 1; transform: none; }

/* the arrows: in, then a nudge the way the eye should go */
.ff-arrow { --nudge: 4px 0; }
.ff.is-anim .ff-arrow span { opacity: 0; transform: scale(.5); transition: opacity .25s ease, transform .4s cubic-bezier(.2, 1.5, .4, 1); }
.ff.is-anim .ff-arrow.is-on span { opacity: 1; transform: none; }
.ff.is-anim .ff-arrow.is-on svg { animation: ff-nudge .7s ease .25s 2; }
@keyframes ff-nudge { 50% { translate: var(--nudge); } }
@media (max-width: 767px) {
    .ff-arrow { --nudge: 0 4px; }
}

/* under the boxes: the way to the How it works page, in the violet of the
   PROCESS.md "Learn more" buttons (Dom) */
.ff-more { margin: 48px 0 0; text-align: center; }
.ff-btn { background: var(--brand-magenta, #D53BD5); border-color: var(--brand-magenta, #D53BD5); color: #fff; }
.ff-btn:hover { background: #BE2EBE; border-color: #BE2EBE; color: #fff; }
.ff-btn:focus-visible { outline: 2px solid var(--brand-magenta, #D53BD5); outline-offset: 3px; }
@media (max-width: 767px) { .ff-more { margin-top: 36px; } }