/* ─────────────────────────────────────────────────────────────────────────────
   SPOTTER — the button, defined once for the whole site.

   Geoffrey, 6 August 2026: "all the orange ones look the same and all the grey
   ones look the same, right across the whole board."

   WHY THIS IS A FILE AND NOT FOUR COPIES. Every page on this site carries its
   own inline <style>, which is how the partner pages ended up with a gradient
   pill while the landing page had a flat ember rectangle — nobody did anything
   wrong, the styles simply had no shared home. Copying a corrected block into
   each page would fix today and drift again the first time a page is added.
   One file, linked last in every <head>, cannot drift.

   Every page must link this AFTER its own <style> block so this wins on equal
   specificity.

   TWO BUTTONS, AND ONLY TWO:
     .btn          the orange one — the single most important action on a page
     .btn.ghost    the grey one   — everything else

   If a page seems to need a third, it almost certainly needs fewer buttons.
   ───────────────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  background: var(--ember);
  color: #160a05;                 /* near-black on ember: reads at small sizes */
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .3px;
  padding: 15px 30px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;          /* it is usually an <a>, and must never underline */
  font-family: inherit;           /* a <button> does not inherit this on its own */
  line-height: 1.2;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -12px rgba(255, 90, 44, .7);
}

/* The grey one. Transparent rather than filled, so it never competes with the
   ember button beside it. */
.btn.ghost {
  background: transparent;
  color: var(--ash);
  border: 1px solid var(--line);
}

/* A grey button glowing ember on hover was the old behaviour, inherited from
   .btn:hover, and it was wrong — the colour is the whole distinction between
   the two. The grey one lifts the same way and brightens its own edge instead. */
.btn.ghost:hover {
  box-shadow: none;
  border-color: var(--steel);
  color: var(--ash);
}

/* Full-width inside a form or a card, where a button sits alone under fields
   and a centred pill would look accidental. */
.btn.block,
form .btn,
.form-card .btn {
  display: block;
  width: 100%;
}

/* Held down: a press should feel like a press on a phone, where there is no
   hover state to tell you anything happened. */
.btn:active {
  transform: translateY(0);
}

.btn:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

/* 560px, matching the landing page's own small-screen breakpoint — the figure this
   site already uses, so the button steps down at the same moment everything else does. */
@media (max-width: 560px) {
  .btn {
    padding: 13px 20px;
    font-size: .98rem;
  }
}

/* Somebody who has asked their device to reduce motion should not be nudged. */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn:hover,
  .btn:active {
    transition: none;
    transform: none;
  }
}
