/* gm-auth — minimal styles required for correct function.
   Error toasts and busy states only; no decorative CSS. */

/* Error toast inside Breakdance forms.
   Breakdance lays out form rows as a CSS grid (12-column track), so any
   plain <div> we inject is auto-sized to one cell — that's why an error
   would otherwise render as a tall narrow column. The grid-column override
   forces a full-row span; the flex-basis covers the wizard step container
   which uses flexbox instead of grid. width:100% pins it on both. */
.gm-auth-error {
  display: none;
  width: 100%;
  flex-basis: 100%;
  grid-column: 1 / -1;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.45;
  color: #b42318;
  background: #fef3f2;
  border: 1px solid #fda29b;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 8px 0;
}

.gm-auth-busy {
  opacity: 0.7;
  cursor: progress !important;
  pointer-events: none;
}

/* ── [gm_action_required] dashboard notice ──────────────────────────────
   White card, accent edge, icon block, heading, subtitle, primary CTA,
   and optional dismiss X. */
.gm-action-required {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  background: #ffffff;
  border: 1px solid #f3d9d9;
  border-left: 4px solid #ef4444;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  font-family: inherit;
  transition: opacity .24s ease, transform .24s ease;
}
.gm-action-required.gm-action-dismissing {
  opacity: 0;
  transform: translateX(40px);
  pointer-events: none;
}
.gm-action-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fee2e2;
  border-radius: 14px;
  color: #dc2626;
}
.gm-action-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}
.gm-action-body {
  flex: 1 1 auto;
  min-width: 0;
}
.gm-action-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #dc2626;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.gm-action-dot {
  width: 6px;
  height: 6px;
  background: #dc2626;
  border-radius: 50%;
  display: inline-block;
}
.gm-action-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bde-headings-color, #0f172a);
  margin-bottom: 4px;
}
.gm-action-sub {
  font-size: 14px;
  line-height: 1.5;
  color: #64748b;
}

.gm-action-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.gm-action-btn {
  text-decoration: none !important;
}
.gm-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
  line-height: 1;
}
.gm-action-btn:active { transform: translateY(1px); }
.gm-action-btn-secondary {
  background: #ffffff;
  color: var(--bde-headings-color, #0f172a);
  border-color: #e2e8f0;
}
.gm-action-btn-secondary:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.gm-action-btn-primary {
  background: var(--bde-brand-primary-color, #16a34a);
  color: #ffffff !important;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(22, 120, 58, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.gm-action-btn-primary:visited {
  color: #ffffff !important;
}
.gm-action-btn-primary:hover {
  color: #ffffff !important;
  filter: brightness(.92);
}

/* ChatGPT / OpenAI knot icon — inlined as SVG mask so it inherits button
   text colour. Path is OpenAI's official 6-lobed mark, simplified. */
.gm-action-chatgpt-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
}

.gm-action-dismiss {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color .15s ease, color .15s ease;
}
.gm-action-dismiss:hover {
  background: #f1f5f9;
  color: #334155;
}

/* Responsive: stack on narrow screens so the buttons don't squeeze the body. */
@media (max-width: 720px) {
  .gm-action-required {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .gm-action-buttons {
    width: 100%;
    margin-top: 8px;
  }
  .gm-action-buttons .gm-action-btn { flex: 1 1 auto; justify-content: center; }
  .gm-action-dismiss {
    position: absolute;
    top: 14px;
    right: 14px;
  }
  .gm-action-required { position: relative; }
}

/* Placeholder toast for Why/Connect actions until the real flows ship. */
.gm-action-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  max-width: 460px;
  padding: 14px 20px;
  background: #0f172a;
  color: #f1f5f9;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.28);
  opacity: 0;
  transition: opacity .24s ease, transform .24s ease;
  z-index: 999999;
  cursor: pointer;
}
.gm-action-toast.gm-action-toast-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}
.gm-action-toast-success {
  background: #14532d;
  color: #ecfdf5;
}
.gm-action-toast-error {
  background: #7f1d1d;
  color: #fef2f2;
}

.gm-permanent-action {
  margin-top: 12px;
}
.gm-danger-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 41px;
  padding: 13px 19px;
  border: 0;
  border-radius: 999px;
  background: #b91c1c;
  color: #ffffff;
  box-shadow: 0 9px 20px rgba(185, 28, 28, 0.16);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
}
.gm-danger-action:hover {
  background: #991b1b;
  color: #ffffff;
}
.gm-danger-action-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3C/svg%3E") no-repeat center / contain;
}

.gm-lic [data-act="del"] {
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
.gm-lic [data-act="del"]:hover {
  color: #b91c1c !important;
}
html body.gm-ai-needed .gm-lic,
html body.gm-ai-disconnected .gm-lic {
  display: block !important;
}

.gm-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 999998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.gm-confirm-modal.gm-confirm-open {
  opacity: 1;
  pointer-events: auto;
}
.gm-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(51, 49, 47, 0.34);
}
.gm-confirm-card {
  position: relative;
  width: min(100%, 498px);
  background: #ffffff;
  color: var(--bde-body-text-color, #4d5551);
  border: 1px solid #e4e8e4;
  border-radius: 20px;
  box-shadow: 0 16px 42px rgba(20, 49, 32, 0.055);
  padding: 25px;
  font-family: inherit;
  transform: translateY(8px);
  transition: transform .18s ease;
}
.gm-confirm-open .gm-confirm-card {
  transform: translateY(0);
}
.gm-confirm-kicker {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 16px;
  padding: 6px 10px;
  border: 1px solid #fecaca;
  border-radius: 999px;
  background: #fff1f2;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 18px;
}
.gm-confirm-card h2 {
  margin: 0 0 10px;
  color: var(--bde-headings-color, #33312f);
  font-family: inherit;
  font-size: 30px !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;
}
.gm-confirm-card .gm-confirm-kicker-title {
  margin-bottom: 14px;
}
.gm-confirm-card p {
  margin: 0 0 20px;
  color: #69736d;
  font-family: inherit;
  font-size: 16px !important;
  line-height: 1.65 !important;
}
.gm-confirm-label {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--bde-headings-color, #33312f);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.gm-confirm-input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #e4e8e4;
  border-radius: 12px;
  padding: 10px 13px;
  font: inherit;
  font-size: 14px;
  color: var(--bde-headings-color, #33312f);
  background: #ffffff;
}
.gm-confirm-input:focus {
  outline: none;
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16);
}
.gm-confirm-error {
  margin: 0 0 12px;
  color: #b91c1c;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
}
.gm-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.gm-confirm-actions button {
  min-height: 41px;
  border: 0;
  border-radius: 999px;
  padding: 13px 19px;
  font: inherit;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  cursor: pointer;
}
.gm-confirm-cancel {
  background: #f7f8f7;
  color: var(--bde-headings-color, #33312f);
}
.gm-confirm-danger {
  background: #b91c1c;
  color: #ffffff;
  box-shadow: 0 9px 20px rgba(185, 28, 28, 0.16);
}
.gm-confirm-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.gm-confirm-danger[aria-busy="true"] {
  cursor: progress;
}
@media (max-width: 420px) {
  .gm-confirm-actions {
    flex-direction: column-reverse;
  }
  .gm-confirm-actions button {
    width: 100%;
  }
}

/* Dashboard account IA. */
.bde-text-874-101,
.bde-text-874-101-874-1 {
  display: none !important;
}
.bde-wp-menu-874-100,
.bde-wp-menu-874-100 .breakdance-menu-list,
.bde-wp-menu-874-100 .breakdance-menu-item {
  width: auto !important;
}
.bde-wp-menu-874-100 .breakdance-menu,
.bde-wp-menu-874-100 .breakdance-menu-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.bde-wp-menu-874-100 .breakdance-menu-item,
.bde-wp-menu-874-100 .current-menu-item,
.bde-wp-menu-874-100 .current_page_item,
.bde-wp-menu-874-100 .breakdance-menu-item--active {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.bde-wp-menu-874-100 .breakdance-menu-link {
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 8px 0 !important;
  border-radius: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  text-align: left !important;
  justify-content: flex-start !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.bde-wp-menu-874-100 .current-menu-item > .breakdance-menu-link,
.bde-wp-menu-874-100 .current_page_item > .breakdance-menu-link,
.bde-wp-menu-874-100 .breakdance-menu--active-background .current-menu-item > .breakdance-menu-link,
.bde-wp-menu-874-100 .breakdance-menu--active-background .current_page_item > .breakdance-menu-link,
.bde-wp-menu-874-100 .breakdance-menu-item--active > .breakdance-menu-link {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 8px 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: inherit !important;
  box-shadow: none !important;
}

.bde-wp-menu-874-105 .breakdance-dropdown-floater {
  position: static !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  box-shadow: none !important;
  background: transparent !important;
}
.bde-wp-menu-874-105 .breakdance-dropdown-body,
.bde-wp-menu-874-105 .breakdance-dropdown-section {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.bde-wp-menu-874-105 .breakdance-dropdown-links {
  margin: 8px 0 0 18px !important;
  padding: 2px 0 2px 18px !important;
  border-left: 2px solid #e4e8e4 !important;
}
.bde-wp-menu-874-105 .breakdance-dropdown-link {
  position: relative !important;
  padding: 7px 0 !important;
  background: transparent !important;
}
.bde-wp-menu-874-105 .breakdance-dropdown-link::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 50%;
  width: 10px;
  height: 2px;
  background: #d3d8d3;
  transform: translateY(-50%);
}

a[href*="/dashboard/team"],
a[href*="?page_id=840"] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
a[href*="/dashboard/team"]::before,
a[href*="?page_id=840"]::before,
a[href*="/dashboard/settings/billing"]::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 9px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat center / contain;
}
a[href*="/dashboard/settings/billing"] {
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
a[href*="/dashboard/settings/billing"]::after {
  content: none !important;
}

/* ── Wizard top-bar price: visible on the dark hero bar ───────────────── */
#gm-topbar .bde-rich-text-1190-11,
#gm-topbar .bde-rich-text-1190-11 *,
body.gm-trial-mode #gm-topbar .bde-rich-text-1190-11,
body.gm-trial-mode #gm-topbar .bde-rich-text-1190-11 * {
  color: var(--bde-brand-primary-color, #16a34a) !important;
}
#gm-topbar .bde-text-1190-12,
body.gm-trial-mode #gm-topbar .bde-text-1190-12 {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* ── Wizard Step 2: QR + secret column layout ──────────────────────────
   The placeholder secret was a short slug-like string (~22 chars); the
   real Base32 secret from Two_Factor_Totp::generate_key() is 32 chars
   and was overflowing the slot. Constrain QR + secret-box to the same
   max-width so the left column reads as one cohesive unit, force the
   secret text to break by character (Base32 has no spaces), and use a
   monospaced font so all the same-width characters line up. */
.bde-code-block-1190-57,
.bde-code-block-1190-57 .gm-qr,
.bde-div-1190-58 {
  max-width: 280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.bde-code-block-1190-57 img,
.bde-code-block-1190-57 svg {
  display: block !important;
  width: 100% !important;
  max-width: 280px !important;
  height: auto !important;
}
.bde-text-1190-59 {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  letter-spacing: 0.04em !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
  color: var(--bde-headings-color, #16140f) !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  text-align: center !important;
  user-select: all !important;
}

/* ── Wizard Step 2: 6-digit OTP boxes (Breakdance native form fields) ───
   These are NOT the same widget as the popup's .gm-otp-box — those get
   JS-injected by signin.js with our own classes. The wizard's six digits
   live as authored Breakdance inputs (#code1 .. #code6) inside their
   own form-field columns. Default Breakdance styling stretches them to
   full column width with left-aligned text, which made the typed digits
   sit in the top-left corner of an oversized rectangle (per user screen-
   shot). We pin the input itself to a 56×56 square, centred inside the
   column, with the digit centred horizontally + vertically. */
#gm-step-2 input[id^="code"],
#gm-step-2 input[name^="fields[code"] {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: block !important;
  text-align: center !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 56px !important;
  color: var(--bde-headings-color, #16140f) !important;
  background-color: #fff !important;
  border: 1.5px solid #b8bdbc !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
#gm-step-2 input[id^="code"]:hover,
#gm-step-2 input[name^="fields[code"]:hover {
  border-color: #8a9290 !important;
}
#gm-step-2 input[id^="code"]:focus,
#gm-step-2 input[name^="fields[code"]:focus {
  outline: none !important;
  border-color: #16a34a !important;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.22) !important;
  background-color: #fafefa !important;
}
#gm-step-2 input[id^="code"]:not(:placeholder-shown),
#gm-step-2 input[name^="fields[code"]:not(:placeholder-shown) {
  border-color: #7a8079 !important;
}

/* Force the OTP form to a single 6-column flex row at EVERY viewport
   width. Breakdance's authored layout was `display: grid` on the form
   itself (NOT on a `.breakdance-form-fields` wrapper — there is none in
   the rendered DOM), which auto-collapses to one column under ~768px
   and stacked the six digit cells vertically on mobile.

   We target three layers of selector for resilience:
   1. `.gm-otp-grid` — class injected by wizard.js (works in every browser)
   2. `form.breakdance-form:has(input[id^="code"])` — pure-CSS detection
      via :has() for modern browsers as a JS-less fallback
   3. The current authored form id `#wp-godmode-2fa-code67` — last-ditch
      anchor in case both above fail (the id is stable per the
      Breakdance form-builder nid).
   The inputs are sized inside `:where()` so the desktop 56×56 rule
   higher up no longer overrides our mobile 100%-width. */
#gm-step-2 .gm-otp-grid,
#gm-step-2 form.breakdance-form:has(input[id^="code"]),
#gm-step-2 form#wp-godmode-2fa-code67 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 0 !important;
}
/* Each of the six digit fields grows to fill an equal slice of the form
   so the cell row spans the SAME total width as the Verify-code button.
   The form ALSO contains a 7th child — `.breakdance-form-footer` — that
   holds the Verify button. Excluding `:not(.breakdance-form-footer)`
   stops the footer from stealing a 7th column. Wrapping is enabled so
   the footer reflows onto its own row below. */
#gm-step-2 .gm-otp-grid > .breakdance-form-field:not(.breakdance-form-footer),
#gm-step-2 form.breakdance-form:has(input[id^="code"]) > .breakdance-form-field:not(.breakdance-form-footer),
#gm-step-2 form#wp-godmode-2fa-code67 > .breakdance-form-field:not(.breakdance-form-footer) {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* The form-footer wraps to its own full-width row below the 6 cells. */
#gm-step-2 .gm-otp-grid > .breakdance-form-footer,
#gm-step-2 form.breakdance-form:has(input[id^="code"]) > .breakdance-form-footer,
#gm-step-2 form#wp-godmode-2fa-code67 > .breakdance-form-footer {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: none !important;
}
/* Hide the per-field labels — Breakdance respects `hide_label` but the
   wrapper sometimes still reserves a baseline row. */
#gm-step-2 form.breakdance-form:has(input[id^="code"]) .breakdance-form-field__label,
#gm-step-2 form#wp-godmode-2fa-code67 .breakdance-form-field__label,
#gm-step-2 form.breakdance-form:has(input[id^="code"]) label,
#gm-step-2 form#wp-godmode-2fa-code67 label {
  display: none !important;
}
/* Inputs fill the cell; on narrow viewports they shrink with it. */
#gm-step-2 input[id^="code"],
#gm-step-2 input[name^="fields[code"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}
@media (max-width: 480px) {
  #gm-step-2 input[id^="code"],
  #gm-step-2 input[name^="fields[code"] {
    height: 48px !important;
    font-size: 20px !important;
    line-height: 48px !important;
    border-radius: 10px !important;
  }
}

/* ── Step 2: Verify / Continue button states ──────────────────────────
   Verify is a green primary button by default and switches to a muted
   "✓ Verified" state once the code has been validated. Continue starts
   disabled (greyed out) until Verify passes. Cooldown only runs after
   an invalid/failed verify attempt and is shown in the button label. */
#gm-step-2:not(.gm-2fa-open) .bde-div-1190-74,
#gm-step-2:not(.gm-2fa-open) #gm-2fa-setup-panel {
  display: none !important;
}
#gm-step-2.gm-2fa-open #gm-2fa-choice {
  display: none !important;
}
#gm-step-2 .gm-2fa-choice {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 10px 0 18px !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  text-align: center !important;
}
#gm-step-2 .gm-2fa-start {
  box-shadow: none !important;
}
#gm-step-2 .gm-verify.gm-verified {
  background: #d1fae5 !important;
  color: #065f46 !important;
  cursor: default !important;
  opacity: 1 !important;
}
#gm-step-2 .gm-verify.gm-cooldown {
  opacity: 0.55 !important;
  cursor: wait !important;
  pointer-events: none !important;
  background: #e5e7eb !important;
  color: #4b5563 !important;
}
.gm-nav [data-nav].gm-disabled,
.gm-nav [data-nav][disabled] {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(0.4);
}
#gm-2fa-setup-panel[hidden],
#gm-recovery-codes .gm-recovery-grid[hidden] {
  display: none !important;
}

#gm-recovery-codes [data-gm="showcodes"] {
  width: 100%;
}
#gm-recovery-codes .gm-rec-show,
#gm-recovery-codes [data-gm="showcodes"] {
  margin-bottom: 12px !important;
}
#gm-recovery-codes .gm-recovery-actions {
  display: flex !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

/* ── Step 1: password reveal button ───────────────────────────────────── */
#gm-step-1 .gm-password-field {
  position: relative !important;
}
#gm-step-1 .gm-password-field input[type="password"],
#gm-step-1 .gm-password-field input[type="text"]#password,
#gm-step-1 .gm-password-field input[name="fields[password]"],
#gm-step-1 .gm-password-field input[name="form_fields[password]"] {
  padding-right: 48px !important;
}
#gm-step-1 .gm-password-toggle {
  position: absolute !important;
  right: 13px !important;
  top: auto !important;
  bottom: 13px !important;
  transform: none !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #6b7280 !important;
  cursor: pointer !important;
  z-index: 2 !important;
}
#gm-step-1 .gm-password-toggle:hover,
#gm-step-1 .gm-password-toggle.gm-password-visible {
  color: #16a34a !important;
}
#gm-step-1 .gm-password-toggle svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* ── Step 1: ToS asterisk + Newsletter checkbox ─────────────────────────
   .gm-required is the small red star injected after the consent label;
   newsletter is optional but uses the same sizing as the required consent. */
.gm-required {
  color: #dc2626 !important;
  font-weight: 700;
  margin-left: 2px;
}
.gm-consent,
.gm-newsletter {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px;
  cursor: pointer;
  font-size: 15px !important;
  line-height: 1.45 !important;
  color: #4d5551;
}
#gm-step-1 .form-input-html:has(.gm-consent):has(.gm-newsletter) {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-top: 12px !important;
}
.gm-consent {
  order: 2;
  margin-top: 0 !important;
}
.gm-newsletter {
  order: 1;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.gm-consent span,
.gm-newsletter span {
  font: inherit !important;
  line-height: inherit !important;
  color: inherit;
}
.gm-consent input[type="checkbox"],
.gm-newsletter input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  flex: 0 0 auto;
  margin: 2px 0 0 0 !important;
  border: 1.5px solid #c2c8c2 !important;
  border-radius: 4px !important;
  background: #fff !important;
  cursor: pointer;
  position: relative;
  transition: all .15s ease;
}
#gm-steps .gm-consent-cb,
#gm-steps .gm-newsletter-cb,
#gm-steps .gm-consent input[type="checkbox"],
#gm-steps .gm-newsletter input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border-radius: 5px !important;
}
.gm-consent input[type="checkbox"]:hover,
.gm-newsletter input[type="checkbox"]:hover {
  border-color: #16a34a !important;
}
.gm-consent input[type="checkbox"]:checked,
.gm-newsletter input[type="checkbox"]:checked {
  background: #16a34a !important;
  border-color: #16a34a !important;
}
.gm-consent input[type="checkbox"]:checked::after,
.gm-newsletter input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: translate(-50%, -50%) rotate(45deg);
  transform-origin: center;
}
#gm-steps .gm-consent-cb:checked::after,
#gm-steps .gm-newsletter-cb:checked::after {
  left: 50% !important;
  top: 46% !important;
  width: 6px !important;
  height: 11px !important;
  border-width: 0 3px 3px 0 !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

/* ── Step 1: password strength meter colour states ──────────────────────
   The four bars are .gm-strength > span. JS adds .gm-strength-N to the
   parent based on score; cascade lights up that many bars. */
.gm-strength.gm-strength-1 span:nth-child(1) { background: #ef4444 !important; }
.gm-strength.gm-strength-2 span:nth-child(-n+2) { background: #f59e0b !important; }
.gm-strength.gm-strength-3 span:nth-child(-n+3) { background: #fbbf24 !important; }
.gm-strength.gm-strength-4 span { background: #16a34a !important; }

/* ── Stepper read-only — match the JS pointer-events:none with cursor cue ── */
.gm-pstep,
#gm-progress .gm-pstep {
  cursor: default !important;
}
#gm-step-3.gm-stripe-step {
  width: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
#gm-step-3 .gm-step-eyebrow {
  margin: 0 0 14px;
  color: #16a34a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#gm-step-3 .gm-step-title {
  margin: 0;
  color: var(--bde-headings-color, #16140f);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.12;
  text-align: center;
}
#gm-step-3 .gm-step-subtitle {
  max-width: 700px;
  margin: 0;
  color: var(--bde-body-text-color, #4d5551);
  font-size: 17px;
  line-height: 1.6;
  text-align: center;
}
#gm-step-3 .gm-stripe-card {
  width: 100%;
  border: 1px solid #e4e8e4;
  border-radius: 14px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(20, 30, 20, 0.06);
}
#gm-step-3 .gm-stripe-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding-bottom: 20px;
  border-bottom: 1px solid #eef1ee;
}
#gm-step-3 .gm-stripe-head > div:first-child,
#gm-step-3 .gm-stripe-head > div:first-child span,
#gm-step-3 .gm-stripe-head > div:first-child strong,
#gm-step-3 .gm-stripe-head > div:first-child p {
  text-align: left !important;
}
#gm-step-3 .gm-stripe-head span,
#gm-step-3 .gm-stripe-includes span,
#gm-step-3 .gm-stripe-terms dt {
  display: block;
  margin-bottom: 5px;
  color: #7d7c7a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#gm-step-3 .gm-stripe-head strong {
  display: block;
  color: var(--bde-brand-primary-color, #16a34a);
  font-size: 24px;
  font-weight: 750;
  line-height: 1.2;
}
#gm-step-3 .gm-stripe-head p {
  max-width: 520px;
  margin: 8px 0 0;
  color: #69736d;
  font-size: 14.5px;
  line-height: 1.45;
}
#gm-step-3 .gm-stripe-price {
  min-width: 160px;
  text-align: right;
}
#gm-step-3 .gm-stripe-price strong {
  font-size: 22px;
}
#gm-step-3 .gm-stripe-includes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0;
}
#gm-step-3 .gm-stripe-includes > div {
  border: 1px solid #eef1ee;
  border-radius: 10px;
  padding: 14px 16px;
  background: #fafbfa;
}
#gm-step-3 .gm-stripe-includes strong {
  color: var(--bde-headings-color, #16140f);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
#gm-step-3 .gm-stripe-terms {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid #eef1ee;
}
#gm-step-3 .gm-stripe-terms > div {
  display: grid;
  grid-template-columns: minmax(130px, .6fr) minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid #eef1ee;
}
#gm-step-3 .gm-stripe-terms dt {
  margin: 0;
}
#gm-step-3 .gm-stripe-terms dd {
  margin: 0;
  color: var(--bde-headings-color, #16140f);
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.35;
  text-align: right;
}
#gm-step-3 .gm-stripe-actions {
  margin-top: 20px;
  text-align: center;
}
#gm-step-3 .gm-pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
}
#gm-step-3 .gm-pay-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: currentColor;
  line-height: 0;
}
#gm-step-3 .gm-pay-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}
#gm-step-3 .gm-pay-text {
  min-width: 0;
}
#gm-step-3 .gm-stripe-note {
  margin: 12px 0 0;
  color: #69736d;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: center;
}
@media (max-width: 767px) {
  #gm-step-3 .gm-step-title {
    font-size: 32px;
  }
  #gm-step-3 .gm-stripe-head,
  #gm-step-3 .gm-stripe-includes {
    grid-template-columns: 1fr;
  }
  #gm-step-3 .gm-stripe-price,
  #gm-step-3 .gm-stripe-terms dd {
    text-align: left;
  }
  #gm-step-3 .gm-stripe-terms > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   STEP 3 (Connect ChatGPT) — polished Codex device-auth card.
   JS injects .gm-codex-card after a successful gm_auth_codex_initiate.
   Layout: dark header panel with letter cells + copy + expiry, then
   "HOW TO CONNECT" numbered steps, ending in a status pill.
   font-family: inherit so the card picks up the site's body preset
   instead of forcing its own stack.
   ─────────────────────────────────────────────────────────────────────── */
.gm-codex-card {
  margin-top: 18px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 18px;
  overflow: hidden;
  /* Bigger soft shadow + slightly stronger hairline so the card reads as
     "lifted" against the white wizard surface, rather than a flat box. */
  box-shadow: 0 12px 32px -10px rgba(15, 23, 42, 0.22),
              0 2px 6px rgba(15, 23, 42, 0.06);
  font-family: inherit;
}
.gm-codex-card * { font-family: inherit; }
/* The injected card was previously gated behind a "Sign in with ChatGPT"
   click — show it from the first render so the device code is the first
   thing the user sees on Step 3. */
.gm-codex-card[hidden] { display: block !important; }

/* ── Brand-green device-code header ──
   Used to be dark navy (#0f172a → #1e293b) which read as "Anthropic
   blue" on screen and conflicted with the site's green palette. The
   gradient now uses the Breakdance brand-green CSS variables with
   conservative hard-coded fallbacks. */
.gm-codex-device {
  background: linear-gradient(180deg,
    var(--bde-brand-primary-color, #16a34a) 0%,
    var(--bde-brand-primary-color-darker, #15803d) 100%);
  color: #f0fdf4;
  padding: 26px 24px 22px;
  text-align: center;
}
.gm-codex-device-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 14px;
}

/* Letter cells for the device code. Each cell is a small dark square
   with the character in mono — sized to read clearly from a phone
   screen at arm's length. */
.gm-codex-cells {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  flex-wrap: wrap;
  justify-content: center;
}
.gm-codex-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 44px;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9px;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
}
.gm-codex-cell-sep {
  display: inline-block;
  width: 10px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 20px;
  font-weight: 600;
}

/* Copy button — icon-only, absolutely positioned to the right of the
   cells row so the device code stays visually centred. Hidden label
   keeps it accessible. */
.gm-codex-device { position: relative; }
.gm-codex-copy-btn {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-3px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  color: #f1f5f9;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.gm-codex-copy-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}
.gm-codex-copy-btn [data-role="codex-copy-label"] {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (max-width: 540px) {
  .gm-codex-copy-btn {
    position: static;
    transform: none;
    margin: 12px auto 0;
    display: flex;
  }
}
.gm-codex-copy-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") no-repeat center / contain;
}

.gm-codex-expiry {
  margin-top: 14px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.82);
  font-variant-numeric: tabular-nums;
}
.gm-codex-expiry strong {
  color: #ffffff;          /* high-contrast on the green so the counter is the first thing the eye finds */
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}
/* Hint sentence next to the timer — wraps onto its own line on narrow
   screens so the expiry value isn't crowded. */
.gm-codex-expiry-hint {
  display: inline-block;
  margin-left: 4px;
  color: #cbd5e1;
}
@media (max-width: 540px) {
  .gm-codex-expiry-hint { display: block; margin: 4px 0 0; }
}

/* ── HOW TO CONNECT steps ── */
.gm-codex-howto {
  padding: 22px 24px 12px;
}
.gm-codex-howto-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #6b7280;
  margin-bottom: 14px;
}
.gm-codex-step {
  display: flex;
  gap: 16px;
  padding: 6px 0 18px;
  position: relative;
}
/* Vertical guide line between step numbers (skip the last step) */
.gm-codex-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 32px;
  bottom: 0;
  width: 1px;
  background: #e5e7eb;
}
.gm-codex-step-num {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  z-index: 1;
}
.gm-codex-step-body {
  flex: 1 1 auto;
  min-width: 0;
}
.gm-codex-step-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--bde-headings-color, #0f172a);
  margin-bottom: 4px;
  font-family: inherit;
}
.gm-codex-step-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--bde-body-text-color, #6b7280);
  margin: 0 0 10px;
  font-family: inherit;
}
.gm-codex-step-desc strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  padding: 1px 6px;
  color: #0f172a;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* "Open ChatGPT" link in Step 1 — brand green to match the device-code
   header and the rest of the site. We use !important here because
   Breakdance's generic <a> styles (which were rendering this as bright
   royal blue) win the cascade otherwise. */
.gm-codex-open-link,
.gm-codex-open-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  background: var(--bde-brand-primary-color, #16a34a) !important;
  color: #ffffff !important;
  border-radius: 11px;
  text-decoration: none !important;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  border: 1px solid var(--bde-brand-primary-color, #16a34a) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: background-color .15s ease, transform .1s ease;
}
.gm-codex-open-link:hover {
  background: var(--bde-brand-primary-color-darker, #15803d) !important;
  border-color: var(--bde-brand-primary-color-darker, #15803d) !important;
}
.gm-codex-globe,
.gm-codex-ext {
  width: 14px;
  height: 14px;
  background-color: currentColor;
}
.gm-codex-globe {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.gm-codex-ext {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ── Status pill at the bottom of the card ── */
.gm-codex-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 16px 18px;
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fafafa;
}
.gm-codex-pill-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: #64748b;
}
.gm-codex-pill-icon::before {
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") no-repeat center / contain;
}
.gm-codex-pill-label {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}
.gm-codex-pill-sub {
  font-size: 12.5px;
  color: #6b7280;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin-top: 2px;
}

/* Pill state variants — fired from renderCodexStatus() */
.gm-codex-pill.is-pending .gm-codex-pill-icon {
  background: #fef3c7;
  border-color: #fde68a;
  color: #b45309;
}
.gm-codex-pill.is-success {
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.gm-codex-pill.is-success .gm-codex-pill-icon {
  background: #d1fae5;
  border-color: #6ee7b7;
  color: #047857;
}
.gm-codex-pill.is-success .gm-codex-pill-label { color: #065f46; }
.gm-codex-pill.is-error {
  background: #fef2f2;
  border-color: #fecaca;
}
.gm-codex-pill.is-error .gm-codex-pill-icon {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

/* ── Hide the legacy Breakdance Step 3 chrome ──
   The injected .gm-codex-card replaces the original heading + button
   row entirely. We mount the card directly inside .bde-code-block-1190-114
   so we still need that container, but the "Sign in with ChatGPT"
   heading, the marketing copy, and the inline <button class="gm-connect">
   are dead weight that confuse the user (they ask "why do I need to
   click a button when the code is already there?"). */
#gm-step-4 .bde-div-1190-108,
#gm-step-4 .bde-heading-1190-109,
#gm-step-4 .bde-heading-1190-110,
#gm-step-4 .bde-heading-1190-112,
#gm-step-4 .bde-text-1190-113 {
  display: none !important;
}
#gm-step-4 .bde-code-block-1190-114 > .gm-connect,
#gm-step-4 .bde-code-block-1190-114 > button[data-gm="connect"],
#gm-step-4 .bde-code-block-1190-114 > button:not(.gm-codex-copy-btn) {
  display: none !important;
}

/* The Breakdance authored wrapper for Step 3 (bde-div-1190-111) ships with
   a pale lavender background (rgb(238,244,255)) baked into its inline
   element styles. That tint reads as "blue" against the green device-code
   card and the rest of the white wizard surface, and the user has flagged
   it repeatedly. Kill it (plus a couple of sibling wrappers that might
   carry the same authored fill) so Step 3 sits on a clean white canvas
   like every other step. */
#gm-step-4 .bde-div-1190-111,
#gm-step-4 .bde-div-1190-115,
#gm-step-4 .bde-code-block-1190-114 {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

/* ── Step 3 attention-grabbing intro callout ──
   The original "YOUR DEVICE CODE — KEEP THIS WINDOW OPEN" label inside
   the green box wasn't enough — users were getting confused on the
   openai.com side and going looking for a code elsewhere. This banner
   sits ABOVE the green card and explicitly tells the user: "OpenAI will
   ask for this code, here it is, don't go hunting." High contrast,
   yellow-tinted so it reads as a heads-up notice not just decoration. */
.gm-codex-intro {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  /* Sits flush against the top of the card (.gm-codex-card has
     overflow:hidden so margins don't collapse out). The bottom is pulled
     tight against the green device-code header so the yellow notice and
     the green box read as one unit, not two stacked cards. */
  margin: 0;
  padding: 14px 18px;
  background: #fffbeb;
  border: 0;
  border-bottom: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: 0;
  font-family: inherit;
}
.gm-codex-intro-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f59e0b;
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  margin-top: 1px;
}
.gm-codex-intro-body {
  flex: 1 1 auto;
  min-width: 0;
}
.gm-codex-intro-title {
  font-size: 15.5px;
  font-weight: 700;
  color: #78350f;
  line-height: 1.3;
  margin-bottom: 3px;
}
.gm-codex-intro-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: #92400e;
  margin: 0;
}

/* ── Mobile (≤540px) — keep the device code as one tidy row ──
   At iPhone 14 Pro Max width (430px) the original 38px cells overflowed
   the container and wrapped onto a second line with the copy button
   stranded on the right. We shrink cells + padding so 9 chars + 1 dash
   sit comfortably in one row, and stack the copy button below. */
@media (max-width: 540px) {
  .gm-codex-card {
    border-radius: 14px;
  }
  .gm-codex-device {
    padding: 20px 12px 18px;
  }
  .gm-codex-cells {
    gap: 4px;
    flex-wrap: nowrap;
  }
  .gm-codex-cell {
    width: 30px;
    height: 40px;
    font-size: 17px;
    border-radius: 7px;
  }
  .gm-codex-cell-sep {
    width: 6px;
    font-size: 16px;
  }
  .gm-codex-device-label {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    margin-bottom: 12px;
  }
  .gm-codex-howto {
    padding: 18px 16px 6px;
  }
  .gm-codex-step {
    gap: 12px;
    padding: 4px 0 16px;
  }
  .gm-codex-pill {
    margin: 4px 12px 14px;
    padding: 10px 12px;
    gap: 10px;
  }
  .gm-codex-pill-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
  }
  .gm-codex-open-link {
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
    font-size: 13px;
    /* The auth URL is one long string; let the browser shrink the
       font slightly rather than splitting "device" mid-word. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .gm-codex-open-link [data-role="codex-open-label"] {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
}

/* ── Step 1: email plugin-activation hint ──────────────────────────────
   Amber palette so the user actually notices it — green felt too
   "everything's fine", but this email choice WILL matter later when the
   plugin activation flow lands. Warning triangle icon prefix reinforces
   "pay attention" without being alarming-red. */
.gm-email-notice {
  display: grid !important;
  grid-template-columns: 14px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 7px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-column: 1 / -1 !important;
  clear: both !important;
  margin-top: 6px !important;
  padding: 7px 10px !important;
  box-sizing: border-box !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  color: #92400e !important;
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  border-left: 2px solid #f59e0b !important;
  border-radius: 7px !important;
  position: static !important;
}
.gm-email-notice::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-top: 2px;
  background-color: #d97706;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ── Account-finalizing interstitial ────────────────────────────────────
   Full-page overlay shown after Step 2 (2FA verify) while the browser
   transitions to the dashboard. The ring spins briefly, then fills out
   and a check stroke draws itself before redirect. */
.gm-creating-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 999999;
  animation: gm-creating-fadein 240ms ease;
}
.gm-creating-overlay.gm-creating-fadeout {
  animation: gm-creating-fadeout 320ms ease forwards;
}
@keyframes gm-creating-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes gm-creating-fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.gm-creating-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.gm-creating-svg {
  display: block;
  width: 96px;
  height: 96px;
}

/* Loading state — partial arc spinning around the ring. dasharray "40 110"
   leaves a 40-unit arc on a ~150-unit circumference. transform-origin is
   the SVG centre so rotation looks balanced. */
.gm-creating-ring {
  transform-origin: 28px 28px;
  stroke-dasharray: 40 110;
  stroke-linecap: round;
  animation: gm-creating-spin 1s linear infinite;
}
@keyframes gm-creating-spin {
  to { transform: rotate(360deg); }
}

/* Check stroke is invisible until success — dashoffset = path length so
   none of it is drawn. The success class drops dashoffset to 0 over 500ms
   so the check line "draws itself" left-to-right. */
.gm-creating-check {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  opacity: 0;
}

.gm-creating-overlay.gm-creating-success .gm-creating-ring {
  animation: none;
  stroke-dasharray: 200;          /* enough to cover the full circumference */
  transition: stroke-dasharray 280ms ease;
}
.gm-creating-overlay.gm-creating-success .gm-creating-check {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 500ms cubic-bezier(.25, .8, .25, 1) 120ms,
              opacity 80ms ease;
}

.gm-creating-text {
  font-size: 16px;
  font-weight: 600;
  color: #16140f;
  letter-spacing: 0.2px;
}

/* Sub-text below the account-finalizing message. Kept muted so the primary
   text stays the focal point. */
.gm-creating-sub {
  font-size: 13.5px;
  color: #7d7c7a;
  letter-spacing: 0.1px;
  max-width: 320px;
  line-height: 1.45;
  min-height: 18px; /* prevents card height jumping when text empties */
}
/* Error / retry state — ring goes red, message turns into an actionable
   block with a "Try again" button that re-runs the whole provisioning. */
.gm-creating-overlay.gm-creating-failed .gm-creating-ring {
  animation: none;
  stroke: #ef4444;
  stroke-dasharray: 200;
}
.gm-creating-overlay.gm-creating-failed .gm-creating-check {
  display: none;
}
.gm-creating-overlay.gm-creating-failed .gm-creating-text {
  color: #b91c1c;
}
.gm-creating-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.gm-creating-actions[hidden],
.gm-creating-overlay:not(.gm-creating-failed) .gm-creating-actions {
  display: none !important;
}
.gm-creating-overlay.gm-creating-failed .gm-creating-actions {
  display: flex !important;
}
.gm-creating-actions .gm-primary {
  font-family: inherit;
  cursor: pointer;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 22px;
  background: linear-gradient(180deg, #1a8f44 0%, #16783a 100%);
  color: #fff;
  border: 1px solid #16783a;
  line-height: 1;
}
.gm-creating-actions .gm-primary:hover { filter: brightness(1.05); }

/* ── Step 4 · Codex device-auth panel ───────────────────────────────────
   Lightweight inline panel injected into the existing "Sign in with
   ChatGPT" card. Shows the device_code the user has to enter on
   openai.com, an open-in-new-tab link, and a live status dot that pulses
   while we poll /admin/codex-auth-status. */
.gm-codex-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #d6e0e9;
  border-radius: 12px;
  background: #f8fbff;
}
.gm-codex-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
}
.gm-codex-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4d5551;
}
.gm-codex-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #d6e0e9;
  border-radius: 8px;
  color: #16140f;
}
.gm-codex-copy {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid #d6e0e9;
  cursor: pointer;
  color: #4d5551;
}
.gm-codex-copy:hover { background: #eef4fc; }
.gm-codex-open {
  font-size: 14px;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
}
.gm-codex-open:hover { text-decoration: underline; }
.gm-codex-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #4d5551;
}
.gm-codex-status .gm-codex-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
}
.gm-codex-status.is-pending .gm-codex-dot {
  background: #2563eb;
  animation: gm-codex-pulse 1.4s ease-in-out infinite;
}
.gm-codex-status.is-success .gm-codex-dot { background: #16a34a; }
.gm-codex-status.is-error   .gm-codex-dot { background: #ef4444; }
.gm-codex-status.is-success { color: #166534; font-weight: 600; }
.gm-codex-status.is-error   { color: #b91c1c; }
@keyframes gm-codex-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(1.25); }
}

/* "Finish setup" link — visually disabled until codex is connected. The
   JS toggles .gm-disabled and aria-disabled; click is also intercepted in
   wizard.js so toggling here is purely a visual cue. */
.gm-nav a.gm-primary.gm-disabled,
.gm-nav button.gm-primary.gm-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* ── Sign-in popup: six-digit OTP boxes ─────────────────────────────────
   Mirrors the wizard step 2 box row visually so users see a consistent
   pattern across signup and signin. The hidden source #otp_code keeps its
   own width:100% — set via Breakdance — but display:none takes it out of
   layout, so the boxes row can sit flush in the same form cell. */
.gm-otp-boxes {
  display: flex;
  gap: 10px;
  width: 100%;
  margin: 2px 0 4px;
}

/* The Breakdance form CSS resets <input> borders globally via
   `.breakdance-form input { border: ... }`, which beats my class selector
   on specificity grounds. !important on the visibility-critical props
   keeps the boxes visible even when Breakdance updates its form bundle.
   Using two stacked class selectors (.gm-otp-boxes .gm-otp-box) also
   raises specificity, but !important is what lets us survive a future
   Breakdance update that adds even higher-weight resets. */
.gm-otp-boxes .gm-otp-box {
  flex: 1 1 0 !important;
  min-width: 36px !important;
  height: 56px !important;
  text-align: center !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--bde-headings-color, #16140f) !important;
  background-color: #ffffff !important;
  /* #b8bdbc is muted enough that the empty boxes don't shout, but still
     contrast against the white card so the user reads "input slots", not
     "blank space". The earlier #9aa0a6 was correct in contrast but felt
     too dark next to the gradient panel; this softens it without losing
     legibility. */
  border: 1.5px solid #b8bdbc !important;
  border-radius: 12px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}
.gm-otp-boxes .gm-otp-box::-webkit-outer-spin-button,
.gm-otp-boxes .gm-otp-box::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.gm-otp-boxes .gm-otp-box:hover {
  border-color: #8a9290 !important;
}
/* Focus glow uses the same green as the brand primary so it ties back to
   the Submit button. 4px ring + saturated green border = visible at a glance
   without darkening the text. Border width stays 1.5px so the box never
   shifts size when focus moves between cells. */
.gm-otp-boxes .gm-otp-box:focus {
  outline: none !important;
  border-color: #16a34a !important;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.22) !important;
  background-color: #fafefa !important;
}
/* When a digit has been entered, dim the border a touch so the eye knows
   "this one's done" — focused box still wins visually via the ring.
   Mid-gray (#7a8079), not black, so the row reads as state-change rather
   than alarming-emphasis. */
.gm-otp-boxes .gm-otp-box:not(:placeholder-shown),
.gm-otp-boxes .gm-otp-box[value]:not([value=""]) {
  border-color: #7a8079 !important;
}

/* ── Popup 803 "No account yet?" right panel polish ─────────────────────
   The defaults left the lightning icon faded, the badge text gray, and
   the three step cards with no clear radius. Stable Breakdance class
   names (`bde-{type}-{post_id}-{nid}`) let us target each spot without
   touching the page builder definition.

   122 = lightning icon
   123 = "NEW HERE" badge
   120 = icon + heading row
   146 / 152 / 158 = the three step cards
   138 = "See plans & buy Godmode" CTA */
/* Icon 122 was configured as Lucide's outline `icon-zap` (stroke art),
   which looked like a thin gray bolt next to the solid-black bolt used
   in the left pane (icon 140 = `icon-bolt`). We hide the source SVG and
   paint the wrapper with the SAME solid-bolt path used in 140, masked
   in black — visually identical to the Welcome-back icon, no Breakdance
   builder swap needed. */
.bde-icon-803-122 svg {
  display: none !important;
}
.bde-icon-803-122 {
  display: inline-block !important;
  width: 32px !important;
  height: 32px !important;
  background-color: #000 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* "No account yet?" heading — force black, the heading preset rendered
   it as a dark-grey body colour. */
.bde-heading-803-119,
.bde-heading-803-119 h1,
.bde-heading-803-119 h2,
.bde-heading-803-119 h3,
.bde-heading-803-119 h4 {
  color: #000 !important;
}

.bde-badge-803-123 {
  color: #16a34a !important;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.bde-div-803-120 {
  gap: 14px !important;             /* breathing room between bolt + heading */
  align-items: center;
  margin-bottom: 4px;
}

.bde-div-803-146,
.bde-div-803-152,
.bde-div-803-158 {
  border-radius: 14px !important;
  overflow: hidden;
}

/* Step number badges (141 / 147 / 153) — Breakdance laid these out as
   small dark rectangles. Square shape with a touch of radius keeps them
   reading as "step markers" and matches the wizard's progress squares.
   flex:0 0 36px stops them stretching when the parent row grows. */
.bde-div-803-141,
.bde-div-803-147,
.bde-div-803-153 {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  flex: 0 0 36px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.bde-div-803-141 .bde-text,
.bde-div-803-147 .bde-text,
.bde-div-803-153 .bde-text,
.bde-text-803-142,
.bde-text-803-148,
.bde-text-803-154 {
  line-height: 1 !important;
}

/* Description "Godmode accounts are created together with your license…"
   was rendering as small gray body text on the green gradient — hard to
   read. Bump to 16px and switch to the headings color so it carries the
   same visual weight as the left-pane subhead. */
.bde-rich-text-803-124,
.bde-rich-text-803-124 p {
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--bde-headings-color, #16140f) !important;
}
.bde-rich-text-803-124 strong {
  color: var(--bde-headings-color, #16140f) !important;
  font-weight: 700 !important;
}

/* Right pane (106) — collapsed by default, slides out when the user
   clicks "No account yet?" below the Submit button. The body class
   `gm-popup-803-expanded` is toggled by signin.js.
   max-width:0 + overflow:hidden hides content while the popup container
   shrinks naturally (Breakdance lays the panes out as flex children, so
   collapsing one shrinks the whole popup width). The large
   max-width:1200 expanded target lets the natural pane width cap inside
   it — we transition the cap, the actual width follows. */
.bde-div-803-106 {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  transition:
    max-width 500ms cubic-bezier(.2,.7,.2,1),
    opacity 350ms ease 80ms,
    padding 500ms ease,
    margin 500ms ease !important;
}
body:not(.gm-popup-803-expanded) .bde-div-803-106 {
  max-width: 0 !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  opacity: 0 !important;
  border: 0 !important;
}
body.gm-popup-803-expanded .bde-div-803-106 {
  max-width: 1200px !important;
  opacity: 1 !important;
}
.bde-div-803-108 {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding-bottom: 28px !important;
}

/* CTA "See plans & buy Godmode" — keep it present but less shouty than
   the green plan-card buttons next to it. Padding tightens it; the
   shadow drop softens its competition with the form's submit button.
   margin-top:auto inside the flex column above pushes it (and the JS-
   injected T&C row that follows it) to the panel bottom. */
.bde-button-803-138 {
  margin-top: auto !important;
}
.bde-button-803-138 button,
.bde-button-803-138 a {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
  box-shadow: none !important;
  /* space-between pushes the lightning bolt all the way left and the
     arrow all the way right, with the label centred between them. */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
}

/* Lightning bolt before the CTA text. Inline-encoded SVG using mask
   means the icon picks up `currentColor` automatically — no separate
   asset to ship and the icon always matches the button text colour.
   Same bolt geometry as the wizard topbar icon for visual consistency. */
.bde-button-803-138 button::before,
.bde-button-803-138 a::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6l1-8z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6l1-8z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Arrow after the CTA text. Switched from a Unicode → (browser default
   was too heavy / inconsistent) to a hand-tuned SVG line arrow at 1.6
   stroke. mask-image lets the arrow pick up currentColor, so it always
   matches the button text. */
.bde-button-803-138 button::after,
.bde-button-803-138 a::after {
  content: "" !important;
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-5-5 5 5-5 5'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-5-5 5 5-5 5'/%3E%3C/svg%3E") no-repeat center / contain !important;
  font-size: 0 !important;
  transform: none !important;
}

/* 2FA method picker — two small links + a status line. JS injected just
   below the OTP boxes. Default (TOTP) keeps both links neutral; switching
   to email or recovery marks the corresponding link as "active". */
.gm-method-picker {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
  font-size: 13px;
}
.gm-method-picker a {
  color: #4d5551 !important;
  text-decoration: none !important;
  font-weight: 600;
  border-bottom: 1px dashed #c2c8c2;
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.gm-method-picker a:hover {
  color: #16a34a !important;
  border-color: #16a34a;
}
.gm-method-picker.gm-method-email a[data-gm-method="email"],
.gm-method-picker.gm-method-recovery a[data-gm-method="recovery"] {
  color: #16a34a !important;
  border-color: #16a34a;
  border-bottom-style: solid;
}
.gm-method-status {
  width: 100%;
  font-size: 12.5px;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f0fff0;
  border: 1px solid #c7e8c7;
  color: #1b5e20;
  margin-top: 6px;
}
.gm-method-status[data-tone="warn"] {
  background: #fff7ed;
  border-color: #fdba74;
  color: #9a3412;
}
.gm-method-status[data-tone="ok"] {
  background: #ecfdf5;
  border-color: #86efac;
  color: #14532d;
}

/* Recovery-code input — replaces the 6-box widget when the user picks
   "Use recovery code instead". Single full-width text field, monospace
   so the XXXX-XXXX dashes line up. */
.gm-recovery-input {
  display: block !important;
  width: 100% !important;
  margin: 4px 0 6px;
  height: 52px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 18px !important;
  letter-spacing: 0.05em;
  color: var(--bde-headings-color, #16140f) !important;
  background: #fff !important;
  border: 1.5px solid #b8bdbc !important;
  border-radius: 12px !important;
  padding: 0 14px !important;
  text-align: center;
  box-sizing: border-box !important;
}
.gm-recovery-input:focus {
  outline: none !important;
  border-color: #16a34a !important;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.22) !important;
}

/* "No account yet?" link below the Submit button. Centered, low-key,
   the green span makes the actionable bit jump out. JS-injected so the
   markup stays out of the popup tree. */
.gm-no-account {
  width: 100%;
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  color: #4d5551;
}
.gm-no-account a {
  color: #4d5551 !important;
  text-decoration: none !important;
  font-weight: 500;
}
.gm-no-account a span {
  color: #16a34a !important;
  font-weight: 700;
  margin-left: 6px;
}
.gm-no-account a:hover span {
  text-decoration: underline;
}

/* T&C disclaimer line — small, low-contrast, links underlined.
   `.gm-803-tos` is a class we set on the new RichText node via the
   builder so the styles attach to that one element only. */
.gm-803-tos,
.gm-803-tos p {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: #4d5551 !important;
  text-align: center !important;
  margin-top: 14px !important;
}
.gm-803-tos a {
  color: var(--bde-headings-color, #16140f) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.gm-803-tos a:hover {
  color: #16a34a !important;
}