/* ==========================================================================
   Business pricing / FAQ: "Common questions"
   Framer: section FAQ (framer-y7uulu) > title + framer-18cxhtx accordion of eight framer-0ChoX items with 1px black
   dividers (Desktop variant >= 810, Mobile variant on phone). Same component as the business page FAQ
   (pages/business/css/65-faq.css), re-measured here. One DOM; per-breakpoint CSS.
   Breakpoints for this section: desktop >= 1440, tablet 810-1439.98, phone <= 809.98.
   Items toggle independently, the first starts open; height spring driven by js/70-faq.js.
   ========================================================================== */

.nf-bp-faq {
  /* Framer layout spring of the item height (open and close), sampled per frame on live at 1440 and 390:
     ~405ms, ~1.5% overshoot, same at every breakpoint */
  --nf-bp-faq-dur: 405ms;
  --nf-bp-faq-ease: linear(0, 0.094 4.4%, 0.23 8.4%, 0.372 12.6%, 0.593 18.5%, 0.697 22%, 0.794 26.4%, 0.873 30.1%, 0.926 34.1%, 0.967 38.3%, 0.99 42.2%, 1.0056 46.7%, 1.0126 50.6%, 1.0155 54.8%, 1.0139 63.2%, 1.0094 71.4%, 1.0054 79.5%, 1.0029 87.9%, 1);
  /* Framer appear of the title: opacity 0 -> 1, ~430ms, once at 50% visible */
  --nf-bp-faq-fade-dur: 430ms;
  --nf-bp-faq-fade-ease: linear(0, 0.011 2.8%, 0.062 6.7%, 0.134 10.5%, 0.223 14.4%, 0.317 18.4%, 0.405 22.3%, 0.493 26.3%, 0.574 30%, 0.651 34.2%, 0.707 37.9%, 0.762 41.6%, 0.806 45.6%, 0.846 49.5%, 0.879 53.3%, 0.905 57.2%, 0.927 60.9%, 0.945 64.9%, 0.96 69.3%, 0.969 72.6%, 0.978 76.5%, 0.984 80.5%, 0.99 84.4%, 0.993 88.1%, 0.996 92.1%, 0.998 96%, 1);
  position: relative; display: flex; flex-flow: column; justify-content: center; align-items: center; gap: 40px;
  flex: 0 0 auto; width: 100%; height: min-content; padding: 60px 80px; overflow: clip;
  background-color: rgb(255, 255, 255);
}
[data-nf-bp-faq-appear] { opacity: 0; will-change: transform; transition: opacity var(--nf-bp-faq-fade-dur) var(--nf-bp-faq-fade-ease); }
[data-nf-bp-faq-appear].is-in { opacity: 1; }

/* ---------- Desktop (>= 1440) ---------- */
.nf-bp-faq__title-box { position: relative; flex: 0 0 auto; width: 100%; max-width: 100%; height: auto; }
.nf-bp-faq__title {
  font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", sans-serif; font-size: 64px; font-weight: 500;
  line-height: 1.1em; letter-spacing: normal; color: var(--nf-black); text-align: start;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}
.nf-bp-faq__list {
  position: relative; display: flex; flex-flow: column; justify-content: center; align-items: center; gap: 0;
  flex: 0 0 auto; width: 100%; height: min-content; padding: 0; overflow: clip;
}
.nf-bp-faq__line { position: relative; flex: 0 0 auto; width: 100%; height: 1px; overflow: clip; background-color: var(--nf-black); }
.nf-bp-faq__item {
  /* Framer: align-items center; the only child fills the item at rest, so flex-start is identical there and keeps
     the content anchored to the top while the height animates (as on live) */
  position: relative; display: flex; flex-flow: row; justify-content: space-between; align-items: flex-start;
  flex: 0 0 auto; width: 100%; height: min-content; padding: 0; overflow: hidden; cursor: pointer;
}
.nf-bp-faq__inner {
  position: relative; display: flex; flex-flow: column; justify-content: flex-start; align-items: flex-start; gap: 0;
  flex: 1 0 0; width: 1px; height: min-content; padding: 0; overflow: hidden;
}
.nf-bp-faq__q {
  position: relative; display: flex; flex-flow: row; justify-content: flex-start; align-items: center; gap: 24px;
  flex: 0 0 auto; width: 100%; height: min-content; padding: 20px 0; overflow: visible;
  user-select: none; -webkit-user-select: none;
}
.nf-bp-faq__q:focus-visible { outline: 2px solid var(--nf-green); outline-offset: 2px; } /* not on live, added for keyboard users */
.nf-bp-faq__q-box { position: relative; flex: 1 0 0; width: 1px; height: auto; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; }
.nf-bp-faq__q-text {
  font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", sans-serif; font-size: 21px; font-weight: 500;
  line-height: 1.4em; letter-spacing: normal; color: var(--nf-black); text-align: left;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}
.nf-bp-faq__plus { position: relative; z-index: 1; flex: 0 0 auto; width: 16px; height: 16px; overflow: hidden; }
.nf-bp-faq__plus-h, .nf-bp-faq__plus-v { position: absolute; display: block; border-radius: 10px; background-color: var(--nf-black); }
.nf-bp-faq__plus-h { width: 16px; height: 2px; top: calc(50% - 1px); left: calc(50% - 8px); }
.nf-bp-faq__plus-v { width: 2px; height: 16px; top: calc(50% - 8px); left: calc(50% - 1px); }
.nf-bp-faq__item.is-open .nf-bp-faq__plus-v { display: none; } /* live swaps variant: the bar disappears at once, no rotation */
.nf-bp-faq__a {
  position: relative; display: none; flex-flow: column; justify-content: flex-start; align-items: flex-start; gap: 20px;
  flex: 0 0 auto; width: 100%; height: min-content; padding: 0 20px 20px 0; overflow: visible;
}
.nf-bp-faq__item.is-open .nf-bp-faq__a { display: flex; }
.nf-bp-faq__a-box {
  position: relative; flex: 0 0 auto; width: 100%; height: auto; user-select: none; -webkit-user-select: none;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}
.nf-bp-faq__a-text {
  font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", sans-serif; font-size: 20px; font-weight: 400;
  line-height: 1.4em; letter-spacing: normal; color: var(--nf-black); text-align: left;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}

/* ---------- Tablet (810 to 1439.98) ---------- */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .nf-bp-faq { justify-content: flex-start; padding: 60px 40px; overflow: visible; }
  .nf-bp-faq__title { font-size: 36px; }
}

/* ---------- Phone (<= 809.98) ---------- */
@media (max-width: 809.98px) {
  .nf-bp-faq { gap: 20px; padding: 40px 16px; overflow: visible; }
  .nf-bp-faq__title { font-size: 26px; }
  .nf-bp-faq__q-text { font-size: 17px; line-height: 1.4em; letter-spacing: 0.04em; }
  /* live's Mobile "Open" variant tightens the question to 1.25em; kept at 1.4em so it does not jump when opened (Danny, 2026-10-20) */
  .nf-bp-faq__plus { width: 12px; height: 12px; aspect-ratio: 1 / 1; }
  .nf-bp-faq__a { padding: 0 0 20px 0; }
  .nf-bp-faq__a-text { font-size: 16px; line-height: 1.4em; letter-spacing: 0.04em; }
}

@media (prefers-reduced-motion: reduce) { [data-nf-bp-faq-appear] { transition: none; } }

/* Lighter, like the business FAQ and the sections around it (Danny, 2026-10-26): title 52px Regular (tablet 42, phone 26),
   questions styled as the residential FAQ (below). */
.nf-bp-faq__title { font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", sans-serif; font-weight: 400; font-size: 52px; line-height: 1.1em; }
@media (min-width: 810px) and (max-width: 1439.98px) { .nf-bp-faq__title { font-size: 42px; } }
@media (max-width: 809.98px) { .nf-bp-faq__title { font-size: 26px; } }

/* Questions exactly as the residential FAQ (Danny, 2026-10-27): SF Pro Display Medium 24px / 30px on desktop and tablet,
   17px / 1.4em with 0.04em tracking on phone. */
.nf-bp-faq__q-text { font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", sans-serif; font-weight: 500; font-size: 24px; line-height: 30px; letter-spacing: normal; }
@media (max-width: 809.98px) { .nf-bp-faq__q-text { font-size: 17px; line-height: 1.4em; letter-spacing: 0.04em; } }