/* Unica 77 LL Font - CloudBees Brand Font */
@font-face {
  font-family: "Unica 77 LL";
  src: url("../fonts/Unica77LL-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* CSS Variables - Dark Theme (Default - from Figma) */
:root {
  /* Surface/Background colors */
  --surface-primary: #0f1218;
  --surface-secondary: #1a1a1a;
  --surface-error: #291715;
  --surface-tooltip: #292a2d;

  /* Text colors */
  --text-primary: #f6f6ff;
  --text-secondary: #89919f;
  --text-tertiary: rgba(255, 255, 255, 0.7);
  --text-on-accent: #d9e9ff;
  --text-inverse: #0f1218;
  --text-error: #d32f2f;
  --text-error-icon: #ce2b18;
  --text-error-surface: #f5d5d1;
  --text-link: #90caf9;
  --text-black: #000;
  --text-black-high: rgba(0, 0, 0, 0.87);
  --text-black-medium: rgba(0, 0, 0, 0.6);
  --text-black-low: rgba(0, 0, 0, 0.12);
  --text-white: #ffffff;
  --text-white-high: rgba(255, 255, 255, 0.87);
  --text-autofill: #f6f6ff;

  /* Border colors */
  --border-default: #979797;
  --border-subtle: grey;
  --border-focus: #e0e0e1;
  --border-error: #ce2b18;
  --border-separator: rgb(229 231 235);
  --border-accent: #0069ff;
  --border-black-low: rgba(0, 0, 0, 0.12);

  /* Action/Button colors */
  --action-primary-bg: #0069ff;
  --action-primary-text: #d9e9ff;
  --action-primary-border-active: white;
  --action-hover-bg: #f6f6ff;
  --action-hover-text: #0f1218;

  /* Provider button colors */
  --provider-fg: #2c2d45;
  --provider-bg: rgba(255, 255, 255, 0.87);
  --provider-fg-hover: rgba(255, 255, 255, 0.87);
  --provider-bg-hover: #2c2d45;

  /* Icon/Toggle colors */
  --icon-password-toggle: #616c7f;
  --icon-password-toggle-active: #f6f6ff;

  /* Shadow colors */
  --shadow-default: rgba(0, 0, 0, 0.12);
  --shadow-medium: rgba(0, 0, 0, 0.1);

  /* Marketing banner colors */
  --marketing-banner-bg: linear-gradient(90deg, #E6CEFF 0%, #E6CEFF 100%);
  --marketing-tag-bg: #0069ff;
  --marketing-tag-text: #ffffff;
  --marketing-title: #333333;
  --marketing-subtitle: #1a1a1a;
  --marketing-description: #666666;

  /* Autofill colors */
  --autofill-bg: #0f1218;

  /* Password strength */
  --success-container: #ECF6F1;
  --error-container: #FAEAE8;
  --success-progress: #36865A;
  --error-progress: #A52213;
}

/* Light Theme - System Preference - WCAG 2.1 AA Compliant */
@media (prefers-color-scheme: light) {
  :root {
    /* Surface/Background colors */
    --surface-primary: #ffffff;           /* Main background */
    --surface-secondary: #f8f9fa;         /* Alt background - 1.04:1 subtle */
    --surface-error: #fce8e6;             /* Error surface */
    --surface-tooltip: #616161;           /* Tooltip background (dark on light) */

    /* Text colors - All meet WCAG AA minimum (4.5:1) */
    --text-primary: #212121;              /* 16.1:1 - AAA - Body text */
    --text-secondary: #5f6368;            /* 7.6:1 - AAA - Secondary text */
    --text-tertiary: #80868b;             /* 5.1:1 - AA - Tertiary text */
    --text-on-accent: #ffffff;            /* Text on blue buttons */
    --text-inverse: #ffffff;              /* White text (for dark surfaces) */
    --text-error: #c5221f;                /* 7.4:1 - AAA - Error text */
    --text-error-icon: #b3261e;           /* 8.1:1 - AAA - Error icons */
    --text-error-surface: #c5221f;        /* Error on error surface */
    --text-link: #1967d2;                 /* 5.6:1 - AA+ - Links */
    --text-black: #000;
    --text-black-high: rgba(0, 0, 0, 0.87);
    --text-black-medium: rgba(0, 0, 0, 0.6);
    --text-black-low: rgba(0, 0, 0, 0.12);
    --text-white: #ffffff;
    --text-white-high: rgba(255, 255, 255, 0.87);
    --text-autofill: #212121;             /* Autofill text */

    /* Border colors */
    --border-default: #dadce0;            /* 1.4:1 - Default borders */
    --border-subtle: #e8eaed;             /* 1.2:1 - Subtle borders */
    --border-focus: #0b57d0;              /* 6.6:1 - AA+ - Focus indicator */
    --border-error: #b3261e;              /* 8.1:1 - AAA - Error borders */
    --border-separator: #e8eaed;          /* Separator lines */
    --border-accent: #0b57d0;             /* 6.6:1 - Accent borders */
    --border-black-low: rgba(0, 0, 0, 0.12);

    /* Action/Button colors - Blue semantic preserved */
    --action-primary-bg: #0b57d0;         /* 6.6:1 - AA+ - Primary button */
    --action-primary-text: #ffffff;       /* White text on blue */
    --action-primary-border-active: #1557b0; /* Active state border */
    --action-hover-bg: #1557b0;           /* 8.2:1 - AAA - Hover state */
    --action-hover-text: #ffffff;         /* White on hover */

    /* Provider button colors */
    --provider-fg: #2c2d45;               /* Dark text on light */
    --provider-bg: #f1f3f4;               /* Light background */
    --provider-fg-hover: #002a66;         /* Dark blue text (secondary button) */
    --provider-bg-hover: #cce1ff;         /* Light blue background (secondary button) */

    /* Icon/Toggle colors */
    --icon-password-toggle: #5f6368;      /* 7.6:1 - AAA - Toggle icon */
    --icon-password-toggle-active: #1967d2; /* 5.6:1 - AA+ - Active toggle */

    /* Shadow colors */
    --shadow-default: rgba(0, 0, 0, 0.12);
    --shadow-medium: rgba(0, 0, 0, 0.1);

    /* Marketing banner colors (same in light mode) */
    --marketing-banner-bg: linear-gradient(90deg, #E6CEFF 0%, #E6CEFF 100%);
    --marketing-tag-bg: #0b57d0;          /* Darker blue for better contrast */
    --marketing-tag-text: #ffffff;
    --marketing-title: #333333;
    --marketing-subtitle: #212121;
    --marketing-description: #5f6368;     /* 7.6:1 - AAA - Updated for consistency */

    /* Autofill colors */
    --autofill-bg: #e8f0fe;               /* Light blue tint for autofill */
  }
}

body {
  @apply m-0;
  font-family: Inter, sans-serif !important;
  font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
  font-display: swap;
  background: var(--surface-primary);
  color: var(--text-primary);
}

/* Two-column grid layout - full viewport 50/50 split */
body.flex.flex-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  padding: 0;
  min-height: 100vh;
}
* {
  letter-spacing: 0.15000000596046448px;
}

.list-decimal {
  color: var(--text-primary);
}

.separate {
  display: flex;
  align-items: center;
  text-align: center;
}

.separate:after,
.separate:before {
  content: "";
  flex: 1 1 0%;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: var(--border-separator);
}

.separate:not(:empty):after {
  margin-left: 0.5rem;
}

.separate:not(:empty):before {
  margin-right: 0.5rem;
}

/* Removed body::before - no longer needed for two-column layout */

.terms-of-use {
  padding-top: 2.25rem;
}

.cloudbees-input {
  padding: 8px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  color: var(--border-default);
  background-color: var(--surface-secondary);
}

.cloudbees-input::placeholder {
  color: var(--border-default);
}

.cloudbees-checkbox-label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  color: var(--text-black-high);
}

.cloudbees-checkbox {
  border: 1px solid var(--text-black-medium);
  border-radius: 4px;
}

.cloudbees-column {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  width: 100%;
  min-height: 100vh;
}

.cloudbees-column-nested {
  max-width: 750px;
  width: 100%;
  padding: 40px;
}

.cloudbees-logo-nav {
  margin-bottom: 0.25rem;
}

.cloudbees-tab__list {
  display: flex;
  justify-content: space-around;
  cursor: pointer;
  margin-bottom: 2.5rem;
}

/* Style the buttons that are used to open the tab content */
.cloudbees-tab__list button {
  background-color: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5rem;
  text-align: center;
  float: left;
  border: none;
  cursor: pointer;
  width: 50%;
  height: 40px;
  text-align: center;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
/* Hover effect removed per user request
.cloudbees-tab__list button:hover {
  background-color: var(--action-hover-bg);
  color: var(--action-hover-text) !important;
}
*/

.cloudbees-tab__list button:not(:active) {
  color: var(--text-secondary);
}

/* Create an active/current tablink class */
.cloudbees-tab__list button.active {
  color: var(--text-primary);
  cursor: default; /* active button is disabled */
  display: block !important;
  border-bottom: 2px solid var(--border-accent);
}

.rounded-cb {
  border-radius: 4px;
}

.cloudbees-input-error {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  color: var(--text-error);
}

.cloudbees-alert {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  text-align: left;
  border-radius: 0.25rem;
  color: var(--text-black);
  padding: 0.375rem 1rem;
  display: flex;
  align-items: center;
  &.cloudbees-error {
    background-color: var(--surface-error);
    margin-top: 2.25rem;
    color: var(--text-error-surface);
    letter-spacing: -0.18000000715255737px;
  }
  &.cloudbees-error .svg-icon {
    color: var(--text-error-icon);
  }
}

.cloudbees-fragment-mono {
  text-transform: uppercase;
  text-align: center;
  font-family: "Fragment Mono", serif;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 31.92px;
  letter-spacing: 1px;
  color: var(--text-secondary);
}

.text-secondary-cloudbees {
  border-color: var(--border-black-low);
  color: var(--text-black);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
}

.cloudbees-button-primary {
  padding: 11px 0;
  border-radius: 4px;
  color: var(--action-primary-text);
  background: var(--action-primary-bg);
  box-shadow: 0px 1px 5px 0px var(--shadow-default);
}

.cloudbees-button-primary:active {
  border: 1px solid var(--action-primary-border-active);
}

.cloudbees-button-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cloudbees-button-secondary {
  padding: 11px 0;
  border-radius: 4px;
  color: var(--provider-fg-hover);
  background: var(--provider-bg-hover);
  box-shadow: 0px 1px 5px 0px var(--shadow-default);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.cloudbees-button-secondary:hover {
  opacity: 0.9;
}

.cloudbees-button-secondary:active {
  opacity: 0.8;
}

.cloudbees-link-primary {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
}

.icon-provider-bg-color {
  color: var(--provider-fg);
  background-color: var(--provider-bg);
}

.icon-provider-bg-color:hover {
  color: var(--provider-fg-hover);
  background-color: var(--provider-bg-hover);
}

.cloudbees-link-secondary {
  font-size: 15px;
  font-weight: 500;
  line-height: 26px;
  text-align: left;
  color: var(--text-link);
  text-transform: uppercase;
  margin-top: 15px;
}

/* Sign In */

.cloudbees-login-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin-bottom: 2.5rem;
}

/* Social buttons ALWAYS stay side-by-side at all resolutions */

.cloudbees-login {
  padding-top: 3rem;
  padding-bottom: 1rem;
}

input.cloudbees-input[name="password"] + .cloudbees-toggle-password,
input.cloudbees-input[name="password-new"] + .cloudbees-toggle-password,
input.cloudbees-input[name="password-confirm"] + .cloudbees-toggle-password {
  position: absolute;
  top: 18px;
  right: 1rem;
  cursor: pointer;
  width: 22px;
  height: 16px;
  background-color: var(--icon-password-toggle);
  -webkit-mask-image: url("../img/eye.svg");
  mask-image: url("../img/eye.svg");
}

.cloudbees-toggle-password.crossed-eye {
  background-color: var(--icon-password-toggle-active) !important;
}

#forgot-password-link {
  font-size: 0.75rem;
  line-height: 19.92px;
  color: var(--text-secondary);
  text-decoration: underline;
  margin: 0px 14px;
}

/* Sign Up */

.cloudbees-register-section {
  gap: 1rem;
  margin-top: 0.5rem;
}

.arrow-button {
  width: 0;
  height: 0;
  padding: 10px;
  cursor: pointer;
}

.arrow-icon {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--text-link);
  cursor: pointer;
  margin-top: -2px;
}

.arrow-button-up {
  transform: rotateX(180deg);
}

.provider-buttons-container {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin-bottom: 2.5rem;
}

.container-open {
  display: grid;
}

.cloudbees-registration-subtitle {
  font-size: 16px;
  letter-spacing: -0.18000000715255737px;
}

.form-container {
  display: none;
}

.form-container-open {
  display: block;
}

.name-field-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.card-footer-text {
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.02em;
  text-align: center;
}

.cloudbees-verify-mail-footer {
  margin-top: 5%;
  color: var(--text-secondary);
  text-align: center;
}

.cloudbees-mail-to {
  color: var(--text-link);
}

.cloudbees-instruction,
.instruction {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--text-primary);
  text-align: center;
}

.cloudbees-main-container {
  display: flex;
  margin-top: 2rem;
}

.cloudbees-card {
  max-width: 450px;  /* Maximum for readability */
  width: 100%;       /* Fill available space */
  position: relative;
  overflow: visible;
}

.cb-card-content {
  position: relative;
  z-index: 2;
}

.cloudbees-heading {
  text-align: center;
  color: var(--text-primary);
}

.cloudbees-heading-subtitle {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: var(--text-primary);
  font-weight: 400;
}

.callout-text-main {
  margin-top: 1rem;
  font-size: 1.25rem;
  color: var(--text-primary);
  font-weight: 500;
}

.callout-text-subtitle {
  font-size: 18px;
  color: var(--text-primary);
  opacity: 60%;
  font-weight: 500;
}

.right-text-container {
  display: flex;
  flex-direction: column;
  /* margin-top: 5%; */
  justify-content: center;
}

#passwordTooltip {
  display: inline-block;
  color: var(--text-tertiary);
  position: absolute;
  width: 220px;
  background-color: var(--surface-tooltip);
  margin: 2%;
  /* height: 150px; */
  margin-top: -50;
  font-size: 12px;
  z-index: 500;
  padding: 4px 8px;
  font-weight: 500;
  line-height: 16px;
  border-radius: 4px;
}

#passwordTooltip::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-left: -5px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid var(--surface-tooltip);
  border-bottom: 5px solid transparent;
}

/* Disabled Button Tooltip */
.cb-disabled-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  background-color: var(--surface-tooltip);
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 2px 8px var(--shadow-medium);
}

.cb-disabled-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--surface-tooltip);
}

/* Light mode tooltip contrast */
@media (prefers-color-scheme: light) {
  .cb-disabled-tooltip {
    background-color: #2d2d2d;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .cb-disabled-tooltip::after {
    border-top-color: #2d2d2d;
  }
}

.cb-hint-error {
  color: var(--text-error);
}

.cb-hint-valid {
  color: var(--text-success);
}

/* CloudBees black swirl theme */

.cb-container {
  max-width: 1420px;
  display: flex;
}

@media screen and (max-width: 768px) {
  .cloudbees-main-container {
    flex-wrap: wrap;
  }
}

/* Custom Input */
.cb-input {
  position: relative;
}

.cb-input input::placeholder {
  opacity: 0;
}

.cb-input input {
  width: 100%;
  height: 56px;
  font-size: 1rem;
  padding: 10px;
  outline: none;
  box-sizing: border-box;
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  padding-left: 1rem;
  padding-right: 50px;
}

.cb-input input.cb-error-border {
  border-color: var(--border-error) !important;
}

.cb-input input.cb-valid-border {
  border-color: #43A770 !important;
}

/* Validation icons (adorn end) */
.cb-input .validation-icon {
  position: absolute;
  top: 28px;
  right: 1rem;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  pointer-events: none;
  display: none;
  z-index: 2;
}

/* For password fields with toggle, move validation icon to left of toggle button */
.cb-input:has(.cloudbees-toggle-password) .validation-icon {
  right: 2.75rem;
}

.cb-input .validation-icon.show {
  display: block;
}

.cb-input .validation-icon.checkmark {
  background-color: #43A770;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.cb-input .validation-icon.x-mark {
  background-color: var(--border-error, #dc2626);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.cb-input label {
  position: absolute;
  left: 10px;
  transform: translateY(-50%);
  letter-spacing: 1px;
  font-family: Inter, sans-serif;
  top: 0;
  font-size: 0.8rem;
  color: var(--text-tertiary);
  background: var(--surface-primary);
  padding: 0 7px;
  z-index: 1;
}

/* Label color for validation states */
.cb-input label.cb-label-error {
  color: var(--border-error, #dc2626) !important;
}

.cb-input label.cb-label-valid {
  color: #43A770 !important;
}
.cb-input legend > span {
  opacity: 0;
  padding: 7px;
  font-family: Inter, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
}

.cb-input fieldset {
  display: none;
}

.cb-input input:focus {
  border-color: var(--border-focus);
}

.cb-input input:focus + label {
  color: var(--border-focus);
}

.cb-input-error {
  color: var(--text-error-icon);
  font-size: 0.75rem;
  font-family: Inter, sans-serif;
  margin: 3px 14px 0px !important;
}

.cb-input input:-webkit-autofill {
  box-shadow: inset;
  -webkit-box-shadow: 0 0 0 30px var(--autofill-bg) inset !important;
  -webkit-text-fill-color: var(--text-autofill);
}

.cloudbees-toggle-password {
  position: absolute;
  top: 20px;
  right: 1rem;
  cursor: pointer;
  width: 22px;
  height: 16px;
  background-color: var(--border-default);
  -webkit-mask-image: url("../img/eye.svg");
  mask-image: url("../img/eye.svg");
}

.spinner-dual-ring,
.spinner-dual-ring:after {
  box-sizing: border-box;
}
.spinner-dual-ring {
  display: block;
  margin: 0;
  width: 30px;
  height: 20px;
}
.spinner-dual-ring:after {
  content: " ";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-color: currentColor currentColor currentColor transparent;
  animation: spinner-dual-ring 1.2s linear infinite;
}
@keyframes spinner-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.heading-content {
  padding-top: 2.5rem;
  font-size: 34px;
}

.cloudbees-back-to-signin {
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
/* Marketing Banner Styles - Full 50% Column Background */
.cloudbees-marketing-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--marketing-banner-bg);
  padding: 0;
  width: 100%;
  min-height: 100vh;
}

.cloudbees-marketing-content {
  max-width: 600px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cloudbees-marketing-headline {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.cloudbees-marketing-tag {
  display: inline-block;
  background: var(--marketing-tag-bg);
  color: var(--marketing-tag-text);
  font-family: "Unica 77 LL", sans-serif;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.12px;
  padding: 4px 16px;
  border-radius: 100px;
  align-self: flex-start;
}

.cloudbees-marketing-title {
  font-family: "Unica 77 LL", sans-serif;
  font-size: 35px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--marketing-title);
  margin: 0;
}

.cloudbees-marketing-body {
  display: flex;
  flex-direction: column;
  gap: 4px;  /* Reduced from 12px - Derry's feedback: subtitle and description closer together */
  font-family: "Unica 77 LL", sans-serif;
  font-size: 20px;
  line-height: 1.4;
}

.cloudbees-marketing-subtitle {
  color: var(--marketing-subtitle);
  margin: 0;
  font-weight: 400;
}

.cloudbees-marketing-description {
  color: var(--marketing-description);
  margin: 0;
  font-weight: 400;
}

.cloudbees-marketing-image {
  margin-top: 20px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 12px var(--shadow-medium);
}

.cloudbees-marketing-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 600px;
  border-radius: 6px;
}

/* Page-specific marketing banner backgrounds */
body[data-page-type="register"] .cloudbees-marketing-banner {
  background: var(--marketing-banner-bg);
}

/* Registration-specific marketing styles */

.registration-marketing-title {
  font-family: "Unica 77 LL", sans-serif;
  font-size: 35px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--marketing-title);
  margin: 0;
}

.registration-marketing-subtitle {
  font-family: "Unica 77 LL", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--marketing-subtitle);
  margin: 0;
}

.registration-marketing-description {
  font-family: "Unica 77 LL", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--marketing-description);
  margin: 0;
}

/* Body container for registration - 4px gap between subtitle and description */
body[data-page-type="register"] .cloudbees-marketing-body {
  gap: 4px;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  body.flex.flex-row {
    display: flex !important;
    justify-content: center;
    align-items: flex-start;
    padding: 0 !important;
  }

  .cloudbees-marketing-banner {
    display: none;
  }

  .cloudbees-column {
    width: 100%;
    max-width: 450px;
  }
}

@media (max-width: 768px) {
  .cloudbees-marketing-title {
    font-size: 28px;
  }

  .cloudbees-marketing-body {
    font-size: 16px;
  }

  .cloudbees-marketing-content {
    padding: 32px 24px;
  }
}

/* Password Requirements - Matches Figma FormHelperText */
.password-requirements {
  padding: 3px 14px 0 14px !important;
  margin: 0 !important;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.66;
  letter-spacing: 0.01px;
}

.password-success-container {
  background-color: var(--success-container);
}

.password-error-container {
  background-color: var(--error-container);
}

.password-success-progress {
  background-color: var(--success-progress);
}

.password-error-progress {
  background-color: var(--error-progress);
}

#password-strength-display{
  display: none;
  margin: 0.5rem 0 2rem 0;
}

.password-strength-container{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  font-family: "Fragment Mono";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}

.password-meter-container{
  width: 200;
  height: 4px;
  background-color: var(--error-container);
}

.password-meter{
  width: 0;
  height: 4px;
}

.pswd-rules-container ul{
  padding-left: 2.5rem;
}

.password-rules {
  font-size: 14px;
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
  list-style-type: disc;
}