/**
 * New Home — design stylesheet.
 *
 * A verbatim port of nonprofit/css/style.css with every selector namespaced to
 * `body.npf-home .npf-main` — the body class plus the content wrapper, so the
 * design cannot reach the theme's header and footer.
 *
 * The namespace is not cosmetic. The design uses generic class names — .btn,
 * .container, .section, .tag, .chip — that collide head-on with Semantic UI and
 * the theme. Unscoped, this file would restyle the site header and footer on the
 * very page it is meant to build. `:root`, `html` and `body` collapse into the
 * scope so the design tokens travel with it; @keyframes and @font-face are
 * copied verbatim, since prefixing either produces invalid CSS.
 *
 * Generated by a transform over the reference stylesheet — re-run it rather
 * than hand-editing, so the two cannot drift.
 */

/* ============================================================
   Nonprofit Freelancers — Global Stylesheet
   Shared design system: colors, typography, transitions,
   hover / focus / active states used across ALL pages.
   ============================================================ */

/* ---------- Design tokens ---------- */
body.npf-home .npf-main {
  /* Brand colors — sampled from the Figma design */
  --primary: #4f84c3;
  --primary-dark: #3e6ea6;
  --primary-darker: #33608f;
  --primary-light: #6ac9fc;
  --primary-soft: #e1eeff;
  --primary-tint: #e1eeff;

  /* Neutrals — sampled from the 1:1 design export (design/Home.png) */
  --dark: #020b18;
  --footer: #01040c;
  --navy: #0b1524;
  --ink: #020b18;
  --hero-ink: #1e1e1e;
  --text: #4c5563;
  --text-soft: #616e84;
  --muted: #8a94a3;
  --line: #e3e3e3;
  --line-soft: #eef1f6;
  --bg: #ffffff;
  --bg-alt: #fafafa;
  --bg-soft: #fafafa;
  --ink-warm: #282828;
  --muted-slate: #677489;
  --auth-bed: #f9fbff;
  --footer-link: #c0c0c0;
  /* Commerce greys, straight from the Figma Gray/* token set */
  --g100: #e4e7e9;
  --g200: #c9cfd2;
  --g300: #d5d7da;
  --g400: #929fa5;
  --g500: #77878f;
  --g600: #5f6c72;
  --g900: #191c1f;
  --radio-on: #fa8232;

  /* Feedback */
  --success: #22a35a;
  --danger: #e05656;
  --star: #f5b301;
  --gold: #c98a2b;

  /* Shape */
  --radius-sm: 10px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  /* Button radius read straight from the Figma Button component (was 12px,
     estimated from a downscaled PNG export before MCP access was available) */
  --radius-btn: 16px;

  /* Elevation */
  --shadow-sm: 0 2px 8px rgba(19, 24, 36, 0.05);
  --shadow: 0 10px 30px rgba(19, 24, 36, 0.08);
  --shadow-lg: 0 20px 50px rgba(19, 24, 36, 0.12);
  --shadow-primary: 0 12px 28px rgba(63, 109, 179, 0.28);
  /* Figma effect "DD" on the auth panels: y4, blur 33.7, #000 @ 1% */
  --shadow-panel: 0 4px 33.7px rgba(0, 0, 0, 0.01);

  /* Motion — kept identical across the whole project */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.18s var(--ease);
  --t: 0.28s var(--ease);
  --t-slow: 0.45s var(--ease);

  /* Layout — design content width is 1200px inside a 1440px frame */
  --container: 1248px;
  --gutter: 24px;
  --nav-h: 112px;

  /* Fonts */
  --font-head: "Plus Jakarta Sans", "Poppins", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mark: "Playfair Display", Georgia, "Times New Roman", serif;
  /* Material 3 "headline/medium-emphasized" — used by the role-card titles */
  --font-headline: "Roboto", "Inter", system-ui, sans-serif;
  /* The footer is set in Inter Tight throughout, not Inter */
  --font-footer: "Inter Tight", "Inter", system-ui, sans-serif;
  /* Form controls, order summary and commerce UI are Public Sans */
  --font-ui: "Public Sans", "Inter", system-ui, sans-serif;
  /* Consent/checkbox copy is Instrument Sans */
  --font-alt: "Instrument Sans", "Inter", system-ui, sans-serif;
}

/* ---------- Reset ---------- */
body.npf-home .npf-main *, body.npf-home .npf-main *::before, body.npf-home .npf-main *::after {
  box-sizing: border-box;
}

body.npf-home .npf-main * {
  margin: 0;
  padding: 0;
}

body.npf-home .npf-main {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body.npf-home .npf-main {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.npf-home .npf-main img {
  max-width: 100%;
  display: block;
}

body.npf-home .npf-main a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t);
}

body.npf-home .npf-main button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

body.npf-home .npf-main ul {
  list-style: none;
}

/* Every heading in the Figma file is Inter Semi Bold — the earlier Plus Jakarta
   Sans / 800 pairing was a pre-MCP guess. Section H2 is a flat 40/1.3/-2px. */
body.npf-home .npf-main h1, body.npf-home .npf-main h2, body.npf-home .npf-main h3, body.npf-home .npf-main h4, body.npf-home .npf-main h5 {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.01em;
}

body.npf-home .npf-main :focus-visible {
  outline: 3px solid rgba(63, 109, 179, 0.45);
  outline-offset: 2px;
  border-radius: 4px;
}

body.npf-home .npf-main ::selection {
  background: var(--primary);
  color: #fff;
}

/* ---------- Layout helpers ---------- */
body.npf-home .npf-main .container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

body.npf-home .npf-main .section {
  padding-block: 96px;
}

body.npf-home .npf-main .section--tight {
  padding-block: 72px;
}

body.npf-home .npf-main .section-head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 50px;
}

body.npf-home .npf-main .section-head h2 {
  font-size: 40px;
  letter-spacing: -2px;
  line-height: 1.3;
}

body.npf-home .npf-main .section-head p {
  margin-top: 16px;
  margin-inline: auto;
  max-width: 750px;
  color: var(--text-soft);
  font-size: 16px;
}

body.npf-home .npf-main .text-primary { color: var(--primary); }
body.npf-home .npf-main .text-accent { color: var(--primary-light); }

body.npf-home .npf-main .eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}

/* ---------- Buttons (shared everywhere) ---------- */
body.npf-home .npf-main .btn {
  --btn-bg: var(--primary);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* Figma "Body / Large / Semibold": Inter 600, 18/30 — box is 12px/24px padded */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 28px;
  padding: 12px 18px;
  border-radius: var(--radius-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
  will-change: transform;
}

body.npf-home .npf-main .btn svg { width: 18px; height: 18px; }

body.npf-home .npf-main .btn:hover {
  background: var(--primary-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow-primary);
}

body.npf-home .npf-main .btn:active {
  transform: translateY(-1px) scale(0.99);
}

body.npf-home .npf-main .btn--soft {
  --btn-bg: var(--primary-tint);
  --btn-fg: var(--ink);
}
body.npf-home .npf-main .btn--soft:hover {
  --btn-bg: #c7dbf3;
  background: #c7dbf3;
  color: var(--ink);
  box-shadow: none;
}

body.npf-home .npf-main .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: #888A87;
  border: 1.5px solid var(--line);
}
body.npf-home .npf-main .btn--ghost:hover {
  background: var(--bg-alt);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: none;
}

body.npf-home .npf-main .btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--primary);
  border: 1.5px solid var(--primary);
}
body.npf-home .npf-main .btn--outline:hover {
  background: var(--primary);
  color: #fff;
}

/* The design draws the hero CTAs at the same 52px height as the header button */
body.npf-home .npf-main .btn--lg { padding: 14px 18px; font-size: 16px; font-weight: 600; }
body.npf-home .npf-main .btn--sm { padding: 8px 16px; font-size: 14px; border-radius: var(--radius-pill); }
body.npf-home .npf-main .btn--block { display: flex; width: 100%; }

/* Text link with animated underline */
body.npf-home .npf-main .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--primary);
  position: relative;
}
body.npf-home .npf-main .link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
body.npf-home .npf-main .link-arrow:hover { color: var(--primary-dark); }
body.npf-home .npf-main .link-arrow:hover::after { transform: scaleX(1); }
body.npf-home .npf-main .link-arrow svg { width: 16px; height: 16px; transition: transform var(--t); }
body.npf-home .npf-main .link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Icon chips / badges ---------- */
body.npf-home .npf-main .icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  flex: none;
  transition: transform var(--t), box-shadow var(--t), background var(--t);
}
body.npf-home .npf-main .icon-chip svg { width: 24px; height: 24px; }

body.npf-home .npf-main .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--line);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  transition: all var(--t);
}
body.npf-home .npf-main .chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

body.npf-home .npf-main .tag {
  display: inline-block;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: #677489;
  font-size: 13px;
  font-weight: 600;
  transition: background var(--t), color var(--t);
  font-family: var(--font-head);
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
body.npf-home .npf-main .site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  /* Inset rather than a real border so the header stays exactly 112px tall */
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.15);
  transition: box-shadow var(--t);
}
body.npf-home .npf-main .site-header.is-scrolled {
  box-shadow: inset 0 -1px 0 var(--line), var(--shadow-sm);
}
/* Header content sits in a 1164px column in the design (sections use 1200px) */
body.npf-home .npf-main .site-header > .container { max-width: 1196px; padding-inline: 16px; }

body.npf-home .npf-main .nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 28px;
  padding-block: 16px;
}
/* The wordmark is Inter Tight SemiBold 14/16 in the header, 28.854/32.976 in the footer */
body.npf-home .npf-main .brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-footer);
  font-weight: 600;
  color: #010810;
  line-height: 16px;
  font-size: 14px;
}
/* Logo occupies a fixed 164x50 slot, which is what centres the nav menu */
body.npf-home .npf-main .site-header .brand { width: 164px; height: 50px; }
/* Serif "NF" monogram — the N and F overlap, sharing the N's right stem */
body.npf-home .npf-main .brand__mark {
  flex: none;
  font-family: var(--font-mark);
  font-weight: 500;
  font-size: 50px;
  line-height: 1;
  color: var(--primary);
  letter-spacing: -0.295em;
  padding-right: 0.295em;
  transition: transform var(--t);
}
body.npf-home .npf-main .brand__mark > span { font-weight: 500; }
body.npf-home .npf-main .brand:hover .brand__mark { transform: scale(1.04); }
body.npf-home .npf-main .brand__word { display: block; }
body.npf-home .npf-main .brand small { display: block; font-weight: 600; font-size: inherit; }

body.npf-home .npf-main .nav__menu {
  display: flex;
  align-items: center;
  gap: 0;
  margin-inline: auto;
}
/* Nav links use Figma "Body/Medium/Medium": Inter 500, 16/20 */
body.npf-home .npf-main .nav__link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #010810;
  padding: 8px 12px;
  border-radius: 4px;
  position: relative;
  transition: color var(--t), background var(--t);
}
body.npf-home .npf-main .nav__link:hover { color: var(--primary); }
/* The active item is a fixed 78x30 tint pill, so it overflows its own padding box */
body.npf-home .npf-main .nav__link.is-active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 30px;
  padding: 12px 24px;
  border-radius: 16px;
  background: var(--primary-soft);
  color: #0e1109;
  font-weight: 500;
}
body.npf-home .npf-main .nav__actions {
  display: flex;
  align-items: center;
  gap: 26px;
}
body.npf-home .npf-main .nav__login {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #010810;
}
body.npf-home .npf-main .nav__login:hover { color: var(--primary); }

body.npf-home .npf-main .nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 13px;
  background: var(--primary);
  border-radius: 12px;
  transition: background var(--t), transform var(--t);
}
body.npf-home .npf-main .nav__toggle:hover { background: var(--primary-dark); }
body.npf-home .npf-main .nav__toggle:active { transform: scale(0.95); }

/* Hidden on desktop, shown inside the mobile breakpoint */
body.npf-home .npf-main .mobile-menu { display: none; }
body.npf-home .npf-main .nav__toggle span {
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t);
}
body.npf-home .npf-main .nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.npf-home .npf-main .nav__toggle.is-open span:nth-child(2) { opacity: 0; }
body.npf-home .npf-main .nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
body.npf-home .npf-main .hero {
  background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
  padding-top: 64px;
  padding-bottom: 196px;
  overflow: hidden;
}
body.npf-home .npf-main .hero__inner { text-align: center; }
body.npf-home .npf-main .hero h1 {
  font-size: clamp(38.4px, 5vw, 45px);
  font-weight: 600;
  line-height: 1.139; /* 82/72 — stays correct as the clamp shrinks */
  letter-spacing: -2px;
  color: var(--hero-ink);
  margin: 0 auto;
}
body.npf-home .npf-main .hero__sub {
  margin: 25px auto 0;
  max-width: 664px;
  font-size: 20px;
  line-height: 1.8;
  color: var(--text-soft);
}
body.npf-home .npf-main .hero__cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 27px;
  flex-wrap: wrap;
}

/* White panel behind search + network graphic (Rectangle 161125207) */
body.npf-home .npf-main .hero__panel {
  max-width: 968px;
  margin: 39px auto 0;
  background: #ffffff;
  padding: 18px 8px 0;
  /* contains the graphic's negative bottom margin so the white box ends above it */
  display: flow-root;
}

/* Search bar */
body.npf-home .npf-main .hero__search {
  max-width: 690px;
  margin: 0 auto;
}
body.npf-home .npf-main .search-bar {
  display: flex;
  align-items: center;
  background: #f9fbff;
  border: 2px solid #79b5ff;
  border-radius: var(--radius-pill);
  padding: 8px;
  padding-left: 30px;
  transition: border-color var(--t), box-shadow var(--t);
}
body.npf-home .npf-main .search-bar:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(121, 181, 255, 0.22);
}
body.npf-home .npf-main .search-bar input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  padding: 0;
}
body.npf-home .npf-main .search-bar input::placeholder { color: #1a222e; }
/* The submit button keeps the pill shape the design gives it */
body.npf-home .npf-main .search-bar .btn { border-radius: var(--radius-pill); font-weight: 600; }
body.npf-home .npf-main .search-tags {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 25px;
}

/* Hero network graphic — geometry measured from the Figma export.
   Everything is positioned in % of the box so the whole diagram scales as one. */
body.npf-home .npf-main .hero__graphic {
  position: relative;
  max-width: 956px;
  /* the heart hangs below the white panel, as in the design */
  margin: 33px auto -65px;
  aspect-ratio: 1000 / 560;
  container-type: inline-size;
}
/* World-map heart image (PNG ships with a white background, so multiply
   drops it out against the white panel) */
body.npf-home .npf-main .hero__heart {
  position: absolute;
  left: 18.16%;
  top: -2.15%;
  width: 63.44%;
  mix-blend-mode: multiply;
  user-select: none;
  pointer-events: none;
}
body.npf-home .npf-main .hero__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
body.npf-home .npf-main .node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--n, 6.25%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  border: 0.4cqw solid #fff;
  box-shadow: 0 6px 18px rgba(16, 34, 64, 0.12);
  background: var(--bg-alt);
}
body.npf-home .npf-main .node img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.npf-home .npf-main .node--center {
  width: 12.37%;
  border: none;
  background: var(--primary);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: var(--shadow-primary);
}
body.npf-home .npf-main .node__mark {
  font-family: var(--font-mark);
  font-weight: 500;
  font-size: 4.8cqw;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.295em;
  padding-right: 0.295em;
}

/* ============================================================
   PAIN POINTS (cost of wrong help)
   ============================================================ */
body.npf-home .npf-main .pain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
  row-gap: 19px;
}
body.npf-home .npf-main .pain-card {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 30px 40px;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
body.npf-home .npf-main .pain-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-tint);
}
body.npf-home .npf-main .pain-card:hover .icon-chip {
  transform: scale(1.08) rotate(-4deg);
}
body.npf-home .npf-main .pain-card h3 { font-size: 20px; line-height: 1.35; margin-bottom: 12px; font-weight: 700; }
body.npf-home .npf-main .pain-card p { color: var(--text-soft); font-size: 15px; line-height: 1.65; }

/* ============================================================
   WHY CHOOSE (dark)
   ============================================================ */
body.npf-home .npf-main .why {
  background: var(--dark);
  color: #fff;
}
body.npf-home .npf-main .why h2, body.npf-home .npf-main .why h3 { color: #fff; }
body.npf-home .npf-main .why .section-head p { color: rgba(255, 255, 255, 0.7); }
body.npf-home .npf-main .why__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}
body.npf-home .npf-main .why__list { display: grid; gap: 8px; }
body.npf-home .npf-main .why__item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid #fff;
  transition: transform var(--t);
}
body.npf-home .npf-main .why__item:first-child { border-top: none; }
body.npf-home .npf-main .why__item:hover { transform: translateX(6px); }
body.npf-home .npf-main .why__item:hover .icon-chip { background: var(--primary-light); }
body.npf-home .npf-main .why__item h3 { font-size: 19px; margin-bottom: 6px; }
body.npf-home .npf-main .why__item p { color: #fff; font-size: 15px; }
body.npf-home .npf-main .why__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
body.npf-home .npf-main .why__media img { width: 100%; height: 100%; object-fit: cover; }

/* Shared header-with-action layout (experts / testimonials).
   Desktop: title left, action top-right. Mobile: action centered below content. */
body.npf-home .npf-main .experts__container, body.npf-home .npf-main .testi__container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
}
body.npf-home .npf-main .experts__head, body.npf-home .npf-main .testi__head { order: 1; flex: 1 1 320px; }
body.npf-home .npf-main .experts__more, body.npf-home .npf-main .testi__nav { order: 2; flex: 0 0 auto; }
body.npf-home .npf-main .experts-grid { order: 3; flex: 1 1 100%; margin-top: 44px; }
body.npf-home .npf-main .testi__track { order: 3; flex: 1 1 100%; margin-top: 48px; }


/* ============================================================
   STATS
   ============================================================ */
body.npf-home .npf-main .stats__head { text-align: center; margin-bottom: 52px; }
body.npf-home .npf-main .stats__head h2 { font-size: 40px; line-height: 1.3; letter-spacing: -2px; }
/* The sub-heading is a paragraph, not the one-line tagline it used to be. Left
   to the full 1136px container it ran to ~150 characters a line; capped here to
   a readable measure and centred under the heading. */
body.npf-home .npf-main .stats__head p {
  color: var(--text-soft);
  margin: 12px auto 0;
  max-width: 78ch;
  line-height: 1.65;
}
/* One track per card, from the count the element prints — the grid was fixed at
   three and a fourth card would have dropped onto its own row. */
body.npf-home .npf-main .stats-grid {
  display: grid;
  grid-template-columns: repeat(var(--npf-stats-cols, 3), minmax(0, 1fr));
  gap: 24px;
}
body.npf-home .npf-main .stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 44px 24px;
  text-align: center;
  transition: transform var(--t), box-shadow var(--t);
}
body.npf-home .npf-main .stat:hover { transform: translateY(-4px); }
body.npf-home .npf-main .stat__num {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 56px;
  letter-spacing: -2px;
  color: var(--primary);
  line-height: 64px;
}
body.npf-home .npf-main .stat__label { color: var(--text-soft); margin-top: 12px; font-size: 15px; }

/* A card with no figure to quote. It takes the numeral's colour and weight so
   it holds its own next to three counters, at a size that fits a sentence
   rather than two digits. */
body.npf-home .npf-main .stat__statement {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -1px;
  color: var(--primary);
  text-wrap: balance;
}

/* ============================================================
   MARKETPLACE (two sides)
   ============================================================ */
body.npf-home .npf-main .marketplace {
  background: #f5f8fc;
  position: relative;
}
/* Faint topographic line texture (Figma 420:2520 fill, 30% opacity) */
body.npf-home .npf-main .marketplace::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/icons/marketplace-texture.jpg") center / cover no-repeat;
  opacity: 0.3;
  pointer-events: none;
}
body.npf-home .npf-main .marketplace > * { position: relative; }
body.npf-home .npf-main .toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 66px;
  background: #fff;
  border-radius: 42px;
  padding: 8px 10px;
  margin: 0 auto 50px;
  box-shadow: 0 0 39.5px rgba(0, 0, 0, 0.06);
}
body.npf-home .npf-main .toggle__btn {
  font-weight: 600;
  font-size: 18px;
  line-height: 30px;
  color: var(--muted-slate);
  height: 50px;
  padding: 0 24px;
  border-radius: 42px;
  transition: color var(--t), background var(--t);
}
body.npf-home .npf-main .toggle__btn.is-active {
  background: var(--primary);
  color: #fff;
}
body.npf-home .npf-main .steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
/* Icon sits beside the heading, paragraph indented beneath it */
body.npf-home .npf-main .step-card {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 26px 24px 30px;
  transition: transform var(--t), box-shadow var(--t);
}
body.npf-home .npf-main .step-card:hover { transform: translateY(-5px); }
body.npf-home .npf-main .step-card .icon-chip { width: 48px; height: 48px; border-radius: 12px; }
body.npf-home .npf-main .step-card h3 { font-size: 19px; margin-bottom: 10px; }
body.npf-home .npf-main .step-card p { color: var(--text-soft); font-size: 15px; }

/* ============================================================
   TOP RATED EXPERTS
   ============================================================ */
body.npf-home .npf-main .experts__head h2 { font-size: 38px; line-height: 1.3; letter-spacing: -2px; }
body.npf-home .npf-main .experts__head p { color: var(--text-soft); margin-top: 12px; max-width: 52ch; }
body.npf-home .npf-main .experts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 21px;
}
body.npf-home .npf-main .expert-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  padding: 4px;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t),
    background-color var(--t);
}
body.npf-home .npf-main .expert-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary-tint);
}
/* The backdrop behind a cut-out portrait.
   NPF_Cutout runs these avatars through the site's remove.bg integration, which
   returns a transparent PNG — so whatever sits behind the image *is* the
   photo's background. `--bg-alt` (#fafafa) is all but the card's own white,
   which made a cut-out read as a broken image floating in nothing; the brand
   tint the design already uses for soft panels makes it read as a portrait on a
   backdrop. Colour only: the box keeps its 1.03:1 ratio, its 12px corners and
   its `object-fit: cover`, so nothing about the shape or the framing moves. */
body.npf-home .npf-main .expert-card__media {
  position: relative;
  aspect-ratio: 1.03 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: var(--primary-soft);
}
/* Crop from the bottom, not the middle.
   The media box is 1.03:1 and most of these are portrait photographs, so
   `cover` overflows vertically — on a 200x300 headshot by about 145px. The
   default `50% 50%` split that evenly and took ~72px off the top, which is
   where the head is: foreheads and hair were being sliced on nearly every
   card. Biasing the focal point to the top keeps the face intact and spends
   the overflow on the chest instead, which is what a portrait can afford to
   lose. 6% rather than 0 leaves a little air above the crown so it never sits
   flush against the frame. */
body.npf-home .npf-main .expert-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 6%;
  transition: transform var(--t-slow);
}
body.npf-home .npf-main .expert-card:hover .expert-card__media img { transform: scale(1.06); }
/* Tier badge — shield + banner, coloured per tier */
body.npf-home .npf-main .expert-card__badge {
  position: absolute;
  top: 10px; right: 12px;
  width: 40px; height: 48px;
}
body.npf-home .npf-main .expert-card__badge .leaf, body.npf-home .npf-main .expert-card__badge .banner { fill: var(--tier-dark); }
body.npf-home .npf-main .expert-card__badge .banner-tail { fill: var(--tier-darker); }
body.npf-home .npf-main .expert-card__badge .shine { fill: #fff; }
body.npf-home .npf-main .expert-card__badge .s1 { stop-color: var(--tier-light); }
body.npf-home .npf-main .expert-card__badge .s2 { stop-color: var(--tier-dark); }
body.npf-home .npf-main .expert-card__badge .banner-label {
  fill: #fff;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 6px;
  letter-spacing: 0.02em;
}
body.npf-home .npf-main .expert-card__badge--bronze { --tier-light: #d79a4f; --tier-dark: #b0702a; --tier-darker: #8f5920; }
body.npf-home .npf-main .expert-card__badge--silver { --tier-light: #c3cad3; --tier-dark: #939ca8; --tier-darker: #78818d; }
body.npf-home .npf-main .expert-card__badge--diamond { --tier-light: #8fd6f7; --tier-dark: #4aa6d9; --tier-darker: #3688b8; }
/* Rating chip — the white pill on the photo, same idea as the one the
   dashboard's "Recommended for you" cards carry (npf-dashboard.css). Stars are
   inline SVG here rather than the theme's `<i class="star icon">`, because
   npf-home-theme-reset.css strips the Semantic UI icon font off these pages and
   the glyphs would render as empty boxes. */
body.npf-home .npf-main .expert-card__rating {
  position: absolute;
  bottom: 14px; right: 13px;
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  color: var(--star);
  font-size: 13px;
}
body.npf-home .npf-main .expert-card__stars { display: flex; align-items: center; gap: 1.5px; }
body.npf-home .npf-main .expert-card__stars .npf-star {
  display: block;
  width: 14px;
  height: 14px;
  flex: none;
}
/* Two-layer star: the track is the unfilled shape, the fill sits on top and is
   clipped to half its width on a half star. */
body.npf-home .npf-main .npf-star .npf-star__track { fill: #e2e6ed; }
body.npf-home .npf-main .npf-star .npf-star__fill { fill: currentColor; }
body.npf-home .npf-main .expert-card__reviews {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-soft);
  white-space: nowrap;
}
body.npf-home .npf-main .expert-card__reviews strong {
  font-weight: 700;
  color: var(--ink);
  margin-right: 1px;
}
body.npf-home .npf-main .expert-card__body { padding: 20px 16px 20px; }
/* Tags stay on one line and are clipped at the card edge, as in the design.
   They used to wrap, and a single long category — "Marketing and
   Communications" is one tag, not two — pushed the row to a second line. That
   moved the name and role down on that card only, so a row of cards no longer
   shared a baseline. `nowrap` + `overflow: hidden` trades the tail of an
   over-long tag for a grid that lines up; `flex: none` stops the tags being
   squeezed into unreadable slivers instead of being cut. */
body.npf-home .npf-main .expert-card__tags {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
  margin-bottom: 12px;
}
body.npf-home .npf-main .expert-card__tags .tag {
  flex: none;
  white-space: nowrap;
  transition: background var(--t), color var(--t), transform var(--t);
}

/* Hovering the row slides it left far enough to bring the clipped tail of the
   last pill into view, then puts it back. The distance cannot be expressed in
   CSS — it is `scrollWidth - clientWidth`, which only the browser knows — so
   npf-expert-cards.js measures each row and writes it to --npf-tag-shift. Rows
   that fit get 0 and never move, and with the script absent the property falls
   back to 0, which is exactly today's behaviour. */
body.npf-home .npf-main .expert-card__tags:hover .tag {
  transform: translateX(var(--npf-tag-shift, 0px));
}
body.npf-home .npf-main .expert-card h3 { font-size: 20px; transition: color var(--t); }
/* One line, truncated. This is the seller's own tagline, so its length is not
   ours to control — "Helping Nonprofits Secure Funding Through Strategic
   Grants, Partnerships, and Giving" ran to four lines and made its card taller
   than the three beside it. An ellipsis rather than a hard clip, so it reads as
   shortened; the element carries the full text in `title` for anyone who wants
   the rest without opening the profile. */
body.npf-home .npf-main .expert-card__role {
  color: var(--text-soft);
  font-size: 16px;
  margin-top: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--t);
}
/* Highlighted expert — hover only.
   This treatment used to be pinned to the second card as well, carried over
   from the static mockup where slot two was the design's example of the hover
   state. On a live, rotating grid that permanently spotlit whoever happened to
   land in that slot, so the `.is-active` half of these selectors is gone along
   with the class the element used to print. Scoped to .experts-grid so the
   listing page and the dashboard recommend-grids keep their own behaviour. */
body.npf-home .npf-main .experts-grid .expert-card:hover {
  background: var(--primary-light);
  border-color: var(--primary-light);
}
body.npf-home .npf-main .experts-grid .expert-card:hover h3 { color: #fff; }
body.npf-home .npf-main .experts-grid .expert-card:hover .expert-card__role { color: rgba(255,255,255,0.9); }
body.npf-home .npf-main .experts-grid .expert-card:hover .tag { background: #e6eaf0; color: #677489; }

/* ============================================================
   COMPARE TABLE
   ============================================================ */
body.npf-home .npf-main .compare { background: var(--bg-alt); }
body.npf-home .npf-main .compare__cta {
  text-align: center;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}
body.npf-home .npf-main .compare__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 40px;
  font-size: 17px;
  font-weight: 600;
  border-radius: var(--radius-btn);
}
body.npf-home .npf-main .compare__btn-icon {
  width: 20px;
  height: 20px;
  transition: transform var(--t);
}
body.npf-home .npf-main .compare__btn:hover .compare__btn-icon {
  transform: translateX(4px);
}
body.npf-home .npf-main .compare__wrap {
  background: #fff;
  border-radius: 23px;
  max-width: 1136px;
  margin-inline: auto;
  padding: 84px;
  overflow-x: auto;
}
/* Design 415:1392 — a 960px grid of four 240px columns. The header band is a
   143px row; each body column is its own vertical stack with a 43px rhythm. */
/* `separate` + zero spacing, not `collapse`. Visually identical here — no cell
   in this table draws a border — but `border-radius` on a cell is ignored under
   `border-collapse: collapse`, and the header's corners and the highlighted
   column's bottom corner are all cell radii. */
body.npf-home .npf-main .compare-table {
  width: 960px;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
body.npf-home .npf-main .compare-table th, body.npf-home .npf-main .compare-table td { padding: 0; vertical-align: top; }

/* --- header band --- */
body.npf-home .npf-main .compare-table thead th {
  height: 143px;
  vertical-align: middle;
  text-align: center;
  background: var(--bg-alt);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  text-transform: capitalize;
  color: var(--ink);
}
/* The header band's outer corners follow the band, not the highlight. These
   used to be the first cell and `.col-highlight`, which was only correct while
   the recommended column happened to be the last one; it now renders in the
   middle (npf_vc_compare_order), so the right-hand corner belongs to whichever
   column ends the row. */
body.npf-home .npf-main .compare-table thead th:first-child { border-radius: 17px 0 0 0; }
body.npf-home .npf-main .compare-table thead th:last-child { border-radius: 0 17px 0 0; }

/* The recommended column reads as a card standing slightly proud of the band:
   tinted, rounded on both top corners and capped with a primary rule. */
body.npf-home .npf-main .compare-table thead .col-highlight {
  background: var(--primary-soft);
  border-radius: 17px 17px 0 0;
  box-shadow: inset 0 3px 0 0 var(--primary);
}
body.npf-home .npf-main .compare-table thead .col-icon {
  display: inline-flex;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: #fff;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-bottom: 19px;
}
body.npf-home .npf-main .compare-table thead .col-icon svg { width: 24px; height: 24px; }
body.npf-home .npf-main .compare-table thead .col-highlight .col-icon { background: var(--primary); color: #fff; }

/* --- body: each cell is one item in its column's 43px stack --- */
body.npf-home .npf-main .compare-table tbody td { background: #fff; padding: 30px 10px 0; text-align: left; }
body.npf-home .npf-main .compare-table tbody tr:last-child td { padding-bottom: 30px; }
body.npf-home .npf-main .compare-table tbody td:first-child { padding-left: 0; }

/* The recommended column, carried down the body. The tint stopped at the header
   band, so the column that the whole table is arguing for lost its emphasis
   exactly where the evidence is. Padded to match, and rounded off at the foot
   to close the shape the header's top-right corner opens. */
body.npf-home .npf-main .compare-table tbody td.col-highlight {
  background: var(--primary-soft);
  padding-left: 24px;
  padding-right: 24px;
}
/* Closes the card the header opens. Both corners now, since the column is no
   longer against the table's right edge. */
body.npf-home .npf-main .compare-table tbody tr:last-child td.col-highlight {
  border-radius: 0 0 17px 17px;
}

/* Feature label — Roboto SemiBold 16/24 @ .15px, in a 36px disc */
body.npf-home .npf-main .compare-table .feat {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.15px;
  color: var(--ink);
  min-height: 43px;
}
body.npf-home .npf-main .compare-table .feat .dot {
  width: 36px; height: 36px;
  flex: none;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--bg-alt);
  color: var(--primary);
}
body.npf-home .npf-main .compare-table .feat .dot svg { width: 24px; height: 24px; }

/* Value cells — the three losing columns sit at 50% opacity in the design */
body.npf-home .npf-main .cell {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 16px;
  line-height: 26px;
  color: var(--muted-slate);
  min-height: 43px;
}
body.npf-home .npf-main .cell svg { width: 24px; height: 24px; flex: none; }
body.npf-home .npf-main .cell--muted, body.npf-home .npf-main .cell--no { opacity: 0.5; }
/* Winning column — Roboto SemiBold 16/24 in brand blue, full opacity */
body.npf-home .npf-main .cell--yes {
  font-family: var(--font-headline);
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.15px;
  color: var(--primary);
}
body.npf-home .npf-main .cell--yes svg { width: 16px; height: 16px; color: var(--primary); }

/* ============================================================
   PROCESS (dark timeline)
   ============================================================ */
body.npf-home .npf-main .process { background: var(--dark); color: #fff; }
body.npf-home .npf-main .process h2 { color: #fff; }
body.npf-home .npf-main .process .section-head p { color: rgba(255,255,255,0.7); }
body.npf-home .npf-main .process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
body.npf-home .npf-main .process-steps::before {
  content: "";
  position: absolute;
  top: 40px; left: 12%; right: 12%;
  height: 2px;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.3) 40%, transparent 40%);
  background-size: 12px 2px;
  z-index: 0;
}
body.npf-home .npf-main .pstep { text-align: center; position: relative; z-index: 1; }
body.npf-home .npf-main .pstep__icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  margin: 0 auto 67px;
  transition: transform var(--t), background var(--t), box-shadow var(--t);
}
body.npf-home .npf-main .pstep__icon svg { width: 34px; height: 34px; }
body.npf-home .npf-main .pstep:hover .pstep__icon {
  transform: translateY(-6px);
  background: var(--primary-light);
  box-shadow: var(--shadow-primary);
}
/* Figma sets these titles to #020b18 on the #020b18 section — invisible in the
   design file itself, so they render white here. */
body.npf-home .npf-main .pstep h3 {
  color: #fff;
  font-size: 20px;
  line-height: 26px;
  margin-bottom: 12px;
}
body.npf-home .npf-main .pstep p { color: #fff; font-size: 16px; line-height: 26px; max-width: 26ch; margin: 0 auto; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
body.npf-home .npf-main .testi__head h2 { font-size: 40px; line-height: 1.3; letter-spacing: -2px; }
body.npf-home .npf-main .testi__head p { color: var(--text-soft); margin-top: 14px; max-width: 620px; }
body.npf-home .npf-main .testi__nav { display: flex; gap: 12px; }
body.npf-home .npf-main .nav-btn {
  width: 53px; height: 48px;
  border-radius: 8px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ink);
  background: #fff;
  transition: all var(--t);
}
body.npf-home .npf-main .nav-btn svg { width: 20px; height: 20px; }
body.npf-home .npf-main .nav-btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
body.npf-home .npf-main .nav-btn.is-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
body.npf-home .npf-main .nav-btn.is-primary:hover { background: var(--primary-dark); }
body.npf-home .npf-main .testi__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(390px, 1fr);
  gap: 15px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 8px;
}
body.npf-home .npf-main .testi__track::-webkit-scrollbar { display: none; }
body.npf-home .npf-main .testi-card {
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 32px;
  scroll-snap-align: start;
  transition: transform var(--t), box-shadow var(--t);
}
body.npf-home .npf-main .testi-card:hover { transform: translateY(-4px); }
body.npf-home .npf-main .testi-card__stars { color: var(--star); display: flex; gap: 3px; margin-bottom: 18px; }
body.npf-home .npf-main .testi-card__stars svg { width: 20px; height: 20px; }
body.npf-home .npf-main .testi-card__quote { color: var(--text); font-size: 16px; margin-bottom: 26px; }
body.npf-home .npf-main .testi-card__author { display: flex; align-items: center; gap: 14px; }
body.npf-home .npf-main .testi-card__author img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
body.npf-home .npf-main .testi-card__author strong { display: block; font-family: var(--font-head); color: var(--ink); }
body.npf-home .npf-main .testi-card__author span { font-size: 14px; color: var(--text-soft); }

/* ============================================================
   BLOG / INSIGHTS
   ============================================================ */
body.npf-home .npf-main .blog { background: var(--bg-alt); }
/* The blog grid runs to a wider 1300px column in the design */
body.npf-home .npf-main .blog > .container { max-width: 1348px; }
body.npf-home .npf-main .blog__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
body.npf-home .npf-main .post-feature {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
}
body.npf-home .npf-main .post-feature:hover { transform: translateY(-4px); }
body.npf-home .npf-main .post-feature__media { aspect-ratio: 16 / 10; overflow: hidden; }
body.npf-home .npf-main .post-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
body.npf-home .npf-main .post-feature:hover .post-feature__media img { transform: scale(1.05); }
body.npf-home .npf-main .post-feature__body { padding: 26px; }
body.npf-home .npf-main .post-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; margin-bottom: 12px; }
body.npf-home .npf-main .post-meta svg { width: 15px; height: 15px; }
body.npf-home .npf-main .post-feature h3 { font-size: 23px; margin-bottom: 12px; }
body.npf-home .npf-main .post-feature p { color: var(--text-soft); font-size: 15px; margin-bottom: 22px; }
body.npf-home .npf-main .post-author { display: flex; align-items: center; justify-content: space-between; }
body.npf-home .npf-main .post-author__who { display: flex; align-items: center; gap: 12px; }
body.npf-home .npf-main .post-author__who img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
body.npf-home .npf-main .post-author__who strong { display: block; font-family: var(--font-head); font-size: 15px; color: var(--ink); }
body.npf-home .npf-main .post-author__who span { font-size: 13px; color: var(--muted); }

body.npf-home .npf-main .post-list { display: grid; gap: 18px; }
body.npf-home .npf-main .post-row {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
body.npf-home .npf-main .post-row:hover { transform: translateX(6px); border-color: var(--primary-tint); }
body.npf-home .npf-main .post-row h3 { font-size: 20px; margin-bottom: 10px; }
body.npf-home .npf-main .post-row p { color: var(--text-soft); font-size: 15px; margin-bottom: 18px; }

/* ============================================================
   CTA (blue)
   ============================================================ */
body.npf-home .npf-main .cta {
  position: relative;
  padding-block: 96px 72px;
  background: var(--primary);
  color: #fff;
  overflow: hidden;
  text-align: center;
}
body.npf-home .npf-main .cta::before, body.npf-home .npf-main .cta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18);
}
body.npf-home .npf-main .cta::before {
  width: 340px; height: 340px; top: -258px; right: -96px;
  background: var(--primary-light);
  border: none;
}
body.npf-home .npf-main .cta__ring {
  position: absolute;
  width: 470px; height: 470px;
  top: -318px; right: -156px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28);
}
body.npf-home .npf-main .cta__ring--bl {
  top: auto; right: auto;
  width: 620px; height: 620px;
  bottom: -378px; left: -290px;
}
body.npf-home .npf-main .cta::after { width: 470px; height: 470px; bottom: -300px; left: -215px; background: var(--primary-light); border: none; }
body.npf-home .npf-main .cta__inner { position: relative; z-index: 1; }
body.npf-home .npf-main .cta h2 { color: #fff; font-size: 40px; line-height: 1.3; letter-spacing: -2px; max-width: 780px; margin: 0 auto; }
body.npf-home .npf-main .cta p { color: rgba(255,255,255,0.9); margin: 18px auto 0; max-width: 600px; }
body.npf-home .npf-main .ask-bar {
  display: flex;
  gap: 10px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  padding: 2px;
  max-width: 522px;
  margin: 24px auto 0;
  transition: border-color var(--t), background var(--t);
}
body.npf-home .npf-main .ask-bar:focus-within { border-color: #fff; background: rgba(255,255,255,0.22); }
body.npf-home .npf-main .ask-bar input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 12px 18px;
}
body.npf-home .npf-main .ask-bar input::placeholder { color: rgba(255,255,255,0.75); }
body.npf-home .npf-main .ask-bar .btn { background: #fff; color: var(--primary-dark); padding: 14px 22px; }
body.npf-home .npf-main .ask-bar .btn:hover { background: #f0f4fa; box-shadow: none; }

/* The band's own button, now that the ask input it used to sit inside is gone.
   Same white-on-blue treatment and the same padding the ask bar gave it, so
   nothing about the button's colour, size or type changes — only what it sits
   next to. */
body.npf-home .npf-main .cta__btn {
  display: inline-flex;
  background: #fff;
  color: var(--primary-dark);
  padding: 14px 22px;
  margin-top: 28px;
}
body.npf-home .npf-main .cta__btn:hover { background: #f0f4fa; box-shadow: none; }
body.npf-home .npf-main .cta__features {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  margin-top: 44px;
}
body.npf-home .npf-main .cta__feature {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-head);
  font-weight: 600;
}
body.npf-home .npf-main .cta__feature .icon-chip {
  width: 46px; height: 46px;
  background: #fff;
  color: var(--primary);
  border-radius: 12px;
}
body.npf-home .npf-main .cta__feature .icon-chip svg { width: 22px; height: 22px; }

/* ============================================================
   FOOTER
   ============================================================ */
body.npf-home .npf-main .footer {
  background: var(--footer);
  color: var(--footer-link);
  /* 74px top + 112px bottom is what makes the footer exactly 587px tall */
  padding-block: 74px 112px;
}
/* Brand sits on its own row above the four link columns */
body.npf-home .npf-main .footer__top {
  display: grid;
  grid-template-columns: repeat(3, 29.15%) auto;
  justify-content: start;
  gap: 40px 0;
  padding-bottom: 40px;
}
body.npf-home .npf-main .footer__brand-col { grid-column: 1 / -1; margin-bottom: 18px; }
body.npf-home .npf-main .footer > .container { max-width: 1328px; }
body.npf-home .npf-main .footer .brand { color: #fff; font-size: 28px; line-height: 32px; gap: 28px; width: 338px; max-width: 100%; }
body.npf-home .npf-main .footer .brand__mark { font-size: 100px; }
body.npf-home .npf-main .footer__col h4 {
  color: #fff;
  font-family: var(--font-footer);
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 16px;
  font-weight: 600;
}
body.npf-home .npf-main .footer__col ul { display: grid; gap: 16px; }
/* Flex li + block a so each row is exactly its own 1.4 line box, not the body strut */
body.npf-home .npf-main .footer__col li { display: flex; }
body.npf-home .npf-main .footer__col a {
  display: block;
  color: var(--footer-link);
  font-family: var(--font-footer);
  font-size: 16px;
  line-height: 1.4;
  transition: color var(--t), padding var(--t);
}
/* The design sets the first column's links at 18px while the other three are 16px */
body.npf-home .npf-main .footer__brand-col + .footer__col a { font-size: 18px; }
body.npf-home .npf-main .footer__col a:hover { color: #fff; padding-left: 4px; }
body.npf-home .npf-main .footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 40px;
  border-top: 1px solid rgba(125,125,125,0.4);
  font-family: var(--font-footer);
  font-size: 16px;
  line-height: 1.4;
  color: var(--footer-link);
}
body.npf-home .npf-main .footer__social { display: flex; gap: 16px; }
body.npf-home .npf-main .footer__social a {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.7);
  transition: all var(--t);
}
body.npf-home .npf-main .footer__social a:hover { background: var(--primary); color: #fff; transform: translateY(-3px); }
body.npf-home .npf-main .footer__social svg { width: 18px; height: 18px; }

/* ============================================================
   Scroll reveal
   ============================================================ */
/* Driven by an animation, not a transition: a `transition` here would override
   the component's own (same specificity, declared later) and kill every hover
   effect on a revealed element — and the data-delay would delay hover too. */
body.npf-home .npf-main [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}
body.npf-home .npf-main [data-reveal].is-visible {
  animation: reveal-in 0.6s var(--ease) forwards;
}
body.npf-home .npf-main [data-reveal][data-delay="1"].is-visible { animation-delay: 0.08s; }
body.npf-home .npf-main [data-reveal][data-delay="2"].is-visible { animation-delay: 0.16s; }
body.npf-home .npf-main [data-reveal][data-delay="3"].is-visible { animation-delay: 0.24s; }
body.npf-home .npf-main [data-reveal][data-delay="4"].is-visible { animation-delay: 0.32s; }
body.npf-home .npf-main [data-reveal][data-delay="5"].is-visible { animation-delay: 0.4s; }

@keyframes reveal-in {
  to { opacity: 1; transform: none; }
}

/* A tab panel arriving because someone pressed the toggle.
   Its own keyframes, with an explicit `from`: reveal-in declares only a `to`,
   so it animates from whatever the element already computes to — which is
   nothing at all for a panel that was sitting at opacity 1 behind
   `display: none`.
   The second selector exists to out-rank `[data-reveal].is-visible`, which
   carries its own `animation` and would otherwise keep the first panel from
   re-animating when you switch back to it. */
body.npf-home .npf-main .is-switched-in,
body.npf-home .npf-main [data-reveal].is-visible.is-switched-in {
  animation: npf-panel-in 0.4s var(--ease) both;
}

@keyframes npf-panel-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.npf-home .npf-main *, body.npf-home .npf-main *::before, body.npf-home .npf-main *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  body.npf-home .npf-main [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   FREELANCER LISTING PAGE
   ============================================================ */
body.npf-home .npf-main .listing {
  background: linear-gradient(180deg, #f9fbff 0%, #ffffff 55%);
  padding-block: 96px 100px;
}

/* Breadcrumb */
/* Figma "Body/Medium/Medium": Inter 500 16/20, 8px between crumbs.
   Only the "Home" crumb is dimmed (60% ink); the rest are near-black. */
body.npf-home .npf-main .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
body.npf-home .npf-main .breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  transition: color var(--t);
}
body.npf-home .npf-main .breadcrumb a:first-child { color: rgba(1, 8, 16, 0.6); }
body.npf-home .npf-main .breadcrumb a svg { width: 20px; height: 20px; }
body.npf-home .npf-main .breadcrumb a:hover { color: var(--primary); }
/* The caret sits 3px from the label that follows it, 8px from the one before */
body.npf-home .npf-main .breadcrumb__sep { color: var(--ink); margin-right: -5px; }
body.npf-home .npf-main .breadcrumb__current { color: var(--ink); font-weight: 500; }

/* Page head */
body.npf-home .npf-main .listing-head { margin-bottom: 56px; }
body.npf-home .npf-main .listing-head h1 { font-size: clamp(36.8px, 5vw, 52.8px); letter-spacing: -0.025em; }
body.npf-home .npf-main .listing-head p {
  margin-top: 16px;
  color: var(--text-soft);
  max-width: 1120px;
  font-size: 16px;
}

/* Filter / sort bar */
body.npf-home .npf-main .filter-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 39px;
}
body.npf-home .npf-main .filter-bar__box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f5f5f5;
  border: none;
  border-radius: 10px;
  padding: 19px 25px;
}
body.npf-home .npf-main .filters-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  transition: border-color var(--t), color var(--t);
}
body.npf-home .npf-main .filters-toggle svg { width: 18px; height: 18px; }
body.npf-home .npf-main .filters-toggle:hover { border-color: var(--primary); color: var(--primary); }

body.npf-home .npf-main .active-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.npf-home .npf-main .active-filters__label {
  font-family: var(--font-body);
  font-weight: 400;
  color: #5f6c72;
  font-size: 16px;
}
body.npf-home .npf-main .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: #191c1f;
  transition: color var(--t);
}
body.npf-home .npf-main .filter-chip svg { width: 14px; height: 14px; color: #5f6c72; transition: color var(--t); }
body.npf-home .npf-main .filter-chip:hover { color: var(--danger); }
body.npf-home .npf-main .filter-chip:hover svg { color: var(--danger); }
body.npf-home .npf-main .results-count { margin-left: auto; color: var(--text-soft); font-size: 15px; white-space: nowrap; }
body.npf-home .npf-main .results-count strong { color: var(--ink); font-family: var(--font-head); font-weight: 700; }

body.npf-home .npf-main .sort { display: flex; align-items: center; gap: 12px; flex: none; }
/* The sort control matches the filter bar's height (68px) in the design */
body.npf-home .npf-main .sort .select select { padding-block: 24px; }
body.npf-home .npf-main .sort label { font-size: 15px; color: var(--text-soft); font-family: var(--font-head); }

/* Custom select */
body.npf-home .npf-main .select {
  position: relative;
  display: inline-flex;
  align-items: center;
}
body.npf-home .npf-main .select select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 42px 12px 16px;
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t);
  min-width: 170px;
}
body.npf-home .npf-main .select select:hover { border-color: var(--primary-tint); }
body.npf-home .npf-main .select select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(63,109,179,.14); }
body.npf-home .npf-main .select svg {
  position: absolute;
  right: 14px;
  width: 18px; height: 18px;
  color: var(--text-soft);
  pointer-events: none;
}
body.npf-home .npf-main .select--block { display: flex; width: 100%; }
/* Sidebar selects are 56px tall in the design */
body.npf-home .npf-main .select--block select { width: 100%; padding-block: 22px; }
body.npf-home .npf-main .filter-group .select--block { margin-bottom: 5px; }

/* Layout */
body.npf-home .npf-main .listing-layout {
  display: grid;
  grid-template-columns: 275px 1fr;
  gap: 29px;
  align-items: start;
}
body.npf-home .npf-main .listing-layout > * { min-width: 0; }

/* Sidebar */
body.npf-home .npf-main .filters { display: grid; gap: 22px; position: sticky; top: calc(var(--nav-h) + 16px); }
body.npf-home .npf-main .filters > * { min-width: 0; }
body.npf-home .npf-main .filters__head { display: none; }
body.npf-home .npf-main .filter-group {
  background: #f5f5f5;
  border: none;
  border-radius: var(--radius);
  padding: 30px 25px 33px;
}
body.npf-home .npf-main .filter-group--search { padding: 31px 25px; }
body.npf-home .npf-main .filter-group__title {
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
body.npf-home .npf-main .filter-search {
  display: flex;
  align-items: center;
  background: #fff;
  border: none;
  border-radius: 14px;
  padding: 12px 12px 12px 20px;
  transition: border-color var(--t), box-shadow var(--t);
}
body.npf-home .npf-main .filter-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(63,109,179,.14); }
body.npf-home .npf-main .filter-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  padding: 10px 0;
}
body.npf-home .npf-main .filter-search input::placeholder { color: var(--muted); }
body.npf-home .npf-main .filter-search button {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  color: var(--text-soft);
  border-radius: 50%;
  transition: color var(--t), background var(--t);
}
body.npf-home .npf-main .filter-search button:hover { color: var(--primary); background: var(--primary-soft); }
body.npf-home .npf-main .filter-search svg { width: 20px; height: 20px; }

body.npf-home .npf-main .category-list { display: grid; gap: 6px; margin-bottom: 9px; }
body.npf-home .npf-main .category-list a {
  display: block;
  padding: 5px 0;
  color: var(--ink);
  font-size: 16px;
  transition: color var(--t), padding var(--t);
}
body.npf-home .npf-main .category-list a:hover { color: var(--primary); padding-left: 5px; }
/* Static underlined link, matching the design */
body.npf-home .npf-main .category-more {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}
body.npf-home .npf-main .category-more:hover { color: var(--primary-dark); }

body.npf-home .npf-main .price-pills {
  display: flex;
  gap: 5px;
  background: #fff;
  border: none;
  border-radius: 18px;
  padding: 15px;
}
body.npf-home .npf-main .price-pill {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  background: var(--primary-soft);
  border-radius: 10px;
  padding: 10px 9px;
  flex: 1 1 auto;
  transition: background var(--t), color var(--t), transform var(--t);
}
body.npf-home .npf-main .price-pill:hover { transform: translateY(-1px); }
body.npf-home .npf-main .price-pill.is-active { background: var(--primary); color: #fff; }

/* Results grid */
body.npf-home .npf-main .results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 19px;
}

/* Pagination */
body.npf-home .npf-main .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 68px;
  flex-wrap: wrap;
}
body.npf-home .npf-main .page-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  transition: all var(--t);
}
body.npf-home .npf-main .page-btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
body.npf-home .npf-main .page-btn.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
body.npf-home .npf-main .page-arrow { border-color: var(--primary); color: var(--primary); }
body.npf-home .npf-main .page-arrow svg { width: 20px; height: 20px; }
body.npf-home .npf-main .page-arrow:hover { background: var(--primary); color: #fff; }

body.npf-home .npf-main .filters-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 28, 0.5);
  z-index: 200;
  opacity: 0;
  transition: opacity var(--t);
}
body.npf-home .npf-main .filters-overlay.is-open { display: block; opacity: 1; }

/* ============================================================
   LOGGED-IN HEADER (mail / bell / user)
   ============================================================ */
body.npf-home .npf-main .nav__actions--user { gap: 20px; }
body.npf-home .npf-main .nav__icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  color: var(--primary);
  transition: background var(--t), color var(--t), transform var(--t);
}
body.npf-home .npf-main .nav__icon svg { width: 22px; height: 22px; }
body.npf-home .npf-main .nav__icon:hover { background: var(--primary-soft); transform: translateY(-2px); }
body.npf-home .npf-main .nav__user {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px 4px 4px;
  border-radius: var(--radius-pill);
  transition: background var(--t);
}
body.npf-home .npf-main .nav__user:hover { background: var(--bg-alt); }
body.npf-home .npf-main .nav__user img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
body.npf-home .npf-main .nav__user span { display: grid; line-height: 1.25; }
body.npf-home .npf-main .nav__user strong { font-family: var(--font-head); font-size: 15px; color: var(--ink); }
body.npf-home .npf-main .nav__user small { font-size: 13px; color: var(--muted); }

/* ============================================================
   DASHBOARD (logged-in home)
   Geometry read from Figma node 194:2450 (desktop 1440) and
   217:1235 (mobile 375): flat #f9fbff bed, content 1200 at
   left 120 / top 212, sidebar 308 + 31px gap + main 861, all
   cards radius 7 with a 1px #4f84c3 border and the "DD" shadow.
   ============================================================ */
body.npf-home .npf-main .dash {
  background: var(--auth-bed);
  padding-top: 100px;
}
body.npf-home .npf-main .dash-layout {
  display: grid;
  grid-template-columns: 308px minmax(0, 1fr);
  grid-template-areas:
    "side welcome"
    "side main";
  column-gap: 31px;
  align-items: start;
  /* the CTA sits inside .dash, so the bed's lower 100px lives here */
  padding-bottom: 100px;
}
body.npf-home .npf-main .dash-side { grid-area: side; display: grid; gap: 30px; }
/* 75px is what the design leaves between the CTA button and the first panel */
body.npf-home .npf-main .dash-welcome { grid-area: welcome; text-align: center; margin-bottom: 75px; }
body.npf-home .npf-main .dash-main { grid-area: main; display: grid; gap: 30px; }

/* Profile card — 308x288 navy, 41/42 inset around a 226px column */
body.npf-home .npf-main .profile-card {
  background: #133660;
  border-radius: 7px;
  padding: 42px 41px;
  text-align: center;
  color: #fff;
}
body.npf-home .npf-main .profile-card__avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
}
body.npf-home .npf-main .profile-card__name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
}
body.npf-home .npf-main .profile-card__balance {
  font-size: 16px;
  line-height: 26px;
  color: #9d9d9d;
  margin: 0 0 16px;
}
body.npf-home .npf-main .profile-card .btn { width: 100%; height: 54px; padding: 0 24px; }

/* Side cards */
body.npf-home .npf-main .side-card {
  background: #fff;
  border: 1px solid var(--primary);
  border-radius: 7px;
  /* 32/33 keeps the card at the design's 342 once the 1px border counts in */
  padding: 32px 33px;
  box-shadow: var(--shadow-panel);
}
/* Action cards are 116 tall: 30 + a 54px button + 30 + the 2px border */
body.npf-home .npf-main .side-card--action {
  display: grid;
  justify-items: center;
  padding: 30px 40px;
}
body.npf-home .npf-main .side-card--action .btn {
  width: 100%;
  max-width: 226px;
  height: 54px;
  padding: 0 24px;
}
/* M3 headline/medium: Roboto 400 28/36 */
body.npf-home .npf-main .side-card__title {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  color: var(--ink);
  margin-bottom: 13px;
}
/* The design stacks the chips one per row, with only the first two paired
   (a 5px row inside a 6px column) — that pairing is fixed, not wrapped */
body.npf-home .npf-main .skills { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 13px; }
/* Chrome sets Inter a hair wider than Figma does, so the paired chips give up
   2px of side padding each rather than wrap and add a sixth row */
body.npf-home .npf-main .skills__row { display: flex; flex-wrap: nowrap; gap: 5px; max-width: 100%; }
body.npf-home .npf-main .skills__row .skill { min-width: 0; padding: 0 8px; }
body.npf-home .npf-main .skill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--primary-tint);
  border-radius: 4px;
  padding: 0 10px;
  transition: background var(--t), border-color var(--t), color var(--t);
}
body.npf-home .npf-main .skill:hover { border-color: var(--primary); color: var(--primary); }
body.npf-home .npf-main .skill.is-active { background: var(--primary); border-color: var(--primary-tint); color: #fff; }
/* "View All Service" is underlined in the design, not on hover only */
body.npf-home .npf-main .skills__more {
  /* block-level so the 20px line-height applies instead of the body strut */
  display: flex;
  width: max-content;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  text-decoration: underline;
}
body.npf-home .npf-main .skills__more::after { display: none; }

/* Welcome + search */
body.npf-home .npf-main .dash-welcome h1 {
  /* Inter 600 72/82 at -3 tracking, wrapping inside a 693px column */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 72px;
  line-height: 82px;
  letter-spacing: -3px;
  color: var(--hero-ink);
  text-transform: capitalize;
  width: 693px;
  max-width: 100%;
  margin: 0 auto 52px;
}
/* The search bar fills the welcome frame's measured 693px column — the old
   640px cap and 20px tag offset were estimates from before MCP access, so
   they give way to the pixel-audited component values (689x80, 25px). */
body.npf-home .npf-main .dash-welcome .search-bar { max-width: 689px; margin: 0 auto; }

/* list-your-services callout — 506px column */
body.npf-home .npf-main .list-cta { text-align: center; width: 506px; max-width: 100%; margin: 0 auto; }
body.npf-home .npf-main .list-cta__art { width: 242px; max-width: 100%; height: auto; margin: 0 auto 18px; display: block; }
/* M3 display/small-emphasized: Roboto 500 36/44 */
body.npf-home .npf-main .list-cta__title {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 36px;
  line-height: 44px;
  color: var(--ink);
  margin-bottom: 10px;
}
body.npf-home .npf-main .list-cta__text {
  color: var(--muted-slate);
  font-size: 14px;
  line-height: 23px;
  margin: 0 auto 26px;
}
body.npf-home .npf-main .list-cta .btn { width: 226px; height: 54px; padding: 0 24px; }

/* Panels */
body.npf-home .npf-main .panel {
  background: #fff;
  border: 1px solid var(--primary);
  border-radius: 7px;
  padding: 42px 38px;
  box-shadow: var(--shadow-panel);
}
/* The recommend grid runs wider than the list, on a 22px inset */
body.npf-home .npf-main .dash-main .panel:first-child { padding-inline: 22px; }
body.npf-home .npf-main .panel__title {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  color: var(--ink);
  margin-bottom: 32px;
}
body.npf-home .npf-main .recommend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 14.6px;
  row-gap: 35px;
}
/* Dashboard expert cards are the home/listing card at 91.2% scale — every
   value below is the Figma number, which is why they look off-grid. */
body.npf-home .npf-main .recommend-grid .expert-card {
  border: 0.912px solid #e4e4e4;
  border-radius: 14.6px;
  padding: 4.561px;
}
body.npf-home .npf-main .recommend-grid .expert-card__media { border-radius: 14.6px; }
body.npf-home .npf-main .recommend-grid .expert-card__badge { top: 14.6px; right: 15px; width: 50px; height: 60px; }
body.npf-home .npf-main .recommend-grid .expert-card__rating {
  bottom: 11px; right: 11px;
  height: 34.7px;
  align-items: center;
  border-radius: 7.3px;
  padding: 0 10px;
  gap: 0;
  font-size: 21px;
}
body.npf-home .npf-main .recommend-grid .expert-card__body { padding: 27.4px 6px 31.9px; }
body.npf-home .npf-main .recommend-grid .expert-card__tags { gap: 5.5px; margin-bottom: 10.9px; }
body.npf-home .npf-main .recommend-grid .tag {
  display: inline-flex;
  align-items: center;
  height: 23.7px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  border-radius: 7.3px;
  padding: 0 9.1px;
}
body.npf-home .npf-main .recommend-grid .expert-card h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 23px;
  color: var(--ink);
}
body.npf-home .npf-main .recommend-grid .expert-card__role {
  color: var(--muted-slate);
  font-size: 14px;
  line-height: 23px;
  margin-top: 10.9px;
}
/* The highlighted card keeps the neutral border and the tinted tags */
body.npf-home .npf-main .recommend-grid .expert-card.is-active { border-color: #e4e4e4; }
body.npf-home .npf-main .recommend-grid .expert-card.is-active .tag { background: var(--primary-soft); }

/* Recently viewed — rows 17px off a zero-height rule */
body.npf-home .npf-main .recent-list { display: grid; }
body.npf-home .npf-main .recent-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 17px;
  margin-bottom: 17px;
  border-bottom: 1px solid var(--line-soft);
}
body.npf-home .npf-main .recent-item:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
body.npf-home .npf-main .recent-item > img {
  width: 79px; height: 79px;
  border-radius: 10px;
  object-fit: cover;
  flex: none;
}
body.npf-home .npf-main .recent-item__title {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  font-size: 16px;
  line-height: 26px;
  margin-bottom: 8px;
}
body.npf-home .npf-main .recent-item__tags { display: flex; gap: 6px; flex-wrap: wrap; }
body.npf-home .npf-main .recent-item__tags .tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  border-radius: 8px;
  padding: 0 10px;
}

/* ============================================================
   FREELANCER PROFILE / SERVICE DETAIL
   Geometry read from Figma node 198:4256 (desktop 1440) and
   217:473 (mobile 375): content 1200 wide at left 120 / top 212,
   columns 704 / 444 with a 52px gap. Cards are radius 7 with the
   1%-black "DD" drop shadow and NO border.
   ============================================================ */
body.npf-home .npf-main .detail {
  /* Flat #f9fbff bed — 1866 tall between the 112px header and the CTA,
     which is a symmetric 100px around the content. The CTA lives inside
     this element, so the lower 100px goes on the layout, not the padding. */
  background: var(--auth-bed);
  padding-block: 100px 0;
}
body.npf-home .npf-main .detail .breadcrumb { margin-bottom: 19px; }

body.npf-home .npf-main .detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 444px;
  gap: 52px;
  align-items: start;
  margin-bottom: 100px;
}

/* Main */
body.npf-home .npf-main .detail-title {
  /* Figma "Heading/H3": Inter 600 24/30, tracking -1 */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -1px;
  color: #0e1109;
  text-transform: capitalize;
  margin-bottom: 19px;
}
/* Five 21.892px stars in a 109px row */
body.npf-home .npf-main .detail-stars {
  color: var(--star);
  font-size: 20px;
  line-height: 22px;
  letter-spacing: 1.9px;
}
body.npf-home .npf-main .detail-hero {
  margin-top: 40px;
  height: 354px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--bg-alt);
}
body.npf-home .npf-main .detail-hero img { width: 100%; height: 100%; object-fit: cover; }

/* "100% Secure" banner — flat primary, square corners, 127px tall */
body.npf-home .npf-main .secure-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--primary);
  color: #fff;
  min-height: 127px;
  padding: 0 40px;
  margin-top: 20px;
  box-shadow: var(--shadow-panel);
}
body.npf-home .npf-main .secure-banner__icon { display: flex; }
body.npf-home .npf-main .secure-banner__icon svg { width: 70px; height: 70px; }
body.npf-home .npf-main .secure-banner strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  text-transform: capitalize;
  margin-bottom: 6px;
}
body.npf-home .npf-main .secure-banner span { color: #fff; font-size: 16px; line-height: 26px; }

body.npf-home .npf-main .detail-section { margin-top: 40px; }
/* Figma "Heading/H4": Inter 600 20/26, 12px above the copy */
body.npf-home .npf-main .detail-section h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  color: var(--ink);
  text-transform: capitalize;
  margin-bottom: 12px;
}
body.npf-home .npf-main .detail-section p {
  color: var(--muted-slate);
  font-size: 16px;
  line-height: 26px;
  margin-bottom: 26px;
}
body.npf-home .npf-main .detail-section p:last-child { margin-bottom: 0; }
/* Plain discs at a 24px indent, no extra gap — the design runs the three
   items on one continuous 26px baseline */
body.npf-home .npf-main .detail-list {
  display: block;
  list-style: disc;
  padding-left: 24px;
}
body.npf-home .npf-main .detail-list li {
  color: var(--muted-slate);
  font-size: 16px;
  line-height: 26px;
}

/* Sidebar */
body.npf-home .npf-main .detail-side { display: grid; gap: 40px; position: sticky; top: calc(var(--nav-h) + 16px); }

/* Packages card — 444 wide, 640 tall */
body.npf-home .npf-main .pkg-card {
  background: #fff;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: var(--shadow-panel);
}
body.npf-home .npf-main .pkg-card__head {
  display: flex;
  align-items: center;
  height: 75px;
  padding: 0 42px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -1px;
  text-transform: capitalize;
}
body.npf-home .npf-main .pkg-card__body { padding: 33px 42px 50px; }
body.npf-home .npf-main .pkg-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
body.npf-home .npf-main .pkg-row + .pkg-row { margin-top: 20px; }
body.npf-home .npf-main .pkg-row__label {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  color: var(--ink);
  font-size: 16px;
  line-height: 26px;
}
body.npf-home .npf-main .pkg-row__label svg { width: 24px; height: 24px; color: var(--ink); }
body.npf-home .npf-main .pkg-row strong {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 23px;
  color: var(--ink);
  text-transform: capitalize;
}
/* "Buy now for" is the M3 title-large style: Roboto 500 22/28 */
body.npf-home .npf-main .pkg-row--total .pkg-row__label {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
}
/* The design's rules are zero-height strokes, so the bottom margin gives
   back the 1px the border adds — 17/17 and 18/18 around the line itself */
body.npf-home .npf-main .pkg-divider { border: none; border-top: 1px solid var(--line-soft); margin: 17px 0 16px; }
body.npf-home .npf-main .pkg-card__body .pkg-divider:nth-of-type(2) { margin: 18px 0 17px; }

body.npf-home .npf-main .pkg-coupon__label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: var(--g900);
  margin: 44px 0 13px;
}
body.npf-home .npf-main .pkg-coupon { display: flex; gap: 0; margin-bottom: 36px; }
body.npf-home .npf-main .pkg-coupon input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 1px solid var(--g100);
  border-radius: 2px;
  padding: 0 15px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  background: #fff;
  transition: border-color var(--t), box-shadow var(--t);
}
body.npf-home .npf-main .pkg-coupon input::placeholder { color: var(--g500); }
body.npf-home .npf-main .pkg-coupon input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(63,109,179,.14); }
body.npf-home .npf-main .pkg-coupon__btn {
  flex: none;
  background: var(--primary-light);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.168px;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 0 24px;
  transition: background var(--t);
}
/* 144px button sitting on top of the field's right border, as designed */
body.npf-home .npf-main .pkg-card .pkg-coupon__btn {
  width: 144px;
  height: 44px;
  margin-left: -1px;
  padding: 0 16px;
  white-space: nowrap;
}
body.npf-home .npf-main .pkg-coupon__btn:hover { background: #4aa3d8; }
/* Both purchase buttons are exactly 54px tall, 17px apart */
body.npf-home .npf-main .pkg-card__body .btn { height: 54px; padding: 0 24px; }
body.npf-home .npf-main .pkg-custom { margin-top: 17px; border: 1px solid var(--g100); }

/* Seller card — 444 x 604, 42px inset */
body.npf-home .npf-main .seller-card {
  background: #fff;
  border-radius: 7px;
  padding: 50px 42px;
  text-align: center;
  box-shadow: var(--shadow-panel);
}
body.npf-home .npf-main .seller-card__ava { position: relative; display: inline-block; }
/* 14px online dot, #639C38 with a 2.5px white ring */
body.npf-home .npf-main .seller-card__ava::after {
  content: "";
  position: absolute;
  left: 38px; top: 40px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #639c38;
  border: 2.5px solid #fff;
}
body.npf-home .npf-main .seller-card__avatar {
  display: block;
  width: 54px; height: 54px;
  border-radius: 50%;
  object-fit: cover;
}
body.npf-home .npf-main .seller-card__name {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  color: #010810;
  margin-top: 7px;
}
body.npf-home .npf-main .seller-card .detail-stars { margin: 7px 0 19px; }
body.npf-home .npf-main .seller-card__bio {
  color: var(--muted-slate);
  font-size: 16px;
  line-height: 26px;
  text-align: left;
  margin-bottom: 36px;
}
body.npf-home .npf-main .seller-card .btn { height: 54px; padding: 0 24px; }

/* Related topics — 444 x 342, 5 rows of 34px in a 194px grid */
body.npf-home .npf-main .topics-card {
  background: #fff;
  border-radius: 7px;
  padding: 50px 38px 49px;
  box-shadow: var(--shadow-panel);
}
/* M3 headline/medium: Roboto 400 28/36 */
body.npf-home .npf-main .topics-card__title {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  color: var(--ink);
  margin-bottom: 13px;
}
body.npf-home .npf-main .topics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 34px;
  column-gap: 7px;
  row-gap: 6px;
}
body.npf-home .npf-main .topic-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--primary-tint);
  border-radius: 4px;
  padding: 3px 10px;
  transition: background var(--t), border-color var(--t), color var(--t);
}
body.npf-home .npf-main .topic-btn:hover { border-color: var(--primary); color: var(--primary); }
body.npf-home .npf-main .topic-btn--wide { grid-column: 1 / -1; }
body.npf-home .npf-main .topic-btn.is-active { background: var(--primary); border-color: var(--primary-tint); color: #fff; }

/* ============================================================
   SHARED FORM CONTROLS (checkout / login / signup)
   ============================================================ */
body.npf-home .npf-main .field { display: grid; }
/* Label = Figma "Body/Medium/Medium" (Inter 500 16/20), 8px above the control */
body.npf-home .npf-main .form-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #010810;
  margin-bottom: 8px;
}
/* Input = 44px tall, 2px radius, Public Sans 14/20 with 15px/11px insets */
body.npf-home .npf-main .form-input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--g100);
  border-radius: 2px;
  padding: 11px 15px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  background: #fff;
  transition: border-color var(--t), box-shadow var(--t);
}
body.npf-home .npf-main .form-input::placeholder { color: var(--g500); }
body.npf-home .npf-main .form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(63, 109, 179, 0.14);
}
body.npf-home .npf-main .form-row { display: grid; gap: 18px; }
body.npf-home .npf-main .form-row--2 { grid-template-columns: 1fr 1fr; }
/* Four 170px columns inside a 706px track leaves 8.67px gutters */
body.npf-home .npf-main .form-row--4 { grid-template-columns: repeat(4, 1fr); gap: 8.67px; }
/* Phone (282) + Email (402) is the one asymmetric row */
body.npf-home .npf-main .form-row--split { grid-template-columns: 282fr 402fr; gap: 22px; }

/* Custom checkbox */
body.npf-home .npf-main .checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  margin: 22px 0;
}
body.npf-home .npf-main .checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
body.npf-home .npf-main .checkbox__box {
  flex: none;
  width: 20px; height: 20px;
  border: 1px solid var(--g300);
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #fff;
  transition: background var(--t), border-color var(--t);
}
body.npf-home .npf-main .checkbox__box svg { width: 14px; height: 14px; opacity: 0; transition: opacity var(--t); }
body.npf-home .npf-main .checkbox input:checked + .checkbox__box { background: var(--primary); border-color: var(--primary); }
body.npf-home .npf-main .checkbox input:checked + .checkbox__box svg { opacity: 1; }
body.npf-home .npf-main .checkbox input:focus-visible + .checkbox__box { box-shadow: 0 0 0 3px rgba(63,109,179,.3); }
body.npf-home .npf-main .checkbox__text {
  font-family: var(--font-alt);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}

/* ============================================================
   CHECKOUT
   ============================================================ */
/* The bed is a 664px #f9fbff→white gradient, then plain white down to the footer */
body.npf-home .npf-main .checkout {
  background: linear-gradient(180deg, var(--auth-bed) 0%, #ffffff 100%) no-repeat;
  background-size: 100% 664px;
  padding-block: 100px;
}
/* Breadcrumb: Inter 500 16/20, 8px between crumbs, only "Home" is dimmed */
body.npf-home .npf-main .checkout .breadcrumb {
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 38px;
}
body.npf-home .npf-main .checkout .breadcrumb a { gap: 8px; color: rgba(1, 8, 16, 0.6); }
body.npf-home .npf-main .checkout .breadcrumb a ~ a { gap: 3px; color: #010810; }
body.npf-home .npf-main .checkout .breadcrumb__current {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #010810;
  font-weight: 500;
}

body.npf-home .npf-main .checkout-layout {
  display: grid;
  /* minmax(0,…) stops the card's fixed-width content forcing a min-content floor,
     which otherwise steals a couple of px from the 706px form column */
  grid-template-columns: minmax(0, 706fr) minmax(0, 424fr);
  gap: 70px;
  align-items: start;
}
/* Dropdowns match the inputs; the listing page keeps its taller sidebar variant */
body.npf-home .npf-main .checkout .select--block select {
  height: 44px;
  min-width: 0;
  padding: 11px 38px 11px 15px;
  border: 1px solid var(--g100);
  border-radius: 2px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--g400);
}
body.npf-home .npf-main .checkout .select img {
  position: absolute;
  right: 15px;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
body.npf-home .npf-main .checkout-form { display: grid; gap: 74px; align-content: start; }
body.npf-home .npf-main .billing-block { display: grid; gap: 38px; }
body.npf-home .npf-main .billing-fields { display: grid; gap: 28px; }
body.npf-home .npf-main .checkout-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 56px;
  line-height: 64px;
  letter-spacing: -2px;
  text-transform: capitalize;
  color: var(--ink);
  margin: 0;
}

/* Payment box — fixed 520px shell, 648px inner column */
body.npf-home .npf-main .payment-box {
  background: #fff;
  border: 1px solid var(--g100);
  border-radius: 4px;
  height: 520px;
  padding: 20px 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
body.npf-home .npf-main .payment-box__title, body.npf-home .npf-main .payment-methods, body.npf-home .npf-main .payment-box__fields { width: 648px; max-width: calc(100% - 32px); }
body.npf-home .npf-main .payment-box__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #010810;
  margin: 0;
}
body.npf-home .npf-main .payment-methods {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--g100);
  border-radius: 0;
  padding: 24px;
}
/* Each method sits in an equal quarter of the row — the design fixes its label
   at 160px wide and centres it, which comes out to the same even distribution */
body.npf-home .npf-main .pay-method {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0;
  cursor: pointer;
}
body.npf-home .npf-main .pay-method__head { display: flex; flex-direction: column; align-items: center; gap: 8px; }
body.npf-home .npf-main .pay-method__logo { width: 32px; height: 32px; display: grid; place-items: center; }
body.npf-home .npf-main .pay-method__logo svg { width: 32px; height: 32px; }
body.npf-home .npf-main .pay-method__name {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--g900);
  text-align: center;
}
body.npf-home .npf-main .pay-divider { flex: none; width: 1px; height: 96px; background: var(--g100); }
body.npf-home .npf-main .pay-radio { position: absolute; opacity: 0; width: 0; height: 0; }
body.npf-home .npf-main .pay-radio__dot {
  width: 20px; height: 20px;
  border-radius: 100px;
  border: 1px solid var(--g200);
  background: #fff;
  display: grid;
  place-items: center;
  transition: background var(--t), border-color var(--t);
}
body.npf-home .npf-main .pay-radio__dot::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform var(--t);
}
body.npf-home .npf-main .pay-radio:checked ~ .pay-radio__dot { background: var(--radio-on); border-color: var(--radio-on); }
body.npf-home .npf-main .pay-radio:checked ~ .pay-radio__dot::after { transform: scale(1); }
body.npf-home .npf-main .pay-radio:focus-visible ~ .pay-radio__dot { box-shadow: 0 0 0 3px rgba(250,130,50,.3); }
body.npf-home .npf-main .payment-box__fields { display: grid; gap: 16px; padding-top: 12px; }
body.npf-home .npf-main .payment-box__fields .form-row--2 { gap: 16px; }

/* Order summary card — 424px shell around a 376px content column */
body.npf-home .npf-main .checkout-summary { position: sticky; top: calc(var(--nav-h) + 16px); }
body.npf-home .npf-main .order-card {
  background: #fff;
  border: 1px solid var(--g100);
  border-radius: 4px;
  padding: 0 24px 24px;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.npf-home .npf-main .order-card > * { width: 100%; }
/* Both blocks are fixed-height in the design, with even 16px / 18px rhythm */
body.npf-home .npf-main .order-total {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 271px;
  padding-bottom: 24px;
}
body.npf-home .npf-main .order-coupon {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 250px;
}
body.npf-home .npf-main .order-card__title {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: 0;
  color: var(--g900);
  margin: 0;
  padding: 20px 0;
}
body.npf-home .npf-main .order-seller { display: flex; align-items: center; gap: 16px; padding-bottom: 24px; margin: 0; }
body.npf-home .npf-main .order-seller img { width: 64px; height: 64px; border-radius: 2px; object-fit: cover; flex: none; }
body.npf-home .npf-main .order-seller p {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--g900);
}
body.npf-home .npf-main .order-rows { display: grid; gap: 12px; padding-bottom: 4px; }
body.npf-home .npf-main .order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
body.npf-home .npf-main .order-row span {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--g600);
}
body.npf-home .npf-main .order-row strong {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--g900);
  white-space: nowrap;
}
body.npf-home .npf-main .order-row--total { padding: 0; }
body.npf-home .npf-main .order-row--total span { font-size: 16px; line-height: 24px; color: var(--g900); font-weight: 400; }
body.npf-home .npf-main .order-row--total strong { font-size: 16px; line-height: 24px; color: var(--g900); font-weight: 600; }
body.npf-home .npf-main .order-divider { border: none; border-top: 1px solid var(--g100); margin: 0; }

/* Coupon block inside the summary stacks label / input / button */
body.npf-home .npf-main .order-card .pkg-coupon__label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: var(--g900);
  margin: 0;
}
body.npf-home .npf-main .order-card .pkg-coupon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding-bottom: 24px;
}
body.npf-home .npf-main .order-card .pkg-coupon input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--g100);
  border-radius: 2px;
  padding: 11px 15px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 20px;
  background: #fff;
}
body.npf-home .npf-main .order-card .pkg-coupon input::placeholder { color: var(--g500); }
body.npf-home .npf-main .order-card .pkg-coupon__btn {
  background: var(--primary-light);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  line-height: 48px;
  letter-spacing: 0.168px;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 0 24px;
}
body.npf-home .npf-main .order-card .checkbox { margin: 0; align-items: flex-start; gap: 12px; }
body.npf-home .npf-main .order-card .checkbox__box { margin-top: 2px; }
body.npf-home .npf-main .order-place {
  margin-top: 0;
  padding: 0 32px;
  gap: 12px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  line-height: 56px;
  letter-spacing: 0.192px;
  text-transform: uppercase;
}
body.npf-home .npf-main .order-place svg { width: 24px; height: 24px; }

/* ============================================================
   AUTH (login role-select / registration)
   ============================================================ */
/* The page bed behind the panel is a flat #f9fbff band, not a gradient, and it
   runs 100px above and below the panel on both auth screens. */
body.npf-home .npf-main .auth {
  background: var(--auth-bed);
  padding-block: 100px;
  display: flex;
}
body.npf-home .npf-main .auth .container { display: flex; justify-content: center; }
body.npf-home .npf-main .auth-panel {
  background: #fff;
  border-radius: 24px;
  padding: 56px clamp(24px, 5vw, 70px) 64px;
  width: 100%;
  max-width: 860px;
  box-shadow: var(--shadow-panel);
}
/* Login role-select panel: 914x695 with a flat 10px frame around a 710px column */
body.npf-home .npf-main .auth-panel--wide {
  max-width: 914px;
  height: 695px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
body.npf-home .npf-main .auth-title {
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 56px;
  line-height: 64px;
  letter-spacing: -2px;
  text-transform: capitalize;
  color: var(--ink);
  margin: 0 auto;
  max-width: 18ch;
}
body.npf-home .npf-main .auth-sub {
  text-align: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--muted-slate);
  margin-top: 13px;
}
body.npf-home .npf-main .auth-panel--wide .auth-title, body.npf-home .npf-main .auth-panel--wide .auth-sub { width: 664px; max-width: 100%; }

/* Role cards */
body.npf-home .npf-main .role-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  width: 710px;
  max-width: 100%;
  margin-top: 38px;
}
body.npf-home .npf-main .role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 342px;
  height: 350px;
  background: #f7f7f7;
  border-radius: 20px;
  /* 45px side inset leaves the 252px content column the design specifies */
  padding: 61px 45px 0;
  gap: 39px;
  transition: transform var(--t);
}
body.npf-home .npf-main .role-card:hover { transform: translateY(-6px); }
body.npf-home .npf-main .role-card__icon {
  flex: none;
  height: 90px;
  display: grid;
  place-items: center;
}
body.npf-home .npf-main .role-card__icon img { display: block; width: 67.5px; height: 60px; }
body.npf-home .npf-main .role-card__icon--tall img { width: 78px; height: 90px; }
body.npf-home .npf-main .role-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 252px;
  max-width: 100%;
}
body.npf-home .npf-main .role-card__title {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: 0;
  color: var(--ink-warm);
  margin: 0;
}
body.npf-home .npf-main .role-card__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink-warm);
  max-width: none;
}
/* The dark card sits 4px higher and pulls its text 9px tighter to the icon */
body.npf-home .npf-main .role-card--dark {
  background: #133660;
  padding-top: 65px;
  gap: 30px;
}
body.npf-home .npf-main .role-card--dark .role-card__title, body.npf-home .npf-main .role-card--dark .role-card__text { color: #fff; }

/* Registration form */
body.npf-home .npf-main .auth-form { display: grid; gap: 22px; margin-top: 40px; }
body.npf-home .npf-main .auth-form .btn { margin-top: 4px; }
body.npf-home .npf-main .auth-form .checkbox { margin: 4px 0; }
body.npf-home .npf-main .checkbox__text a { color: var(--primary); text-decoration: underline; }
body.npf-home .npf-main .checkbox__text a:hover { color: var(--primary-dark); }

/* Password field with toggle */
body.npf-home .npf-main .password { position: relative; }
body.npf-home .npf-main .password .form-input { padding-right: 50px; }
body.npf-home .npf-main .password__toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  color: var(--text-soft);
  border-radius: 8px;
  transition: color var(--t), background var(--t);
}
body.npf-home .npf-main .password__toggle:hover { color: var(--primary); background: var(--bg-alt); }
body.npf-home .npf-main .password__toggle svg { width: 20px; height: 20px; }
body.npf-home .npf-main .password__toggle.is-on { color: var(--primary); }

/* ============================================================
   HERO BADGE — Figma 420:3031, a 385x44 pill above the h1
   ============================================================ */
body.npf-home .npf-main .hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-pill);
  background: rgba(79, 132, 195, 0.11);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.24px;
  color: var(--primary);
  margin-bottom: 9px;
}
/* The dot is a 6px circle inside an 18.8px glow, so the asset overflows its box */
body.npf-home .npf-main .hero__badge img {
  width: 18.8px;
  height: 18.8px;
  flex: none;
  margin: -6.4px;
}

/* ============================================================
   NAV DROPDOWN — Figma 420:3058, hangs off "Marketing & Communications"
   ============================================================ */
body.npf-home .npf-main .nav__item {
  position: relative;
  display: flex;
  align-items: center;
}
body.npf-home .npf-main .nav__dropdown {
  position: absolute;
  top: calc(100% + 21px);
  /* Figma aligns the panel to the link's text, not its padding box */
  left: 12px;
  z-index: 60;
  display: flex;
  gap: 40px;
  padding: 20px;
  border: 1px solid var(--g100);
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
body.npf-home .npf-main .nav__item:hover .nav__dropdown, body.npf-home .npf-main .nav__item:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
body.npf-home .npf-main .nav__dropdown-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
body.npf-home .npf-main .nav__dropdown-col:first-child { width: 269px; }
body.npf-home .npf-main .nav__dropdown-col:last-child { width: 332px; }
body.npf-home .npf-main .nav__dropdown a {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #010810;
  white-space: nowrap;
  transition: background var(--t), color var(--t);
}
body.npf-home .npf-main .nav__dropdown a:hover, body.npf-home .npf-main .nav__dropdown a:focus-visible { background: #f2f4f5; }

/* ============================================================
   CHALLENGE — Figma 420:2457 "What's Your Biggest Nonprofit Challenge?"
   ============================================================ */
body.npf-home .npf-main .challenge { background: var(--bg-alt); padding-block: 100px; }
body.npf-home .npf-main .challenge__inner {
  display: flex;
  flex-direction: column;
  gap: 50px;
  max-width: 1200px;
  margin-inline: auto;
}
body.npf-home .npf-main .challenge__head { text-align: center; }
body.npf-home .npf-main .challenge__head h2 {
  font-size: 40px;
  line-height: 1.3;
  letter-spacing: -2px;
  text-transform: capitalize;
}
body.npf-home .npf-main .challenge__head p {
  margin-top: 16px;
  font-size: 16px;
  line-height: 26px;
  color: var(--muted-slate);
}
/* One track per card. The element sets --npf-challenge-cols from how many rows
   the builder actually holds; the 6 here is only what an unstyled fallback
   would get, since the design shipped with six cards. */
/* One track per card, each taking an equal share of the row.
   The design's six 189px cards were laid out as fixed tracks with
   `space-between`, which only reads correctly at exactly six: the tracks stay
   189px whatever happens, so removing a card left its 189px behind as extra gap
   and the remaining five looked stranded and narrow rather than filling the row.
   `1fr` tracks with a fixed gap give the same six-card layout — 189px each at
   the design's width — and widen the cards when there are five. */
body.npf-home .npf-main .challenge__grid {
  display: grid;
  grid-template-columns: repeat(var(--npf-challenge-cols, 6), minmax(0, 1fr));
  gap: 20px;
}
body.npf-home .npf-main .challenge-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: var(--radius);
  background: #fff;
  transition: transform var(--t), box-shadow var(--t);
}
body.npf-home .npf-main .challenge-card:hover {
  transform: translateY(-4px);
}
body.npf-home .npf-main .challenge-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 14px;
  background: var(--primary);
}
body.npf-home .npf-main .challenge-card__icon img { width: 30px; height: 30px; }
body.npf-home .npf-main .challenge-card__body { display: flex; flex-direction: column; gap: 12px; }
body.npf-home .npf-main .challenge-card__title {
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  text-transform: capitalize;
  color: var(--ink);
}
body.npf-home .npf-main .challenge-card__body p {
  font-size: 16px;
  line-height: 26px;
  color: var(--muted-slate);
}
/* `.challenge-card__link` — the per-card caption — is no longer rendered; see
   npf-challenge.php. Its `margin-top: auto` was what pushed the cards' contents
   apart to a common height, so that job moves to the body. */
body.npf-home .npf-main .challenge-card__body { margin-bottom: auto; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  body.npf-home .npf-main .experts-grid { grid-template-columns: repeat(2, 1fr); }
  body.npf-home .npf-main .footer__top { grid-template-columns: 1fr 1fr 1fr; }
  body.npf-home .npf-main .footer__brand-col { grid-column: 1 / -1; }

  /* 6 fixed 189px columns no longer fit — fall back to a fluid 3-up grid */
  body.npf-home .npf-main .challenge__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

  body.npf-home .npf-main .listing-layout { grid-template-columns: 250px 1fr; gap: 22px; }
  body.npf-home .npf-main .results-grid { grid-template-columns: repeat(2, 1fr); }

  body.npf-home .npf-main .dash-layout { grid-template-columns: 300px minmax(0, 1fr); column-gap: 30px; }
  body.npf-home .npf-main .dash-welcome h1 { font-size: clamp(48px, 5.6vw, 72px); line-height: 1.14; letter-spacing: -2px; }
  body.npf-home .npf-main .recommend-grid { grid-template-columns: repeat(2, 1fr); }

  /* Sidebar keeps its 42px card inset, so don't take it below ~400px */
  body.npf-home .npf-main .detail-layout { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; }

  body.npf-home .npf-main .checkout-layout { grid-template-columns: 1fr 360px; gap: 32px; }

  /* Four cards at ~250px each is where the labels start breaking badly, so
     they pair up rather than going straight from four to one at 860. */
  body.npf-home .npf-main .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.npf-home .npf-main .stat__statement { font-size: 25px; line-height: 32px; }
}

@media (max-width: 860px) {
  body.npf-home .npf-main { --nav-h: 92px; }
  body.npf-home .npf-main .section { padding-block: 40px; padding-bottom: 40px; }

  body.npf-home .npf-main .challenge { padding-block: 68px; }
  body.npf-home .npf-main .challenge__inner { gap: 36px; }
  body.npf-home .npf-main .challenge__head h2 { font-size: 32px; letter-spacing: -1px; }
  body.npf-home .npf-main .challenge__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

  /* The 960px table keeps its geometry and scrolls inside the card */
  body.npf-home .npf-main .compare__wrap { padding: 28px; border-radius: 16px; }
  body.npf-home .npf-main .section-head h2, body.npf-home .npf-main .stats__head h2, body.npf-home .npf-main .experts__head h2, body.npf-home .npf-main .testi__head h2, body.npf-home .npf-main .cta h2 { font-size: 32px; letter-spacing: -1px; }
  body.npf-home .npf-main .stat__num { font-size: 40px; line-height: 48px; }

  body.npf-home .npf-main .nav__menu, body.npf-home .npf-main .nav__actions { display: none; }
  body.npf-home .npf-main .nav__toggle { display: flex; }
  body.npf-home .npf-main .nav {
    justify-content: space-between;
  }
  body.npf-home .npf-main .mobile-menu {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 20px var(--gutter) 28px;
    display: grid;
    gap: 6px;
    transform: translateY(-120%);
    transition: transform var(--t);
    z-index: 99;
  }
  body.npf-home .npf-main .mobile-menu.is-open { transform: none; }
  body.npf-home .npf-main .mobile-menu a {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
  }
  body.npf-home .npf-main .mobile-menu a:hover, body.npf-home .npf-main .mobile-menu a.is-active { background: var(--primary-soft); color: var(--primary-dark); }
  body.npf-home .npf-main .mobile-menu .btn { margin-top: 10px; }

  /* Headings reflow naturally on mobile — the desktop line breaks are dropped */
  body.npf-home .npf-main .section-head h2 br { display: none; }

  /* Carousel cards fill the column instead of overflowing it */
  body.npf-home .npf-main .testi__track { grid-auto-columns: 100%; }

  /* Network graphic: the whole diagram scales as one, so only the frame changes */
  body.npf-home .npf-main .hero__panel { padding: 26px 0 0; }
  body.npf-home .npf-main .hero__graphic { margin-top: 18px; }
  body.npf-home .npf-main .node { --n: 7.6%; border-width: 2px; }
  body.npf-home .npf-main .search-tags { gap: 8px; margin-top: 24px; }
  body.npf-home .npf-main .search-tags .chip { padding: 7px 13px; font-size: 12px; }
  body.npf-home .npf-main .search-bar { padding: 8px 8px 8px 20px; }
  body.npf-home .npf-main .search-bar input { padding: 10px 0; }

  body.npf-home .npf-main .pain-grid { grid-template-columns: 1fr; }

  /* Why section: image on top, list below */
  body.npf-home .npf-main .why__body { grid-template-columns: 1fr; gap: 36px; }
  body.npf-home .npf-main .why__media { order: -1; }

  body.npf-home .npf-main .stats-grid { grid-template-columns: 1fr; }
  body.npf-home .npf-main .steps-grid { grid-template-columns: 1fr; }
  body.npf-home .npf-main .process-steps { grid-template-columns: 1fr 1fr; }
  body.npf-home .npf-main .process-steps::before { display: none; }
  body.npf-home .npf-main .blog__grid { grid-template-columns: 1fr; }

  /* Header actions move below their content, centered */
  body.npf-home .npf-main .experts__more, body.npf-home .npf-main .testi__nav {
    order: 4;
    margin: 32px auto 0;
  }

  body.npf-home .npf-main .footer__top { grid-template-columns: 1fr 1fr; }
  body.npf-home .npf-main .footer__brand-col { margin-bottom: 30px; }

  /* ---- Listing page mobile ---- */
  /* The design drops the breadcrumb and page heading on mobile.
     The h1 stays in the DOM for assistive tech and SEO. */
  body.npf-home .npf-main .listing { padding-block: 61px 60px; }
  body.npf-home .npf-main .listing > .container > .breadcrumb { display: none; }
  body.npf-home .npf-main .listing-head {
    position: absolute;
    width: 1px; height: 1px;
    margin: 0; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  body.npf-home .npf-main .filter-bar { margin-bottom: 26px; }
  body.npf-home .npf-main .filter-bar__box { padding: 12px 14px; }
  body.npf-home .npf-main .filters-toggle { display: inline-flex; }
  body.npf-home .npf-main .active-filters { display: none; }
  body.npf-home .npf-main .sort { display: none; }
  body.npf-home .npf-main .results-count { font-size: 14px; }

  body.npf-home .npf-main .listing-layout { grid-template-columns: 1fr; }

  /* Sidebar becomes a slide-in drawer */
  body.npf-home .npf-main .filters {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(340px, 88vw);
    background: #fff;
    z-index: 210;
    padding: 20px;
    overflow-y: auto;
    transform: translateX(-102%);
    transition: transform var(--t);
    border-radius: 0;
    display: block;
  }
  body.npf-home .npf-main .filters.is-open { transform: none; }
  body.npf-home .npf-main .filter-group { margin-bottom: 18px; }
  body.npf-home .npf-main .filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 19px;
    color: var(--ink);
  }
  body.npf-home .npf-main .filters__close {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--bg-alt);
    color: var(--ink);
    transition: background var(--t);
  }
  body.npf-home .npf-main .filters__close:hover { background: var(--primary-soft); color: var(--primary); }
  body.npf-home .npf-main .filters__close svg { width: 20px; height: 20px; }

  /* Detail page: stack main then sidebar. Mobile node 217:473 is a 375
     frame with a 24px gutter — 60px page padding, 60px between the two
     stacks, 40px between sidebar cards, and tighter card insets. */
  body.npf-home .npf-main .detail { padding-block: 60px; }
  body.npf-home .npf-main .detail-layout { grid-template-columns: 1fr; gap: 60px; }
  body.npf-home .npf-main .detail-side { position: static; gap: 40px; }
  /* Figma "Mobile Re": Inter 600 32px, no negative tracking */
  body.npf-home .npf-main .detail-title { font-size: 32px; line-height: 1.15; letter-spacing: 0; }
  /* 17px inset; the gap tightens by 4px so "Job is done or money back"
     still fits on one line in the 327px frame */
  body.npf-home .npf-main .secure-banner { padding: 0 17px; gap: 16px; }
  body.npf-home .npf-main .pkg-card__head { padding: 0 31px; }
  body.npf-home .npf-main .pkg-card__body { padding: 33px 19px 50px; }
  body.npf-home .npf-main .seller-card { padding: 50px 30px; }
  body.npf-home .npf-main .topics-card { padding: 50px 28px; }

  /* Auth: stack role cards, release the desktop fixed sizes */
  body.npf-home .npf-main .auth { padding-block: 30px 60px; }
  body.npf-home .npf-main .auth-panel { padding: 34px 20px 40px; border-radius: 22px; }
  body.npf-home .npf-main .auth-panel--wide { height: auto; padding: 34px 20px 40px; }
  body.npf-home .npf-main .auth-title { font-size: clamp(30.4px, 7vw, 41.6px); line-height: 1.14; letter-spacing: -1px; }
  body.npf-home .npf-main .auth-panel--wide .auth-title, body.npf-home .npf-main .auth-panel--wide .auth-sub { width: 100%; }
  body.npf-home .npf-main .role-grid { flex-direction: column; width: 100%; gap: 22px; margin-top: 32px; }
  body.npf-home .npf-main .role-card { width: 100%; height: auto; padding: 40px 26px; gap: 26px; }
  body.npf-home .npf-main .role-card--dark { padding-top: 40px; gap: 26px; }
  body.npf-home .npf-main .role-card__body { width: 100%; }

  /* Checkout: stack form then summary, and release the desktop fixed heights */
  body.npf-home .npf-main .checkout { padding-block: 40px 60px; }
  body.npf-home .npf-main .checkout .breadcrumb { margin-bottom: 24px; }
  body.npf-home .npf-main .checkout-layout { grid-template-columns: 1fr; gap: 30px; }
  body.npf-home .npf-main .checkout-summary { position: static; }
  body.npf-home .npf-main .checkout-form { gap: 38px; }
  body.npf-home .npf-main .billing-block { gap: 24px; }
  body.npf-home .npf-main .checkout-title { font-size: clamp(32px, 7vw, 41.6px); line-height: 1.14; letter-spacing: -1px; }
  body.npf-home .npf-main .form-row--2, body.npf-home .npf-main .form-row--split { grid-template-columns: 1fr; gap: 18px; }
  body.npf-home .npf-main .form-row--4 { grid-template-columns: 1fr 1fr; gap: 18px; }
  body.npf-home .npf-main .payment-box { height: auto; padding: 20px 16px 32px; gap: 24px; }
  body.npf-home .npf-main .payment-box__title, body.npf-home .npf-main .payment-methods, body.npf-home .npf-main .payment-box__fields { width: 100%; max-width: none; }
  /* Methods wrap to a 2x2 grid; the vertical rules don't apply there */
  body.npf-home .npf-main .payment-methods { flex-wrap: wrap; padding: 16px; gap: 24px 0; }
  body.npf-home .npf-main .pay-method { flex: 0 0 50%; }
  body.npf-home .npf-main .pay-divider { display: none; }
  body.npf-home .npf-main .order-card { padding: 0 18px 22px; }
  body.npf-home .npf-main .order-total, body.npf-home .npf-main .order-coupon { height: auto; }
  body.npf-home .npf-main .order-coupon { padding-bottom: 18px; }

  /* ---- Dashboard mobile (node 217:1235): welcome + list-CTA first, then
     the sidebar cards, then the panels — 30px apart, 60px page padding ---- */
  body.npf-home .npf-main .dash { padding-top: 60px; }
  body.npf-home .npf-main .dash-layout {
    /* minmax(0,…) — plain 1fr lets the 506px list-CTA column impose a
       min-content floor and overflow the 375px frame */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "welcome" "side" "main";
    row-gap: 30px;
    padding-bottom: 60px;
  }
  body.npf-home .npf-main .dash-welcome { margin-bottom: 0; }
  body.npf-home .npf-main .dash-welcome h1 {
    width: 100%;
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -1px;
    margin-bottom: 32px;
  }
  body.npf-home .npf-main .list-cta__art { width: 200px; }
  body.npf-home .npf-main .panel { padding: 32px 24px; }
  body.npf-home .npf-main .dash-main .panel:first-child { padding-inline: 12px; }
  body.npf-home .npf-main .panel__title { font-size: 24px; line-height: 32px; margin-bottom: 24px; }
  body.npf-home .npf-main .recommend-grid { grid-template-columns: repeat(2, 1fr); column-gap: 9px; row-gap: 19px; }
  body.npf-home .npf-main .recent-item { gap: 14px; }

  /* CTA: keep the decorative circles as subtle corner arcs */
  body.npf-home .npf-main .cta::before { width: 190px; height: 190px; top: -142px; right: -52px; }
  body.npf-home .npf-main .cta::after { width: 260px; height: 260px; bottom: -166px; left: -118px; }
  body.npf-home .npf-main .cta__ring { width: 260px; height: 260px; top: -176px; right: -86px; }
  body.npf-home .npf-main .cta__ring--bl { width: 340px; height: 340px; bottom: -208px; left: -160px; }
  body.npf-home .npf-main .ask-bar .btn { white-space: nowrap; padding-inline: 20px; }
  body.npf-home .npf-main .ask-bar input { padding: 12px 14px; min-width: 0; }

  body.npf-home .npf-main .footer .brand { font-size: 20px; gap: 20px; }
  body.npf-home .npf-main .footer .brand__mark { font-size: 78px; }

  /* CTA feature list: stacked, left-aligned within a centered column */
  body.npf-home .npf-main .cta__features {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    max-width: 560px;
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  /* Selects keep a 170px floor on desktop; at 375px two of them in a row
     would push the checkout form past the viewport. */
  body.npf-home .npf-main .select select { min-width: 0; width: 100%; }
  body.npf-home .npf-main .select { min-width: 0; }
  body.npf-home .npf-main .form-row > * { min-width: 0; }

  body.npf-home .npf-main .challenge__head h2 { font-size: 28px; }
  body.npf-home .npf-main .challenge__grid { grid-template-columns: 1fr; }
  body.npf-home .npf-main .hero__badge { font-size: 13px; padding: 8px 16px; }
  body.npf-home .npf-main .section-head h2, body.npf-home .npf-main .stats__head h2, body.npf-home .npf-main .experts__head h2, body.npf-home .npf-main .testi__head h2, body.npf-home .npf-main .cta h2 { font-size: 28px; }
  body.npf-home .npf-main .toggle { height: 58px; }
  body.npf-home .npf-main .toggle__btn { font-size: 14px; height: 42px; padding: 0 18px; }

  /* Experts stay 2-up on mobile per design — the cards are only ~159px wide,
     so type steps down hard to keep tags on one line like the design does. */
  body.npf-home .npf-main .experts-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  /* Exact sizes measured off the mobile design's card body (375px frame):
     tag 8px in a 14.5px pill, name 11px, role 8.8px. */
  body.npf-home .npf-main .expert-card__body { padding: 18px 7px 14px; }
  body.npf-home .npf-main .expert-card__tags { gap: 5px; flex-wrap: nowrap; margin-bottom: 7px; }
  body.npf-home .npf-main .expert-card__tags .tag {
    font-size: 7px;
    line-height: 1;
    padding: 3.4px 5.5px;
    white-space: nowrap;
  }
  body.npf-home .npf-main .expert-card h3 { font-size: 11px; }
  body.npf-home .npf-main .expert-card__role { font-size: 8px; margin-top: 8px; }
  body.npf-home .npf-main .expert-card__rating { font-size: 11px; padding: 4px 6px; gap: 4px; bottom: 7px; right: 7px; }
  body.npf-home .npf-main .expert-card__stars { gap: 0.5px; }
  body.npf-home .npf-main .expert-card__stars .npf-star { width: 9px; height: 9px; }
  body.npf-home .npf-main .expert-card__reviews { font-size: 8px; }
  body.npf-home .npf-main .expert-card__badge { width: 26px; height: 31px; top: 7px; right: 8px; }
  /* The dashboard cards carry desktop-scale overrides that out-specify the
     rules above, so the same step-down has to be repeated for them here. */
  body.npf-home .npf-main .recommend-grid .expert-card__body { padding: 18px 7px 14px; }
  body.npf-home .npf-main .recommend-grid .expert-card__tags { gap: 5px; flex-wrap: nowrap; margin-bottom: 7px; }
  body.npf-home .npf-main .recommend-grid .tag {
    height: auto;
    font-size: 7px;
    line-height: 1;
    padding: 3.4px 5.5px;
    white-space: nowrap;
  }
  body.npf-home .npf-main .recommend-grid .expert-card h3 { font-size: 11px; line-height: 1.3; }
  body.npf-home .npf-main .recommend-grid .expert-card__role { font-size: 8px; line-height: 1.4; margin-top: 8px; }
  body.npf-home .npf-main .recommend-grid .expert-card__rating {
    height: auto;
    font-size: 11px;
    padding: 4px 6px;
    bottom: 7px; right: 7px;
  }
  body.npf-home .npf-main .recommend-grid .expert-card__badge { width: 26px; height: 31px; top: 7px; right: 8px; }
  body.npf-home .npf-main .process-steps { grid-template-columns: 1fr; }
  body.npf-home .npf-main .footer__top { grid-template-columns: 1fr; }
  body.npf-home .npf-main .footer__bottom { flex-direction: column; align-items: flex-start; }
  body.npf-home .npf-main .hero__panel { padding: 24px 0 0; }
  /* All three tags sit on one row in the design */
  body.npf-home .npf-main .search-tags { gap: 5px; }
  body.npf-home .npf-main .search-tags .chip { padding: 7px; font-size: 12px; }

  /* Dashboard: smaller recent-view thumbnails */
  body.npf-home .npf-main .recent-item { gap: 12px; padding: 14px 0; }
  body.npf-home .npf-main .recent-item > img { width: 56px; height: 56px; }
  body.npf-home .npf-main .recent-item__title { font-size: 14px; }

  /* Listing: 2-up cards, condensed pagination */
  body.npf-home .npf-main .results-grid { grid-template-columns: repeat(2, 1fr); column-gap: 9px; row-gap: 19px; }
  body.npf-home .npf-main .page-btn { width: 42px; height: 42px; font-size: 14px; }
  body.npf-home .npf-main .pagination { gap: 10px; }
  body.npf-home .npf-main .pagination .page-btn:nth-child(4), body.npf-home .npf-main .pagination .page-btn:nth-child(5) { display: none; }

  /* Hero buttons stay side by side on mobile */
  body.npf-home .npf-main .hero__cta { flex-wrap: nowrap; gap: 12px; }
  body.npf-home .npf-main .hero__cta .btn { flex: 1 1 0; padding-inline: 12px; font-size: 15px; white-space: nowrap; }
}

/* Utility: hidden tab panel (marketplace audience toggle) */
body.npf-home .npf-main .is-hidden { display: none !important; }

@media (max-width: 767px) {
  body.npf-home .npf-main .pain-card{
    padding: 20px !important;
    gap: 20px !important;
  }

  body.npf-home .npf-main .section-head{
    margin: 50px auto 50px !important;
  }

  body.npf-home .npf-main .challenge-card__icon img{
    width: 20px;
    height: 20px;
  }


  body.npf-home .npf-main .section-head {
    margin: 0 auto 20px !important;
  }

  body.npf-home .npf-main .step-card{
    align-items: center !important;
    gap: 20px !important; 
  }

  body.npf-home .npf-main .compare-table thead th{
    height: 130px !important;
    font-size: 16px !important;
    line-height: 20px !important;
  }

  body.npf-home .npf-main .compare-table tbody td{
    padding: 20px 5px 0 !important; 
  }

  body.npf-home .npf-main .compare-table .feat{
    gap: 8px !important; 
    font-size: 14px !important;
    line-height: 18px !important;
    min-height: 40px !important;
  }

  body.npf-home .npf-main .compare-table thead .col-icon{
    width: 30px !important;
    height: 30px !important;
  }

  body.npf-home .npf-main .cell--yes{
    font-size: 14px !important;
    line-height: 18px !important;
  }

  body.npf-home .npf-main .pstep__icon{
    margin: 0 auto 37px !important;
  }
  .process-steps .pstep{
    margin-top: 20px !important;
  }

  body.npf-home .npf-main .nav-btn{
    width: 48px !important;
    height: 40px !important;
  }

  body.npf-home .npf-main .btn{
    padding: 10px 20px !important;
    font-size: 14px !important;
    line-height: 28px !important;
  }

  body.npf-home .npf-main .post-author .btn--sm{
    padding: 8px 12px !important;
    line-height: 24px !important;
    font-size: 14px !important;
  }

  body.npf-home .npf-main .challenge-card__icon{
    width: 46px;
    height: 46px;
  }

}