/* ============================================================
   Plans hub (/pricing) — high-impact redesign layered on sf-funnel.css.
   Uses the funnel tokens (:root in sf-funnel.css) + FontAwesome icons.
   ============================================================ */

/* page-scoped background glow */
.sf-fn-body.sf-fn-hub {
    background:
        radial-gradient(820px 460px at 12% -4%, rgba(37, 99, 235, .13), transparent 60%),
        radial-gradient(760px 460px at 92% 4%, rgba(124, 108, 246, .15), transparent 58%),
        radial-gradient(700px 520px at 50% 118%, rgba(37, 99, 235, .09), transparent 60%),
        var(--fn-bg);
}

/* ---------- cards ---------- */
.sf-fn-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 44px auto 0; max-width: 1120px; align-items: center; }

.sf-fn-plan {
    --bar: linear-gradient(135deg, var(--fn-accent), var(--fn-accent-2));
    --barink: var(--fn-accent-ink); --glow: rgba(37, 99, 235, .30);
    --chk: var(--fn-accent-ink); --chkbg: var(--fn-accent-soft); --wash: rgba(37, 99, 235, .07);
    position: relative; border-radius: 22px; padding: 32px 28px 28px; display: flex; flex-direction: column; overflow: hidden;
    background: linear-gradient(180deg, var(--wash) 0%, #fff 34%);
    border: 1px solid var(--fn-line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 18px 44px rgba(16, 24, 40, .09);
    transition: transform .18s ease, box-shadow .18s ease;
}
.sf-fn-plan:hover { transform: translateY(-6px); box-shadow: 0 2px 6px rgba(16, 24, 40, .07), 0 34px 70px rgba(16, 24, 40, .16); }
.sf-fn-plan.learner { --bar: linear-gradient(135deg, #10b981, #0ea371); --barink: #0e9f6e; --glow: rgba(16,185,129,.34); --chk: #0e9f6e; --chkbg: #e7f6ef; --wash: rgba(16,185,129,.07); }
.sf-fn-plan.org { --bar: linear-gradient(135deg, #3b82f6, #2563eb); --barink: #2563eb; --glow: rgba(37,99,235,.32); --chk: #2563eb; --chkbg: #e8f0fe; --wash: rgba(37,99,235,.07); }

.sf-fn-plan-ico { width: 58px; height: 58px; border-radius: 17px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: #fff; font-size: 1.4rem; background: var(--bar); box-shadow: 0 10px 22px var(--glow), inset 0 1px 0 rgba(255,255,255,.4); }
.sf-fn-plan-name { font-size: 1.45rem; font-weight: 850; margin: 0 0 6px; letter-spacing: -.015em; }
.sf-fn-plan-sub { color: var(--fn-muted); font-size: .95rem; margin: 0 0 20px; min-height: 42px; }
.sf-fn-plan-price { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.sf-fn-plan-price b { font-size: 2.3rem; font-weight: 870; letter-spacing: -.035em; line-height: 1; }
.sf-fn-plan-price small { color: var(--fn-muted); font-weight: 600; font-size: .9rem; }
.sf-fn-plan-note { color: var(--fn-muted); font-size: .82rem; margin: 5px 0 0; font-weight: 500; min-height: 1em; }
.sf-fn-plan-rule { height: 1px; background: linear-gradient(90deg, transparent, #e7ebf2 18%, #e7ebf2 82%, transparent); margin: 20px 0; }
.sf-fn-plan-feats { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 13px; }
.sf-fn-plan-feats li { display: flex; gap: 11px; align-items: flex-start; font-size: .93rem; color: var(--fn-ink-2); font-weight: 500; }
.sf-fn-chk { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--chkbg); color: var(--chk); font-size: .68rem; margin-top: 1px; }
.sf-fn-plan .sf-fn-btn { margin-top: auto; border-radius: 13px; padding: 14px 20px; }
.sf-fn-plan .sf-fn-btn-ghost:hover { border-color: var(--barink); color: var(--barink); }

/* ---------- featured (dark) creator card ---------- */
.sf-fn-plan.is-feature {
    color: #fff; border: 1px solid rgba(124, 108, 246, .5); padding-top: 38px;
    background: linear-gradient(165deg, #2563eb 0%, #5b42d6 45%, #3f2db0 100%);
    box-shadow: 0 24px 60px rgba(37, 99, 235, .42), 0 2px 8px rgba(37, 99, 235, .38);
    transform: scale(1.045);
}
.sf-fn-plan.is-feature:hover { transform: scale(1.045) translateY(-6px); box-shadow: 0 36px 80px rgba(37, 99, 235, .52); }
.sf-fn-plan.is-feature::after { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; right: -90px; top: -110px; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); pointer-events: none; }
.sf-fn-plan.is-feature .sf-fn-plan-ico { background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.sf-fn-plan.is-feature .sf-fn-plan-sub { color: rgba(255,255,255,.78); }
.sf-fn-plan.is-feature .sf-fn-plan-price small,
.sf-fn-plan.is-feature .sf-fn-plan-note { color: rgba(255,255,255,.72); }
.sf-fn-plan.is-feature .sf-fn-plan-rule { background: linear-gradient(90deg, transparent, rgba(255,255,255,.22) 18%, rgba(255,255,255,.22) 82%, transparent); }
.sf-fn-plan.is-feature .sf-fn-plan-feats li { color: rgba(255,255,255,.92); }
.sf-fn-plan.is-feature .sf-fn-chk { background: rgba(255,255,255,.18); color: #fff; }
.sf-fn-plan.is-feature .sf-fn-btn { background: #fff; color: var(--fn-accent-ink); border-color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.sf-fn-plan.is-feature .sf-fn-btn:hover { filter: none; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.26); }

.sf-fn-plan-ribbon { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.sf-fn-plan-ribbon .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; }

/* ---------- disabled / unavailable ---------- */
.sf-fn-plan.is-disabled { background: #fafbfd; border-color: var(--fn-line); box-shadow: none; }
.sf-fn-plan.is-disabled:hover { transform: none; box-shadow: none; }
.sf-fn-plan.is-disabled .sf-fn-plan-ico { background: #eef1f6; color: #aab3c4; box-shadow: none; }
.sf-fn-plan.is-disabled .sf-fn-plan-name, .sf-fn-plan.is-disabled .sf-fn-plan-price b { color: #8b96a8; }
.sf-fn-plan.is-disabled .sf-fn-plan-sub, .sf-fn-plan.is-disabled .sf-fn-plan-feats li { color: #aab3c4; }
.sf-fn-plan.is-disabled .sf-fn-chk { background: #eef1f6; color: #c5ccdb; }
.sf-fn-plan-soon { position: absolute; top: 18px; right: 18px; background: #eef1f6; color: #8b96a8; font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 5px 11px; }
.sf-fn-plan .sf-fn-btn.is-disabled { pointer-events: none; cursor: default; background: #eef1f6; color: #9aa6b8; border-color: var(--fn-line); box-shadow: none; }

/* ---------- trust pills + quote ---------- */
.sf-fn-hub-proof { max-width: 980px; margin: 54px auto 0; text-align: center; padding: 0 28px; }
.sf-fn-hub-proof-eyebrow { font-size: .92rem; color: var(--fn-muted); font-weight: 600; }
.sf-fn-hub-pills { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 20px auto 0; }
.sf-fn-pill { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.78); border: 1px solid #e6e9f5; border-radius: 999px; padding: 9px 16px; color: var(--fn-ink-2); font-weight: 700; font-size: .92rem; }
.sf-fn-pill i { color: var(--fn-accent-ink); font-size: .95rem; }
.sf-fn-hub-quote { max-width: 660px; margin: 30px auto 70px; background: rgba(255,255,255,.85); border: 1px solid #e6e9f5; border-radius: 20px; padding: 24px 28px; box-shadow: 0 18px 44px rgba(16,24,40,.08); text-align: left; }
.sf-fn-hub-quote .stars { color: #f5a623; font-size: 1rem; letter-spacing: 3px; margin-bottom: 10px; }
.sf-fn-hub-quote blockquote { margin: 0; font-size: 1.06rem; line-height: 1.5; font-weight: 550; color: var(--fn-ink); }
.sf-fn-hub-quote .by { margin-top: 10px; font-size: .85rem; color: var(--fn-muted); font-weight: 600; }

@media (max-width: 880px) {
    .sf-fn-paths { grid-template-columns: 1fr; max-width: 430px; }
    .sf-fn-plan.is-feature { transform: none; }
    .sf-fn-plan.is-feature:hover { transform: translateY(-6px); }
}