/* ==========================================================================
   NF SYSTEM — the shared layer for every page (Oct 2026)
   Linked from nf_site_header(), so it loads AFTER each template's own <style>.

   Brand: Neon v4.0 "Creator Cafe After Dark" (Notion Brand Kit). The palette and the
   fonts are unchanged: Sora headlines, Manrope body, JetBrains Mono labels and numbers,
   Mr Dafoe for the neon script. What this layer adds is consistency, matched to the
   VOCA and CORA apps: capsule (pill) buttons, glowing section labels, one rule per
   service colour, two page-title sizes, and a 12px floor for label text.

   Service colours (fixed rule, Oct 2026):
     Session + Video Authority Diagnostic = cyan
     Authority OS Implementation          = pink
     Production Partnership               = amber
     Blue is for buttons only.
   ========================================================================== */

@font-face { font-family: 'NFX Dafoe'; src: url('mr-dafoe.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face {
  font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 100 700;
  src: url('material-symbols.woff2') format('woff2'); font-display: block;
}

:root {
  --nfx-bg: #06070c; --nfx-bg-2: #0a0c14; --nfx-panel: #10131d; --nfx-panel-2: #161a27;
  --nfx-line: rgba(77,216,255,.12); --nfx-ink: #e9ecf4; --nfx-dim: #8d94ab;
  --nfx-cyan: #4dd8ff; --nfx-pink: #ff4d9d; --nfx-amber: #ffb43a; --nfx-blue: #4d8efe;
  --nfx-display: 'Sora', system-ui, sans-serif; --nfx-body: 'Manrope', system-ui, sans-serif;
  --nfx-mono: 'JetBrains Mono', ui-monospace, monospace; --nfx-script: 'Mr Dafoe', 'NFX Dafoe', cursive;
  --nfx-h1: clamp(36px, 5vw, 54px);      /* inner pages; Home and About get the landing size */
  --svc-diag: var(--nfx-cyan); --svc-impl: var(--nfx-pink); --svc-prod: var(--nfx-amber);
}

/* ---- header ------------------------------------------------------------- */
.nfx-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 72px;
  display: flex; align-items: center; gap: 28px; padding: 0 40px;
  background: linear-gradient(rgba(6,7,12,.9), rgba(6,7,12,.66));
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--nfx-line); font-family: var(--nfx-body); box-sizing: border-box;
}
.nfx-bar *, .nfx-foot * { box-sizing: border-box; }
.nfx-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--nfx-ink); flex: 0 0 auto; }
.nfx-mark { font-family: var(--nfx-display); font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--nfx-ink); }
.nfx-sign {
  font-family: var(--nfx-mono); font-size: 11px; letter-spacing: .26em; color: var(--nfx-cyan); white-space: nowrap;
  border: 1px solid rgba(77,216,255,.5); border-radius: 999px; padding: 4px 10px;
  box-shadow: 0 0 12px rgba(77,216,255,.35), inset 0 0 8px rgba(77,216,255,.12);
}
.nfx-links { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.nfx-links > a {
  font-family: var(--nfx-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--nfx-dim); text-decoration: none; white-space: nowrap; padding: 6px 0; position: relative;
  transition: color .25s, text-shadow .25s;
}
.nfx-links > a:hover { color: var(--nfx-cyan); text-shadow: 0 0 14px rgba(77,216,255,.7); }
.nfx-links > a.nfx-on { color: var(--nfx-cyan); text-shadow: 0 0 14px rgba(77,216,255,.55); }
.nfx-links > a.nfx-on::after {
  content: ""; position: absolute; left: 0; right: .18em; bottom: -2px; height: 2px; border-radius: 2px;
  background: var(--nfx-cyan); box-shadow: 0 0 10px rgba(77,216,255,.8);
}
.nfx-cta { flex: 0 0 auto; }
.nfx-cta .btn, .nfx-mcta .btn { padding: 10px 20px; font-size: 13px; }
.nfx-mcta { display: none; }
.nfx-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; margin-left: auto;
  background: none; border: 0; cursor: pointer; padding: 0; z-index: 1001; }
.nfx-burger span { display: block; width: 100%; height: 2px; background: var(--nfx-ink); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
.nfx-open .nfx-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nfx-open .nfx-burger span:nth-child(2) { opacity: 0; }
.nfx-open .nfx-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nfx-back { margin-left: auto; font-family: var(--nfx-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--nfx-dim); text-decoration: none; }
.nfx-back:hover { color: var(--nfx-cyan); }

@media (max-width: 1120px) {
  .nfx-bar { padding: 0 22px; gap: 14px; height: 64px; }
  .nfx-burger { display: flex; }
  .nfx-cta { margin-left: auto; }
  .nfx-cta + .nfx-burger { margin-left: 0; }
  .nfx-links {
    position: fixed; top: 0; left: 0; right: 0; margin: 0; z-index: 999;
    flex-direction: column; align-items: stretch; gap: 0; padding: 74px 26px 22px;
    background: var(--nfx-bg); border-bottom: 1px solid var(--nfx-line);
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height .35s ease, opacity .3s ease, visibility 0s .35s;
  }
  .nfx-open .nfx-links { max-height: 100vh; opacity: 1; visibility: visible; transition: max-height .35s ease, opacity .3s ease; }
  .nfx-links > a { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 13px; }
  .nfx-links > a.nfx-on::after { display: none; }
  .nfx-mcta { display: block; margin-top: 18px; }
  .nfx-mcta .btn { width: 100%; }
  .nfx-brand, .nfx-burger, .nfx-cta { position: relative; z-index: 1001; }
}
@media (max-width: 560px) {
  .nfx-cta { display: none; }               /* it lives in the menu instead */
  .nfx-sign { font-size: 10px; padding: 3px 8px; }
  .nfx-mark { font-size: 16px; }
  .nfx-brand { gap: 10px; }
}

/* ---- footer ------------------------------------------------------------- */
.nfx-foot { padding: 100px 56px 48px; border-top: 1px solid var(--nfx-line); background: var(--nfx-bg); font-family: var(--nfx-body); position: relative; overflow: hidden; }
.nfx-sign-off { text-align: center; margin-bottom: 84px; }
.nfx-script {
  font-family: var(--nfx-script); font-size: clamp(54px, 8vw, 110px); line-height: 1.1; display: inline-block; transform: rotate(-2deg);
  color: #ffd9ec; text-shadow: 0 0 8px #fff3, 0 0 14px var(--nfx-pink), 0 0 34px var(--nfx-pink), 0 0 70px rgba(255,77,157,.5);
}
.nfx-sub { font-family: var(--nfx-mono); font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--nfx-dim); margin-top: 18px; }
.nfx-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 50px; max-width: 1240px; margin: 0 auto 64px; }
.nfx-fh { font-family: var(--nfx-mono); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--nfx-cyan); margin: 0 0 20px; font-weight: 500; text-shadow: 0 0 14px rgba(77,216,255,.35); }
.nfx-cols a { display: block; color: var(--nfx-dim); text-decoration: none; font-size: 15px; padding: 6px 0; transition: color .25s, transform .25s; }
.nfx-cols a:hover { color: var(--nfx-cyan); transform: translateX(4px); }
.nfx-cols a.nfx-svc-diag:hover { color: var(--svc-diag); }
.nfx-cols a.nfx-svc-impl:hover { color: var(--svc-impl); }
.nfx-cols a.nfx-svc-prod:hover { color: var(--svc-prod); }
.nfx-blurb { color: var(--nfx-dim); font-size: 15px; line-height: 1.6; max-width: 300px; margin: 0; }
.nfx-note { max-width: 1240px; margin: 0 auto 28px; font-size: 13px; line-height: 1.6; color: var(--nfx-dim); }
.nfx-note a { color: var(--nfx-cyan); }
.nfx-base {
  max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap;
  border-top: 1px solid var(--nfx-line); padding-top: 30px;
  font-family: var(--nfx-mono); font-size: 12px; letter-spacing: .14em; color: var(--nfx-dim); text-transform: uppercase;
}
.nfx-base a { color: inherit; text-decoration: none; }
.nfx-base a:hover { color: var(--nfx-cyan); }
.nfx-foot.nfx-min { padding: 36px 40px; }
.nfx-foot.nfx-min .nfx-base { border-top: 0; padding-top: 0; }
@media (max-width: 900px) { .nfx-cols { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 760px) { .nfx-foot { padding: 70px 24px 40px; } .nfx-sign-off { margin-bottom: 56px; } }
@media (max-width: 460px) { .nfx-cols { grid-template-columns: 1fr; } }

/* ---- buttons: capsules everywhere, as in VOCA and CORA -------------------- */
.btn, a.btn, button.btn, .btn-sm, .btn-primary, .btn-cyan, .btn-neon, .btn-pink, .btn-ghost, .btn-outline,
.fluent-cart-direct-checkout-button, .fct_add_to_cart_button, .fluent-cart-add-to-cart-button,
.fct-checkout-btn, .fluent_cart_checkout_btn, .fct-buy-now-btn {
  border-radius: 999px !important;
  font-family: var(--nfx-display) !important; letter-spacing: .01em; text-transform: none !important;
}
/* Primary = the brand-kit CTA, exactly (one gradient, navy text) */
.btn-primary, .fluent-cart-direct-checkout-button, .fct-buy-now-btn {
  background: linear-gradient(135deg, #7fb0ff, #4d8efe) !important; color: #04173c !important;
  border: 0 !important; font-weight: 700 !important;
}
.btn-primary:hover, .fluent-cart-direct-checkout-button:hover { box-shadow: 0 6px 40px rgba(77,142,254,.5); }

/* ---- page titles: two sizes, one weight ---------------------------------- */
h1 { font-family: var(--nfx-display); font-size: var(--nfx-h1) !important; font-weight: 800 !important; line-height: 1.04; overflow-wrap: break-word; }

/* ---- section labels: VOCA/CORA voice (glow), brand-kit face (JetBrains Mono) ---- */
.section-label, .eyebrow, .hero-eyebrow-text, .acct-eyebrow, .post-kicker, .page-label {
  text-shadow: 0 0 14px color-mix(in srgb, currentColor 45%, transparent);
}

/* ---- 12px floor for label text (everything that was set below 12) -------- */
.ac-kind, .ac-soon, .acct-eyebrow, .act-group, .act-k, .badge, .card-kind, .chip, .compare-label, .confirm-sub,
.crumb, .cta-meta-item, .deck-caption, .divider-label, .engage-type, .eyebrow, .feat-tag, .flow-num, .g-kind,
.hero-cap, .hero-chip, .hero-eyebrow-text, .hero-meta, .key, .lbl, .lsc-label, .magic-label, .missing-header,
.missing-label, .mk, .mp-profiles, .p-tag, .page-label, .page-meta, .panel-label, .phase-chip, .phase-tag, .plabel,
.post-kicker, .post-meta, .pper, .pricing-from, .process-step-num, .ptag, .road-tag, .role, .section-label,
.sf-alabel, .sf-amore, .sf-aprice, .sf-qlabel, .sf-restart, .sf-rlabel, .sf-rtag, .sf-step, .showctl-cap,
.soon-tag, .stat-lbl, .step-n, .step-num, .supports, .t-more, .tag, .tcard-k, .tier-badge, .up-tag, .video-cap,
.voca-soon, .vs-label, .who-col-label, .who-label, .proof-eyebrow, .trust-strip, .form-footer, .proof-name {
  font-size: 12px;
}

/* Sentences were set in tiny uppercase mono: body face, sentence case, readable size */
.hero-note {
  font-family: var(--nfx-body) !important; font-size: 14px !important; letter-spacing: 0 !important;
  text-transform: none !important; line-height: 1.55;
}

/* ---- icons: the brand kit's Material Symbols (thin line), replacing emoji --- */
.nfx-ico {
  font-family: 'Material Symbols Outlined'; font-weight: 300; font-style: normal; font-size: 26px; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
  font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; color: var(--nfx-cyan);
  text-shadow: 0 0 16px rgba(77,216,255,.45); vertical-align: middle;
}
.nfx-ico.sm { font-size: 20px; }

/* ---- browser surfaces in the palette -------------------------------------- */
::selection { background: rgba(77,216,255,.3); color: #fff; }
:focus-visible { outline: 2px solid var(--nfx-cyan); outline-offset: 3px; }
html { scrollbar-color: rgba(77,216,255,.25) var(--nfx-bg); }

/* ---- phones: nothing wider than the screen -------------------------------- */
@media (max-width: 760px) {
  h1, h2, h3 { overflow-wrap: break-word; }
  .hero-left, .hero-copy, .hero-h1, .hero-compat, .hero-voca-line { min-width: 0; max-width: 100%; }
  img, svg, video, iframe { max-width: 100%; }
}

/* ---- service colour on the pricing cards (same edge-line idiom as the service pages) ---- */
.svc-diag { --svc: var(--svc-diag); } .svc-impl { --svc: var(--svc-impl); } .svc-prod { --svc: var(--svc-prod); }
.pcard[class*="svc-"]::after {
  content: ""; position: absolute; top: -1px; left: 22px; right: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--svc), transparent); box-shadow: 0 0 14px var(--svc);
}
.pcard[class*="svc-"] .plabel { color: var(--svc); text-shadow: 0 0 14px color-mix(in srgb, var(--svc) 45%, transparent); }
.pcard[class*="svc-"] li::before { color: var(--svc); }
.pcard.hot.svc-impl { border-color: rgba(255,77,157,.5); box-shadow: 0 0 40px rgba(255,77,157,.12); }
.pcard[class*="svc-"]:hover { border-color: color-mix(in srgb, var(--svc) 45%, transparent); }

/* ---- FluentCart buy buttons: every product page, one style ---------------- */
.fct-buy-wrap .fct-buy-now-btn, .fct-buy-wrap button[type="submit"], .fct-buy-now-btn,
.fct-buy-wrap .fct-add-to-cart-btn, .fct-add-to-cart-btn {
  background: linear-gradient(135deg, #7fb0ff, #4d8efe) !important; color: #04173c !important;
  border: 0 !important; border-radius: 999px !important;
  font-family: var(--nfx-display) !important; font-weight: 700 !important;
  text-transform: none !important; letter-spacing: .01em !important;
  box-shadow: 0 0 34px rgba(77,142,254,.35) !important;
}
.fct-buy-wrap .fct-buy-now-btn:hover, .fct-buy-now-btn:hover, .fct-add-to-cart-btn:hover { box-shadow: 0 6px 46px rgba(77,142,254,.55) !important; }

/* ---- accent word: Sora in cyan glow (the script is kept for three moments a page) ---- */
.nfx-accent { font-family: inherit; font-style: normal; font-weight: inherit; color: var(--nfx-cyan); text-shadow: 0 0 30px rgba(77,216,255,.45); }
.nfx-accent-h { font-family: var(--nfx-display); font-weight: 800; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.2; margin-bottom: 12px; }

/* ---- phones: decorative hero glows stay inside the screen; long hero lines wrap ---- */
@media (max-width: 960px) {
  .hero { overflow-x: clip; }
  .hero-compat { white-space: normal !important; }
}

/* ---- lead-magnet form button: brand CTA, not mono --------------------------- */
.guide-btn { font-family: var(--nfx-display) !important; letter-spacing: .01em !important; border-radius: 999px !important; }
/* ---- minimal header on phones: the back link stays on one line ---------------- */
.nfx-back { white-space: nowrap; }
@media (max-width: 430px) { .nfx-min .nfx-sign { display: none; } }