/* ==========================================================================
   Business pricing, section 2 "Two ways, one system." (nafas.com/business-pricing-plan, Framer node framer-12683yf)
   Breakpoints (this section): desktop >= 1440, tablet 810 to 1439.98, phone <= 809.98.
   Measured on live:
   - title and subtitle fade 0 -> 1 once >= 50% in view (spring 0.6 / bounce 0.1, once); the cards are static.
   - desktop: two static cards side by side (gap 30).
   - tablet and phone: Framer Carousel (gap 40 / 10, padding 10, scroll-snap x mandatory, snap centre, snap stop
     always, no dots, no fade). Arrows 40px rgba(0,0,0,.2): Previous hidden at the start, Next hidden at the end
     (both hidden when the cards fit, e.g. 1366); they fade with the carousel spring (stiffness 500, damping 60),
     scale 0.9 while pressed (0.05s), no hover change. Touch swipes natively; no mouse drag, no tap on the peeking card.
   - phone: the Rent card has its background on the body (#f5f5f5) and a 95px cover image; some feature rows centre
     their icon. Live phone copy reads "wholeterm" (copied).
   Generator: tools/generators/bp-two-ways/gen.py (markup and icons).
   ========================================================================== */

.nf-bp-two-ways {
  --nf-bp-two-ways-regular: "SF Pro Display Regular", sans-serif;
  --nf-bp-two-ways-medium: "SF Pro Display Medium", sans-serif;
  --nf-bp-two-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: 40px 80px;
  overflow: clip;
}

/* ---------- header ---------- */
.nf-bp-two-ways__header {
  position: relative; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  width: 100%; padding: 0;
  overflow: clip;
}
.nf-bp-two-ways__title,
.nf-bp-two-ways__sub {
  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;
}
.nf-bp-two-ways__title {
  font-family: var(--nf-bp-two-ways-medium); font-weight: 500; font-size: 52px; line-height: 110%;
  letter-spacing: normal; color: #000;
}
.nf-bp-two-ways__sub {
  font-family: var(--nf-bp-two-ways-regular); font-weight: 400; font-size: 24px; line-height: 125%;
  letter-spacing: -0.02em; color: #616161;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
}
.nf-bp-two-ways [data-nf-bp-two-ways-fade] { opacity: 0; transition: opacity 0.6s var(--nf-bp-two-ways-spring); }
.nf-bp-two-ways [data-nf-bp-two-ways-fade].is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nf-bp-two-ways [data-nf-bp-two-ways-fade] { opacity: 1; transition: none; }
}

/* ---------- cards row / carousel ---------- */
.nf-bp-two-ways__carousel { position: relative; flex: 0 0 auto; width: 100%; height: auto; }
.nf-bp-two-ways__viewport {
  position: relative; display: flex; width: 100%; height: 100%; padding: 0; overflow: visible;
}
.nf-bp-two-ways__track {
  position: relative; display: flex; flex-direction: row; align-items: flex-start; flex: 1 1 100%; gap: 30px;
  width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; border-radius: 0;
  overflow: clip;
}
.nf-bp-two-ways__slide { position: relative; display: block; flex: 1 0 0px; width: 1px; min-width: 0; }
.nf-bp-two-ways__pad {
  position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: min-content; padding: 0;
  overflow: clip;
}
.nf-bp-two-ways__controls { display: none; }

/* ---------- card ---------- */
.nf-bp-two-ways__card {
  position: relative; flex: 1 0 0px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0;
  width: 1px; height: min-content; padding: 0;
  background-color: #f4f4f4; border-radius: 30px;
  overflow: clip;
}
.nf-bp-two-ways__media {
  position: relative; flex: 0 0 auto;
  /* 48px taller than the 3.1978:1 frame (Danny, 2026-10-28): padding % follows the card width, the image covers it */
  width: 100%; height: 0; padding-top: calc(100% / 3.1978 + 48px); min-height: 0;
  border-top-left-radius: 30px; border-top-right-radius: 30px;
}
.nf-bp-two-ways__frame { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; }
.nf-bp-two-ways__img {
  position: relative;
  display: block; width: 100%; height: 100%;
  border-radius: inherit; object-fit: cover; object-position: 50% 50%;
}
.nf-bp-two-ways__body {
  position: relative; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 20px;
  width: 100%; height: min-content; padding: 31px 38px 40px;
  overflow: clip;
}
.nf-bp-two-ways__head {
  position: relative; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  width: 100%; padding: 0;
  overflow: clip;
}
.nf-bp-two-ways__kicker,
.nf-bp-two-ways__name,
.nf-bp-two-ways__text,
.nf-bp-two-ways__foot-text {
  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-two-ways__kicker {
  font-family: var(--nf-bp-two-ways-medium); font-weight: 500; font-size: 22px; line-height: 115%;
  letter-spacing: 0.02em;
}
.nf-bp-two-ways__name {
  font-family: var(--nf-bp-two-ways-medium); font-weight: 500; font-size: 46px; line-height: 115%;
  letter-spacing: normal;
}
.nf-bp-two-ways__features {
  position: relative; flex: 0 0 auto;
  /* rows 20px apart (Danny, 2026-10-28; was 34px) */
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 20px;
  width: 100%; margin: 0; padding: 0 0 20px; list-style: none;
  overflow: clip;
}
.nf-bp-two-ways__row {
  position: relative; flex: 0 0 auto;
  display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 16px;
  width: 100%; padding: 0;
  overflow: clip;
}
.nf-bp-two-ways__icon { position: relative; flex: 0 0 auto; display: block; width: 24px; height: 24px; }
.nf-bp-two-ways__svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.nf-bp-two-ways__text {
  width: 757px;
  font-family: var(--nf-bp-two-ways-regular); font-weight: 400; font-size: 20px; line-height: 115%;
  letter-spacing: 0.04em;
}
.nf-bp-two-ways__phone { display: none; }
.nf-bp-two-ways__foot {
  position: relative; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 29px;
  width: 100%; padding: 0;
  overflow: clip;
}
.nf-bp-two-ways__sep { position: relative; flex: 0 0 auto; width: 100%; height: 1px; background-color: #000; overflow: clip; }
.nf-bp-two-ways__foot-text {
  width: 797px;
  font-family: var(--nf-bp-two-ways-medium); font-weight: 500; font-size: 22px; line-height: 115%;
  letter-spacing: normal;
}

/* ---------- Tablet and phone (<= 1439.98px): Framer Carousel ---------- */
@media (max-width: 1439.98px) {
  .nf-bp-two-ways__viewport { padding: 10px; overflow: hidden; }
  .nf-bp-two-ways__track {
    align-items: center; gap: 40px;
    overflow: visible; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nf-bp-two-ways__track::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .nf-bp-two-ways__slide { flex: 0 0 auto; width: auto; scroll-snap-align: center; scroll-snap-stop: always; }
  .nf-bp-two-ways__pad { width: min-content; }
  .nf-bp-two-ways__slide--buy .nf-bp-two-ways__pad { padding: 0 0 0 60px; }
  .nf-bp-two-ways__slide--rent .nf-bp-two-ways__pad { padding: 0 60px 0 0; }
  .nf-bp-two-ways__card { flex: 0 0 auto; width: 564px; }

  .nf-bp-two-ways__controls {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    display: flex; flex-direction: row; justify-content: space-between; align-items: center;
    margin: 0; padding: 20px; border: 0; min-width: 0; pointer-events: none;
  }
  /* Arrows fade with the carousel spring (stiffness 500, damping 60, measured 0.75s), press scale 0.9 in 0.05s */
  .nf-bp-two-ways__arrow {
    display: block; width: 40px; height: 40px; margin: 0; padding: 0; border: none; border-radius: 40px;
    background: rgba(0, 0, 0, 0.2); overflow: hidden; cursor: pointer; pointer-events: auto; opacity: 1; transform: none;
    transition: opacity 0.75s linear(0, 0.025 1.3%, 0.081 2.7%, 0.148 4%, 0.253 6%, 0.35 8%, 0.464 10.7%, 0.559 13.3%, 0.655 16.7%, 0.73 20%, 0.799 24%, 0.85 28%, 0.899 33.3%, 0.938 40%, 0.962 46.7%, 0.977 53.3%, 0.988 62.7%, 0.995 73.3%, 0.998 86.7%, 1),
                transform 0.05s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .nf-bp-two-ways__arrow img { display: block; width: 40px; height: 40px; }
  .nf-bp-two-ways__arrow:active { transform: scale(0.9); }
  .nf-bp-two-ways__arrow.is-off { opacity: 0; pointer-events: none; cursor: default; }
  .nf-bp-two-ways__arrow:disabled { color: rgba(16, 16, 16, 0.3); } /* UA colour of a disabled button, as live */
  .nf-bp-two-ways__arrow:focus-visible { outline: 2px solid #000; outline-offset: 2px; } /* keyboard ring (not on live) */
}
@media (max-width: 1439.98px) and (prefers-reduced-motion: reduce) {
  .nf-bp-two-ways__arrow { transition: none; }
}

/* ---------- Tablet (810px to 1439.98px) ---------- */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .nf-bp-two-ways { padding: 40px 0; }
  .nf-bp-two-ways__header { padding: 0 60px; }
  .nf-bp-two-ways__kicker { font-size: 25px; }
  .nf-bp-two-ways__name { font-size: 50px; }
  .nf-bp-two-ways__text { flex: 1 0 0px; width: 1px; font-size: 25px; }
  .nf-bp-two-ways__foot-text { font-size: 30px; }
}

/* ---------- Phone (<= 809.98px) ---------- */
@media (max-width: 809.98px) {
  .nf-bp-two-ways { gap: 20px; padding: 16px 0; }
  .nf-bp-two-ways__header { gap: 10px; padding: 0 16px; }
  .nf-bp-two-ways__title { font-size: 28px; line-height: 120%; }
  .nf-bp-two-ways__sub { font-size: 15px; line-height: 130%; letter-spacing: 0.02em; }

  .nf-bp-two-ways__track { gap: 10px; }
  .nf-bp-two-ways__slide--buy .nf-bp-two-ways__pad { padding: 0 0 0 16px; }
  .nf-bp-two-ways__slide--rent .nf-bp-two-ways__pad { padding: 0 16px 0 0; }
  .nf-bp-two-ways__card { width: 300px; border-radius: 10px; }
  .nf-bp-two-ways__media { border-top-left-radius: 10px; border-top-right-radius: 10px; }
  .nf-bp-two-ways__card--rent { background-color: transparent; }
  .nf-bp-two-ways__card--rent .nf-bp-two-ways__media { height: 95px; padding-top: 0; }
  .nf-bp-two-ways__card--rent .nf-bp-two-ways__img { object-fit: cover; }
  .nf-bp-two-ways__card--rent .nf-bp-two-ways__body { background-color: #f5f5f5; }

  .nf-bp-two-ways__body { gap: 16px; padding: 16px; }
  .nf-bp-two-ways__head { gap: 10px; }
  .nf-bp-two-ways__kicker { font-size: 12px; line-height: 120%; letter-spacing: -0.03em; }
  .nf-bp-two-ways__name { font-size: 22px; }
  .nf-bp-two-ways__features { gap: 12px; padding: 0; }
  .nf-bp-two-ways__row { gap: 8px; }
  .nf-bp-two-ways__row--center { align-items: flex-start; } /* every icon on the first text line, like the other rows (Danny, 2026-10-29) */
  .nf-bp-two-ways__icon { width: 16px; height: 16px; }
  .nf-bp-two-ways__text { flex: 1 0 0px; width: 1px; font-size: 14px; line-height: 125%; letter-spacing: -0.01em; }
  .nf-bp-two-ways__wide { display: none; }
  .nf-bp-two-ways__phone { display: inline; }
  .nf-bp-two-ways__foot { gap: 14px; }
  .nf-bp-two-ways__foot-text { width: 100%; font-size: 12px; }
}

/* Desktop feature lines wrap inside their row (Danny, 2026-10-20): live fixes them at 757px in a 549px row, which cut
   "Add Air Guard, our service plan, for maintenance and filters." off at "...and filte". */
@media (min-width: 1440px) {
  .nf-bp-two-ways__text { flex: 1 0 0px; width: 1px; }
  /* the wrapped line makes the Buy card taller: both cards take the taller height and their footer lines align */
  .nf-bp-two-ways__track { align-items: stretch; }
  .nf-bp-two-ways__slide { display: flex; }
  .nf-bp-two-ways__pad { align-items: stretch; height: auto; }
  .nf-bp-two-ways__card { height: auto; }
  .nf-bp-two-ways__body { flex: 1 0 auto; }
  .nf-bp-two-ways__foot { margin-top: auto; }
}

/* Carousel tap and drag (Danny, 2026-10-20): the peeking card shows a pointer; a mouse drag turns snapping off until release */
@media (max-width: 1439.98px) {
  .nf-bp-two-ways__track { overscroll-behavior-x: contain; }
  .nf-bp-two-ways__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; -webkit-user-select: none; }
  .nf-bp-two-ways__track img { -webkit-user-drag: none; }
}

/* #buy and #rent (the business page's "See how buying / renting works" links, Danny 2026-10-26) land on the card below the fixed nav */
.nf-bp-two-ways__slide { scroll-margin-top: 100px; }

/* Tablet and phone (Danny, 2026-10-28; the 2026-10-26 top-to-bottom stack is gone): the side-scrolling carousel again,
   tablet as on /business (564px cards, arrows), both cards one height with their footer lines level. Both cards look the
   same (live's phone Rent card has a short 95px cover and a transparent frame). */
@media (max-width: 1439.98px) {
  .nf-bp-two-ways__track { align-items: stretch; }
  .nf-bp-two-ways__slide { display: flex; }
  .nf-bp-two-ways__pad { align-items: stretch; height: auto; }
  .nf-bp-two-ways__card { height: auto; }
  .nf-bp-two-ways__body { flex: 1 0 auto; }
  .nf-bp-two-ways__foot { margin-top: auto; }
}
/* Phone (Danny, 2026-10-28): the cards sit side by side again and swipe left and right (Buy first, Rent peeking in),
   the same card as desktop at phone scale; the image is 22px taller than its frame (desktop's +48 scaled). */
@media (max-width: 809.98px) {
  .nf-bp-two-ways__viewport { padding: 0; }
  .nf-bp-two-ways__track {
    flex-direction: row; align-items: stretch; gap: 10px; padding: 0 16px; scroll-padding: 0 16px;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  }
  .nf-bp-two-ways__slide { display: flex; width: 86%; scroll-snap-align: start; }
  .nf-bp-two-ways__slide--buy .nf-bp-two-ways__pad,
  .nf-bp-two-ways__slide--rent .nf-bp-two-ways__pad { width: 100%; padding: 0; }
  .nf-bp-two-ways__card, .nf-bp-two-ways__card--rent { width: 100%; background-color: #f4f4f4; }
  .nf-bp-two-ways__controls { display: none; }
  .nf-bp-two-ways__media, .nf-bp-two-ways__card--rent .nf-bp-two-ways__media { height: 0; padding-top: calc(100% / 3.1978 + 22px); }
  .nf-bp-two-ways__card--rent .nf-bp-two-ways__body { background-color: transparent; }
}