body.register-page {
  background:
    radial-gradient(circle at top right, rgba(209, 84, 67, 0.08), transparent 26%),
    radial-gradient(circle at top left, rgba(29, 69, 141, 0.08), transparent 30%),
    linear-gradient(180deg, #fcfbf8 0%, var(--bl-bg) 100%);
}

.register-main {
  padding: 1.5rem 0 4rem;
}

.register-shell {
  padding-top: 1rem;
}

.register-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
  gap: 2rem;
  align-items: start;
}

.register-story,
.register-card {
  border-radius: var(--bl-radius-lg);
}

.register-story {
  padding: clamp(2rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.register-story::after {
  content: "";
  position: absolute;
  right: -5%;
  bottom: -12%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(209, 84, 67, 0.12), transparent 70%);
}

.register-story h1,
.register-card h2 {
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.06;
}

.register-story h1 {
  font-size: clamp(2.3rem, 4.1vw, 4.35rem);
  max-width: 11ch;
}

.register-subtext,
.register-intro,
.form-helper,
.form-footer,
.step-note {
  color: var(--bl-text-muted);
  line-height: 1.65;
}

.register-subtext {
  margin: 1.2rem 0 0;
  max-width: 58ch;
  font-size: 1.04rem;
}

.register-points {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.9rem;
}

.register-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--bl-text);
  font-weight: 500;
}

.register-points li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 0.45rem;
  flex: 0 0 10px;
  background: linear-gradient(135deg, var(--bl-blue), var(--bl-red));
}

.register-card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  align-self: start;
}

.register-card h2 {
  font-size: clamp(2rem, 3vw, 2.7rem);
  margin-bottom: 0.4rem;
}

.register-intro {
  margin: 0 0 1.4rem;
  font-size: 1rem;
}

.register-form {
  display: grid;
  gap: 1rem;
}

.form-row,
.half-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.half-input {
  max-width: none;
}

.form-section {
  display: grid;
  gap: 0.85rem;
  padding-top: 0.35rem;
}

.form-section + .form-section {
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(29, 69, 141, 0.10);
}

.form-section-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--bl-blue);
  letter-spacing: 0.01em;
}

.custom-select1 {
  position: relative;
  max-width: none;
  left: auto;
  height: auto;
  font-size: 1rem;
}

.custom-select1 select {
  display: block;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--bl-blue) 50%),
    linear-gradient(135deg, var(--bl-blue) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 3rem;
}

.select-selected,
.select-items {
  display: none !important;
}

.register-card .g-recaptcha {
  margin-top: 0.5rem;
  overflow: auto;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.25rem 0;
}

.checkbox-row input[type="checkbox"],
.checkbox-row input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin-top: 0.2rem;
  accent-color: var(--bl-blue);
}

.checkbox-row label {
  font-weight: 500;
  line-height: 1.55;
}

.register-actions {
  display: grid;
  gap: 0.9rem;
  margin-top: 0.4rem;
}

.register-actions .btn,
.register-actions input[type="submit"],
.register-actions .lnbtn {
  width: 100%;
}

.lnbtn {
  appearance: none;
  border: 0;
  background: var(--bl-blue);
  color: #fff;
  border-radius: 999px;
  min-height: 48px;
  padding: 0.85rem 1.2rem;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: var(--bl-shadow-md);
  transition: 180ms ease;
}

.lnbtn:hover {
  background: var(--bl-blue-dark);
  transform: translateY(-1px);
}

.loginbox,
.loginimage,
.loginstyle,
.loginheader {
  all: unset;
}

.register-footer {
  padding: 1.5rem 0 0.25rem;
  text-align: center;
  color: var(--bl-text-muted);
  font-size: 0.95rem;
}

.register-footer p {
  margin: 0.25rem 0;
}

@media (max-width: 980px) {
  .register-grid {
    grid-template-columns: 1fr;
  }

  /* FORM FIRST on narrow screens.
     The story panel is markup-first because on desktop it is the left column.
     Once the grid collapses to one column that puts ~2 screens of marketing
     ABOVE the first input — on a page the visitor reached by deciding to sign
     up. Reordering visually (not in the DOM) keeps the desktop layout and the
     reading order for assistive tech, and moves the first field from ~1640px
     to roughly 200px. */
  .register-card  { order: 1; }
  .register-story { order: 2; }

  /* Tap targets. The footer legal buttons render at 22px and the secondary
     buttons at 39px, both under the 44px minimum — awkward on a phone and the
     kind of thing that quietly costs completions. */
  .register-footer button,
  .register-footer a,
  .info-link-inline,
  .mini-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .register-story h1 {
    max-width: 13ch;
  }
}

@media (max-width: 700px) {
  .form-row,
  .half-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .register-main {
    padding-bottom: 2rem;
  }

  .register-card,
  .register-story {
    padding: 1.5rem;
    border-radius: 22px;
  }

  .register-card .g-recaptcha {
    transform-origin: left top;
  }
}