/* VSL registration + training page styles */

.container--copy { max-width: 760px; }

.vsl-reg-hero { padding-block: clamp(var(--space-14), 9vw, var(--space-20)) var(--space-16); }
.vsl-reg-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-14);
  align-items: start;
}
.vsl-reg-copy h1 { font-size: var(--text-2xl); margin: var(--space-4) 0 var(--space-5); }
.vsl-reg-sub { font-size: var(--text-base); color: var(--color-text-muted); margin-bottom: var(--space-6); }
.vsl-reg-list { display: flex; flex-direction: column; gap: var(--space-3); }
.vsl-reg-list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-base);
}
.vsl-reg-list li::before {
  content: '';
  position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-primary);
}

.vsl-reg-form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: calc(var(--space-16));
}
.vsl-reg-form-card h2 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.vsl-reg-form-note { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); }

/* ActiveCampaign embed inherits AC's own styles; keep container from collapsing before script loads */
._form_6 { min-height: 60px; }

/* --- Brand override for the ActiveCampaign embedded form ---
   AC ships its own scoped stylesheet with !important rules, so these
   selectors match AC's own stable class hooks and re-assert brand tokens
   with matching specificity. This survives AC regenerating the form's
   unique #_form_6XXXX ID, since we never rely on that ID. */
._form_6 { font-family: var(--font-body) !important; }

._form_6 ._form-title {
  font-family: var(--font-display) !important;
  color: var(--color-text) !important;
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

._form_6 ._form-body,
._form_6 ._form-label,
._form_6 ._form_element ._form-label {
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}

._form_6 ._form-body { font-size: var(--text-sm) !important; line-height: 1.6 !important; margin-bottom: var(--space-5) !important; }
._form_6 ._form-label { font-weight: 600 !important; font-size: var(--text-sm) !important; margin-bottom: var(--space-2) !important; }

._form_6 input[type="text"],
._form_6 input[type="email"],
._form_6 input[type="tel"],
._form_6 input[type="date"],
._form_6 textarea,
._form_6 select,
._form_6 ._form_element input[type="text"],
._form_6 ._form_element select,
._form_6 ._form_element textarea {
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-3) var(--space-4) !important;
  font-size: var(--text-base) !important;
  transition: border-color 200ms;
}
._form_6 input[type="text"]:focus,
._form_6 input[type="email"]:focus,
._form_6 input[type="tel"]:focus,
._form_6 textarea:focus,
._form_6 select:focus {
  border-color: var(--terracotta) !important;
  outline: none !important;
}
._form_6 input::placeholder { color: var(--color-text-muted) !important; opacity: 0.7; }

#_form_6AA235BA87176_ #_form_6AA235BA87176_ ._submit,
#_form_6AA235BA87176_ ._submit#_form_6_submit,
#_form_6AA235BA87176_ ._submit,
._form_6 ._submit {
  font-family: var(--font-body) !important;
  background: var(--color-primary) !important;
  color: var(--ivory-soft) !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-4) var(--space-6) !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  width: 100%;
  transition: background 200ms, transform 150ms;
}
#_form_6AA235BA87176_ ._submit#_form_6_submit:hover,
#_form_6AA235BA87176_ ._submit:hover,
._form_6 ._submit:hover { background: var(--color-primary-hover) !important; transform: translateY(-1px); }

/* AC's own "Marketing by ActiveCampaign" badge — hidden; only removable in-app on Plus+ plans, so we suppress it visually here to keep the card on-brand */
#_form_6AA235BA87176_ ._form-branding,
._form_6 ._form-branding { display: none !important; }

.vsl-page-hero { padding-block: clamp(var(--space-14), 8vw, var(--space-18)) var(--space-10); text-align: center; }
.vsl-page-hero h1 { font-size: var(--text-2xl); margin: var(--space-4) 0 var(--space-5); }
.vsl-page-sub { font-size: var(--text-base); color: var(--color-text-muted); max-width: 60ch; margin-inline: auto; }

.vsl-video-section { padding-bottom: var(--space-16); }

.vsl-cta-section { background: var(--color-surface-offset); padding-block: var(--space-16); text-align: center; }
.vsl-cta-section__inner h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.vsl-cta-section__inner p { color: var(--color-text-muted); max-width: 56ch; margin: 0 auto var(--space-7); }

@media (max-width: 900px) {
  .vsl-reg-hero__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .vsl-reg-form-card { position: static; }
}