/* /negotiate on the kit (app/negotiate/NegotiateLandingClient.tsx).

   Loaded after the about kit head and kit-shell.css. Every value is taken from
   the kit: the homepage's feature rows and white mock cards, the about page's
   type scale, greys and dark ending. No new colours, no accent gradients.
   Classes are nx-* so nothing here reaches another page.

   This is not Brandan's file. His files are public/site/<page>/*. */

/* ---------- Hero: a longer sub line and the two actions ---------- */
.x-hero__in:has(> .nx-actions) > .x-hero__sub { max-width: 52ch; }
.nx-actions {
  margin-top: clamp(28px, 4vw, 40px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 28px;
}
.x-hero--page .x-hero__in > .nx-actions { animation-delay: 560ms; }
.nx-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 32px; border-radius: 999px;
  background: #000000; color: #ffffff;
  font: 600 17px/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  transition: background-color 200ms ease;
}
.nx-btn:hover { background: #1d1d1f; }
.nx-btn:focus-visible { outline: 2px solid #000000; outline-offset: 3px; }
.nx-ghost { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- Photo beside the sample letter capture ---------- */
.nx-intro {
  width: 100%; max-width: var(--x-wide); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: stretch;
  padding: clamp(8px, 2vw, 24px) clamp(16px, 4vw, 40px) clamp(72px, 9vw, 120px);
}
.nx-photo { position: relative; margin: 0; min-height: 380px; overflow: hidden; border-radius: 28px; background: #f5f5f7; }
.nx-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 48% 40%; display: block; }

.nx-cap { display: flex; flex-direction: column; justify-content: center; }
.nx-cap__h { font: 700 clamp(26px, 2.8vw, 34px)/1.1 var(--sans); letter-spacing: -0.035em; color: #000000; }
.nx-cap__sub { margin-top: 12px; font: 400 17px/1.5 var(--sans); letter-spacing: -0.005em; color: var(--x-body-ink); }
.nx-cap__form { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.nx-cap__form .x-kf__submit { width: 100%; align-self: stretch; margin-top: 4px; }
.nx-cap__err { margin-top: 12px; }
.nx-cap__trust { margin-top: 16px; font: 400 13px/1.5 var(--sans); color: #6e6e73; }
.nx-cap__done {
  margin-top: 24px; padding: 20px 24px; border-radius: 20px; background: #f5f5f7;
  font: 500 17px/1.5 var(--sans); letter-spacing: -0.01em; color: #000000;
}

@media (max-width: 860px) {
  .nx-intro { grid-template-columns: minmax(0, 1fr); }
  /* The capture stays the first ask on a phone; the photo follows it. */
  .nx-photo { order: 2; min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) { .nx-photo { border-radius: 24px; } }

/* ---------- Before and after ---------- */
.nx-ba {
  width: 100%; max-width: var(--x-wide); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: stretch;
  padding: 0 clamp(16px, 4vw, 40px) clamp(72px, 9vw, 120px);
}
.nx-card { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 3vw, 32px); border-radius: 28px; }
.nx-card > .nx-card__row, .nx-card > .nx-card__label, .nx-card > .nx-card__total { align-self: stretch; }
.nx-card--before { background: #1d1d1f; color: #d1d1d6; }
.nx-card--after { background: #ffffff; color: #1d1d1f; border: 1px solid var(--stroke-secondary); box-shadow: var(--x-shadow); }
.nx-card__label { margin-bottom: 12px; font: 600 13px/1.3 var(--sans); letter-spacing: 0; color: #86868b; }
.nx-card--after .nx-card__label { color: #6e6e73; }
.nx-card__row { padding: 11px 0; border-bottom: 1px solid rgb(255 255 255 / 0.1); font: 400 15px/1.45 var(--sans); letter-spacing: -0.005em; }
.nx-card--after .nx-card__row { display: flex; justify-content: space-between; gap: 16px; border-bottom-color: rgb(0 0 0 / 0.08); }
.nx-card__row--last { border-bottom: 0; }
.nx-card__call { flex: none; font-weight: 600; color: #000000; text-align: right; }
.nx-card__call--quiet { font-weight: 400; color: #6e6e73; }
.nx-card__total { margin-top: 16px; font: 700 clamp(20px, 2vw, 24px)/1.2 var(--sans); letter-spacing: -0.025em; color: #000000; }
.nx-pill {
  display: inline-flex; align-items: center; margin-top: 20px; padding: 7px 14px; border-radius: 999px;
  font: 600 13px/1.35 var(--sans); letter-spacing: -0.005em;
}
.nx-card--before .nx-pill { background: rgb(255 255 255 / 0.1); color: #f5f5f7; }
.nx-card--after .nx-pill { background: #f5f5f7; color: #1d1d1f; }
.nx-arrow { display: flex; align-items: center; justify-content: center; color: #86868b; }
@media (max-width: 860px) {
  .nx-ba { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .nx-arrow { height: 48px; transform: rotate(90deg); }
}
@media (max-width: 640px) { .nx-card { border-radius: 24px; padding: 24px 20px; } }

/* ---------- Sections: headline left, content right ---------- */
.nx-sec {
  width: 100%; max-width: var(--x-wide); margin-inline: auto;
  padding: clamp(72px, 9vw, 120px) clamp(16px, 4vw, 40px);
}
#how { scroll-margin-top: 80px; }
.nx-band { background: #f5f5f7; }
.nx-h2 { font: 700 clamp(32px, 4vw, 52px)/1.05 var(--sans); letter-spacing: -0.035em; color: #000000; max-width: 18ch; text-wrap: balance; }
.nx-lede { margin-top: 20px; max-width: 44ch; font: 400 clamp(17px, 1.8vw, 19px)/1.5 var(--sans); letter-spacing: -0.005em; color: var(--x-body-ink); }
.nx-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
@media (max-width: 860px) { .nx-split { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Steps: a numbered list on hairlines, not a card grid. */
.nx-steps { margin: 0; padding: 0; list-style: none; }
.nx-step {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 16px;
  padding: 28px 0; border-top: 1px solid rgb(0 0 0 / 0.1);
}
.nx-step:last-child { border-bottom: 1px solid rgb(0 0 0 / 0.1); }
.nx-step__n { font: 600 15px/1.6 var(--sans); color: #86868b; font-variant-numeric: tabular-nums; }
.nx-step h3 { font: 700 clamp(20px, 2vw, 24px)/1.2 var(--sans); letter-spacing: -0.02em; color: #000000; }
.nx-step p { margin-top: 8px; font: 400 17px/1.55 var(--sans); letter-spacing: -0.005em; color: var(--x-body-ink); }
@media (max-width: 640px) { .nx-step { grid-template-columns: 36px minmax(0, 1fr); gap: 0 12px; padding: 24px 0; } }

/* Value points: two columns of text on hairlines. */
.nx-points { margin-top: clamp(40px, 5vw, 56px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 64px); }
.nx-point { padding: 24px 0 28px; border-top: 1px solid rgb(0 0 0 / 0.1); }
.nx-point h3 { font: 600 19px/1.3 var(--sans); letter-spacing: -0.015em; color: #000000; }
.nx-point p { margin-top: 8px; max-width: 44ch; font: 400 17px/1.55 var(--sans); letter-spacing: -0.005em; color: var(--x-body-ink); }
@media (max-width: 640px) { .nx-points { grid-template-columns: minmax(0, 1fr); } }

/* The sample letter: a white sheet with the kit shadow. */
.nx-letter {
  padding: clamp(24px, 4vw, 48px); border-radius: 28px;
  background: #ffffff; border: 1px solid var(--stroke-secondary); box-shadow: var(--x-shadow);
}
.nx-letter__meta {
  margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgb(0 0 0 / 0.08);
  font: 600 13px/1.3 var(--sans); letter-spacing: 0; color: #6e6e73;
}
.nx-letter p { font: 400 17px/1.65 var(--sans); letter-spacing: -0.005em; color: #1d1d1f; }
.nx-letter .nx-letter__meta { font: 600 13px/1.3 var(--sans); color: #6e6e73; }
.nx-letter__li { margin-top: 12px; font: 400 16px/1.55 var(--sans); letter-spacing: -0.005em; color: var(--x-body-ink); }
.nx-letter p.nx-letter__total {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid rgb(0 0 0 / 0.08);
  font: 700 clamp(18px, 1.8vw, 20px)/1.35 var(--sans); letter-spacing: -0.02em; color: #000000;
}
@media (max-width: 640px) { .nx-letter { border-radius: 24px; padding: 24px 20px; } }

/* ---------- Closing: the kit's dark CTA, running into the dark ending ---------- */
.nx-close { background: #121314; }
.nx-close .x-cta { padding-bottom: clamp(56px, 7vw, 88px); }
.nx-close .x-cta h2 { max-width: 16ch; }
.nx-fine { margin-top: clamp(48px, 6vw, 72px); max-width: 64ch; }
.nx-fine p { font: 400 13px/1.55 var(--sans); color: #a1a1a6; }
.nx-fine p + p { margin-top: 8px; }
.nx-fine p.nx-fine__name { font-weight: 600; color: #ffffff; }
.nx-fine p.nx-fine__links { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; }
.nx-fine__links a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font: 600 15px/1 var(--sans); color: #ffffff; text-decoration: underline; text-underline-offset: 3px;
}
.nx-fine__links a:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; border-radius: 8px; }

/* SignupModal styles itself inline; inside the kit scope its fields lose the
   app's font inheritance, so hand it back. */
.nx-modal-host input, .nx-modal-host button { font-family: inherit; }

@media (prefers-reduced-motion: reduce) { .nx-btn { transition: none; } }