/* Join / reg layout — keep steps aligned with form body */
.reg-steps {
	display: flex;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding: 28px 24px 0;
	box-sizing: border-box;
}
.reg-body {
	max-width: 560px;
	margin: 0 auto;
	padding: 44px 24px 64px;
	box-sizing: border-box;
}
.reg-steps--wide,
.reg-body--wide {
	max-width: 920px;
}
.reg-step {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: var(--sans);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0 6px 14px;
	border-bottom: 3px solid var(--line);
	color: var(--ink-faint);
}
.reg-step.active {
	border-bottom-color: var(--amber);
	color: var(--terracotta);
}
.reg-step.done {
	border-bottom-color: var(--olive);
	color: var(--olive);
}
@media (max-width: 640px) {
	.reg-steps {
		padding: 20px 16px 0;
	}
	.reg-step {
		white-space: normal;
		letter-spacing: 0.04em;
		font-size: 9px;
		line-height: 1.35;
	}
}
html,
body {
	min-height: 100%;
}
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-family: var(--sans);
	background: var(--paper);
}
.footer {
	margin-top: auto;
	flex-shrink: 0;
}
.footer .brand img {
	height: 36px;
	width: auto;
	filter: brightness(0) invert(92%);
}
.d-none { display: none !important; }
.form-step { display: none; }
.form-step.active { display: block; }
.app-alert {
	padding: 12px 14px;
	margin-bottom: 18px;
	font-family: var(--sans);
	font-size: 13px;
	border: 1px solid var(--line);
	background: #fff;
}
.app-alert.alert-danger { border-color: var(--terracotta); color: var(--terracotta); background: #fdf4f1; }
.app-alert.alert-success { border-color: var(--olive); color: var(--olive); background: #f4f5ef; }
.app-alert.alert-info { border-color: var(--amber); color: var(--prussian); background: #fdf6ed; }
.otp-banner {
	background: #fff8e8;
	border: 1px solid var(--amber);
	padding: 14px 16px;
	margin-bottom: 18px;
	font-family: var(--sans);
	font-size: 14px;
}
.otp-banner strong {
	font-size: 1.25rem;
	letter-spacing: 0.15em;
}
.form-actions {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
}
.form-check-row { margin-bottom: 22px; }
.form-field.form-check-row > .check-label {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-soft);
	text-transform: none;
	letter-spacing: 0;
	margin-bottom: 0;
	cursor: pointer;
}
.form-field.form-check-row > .check-label input[type="checkbox"] {
	width: auto;
	flex: 0 0 auto;
	margin: 3px 0 0;
	padding: 0;
	border: none;
	box-shadow: none;
}
.form-field.form-check-row > .check-label a { color: var(--terracotta); font-weight: 600; }
span.help-block.form-error {
	display: block;
	margin-top: 6px;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	color: var(--terracotta);
}
.form-field input.error,
.form-field select.error,
.form-field textarea.error,
.form-control.error,
.field input.error,
.field select.error,
.invite-box input.error {
	border-color: var(--terracotta) !important;
	box-shadow: 0 0 0 3px rgba(190, 78, 39, .15);
}

/* Join fields — match draft v2 soft inputs (not hard Prussian boxes) */
.form-field input,
.form-field select,
.form-field textarea {
	width: 100%;
	padding: 13px 14px;
	font-family: var(--sans);
	font-size: 13px;
	color: var(--ink);
	background: #fdfcf8;
	border: 1px solid #e5dfd2;
	border-radius: 4px;
	outline: none;
	box-shadow: none;
	height: auto;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	border-color: var(--amber);
	box-shadow: 0 0 0 3px rgba(221, 135, 50, .18);
}
.form-field label {
	display: block;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 400;
	color: var(--ink);
	margin-bottom: 8px;
	text-transform: none;
	letter-spacing: 0;
}
.invite-box {
	border: 2px dashed var(--amber);
	padding: 26px;
	text-align: center;
	margin-bottom: 24px;
	background: #fdf6ed;
	border-radius: 8px;
}
.invite-box label {
	display: block;
	font-size: 12px;
	margin-bottom: 8px;
	text-align: left;
}
.invite-note {
	font-size: 11px;
	color: var(--ink-faint);
	margin-top: 8px;
}
.reg-body h1 {
	font-family: var(--serif);
	font-size: 28px;
	font-weight: 400;
	color: var(--terracotta);
	margin: 0 0 8px;
}
.reg-body .sub {
	font-family: var(--sans);
	color: var(--ink-soft);
	font-size: 14px;
	margin: 0 0 28px;
	line-height: 1.6;
}
.text-muted-note {
	font-family: var(--sans);
	font-size: 11px;
	color: var(--ink-faint);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.app-modal {
	position: fixed;
	inset: 0;
	background: rgba(30, 44, 51, 0.55);
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.app-modal[hidden] { display: none !important; }
.app-modal-dialog {
	background: #fff;
	border: 1px solid var(--prussian);
	max-width: 720px;
	width: 100%;
	max-height: 80vh;
	overflow: auto;
	padding: 28px;
	position: relative;
}
.app-modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	border: 0;
	background: transparent;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: var(--prussian);
}

/* Join details — grouped sections + field rows */
.form-section {
	margin-bottom: 1.75rem;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--line);
}
.form-section:last-of-type {
	border-bottom: 0;
	margin-bottom: 0.5rem;
}
.form-section .guest-section-label {
	margin: 0 0 0.85rem;
}
.section-optional {
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ink-faint);
}
.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}
.form-row--3 {
	grid-template-columns: 1fr 1fr 1fr;
}
.form-row--title {
	grid-template-columns: 110px;
}
.form-row--email-mobile {
	grid-template-columns: 1.4fr 140px 1fr;
}
.form-row--city-state-zip {
	grid-template-columns: 1fr 1fr minmax(110px, 0.35fr);
}
.form-row .form-field {
	min-width: 0;
}
.form-field--title {
	max-width: 120px;
}
.form-field--code {
	max-width: 140px;
}
@media (max-width: 640px) {
	.form-row,
	.form-row--3,
	.form-row--title,
	.form-row--email-mobile,
	.form-row--city-state-zip {
		grid-template-columns: 1fr;
	}
	.form-field--title,
	.form-field--code {
		max-width: none;
	}
}