.ff-stage { position:relative; display:flex; flex-direction:column; justify-content:center; scroll-margin-top:0.75rem; }
.ff-enter { transition: opacity .4s ease .12s, transform .45s cubic-bezier(.2,.7,.3,1) .12s; }
.ff-enter-start { opacity: 0; transform: translateY(18px); }
.ff-enter-end { opacity: 1; transform: translateY(0); }
.ff-leave { position:absolute; left:0; right:0; top:0; transition: opacity .22s ease, transform .22s ease; }
.ff-leave-start { opacity: 1; transform: translateY(0); }
.ff-leave-end { opacity: 0; transform: translateY(-12px); }

/* Clickable archetype card */
.ff-card { --accent:#7c3aed; --tint:#ede9fe; position:relative; display:flex; align-items:center; gap:1rem;
    width:100%; text-align:left; cursor:pointer; background:#fff; border:1px solid #e7e7ea;
    padding:1.15rem 1.2rem; box-shadow:0 1px 2px rgba(16,24,40,.05), 0 2px 5px rgba(16,24,40,.05);
    transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease; -webkit-appearance:none; }
.ff-card::before { content:""; position:absolute; left:-1px; top:15px; bottom:15px; width:3px; border-radius:0 4px 4px 0;
    background:var(--accent); transform:scaleY(0); transform-origin:center; transition:transform .2s ease; }
.ff-card:hover { transform:translateY(-4px); border-color:var(--accent);
    box-shadow:0 24px 48px -22px color-mix(in srgb, var(--accent) 60%, transparent), 0 6px 14px -8px rgba(16,24,40,.10); }
.ff-card:hover::before { transform:scaleY(1); }
.ff-card:active { transform:translateY(-1px); transition-duration:.08s; }
.ff-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ff-ico { flex:none; width:3rem; height:3rem; display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; background:var(--tint); box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); transition:transform .25s cubic-bezier(.2,.7,.3,1); }
.ff-card:hover .ff-ico { transform:scale(1.08) rotate(-4deg); }
.ff-body { min-width:0; flex:1; }
.ff-title { display:block; font-weight:600; color:#18181b; letter-spacing:-.011em; transition:color .2s ease; }
.ff-card:hover .ff-title { color:var(--accent); }
.ff-sub { display:block; font-size:.8125rem; color:#71717a; margin-top:.22rem; line-height:1.35; }
.ff-chev { flex:none; width:2rem; height:2rem; border-radius:9999px; display:flex; align-items:center; justify-content:center;
    background:#f4f4f5; color:#a1a1aa; transition:background .2s ease, color .2s ease, transform .2s ease; }
.ff-card:hover .ff-chev { background:var(--accent); color:#fff; transform:translateX(3px); }
.ff-dashed { background:#fafafa; border-style:dashed; box-shadow:none; }
.ff-dashed:hover { background:#fff; }

/* Back / nav button */
.ff-back { display:inline-flex; align-items:center; gap:.35rem; font-size:.8125rem; font-weight:500; color:#52525b;
    background:#fff; border:1px solid #e4e4e7; border-radius:9999px; padding:.4rem .85rem; cursor:pointer;
    box-shadow:0 1px 2px rgba(16,24,40,.05); transition:color .15s, border-color .15s, box-shadow .15s, transform .15s; }
.ff-back:hover { color:#18181b; border-color:#d4d4d8; box-shadow:0 3px 8px rgba(16,24,40,.09); transform:translateX(-2px); }

/* "Not sure / skip", a clear (muted) clickable pill, not bare text */
.ff-skip { display:inline-flex; align-items:center; gap:.35rem; font-size:.8125rem; font-weight:500; color:#71717a;
    background:#fff; border:1px solid #e4e4e7; border-radius:9999px; padding:.45rem 1rem; cursor:pointer;
    box-shadow:0 1px 2px rgba(16,24,40,.05); transition:color .15s, border-color .15s, box-shadow .15s, transform .15s; }
.ff-skip:hover { color:#3f3f46; border-color:#d4d4d8; box-shadow:0 3px 8px rgba(16,24,40,.08); transform:translateY(-1px); }
.ff-skip svg { color:#a1a1aa; }

/* Refine option button (capability/endpoint chooser) */
.ff-opt { --accent:#7c3aed; display:flex; flex-direction:column; align-items:center; justify-content:start; gap:.35rem; text-align:center; min-height:4.75rem;
    background:#fff; border:1px solid #e4e4e7; border-radius:.85rem; padding:.85rem 1rem; color:#27272a; cursor:pointer;
    box-shadow:0 1px 2px rgba(16,24,40,.05); transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s ease, color .18s ease; }
.ff-opt:hover { transform:translateY(-3px); border-color:var(--accent); color:var(--accent);
    box-shadow:0 18px 34px -20px color-mix(in srgb, var(--accent) 60%, transparent); }
.ff-opt:active { transform:translateY(-1px); transition-duration:.08s; }
.ff-opt-ico { font-size:1.5rem; line-height:1; }
.ff-opt-label { font-weight:600; font-size:.9375rem; line-height:1.2; }
.ff-opt-desc { font-size:.78rem; font-weight:400; line-height:1.3; color:#71717a; max-width:18rem; }
.ff-opt-tier { font-size:.65rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#a1a1aa; }
.ff-opt:hover .ff-opt-tier { color:var(--accent); }
.ff-opt-limit { font-size:.7rem; line-height:1.3; color:#b45309; background:#fffbeb; border:1px solid #fde68a; border-radius:.4rem; padding:.3rem .45rem; margin-top:.25rem; max-width:18rem; }

/* Payoff: data pills */
.ff-pill { display:flex; flex-direction:column; gap:.2rem; align-items:flex-start; background:#fff; border:1px solid #e7e7ea; border-radius:.75rem;
    padding:.6rem .75rem; text-decoration:none;
    box-shadow:0 1px 2px rgba(16,24,40,.04); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.ff-pill:hover { transform:translateY(-2px); border-color:var(--accent);
    box-shadow:0 14px 26px -16px color-mix(in srgb, var(--accent) 55%, transparent); }
.ff-pill-label { font-size:.8125rem; font-weight:600; color:#27272a; }
.ff-pill-path { font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; font-size:.7rem; font-weight:600; color:var(--accent); word-break:break-all; }
.ff-pill-top { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.ff-pill-badge { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#fff; background:var(--accent); border-radius:9999px; padding:.08rem .4rem; }
.ff-pill-on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 10px 22px -12px color-mix(in srgb, var(--accent) 50%, transparent); }

/* Payoff: article rows */
.ff-read { display:flex; align-items:center; gap:.7rem; background:#fff; border:1px solid #e7e7ea; border-radius:.75rem;
    padding:.8rem 1rem; font-size:.875rem; color:#27272a; text-decoration:none; box-shadow:0 1px 2px rgba(16,24,40,.04);
    transition:transform .16s ease, border-color .16s ease, color .16s ease; }
.ff-read:hover { transform:translateX(3px); border-color:var(--accent); color:var(--accent); }
.ff-readicon { flex:none; color:#a1a1aa; transition:color .16s ease; }
.ff-read:hover .ff-readicon { color:var(--accent); }
.ff-readchev { margin-left:auto; color:#d4d4d8; transition:color .16s ease; }
.ff-read:hover .ff-readchev { color:var(--accent); }

/* Payoff: recommended plan */
.ff-plan { position:relative; overflow:hidden; border-radius:1rem; padding:1.25rem 1.35rem; color:#fff;
    background:linear-gradient(150deg,#1e293b 0%,#3730a3 58%,#4338ca 100%); box-shadow:0 22px 48px -20px rgba(67,56,202,.55); }
.ff-plan::after { content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.16), transparent 60%); }
.ff-plan > * { position:relative; z-index:1; }
.ff-plan-eyebrow { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#c7d2fe; }
.ff-plan-cta { margin-top:1.25rem; display:flex; align-items:center; justify-content:center; width:100%; background:#fff; color:#18181b;
    font-family:inherit; font-weight:600; font-size:.875rem; border:0; border-radius:.65rem; padding:.7rem 1rem; text-decoration:none; cursor:pointer; box-shadow:0 6px 16px -6px rgba(0,0,0,.35);
    transition:transform .15s ease, box-shadow .15s ease; }
.ff-plan-cta:hover { transform:translateY(-2px); box-shadow:0 14px 26px -8px rgba(0,0,0,.42); }
.ff-plan-cta:disabled { opacity:.7; cursor:default; transform:none; box-shadow:none; }
.ff-plan-sec { margin-top:.7rem; display:block; text-align:center; color:#c7d2fe; font-size:.875rem; text-decoration:none; transition:color .15s ease; }
.ff-plan-sec:hover { color:#fff; }
.ff-upsell { margin-top:.9rem; padding-top:.8rem; border-top:1px solid rgba(255,255,255,.15); font-size:.75rem; line-height:1.5; color:#c7d2fe; }
.ff-upsell strong { color:#fff; font-weight:700; }

/* Billing toggle (inside the plan card) */
.ff-bill { display:inline-flex; gap:2px; padding:3px; background:rgba(255,255,255,.12); border-radius:9999px; margin-top:.7rem; }
.ff-bill button { border:0; background:transparent; color:#c7d2fe; font:inherit; font-size:.75rem; font-weight:600; padding:.3rem .8rem; border-radius:9999px; cursor:pointer; transition:background .15s, color .15s; }
.ff-bill .ff-bill-on { background:#fff; color:#1e293b; }

/* Payoff segmented toggle (Dashboards | API) */
.ff-seg { display:inline-flex; gap:2px; padding:3px; background:#f1f1f3; border-radius:9999px; }
.ff-seg button { border:0; background:transparent; color:#71717a; font:inherit; font-size:.72rem; font-weight:600; padding:.28rem .7rem; border-radius:9999px; cursor:pointer; transition:background .15s, color .15s; }
.ff-seg .ff-seg-on { background:#fff; color:#18181b; box-shadow:0 1px 2px rgba(0,0,0,.08); }

/* Focus-ticker pill (first action, accent-outlined) */
.ff-focus { display:inline-flex; align-items:center; font-size:.78rem; font-weight:600; text-decoration:none; color:var(--accent); background:#fff; border:1px solid var(--accent); border-radius:9999px; padding:.25rem .75rem; transition:background .15s, color .15s; }
.ff-focus:hover { background:var(--accent); color:#fff; }

/* Auth/checkout modal backdrop (matches /pricing) */
.auth-overlay { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }


.border-red-100 {border-color: var(--color-red-100)}

@media (min-width: 40rem) {
    .sm\:mt-0{
        margin-top: calc(var(--spacing) * 0);
    }
}