/* ============================================================================
   Expert Scale — the two things every corporate page ends with
   ----------------------------------------------------------------------------
   The click-to-load protégé card and the signup form. Extracted from
   corporate.css on 2026-08-11, when /prospect/, /peo/ and /manufacturing/
   gained both — until then they had neither and punted visitors off-site to
   apexreplicant.ai/for-companies, which is a lead handed to a different funnel.

   Those three pages carry their own inline copy of the base design system and
   deliberately do NOT load corporate.css, so these rules had to come out of it
   to be shared. They depend only on the :root tokens (--navy, --gold, --radius
   …), which every corporate surface defines.

   Load order on the offer pages: corporate.css, then this. On the vertical
   pages: their inline <style>, then this.

   Markup contract (see /js/corporate-page.js):
     [data-protege-embed]  the container, with data-frame and data-page
     [data-protege-card]   the resting card, replaced by the iframe on click
     [data-protege-load]   the button
     form[data-corporate-form]  with data-offer and data-source-page
     [data-form-status] [data-form-submit] [data-form-live-note]
   ========================================================================== */

/* Ghost button for a light background — the offer pages' second CTA sits in
   the page body (e.g. inside .form-actions) rather than on the navy header. */
.btn-ghost-dark {
  background: transparent;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.8rem 1.8rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: border-color 0.18s, color 0.18s;
}
/* --gold-text not --gold: gold text on the light page body measures 3.25:1,
   under the 4.5:1 AA floor; the token measures 6.29:1. Border keeps brand
   gold (non-text, 3:1 floor, passes). (F3.6 2026-08-12) */
.btn-ghost-dark:hover { border-color: var(--gold); color: var(--gold-text); }

/* ── Signup form ── */
.form-wrap {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.75rem;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); }
.field .hint { font-size: 0.78rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 0.95rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.7rem 0.8rem; width: 100%;
  min-height: 44px; transition: border-color 0.15s, background 0.15s;
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); background: var(--white);
}
.form-actions { margin-top: 1.4rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form-note { margin-top: 1rem; font-size: 0.82rem; color: var(--muted); }
.form-status {
  margin-top: 1rem; padding: 0.9rem 1.1rem; border-radius: var(--radius);
  font-size: 0.92rem; display: none;
}
.form-status.ok { display: block; background: #E8F5EE; border-left: 4px solid var(--green); color: #1d5c3b; }
.form-status.err { display: block; background: var(--gold-pale); border-left: 4px solid var(--gold); color: #6b4c00; }

/* The running count while the protégé fills the form in. Hidden until the
   first capture lands — an empty "0 details so far" on a page nobody has
   spoken to is noise, and worse, it implies something is broken. */
.form-live-note {
  margin-top: 1rem; padding: 0.7rem 1rem; border-radius: var(--radius);
  background: var(--gold-pale); border-left: 4px solid var(--gold);
  font-size: 0.86rem; font-weight: 600; color: #6b4c00;
}
.form-live-note[hidden] { display: none; }

@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

/* ── Click-to-load protégé embed ──────────────────────────────────────────
   The iframe is NOT in the markup. It is injected on click, so no session, no
   SDK and no Vapi cost is incurred by a scraper, a bounce or a link-preview
   crawler. The resting state below is a still gold halo — which is also what
   the live mark looks like when nobody is speaking, so the card teaches the
   interface before anyone clicks it. */
.protege-embed {
  background: var(--navy);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 1.5rem;
}
.protege-card {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 1.75rem;
  align-items: center;
  padding: 2rem 1.75rem;
}
.protege-halo { width: 132px; height: 132px; display: block; }
.protege-card-body h3 {
  color: #F4F4F7; font-size: 1.15rem; font-weight: 800;
  letter-spacing: -0.01em; margin-bottom: 0.5rem;
}
.protege-card-body p {
  color: rgba(255,255,255,0.72); font-size: 0.93rem; line-height: 1.6;
}
.protege-card-body p + p { margin-top: 0.6rem; }
.protege-card-body strong { color: #F4F4F7; font-weight: 600; }
.protege-actions {
  margin-top: 1.1rem; display: flex; align-items: center;
  gap: 1rem; flex-wrap: wrap;
}
.protege-fine {
  /* 0.55 not 0.45: 0.45 measured 4.15:1 on navy — under the 4.5:1 AA floor
     for 12.5px text. 0.55 measures 5.42:1. (UX sweep 2026-08-12) */
  font-size: 0.78rem; color: rgba(255,255,255,0.55);
}
.protege-frame {
  width: 100%; height: 640px; border: 0; display: block; background: var(--navy);
}
.protege-loading {
  padding: 3rem 1.75rem; text-align: center;
  color: rgba(255,255,255,0.55); font-size: 0.9rem;
}
@media (max-width: 720px) {
  .protege-card { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.25rem; }
  .protege-actions { justify-content: center; }
  .protege-frame { height: 720px; }
}