/* ==========================================================================
   Business pricing, section 1 "WAYS TO PAY" (nafas.com/business-pricing-plan, Framer node framer-1hl20kc)
   Breakpoints (this section): desktop >= 1440, tablet 810 to 1439.98, phone <= 809.98.
   Measured on live:
   - eyebrow, title, lead and the three pill labels fade 0 -> 1 once >= 50% in view (Framer appear,
     spring duration 0.6 / bounce 0.1, animateOnce); the pill backgrounds are static.
   - the Buying / Renting / Compare pills are plain divs on live: no link, no scroll, no hover, no press state,
     cursor auto. Copied as inert.
   ========================================================================== */

.nf-bp-ways {
  --nf-bp-ways-regular: "SF Pro Display Regular", sans-serif;
  --nf-bp-ways-medium: "SF Pro Display Medium", sans-serif;
  /* framer-motion spring (duration 0.6, bounce 0.1) as a CSS linear() curve */
  --nf-bp-ways-spring: linear(0, 0.0337, 0.1142, 0.2176, 0.3285, 0.4369, 0.5372, 0.6262, 0.703, 0.7677, 0.821, 0.8642, 0.8986, 0.9256, 0.9465, 0.9623, 0.9742, 0.983, 0.9893, 0.9938, 0.9968, 0.9989, 1.0002, 1.0009, 1.0013, 1.0015, 1.0015, 1.0014, 1.0013, 1.0011, 1);

  position: relative; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 32px;
  width: 100%; padding: 100px 80px 40px;
  overflow: clip;
}

.nf-bp-ways__header {
  position: relative; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  width: 100%; padding: 0;
  overflow: clip;
}

.nf-bp-ways__eyebrow,
.nf-bp-ways__title,
.nf-bp-ways__lead {
  position: relative; flex: 0 0 auto;
  width: 100%; margin: 0;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
  text-align: start; color: #000;
}

.nf-bp-ways__eyebrow {
  font-family: var(--nf-bp-ways-medium); font-weight: 500; font-size: 26px; line-height: 125%;
  letter-spacing: -0.04em; color: #9e9e9e;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
}

.nf-bp-ways__title {
  font-family: var(--nf-bp-ways-medium); font-weight: 500; font-size: 52px; line-height: 110%;
  letter-spacing: normal;
}
.nf-bp-ways__br { display: none; }

.nf-bp-ways__lead {
  width: 89%;
  font-family: var(--nf-bp-ways-regular); font-weight: 400; font-size: 24px; line-height: 125%;
  letter-spacing: -0.02em;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
}

/* ---------- pills ---------- */
.nf-bp-ways__pills {
  position: relative; flex: 0 0 auto;
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px;
  width: 100%; margin: 0; padding: 0; list-style: none;
  overflow: clip;
}
.nf-bp-ways__pill {
  position: relative; flex: 0 0 auto;
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
  width: min-content; height: min-content; padding: 12px 24px;
  background-color: #f5f5f5; border-radius: 99px;
  overflow: clip;
}
.nf-bp-ways__pill-label {
  position: relative; flex: 0 0 auto; display: block;
  white-space: pre;
  font-family: var(--nf-bp-ways-regular); font-weight: 400; font-size: 24px; line-height: 125%;
  letter-spacing: -0.04em; color: #000;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
}

/* ---------- load / in-view fade (JS adds .is-in at >= 50% in view, once) ---------- */
.nf-bp-ways [data-nf-bp-ways-fade] { opacity: 0; transition: opacity 0.6s var(--nf-bp-ways-spring); }
.nf-bp-ways [data-nf-bp-ways-fade].is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nf-bp-ways [data-nf-bp-ways-fade] { opacity: 1; transition: none; }
}

/* ---------- Tablet (810px to 1439.98px) ---------- */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .nf-bp-ways { padding: 80px 60px 40px; }
}

/* ---------- Phone (<= 809.98px) ---------- */
@media (max-width: 809.98px) {
  .nf-bp-ways { gap: 15px; padding: 32px 16px 16px; }
  .nf-bp-ways__header { gap: 12px; }
  .nf-bp-ways__eyebrow { font-size: 14px; }
  .nf-bp-ways__title { font-size: 28px; line-height: 120%; }
  .nf-bp-ways__br { display: inline; }
  .nf-bp-ways__lead { width: 100%; font-size: 15px; line-height: 130%; letter-spacing: -0.01em; }
  .nf-bp-ways__pills { gap: 10px; }
  .nf-bp-ways__pill { padding: 6px 12px; }
  .nf-bp-ways__pill-label { font-size: 16px; }
}

/* Pills scroll to their section (Danny, 2026-10-20; inert on live). The link covers the whole pill; live has no hover
   state, so only a pointer, a light tint on hover and a keyboard ring are added. */
.nf-bp-ways__pill-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; cursor: pointer; }
.nf-bp-ways__pill { transition: background-color 0.2s ease-out; }
@media (hover: hover) { .nf-bp-ways__pill:hover { background-color: #ebebeb; } }
.nf-bp-ways__pill-link:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* Black section (Danny, 2026-10-26): #000 background, white title and lead, black pills with a thin white outline and white labels.
   The black runs up under the fixed nav (page.css), so the nav's dark glass reads as black, not grey over white. */
.nf-bp-ways { background-color: #000; padding-bottom: 80px; }
@media (min-width: 810px) and (max-width: 1439.98px) { .nf-bp-ways { padding-bottom: 60px; } }
@media (max-width: 809.98px) { .nf-bp-ways { padding-bottom: 32px; } }
.nf-bp-ways__title, .nf-bp-ways__lead { color: #fff; }
.nf-bp-ways__eyebrow { color: #91c851; } /* primary green, like the other eyebrows on dark (Danny, 2026-10-26) */
.nf-bp-ways__pill { background-color: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.nf-bp-ways__pill-label { color: #fff; }
@media (hover: hover) { .nf-bp-ways__pill:hover { background-color: rgba(255, 255, 255, 0.1); } }
.nf-bp-ways__pill-link:focus-visible { outline-color: #fff; }

/* "WAYS TO PAY" on the shared label scale (Danny, 2026-10-26): 18 desktop, 16 tablet, 14 phone, like the other eyebrows
   ("FOR VILLAS & LARGER HOMES", "FOR SMALLER SPACES"); live used 26px */
.nf-bp-ways__eyebrow { font-size: 18px; letter-spacing: 0.02em; }
@media (min-width: 810px) and (max-width: 1439.98px) { .nf-bp-ways__eyebrow { font-size: 16px; } }
@media (max-width: 809.98px) { .nf-bp-ways__eyebrow { font-size: 14px; } }

/* ---------- Design pass (Danny 2026-10-27, not on live): office photo on the right, faded into the black ---------- */
.nf-bp-ways { min-height: 620px; justify-content: center; isolation: isolate; }
.nf-bp-ways > :not(.nf-bp-ways__visual) { z-index: 1; }
.nf-bp-ways__visual { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; z-index: 0; pointer-events: none; }
.nf-bp-ways__visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.nf-bp-ways__visual::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.82) 22%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0.1) 100%),
    linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 30%);
}
.nf-bp-ways__br { display: inline; }            /* two lines, so the title stays on the dark side */
.nf-bp-ways__header, .nf-bp-ways__lead { max-width: 720px; }
.nf-bp-ways__lead { width: 100%; color: rgba(255, 255, 255, 0.78); }
.nf-bp-ways__pill { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background-color: rgba(0, 0, 0, 0.35); }
@media (min-width: 810px) and (max-width: 1439.98px) {
  .nf-bp-ways { min-height: 560px; }
  .nf-bp-ways__visual { width: 70%; }
  .nf-bp-ways__visual::after { background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.9) 32%, rgba(0, 0, 0, 0.35) 75%, rgba(0, 0, 0, 0.15) 100%), linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 30%); }
  .nf-bp-ways__header, .nf-bp-ways__lead { max-width: 560px; }
}
/* phone: the photo sits on top, the text below it on black */
@media (max-width: 809.98px) {
  .nf-bp-ways.nf-bp-ways { min-height: 0; padding-top: calc(72vw - 24px); } /* beats page.css's 115px */
  .nf-bp-ways__visual { bottom: auto; width: 100%; height: 72vw; }
  .nf-bp-ways__visual img { object-position: 70% 50%; }
  .nf-bp-ways__visual::after { background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 55%); }
  .nf-bp-ways__header, .nf-bp-ways__lead { max-width: none; }
}