/* ============================================================
   Skillfull public signup funnel — self-contained design system.
   Enterprise look: calm indigo accent, generous spacing, soft depth.
   ============================================================ */
:root {
    --fn-ink: #0f1729;
    --fn-ink-2: #3b465c;
    --fn-muted: #6b7689;
    --fn-line: #e7ebf2;
    --fn-line-2: #eef1f7;
    --fn-bg: #f7f9fc;
    --fn-card: #ffffff;
    --fn-accent: #2563eb;
    --fn-accent-ink: #1d4ed8;
    --fn-accent-soft: #eff6ff;
    --fn-accent-2: #7c6cf6;
    --fn-ok: #0f9d58;
    --fn-ok-soft: #e7f6ee;
    --fn-warn: #b45309;
    --fn-radius: 16px;
    --fn-radius-sm: 11px;
    --fn-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 28px rgba(16,24,40,.06);
    --fn-shadow-lg: 0 2px 6px rgba(16,24,40,.08), 0 22px 56px rgba(16,24,40,.12);
    --fn-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

.sf-fn-body {
    margin: 0;
    font-family: var(--fn-font);
    color: var(--fn-ink);
    background: var(--fn-bg);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: 1.55;
}

/* ---------- top bar ---------- */
.sf-fn-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 28px;
    max-width: 1180px; width: 100%; margin: 0 auto;
}
.sf-fn-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--fn-ink); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.sf-fn-brand-img { height: 28px; width: auto; }
.sf-fn-topnav { display: inline-flex; align-items: center; gap: 12px; font-size: .9rem; }
.sf-fn-top-q { color: var(--fn-muted); }
.sf-fn-top-signin { color: var(--fn-accent-ink); font-weight: 700; text-decoration: none; }
.sf-fn-top-signin:hover { text-decoration: underline; }

/* ---------- main + footer ---------- */
/* The shared site header (.sf-navbar) is position:fixed, so funnel content must
   be offset by its height or it slides up underneath the header. */
.sf-fn-main { flex: 1 1 auto; width: 100%; padding-top: var(--sf-navbar-height, 4rem); }
.sf-fn-footer { border-top: 1px solid var(--fn-line); margin-top: 56px; }
.sf-fn-foot-inner { max-width: 1180px; margin: 0 auto; padding: 22px 28px; display: flex; justify-content: space-between; color: var(--fn-muted); font-size: .85rem; }
.sf-fn-foot-links a { color: var(--fn-muted); text-decoration: none; margin-left: 16px; }
.sf-fn-foot-links a:hover { color: var(--fn-ink); }

/* ---------- shared layout ---------- */
.sf-fn-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.sf-fn-narrow { max-width: 560px; margin: 0 auto; padding: 0 24px; }

/* ---------- hero ---------- */
.sf-fn-hero { text-align: center; padding: 40px 28px 8px; max-width: 760px; margin: 0 auto; }
.sf-fn-eyebrow {
    display: inline-block; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--fn-accent-ink); background: var(--fn-accent-soft); border-radius: 999px; padding: 5px 13px; margin-bottom: 16px;
}
.sf-fn-h1 { font-size: clamp(1.9rem, 4vw, 2.85rem); font-weight: 850; letter-spacing: -.02em; margin: 0 0 12px; line-height: 1.1; }
.sf-fn-h1 .sf-fn-grad { background: linear-gradient(90deg, var(--fn-accent), var(--fn-accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sf-fn-lede { font-size: 1.12rem; color: var(--fn-ink-2); margin: 0 auto; max-width: 600px; }

/* ---------- path-choice cards (pricing hub) ---------- */
.sf-fn-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; margin: 40px auto 0; max-width: 1100px; align-items: stretch; }
.sf-fn-path {
    position: relative; background: var(--fn-card); border: 1px solid var(--fn-line); border-radius: var(--fn-radius);
    padding: 28px 26px; box-shadow: var(--fn-shadow); display: flex; flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sf-fn-path:hover { transform: translateY(-3px); box-shadow: var(--fn-shadow-lg); border-color: #d7dcee; }
.sf-fn-path.is-feature { border-color: var(--fn-accent); box-shadow: 0 0 0 1px var(--fn-accent), var(--fn-shadow-lg); }
.sf-fn-path-tag { position: absolute; top: -11px; left: 26px; background: var(--fn-accent); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 4px 11px; }
.sf-fn-path-ico { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--fn-accent-soft); color: var(--fn-accent-ink); font-size: 1.25rem; margin-bottom: 16px; }
.sf-fn-path-name { font-size: 1.28rem; font-weight: 820; margin: 0 0 6px; letter-spacing: -.01em; }
.sf-fn-path-sub { color: var(--fn-muted); font-size: .94rem; margin: 0 0 18px; }
.sf-fn-path-price { font-size: 1.05rem; font-weight: 700; color: var(--fn-ink); margin: 0 0 16px; }
.sf-fn-path-price small { color: var(--fn-muted); font-weight: 500; font-size: .82rem; }
.sf-fn-feats { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 9px; }
.sf-fn-feats li { display: flex; gap: 9px; align-items: flex-start; font-size: .92rem; color: var(--fn-ink-2); }
.sf-fn-feats li i { color: var(--fn-ok); margin-top: 3px; font-size: .82rem; flex: 0 0 auto; }
.sf-fn-path .sf-fn-btn { margin-top: auto; }

/* disabled / not-yet-available path card — greyed, not removed */
.sf-fn-path.is-disabled { background: #fafbfd; border-color: var(--fn-line); box-shadow: none; }
.sf-fn-path.is-disabled:hover { transform: none; box-shadow: none; border-color: var(--fn-line); }
.sf-fn-path.is-disabled .sf-fn-path-ico { background: #eef1f6; color: #aab3c4; }
.sf-fn-path.is-disabled .sf-fn-path-name,
.sf-fn-path.is-disabled .sf-fn-path-price { color: #8b96a8; }
.sf-fn-path.is-disabled .sf-fn-path-sub,
.sf-fn-path.is-disabled .sf-fn-feats li { color: #aab3c4; }
.sf-fn-path.is-disabled .sf-fn-feats li i { color: #c5ccdb; }
.sf-fn-path-soon { position: absolute; top: 14px; right: 14px; background: #eef1f6; color: #8b96a8; font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 4px 10px; }
.sf-fn-btn.is-disabled { pointer-events: none; cursor: default; background: #eef1f6; color: #9aa6b8; border-color: var(--fn-line); box-shadow: none; }

/* ---------- billing-cycle toggle ---------- */
.sf-fn-cycle { display: inline-flex; align-items: center; gap: 0; background: #eef1f7; border: 1px solid var(--fn-line); border-radius: 999px; padding: 4px; }
.sf-fn-cycle button { appearance: none; border: 0; background: transparent; color: var(--fn-ink-2); font: inherit; font-weight: 700; font-size: .86rem; padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: background .12s, color .12s, box-shadow .12s; display: inline-flex; align-items: center; gap: 7px; }
.sf-fn-cycle button.is-active { background: #fff; color: var(--fn-ink); box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.sf-fn-cycle-save { background: var(--fn-ok-soft); color: var(--fn-ok); font-size: .72rem; font-weight: 800; border-radius: 999px; padding: 2px 8px; letter-spacing: .01em; }
.sf-fn-cycle-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 22px; }

/* ---------- tier pricing cards (on a channel page) ---------- */
.sf-fn-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 18px; margin: 8px 0 4px; align-items: stretch; }
.sf-fn-tier {
    display: flex; flex-direction: column; border: 1.5px solid var(--fn-line); border-radius: var(--fn-radius);
    padding: 22px 22px 20px; background: var(--fn-card); position: relative; cursor: pointer; overflow: hidden;
    box-shadow: var(--fn-shadow); transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.sf-fn-tier:hover { border-color: #c9d0ea; transform: translateY(-2px); box-shadow: var(--fn-shadow-lg); }
.sf-fn-tier.is-selected { border-color: var(--fn-accent); box-shadow: 0 0 0 1.5px var(--fn-accent), var(--fn-shadow-lg); }
.sf-fn-tier:focus-within { outline: 2px solid var(--fn-accent); outline-offset: 3px; }
.sf-fn-tier input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sf-fn-tier.is-hidden { display: none; }

/* selected check badge (top-right) */
.sf-fn-tier::after {
    content: "\f00c"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--fn-accent); color: #fff; font-size: .66rem; display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(.6); transition: opacity .14s, transform .14s;
}
.sf-fn-tier.is-selected::after { opacity: 1; transform: scale(1); }

/* "popular" featured tier */
.sf-fn-tier.is-popular { border-color: var(--fn-accent); }
.sf-fn-tier-ribbon { position: absolute; top: 14px; left: 0; background: linear-gradient(90deg, var(--fn-accent), var(--fn-accent-2)); color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 14px 4px 12px; border-radius: 0 999px 999px 0; }
.sf-fn-tier.is-popular { padding-top: 28px; }

.sf-fn-tier-name { font-weight: 820; font-size: 1.05rem; letter-spacing: -.01em; padding-right: 28px; }
.sf-fn-tier-priceblock { margin: 12px 0 4px; display: flex; align-items: baseline; gap: 3px; }
.sf-fn-tier-price { font-size: 2.1rem; font-weight: 860; letter-spacing: -.03em; line-height: 1; }
.sf-fn-tier-per { font-size: .82rem; color: var(--fn-muted); font-weight: 600; }
.sf-fn-tier-sales { font-size: 1.3rem; font-weight: 840; color: var(--fn-accent-ink); margin: 12px 0 4px; }
.sf-fn-tier-billed { font-size: .76rem; color: var(--fn-muted); min-height: 1em; margin-bottom: 4px; }
.sf-fn-tier-desc { color: var(--fn-ink-2); font-size: .88rem; margin: 8px 0 0; }
.sf-fn-tier-divider { height: 1px; background: var(--fn-line-2); margin: 16px 0 14px; }
.sf-fn-tier .sf-fn-feats { margin: 0; gap: 10px; }
.sf-fn-tier .sf-fn-feats li { font-size: .88rem; }
.sf-fn-tier-foot { margin-top: auto; padding-top: 16px; }
.sf-fn-tier-pick { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 750; color: var(--fn-accent-ink); }
.sf-fn-tier.is-selected .sf-fn-tier-pick { color: var(--fn-ink); }
.sf-fn-tier-pick .dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #cdd4e6; display: inline-block; position: relative; transition: border-color .12s; }
.sf-fn-tier.is-selected .sf-fn-tier-pick .dot { border-color: var(--fn-accent); }
.sf-fn-tier.is-selected .sf-fn-tier-pick .dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--fn-accent); }

/* ---------- buttons ---------- */
.sf-fn-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid transparent; border-radius: 11px; padding: 12px 20px;
    font-size: .96rem; font-weight: 750; cursor: pointer; text-decoration: none; transition: filter .12s, background .12s, transform .06s; width: 100%;
}
.sf-fn-btn:active { transform: translateY(1px); }
.sf-fn-btn-primary { background: var(--fn-accent); color: #fff; }
.sf-fn-btn-primary:hover { filter: brightness(1.06); }
.sf-fn-btn-ghost { background: #fff; color: var(--fn-ink); border-color: var(--fn-line); }
.sf-fn-btn-ghost:hover { border-color: #c9d0ea; background: #fbfcfe; }
.sf-fn-btn-lg { padding: 14px 24px; font-size: 1rem; }

/* ---------- forms (get-started) ---------- */
.sf-fn-card { background: var(--fn-card); border: 1px solid var(--fn-line); border-radius: var(--fn-radius); box-shadow: var(--fn-shadow); padding: 32px; margin: 28px auto 0; }
.sf-fn-form-head { margin-bottom: 22px; }
.sf-fn-form-head h1 { font-size: 1.6rem; font-weight: 840; margin: 0 0 6px; letter-spacing: -.01em; }
.sf-fn-form-head p { color: var(--fn-muted); margin: 0; font-size: .95rem; }
.sf-fn-field { margin-bottom: 16px; }
.sf-fn-field label { display: block; font-size: .85rem; font-weight: 700; color: var(--fn-ink-2); margin-bottom: 6px; }
.sf-fn-input {
    width: 100%; border: 1px solid var(--fn-line); border-radius: 10px; padding: 11px 13px;
    font-size: .98rem; font-family: inherit; color: var(--fn-ink); background: #fff; transition: border-color .12s, box-shadow .12s;
}
.sf-fn-input:focus { outline: none; border-color: var(--fn-accent); box-shadow: 0 0 0 3px var(--fn-accent-soft); }
.sf-fn-input.is-error { border-color: #dc2626; }
.sf-fn-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sf-fn-help { font-size: .8rem; color: var(--fn-muted); margin-top: 5px; }
.sf-fn-switch { text-align: center; font-size: .9rem; color: var(--fn-ink-2); margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--fn-line-2); }
.sf-fn-switch a { color: var(--fn-accent-ink); font-weight: 700; text-decoration: none; }
.sf-fn-switch a:hover { text-decoration: underline; }
.sf-fn-err { font-size: .8rem; color: #dc2626; margin-top: 5px; }
.sf-fn-input-affix { display: flex; align-items: stretch; border: 1px solid var(--fn-line); border-radius: 10px; overflow: hidden; }
.sf-fn-input-affix:focus-within { border-color: var(--fn-accent); box-shadow: 0 0 0 3px var(--fn-accent-soft); }
.sf-fn-input-affix input { border: 0; flex: 1 1 auto; padding: 11px 13px; font-size: .98rem; outline: none; min-width: 0; }
.sf-fn-input-affix .sf-fn-affix { background: #f3f5fa; color: var(--fn-muted); padding: 11px 12px; font-size: .9rem; white-space: nowrap; border-left: 1px solid var(--fn-line); }
.sf-fn-subcheck { font-size: .82rem; margin-top: 5px; min-height: 1.1em; }
.sf-fn-subcheck.ok { color: var(--fn-ok); }
.sf-fn-subcheck.bad { color: #dc2626; }

/* password field: show/hide toggle + strength meter */
.sf-fn-pass { position: relative; }
.sf-fn-pass .sf-fn-input { padding-right: 46px; }
.sf-fn-pass-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 42px; border: 0; background: transparent; color: var(--fn-muted); cursor: pointer; font-size: .95rem; display: flex; align-items: center; justify-content: center; }
.sf-fn-pass-toggle:hover { color: var(--fn-ink-2); }
.sf-fn-strength { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 1em; }
.sf-fn-strength-bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: #e9edf4; overflow: hidden; }
.sf-fn-strength-fill { height: 100%; width: 0; border-radius: 999px; transition: width .18s ease, background .18s ease; }
.sf-fn-strength-label { font-size: .76rem; font-weight: 700; color: var(--fn-muted); min-width: 56px; text-align: right; }
.sf-fn-strength[data-score="1"] .sf-fn-strength-fill { width: 25%; background: #e0524d; }
.sf-fn-strength[data-score="2"] .sf-fn-strength-fill { width: 50%; background: #e8a13a; }
.sf-fn-strength[data-score="3"] .sf-fn-strength-fill { width: 75%; background: #3aa6e8; }
.sf-fn-strength[data-score="4"] .sf-fn-strength-fill { width: 100%; background: var(--fn-ok); }

/* social proof band (pricing hub) */
.sf-fn-proof { max-width: 1000px; margin: 48px auto 0; text-align: center; }
.sf-fn-proof-eyebrow { font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--fn-muted); }
.sf-fn-proof-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 30px; margin: 18px auto 0; }
.sf-fn-proof-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--fn-ink-2); font-weight: 750; font-size: 1rem; opacity: .82; }
.sf-fn-proof-logo i { font-size: 1.15rem; color: var(--fn-accent-ink); }
.sf-fn-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 760px; margin: 34px auto 0; }
.sf-fn-stat { background: var(--fn-card); border: 1px solid var(--fn-line); border-radius: var(--fn-radius-sm); padding: 20px 16px; }
.sf-fn-stat-num { font-size: 1.7rem; font-weight: 860; letter-spacing: -.02em; color: var(--fn-ink); }
.sf-fn-stat-num .sf-fn-grad { background: linear-gradient(90deg, var(--fn-accent), var(--fn-accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sf-fn-stat-label { font-size: .85rem; color: var(--fn-muted); margin-top: 4px; }
.sf-fn-quote { max-width: 680px; margin: 36px auto 0; background: var(--fn-card); border: 1px solid var(--fn-line); border-radius: var(--fn-radius); padding: 26px 28px; box-shadow: var(--fn-shadow); }
.sf-fn-quote blockquote { margin: 0; font-size: 1.08rem; line-height: 1.5; color: var(--fn-ink); font-weight: 550; }
.sf-fn-quote-by { margin-top: 12px; font-size: .85rem; color: var(--fn-muted); font-weight: 600; }
.sf-fn-quote-stars { color: #e8a13a; margin-bottom: 12px; font-size: .9rem; letter-spacing: 2px; }

.sf-fn-terms { display: flex; gap: 9px; align-items: flex-start; font-size: .85rem; color: var(--fn-ink-2); margin: 6px 0 20px; }
.sf-fn-terms a { color: var(--fn-accent-ink); }

.sf-fn-alert { border-radius: 11px; padding: 12px 15px; font-size: .9rem; font-weight: 600; margin-bottom: 18px; }
.sf-fn-alert-danger { background: #fdeceb; border: 1px solid #f6cfcb; color: #b42318; }
.sf-fn-alert-info { background: var(--fn-accent-soft); border: 1px solid #d9ddfb; color: var(--fn-accent-ink); }

/* selected-plan summary strip on a form */
.sf-fn-plan-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--fn-accent-soft); border: 1px solid #dde0fb; border-radius: 11px; padding: 12px 15px; margin-bottom: 20px; }
.sf-fn-plan-strip b { color: var(--fn-accent-ink); }
.sf-fn-plan-strip a { font-size: .82rem; color: var(--fn-accent-ink); text-decoration: none; font-weight: 700; }
.sf-fn-plan-strip-pay { color: var(--fn-accent-ink); }

/* wider single-column wrapper for multi-card flows */
.sf-fn-narrow-wide { max-width: 720px; margin: 0 auto; padding: 8px 24px 0; }
.sf-fn-section-title { font-size: 1.05rem; font-weight: 820; margin: 0 0 4px; letter-spacing: -.01em; }

/* segmented (audience) control */
.sf-fn-segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sf-fn-seg { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--fn-line); border-radius: var(--fn-radius-sm); padding: 14px 16px; cursor: pointer; position: relative; transition: border-color .12s, box-shadow .12s; }
.sf-fn-seg:hover { border-color: #c9d0ea; }
.sf-fn-seg.is-selected { border-color: var(--fn-accent); box-shadow: 0 0 0 1px var(--fn-accent); }
.sf-fn-seg:focus-within { outline: 2px solid var(--fn-accent); outline-offset: 2px; }
.sf-fn-seg input { position: absolute; opacity: 0; }
.sf-fn-seg-title { font-weight: 750; font-size: .95rem; display: inline-flex; align-items: center; gap: 8px; }
.sf-fn-seg-title i { color: var(--fn-accent-ink); }
.sf-fn-seg-sub { color: var(--fn-muted); font-size: .82rem; }

/* welcome / paused action row */
.sf-fn-welcome-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.sf-fn-welcome-actions .sf-fn-btn { width: auto; }

/* trust row */
.sf-fn-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; margin: 34px auto 0; color: var(--fn-muted); font-size: .85rem; }
.sf-fn-trust span { display: inline-flex; align-items: center; gap: 7px; }
.sf-fn-trust i { color: var(--fn-ok); }

/* paused / empty states */
.sf-fn-main:has(.sf-fn-paused) { display: flex; align-items: center; justify-content: center; }
.sf-fn-paused { max-width: 520px; margin: 40px auto; text-align: center; padding: 0 24px; }
.sf-fn-paused-ico { font-size: 2.4rem; color: #c5ccdb; margin-bottom: 14px; }
.sf-fn-paused h1 { font-size: 1.6rem; font-weight: 840; letter-spacing: -.01em; margin: 0 0 10px; }
.sf-fn-paused p { color: var(--fn-ink-2); font-size: 1rem; line-height: 1.55; margin: 0 auto; max-width: 420px; }

/* success / welcome */
.sf-fn-welcome { max-width: 560px; margin: 56px auto; text-align: center; }
.sf-fn-welcome-ico { width: 72px; height: 72px; border-radius: 50%; background: var(--fn-ok-soft); color: var(--fn-ok); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 22px; }

.sf-fn-back { display: inline-flex; align-items: center; gap: 7px; color: var(--fn-muted); text-decoration: none; font-size: .88rem; font-weight: 600; margin-bottom: 4px; }
.sf-fn-back:hover { color: var(--fn-ink); }

@media (max-width: 700px) {
    .sf-fn-row2 { grid-template-columns: 1fr; }
    .sf-fn-segmented { grid-template-columns: 1fr; }
    .sf-fn-card { padding: 22px; }
    .sf-fn-top { padding: 14px 18px; }
    .sf-fn-narrow, .sf-fn-narrow-wide { padding-left: 18px; padding-right: 18px; }
    .sf-fn-wrap { padding: 0 18px; }
    .sf-fn-hero { padding: 28px 18px 4px; }
    .sf-fn-paths { margin-top: 30px; gap: 18px; }
    .sf-fn-foot-inner { flex-direction: column; gap: 10px; text-align: center; }
    .sf-fn-foot-links a { margin: 0 8px; }
    .sf-fn-welcome-actions { flex-direction: column; }
    .sf-fn-welcome-actions .sf-fn-btn { width: 100%; }
    .sf-fn-trust { gap: 16px 20px; }
    .sf-fn-stats { grid-template-columns: 1fr; max-width: 320px; }
    .sf-fn-cycle-row { flex-direction: column; gap: 8px; }
}
@media (max-width: 420px) {
    .sf-fn-brand-word { display: none; }
}