:root
		{
			--flexroll-ink: #172033;
			--flexroll-muted: #667085;
			--flexroll-line: #e5e9f0;
			--flexroll-soft: #f7f9fc;
			--flexroll-brand: #0f4b8f;
			--flexroll-brand-dark: #0b426f;
			--flexroll-accent: #f5b84b;
		}

		body {
			;
			background: #ffffff;
		}

		.flexroll-page {
			min-height: 100vh;
			padding: 42px 0 64px;
			/* background: linear-gradient(180deg, rgba(15, 143, 114, 0.10) 0, rgba(247, 249, 252, 0) 360px), var(--flexroll-soft); */
		}

		.flexroll-shell {
			max-width: 1180px;
		}

		.flexroll-intro {
			margin-bottom: 28px;
		}

		.eyebrow {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			color: var(--flexroll-brand-dark);
			font-size: 0.78rem;
			font-weight: 700;
			letter-spacing: 0.04em;
			text-transform: uppercase;
			margin-bottom: 12px;
		}

		.eyebrow::before {
			content: "";
			width: 8px;
			height: 8px;
			border-radius: 50%;
			/* background: var(--flexroll-accent); */
		}

		.flexroll-title {
			color: var(--flexroll-ink);
			font-size: clamp(2rem, 4vw, 3.2rem);
			font-weight: 800;
			line-height: 1.02;
			margin: 0;
		}

		.flexroll-subtitle {
			color: var(--flexroll-muted);
			font-size: 1.02rem;
			line-height: 1.7;
			margin: 16px 0 0;
			max-width: 640px;
		}

		.trust-strip {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 10px;
			margin-top: 24px;
		}

		.trust-item {
			display: flex;
			align-items: center;
			gap: 10px;
			min-height: 48px;
			padding: 10px 12px;
			color: #2b3548;
			background: rgba(255, 255, 255, 0.78);
			border: 1px solid rgba(229, 233, 240, 0.9);
			border-radius: 8px;
			font-weight: 600;
			font-size: 0.9rem;
		}

		.trust-item i {
			color: var(--flexroll-brand);
			font-size: 1.2rem;
		}

		/* .side-panel, */
		.form-panel {
			background: #ffffff;
			border: 1px solid var(--flexroll-line);
			border-radius: 8px;
			/* box-shadow: 0 18px 45px rgba(23, 32, 51, 0.08); */
		}

		.flexroll-layout {
			align-items: stretch;
		}

		.flexroll-layout > [class*="col-"] {
			display: flex;
		}

		.form-panel {
			width: 100%;
		}

		.side-panel {
			width: 100%;
			min-height: 100%;
			padding: 24px;
			display: flex;
			flex-direction: column;
		}

		.side-logo {
			width: 54px;
			height: 54px;
			display: grid;
			place-items: center;
			border-radius: 8px;
			background: #e9edf7;
			margin-bottom: 18px;
		}

		.side-logo img {
			width: 34px;
			height: 34px;
			object-fit: contain;
		}

		.side-panel h2 {
			color: var(--flexroll-ink);
			font-size: 1.12rem;
			font-weight: 800;
			margin-bottom: 10px;
		}

		.side-panel p {
			color: var(--flexroll-muted);
			line-height: 1.65;
			margin-bottom: 20px;
		}

		.progress-list {
			display: grid;
			gap: 12px;
			padding: 18px 0;
			border-top: 1px solid var(--flexroll-line);
			border-bottom: 1px solid var(--flexroll-line);
		}

		.progress-item {
			display: flex;
			gap: 12px;
			align-items: flex-start;
			color: #344054;
			font-weight: 600;
		}

		.progress-index {
			width: 26px;
			height: 26px;
			flex: 0 0 26px;
			display: grid;
			place-items: center;
			border-radius: 50%;
			color: #ffffff;
			background: var(--flexroll-brand);
			font-size: 0.78rem;
			font-weight: 800;
		}

		.note-box {
			margin-top: auto;
			padding: 14px;
			border-radius: 8px;
			color: #5c430a;
			background: #fff7e6;
			border: 1px solid #f8dfa9;
			font-size: 0.9rem;
			line-height: 1.55;
		}

		.form-panel {
			overflow: hidden;
		}

		.form-panel-header {
			display: flex;
			justify-content: space-between;
			gap: 16px;
			align-items: center;
			padding: 24px 28px;
			border-bottom: 1px solid var(--flexroll-line);
			background: #ffffff;
		}

		.form-panel-header h2 {
			color: var(--flexroll-ink);
			font-size: 1.25rem;
			font-weight: 800;
			margin: 0;
		}

		.form-panel-header span {
			color: var(--flexroll-muted);
			font-size: 0.92rem;
		}

		.required-pill {
			flex: 0 0 auto;
			color: var(--flexroll-brand-dark);
			background: #e9edf7;
			border: 1px solid #ccd1ec;
			border-radius: 999px;
			padding: 7px 12px;
			font-size: 0.78rem;
			font-weight: 800;
		}

		.step-meter {
			display: grid;
			grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
			gap: 8px;
            width: 100%;
			padding: 16px 20px;
			background: #fbfcfe;
			border-bottom: 1px solid var(--flexroll-line);
		}

		.step-chip {
			display: flex;
			align-items: center;
			gap: 8px;
			min-height: 48px;
			padding: 5px 6px;
			color: var(--flexroll-muted);
			background: #ffffff;
			border: 1px solid var(--flexroll-line);
			min-width: 0;
			border-radius: 8px;
			font-weight: 500;
		}

		.step-chip span {
			width: 26px;
			height: 26px;
			display: grid;
			place-items: center;
			border-radius: 50%;
			color: var(--flexroll-muted);
			background: #eef2f7;
			font-size: 0.8rem;
			font-weight: 800;
		}

		.step-chip.is-active {
			color: var(--flexroll-brand-dark);
			border-color: #bdd3e7;
			background: #f0f2fb;
		}

		.step-chip.is-active span {
			color: #ffffff;
			background: var(--flexroll-brand);
		}

		.step-chip strong {
			font-size: 0.82rem;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.form-panel-body {
			padding: 20px;
		}

		.form-step {
			display: none;
		}

		.form-step.is-active {
			display: block;
		}

		.form-section {
			padding-bottom: 28px;
			margin-bottom: 28px;
			border-bottom: 1px solid var(--flexroll-line);
		}

		.form-section:last-of-type {
			border-bottom: 0;
			margin-bottom: 0;
		}

		.section-heading {
			display: flex;
			align-items: center;
			gap: 12px;
			margin-bottom: 18px;
		}

		.section-icon {
			width: 38px;
			height: 38px;
			flex: 0 0 38px;
			display: grid;
			place-items: center;
			color: var(--flexroll-brand);
			/* background: #e9edf7; */
			border-radius: 8px;
			font-size: 1.2rem;
		}

		.section-heading h3 {
			color: var(--flexroll-ink);
			font-size: 1rem;
			font-weight: 800;
			margin: 0;
		}

		.section-heading p {
			color: var(--flexroll-muted);
			font-size: 0.9rem;
			margin: 2px 0 0;
		}

		.form-label {
			color: #263244;
			font-weight: 700;
			margin-bottom: 8px;
		}

		.form-control,
		.form-select {
			min-height: 46px;
			border-color: #d9dee8;
			border-radius: 7px;
			color: var(--flexroll-ink);
		}

		textarea.form-control {
			min-height: 138px;
			resize: vertical;
		}

		.form-control:focus,
		.form-select:focus {
			border-color: var(--flexroll-brand);
			/* box-shadow: 0 0 0 0.2rem rgba(15, 143, 114, 0.14); */
		}

		.choice-grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 12px;
		}

		.choice-card {
			position: relative;
			min-height: 72px;
		}

		.choice-card input {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			cursor: pointer;
			z-index: 2;
		}

		.choice-card label {
			display: flex;
			align-items: center;
			min-height: 72px;
			width: 100%;
			padding: 14px 16px 14px 48px;
			color: #263244;
			background: #ffffff;
			border: 1px solid #dfe4ec;
			border-radius: 8px;
			font-weight: 700;
			line-height: 1.35;
			transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
		}

		.choice-card label::before {
			content: "";
			position: absolute;
			left: 16px;
			top: 50%;
			width: 18px;
			height: 18px;
			border: 2px solid #b7c0ce;
			border-radius: 5px;
			transform: translateY(-50%);
			background: #ffffff;
			transition: all 0.18s ease;
		}

		.choice-card input[type="radio"] + label::before {
			border-radius: 50%;
		}

		.choice-card input:checked + label {
			border-color: var(--flexroll-brand);
			background: #f0fbf8;
			/* box-shadow: 0 8px 22px rgba(15, 143, 114, 0.12); */
		}

		.choice-card input:checked + label::before {
			border-color: var(--flexroll-brand);
			background: var(--flexroll-brand);
			/* box-shadow: inset 0 0 0 4px #ffffff; */
		}

		.choice-card input.is-invalid + label {
			border-color: #dc3545;
			background: #fff6f6;
		}

		.terms-line {
			display: flex;
			gap: 10px;
			align-items: flex-start;
			padding: 14px;
			background: #fbfcfe;
			border: 1px solid var(--flexroll-line);
			border-radius: 8px;
		}

		.terms-line input {
			margin-top: 3px;
		}

		.submit-row {
			display: flex;
			justify-content: space-between;
			gap: 18px;
			align-items: center;
			padding-top: 24px;
			border-top: 1px solid var(--flexroll-line);
		}

		.step-actions {
			display: flex;
			justify-content: space-between;
			gap: 14px;
			align-items: center;
			padding-top: 24px;
			border-top: 1px solid var(--flexroll-line);
		}

		.submit-help {
			color: var(--flexroll-muted);
			font-size: 0.9rem;
			margin: 0;
		}

		.btn-flexroll {
			min-width: 190px;
			min-height: 48px;
			border: 0;
			border-radius: 7px;
			color: #ffffff;
			background: var(--flexroll-brand);
			font-weight: 800;
			/* box-shadow: 0 12px 26px rgba(15, 143, 114, 0.24); */
		}

		.btn-flexroll-light {
			min-width: 150px;
			min-height: 48px;
			border: 1px solid #d9dee8;
			border-radius: 7px;
			color: #263244;
			background: #ffffff;
			font-weight: 800;
		}

		.btn-flexroll-light:hover,
		.btn-flexroll-light:focus {
			color: var(--flexroll-brand-dark);
			border-color: #bde7dd;
			background: #f0fbf8;
		}

		.btn-flexroll:hover,
		.btn-flexroll:focus {
			color: #ffffff;
			background: var(--flexroll-brand-dark);
		}

		.invalid-feedback,
		.form-error-message,
		.form-errors {
			color: #dc3545;
		}

		@media(max-width: 991.98px) {
			.flexroll-page {
				padding-top: 28px;
			}

			.side-panel {
				position: static;
				min-height: auto;
			}
		}

		@media(max-width: 767.98px) {
			.trust-strip,
			.choice-grid {
				grid-template-columns: 1fr;
			}

			.form-panel-header,
			.step-meter,
			.form-panel-body {
				padding: 20px;
			}

			.form-panel-header,
			.step-actions,
			.submit-row {
				align-items: stretch;
				flex-direction: column;
			}

		.step-meter {
				grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
				overflow-x: auto;
			}

			.btn-flexroll-light,
			.btn-flexroll {
				width: 100%;
			}
		}