/* ===========================================================================
   JP2BA — theme
   Rules authored here, not present in the approved mock. Kept separate from
   base.css and page-home.css so design and invention stay tellable apart.
   =========================================================================== */

/* The assessment form's fine print sat inside the <form> in the mock, so it
   inherited the form's 16px rhythm. With the form now rendered by the plugin,
   the note is a sibling of it and carries that spacing itself.

   Qualified with .card deliberately: page-home.css is enqueued after this file
   and sets `.hero-11 { margin: 0 }`, so at equal specificity the extracted
   sheet would win. Page-specific sheets should out-rank this one in general —
   the extra class is what keeps that true while still fixing the gap. */
.card .hero-11 { margin-top: var(--space-4); }

/* --- Team Shop button ------------------------------------------------------
   Client-requested, 7 Oct 2026: white, bold black text, upper right beside the
   phone. Not in the approved design, so it lives here rather than in base.css.

   The black is the brand's charcoal, not #000, and the hover is the brand's
   soft white — the button is new, the palette is not. Weight comes from .btn,
   whose --type-button is already 700.

   Worth watching: on a charcoal header a white button out-contrasts the copper
   one beside it, and Appendix H gives copper the job of signalling action. If
   the phone stops getting taps, this is the first thing to look at.
   -------------------------------------------------------------------------- */
.btn-shop {
  background: var(--jp2ba-white);
  color: var(--jp2ba-charcoal);
  border-color: var(--jp2ba-white);
}
.btn-shop:hover {
  background: var(--jp2ba-soft-white);
  border-color: var(--jp2ba-soft-white);
  color: var(--jp2ba-charcoal);
}

/* --- Header CTA stack ------------------------------------------------------
   The header row has 1152px, always: --container-max caps it, so a wider
   screen never helps. Logo 280 + nav 580 + one button 191 + gaps already used
   1099 of it. A second button in line needs 404 for the pair and pushes the
   navigation onto a second line at every width.

   Stacked, the pair is as wide as its widest member — 191 instead of 404 — and
   its 86px of height sits inside the logo's 166, so the header stays at the
   height it was approved at. Nothing is shrunk.

   Phone on top: copper is the brand's signal for action, and the eye takes the
   top item of a stack first.
   -------------------------------------------------------------------------- */
.jp-cta-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
  flex: none;
}
.jp-cta-stack .btn {
  padding: 10px 20px;
  font-size: var(--text-sm);
  white-space: nowrap;
}

@media (max-width: 939px) {
  /* Below the breakpoint both move into the compact panel. */
  .jp-cta-stack { display: none; }
}