@charset "UTF-8";
/* ────────────────────────────────────────────────────────────────
   NLGS — leadgeneration.noahlot.com

   Two colours and no more: white ground, black type, one grey metal
   blue that does every job an accent has to do (rules, the record
   block, the button, the one mark of emphasis). Tints of that blue
   are still that blue; nothing else is introduced.

   Deliberately plain. The reader is a legal team, so the page is
   built to look like a document they would already trust: hairline
   rules instead of shadows, one type superfamily, and motion slow
   enough that nobody notices it happened.
   ──────────────────────────────────────────────────────────────── */

:root {
  --white:  #FFFFFF;
  --black:  #000000;

  --steel:      #46586B;                 /* the one colour */
  --steel-deep: #354454;                 /* pressed / hover, same hue */
  --steel-05:   rgba(70, 88, 107, .045); /* record block ground */
  --steel-12:   rgba(70, 88, 107, .17);  /* hairlines */
  --steel-30:   rgba(70, 88, 107, .42);  /* stronger divisions */

  --grey:   #3E464E;   /* black at reading weight, 9.6:1 */
  --grey-2: #5C6570;   /* meta, 5.9:1 */

  --wrap: 1080px;
  --pad:  clamp(20px, 5vw, 56px);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: 18px;
  line-height: 1.62;
  overflow-x: clip;
}

a { color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--steel); color: var(--white);
  padding: 12px 18px; z-index: 90;
  font-family: "IBM Plex Mono", monospace; font-size: 14px;
}
.skip:focus { left: 0; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 3px;
}

/* The one mark of emphasis on the site: a rule under the phrase, in
   the accent, drawn once on load. No fill, no highlighter. */
.hl { font-style: normal; position: relative; }
.hl > span { position: relative; }
.hl::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.12em;
  height: 3px;
  background: var(--steel);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: rule 1.1s cubic-bezier(.32,.72,.24,1) .5s both;
}
@keyframes rule { to { transform: scaleX(1); } }

/* ── bar ────────────────────────────────────────────────────── */
.bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding: 20px var(--pad);
  border-bottom: 1px solid var(--steel-12);
}
.mark { text-decoration: none; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.mark-n {
  font-family: "IBM Plex Sans", sans-serif; font-weight: 600;
  font-size: 20px; letter-spacing: .10em;
}
/* The full name reads as the expansion of the mark, so it sits beside it in
   one left lockup rather than off on its own at the far end of the bar. */
.mark-x {
  font-family: "IBM Plex Mono", monospace; font-size: 14px;
  letter-spacing: .04em; color: var(--grey-2);
}

/* ── bar nav ────────────────────────────────────────────────────
   The two projects, in the bar. With only two of them this is the whole
   navigation; the page you are on stays present but stops offering
   itself as somewhere to go. */
.nav { display: flex; flex-wrap: wrap; gap: 10px 34px; }
.nav a {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px; letter-spacing: .04em;
  text-decoration: none;
  color: var(--grey-2);
  transition: color .25s ease;
}
.nav a:hover { color: var(--steel); }
/* The page you are on is still announced to a screen reader, it just stops
   behaving like somewhere to go. */
.nav a[aria-current] { cursor: default; }
.nav a[aria-current]:hover { color: var(--grey-2); }

/* Whichever section leads the page carries no rule of its own: the bar
   already draws one directly above it, and two hairlines a pixel apart
   read as a mistake. Written against :first-child rather than a class so
   reordering the sections cannot leave it stranded on the wrong one. */
main > section:first-child {
  border-top: 0;
  padding-top: clamp(44px, 8vw, 88px);
  /* Centring the prose against a taller card is right mid-page but wrong at
     the very top, where it opens the page with an empty upper left corner. */
  align-items: start;
}

/* ── hero ───────────────────────────────────────────────────── */
.hero {
  border-top: 1px solid var(--steel-12);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
  padding: clamp(44px, 8vw, 88px) var(--pad) clamp(48px, 7vw, 80px);
  max-width: var(--wrap);
  margin: 0 auto;
}

h1 {
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(29px, 3.7vw, 43px);
  line-height: 1.17;
  letter-spacing: -.016em;
  text-wrap: balance;
}

.lede {
  margin: 24px 0 0;
  max-width: 32em;
  color: var(--grey);
  font-size: 18px;
}

.hero-do { margin: 30px 0 0; }

.btn {
  display: inline-block;
  background: var(--steel);
  color: var(--white);
  text-decoration: none;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .01em;
  padding: 14px 26px;
  border: 1px solid var(--steel);
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease;
}
.btn:hover  { background: var(--steel-deep); border-color: var(--steel-deep); }
.btn:active { background: var(--steel-deep); }
.btn-wide   { width: 100%; text-align: center; }

/* ── the record block ───────────────────────────────────────── */
.sheet {
  margin: 0;
  background: var(--steel-05);
  border: 1px solid var(--steel-30);
}
.sheet-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--steel-30);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500;
  color: var(--steel);
}
.sheet-count { color: var(--grey-2); letter-spacing: .08em; }

.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid;
  grid-template-columns: 6.5em 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 13px 20px;
  border-bottom: 1px solid var(--steel-12);
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  animation: rowin .8s ease both;
  animation-delay: calc(.25s + var(--i) * .13s);
}
.row:last-child { border-bottom: 0; }
@keyframes rowin {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.row-k { color: var(--black); }
.row-d { color: var(--grey-2); }
.row-v { color: var(--grey-2); text-align: right; }

/* A match is marked by weight and a rule, not by colour fill. */
.is-hit { background: var(--steel-05); }
.is-hit .row-k { font-weight: 600; }
.is-hit .row-v {
  color: var(--steel);
  font-weight: 600;
  border-bottom: 2px solid var(--steel);
  padding-bottom: 1px;
}

.sheet-foot {
  margin: 0;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--steel-30);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  line-height: 1.6;
  color: var(--grey-2);
}

/* ── exhibits ───────────────────────────────────────────────── */
.exhibits {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--pad);
  border-top: 1px solid var(--steel-12);
}
.ex {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(26px, 4vw, 48px);
}
.ex > li { position: relative; padding-top: 22px; border-top: 1px solid var(--steel-30); }
/* Sits astride the rule, with the ground painted behind it so the rule
   appears to break for the number rather than run under it. */
.ex-n {
  position: absolute; top: -10px; left: 0;
  background: var(--white);
  padding-right: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px; letter-spacing: .1em;
  color: var(--grey-2);
}
.ex h2 {
  margin: 0 0 8px;
  font-family: "IBM Plex Sans", sans-serif; font-weight: 600;
  font-size: 19px; letter-spacing: -.006em;
}
.ex p { margin: 0; color: var(--grey); font-size: 16.5px; }

/* ── why ────────────────────────────────────────────────────── */
.why {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--pad);
}
.why-p {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.45;
  letter-spacing: -.004em;
  text-wrap: pretty;
}
.why-p em { font-style: italic; }
.why-sig {
  margin: 20px 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px; letter-spacing: .04em;
  color: var(--grey-2);
}

/* ── join ───────────────────────────────────────────────────── */
.join {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--pad);
  border-top: 1px solid var(--steel-12);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 370px);
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}
.join-say h1 {
  margin: 0 0 16px;
  font-family: "IBM Plex Sans", sans-serif; font-weight: 600;
  font-size: clamp(24px, 2.8vw, 32px);
  letter-spacing: -.012em;
  line-height: 1.2;
}
.join-say p { margin: 0; color: var(--grey); max-width: 34em; }
.join-say p a {
  color: var(--black);
  text-decoration-color: var(--steel-30);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .25s ease;
}
.join-say p a:hover { text-decoration-color: var(--steel); }

.card {
  background: var(--white);
  border: 1px solid var(--steel-30);
  padding: clamp(24px, 3vw, 32px);
}
.card-price {
  margin: 0 0 18px;
  font-family: "IBM Plex Sans", sans-serif; font-weight: 600;
  font-size: 46px; line-height: 1; letter-spacing: -.03em;
  color: var(--black);
}
.card-price .cur { font-size: .55em; vertical-align: .42em; margin-right: .04em; }
.card-price .per {
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px; font-weight: 400; letter-spacing: .06em;
  margin-left: 9px;
  color: var(--grey-2);
}
.card-facts {
  list-style: none; margin: 0 0 22px; padding: 0;
  border-top: 1px solid var(--steel-12);
}
.card-facts li {
  padding: 11px 0 11px 20px;
  border-bottom: 1px solid var(--steel-12);
  font-size: 15.5px; line-height: 1.45;
  color: var(--grey);
  position: relative;
}
.card-facts li::before {
  content: "";
  position: absolute; left: 0; top: 18px;
  width: 9px; height: 1px; background: var(--steel);
}
.card-do { margin: 0; }

/* ── the amount chooser ─────────────────────────────────────────
   Native radios, hidden but still focusable and still what posts, with
   the visible chip drawn by the sibling span. Nothing here is required
   for the form to work: the preset marked `checked` in the markup is
   what a scripting-free browser sends. */
.amounts {
  border: 0;
  margin: 16px 0 0;
  padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px;
}
.amounts label { position: relative; cursor: pointer; }
.amounts label input {
  position: absolute; inset: 0;
  opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.amounts label span {
  display: block;
  padding: 7px 13px;
  border: 1px solid var(--steel-30);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px; letter-spacing: .04em;
  color: var(--steel);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.amounts label:hover span { border-color: var(--steel); }
.amounts label input:checked + span {
  background: var(--steel); border-color: var(--steel); color: var(--white);
}
.amounts label input:focus-visible + span {
  outline: 2px solid var(--steel); outline-offset: 2px;
}

/* [hidden] is only `display: none` at UA-stylesheet weight, so any display
   declared here beats it and the field shows through. Restate it. */
.amount-other[hidden] { display: none; }
.amount-other {
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid var(--steel-30);
  padding: 0 11px;
}
.amount-other:focus-within { border-color: var(--steel); }
.amount-cur {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px; color: var(--grey-2);
}
.amount-other input {
  width: 4.2em;
  border: 0; background: transparent;
  padding: 7px 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px; color: var(--black);
}
.amount-other input:focus { outline: none; }

/* Present to a screen reader, absent to everyone else. The chooser needs a
   group label; the page does not need a caption above four obvious chips. */
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── limits ─────────────────────────────────────────────────── */
.limits {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--pad);
  border-top: 1px solid var(--steel-12);
}
.lim {
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  max-width: 860px;
  display: grid;
  gap: clamp(20px, 3vw, 36px);
}
.lim > div { border-left: 1px solid var(--steel-30); padding-left: 18px; }
.lim dt {
  font-family: "IBM Plex Sans", sans-serif; font-weight: 600;
  font-size: 16.5px;
  margin-bottom: 3px;
}
.lim dd { margin: 0; color: var(--grey); font-size: 16px; }

/* ── foot ───────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--steel-12);
  padding: clamp(30px, 4vw, 48px) var(--pad) clamp(38px, 5vw, 56px);
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 30px;
}
.foot-mark {
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif; font-weight: 600;
  font-size: 17px; letter-spacing: .10em;
}
.foot-l {
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px; letter-spacing: .03em;
  color: var(--grey-2);
}
.foot-l a { color: var(--steel); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* The way home from every page, including the ones on other subdomains that
   carry no bar of their own. */
.foot-mark a {
  color: inherit;
  text-decoration: none;
  transition: color .25s ease;
}
.foot-mark a:hover { color: var(--steel); }

/* ── status block ───────────────────────────────────────────────
   The wide single measure the page used to carry, at reading size rather
   than pull-quote size: this is a paragraph to be read through, not a
   line to be struck by. */
.status {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--pad);
  border-top: 1px solid var(--steel-12);
}
.status-p {
  margin: 0;
  font-size: 18.5px;
  line-height: 1.66;
  color: var(--grey);
}
.status-p + .status-p { margin-top: 18px; }

/* ── landing ────────────────────────────────────────────────── */
.intro {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(44px, 8vw, 88px) var(--pad) clamp(26px, 3.5vw, 40px);
}
.picks {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(44px, 7vw, 80px);
}
.pick {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(18px, 2.5vw, 28px);
}
.pick > li { display: flex; }
.pick a {
  display: flex; flex-direction: column;
  width: 100%;
  text-decoration: none;
  border: 1px solid var(--steel-30);
  padding: clamp(22px, 3vw, 30px);
  transition: border-color .25s ease, background-color .25s ease;
}
.pick a:hover { border-color: var(--steel); background: var(--steel-05); }
.pick-n {
  font-family: "IBM Plex Mono", monospace;
  font-size: 17px; letter-spacing: .08em; color: var(--grey-2);
}
.pick h2 {
  margin: 12px 0 8px;
  font-family: "IBM Plex Sans", sans-serif; font-weight: 600;
  font-size: 21px; letter-spacing: -.012em;
}
.pick p { margin: 0 0 22px; color: var(--grey); font-size: 16.5px; }
.pick-go {
  margin-top: auto;
  align-self: start;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px; letter-spacing: .06em;
  color: var(--steel);
  border-bottom: 1px solid var(--steel-30);
  padding-bottom: 2px;
  transition: border-color .25s ease;
}
.pick a:hover .pick-go { border-color: var(--steel); }

/* ── thanks page ────────────────────────────────────────────── */
.done {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(52px, 10vw, 112px) var(--pad) clamp(44px, 7vw, 88px);
}
.done h1 { font-size: clamp(30px, 4.4vw, 44px); }
.done .lede { margin-top: 22px; }
.done-next {
  list-style: none; margin: 34px 0 0; padding: 0;
  border-top: 1px solid var(--steel-30);
}
.done-next li {
  padding: 16px 0;
  border-bottom: 1px solid var(--steel-12);
  display: grid;
  grid-template-columns: 3.4em 1fr;
  gap: 14px;
  align-items: baseline;
  color: var(--grey);
  font-size: 16.5px;
}
.done-next b {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px; font-weight: 500; letter-spacing: .1em;
  color: var(--steel);
}
.done-back { margin-top: 34px; }

/* ── narrow ─────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .hero, .join { grid-template-columns: minmax(0, 1fr); }
  .join .card { max-width: 440px; }
}
@media (max-width: 520px) {
  body { font-size: 17px; }
  .row { grid-template-columns: 5.6em 1fr; font-size: 12.5px; padding: 12px 15px; }
  .row-v { grid-column: 1 / -1; text-align: left; justify-self: start; }
  .is-hit .row-v { display: inline-block; }
  .sheet-head, .sheet-foot { padding-left: 15px; padding-right: 15px; }
  .card-price { font-size: 40px; }
}

/* ── reduced motion ─────────────────────────────────────────────
   Killing animations alone would leave the rule at scaleX(0) and
   every record row at opacity 0, so the resting state is restored
   explicitly rather than assumed. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .hl::after { transform: scaleX(1); }
  .row { opacity: 1; }
}