/* nohm.app/pro (the supply-house flyer's QR code): a short photo, the
   facts as a tight list, the form, and the founder's number on black.
   Links after /for/for.css, /book/book.css and /join/join.css. */

/* Read on a phone in a supply house: the form is one short scroll away. */
.hero--short { height: min(62svh, 620px); min-height: 440px; }
.hero--short img { object-position: 50% 35%; }

.facts { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; display: grid; gap: 10px; }
.facts li { background: #f4f4f4; border-radius: 12px; padding: 18px 20px; }
.facts b {
  display: block; margin: 0 0 4px; font-size: clamp(20px, 2.2vw, 24px); line-height: 1.2;
  font-family: var(--font-display); font-weight: var(--weight-heading); letter-spacing: var(--tracking-headline);
}
.facts span { display: block; font-size: 16px; line-height: 1.5; color: #393c41; }
@media (min-width: 760px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .facts li { padding: 24px 26px; }
}

/* What we built, why, who we want: three short cards on black. */
.story { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.story li { background: #0d1017; color: #eceef2; border-radius: 12px; padding: 22px 22px 20px; }
.story b { display: block; margin: 0 0 8px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #acdd7e; font-weight: var(--weight-ui-strong); }
.story p { margin: 0; font-size: 17px; line-height: 1.5; }
.story .sig { display: block; margin-top: 8px; font-size: 14px; color: #a1a1a6; }
@media (min-width: 760px) {
  .story { grid-template-columns: repeat(3, 1fr); }
}

/* The form: book.css's fields, in a card. */
.pro-form.b-main { min-height: 0; padding: 24px 20px 28px; border: 1px solid #e3e4e6; border-radius: 12px; }
.pro-form .b-btn { margin-top: 4px; }
@media (max-width: 420px) {
  .pro-form .b-two { grid-template-columns: 1fr; }
}

.final a:not(.btn):not(.textlink) { color: #fff; font-weight: var(--weight-ui-strong); text-underline-offset: 3px; }
.final p { margin-bottom: 6px; }
.final .who { margin: 0 auto 22px; font-size: 15px; color: #a1a1a6; }
.final .textlink { color: #fff; }
.final a[href^="tel:"], .final a[href^="mailto:"] { white-space: nowrap; }