/* ═══════════════════════════════════════════════════════════════════════════
   What's free — `nbf-*`
   ═══════════════════════════════════════════════════════════════════════════

   `public/free.html`, generated by `Neobot7/scripts/build-free-page.js` from
   `public/js/feature-catalog.js`. The page answers one search: "which Discord
   bot doesn't charge me for the thing I need".

   ⚠️ NO `var()` ON DESIGN-SYSTEM TOKENS. Same rule as landing-v3.css — the
   `--r-*` / `--action*` / `--surface-*` names in DESIGN_SYSTEM.md are prose,
   no stylesheet defines them, and a `var()` on one computes to `initial`:
   square corners and unpainted fills with no console error. Literal values
   only. This page does NOT load dashboard-theme.css, so `--sc-*` is absent
   too.

   Prefix map: `nbf-` is this page. `lp-` is the landing page, `dc-` the docs
   page, `ff-` feature feedback. Verified zero prior occurrences of `nbf-`.

   The palette is landing-v3.css's, deliberately — a visitor arriving here from
   the footer must not feel they left the site. It is duplicated rather than
   imported because landing-v3.css is self-contained by design and importing it
   would drag in the hero terrain, the pet and nine sections this page has no
   markup for.
   ═══════════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after { box-sizing: border-box; }

body {
    margin: 0;
    background: #070B18;
    color: #b3b8c2;
    font: 400 16px/1.6 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.nbf-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px 120px;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.nbf-nav {
    --nb-brand-h: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 66px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

.nbf-nav-links {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 14px;
}

.nbf-nav-links a {
    color: #8b93a3;
    text-decoration: none;
    transition: color .15s ease;
}

.nbf-nav-links a:hover,
.nbf-nav-links a:focus-visible { color: #e8ebf2; }

.nbf-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: 8px;
    background: #5865F2;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 0;
    transition: background .15s ease, transform .15s ease;
}

.nbf-cta:hover { background: #4752C4; }
.nbf-cta:active { transform: translateY(1px); }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.nbf-hero {
    padding: 68px 0 54px;
    border-bottom: 1px solid #171d31;
}

.nbf-eyebrow {
    margin: 0 0 18px;
    font: 500 12px/1 'Geist Mono', ui-monospace, monospace;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6b7488;
}

.nbf-hero h1 {
    margin: 0 0 20px;
    font-size: clamp(38px, 6.4vw, 66px);
    line-height: 1.02;
    letter-spacing: -.032em;
    font-weight: 600;
    color: #f3f5fa;
    text-wrap: balance;
}

.nbf-hero h1 em {
    font-style: normal;
    color: #6EE7B7;
}

.nbf-lede {
    margin: 0;
    max-width: 62ch;
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.6;
    color: #9aa3b4;
}

.nbf-count {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.nbf-stat {
    flex: 1 1 150px;
    padding: 18px 20px;
    background: #0C1223;
    border: 1px solid #182038;
    border-radius: 12px;
}

.nbf-stat b {
    display: block;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 600;
    color: #f3f5fa;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.nbf-stat span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #7d8698;
}

/* ── Sections ────────────────────────────────────────────────────────────── */

.nbf-section { padding: 54px 0 0; }

.nbf-section > h2 {
    margin: 0 0 6px;
    font-size: clamp(22px, 3vw, 29px);
    line-height: 1.15;
    letter-spacing: -.022em;
    font-weight: 600;
    color: #f3f5fa;
    text-wrap: balance;
}

.nbf-section > p.nbf-sub {
    margin: 0 0 26px;
    max-width: 62ch;
    color: #7d8698;
    font-size: 15px;
}

/* ── Feature grid ────────────────────────────────────────────────────────── */

.nbf-group { margin-bottom: 38px; }

.nbf-group-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid #171d31;
}

.nbf-group-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #e8ebf2;
    letter-spacing: -.01em;
}

.nbf-group-head span {
    font: 500 11px/1 'Geist Mono', ui-monospace, monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #5f6879;
}

.nbf-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.nbf-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #0A0F1E;
    border: 1px solid #161d31;
    border-radius: 10px;
}

.nbf-item-name {
    font-size: 14.5px;
    font-weight: 500;
    color: #dfe4ee;
    line-height: 1.35;
}

.nbf-item-note {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #6b7488;
}

/* Tier chips. Free is the loud one on purpose — it is the argument. */
.nbf-tier {
    flex: none;
    padding: 3px 8px;
    border-radius: 5px;
    font: 600 10px/1.5 'Geist Mono', ui-monospace, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nbf-tier.is-free {
    background: rgba(110, 231, 183, .12);
    color: #6EE7B7;
}

.nbf-tier.is-plus {
    background: rgba(139, 148, 255, .12);
    color: #A5AFFF;
}

.nbf-tier.is-pro {
    background: rgba(251, 191, 36, .1);
    color: #FBBF24;
}

/* ── Not built yet ────────────────────────────────────────────────────────
   A planned feature is listed but must not read as something you can have.
   The chip is deliberately colourless — the other three chips each mean "this
   costs X", and a fourth colour in that row would be read as a fourth price.
   The row is outlined rather than filled for the same reason: on a page whose
   subject is what you get, a solid row is a thing you get. */
.nbf-item.is-soon {
    background: none;
    border-style: dashed;
    border-color: rgba(255, 255, 255, .09);
}

.nbf-item.is-soon .nbf-item-name { color: #9aa3b4; }

.nbf-tier.is-soon {
    background: none;
    border: 1px dashed rgba(255, 255, 255, .18);
    color: #7b8494;
}

/* Sits under the stat row, not in it — the four stats are things that exist,
   and free + paid add up to the headline exactly. */
.nbf-soon-note {
    margin: 16px 0 0;
    max-width: 62ch;
    font-size: 14px;
    line-height: 1.55;
    color: #6b7488;
}

.nbf-soon-note em { font-style: normal; color: #9aa3b4; }

/* ── The pricing argument ────────────────────────────────────────────────── */

.nbf-why {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 8px;
}

.nbf-card {
    padding: 22px 24px;
    background: #0C1223;
    border: 1px solid #182038;
    border-radius: 14px;
}

.nbf-card h3 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
    color: #f3f5fa;
    letter-spacing: -.01em;
}

.nbf-card p {
    margin: 0 0 10px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #8b93a3;
}

.nbf-card p:last-child { margin-bottom: 0; }

.nbf-card strong { color: #dfe4ee; font-weight: 600; }

/* ── Small-server promise ────────────────────────────────────────────────── */

.nbf-promise {
    margin-top: 54px;
    padding: 34px 36px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(88, 101, 242, .14), transparent 60%),
        #0C1223;
    border: 1px solid #1d2542;
    border-radius: 16px;
}

.nbf-promise h2 {
    margin: 0 0 12px;
    font-size: clamp(21px, 2.6vw, 27px);
    line-height: 1.2;
    letter-spacing: -.02em;
    font-weight: 600;
    color: #f3f5fa;
    text-wrap: balance;
}

.nbf-promise p {
    margin: 0 0 18px;
    max-width: 58ch;
    color: #9aa3b4;
    font-size: 15.5px;
}

.nbf-promise p:last-of-type { margin-bottom: 22px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.nbf-foot {
    margin-top: 70px;
    padding-top: 26px;
    border-top: 1px solid #171d31;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    color: #5f6879;
}

.nbf-foot a { color: #8b93a3; text-decoration: none; }
.nbf-foot a:hover,
.nbf-foot a:focus-visible { color: #e8ebf2; }

.nbf-foot-links { display: flex; flex-wrap: wrap; gap: 18px; }

/* ── Focus ───────────────────────────────────────────────────────────────── */

a:focus-visible,
.nbf-cta:focus-visible {
    outline: 2px solid #6EE7B7;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .nbf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nbf-why { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .nbf-grid { grid-template-columns: 1fr; }
    .nbf-wrap { padding: 0 18px 80px; }
    .nbf-nav { padding: 0 18px; }
    .nbf-nav-links { gap: 14px; font-size: 13px; }
    .nbf-hero { padding: 44px 0 38px; }
    .nbf-promise { padding: 26px 22px; }
}