/* ============================================================
   Honkz NYC — the Pro page (/pro), hkz-32.

   A painted door: it describes a business product none of which
   is built, and its only action is a demo request. Inherits the
   tokens, header and footer from styles.css; this file is only
   what the Pro page adds.

   Mobile first, like book.css — one media query at the bottom
   widens it. Paid traffic is heavily phone, and a business
   reader on a phone is still a business reader.
   ============================================================ */

.pro-body { background: var(--bg); }

.pro-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 8px clamp(16px, 5vw, 28px) 56px;
}

.pro-tag {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--brand);
  background: #fff;
  border: 2px solid #EDE7FF;
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}

/* ---------------- intro ---------------- */
.pro-intro h1 { font-size: clamp(1.95rem, 7vw, 3rem); margin-top: 14px; }
.pro-sub {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 1.05rem;
  max-width: 34em;
}


.pro-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 15px 28px;
  min-height: 52px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, transform .12s ease;
}
.pro-cta:hover { background: var(--brand-dk); transform: translateY(-1px); }
.pro-cta-fine { margin-top: 10px; font-size: 0.88rem; color: var(--ink-soft); }

/* ---------------- blocks ---------------- */
.pro-block { margin-top: clamp(44px, 8vw, 72px); }
.pro-block > h2 { font-size: clamp(1.5rem, 4.4vw, 2.1rem); }
.pro-block-note {
  margin-top: 12px;
  color: var(--ink-soft);
  max-width: 40em;
  font-size: 1rem;
}
.pro-block-soft {
  background: #F4F0FB;
  border-radius: var(--radius);
  padding: clamp(24px, 5vw, 36px);
}

/* ---------------- the claim cards ---------------- */
.pro-cards {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.pro-card {
  background: var(--surface);
  border: 1px solid #F0EBFA;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 20px;
}
.pro-card-head { display: flex; align-items: center; gap: 12px; }
.pro-card-icon {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--brand);
  font-size: 1.25rem;
  font-weight: 800;
}
.pro-card h3 { font-size: 1.08rem; }
.pro-card > p { margin-top: 12px; color: var(--ink-soft); font-size: 0.97rem; }

/* The status line is the honest half of every card, so it is
   visually attached to the claim rather than tucked in a
   footnote. The dot colour is the only place status is encoded
   by colour alone, and the words repeat it. */

/* ---------------- who ---------------- */
.pro-who {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.pro-who-item h3 { font-size: 1.02rem; }
.pro-who-item p { margin-top: 8px; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------------- what exists ---------------- */
  background: var(--surface);
  border: 1px solid #F0EBFA;
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  color: var(--ink-soft);
  font-size: 0.97rem;
}

/* ---------------- the demo form ---------------- */
.pro-demo {
  background: var(--surface);
  border: 1px solid #F0EBFA;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(24px, 5vw, 36px);
  scroll-margin-top: 80px;
}
.pro-form { margin-top: 22px; }
.pro-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
.pro-field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.pro-row .pro-field { margin-top: 0; }
.pro-field label { font-weight: 800; font-size: 0.92rem; }
.pro-opt { font-weight: 600; color: var(--ink-soft); }
.pro-field input,
.pro-field textarea {
  font: inherit;
  font-size: 1rem; /* 16px: anything smaller zooms the page on iOS focus */
  color: var(--ink);
  background: #FBF9FF;
  border: 2px solid #E9E1FA;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  width: 100%;
  resize: vertical;
}
.pro-field input:focus,
.pro-field textarea:focus { outline: none; border-color: var(--brand); }

.pro-wants {
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 2px solid #E9E1FA;
  border-radius: var(--radius-sm);
  display: grid;
  gap: 10px;
}
.pro-wants legend { font-weight: 800; font-size: 0.92rem; padding: 0 6px; }
.pro-wants label {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.97rem; font-weight: 600;
}
.pro-wants input { width: 18px; height: 18px; accent-color: var(--brand); }

.pro-submit {
  margin-top: 20px;
  width: 100%;
  min-height: 54px;
  padding: 16px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease;
}
.pro-submit:hover:not(:disabled) { background: var(--brand-dk); }
.pro-submit:disabled { opacity: .6; cursor: default; }

.pro-fine { margin-top: 12px; font-size: 0.86rem; color: var(--ink-soft); }
.pro-error {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: #FFF0F0;
  border: 2px solid #FFD3D3;
  font-size: 0.93rem;
  font-weight: 600;
}
.pro-error a { color: var(--brand); }

.pro-done { margin-top: 22px; }
.pro-done h3 { font-size: 1.25rem; }
.pro-done p { margin-top: 12px; color: var(--ink-soft); }
.pro-done-meanwhile a { color: var(--brand); font-weight: 700; }

/* ---------------- wider than a phone ---------------- */
@media (min-width: 720px) {
  .pro-cards { grid-template-columns: repeat(3, 1fr); }
  .pro-who { grid-template-columns: repeat(2, 1fr); gap: 24px 32px; }
  .pro-row { grid-template-columns: 1fr 1fr; }
  .pro-wants { grid-template-columns: repeat(2, 1fr); }
  .pro-submit { width: auto; min-width: 260px; }
}

/* Bullets inside a Pro card: used by "What every walk records", where a short
   list reads faster than a sentence (hkz-34 follow-up, 2026-08-19). */
.pro-card-list {
  margin: 12px 0 0 0;
  padding-left: 18px;
  font-size: 0.95rem;
  line-height: 1.6;
}
.pro-card-list li + li { margin-top: 4px; }