/* ===========================================================================
   GOGO — the "Join our newsletter" form in the footer of every page.

   The markup this replaces was the Webflow export's own, and it had not
   worked since the site moved off Webflow hosting. Two things were wrong at
   once, and either alone was enough to lose every signup:

     - the form carried Webflow's Cloudflare Turnstile sitekey, which is only
       valid on a webflow.io / Webflow-hosted domain. Webflow's script keeps
       the submit button disabled until Turnstile hands back a token, and off
       Webflow the widget never renders, so the token never came and the
       button stayed disabled forever — while still looking perfectly
       clickable, because Webflow's disabled styling never applied;

     - with no action attribute, the script would have posted to
       webflow.com/api/v1/form/<site-id>, the old Webflow project's form
       inbox, which is not somewhere anyone here can read.

   So the form is now plain markup that Webflow's JS does not recognise — the
   wrapper is .ggn rather than .w-form, which is the selector that script
   binds to — and newsletter.js writes to the subscribers table instead.

   The field classes (.text-field, .text-field-2, .submit-button) are kept
   from the original because the Webflow stylesheet carries this section's
   whole responsive story on them: widths at 991px, 479px and so on. Styling
   from scratch would mean re-deriving all of it. This file only corrects
   what was broken and adds what the old markup had no equivalent for.
   =========================================================================== */

/* What .w-form gave the old wrapper, kept so the panel's spacing does not
   shift now that the class is gone. */
.ggn {
  margin: 0 0 15px;
}

/* The name field was unusable: the Webflow stylesheet sets
   `.text-field { color: #fff0 }` — fully transparent white — so anything
   typed into it was invisible. A later `color: #fff !important` exists but
   sits inside `@media (min-width: 1920px)`, so it only rescued the very
   widest screens. The email field was legible but faint at 51% white.

   Both are stated here as solid white. !important is needed to outrank that
   1920px rule, and this file loads after the Webflow one so it wins the tie
   against it at every other width. */
.ggn__field {
  color: #fff !important;
  -webkit-text-stroke-color: #fff;
}

/* Webflow's own placeholder colour drops to 38% white on small screens,
   which is below any reasonable contrast on the #194bf5 panel. */
.ggn__field::placeholder {
  color: rgba(255, 255, 255, .72);
  opacity: 1;                      /* Firefox dims placeholders by default */
}

.ggn__field:focus-visible,
.ggn__submit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* The fields are labelled by placeholder alone in the design. A placeholder
   is not a label — it disappears on first keystroke and screen readers treat
   it inconsistently — so each field gets a real label, positioned out of
   sight rather than hidden, which would take it off the accessibility tree
   along with everything else. */
.ggn__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* .submit-button is written for an <input type="submit">; this is a <button>
   so its label can change to "Signing up…" and back. Centring and the
   inherited-font reset are what an input gave for free. */
.ggn__submit {
  font-family: Airwaves, Arial, sans-serif;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}

.ggn__submit[disabled] {
  cursor: default;
  opacity: .6;
}

/* Reserved whether or not there is a message, so the panel does not jump by
   a line the moment someone submits. */
.ggn__status {
  min-height: 34px;
  margin: 14px 0 0;
  max-width: 493px;
  color: #fff;
  font-family: Century Gothic, Arial, sans-serif;
  font-size: 17px;
  line-height: 24px;
}

.ggn__status:empty {
  min-height: 0;
}

/* Failure has to look different from success at a glance, and on this blue
   panel red would be unreadable — so the error gets the white rule beside it
   rather than a colour change. */
.ggn__status--error {
  padding-left: 14px;
  border-left: 3px solid #fff;
}

.ggn__status a {
  color: inherit;
  text-decoration: underline;
}

/* The thank-you that replaces the form once someone is on the list. */
.ggn__done {
  max-width: 493px;
  color: #fff;
  font-family: Century Gothic, Arial, sans-serif;
  font-size: 18px;
  line-height: 28px;
}

.ggn__done strong {
  display: block;
  margin-bottom: 8px;
  font-family: Airwaves, Arial, sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 36px;
  text-transform: uppercase;
}

@media screen and (max-width: 479px) {
  .ggn__status,
  .ggn__done {
    font-size: 15px;
    line-height: 22px;
  }

  .ggn__done strong {
    font-size: 26px;
    line-height: 28px;
  }
}