:root {
	--bg-page: #ffffff;
	--card-bg: #f4f4f5;
	--card-border: #e7e7e8;
	--ink: #2d2d2d;
	--ink-soft: #5c5c5c;
	--dark-btn: #2c2c2c;
	--dark-btn-hover: #1c1c1c;
	--nz: #1aa0de;
	--nz-hover: #1690c8;
	--nz-text: #1391cf;
	--nz-soft: #d7eefb;
	--au: #d63330;
	--au-hover: #bf2b29;
	--au-text: #c92f2c;
	--au-soft: #fadbda;
	--divider: #e1e1e2;
	--radius: 14px;
	--btn-radius: 11px;
}

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Manrope', system-ui, sans-serif;
	background: var(--bg-page);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	padding: 40px 24px;
}

.card {
	max-width: 1240px;
	margin: 0 auto;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 40px 48px 44px;
}

/* ---- typography ---- */
.h-bold {
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: 1.06rem;
	color: var(--ink);
	margin: 0 0 12px;
	letter-spacing: .1px;
}

.h-round {
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: 1.6rem;
	color: #262626;
	margin: 0 0 4px;
	line-height: 1.15;
	letter-spacing: -.4px;
}

.p-lead {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: .95rem;
	color: var(--ink-soft);
	margin: 0 0 18px;
}

/* ---- buttons ---- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	border: none;
	cursor: pointer;
	color: #fff;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .3px;
	padding: 15px 22px;
	border-radius: var(--btn-radius);
	text-decoration: none;
	transition: background-color .18s ease, transform .18s ease;
}

.btn .label {
	flex: 1 1 auto;
	white-space: nowrap;
}

.btn .lead-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.btn .arrow {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.btn:hover {
	transform: translateY(-1px);
}

.btn-dark {
	background: var(--dark-btn);
}

.btn-dark:hover {
	background: var(--dark-btn-hover);
}

.btn-nz {
	background: var(--nz);
}

.btn-nz:hover {
	background: var(--nz-hover);
}

.btn-au {
	background: var(--au);
}

.btn-au:hover {
	background: var(--au-hover);
}

.login-btn {
	min-width: 240px;
}

.btn:hover {
	color: #fff;
}

.join-row {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.join-row .btn {
	min-width: 248px;
	justify-content: flex-start;
}

/* ---- spacing blocks ---- */
.block-join {
	margin-top: 54px;
}

.block-help {
	margin-top: 18px;
}

hr.divider {
	border: none;
	border-top: 1px solid var(--divider);
	margin: 34px 0 26px;
}

/* ---- contacts ---- */
.contacts {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
	margin-top: 18px;
}

.contact {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 34px 0 0;
}

.contact + .contact {
	border-left: 1px solid var(--divider);
	padding-left: 34px;
}

.contact .ring {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.contact .ring svg {
	width: 26px;
	height: 26px;
}

.contact .meta {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.contact .region {
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: .95rem;
	letter-spacing: .4px;
}

.contact .number {
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--ink);
	letter-spacing: .5px;
}

.ring-nz {
	background: var(--nz-soft);
	color: var(--nz);
}

.ring-au {
	background: var(--au-soft);
	color: var(--au);
}

.region-nz {
	color: var(--nz-text);
}

.region-au {
	color: var(--au-text);
}

@media (max-width: 620px) {
	body {
		padding: 20px 12px;
	}

	.card {
		padding: 28px 22px 32px;
	}

	.h-round {
		font-size: 1.45rem;
	}

	.login-btn {
		width: 100%;
	}

	.join-row .btn {
		flex: 1 1 100%;
		min-width: 0;
	}

	.contacts {
		flex-direction: column;
	}

	.contact {
		padding: 14px 0;
	}

	.contact + .contact {
		border-left: none;
		border-top: 1px solid var(--divider);
		padding-left: 0;
	}
}