/* /move, /dates (app/components/FreebieLanding.tsx) and /new-homeowner
   (app/new-homeowner/NewHomeownerClient.tsx) inside KitShell.

   Loaded after the about kit's head and public/site/shared/kit-shell.css, so
   it only adds what those two lack: a split hero with the printable pages as
   paper, a hairline sheet list, a dark mid-page band, the close-date chips,
   a spec list, a figures panel and numbered steps. Values come from the kit:
   --sans, --x-wide, --x-read, --x-shadow, --x-body-ink, the #121314 ending,
   the #f5f5f7 grey and the #6e6e73 / #86868b greys. No new colours.

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

/* ---------- Shared ---------- */
.fb-btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 32px; border-radius: 999px; border: 0;
  background: #000000; color: #ffffff; cursor: pointer;
  font: 600 17px/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  transition: background-color 200ms var(--x-ease);
}
.fb-btn:hover { background: #1d1d1f; }
.fb-btn:focus-visible { outline: 2px solid #000000; outline-offset: 3px; }
.fb-btn--light { background: #ffffff; color: #000000; box-shadow: 0 8px 28px rgb(0 0 0 / 0.35); }
.fb-btn--light:hover { background: #f5f5f7; }
.fb-btn--light:focus-visible { outline-color: #ffffff; }
.fb-btn--line { background: transparent; color: #000000; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.22); }
.fb-btn--line:hover { background: rgb(0 0 0 / 0.04); }
.fb-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.fb-fine { margin-top: 16px; font: 400 15px/1.45 var(--sans); color: #6e6e73; }

.fb-kicker { display: block; font: 600 14px/1.3 var(--sans); letter-spacing: -0.005em; color: #6e6e73; }
.fb-h2 {
  font: 700 clamp(32px, 4.4vw, 56px)/1.05 var(--sans); letter-spacing: -0.035em; color: #000000;
  max-width: 18ch; text-wrap: balance;
}
.fb-kicker + .fb-h2 { margin-top: 14px; }
.fb-lede { margin-top: 20px; max-width: 46ch; font: 400 clamp(17px, 1.8vw, 19px)/1.55 var(--sans); color: var(--x-body-ink); }

/* The hero's fourth and fifth children rise after the sub line. */
@media (prefers-reduced-motion: no-preference) {
  .fb-hero .x-hero__in > :nth-child(4), .nh-hero .x-hero__in > :nth-child(4) { animation-delay: 560ms; }
}

/* ---------- Freebie: hero with the two pages as paper ---------- */
.x-hero.fb-hero { text-align: left; }
.fb-hero .x-hero__in.fb-hero__in {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(40px, 6vw, 88px); align-items: center;
  width: 100%; max-width: var(--x-wide);
}
.fb-hero__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.fb-hero h1 {
  margin-top: 28px; max-width: 12ch;
  font: 700 clamp(40px, 5.6vw, 72px)/1.03 var(--sans); letter-spacing: -0.04em;
}
.fb-hero .x-hero__sub { max-width: 34ch; }
.fb-hero__act { margin-top: 32px; }

.fb-papers { position: relative; margin: 0; padding: 0 0 18px 6%; min-width: 0; }
.fb-papers img { height: auto; }
.fb-paper { background: #ffffff; box-shadow: 0 2px 4px rgb(0 0 0 / 0.05), 0 18px 44px rgb(0 0 0 / 0.14); }
.fb-papers__back { position: absolute; left: 0; top: 7%; width: 80%; border-radius: 4px; transform: rotate(-5deg); opacity: 0.92; }
.fb-papers__front { position: relative; display: block; width: 88%; margin-left: auto; border-radius: 4px; transform: rotate(2deg); }

@media (max-width: 860px) {
  .fb-hero .x-hero__in.fb-hero__in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .fb-papers { width: min(100%, 420px); margin-inline: auto; }
}
@media (max-width: 640px) {
  .fb-btn { width: 100%; }
  .fb-hero__act { align-self: stretch; }
}

/* ---------- Freebie: what is on the sheet ---------- */
.fb-sheet { padding: clamp(16px, 3vw, 40px) clamp(20px, 5vw, 40px) clamp(88px, 11vw, 144px); }
.fb-sheet__list {
  box-sizing: border-box; width: 100%; max-width: var(--x-read); margin: 0 auto; padding: 0; list-style: none;
  border-top: 1px solid rgb(0 0 0 / 0.1);
}
.fb-sheet__list li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start;
  margin: 0; padding: 22px 0; border-bottom: 1px solid rgb(0 0 0 / 0.1);
  font: 400 18px/1.55 var(--sans); letter-spacing: -0.005em; color: var(--x-body-ink);
}
.fb-sheet__mark { display: block; width: 14px; height: 1px; margin-top: 0.8em; background: #86868b; }

/* ---------- Freebie: the turn, dark ---------- */
.fb-turn { background: #121314; color: #c7c7cc; }
.fb-turn__in {
  box-sizing: border-box; width: 100%; max-width: var(--x-wide); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 88px); align-items: center;
  padding: clamp(88px, 11vw, 144px) clamp(20px, 5vw, 40px);
}
.fb-turn__copy { min-width: 0; }
.fb-turn h2 { font: 700 clamp(32px, 4.4vw, 56px)/1.05 var(--sans); letter-spacing: -0.035em; color: #ffffff; max-width: 14ch; }
.fb-turn__ask { margin-top: 24px; font: 400 clamp(17px, 1.8vw, 19px)/1.6 var(--sans); color: #b8b8bd; }
.fb-turn__answer { margin-top: 20px; font: 400 clamp(17px, 1.8vw, 19px)/1.6 var(--sans); color: #ffffff; }
.fb-turn .fb-btn { margin-top: 36px; }
.fb-turn .fb-fine { color: #a1a1a6; }
.fb-turn__img { margin: 0; min-width: 0; }
.fb-turn__img img { display: block; width: 100%; height: auto; border-radius: 6px; background: #ffffff; box-shadow: 0 2px 6px rgb(0 0 0 / 0.3), 0 24px 64px rgb(0 0 0 / 0.5); }
@media (max-width: 860px) {
  .fb-turn__in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .fb-turn__img { order: -1; width: min(100%, 420px); margin-inline: auto; }
}

/* ---------- Freebie: the optional copy by email ---------- */
.fb-mail { padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 40px); }
.fb-mail__in { width: 100%; max-width: var(--x-read); margin-inline: auto; }
.fb-mail__label { display: block; margin-bottom: 16px; font: 500 18px/1.4 var(--sans); letter-spacing: -0.01em; color: #1d1d1f; }
.fb-mail__row { display: flex; flex-wrap: wrap; gap: 12px; }
.fb-mail__row .x-kf__input { flex: 1 1 240px; min-width: 0; width: auto; }
.fb-mail__row .x-kf__submit { flex: 0 0 auto; width: auto; }
@media (max-width: 860px) { .fb-mail__row .x-kf__submit { flex-basis: 100%; } }
.fb-mail .x-kf__msg { margin-top: 14px; }
.fb-mail__done { font: 400 18px/1.6 var(--sans); color: var(--x-body-ink); }

/* ---------- New homeowner ---------- */
.x-hero.nh-hero { text-align: left; }
.nh-hero .x-hero__in { align-items: flex-start; width: 100%; max-width: var(--x-wide); }
.nh-hero h1 { max-width: 18ch; font: 700 clamp(36px, 5.4vw, 68px)/1.05 var(--sans); letter-spacing: -0.04em; }
.nh-hero__soft { color: #6e6e73; }
.nh-hero .x-hero__sub { max-width: 52ch; }
.nh-act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 36px; }
.nh-act .fb-fine { margin-top: 0; }
@media (max-width: 640px) { .nh-act { align-self: stretch; } }

.nh-sec {
  box-sizing: border-box; width: 100%; max-width: var(--x-wide); margin-inline: auto;
  padding: clamp(88px, 11vw, 144px) clamp(20px, 5vw, 40px);
}
.nh-band { background: #f5f5f7; }
.nh-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.nh-split--top { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
@media (max-width: 860px) { .nh-split, .nh-split--top { grid-template-columns: minmax(0, 1fr); gap: 48px; } }

/* The close-date chips and the answer they change */
.nh-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.nh-chip {
  box-sizing: border-box; display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; margin: 0;
  border-radius: 999px; border: 1px solid rgb(0 0 0 / 0.1); background: #ffffff; color: #1d1d1f; cursor: pointer;
  font: 500 16px/1.3 var(--sans); letter-spacing: -0.01em; text-align: left;
  transition: background-color 200ms var(--x-ease), border-color 200ms var(--x-ease), color 200ms var(--x-ease);
}
.nh-chip:hover { border-color: rgb(0 0 0 / 0.24); }
.nh-chip.is-on { background: #000000; border-color: #000000; color: #ffffff; }
.nh-chip:focus-visible { outline: 2px solid #000000; outline-offset: 2px; }
.nh-answer {
  box-sizing: border-box; max-width: 760px; min-height: 132px; margin-top: 28px;
  padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: #ffffff; box-shadow: var(--x-shadow);
}
.nh-answer__lead { font: 600 clamp(20px, 2.2vw, 24px)/1.3 var(--sans); letter-spacing: -0.02em; color: #000000; }
.nh-answer__body { margin-top: 12px; font: 400 17px/1.65 var(--sans); color: var(--x-body-ink); }
.nh-answer__idle { font: 400 17px/1.65 var(--sans); color: #6e6e73; }
@media (max-width: 640px) { .nh-answer { border-radius: 24px; } .nh-chip { width: 100%; } }

/* What you get: a hairline spec list, name beside what it means */
.nh-spec { margin: 56px 0 0; padding: 0; border-top: 1px solid rgb(0 0 0 / 0.1); }
.nh-spec__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 12px clamp(24px, 5vw, 64px);
  padding: 28px 0; border-bottom: 1px solid rgb(0 0 0 / 0.1);
}
.nh-spec dt { margin: 0; font: 700 clamp(20px, 2.2vw, 24px)/1.2 var(--sans); letter-spacing: -0.025em; color: #000000; }
.nh-spec dd { margin: 0; font: 400 17px/1.65 var(--sans); color: var(--x-body-ink); }
@media (max-width: 760px) { .nh-spec__row { grid-template-columns: minmax(0, 1fr); padding: 24px 0; } }

/* Where the money is: dark band, named figures */
.nh-dark { background: #121314; color: #c7c7cc; }
.nh-dark .fb-kicker { color: #a1a1a6; }
.nh-dark .fb-h2 { color: #ffffff; }
.nh-dark__p { margin-top: 20px; font: 400 18px/1.65 var(--sans); color: rgb(255 255 255 / 0.72); }
.nh-dark__p + .nh-dark__p { margin-top: 16px; }
.nh-figs {
  box-sizing: border-box; min-width: 0; padding: 8px clamp(20px, 3vw, 32px) 24px;
  border-radius: 28px; background: rgb(255 255 255 / 0.04); border: 1px solid rgb(255 255 255 / 0.1);
}
.nh-fig { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 20px 0; border-bottom: 1px solid rgb(255 255 255 / 0.1); }
.nh-fig.is-last { border-bottom: 0; }
.nh-fig__k { flex: 1; min-width: 0; }
.nh-fig__name { display: block; font: 500 16px/1.4 var(--sans); letter-spacing: -0.01em; color: rgb(255 255 255 / 0.9); }
.nh-fig__sub { display: block; margin-top: 4px; font: 400 13px/1.45 var(--sans); color: #a1a1a6; }
.nh-fig__v { font: 700 28px/1.1 var(--sans); letter-spacing: -0.03em; color: #ffffff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nh-fig__u { font: 500 14px/1.1 var(--sans); letter-spacing: 0; color: #a1a1a6; }
.nh-figs__note { margin-top: 20px; font: 400 13px/1.6 var(--sans); color: #8e8e93; }
@media (max-width: 520px) { .nh-fig { flex-direction: column; gap: 8px; } }

/* How it works: numbered steps down a hairline */
.nh-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgb(0 0 0 / 0.1); }
.nh-steps li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 24px; margin: 0; padding: 32px 0; border-bottom: 1px solid rgb(0 0 0 / 0.1); }
.nh-step__n { font: 700 clamp(36px, 4.4vw, 56px)/1 var(--sans); letter-spacing: -0.04em; color: #c7c7cc; font-variant-numeric: tabular-nums; }
.nh-steps h3 { font: 700 clamp(20px, 2.2vw, 24px)/1.2 var(--sans); letter-spacing: -0.025em; color: #000000; }
.nh-steps p { margin-top: 10px; font: 400 17px/1.65 var(--sans); color: var(--x-body-ink); }
@media (max-width: 640px) { .nh-steps li { grid-template-columns: 56px minmax(0, 1fr); gap: 0 16px; padding: 28px 0; } }

/* FAQ */
.nh-faq { width: 100%; max-width: 820px; margin-inline: auto; }
.nh-faq__list { margin-top: 40px; border-top: 1px solid rgb(0 0 0 / 0.1); }
.nh-faq__item { padding: 28px 0; border-bottom: 1px solid rgb(0 0 0 / 0.1); }
.nh-faq__item h3 { font: 600 clamp(19px, 2vw, 21px)/1.3 var(--sans); letter-spacing: -0.02em; color: #000000; }
.nh-faq__item p { margin-top: 10px; font: 400 17px/1.65 var(--sans); color: var(--x-body-ink); }

/* The closing CTA's headline is a sentence, so it runs wider and smaller than the kit's two-word default. */
#nh-cta-h { max-width: 18ch; font-size: clamp(36px, 5.2vw, 68px); }

@media (prefers-reduced-motion: reduce) { .fb-btn, .nh-chip { transition: none; } }