/* ============================================================================
 * /get-started/ styles. Mobile first. Tokens come from /css/styles.css :root
 * (bone-cream, bone-white, bone-black, marrow-red, steel). No new tokens.
 * The iOS app opens https://marrowfitness.com/get-started, so this is the
 * primary phone surface: single column, large tap targets, no horizontal
 * scroll.
 * ==========================================================================*/

.gs-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bone-black);
  color: var(--bone-white);
  padding: 10px 16px;
  z-index: 100;
  border-radius: 0 0 8px 0;
}
.gs-skip:focus { left: 0; }

.gs {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 20px 96px;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--bone-black);
}

.gs-mark-row { margin-bottom: 28px; }
.gs-word {
  font-family: "Switzer", sans-serif;
  font-weight: 800;
  letter-spacing: 0.16em;
  font-size: 16px;
  color: var(--bone-black);
}

/* Stepper */
.gs-steps {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gs-step {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  color: var(--steel);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--steel-light);
}
.gs-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--steel-light);
  color: var(--bone-black);
  font-weight: 600;
  font-size: 11px;
}
.gs-step.is-current { color: var(--bone-black); border-bottom-color: var(--marrow-red); }
.gs-step.is-current .gs-step-num { background: var(--marrow-red); color: var(--bone-white); }
.gs-step.is-done { color: var(--bone-black); border-bottom-color: var(--marrow-red); }
.gs-step.is-done .gs-step-num { background: var(--marrow-red); color: var(--bone-white); }

/* Panels */
.gs-panel { display: none; }
.gs-panel.is-active { display: block; }

.gs-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--marrow-red);
  margin: 0 0 12px;
}
.gs h1 {
  font-family: "Switzer", sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 6.5vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--bone-black);
}
.gs-lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--steel);
  margin: 0 0 24px;
}

/* Forms */
.gs-form { display: flex; flex-direction: column; gap: 16px; }
.gs-field-row { display: flex; gap: 12px; }
.gs-field-row .gs-field { flex: 1; }
.gs-field { display: flex; flex-direction: column; gap: 6px; }
.gs-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--bone-black);
}
.gs-optional { font-weight: 400; color: var(--steel); font-size: 12px; }
.gs-field input {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  padding: 13px 14px;
  border: 1px solid var(--steel-light);
  border-radius: 10px;
  background: var(--bone-white);
  color: var(--bone-black);
  width: 100%;
}
.gs-field input:focus {
  outline: none;
  border-color: var(--marrow-red);
  box-shadow: 0 0 0 3px rgba(53, 106, 107, 0.12);
}

/* ---- Password block ----
   The hint line and the readiness line sit under the two password inputs. They
   are the only running prose inside the form, so they read as sentences rather
   than as labels. */
.gs-field-help {
  margin: -8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--steel);
  font-family: "Inter", system-ui, sans-serif;
}
.gs-pw-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: -8px;
}
.gs-pw-row .gs-field-help { margin: 0; flex: 1; }
.gs-pw-toggle {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bone-black);
  border-bottom: 1px solid var(--marrow-red);
}
.gs-pw-toggle:hover,
.gs-pw-toggle:focus-visible { color: var(--marrow-red); }

.gs-field-error {
  color: var(--mz-status-risk, #9E2B18);
  font-size: 14px;
  margin: 4px 0 0;
  font-weight: 500;
}

/* Buttons */
.gs-btn {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 15px 22px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  width: 100%;
  transition: background 0.16s ease, transform 0.08s ease;
}
.gs-btn-primary { background: var(--marrow-red); color: var(--bone-white); }
.gs-btn-primary:hover { background: var(--marrow-red-glow); }
.gs-btn-primary:active { transform: translateY(1px); }
.gs-btn-primary:disabled { opacity: 0.6; cursor: default; }
.gs-btn-ghost {
  background: transparent;
  color: var(--bone-black);
  border-color: var(--steel-light);
}
.gs-btn-ghost:hover { border-color: var(--steel); }
/* A ghost button had no disabled state, so the pay in full button looked
   pressable while a provider was still finishing setup. The primary button has
   carried this rule all along; the two now read the same when they are off. */
.gs-btn-ghost:disabled { opacity: 0.6; cursor: default; }
.gs-btn-ghost:disabled:hover { border-color: var(--steel-light); }
.gs-back { margin-top: 24px; width: auto; padding: 12px 20px; }

.gs-linkbtn {
  background: none;
  border: none;
  color: var(--marrow-red);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.gs-signin { margin: 22px 0 0; font-size: 15px; color: var(--steel); }
.gs-signin-sent { margin: 12px 0 0; font-size: 15px; color: var(--bone-black); font-weight: 500; }

/* Search + chips */
.gs-search { margin: 0 0 14px; }
.gs-search input {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  padding: 14px 16px;
  border: 1px solid var(--steel-light);
  border-radius: 12px;
  background: var(--bone-white);
  color: var(--bone-black);
  width: 100%;
}
.gs-search input:focus {
  outline: none;
  border-color: var(--marrow-red);
  box-shadow: 0 0 0 3px rgba(53, 106, 107, 0.12);
}
.gs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.gs-chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--steel-light);
  background: transparent;
  color: var(--steel);
  cursor: pointer;
}
.gs-chip.is-on { background: var(--bone-black); color: var(--bone-white); border-color: var(--bone-black); }

/* Results */
.gs-results { display: flex; flex-direction: column; gap: 10px; }
.gs-provider-card {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--steel-light);
  border-radius: 14px;
  background: var(--bone-white);
  cursor: pointer;
}
.gs-provider-card:hover { border-color: var(--marrow-red); }
.gs-provider-card:focus-visible {
  outline: none;
  border-color: var(--marrow-red);
  box-shadow: 0 0 0 3px rgba(53, 106, 107, 0.12);
}
.gs-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--steel-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Switzer", sans-serif;
  font-weight: 700;
  color: var(--bone-black);
  font-size: 16px;
}
.gs-provider-meta { flex: 1; min-width: 0; }
.gs-provider-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--bone-black);
  display: flex;
  align-items: center;
  gap: 8px;
}
.gs-provider-sub {
  font-size: 13px;
  color: var(--steel);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs-badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--marrow-red);
  color: var(--bone-white);
  font-weight: 500;
}
.gs-badge-type {
  background: var(--steel-light);
  color: var(--bone-black);
}
.gs-results-empty, .gs-tiers-note {
  color: var(--steel);
  font-size: 15px;
  margin: 16px 0 0;
}

/* Tiers */
.gs-provider-summary-strong { color: var(--bone-black); font-weight: 600; }
.gs-tiers { display: flex; flex-direction: column; gap: 12px; }
.gs-tier {
  border: 1px solid var(--steel-light);
  border-radius: 16px;
  background: var(--bone-white);
  padding: 18px;
}
.gs-tier-name {
  font-family: "Switzer", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--bone-black);
  margin: 0 0 4px;
}
.gs-tier-price {
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
  color: var(--marrow-red);
  font-weight: 600;
  margin: 0 0 10px;
}
.gs-tier-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--steel);
  margin: 0 0 14px;
}
.gs-tier .gs-btn { margin-top: 4px; }
/* Separates each disclosure from whatever sits above it. A card can now carry
   two of them, one per way to pay, and each has to read as belonging to the
   button under it rather than to the button over it. */
.gs-tier .gs-tier-disclosure { margin-top: 10px; }

.gs-help {
  margin: 44px 0 0;
  font-size: 14px;
  color: var(--steel);
  text-align: center;
}
.gs-help a { color: var(--marrow-red); }

.gs-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (min-width: 560px) {
  .gs { padding-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-btn, .gs-provider-card { transition: none; }
}