/* ============================================================
   JIIVE — PARTNERS (v3 · gold period)
   Sections, in order: the opening statement (head on 1–9), then
   one enquiry for every kind of partner: a 5 / 7 split, the copy
   (with the partnerships email and "Book a call") beside the form
   card. Copy: CONTENT.md 4.4.
   Header, footer, buttons and the rail come from css/home.css so
   they match the homepage exactly; the grid, field label, ledger
   head, ghost pill and reveal come from css/page.css. Every value
   is a token from css/tokens.css.
   ============================================================ */

main:focus { outline: none; }

/* ---------- Opening statement ---------- */
.pt-hero { padding-top: calc(var(--size-header) + var(--space-section-tight)); }
.pt-hero .grid { align-items: end; }
.pt-head { grid-column: 1 / span 9; }
.pt-head h1 {
  margin-top: var(--space-md);
  font-size: var(--text-page-title);
  line-height: var(--leading-display);
  max-width: var(--measure-head);
}
.pt-lead {
  margin: var(--space-lg) 0 0;
  max-width: var(--measure);
  font-size: var(--text-lead);
  line-height: var(--leading-copy);
  color: var(--color-text-secondary);
}

/* ---------- The enquiry: copy on 1–5, the form card on 6–12 ---------- */
.pt-track {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-split);
  align-items: start;
}

/* the copy stays beside the form while the form scrolls past it */
.pt-copy {
  position: sticky;
  top: calc(var(--size-header) + var(--space-lg));   /* below the fixed header */
}
.pt-copy .sec-head { margin-top: var(--space-lg); }
.pt-track-lede {
  margin: var(--space-lg) 0 0;
  max-width: var(--measure);
  font-size: var(--text-intro);
  line-height: var(--leading-copy);
  color: var(--color-emerald-deep);
}
.pt-book { margin-top: var(--space-xl); }

/* ---------- Enquiry form card ---------- */
.pf-card {
  padding: var(--space-card-roomy);
  border: var(--size-hairline) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.pf-title {
  font-size: var(--text-title);
  line-height: var(--leading-head);
}
.pf { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
.pf-hp {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.pf-row { display: grid; gap: var(--space-xs); align-content: start; }
.pf-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) var(--grid-gutter);
}
.pf-label {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-field-label);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.pf-req { color: var(--color-vital-green); }
.pf-optional { letter-spacing: var(--tracking-meta); }

.pf-input {
  width: 100%;
  min-height: var(--size-tap);
  margin: 0;
  padding: var(--space-input-y) var(--space-input-x);
  border: var(--size-hairline) solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-snug);
  color: var(--color-emerald-deep);
  transition: border-color var(--dur-120) var(--ease-out);
}
.pf-input::placeholder { color: var(--color-text-secondary); opacity: 1; }
/* focus: a vital-green border and a soft ring in place of the outline */
.pf-input:focus {
  outline: none;
  border-color: var(--color-vital-green);
  border-radius: var(--radius-input);
  box-shadow: 0 0 0 var(--size-rule-accent) var(--color-focus-ring);
}
.pf-input.is-invalid {
  border-color: var(--color-flag-act-text);
  box-shadow: 0 0 0 var(--size-rule-accent) var(--color-error-ring);
}
.pf-textarea { resize: vertical; }

/* selects: the native arrow is replaced by the set's chevron */
.pf-select { position: relative; }
.pf-select .pf-input {
  appearance: none;
  padding-right: calc(2 * var(--space-input-x) + var(--size-icon-md));
  cursor: pointer;
}
.pf-select .pf-input:invalid { color: var(--color-text-secondary); }
.pf-chevron {
  position: absolute;
  top: 50%;
  right: var(--space-input-x);
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  margin-top: calc(var(--size-icon-md) / -2);
  color: var(--color-text-secondary);
  pointer-events: none;
}

.pf-checks { display: grid; gap: var(--space-xs); }
.pf-check {
  display: grid;
  grid-template-columns: var(--size-icon-md) minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  min-height: var(--size-tap);
  padding: var(--space-sm) 0;
  font-size: var(--text-caption);
  line-height: var(--leading-copy);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.pf-check input {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  margin: 0;
  margin-top: calc((1lh - var(--size-icon-md)) / 2);
  accent-color: var(--color-vital-green);
  cursor: pointer;
}
.pf-check span:first-of-type { max-width: var(--measure); }
.pf-check a {
  color: var(--color-vital-green);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pf-error {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--leading-copy);
  color: var(--color-flag-act-text);
}
.pf-error[hidden] { display: none; }

.pf-submit { justify-self: start; }
.pf-submit:disabled { cursor: progress; }

/* success and error banners reuse the flag ok and act pairs */
.pf-status {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-input);
  font-size: var(--text-caption);
  line-height: var(--leading-copy);
}
.pf-status[hidden] { display: none; }
.pf-status.is-success { background: var(--color-flag-ok-bg); color: var(--color-flag-ok-text); }
.pf-status.is-error { background: var(--color-flag-act-bg); color: var(--color-flag-act-text); }

@media (hover: hover) and (pointer: fine) {
  .pf-input:hover:not(:focus):not(.is-invalid) { border-color: var(--color-text-secondary); }
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .pt-head { grid-column: 1 / -1; }
  .pt-track { grid-template-columns: minmax(0, 1fr); gap: var(--space-block); }
  .pt-copy { position: static; }
}
@media (max-width: 480px) {
  .pf-grid-2 { grid-template-columns: minmax(0, 1fr); }
}