/* ==========================================================================
   Home page ("practice ledger" design). Everything is scoped to .lp-home / .nb
   so this file is safe to load on every route.
   ========================================================================== */

.lp-home {
  --nb-paper: #f4f0e8;
  --nb-paper-2: #ebe5d8;
  --nb-card: #fffdf9;
  --nb-ink: #141a17;
  --nb-ink-2: #3a4540;
  --nb-muted: #6a746f;
  --nb-line: rgba(20, 26, 23, 0.11);
  --nb-line-2: rgba(20, 26, 23, 0.2);
  --nb-green: #1f5c47;
  --nb-green-2: #2e8a67;
  --nb-sage: #d6e5d9;
  --nb-sage-2: #bcd4c4;
  --nb-mark: #f1df67;
  --nb-on-dark: #f4f0e8;
  --nb-on-dark-2: rgba(244, 240, 232, 0.7);
  --nb-on-dark-3: rgba(244, 240, 232, 0.5);
  --nb-line-dark: rgba(244, 240, 232, 0.13);
  --nb-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --nb-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --nb-radius: 28px;
  --nb-sec-y: clamp(4.5rem, 2.75rem + 6vw, 8.5rem);
  --nb-gutter: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
}

body.lp-home {
  background-color: var(--nb-paper);
  background-image: none;
}

.lp-home .lp-main-shell {
  background-color: var(--nb-paper);
  background-image: none;
  overflow: hidden;
  overflow: clip;
}

/* The nav floats over light and dark bands here, so give the pill more body. */
.lp-home .lp-nav-pill {
  background: rgba(250, 248, 243, 0.86);
  border-color: rgba(20, 26, 23, 0.08);
  box-shadow: 0 10px 30px -18px rgba(20, 26, 23, 0.35);
}

.nb {
  color: var(--nb-ink);
  font-family: var(--nb-sans);
}

.nb *,
.nb *::before,
.nb *::after {
  box-sizing: border-box;
}

.nb-wrap {
  width: 100%;
  max-width: calc(80rem + 2 * var(--nb-gutter));
  margin-inline: auto;
  padding-inline: var(--nb-gutter);
}

.nb-sec {
  position: relative;
}

.nb-pad {
  padding-block: var(--nb-sec-y);
}

.nb-pad--tight {
  padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) calc(var(--nb-sec-y) * 0.5);
}

.nb-pad--flush-top {
  padding-top: 0;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.nb .nb-h1,
.nb .nb-h2 {
  font-family: var(--nb-serif);
  font-weight: 300;
  color: inherit;
  text-wrap: balance;
}

.nb .nb-h1 {
  margin-top: 1rem;
  font-size: clamp(2.875rem, 1rem + 4.6vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.nb .nb-h2 {
  font-size: clamp(2.25rem, 1.35rem + 2.7vw, 4.125rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
}

.nb .nb-h2--md {
  font-size: clamp(2rem, 1.35rem + 1.8vw, 3.25rem);
}

.nb .nb-h2--sm {
  font-size: clamp(1.875rem, 1.4rem + 1.2vw, 2.75rem);
}

.lp-home .nb .nb-lead {
  margin-top: 1.25rem;
  max-width: 38rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--nb-ink-2);
  text-wrap: pretty;
}

.lp-home .nb .nb-body {
  margin-top: 1rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--nb-ink-2);
  text-wrap: pretty;
}

.nb-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
  font-family: var(--nb-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-green);
}

.nb-eyebrow-num {
  opacity: 0.55;
  letter-spacing: 0.04em;
}

.nb-head {
  max-width: 46rem;
}

.nb-head--wide {
  max-width: 62rem;
}

.nb-head--row {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}

.nb-head--row > div {
  max-width: 46rem;
}

/* Highlighter swash behind the italic keyword in a heading. */
.nb-mark {
  font-style: italic;
  padding-inline: 0.06em;
  margin-inline: -0.03em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4 12 C 50 7, 130 10, 196 6 C 199 15, 198 27, 195 34 C 128 37, 62 32, 5 36 C 2 28, 1 19, 4 12 Z' fill='%23F1DF67'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 86%;
  background-size: 0% 52%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 1.1s var(--nb-ease) 0.35s;
}

.reveal.active .nb-mark {
  background-size: 100% 52%;
}

.nb-hero .nb-mark {
  animation: nb-mark-in 1.1s var(--nb-ease) 0.7s both;
}

@keyframes nb-mark-in {
  from { background-size: 0% 52%; }
  to { background-size: 100% 52%; }
}

.nb-band--ink .nb-mark,
.nb-band--green .nb-mark {
  background: none;
  color: var(--nb-mark);
}

.nb-br-lg,
.nb-br-sm {
  display: none;
}

@media (min-width: 900px) {
  .nb-br-lg {
    display: inline;
  }
}

.nb-underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.nb-btn {
  display: inline-flex;
  align-items: center;
  gap: 1.15rem;
  min-height: 4rem;
  padding: 0.4rem 0.45rem 0.4rem 1.85rem;
  border-radius: 999px;
  background: var(--nb-ink);
  color: var(--nb-on-dark);
  font-family: var(--nb-sans);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 14px 30px -14px rgba(20, 26, 23, 0.55);
  transition: background-color 0.25s ease, transform 0.25s var(--nb-ease), box-shadow 0.25s ease;
}

.nb-btn:visited,
.nb-btn:active {
  color: var(--nb-on-dark);
}

.nb-btn:hover {
  background: var(--nb-green);
  transform: translateY(-1px);
}

.nb-btn-arrow {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: var(--nb-mark);
  color: var(--nb-ink);
  transition: transform 0.3s var(--nb-ease);
}

.nb-btn-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

.nb-btn:hover .nb-btn-arrow {
  transform: translateX(3px);
}

.nb-btn--light {
  background: var(--nb-on-dark);
  color: var(--nb-ink);
  box-shadow: none;
}

.nb-btn--light:visited,
.nb-btn--light:active {
  color: var(--nb-ink);
}

.nb-btn--light:hover {
  background: #fff;
}

.nb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--nb-ink);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
}

.nb-link:visited,
.nb-link:active {
  color: var(--nb-ink);
}

.nb-link-text {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--nb-line-2), var(--nb-line-2));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 0% 1px, 100% 1px;
  padding-bottom: 2px;
  transition: background-size 0.35s var(--nb-ease);
}

.nb-link:hover .nb-link-text {
  background-size: 100% 1px, 100% 1px;
}

.nb-link-arrow {
  flex: none;
  display: inline-flex;
  transition: transform 0.3s var(--nb-ease);
}

.nb-link-arrow svg {
  width: 1.2rem;
  height: 1.2rem;
}

.nb-link:hover .nb-link-arrow {
  transform: translateX(3px);
}

.nb-link:hover .nb-link-arrow--down {
  transform: translateY(3px);
}

.nb-link--light,
.nb-link--light:visited,
.nb-link--light:active {
  color: var(--nb-on-dark);
}

.nb-link--light .nb-link-text {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--nb-line-dark), var(--nb-line-dark));
}

.nb-link--light:hover .nb-link-arrow {
  color: var(--nb-mark);
}

.nb-inline-link {
  color: var(--nb-ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--nb-line-2);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

.nb-inline-link:hover {
  text-decoration-color: currentColor;
}

.nb a:focus-visible,
.nb button:focus-visible,
.nb summary:focus-visible,
.nb [role="tabpanel"]:focus-visible {
  outline: 2px solid var(--nb-green-2);
  outline-offset: 3px;
}

.nb-sec-foot {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.nb-sec-foot--end {
  justify-content: flex-end;
}

.nb-footnote {
  max-width: 42rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--nb-muted);
}

/* Reveal: calmer than the global spring */
.nb .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--nb-ease), transform 0.9s var(--nb-ease);
}

.nb .reveal.active {
  opacity: 1;
  transform: none;
}

.nb .nb-d1 { transition-delay: 0.08s; }
.nb .nb-d2 { transition-delay: 0.16s; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.nb-hero {
  position: relative;
  padding-top: 0.35rem;
}

.nb-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 2vw, 2rem);
  align-items: center;
}

.nb-hero-copy {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(0.5rem, 0.25rem + 1vw, 1.25rem);
  animation: nb-rise 0.9s var(--nb-ease) both;
}

.nb-hero .nb-h1 {
  max-width: calc(100% - 1.5rem);
}

@keyframes nb-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.nb-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.3125rem 0.875rem 0.3125rem 0.3125rem;
  border: 1px solid var(--nb-line);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.7);
  font-family: var(--nb-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nb-ink-2);
}

.nb-pill-copy--short {
  display: none;
}

.nb-pill-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--nb-ink);
  box-shadow: inset 0 0 0 1px rgba(241, 223, 103, 0.18);
}

.nb-pill-mark svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.nb-pill-orbit {
  fill: none;
  stroke: var(--nb-line-dark);
  stroke-width: 1;
  stroke-dasharray: 1.5 2.4;
}

.nb-pill-spark {
  fill: var(--nb-mark);
  transform-origin: 12px 12px;
  animation: nb-spark 3.2s var(--nb-ease) infinite;
}

.nb-pill-sat {
  fill: var(--nb-sage);
  transform-origin: 12px 12px;
  animation: nb-orbit 6s linear infinite;
}

@keyframes nb-spark {
  0%, 100% { transform: scale(0.82) rotate(0deg); opacity: 0.85; }
  45% { transform: scale(1.08) rotate(45deg); opacity: 1; }
}

@keyframes nb-orbit {
  to { transform: rotate(360deg); }
}

.lp-home .nb .nb-hero-lead {
  margin-top: 1.35rem;
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.65;
  color: var(--nb-ink-2);
  text-wrap: pretty;
}

.nb-hero-actions {
  margin-top: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

.nb-hero-proof {
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--nb-line);
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 33rem;
}

.nb-avatars {
  display: flex;
  flex: none;
}

.nb-avatar {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--nb-paper);
  background: #e6ede6;
}

.nb-avatar + .nb-avatar {
  margin-left: -0.75rem;
}

.nb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  transform: scale(1.6);
  transform-origin: center 20%;
}

.nb-hero-proof-text,
.nb-hero-proof-text:visited {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--nb-ink-2);
  text-decoration: none;
}

.nb-hero-proof-text:hover {
  color: var(--nb-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The scroll link sits under the proof on small screens. On wide screens it
   returns to the same row as the booking button. */
@media (min-width: 900px) {
  .nb-hero-copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.75rem;
    align-items: center;
    justify-items: start;
  }

  .nb-h1,
  .nb-hero-lead,
  .nb-hero-proof {
    justify-self: stretch;
  }

  .nb-pill { grid-area: 1 / 1 / 2 / -1; }
  .nb-h1 { grid-area: 2 / 1 / 3 / -1; }
  .nb-hero-lead {
    grid-area: 3 / 1 / 4 / -1;
    margin-bottom: 1.65rem;
  }
  .nb-hero-lead-rest {
    display: block;
    margin-top: 0.45rem;
  }
  .nb-hero-actions {
    grid-area: 4 / 1 / 5 / 2;
    margin-top: 0;
  }
  .nb-hero-next { grid-area: 4 / 2 / 5 / 3; }
  .nb-hero-proof { grid-area: 5 / 1 / 6 / -1; }
}

.nb-hero-visual {
  position: relative;
  justify-self: end;
  width: min(44vw, 30rem);
  aspect-ratio: 626 / 511;
  animation: nb-rise 1s var(--nb-ease) 0.15s both;
}

.nb-arch {
  position: absolute;
  inset: 4% 0 0 2%;
  border-radius: 50%;
  background:
    radial-gradient(70% 70% at 50% 55%, rgba(31, 92, 71, 0.16), transparent 72%),
    linear-gradient(180deg, #dbe8dd 0%, #c3d8c9 100%);
  overflow: hidden;
}

.nb-arch::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(circle at 50% 55%, transparent 0 28px, rgba(31, 92, 71, 0.09) 28px 29px);
}

/* The disc stays parked. Only the figure moves, along the diagonal he is
   already flying, so the loop reads as a glide. */
.nb-hero-flight {
  position: absolute;
  inset: 0;
  transform-origin: 62% 46%;
  animation: nb-glide 9s cubic-bezier(0.45, 0.02, 0.55, 0.98) infinite alternate;
}

@keyframes nb-glide {
  from { translate: 6px -8px; rotate: -1.2deg; }
  to { translate: 18px 10px; rotate: 1.3deg; }
}

.nb-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(20, 26, 23, 0.12));
}

/* --------------------------------------------------------------------------
   Practice vitals
   -------------------------------------------------------------------------- */

.nb-vitals {
  position: relative;
  background: var(--nb-ink);
  color: var(--nb-on-dark);
  overflow: hidden;
}

/* Fixed-height strip: with "slice" the trace keeps its scale at any band height. */
.nb-ecg {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 80px;
  transform: translateY(-50%);
  pointer-events: none;
}

.nb-ecg path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nb-ecg-base {
  stroke: rgba(244, 240, 232, 0.07);
  stroke-width: 1.5;
}

.nb-ecg-pulse {
  stroke: var(--nb-mark);
  stroke-width: 2;
  stroke-dasharray: 9 91;
  stroke-dashoffset: 100;
  opacity: 0.5;
  animation: nb-ecg 7s linear infinite;
}

@keyframes nb-ecg {
  to { stroke-dashoffset: 0; }
}

.nb-vitals-inner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
}

.nb-vitals-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 2rem 2.5rem 2rem 0;
  font-family: var(--nb-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-on-dark-3);
  white-space: nowrap;
}

.nb-vitals-blip {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--nb-mark);
  animation: nb-blip 1.4s ease-in-out infinite;
}

@keyframes nb-blip {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(241, 223, 103, 0.5); }
  50% { opacity: 0.55; box-shadow: 0 0 0 6px rgba(241, 223, 103, 0); }
}

.nb-vitals-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.nb-vital {
  padding: 2.25rem 1.5rem 2.25rem 1.75rem;
  border-left: 1px solid var(--nb-line-dark);
}

.nb-vital-n {
  font-family: var(--nb-serif);
  font-size: clamp(2.5rem, 1.6rem + 1.9vw, 3.625rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--nb-on-dark);
}

.nb-vital-l {
  margin-top: 0.75rem;
  max-width: 14rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--nb-on-dark-2);
}

/* --------------------------------------------------------------------------
   Providers
   -------------------------------------------------------------------------- */

/* Same order as the live site. Every card matches: portrait, practice, quote, name. */
.nb-trusted {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.nb-tcard {
  border: 1px solid var(--nb-line);
  border-radius: 24px;
  background: var(--nb-card);
  transition: transform 0.35s var(--nb-ease), box-shadow 0.35s ease;
}

.nb-tcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 40px -28px rgba(20, 26, 23, 0.4);
}

.nb-tcard figure {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  padding: 0.75rem 0.75rem 1.5rem;
}

.nb-tcard-photo {
  aspect-ratio: 5 / 4;
  margin-bottom: 1.25rem;
  border-radius: 18px;
  overflow: hidden;
  background: #e6ede6;
}

.nb-tcard-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
}

/* Studio portraits are shot on white; multiply lets the frame tint show through. */
.nb-tcard-photo img.is-studio {
  mix-blend-mode: multiply;
}

.nb-tcard-practice {
  padding-inline: 0.75rem;
  font-family: var(--nb-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nb-green);
}

.nb-tcard-quote {
  align-self: start;
  margin: 0.75rem 0 1.25rem;
  padding-inline: 0.75rem;
}

.nb-tcard-quote p {
  min-height: 3.6em;
  font-family: var(--nb-serif);
  font-size: clamp(1.375rem, 1.1rem + 0.6vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--nb-ink);
  text-wrap: pretty;
}

.nb-tcard-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-inline: 0.75rem;
}

.nb-tcard-name {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--nb-ink);
}

.nb-tcard-meta {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--nb-muted);
}

.nb img.nb-photo-je-ko {
  object-position: center 18%;
  transform: scale(1.6);
  transform-origin: center 20%;
}

/* --------------------------------------------------------------------------
   01 Savings calculator
   -------------------------------------------------------------------------- */

.nb-calc {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 1.5rem;
  align-items: start;
}

.nb-calc-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-radius);
  background: var(--nb-card);
}

.nb-field-label {
  display: block;
  font-family: var(--nb-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nb-muted);
}

.nb-field-row {
  margin-top: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.nb-field-val {
  font-family: var(--nb-serif);
  font-size: clamp(1.875rem, 1.5rem + 1vw, 2.375rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.nb-field-hint {
  font-size: 0.875rem;
  color: var(--nb-muted);
}

.nb-field-note {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--nb-muted);
}

.nb-money {
  margin-top: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 3.75rem;
  padding: 0 1.25rem;
  border: 1px solid var(--nb-line-2);
  border-radius: 16px;
  background: var(--nb-paper);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.nb-money:focus-within {
  border-color: var(--nb-green);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(31, 92, 71, 0.12);
}

.nb-money > span {
  font-family: var(--nb-serif);
  font-size: 1.5rem;
  color: var(--nb-muted);
}

.nb .nb-money input {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--nb-serif);
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  color: var(--nb-ink);
  font-variant-numeric: tabular-nums;
}

.nb .nb-money .nb-money-suffix {
  font-family: var(--nb-sans);
  font-size: 1rem;
}

.nb .nb-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 1.75rem;
  margin-top: 1rem;
  background: transparent;
  cursor: pointer;
  --range-fill: 50%;
}

.nb .nb-range:focus {
  outline: none;
}

.nb .nb-range:focus-visible {
  outline: 2px solid var(--nb-green-2);
  outline-offset: 4px;
  border-radius: 999px;
}

.nb-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--nb-ink) 0 var(--range-fill), rgba(20, 26, 23, 0.12) var(--range-fill) 100%);
}

.nb-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.625rem;
  height: 1.625rem;
  margin-top: -10px;
  border: 2px solid var(--nb-ink);
  border-radius: 50%;
  background: var(--nb-mark);
  box-shadow: 0 4px 10px -2px rgba(20, 26, 23, 0.3);
  transition: transform 0.15s ease;
}

.nb-range:active::-webkit-slider-thumb {
  transform: scale(1.12);
}

.nb-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(20, 26, 23, 0.12);
}

.nb-range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--nb-ink);
}

.nb-range::-moz-range-thumb {
  width: 1.375rem;
  height: 1.375rem;
  border: 2px solid var(--nb-ink);
  border-radius: 50%;
  background: var(--nb-mark);
}

.nb-range-ends {
  margin-top: 0.375rem;
  display: flex;
  justify-content: space-between;
  font-family: var(--nb-sans);
  font-size: 0.75rem;
  color: var(--nb-muted);
}

/* Receipt: zig-zag bottom edge, drop-shadow on the wrapper so it follows the mask. */
.nb-receipt-wrap {
  position: sticky;
  top: 7rem;
  filter: drop-shadow(0 28px 34px rgba(20, 26, 23, 0.14)) drop-shadow(0 1px 1px rgba(20, 26, 23, 0.1));
}

.nb-receipt {
  --zz: 12px;
  padding: 1.75rem clamp(1.5rem, 1rem + 1.5vw, 2.25rem) calc(2rem + var(--zz));
  border-radius: var(--nb-radius) var(--nb-radius) 0 0;
  background: var(--nb-card);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--zz)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--zz)) var(--zz) repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--zz)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--zz)) var(--zz) repeat-x;
}

.nb-receipt-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 1.5px dashed var(--nb-line-2);
  font-family: var(--nb-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-muted);
}

.nb-receipt-line {
  padding: 1.375rem 0;
  border-bottom: 1.5px dashed var(--nb-line-2);
}

.nb-receipt-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.nb-receipt-lab {
  display: block;
  font-family: var(--nb-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nb-ink-2);
}

.nb-receipt-val {
  font-family: var(--nb-sans);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.nb-receipt-sub {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--nb-muted);
}

.nb-receipt-total {
  margin-top: 1.5rem;
  padding: 1.5rem 1.5rem 1.375rem;
  border-radius: 20px;
  background: var(--nb-ink);
  color: var(--nb-on-dark);
}

.nb-receipt-total .nb-receipt-lab {
  color: var(--nb-mark);
}

.nb-receipt-big {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--nb-serif);
  font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.nb-receipt-total .nb-receipt-sub {
  color: var(--nb-on-dark-2);
}

/* --------------------------------------------------------------------------
   02 Comparison table
   -------------------------------------------------------------------------- */

.nb-table-card {
  margin-top: 3.5rem;
  padding: 0.5rem clamp(0.75rem, 0.25rem + 1.5vw, 1.75rem) 1.5rem;
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-radius);
  background: var(--nb-card);
}

.nb-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.nb-table th,
.nb-table td {
  padding: 0.875rem 0.75rem;
  border-bottom: 1px solid var(--nb-line);
  text-align: center;
  vertical-align: middle;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.nb-table thead th {
  padding-top: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--nb-line-2);
  font-family: var(--nb-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nb-muted);
  vertical-align: bottom;
}

.nb-table thead th:first-child {
  width: 46%;
  text-align: left;
  padding-left: 0;
}

.nb-table tbody th[scope="row"] {
  padding-left: 0;
  text-align: left;
  font-weight: 400;
  color: var(--nb-ink);
}

.nb-table .is-us {
  background: rgba(214, 229, 217, 0.55);
  border-bottom-color: rgba(31, 92, 71, 0.12);
}

.nb-table thead .is-us {
  border-radius: 18px 18px 0 0;
  border-bottom-color: transparent;
  background: var(--nb-ink);
  color: var(--nb-on-dark);
  font-size: 0.75rem;
}

.nb-table tbody tr:last-child th,
.nb-table tbody tr:last-child td {
  border-bottom: 0;
}

.nb-table tbody tr:last-child .is-us {
  border-radius: 0 0 18px 18px;
}

.nb-table-group th {
  padding: 2rem 0 0.625rem;
  border-bottom: 1px solid var(--nb-line-2);
  text-align: left;
  font-family: var(--nb-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-green);
}

.nb-table tbody tr:first-child th {
  padding-top: 1.25rem;
}

.nb-yes {
  display: inline-grid;
  place-items: center;
  color: var(--nb-green-2);
}

.nb-yes svg {
  width: 1.375rem;
  height: 1.375rem;
}

.nb-yes circle {
  fill: currentColor;
}

.nb-yes path {
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.is-us .nb-yes {
  color: var(--nb-green);
}

.nb-no {
  font-size: 1.125rem;
  color: rgba(20, 26, 23, 0.25);
}

.nb-part {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: rgba(20, 26, 23, 0.06);
  font-family: var(--nb-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--nb-ink-2);
}

/* Section labels sit on the row boundary so they don't open a blank slot in the
   NoBackOffice column. The checks stay evenly spaced; the label and rule mark the break. */
@media (min-width: 720px) {
  .nb-table tbody th,
  .nb-table tbody td {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }

  .nb-table tbody td.is-us {
    border-bottom-color: transparent;
  }

  .nb-table tbody tr:has(+ .nb-table-group) > th,
  .nb-table tbody tr:has(+ .nb-table-group) > td:not(.is-us) {
    border-bottom-color: transparent;
  }

  .nb-table tbody tr.nb-table-group th,
  .nb-table tbody tr.nb-table-group td {
    height: 0;
    padding: 0;
    border: 0;
    font-size: 0;
    line-height: 0;
  }

  .nb-table tbody tr.nb-table-group th {
    position: relative;
  }

  .nb-table tbody tr.nb-table-group:not(:first-child) th::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    border-top: 1px solid rgba(31, 92, 71, 0.45);
  }

  .nb-table tbody tr.nb-table-group th span {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    transform: translateY(-50%);
    padding-right: 0.75rem;
    background: var(--nb-card);
    font-family: var(--nb-sans);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--nb-green);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   Bands
   -------------------------------------------------------------------------- */

.nb-band {
  position: relative;
}

.nb-band--ink {
  background: var(--nb-ink);
  color: var(--nb-on-dark);
}

.nb-band--green {
  background: var(--nb-green);
  color: var(--nb-on-dark);
}

.nb-band--paper2 {
  background: var(--nb-paper-2);
}

.nb-band--ink .nb-eyebrow,
.nb-band--green .nb-eyebrow {
  color: var(--nb-mark);
}

.lp-home .nb .nb-band--ink .nb-lead,
.lp-home .nb .nb-band--green .nb-lead {
  color: var(--nb-on-dark-2);
}

/* --------------------------------------------------------------------------
   03 Results
   -------------------------------------------------------------------------- */

.nb-ba {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.nb-ba-col {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  border-radius: var(--nb-radius);
}

.nb-ba-col--before {
  border: 1px solid var(--nb-line-dark);
  background: rgba(244, 240, 232, 0.03);
}

.nb-ba-col--after {
  background: var(--nb-paper);
  color: var(--nb-ink);
}

.nb .nb-ba-title {
  margin-bottom: 0.75rem;
  font-family: var(--nb-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e9a088;
}

.nb .nb-ba-col--after .nb-ba-title {
  color: var(--nb-green);
}

.nb-ba-col li {
  display: flex;
  gap: 0.875rem;
  padding: 1rem 0;
  border-top: 1px solid var(--nb-line-dark);
  font-size: 1.0625rem;
  line-height: 1.45;
}

.nb-ba-col--before li {
  color: var(--nb-on-dark-2);
}

.nb-ba-col--after li {
  border-top-color: var(--nb-line);
}

.nb-ba-col li::before {
  content: "";
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.75rem;
}

.nb-ba-col--before li::before {
  background-color: rgba(233, 160, 136, 0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9a088' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

.nb-ba-col--after li::before {
  background-color: var(--nb-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.nb-quote {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: start;
  max-width: 64rem;
}

.nb-quote-photo {
  width: clamp(5rem, 4rem + 3vw, 7.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--nb-sage);
  box-shadow: 0 0 0 6px rgba(244, 240, 232, 0.06);
}

.nb-quote-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.nb-quote blockquote p {
  position: relative;
  font-family: var(--nb-serif);
  font-size: clamp(1.625rem, 1.15rem + 1.6vw, 2.625rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--nb-on-dark);
  text-wrap: pretty;
}

.nb-quote figcaption {
  margin-top: 1.25rem;
  margin-bottom: 1.75rem;
  font-family: var(--nb-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nb-on-dark-3);
}

.nb-growth {
  margin-top: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-top: 1px solid var(--nb-line-dark);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
}

.nb-growth-text {
  margin-bottom: 1.75rem;
  font-family: var(--nb-serif);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--nb-on-dark);
  text-wrap: balance;
}

.nb-growth-graph {
  position: relative;
  height: clamp(11rem, 8rem + 8vw, 16rem);
}

.nb-growth-graph svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.nb-growth-grid line {
  stroke: var(--nb-line-dark);
  stroke-width: 1;
  stroke-dasharray: 4 6;
  vector-effect: non-scaling-stroke;
}

.nb-growth-line {
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.2s var(--nb-ease) 0.2s;
}

.nb-growth-area {
  opacity: 0;
  transition: opacity 1.2s ease 1.2s;
}

.nb-growth-dot {
  position: absolute;
  right: -6px;
  top: calc(30 / 260 * 100% - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--nb-mark);
  box-shadow: 0 0 0 6px rgba(241, 223, 103, 0.18);
  opacity: 0;
  transition: opacity 0.4s ease 2.2s;
}

.nb-growth.active .nb-growth-line {
  stroke-dashoffset: 0;
}

.nb-growth.active .nb-growth-area,
.nb-growth.active .nb-growth-dot {
  opacity: 1;
}

.nb-growth.active .nb-growth-dot {
  animation: nb-blip 1.8s ease-in-out 2.6s infinite;
}

/* --------------------------------------------------------------------------
   04 Platform
   -------------------------------------------------------------------------- */

.nb-services-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.lp-home .nb .nb-services-copy .nb-body:first-child {
  margin-top: 0;
}

.nb-included {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 2rem;
}

.nb-included li {
  padding-top: 1.125rem;
  border-top: 2px solid var(--nb-ink);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--nb-ink-2);
}

.nb-explorer {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--nb-line);
  border-radius: 32px;
  background: var(--nb-paper-2);
}

.nb-tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.75rem 0.5rem;
}

.nb .nb-tab {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  min-height: 2.875rem;
  padding: 0.625rem 0.875rem;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--nb-ink-2);
  font-family: var(--nb-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nb-tab-num {
  flex: none;
  width: 1.5rem;
  font-family: var(--nb-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--nb-muted);
  transition: color 0.2s ease;
}

.nb .nb-tab:hover {
  background: rgba(255, 253, 249, 0.65);
  color: var(--nb-ink);
}

.nb .nb-tab[aria-selected="true"] {
  background: var(--nb-ink);
  color: var(--nb-on-dark);
}

.nb .nb-tab[aria-selected="true"] .nb-tab-num {
  color: var(--nb-mark);
}

.nb-panels {
  min-width: 0;
}

.nb-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: clamp(1.75rem, 1rem + 2.5vw, 3.25rem);
  border: 1px solid var(--nb-line);
  border-radius: 26px;
  background: var(--nb-card);
  overflow: hidden;
  animation: nb-panel-in 0.45s var(--nb-ease);
}

.nb-panel[hidden] {
  display: none;
}

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

.nb-panel-num {
  font-family: var(--nb-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--nb-muted);
}

.nb-panel-num::after {
  content: " / 12";
  opacity: 0.6;
}

.nb .nb-panel-title {
  margin-top: 1.25rem;
  font-family: var(--nb-serif);
  font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.nb-panel-desc {
  margin-top: 1rem;
  margin-bottom: 2rem;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--nb-ink-2);
}

.nb-panel:has(.nb-panel-stage) .nb-panel-desc,
.nb-panel:has(.nb-panel-stages) .nb-panel-desc {
  margin-bottom: 1.25rem;
}

.nb-panel:has(.nb-panel-stage) .nb-panel-points,
.nb-panel:has(.nb-panel-stages) .nb-panel-points {
  margin-top: 1.5rem;
}

@media (min-width: 900px) {
  .nb-tabs {
    align-self: start;
    position: sticky;
    top: 7rem;
  }
}

.nb-panel-points {
  align-self: stretch;
  margin-top: 2.5rem;
  padding-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
  border-top: 1px solid var(--nb-line);
}

.nb-panel-points li {
  display: flex;
  gap: 0.75rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--nb-line);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.nb-panel-points li::before {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 1.5px;
  margin-top: 0.7em;
  background: var(--nb-green-2);
}

.nb-day {
  margin-top: 1rem;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border: 1px solid var(--nb-line);
  border-radius: 28px;
  background: var(--nb-card);
}

.nb-day-title {
  margin: 0;
  font-family: var(--nb-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-muted);
}

.nb-day-chart {
  display: grid;
  grid-template-columns: 11.25rem minmax(0, 2.2fr) auto minmax(0, 0.62fr);
  gap: 0.5rem 0.4rem;
  align-items: stretch;
  margin-top: 1.35rem;
}

.nb-day-label {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--nb-ink-2);
}

.nb-day-seg {
  display: flex;
  align-items: center;
  min-height: 2.375rem;
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nb-day-seg--patients {
  background: var(--nb-ink);
  color: var(--nb-paper);
}

.nb-day-seg--admin {
  grid-column: 3 / span 2;
  background: #e4ddd0;
  color: var(--nb-ink-2);
}

.nb-day-seg--min {
  background: #e4ddd0;
  color: var(--nb-ink);
}

.nb-day-seg--yours {
  border: 1px solid var(--nb-line-2);
  color: var(--nb-muted);
}

.nb-day-moments {
  margin: 1.35rem 0 0;
  padding: 1.2rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  list-style: none;
  border-top: 1px solid var(--nb-line);
}

.nb-day-moments li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.nb-day-moments time {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--nb-muted);
}

.nb-day-moments strong {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.nb-day-moments span {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--nb-muted);
}

/* --------------------------------------------------------------------------
   05 Support
   -------------------------------------------------------------------------- */

.nb-support {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.nb-support .nb-link {
  margin-top: 2rem;
}

.nb-band--green .nb-h2 {
  color: var(--nb-on-dark);
}

.nb-phone {
  justify-self: center;
  width: min(100%, 22rem);
  padding: 0.625rem;
  border-radius: 3rem;
  background: #0f1512;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 50px 80px -40px rgba(0, 0, 0, 0.6);
}

.nb-phone-screen {
  border-radius: 2.5rem;
  background: #fff;
  overflow: hidden;
  color: #111;
}

.nb-phone-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 1.5rem 1rem 0.875rem;
  border-bottom: 1px solid #ececec;
  background: #f7f7f7;
}

.nb-phone-avatar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #111;
  overflow: hidden;
}

.nb-phone-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nb-phone-name {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333;
}

.nb-thread {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-height: 27rem;
  padding: 1rem 0.875rem 1.5rem;
}

.nb-bubble {
  max-width: 80%;
  padding: 0.5rem 0.8125rem;
  border-radius: 1.125rem;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', var(--nb-sans);
  font-size: 0.875rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px) scale(0.97);
}

.nb-bubble[data-side="provider"] {
  align-self: flex-end;
  border-bottom-right-radius: 0.375rem;
  background: #0a84ff;
  color: #fff;
  transform-origin: right bottom;
}

.nb-bubble[data-side="support"] {
  align-self: flex-start;
  border-bottom-left-radius: 0.375rem;
  background: #e9e9eb;
  color: #111;
  transform-origin: left bottom;
}

.nb-phone.active .nb-bubble {
  animation: nb-bubble-in 0.45s var(--nb-ease) forwards;
  animation-delay: calc(var(--i) * 380ms + 250ms);
}

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

/* --------------------------------------------------------------------------
   06/07 Insurance + security
   -------------------------------------------------------------------------- */

.nb-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 2rem clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.nb-row-anchor + .nb-row-anchor .nb-row {
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  padding-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  border-top: 1px solid var(--nb-line-2);
}

.nb-row-head .nb-link {
  margin-top: 2rem;
}

.nb-search {
  display: block;
}

.nb .nb-search input {
  width: 100%;
  height: 3.75rem;
  padding: 0;
  border: 0;
  border-bottom: 1.5px solid var(--nb-ink);
  border-radius: 0;
  background: transparent;
  color: var(--nb-ink);
  font-family: var(--nb-serif);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  letter-spacing: -0.02em;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nb .nb-search input::placeholder {
  color: rgba(20, 26, 23, 0.38);
}

.nb .nb-search input:focus {
  border-bottom-color: var(--nb-green-2);
  box-shadow: 0 1.5px 0 var(--nb-green-2);
}

.nb .nb-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 0.875rem;
  height: 0.875rem;
  background: var(--nb-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.45;
  cursor: pointer;
}

.nb .nb-search input::-webkit-search-cancel-button:hover {
  opacity: 0.8;
}

/* Payer names as a plain two-column directory. script.js fills and filters
   [data-payer-set="primary"]; the clone set it also expects stays hidden. */
.nb-directory {
  max-height: 27rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--nb-line-2) transparent;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 4rem), transparent);
  mask-image: linear-gradient(#000 calc(100% - 4rem), transparent);
}

.nb-directory-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem;
  padding-bottom: 4rem;
}

.nb-directory .payer-row {
  border-bottom: 1px solid var(--nb-line);
}

.nb-directory .payer-row-inner {
  padding: 0.875rem 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.nb-directory .payer-row-logo {
  display: none;
}

.nb-directory .payer-row-name {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  overflow: visible;
  color: var(--nb-ink);
}

.nb-specs {
  border-top: 1.5px solid var(--nb-ink);
}

.nb-spec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0.375rem 2rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--nb-line);
}

.nb-spec dt {
  font-family: var(--nb-serif);
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--nb-ink);
}

.nb-spec dd {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--nb-muted);
}

/* --------------------------------------------------------------------------
   08 Switching
   -------------------------------------------------------------------------- */

.nb-steps {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.nb-step {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.75rem 2rem;
  border: 1px solid var(--nb-line);
  border-radius: 28px;
  background: var(--nb-card);
}

.nb-step-media {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 20px;
  overflow: hidden;
  background: var(--nb-sage);
}

.nb-step-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--nb-ease);
}

.nb-step:hover .nb-step-media img {
  transform: scale(1.03);
}

.nb-step-num {
  position: absolute;
  left: 0.875rem;
  top: 0.875rem;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--nb-mark);
  color: var(--nb-ink);
  font-family: var(--nb-serif);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.lp-home #how-it-works .nb-step-title {
  margin: 1.75rem 0 0;
  padding-inline: 0.75rem;
  font-family: var(--nb-serif);
  font-size: clamp(1.625rem, 1.3rem + 0.8vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.nb-step-text {
  margin-top: 0.75rem;
  padding-inline: 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--nb-ink-2);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.nb-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.nb-faq-side {
  position: sticky;
  top: 7.5rem;
}

.lp-home #faq .nb-h2 {
  margin-bottom: 0;
  font-size: clamp(2.25rem, 1.35rem + 2.7vw, 4.125rem);
}

.nb-faq-list {
  border-top: 1px solid var(--nb-line-2);
}

.nb-qa {
  border-bottom: 1px solid var(--nb-line-2);
}

.nb-qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  list-style: none;
  cursor: pointer;
}

.nb-qa summary::-webkit-details-marker {
  display: none;
}

.nb-qa-q {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.nb-qa summary:hover .nb-qa-q {
  color: var(--nb-green);
}

.nb-qa-icon {
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--nb-line-2);
  border-radius: 50%;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.35s var(--nb-ease);
}

.nb-qa-icon::before,
.nb-qa-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.75rem;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.nb-qa-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.nb-qa[open] .nb-qa-icon {
  border-color: var(--nb-ink);
  background: var(--nb-ink);
  color: var(--nb-on-dark);
  transform: rotate(45deg);
}

.nb-qa-a {
  padding: 0 3.75rem 1.75rem 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--nb-ink-2);
}

@supports (interpolate-size: allow-keywords) {
  .nb-faq-list {
    interpolate-size: allow-keywords;
  }

  .nb-qa::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.4s var(--nb-ease), content-visibility 0.4s allow-discrete;
  }

  .nb-qa[open]::details-content {
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.nb-final {
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
}

.nb-final-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 1rem + 4vw, 4.5rem);
  border-radius: 40px;
  background: var(--nb-ink);
  color: var(--nb-on-dark);
  overflow: hidden;
  isolation: isolate;
}

.nb-final-card::before {
  content: "";
  position: absolute;
  left: -12rem;
  bottom: -18rem;
  z-index: -1;
  width: 36rem;
  height: 36rem;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 34px, rgba(241, 223, 103, 0.07) 34px 35px);
}

.nb-final-card .nb-h2 {
  color: var(--nb-on-dark);
  font-size: clamp(2.25rem, 1.35rem + 2.4vw, 3.75rem);
}

.lp-home .nb .nb-final-text {
  margin-top: 1.25rem;
  max-width: 32rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--nb-on-dark-2);
}

.nb-final-actions {
  margin-top: 2.25rem;
}

.nb-final-note {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--nb-on-dark-3);
}

.nb-final-media {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 1024 / 640;
  background: #2a2f2c;
}

.nb-final-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nb-badge {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 1rem 0.4375rem 0.4375rem;
  border-radius: 999px;
  background: var(--nb-card);
  color: var(--nb-ink);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.35);
}

.nb-badge-check {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--nb-green);
  color: #fff;
}

.nb-badge-check svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1149px) {
  .nb-vitals-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .nb-vitals-label {
    padding: 1.75rem 0 0;
  }

  .nb-vital:first-child {
    border-left: 0;
    padding-left: 0;
  }

  .nb-vital {
    padding-top: 1.5rem;
  }

  .nb-trusted {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nb-included {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nb-explorer {
    grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
  }

  .nb-panel-points {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 899px) {
  .nb-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .nb-tcard-quote p {
    font-size: 1.3125rem;
  }

  .nb-hero-copy {
    padding-bottom: 0;
  }

  .nb-hero-visual {
    width: min(88%, 26rem);
  }

  .nb-ecg {
    display: none;
  }

  .nb-vitals-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: 0.5rem;
  }

  .nb-vital,
  .nb-vital:first-child {
    padding: 1.25rem 1rem 1.25rem 0;
    border-left: 0;
    border-top: 1px solid var(--nb-line-dark);
  }

  .nb-vital:nth-child(-n + 2) {
    border-top: 0;
  }

  .nb-vital:last-child {
    grid-column: 1 / -1;
  }

  .nb-calc,
  .nb-ba,
  .nb-growth,
  .nb-services-top,
  .nb-support,
  .nb-row,
  .nb-faq,
  .nb-final-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .nb-receipt-wrap {
    position: relative;
    top: 0;
  }

  .nb-faq-side {
    position: static;
  }

  .nb-explorer {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.375rem;
    border-radius: 26px;
  }

  .nb-tabs {
    flex-direction: row;
    gap: 0.375rem;
    padding: 0.375rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .nb-tabs::-webkit-scrollbar {
    display: none;
  }

  .nb .nb-tab {
    flex: none;
    width: auto;
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--nb-line);
    border-radius: 999px;
    background: var(--nb-card);
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .nb .nb-tab[aria-selected="true"] {
    border-color: var(--nb-ink);
  }

  .nb-tab-num {
    width: auto;
  }

  .nb-panel {
    border-radius: 22px;
  }

  .nb-day-chart {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .nb-day-seg {
    padding-inline: 0.7rem;
  }

  .nb-day-label {
    grid-column: 1 / -1;
  }

  .nb-day-label:not(:first-child) {
    margin-top: 0.35rem;
  }

  .nb-day-seg--admin {
    grid-column: 2 / span 2;
  }

  .nb-day-moments {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .nb-day-moments li + li {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--nb-line);
  }

  .nb-phone {
    width: min(100%, 21rem);
  }

  .nb-steps {
    grid-template-columns: minmax(0, 1fr);
    max-width: 36rem;
  }

  .nb-final-card {
    border-radius: 32px;
  }

  .nb-qa-a {
    padding-right: 0;
  }
}

.nb-vs {
  display: none;
}

@media (max-width: 719px) {
  /* Three vendor columns don't fit, so the switch picks which one sits beside
     NoBackOffice. That keeps the NoBackOffice column one continuous strip, as
     on the wide table, and the header sticks under the nav. */
  .nb-table-card {
    padding: 0.875rem 0.875rem 1rem;
  }

  .nb-vs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.25rem;
    border-radius: 999px;
    background: var(--nb-paper-2);
  }

  .nb-vs::before {
    content: "";
    position: absolute;
    top: 0.25rem;
    bottom: 0.25rem;
    left: 0.25rem;
    width: calc(50% - 0.25rem);
    border-radius: 999px;
    background: var(--nb-ink);
    box-shadow: 0 8px 16px -10px rgba(20, 26, 23, 0.7);
    transition: translate 0.45s var(--nb-ease);
  }

  .nb-table-card[data-vs="biller"] .nb-vs::before {
    translate: 100% 0;
  }

  .nb .nb-vs-btn {
    position: relative;
    min-height: 2.625rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--nb-ink-2);
    font-family: var(--nb-sans);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.3s ease;
  }

  .nb .nb-vs-btn[aria-pressed="true"] {
    color: var(--nb-on-dark);
  }

  .nb-table,
  .nb-table thead,
  .nb-table tbody {
    display: block;
  }

  .nb-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.25rem 4rem;
  }

  .nb-table-card[data-vs="ehr"] .nb-table tr > :nth-child(3),
  .nb-table-card[data-vs="biller"] .nb-table tr > :nth-child(2):not(.is-us) {
    display: none;
  }

  .nb-table th,
  .nb-table td {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 0.25rem;
  }

  .nb-table thead {
    position: sticky;
    top: 4.5rem;
    z-index: 1;
    margin-top: 0.5rem;
    background: var(--nb-card);
  }

  .nb-table thead th {
    padding: 1rem 0.25rem 0.75rem;
    font-size: 0.625rem;
    line-height: 1.25;
    letter-spacing: 0.08em;
  }

  .nb-table thead th:first-child {
    width: auto;
    justify-content: flex-start;
  }

  /* The name won't fit a 4rem column, so the header shows the brand mark. */
  .nb .nb-table thead .is-us {
    border-radius: 14px 14px 0 0;
    background: var(--nb-ink) url("/images/logos/Group%20172.png") center / 1.75rem no-repeat;
    background-blend-mode: lighten;
    color: transparent;
    font-size: 0;
  }

  .nb-table tbody th[scope="row"] {
    justify-content: flex-start;
    padding-right: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.35;
  }

  .nb-table td {
    font-size: 0.8125rem;
    animation: nb-vs-in 0.4s var(--nb-ease);
  }

  .nb-table tbody td.is-us {
    border-bottom-color: transparent;
    animation: none;
  }

  .nb-table tbody tr:last-child .is-us {
    border-radius: 0 0 14px 14px;
  }

  .nb-table tr.nb-table-group th {
    grid-column: 1 / 3;
    justify-content: flex-start;
    padding: 1.5rem 0 0.5rem;
    font-size: 0.6875rem;
  }

  .nb-table tbody tr.nb-table-group:first-child th {
    padding-top: 1rem;
  }

  .nb-table td .nb-yes svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  .nb-table tbody .is-us .nb-yes svg {
    width: 1.375rem;
    height: 1.375rem;
  }

  .nb-part {
    padding: 0.1875rem 0.4375rem;
    font-size: 0.625rem;
    text-align: center;
  }

  .nb-spec {
    grid-template-columns: minmax(0, 1fr);
  }
}

@keyframes nb-vs-in {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: none; }
}

@media (max-width: 560px) {
  .nb-head--row {
    align-items: flex-start;
  }

  .nb-hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .nb-hero-actions .nb-btn {
    width: 100%;
    justify-content: space-between;
  }

  .nb-included {
    grid-template-columns: minmax(0, 1fr);
  }

  .nb-directory-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .nb-quote {
    grid-template-columns: minmax(0, 1fr);
  }

  .nb-final-actions .nb-btn {
    width: 100%;
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   Mobile experience: thumb-reach booking bar, swipe rails, stacked steps,
   scroll progress, and press feedback.
   -------------------------------------------------------------------------- */

.nb-dock,
.nb-rail-dots,
.nb-progress {
  display: none;
}

@media (max-width: 899px) {
  .nb {
    -webkit-tap-highlight-color: transparent;
  }

  .nb-dock {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4375rem 0.4375rem 0.4375rem 1.125rem;
    border-radius: 999px;
    background: var(--nb-ink);
    box-shadow: 0 20px 40px -14px rgba(20, 26, 23, 0.55), inset 0 0 0 1px rgba(244, 240, 232, 0.08);
    visibility: hidden;
    transform: translateY(calc(100% + 1.5rem));
    transition: transform 0.45s var(--nb-ease), visibility 0s linear 0.45s;
  }

  .nb-dock.is-on {
    visibility: visible;
    transform: none;
    transition: transform 0.45s var(--nb-ease), visibility 0s;
  }

  /* While the calculator is on screen the bar swaps in the live "you keep"
     figure, since the receipt sits below the inputs on a phone. */
  .nb-dock-texts {
    flex: 1;
    min-width: 0;
    display: grid;
  }

  .lp-home .nb .nb-dock-text {
    grid-area: 1 / 1;
    align-self: center;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--nb-on-dark-2);
    transition: opacity 0.3s ease, translate 0.45s var(--nb-ease);
  }

  .lp-home .nb .nb-dock-text--calc,
  .lp-home .nb .nb-dock.is-calc .nb-dock-text {
    opacity: 0;
    translate: 0 0.625rem;
  }

  .lp-home .nb .nb-dock.is-calc .nb-dock-text--calc {
    opacity: 1;
    translate: none;
  }

  .nb-dock-text strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--nb-on-dark);
  }

  .nb-dock-text--calc strong {
    font-size: 1.0625rem;
    color: var(--nb-mark);
    font-variant-numeric: tabular-nums;
    transform-origin: 0 50%;
  }

  .nb-dock-btn,
  .nb-dock-btn:visited {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 2.875rem;
    padding: 0 1.25rem;
    border-radius: 999px;
    background: var(--nb-mark);
    color: var(--nb-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease;
  }

  /* Swipe rails: full-bleed, snapping, with the next card peeking in. */
  .nb-trusted.nb-rail {
    display: flex;
    gap: 0.75rem;
    max-width: none;
    margin-inline: calc(-1 * var(--nb-gutter));
    padding-inline: var(--nb-gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--nb-gutter);
    scrollbar-width: none;
  }

  .nb-rail::-webkit-scrollbar {
    display: none;
  }

  .nb-rail > * {
    flex: 0 0 min(80%, 21rem);
    scroll-snap-align: start;
  }

  .nb .nb-rail > .reveal {
    opacity: 1;
    transform: none;
  }

  .nb-rail-dots {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 1.125rem;
  }

  .nb-rail-dots span {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 999px;
    background: var(--nb-line-2);
    transition: width 0.3s var(--nb-ease), background-color 0.3s ease;
  }

  .nb-rail-dots span.is-on {
    width: 1.25rem;
    background: var(--nb-ink);
  }

  /* Switching steps stack like a deck: each card pins and the next slides over it. */
  .nb-steps {
    gap: 1.5rem;
  }

  .nb-step {
    position: sticky;
    top: 5.25rem;
    box-shadow: 0 -16px 32px -20px rgba(20, 26, 23, 0.3);
  }

  .nb-step:nth-child(2) {
    top: 6rem;
  }

  .nb-step:nth-child(3) {
    top: 6.75rem;
  }

  .nb .nb-step.reveal {
    opacity: 1;
    transform: none;
  }

  /* Lets the claim card hang over the vitals band (the visual's entrance
     animation gives it its own stacking context). */
  .nb-hero {
    z-index: 2;
  }

  /* Press feedback stands in for hover on touch screens. */
  .nb-btn:active,
  .nb-dock-btn:active,
  .nb .nb-tab:active,
  .nb-link:active {
    transform: scale(0.97);
  }

  .nb-btn,
  .nb-link {
    transition: transform 0.15s ease;
  }
}

/* Thin reading-progress line along the top edge. */
@supports (animation-timeline: scroll()) {
  @media (max-width: 899px) {
    .nb-progress {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 60;
      display: block;
      height: 2px;
      background: var(--nb-green-2);
      transform-origin: 0 50%;
      animation: nb-progress linear both;
      animation-timeline: scroll(root);
    }
  }
}

@keyframes nb-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   Phone layout and motion. Desktop compositions sit side by side and animate
   above the fold; on a phone they stack, so the motion moves to scroll and
   each piece builds as it arrives instead of having played off-screen.
   -------------------------------------------------------------------------- */

@property --nb-ripple {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@media (max-width: 899px) {
  .lp-home {
    --nb-radius: 24px;
  }

  .nb-hero-visual {
    width: min(94%, 26rem);
    margin-top: 1.25rem;
  }

  /* Vitals: the trace returns as a slim monitor strip beside the label. */
  .nb-ecg {
    display: block;
    top: 1.125rem;
    left: auto;
    right: 0;
    width: calc(100% - 12rem);
    height: 2.75rem;
    transform: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem);
    mask-image: linear-gradient(90deg, transparent, #000 3rem);
  }

  .nb-ecg-pulse {
    animation-duration: 3.2s;
  }

  .nb-vital-n {
    font-variant-numeric: tabular-nums;
  }

  /* Before and After pin like a deck, and After slides up over Before. Before
     is opaque so the heading doesn't show through as it scrolls beneath. */
  .nb-ba {
    gap: 1rem;
  }

  .nb-ba-col {
    position: sticky;
    top: 5.5rem;
  }

  .nb-ba-col--before {
    background: #1b211e;
  }

  .nb-ba-col--after {
    top: 8.5rem;
    box-shadow: 0 -24px 48px -28px rgba(0, 0, 0, 0.8);
  }

  .nb-included {
    gap: 0 2rem;
    margin-top: 2.5rem;
    border-top: 1px solid var(--nb-line-2);
  }

  .nb-included li {
    display: flex;
    gap: 0.875rem;
    padding: 1rem 0;
    border-top: 0;
    border-bottom: 1px solid var(--nb-line);
    color: var(--nb-ink);
  }

  .nb-included li::before {
    content: "";
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    margin-top: 0.05rem;
    border-radius: 50%;
    background: var(--nb-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
  }

  /* Fade the tab strip's edge so it reads as scrollable; the end padding lets
     the last tab scroll clear of the fade. */
  .nb-tabs {
    padding-inline-end: 2.5rem;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
  }

  .nb-panel-desc {
    margin-bottom: 0;
  }

  .nb-panel-points {
    margin-top: 1.75rem;
  }

  .nb-panel[data-enter="next"] {
    animation-name: nb-panel-next;
  }

  .nb-panel[data-enter="prev"] {
    animation-name: nb-panel-prev;
  }
}

/* Phone hero: one lockup. Kicker, claim, and a single sentence stay tight;
   the button is the only strong action; proof and the scroll link step down. */
@media (max-width: 899px) {
  .nb-hero {
    padding-top: 0.25rem;
  }

  .nb-pill {
    width: auto;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
    color: var(--nb-green);
  }

  .nb-pill-copy--full {
    display: none;
  }

  .nb-pill-copy--short {
    display: inline;
  }

  .nb-pill-mark {
    width: 1.375rem;
    height: 1.375rem;
  }

  .nb-br-sm {
    display: inline;
  }

  .nb .nb-h1 {
    margin-top: 0.875rem;
    font-size: clamp(2.5rem, 10.4vw, 2.875rem);
    text-wrap: wrap;
  }

  .nb-hero-lead-rest {
    display: none;
  }

  .lp-home .nb .nb-hero-lead {
    margin-top: 0.875rem;
    max-width: 26rem;
    font-size: 1.0625rem;
    line-height: 1.45;
    text-wrap: balance;
  }

  .nb-hero-actions {
    margin-top: 1.625rem;
  }

  .nb-hero-proof {
    margin-top: 1.125rem;
    padding-top: 0;
    border-top: 0;
    gap: 0.75rem;
  }

  .nb-hero-next {
    display: flex;
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--nb-muted);
  }

  .nb-hero-next .nb-link-text {
    background-image: none;
    padding-bottom: 0;
  }

  .nb-hero-visual {
    width: min(100%, 28rem);
    margin-top: 0.5rem;
    aspect-ratio: 626 / 511;
  }

  .nb-arch {
    inset: 4% 0 2% 0;
  }

  .nb-hero-photo {
    width: 100%;
    height: 100%;
    bottom: auto;
  }
}

@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .nb-arch::before {
    background: repeating-radial-gradient(
      circle at 50% 55%,
      transparent var(--nb-ripple),
      transparent calc(var(--nb-ripple) + 28px),
      rgba(31, 92, 71, 0.1) calc(var(--nb-ripple) + 28px),
      rgba(31, 92, 71, 0.1) calc(var(--nb-ripple) + 29px)
    );
    animation: nb-ripple 3.6s linear infinite;
  }

  /* Blur-fade for headings and a short stagger for lists. */
  .nb .reveal {
    transform: translateY(26px);
  }

  .nb .nb-head.reveal,
  .nb .nb-faq-side.reveal,
  .nb .nb-support-copy.reveal,
  .nb .nb-quote.reveal {
    filter: blur(8px);
    transition: opacity 0.9s var(--nb-ease), transform 0.9s var(--nb-ease), filter 0.9s var(--nb-ease);
  }

  .nb .nb-head.reveal.active,
  .nb .nb-faq-side.reveal.active,
  .nb .nb-support-copy.reveal.active,
  .nb .nb-quote.reveal.active {
    filter: none;
  }

  .nb .nb-included.reveal > li,
  .nb .nb-faq-list.reveal > .nb-qa,
  .nb .nb-row.reveal .nb-spec {
    opacity: 0;
    translate: 0 14px;
    transition-property: opacity, translate;
    transition-duration: 0.6s;
    transition-timing-function: var(--nb-ease);
  }

  .nb .nb-included.reveal.active > li,
  .nb .nb-faq-list.reveal.active > .nb-qa,
  .nb .nb-row.reveal.active .nb-spec {
    opacity: 1;
    translate: none;
  }

  .nb .reveal > :nth-child(2), .nb .reveal .nb-spec:nth-child(2) { transition-delay: 0.06s; }
  .nb .reveal > :nth-child(3), .nb .reveal .nb-spec:nth-child(3) { transition-delay: 0.12s; }
  .nb .reveal > :nth-child(4), .nb .reveal .nb-spec:nth-child(4) { transition-delay: 0.18s; }
  .nb .reveal > :nth-child(5), .nb .reveal .nb-spec:nth-child(5) { transition-delay: 0.24s; }
  .nb .reveal > :nth-child(6), .nb .reveal .nb-spec:nth-child(6) { transition-delay: 0.3s; }
  .nb .reveal > :nth-child(7) { transition-delay: 0.36s; }
  .nb .reveal > :nth-child(8) { transition-delay: 0.42s; }
  .nb .reveal > :nth-child(9) { transition-delay: 0.48s; }
  .nb .reveal > :nth-child(10) { transition-delay: 0.54s; }
  .nb .reveal > :nth-child(11) { transition-delay: 0.6s; }
}

@supports (animation-timeline: view()) {
  @media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
    /* Hero art assembles as it scrolls up into view. */
    .nb-hero-visual {
      view-timeline: --nb-hero-art block;
    }

    .nb-arch {
      transform-origin: 50% 100%;
      animation: nb-arch-in linear both;
      animation-timeline: --nb-hero-art;
      animation-range: entry 0% cover 45%;
    }

    .nb-hero-photo {
      transform-origin: 50% 100%;
      animation: nb-photo-in linear both;
      animation-timeline: --nb-hero-art;
      animation-range: entry 0% cover 45%;
    }

    /* Provider cards grow to full size as they snap into place. */
    .nb-trusted.nb-rail > .nb-tcard {
      transform-origin: 0% 50%;
      animation: nb-rail-in linear both;
      animation-timeline: view(inline);
      animation-range: entry 0% entry 100%;
    }

    /* Before settles back while After covers it. */
    .nb-ba {
      view-timeline: --nb-ba block;
    }

    .nb-ba-col--before {
      transform-origin: 50% 0%;
      animation: nb-recede linear both;
      animation-timeline: --nb-ba;
      animation-range: exit-crossing 0% exit-crossing 40%;
    }

    /* Each NoBackOffice check pops as its row comes up past the booking bar. */
    .nb-table tbody .is-us .nb-yes {
      animation: nb-check-pop linear both;
      animation-timeline: view();
      animation-range: cover 8% cover 20%;
    }

    /* Switching steps: covered cards sink back into the deck. */
    .nb-steps {
      view-timeline: --nb-steps block;
    }

    .nb-step:not(:last-child) {
      transform-origin: 50% 0%;
      animation: nb-step-recede linear both;
      animation-timeline: --nb-steps;
    }

    .nb-step:nth-child(1) {
      animation-range: exit-crossing 0% exit-crossing 30%;
    }

    .nb-step:nth-child(2) {
      animation-range: exit-crossing 30% exit-crossing 62%;
    }
  }
}

@keyframes nb-ripple {
  to { --nb-ripple: 39px; }
}

@keyframes nb-arch-in {
  from { scale: 0.88 0.8; opacity: 0.5; }
  to { scale: 1; opacity: 1; }
}

@keyframes nb-photo-in {
  from { translate: 0 8%; scale: 0.9; }
  to { translate: none; scale: 1; }
}

@keyframes nb-rail-in {
  from { scale: 0.9; opacity: 0.5; }
  to { scale: 1; opacity: 1; }
}

@keyframes nb-recede {
  to { scale: 0.92; opacity: 0.45; }
}

@keyframes nb-step-recede {
  to { scale: 0.93; filter: brightness(0.9); }
}

@keyframes nb-check-pop {
  from { scale: 0.2; opacity: 0; }
  65% { scale: 1.15; opacity: 1; }
  to { scale: 1; opacity: 1; }
}

@keyframes nb-panel-next {
  from { opacity: 0; translate: 2.5rem 0; }
  to { opacity: 1; translate: none; }
}

@keyframes nb-panel-prev {
  from { opacity: 0; translate: -2.5rem 0; }
  to { opacity: 1; translate: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nb .reveal,
  .nb-hero-copy,
  .nb-hero-visual {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .nb-mark,
  .nb-hero .nb-mark {
    background-size: 100% 52%;
    transition: none;
    animation: none;
  }

  .nb-dock,
  .nb-dock.is-on,
  .lp-home .nb .nb-dock-text,
  .nb-vs::before {
    transition: none;
  }

  .nb-table td {
    animation: none;
  }

  .nb-hero-flight,
  .nb-pill-spark,
  .nb-pill-sat,
  .nb-ecg-pulse,
  .nb-vitals-blip,
  .nb-panel,
  .nb-growth.active .nb-growth-dot {
    animation: none;
  }

  .nb-ecg-pulse {
    display: none;
  }

  .nb-growth-line {
    stroke-dashoffset: 0;
    transition: none;
  }

  .nb-growth-area,
  .nb-growth-dot {
    opacity: 1;
    transition: none;
  }

  .nb-bubble {
    opacity: 1;
    transform: none;
  }

  .nb-phone.active .nb-bubble {
    animation: none;
  }
}