/* ------------------------------------------------------------------
   Book GOGO Live — the on-site replacement for the Google Form.
   Scoped under .ggm-book so none of it can leak into Webflow's styles.
   ------------------------------------------------------------------ */

.ggm-book {
  --ink: #0b0b12;
  --ink-soft: #55555f;
  --line: #dcdce6;
  --paper: #ffffff;
  --paper-soft: #f9f8ff;
  --blue: #194bf5;
  --blue-dark: #1038bd;
  --ok: #0f6f5e;
  --danger: #c32020;

  --display: 'Airwaves', Impact, sans-serif;
  --rounded: 'Airwaves Rounded', Arial, sans-serif;
  --body: 'Century Gothic', 'Avenir Next', Arial, sans-serif;

  background: var(--paper-soft);
  color: var(--ink);
  font-family: var(--body);
}

.ggm-book *,
.ggm-book *::before,
.ggm-book *::after { box-sizing: border-box; }

/* ----------------------------------------------------------- hero band */

.ggm-hero {
  background: var(--ink);
  color: #fff;
  padding: 92px 24px 104px;
  position: relative;
  overflow: hidden;
}

/* Soft brand wash behind the headline, kept decorative and low contrast. */
.ggm-hero::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 150%;
  background:
    radial-gradient(42% 55% at 18% 35%, rgba(25, 75, 245, .55), transparent 70%),
    radial-gradient(38% 50% at 82% 25%, rgba(181, 53, 137, .45), transparent 70%),
    radial-gradient(40% 45% at 55% 85%, rgba(100, 58, 143, .35), transparent 70%);
  pointer-events: none;
}

.ggm-hero__inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
}

.ggm-eyebrow {
  font-family: var(--rounded);
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
}

.ggm-hero h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(52px, 11vw, 132px);
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 24px;
  color: #fff;
}

.ggm-hero__lede {
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .86);
  margin: 0;
}

/* --------------------------------------------------------------- layout */

/* The card tucks up into the hero by its own negative margin. The hero is
   positioned (for the gradient wash), and positioned elements paint above
   static ones whatever the DOM order — so without a position and z-index here
   the hero covers the top of the card and whatever sits in it. */
.ggm-main {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 110px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 56px;
  align-items: start;
}

.ggm-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 44px 48px 48px;
  margin-top: -56px;
  box-shadow: 0 24px 60px rgba(11, 11, 18, .09);
}

/* -------------------------------------------------------------- aside */

.ggm-aside {
  position: sticky;
  top: 112px;
  margin-top: 28px;
  display: grid;
  gap: 22px;
}

.ggm-aside__block {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 26px 28px;
}

.ggm-aside__block h2 {
  font-family: var(--rounded);
  font-size: 19px;
  line-height: 1.25;
  margin: 0 0 14px;
  color: var(--ink);
}

.ggm-aside__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 13px;
}

.ggm-aside__list li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.ggm-aside__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue);
}

.ggm-aside__block p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.ggm-aside__block a { color: var(--blue); }

/* ------------------------------------------------------------ fieldsets */

.ggm-step {
  border: 0;
  padding: 0;
  margin: 0 0 42px;
}

.ggm-step:last-of-type { margin-bottom: 30px; }

.ggm-step > legend {
  display: flex;
  align-items: baseline;
  gap: 13px;
  padding: 0;
  margin-bottom: 22px;
  font-family: var(--rounded);
  font-size: 23px;
  line-height: 1.2;
  color: var(--ink);
}

.ggm-step__num {
  font-family: var(--rounded);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--blue);
  border: 1.5px solid var(--blue);
  border-radius: 999px;
  padding: 4px 11px;
  flex: none;
}

/* ---------------------------------------------------------------- grid */

.ggm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
}

.ggm-field--wide { grid-column: 1 / -1; }

.ggm-field { display: flex; flex-direction: column; }

.ggm-field > label,
.ggm-choice__legend {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  margin-bottom: 8px;
  color: var(--ink);
}

.ggm-req { color: var(--danger); margin-left: 3px; }

/* Sits below its input, so two fields in a row keep their inputs on one
   line whether or not either of them has a hint. */
.ggm-hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 7px 0 0;
  font-weight: 400;
}

/* Except in a choice group, where it explains the options that follow. */
.ggm-choice .ggm-hint { margin: 0 0 11px; }

.ggm-field input,
.ggm-field textarea,
.ggm-field select {
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.ggm-field textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.6;
}

.ggm-field input::placeholder,
.ggm-field textarea::placeholder { color: #a6a6b4; }

.ggm-field input:hover,
.ggm-field textarea:hover { border-color: #b9b9c8; }

.ggm-field input:focus-visible,
.ggm-field textarea:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(25, 75, 245, .16);
}

.ggm-field input[aria-invalid='true'],
.ggm-field textarea[aria-invalid='true'] { border-color: var(--danger); }

.ggm-error {
  display: none;
  font-size: 13px;
  line-height: 1.45;
  color: var(--danger);
  margin-top: 7px;
}

.ggm-error.is-shown { display: block; }

/* --------------------------------------------------------- choice cards */

.ggm-choice { border: 0; padding: 0; margin: 0; grid-column: 1 / -1; }

/* Four across so each group reads as one row of equal-weight choices. */
.ggm-choice__options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.ggm-choice__option { position: relative; display: flex; }

/* The radio stays in the a11y tree and keeps keyboard behaviour; the label
   is the visible control and the :focus-visible ring is forwarded to it. */
.ggm-choice__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.ggm-choice__option span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 56px;
  padding: 11px 13px;
  font-size: 14.5px;
  line-height: 1.35;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  background: var(--paper);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.ggm-choice__option:hover span { border-color: #b9b9c8; }

.ggm-choice__option input:checked + span {
  border-color: var(--blue);
  background: rgba(25, 75, 245, .07);
  color: var(--blue-dark);
  font-weight: 700;
}

.ggm-choice__option input:focus-visible + span {
  outline: none;
  box-shadow: 0 0 0 4px rgba(25, 75, 245, .2);
  border-color: var(--blue);
}

/* --------------------------------------------------------------- submit */

.ggm-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}

.ggm-submit {
  font-family: var(--rounded);
  font-size: 21px;
  line-height: 1;
  color: #fff;
  background: var(--blue);
  border: 0;
  border-radius: 999px;
  padding: 20px 42px;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}

.ggm-submit:hover { background: var(--blue-dark); }
.ggm-submit:active { transform: translateY(1px); }

.ggm-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(25, 75, 245, .28);
}

.ggm-submit[disabled] { opacity: .6; cursor: progress; }

.ggm-actions__note {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 34ch;
}

/* ------------------------------------------------------- status banners */

.ggm-banner {
  border-radius: 14px;
  padding: 15px 18px;
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 26px;
}

.ggm-banner--demo {
  background: #fff8dd;
  border: 1px solid #e8d487;
  color: #6b5309;
}

.ggm-banner--error {
  background: #fdeaea;
  border: 1px solid #f0b6b6;
  color: #8d1b1b;
}

.ggm-banner--error[hidden],
.ggm-banner--demo[hidden] { display: none; }

.ggm-banner a { color: inherit; }

/* --------------------------------------------------------------- thanks */

.ggm-thanks { text-align: center; padding: 26px 0 14px; }

.ggm-thanks__mark {
  width: 78px;
  height: 78px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: var(--ok);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ggm-thanks__mark svg { width: 36px; height: 36px; }

.ggm-thanks h2 {
  font-family: var(--display);
  font-size: clamp(34px, 6vw, 54px);
  line-height: .95;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: var(--ink);
}

.ggm-thanks p {
  max-width: 48ch;
  margin: 0 auto 14px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.ggm-thanks__links {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

.ggm-thanks__links a {
  font-family: var(--rounded);
  font-size: 17px;
  text-decoration: none;
  border-radius: 999px;
  padding: 15px 30px;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  transition: background .15s ease, color .15s ease;
}

.ggm-thanks__links a:hover { background: var(--ink); color: #fff; }

.ggm-thanks__links a.is-primary {
  background: var(--ink);
  color: #fff;
}

.ggm-thanks__links a.is-primary:hover { background: var(--blue); border-color: var(--blue); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 991px) {
  .ggm-main { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .ggm-aside { position: static; margin-top: 0; }
}

@media (max-width: 767px) {
  .ggm-hero { padding: 64px 16px 80px; }
  .ggm-main { padding: 0 16px 76px; }
  .ggm-card { padding: 30px 20px 34px; border-radius: 20px; }
  .ggm-grid { grid-template-columns: minmax(0, 1fr); }
  .ggm-choice__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ggm-step > legend { font-size: 21px; }
  .ggm-submit { width: 100%; }
  .ggm-actions__note { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ggm-book * { transition: none !important; }
}