/* SMS landings: /signup/, /log-in/, /signup-thank-you/ (Figma FMM-Web → Miscellaneous → Section 2). Not compiled by gulp. */

.sms-landing {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	padding: 60px 16px 80px;
	background: #fafbfe;
	font-family: Figtree, sans-serif;
	color: #192330;
}

.sms-landing--signup {
	min-height: 1328px;
}

.sms-landing--log-in {
	min-height: 950px;
}

.sms-landing--thank-you {
	min-height: 755px;
	padding: 200px 16px 160px;
}

.sms-landing [hidden] {
	display: none !important;
}

/* Card */

.sms-landing__card {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 559px;
	max-width: 100%;
	margin: 0 auto;
	padding: 24px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 0 12px rgba(53, 117, 193, 0.1);
}

.sms-landing__head {
	margin-bottom: 40px;
	text-align: center;
}

.sms-landing .sms-landing__title {
	margin: 0;
	padding: 0;
	font-family: Figtree, sans-serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 42px;
	color: #192430;
	text-align: center;
}

.sms-landing .sms-landing__subtitle {
	margin: 20px 0 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
	color: #192330;
}

/* Form */

/* Margins, not gap: the (empty) error live region always stays in the form. */
.sms-landing__form {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
}

.sms-landing__checks,
.sms-landing__errors.has-errors {
	margin-top: 40px;
}

.sms-landing__fields {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

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

.sms-landing .sms-landing__label {
	display: block;
	margin: 0 0 5px;
	padding: 0 20px;
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	color: #445265;
}

.sms-landing .sms-landing__input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 20px;
	border: 1.5px solid #dae3f2;
	border-radius: 40px;
	background: #fff;
	box-shadow: none;
	font-family: Figtree, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
	color: #192330;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease;
}

.sms-landing .sms-landing__input::placeholder {
	color: #445265;
	opacity: 1;
}

.sms-landing .sms-landing__input:focus {
	border-color: #1371ff;
	box-shadow: 0 0 0 3px rgba(19, 113, 255, 0.3);
}

.sms-landing .is-error .sms-landing__input {
	border-color: #e33737;
}

/* The red border stays, the ring shows where the focus is. */
.sms-landing .is-error .sms-landing__input:focus {
	box-shadow: 0 0 0 3px rgba(227, 55, 55, 0.3);
}

.sms-landing .sms-landing__input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #fff inset;
	-webkit-text-fill-color: #192330;
}

.sms-landing .sms-landing__input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px rgba(19, 113, 255, 0.3);
}

/* Checkboxes */

.sms-landing__checks {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sms-landing .sms-landing__check {
	position: relative;
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	column-gap: 12px;
	align-items: start;
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #445265;
	cursor: pointer;
}

.sms-landing__check-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.sms-landing__check-box {
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	border: 1.5px solid #7f8e9f;
	border-radius: 8px;
	background: #fff no-repeat center / 20px 20px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sms-landing__check-input:checked + .sms-landing__check-box {
	border-color: #1685ff;
	background-color: #1685ff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.164 10.833 7.497 14.166 15.831 5.833' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sms-landing__check-input:focus-visible + .sms-landing__check-box {
	outline: 2px solid #1371ff;
	outline-offset: 2px;
}

.sms-landing .sms-landing__check.is-error .sms-landing__check-box {
	border-color: #e33737;
}

.sms-landing__check-text a {
	color: #1685ff;
	text-decoration: none;
}

.sms-landing__check-text a:hover {
	text-decoration: underline;
}

/* Error plaques */

.sms-landing__errors {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sms-landing .sms-landing__error {
	margin: 0;
	padding: 10px;
	border: 1px solid #e33737;
	border-radius: 20px;
	background: #fff3f3;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #e33737;
	text-align: center;
}

.sms-landing .sms-landing__error-title {
	font-weight: 700;
}

/* Button */

.sms-landing .sms-landing__btn {
	align-self: center;
	box-sizing: border-box;
	min-width: 155px;
	height: 52px;
	margin: 40px 0 0;
	padding: 0 40px;
	border: 0;
	border-radius: 50px;
	background: #1371ff;
	font-family: Figtree, sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.sms-landing .sms-landing__btn:hover,
.sms-landing .sms-landing__btn:focus-visible {
	background: #1685ff;
}

.sms-landing .sms-landing__btn:focus-visible {
	outline: 2px solid #1371ff;
	outline-offset: 3px;
}

.sms-landing .sms-landing__btn[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.sms-landing__honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Stats bubbles, lines and dots. Offsets: left from the page center, top from the top of <main>
   (Figma frame 1440 wide, header 75 px). */

.sms-landing__stats,
.sms-landing__decor {
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	height: 100%;
	pointer-events: none;
}

.sms-landing__stat {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 120px;
}

.sms-landing__stat-value {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 45px rgba(53, 117, 193, 0.1);
	font-family: Onest, Figtree, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 24px;
	color: #0079ff;
}

.sms-landing__stat--right-1 .sms-landing__stat-value {
	font-size: 28px;
}

.sms-landing__stat-label {
	margin-top: 15px;
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
	color: #445265;
	text-align: center;
	white-space: nowrap;
}

/* Rotated rounded squares. Each is clipped on the card side, as in Figma, and runs on to the
   screen edge and the bottom of the section (<main> clips the rest). */
.sms-landing__line {
	position: absolute;
	bottom: 0;
	overflow: hidden;
}

.sms-landing__line::before {
	content: "";
	position: absolute;
	box-sizing: border-box;
	width: 693px;
	height: 693px;
	border: 4px solid #e5f1fc;
	border-radius: 160px;
	transform: rotate(45deg);
}

.sms-landing__line--left {
	right: 274px;
	width: calc(50vw - 274px);
}

.sms-landing__line--left::before {
	top: 111.5px;
	right: 97.5px;
}

.sms-landing__line--right {
	left: 276px;
	width: calc(50vw - 276px);
}

.sms-landing__line--right::before {
	top: 121.5px;
	left: 152.5px;
}

.sms-landing__dot {
	position: absolute;
	border-radius: 50%;
}

/* Figma layer blur 4 and 8 render like CSS blur 2px and ~3.5px. */
.sms-landing__dot--big {
	width: 58px;
	height: 58px;
	background: #b9ddfe;
	filter: blur(2px);
}

.sms-landing__dot--small {
	width: 10px;
	height: 10px;
	background: #0079ff;
	filter: blur(3.5px);
}

/* /signup/ — frame 5914:28907 */

.sms-landing--signup .sms-landing__line--left { top: 144px; }
.sms-landing--signup .sms-landing__line--right { top: 392px; }
.sms-landing--signup .sms-landing__dot--big.sms-landing__dot--left { top: 405px; left: -684px; }
.sms-landing--signup .sms-landing__dot--small.sms-landing__dot--left { top: 792px; left: -636px; }
.sms-landing--signup .sms-landing__dot--big.sms-landing__dot--right { top: 653px; left: 310px; }
.sms-landing--signup .sms-landing__dot--small.sms-landing__dot--right { top: 1040px; left: 358px; }
.sms-landing--signup .sms-landing__stat--left-1 { top: 244px; left: -540px; }
.sms-landing--signup .sms-landing__stat--left-2 { top: 494px; left: -599px; }
.sms-landing--signup .sms-landing__stat--left-3 { top: 744px; left: -479px; }
.sms-landing--signup .sms-landing__stat--right-1 { top: 522px; left: 496px; }
.sms-landing--signup .sms-landing__stat--right-2 { top: 742px; left: 395px; }
.sms-landing--signup .sms-landing__stat--right-3 { top: 1045px; left: 496px; }

/* /log-in/ — frame 5924:5970 */

.sms-landing--log-in .sms-landing__line--left { top: 59px; }
.sms-landing--log-in .sms-landing__line--right { top: 105px; }
.sms-landing--log-in .sms-landing__dot--big.sms-landing__dot--left { top: 320px; left: -686px; }
.sms-landing--log-in .sms-landing__dot--small.sms-landing__dot--left { top: 707px; left: -638px; }
.sms-landing--log-in .sms-landing__dot--big.sms-landing__dot--right { top: 366px; left: 310px; }
.sms-landing--log-in .sms-landing__dot--small.sms-landing__dot--right { top: 753px; left: 358px; }
.sms-landing--log-in .sms-landing__stat--left-1 { top: 159px; left: -542px; }
.sms-landing--log-in .sms-landing__stat--left-2 { top: 409px; left: -601px; }
.sms-landing--log-in .sms-landing__stat--left-3 { top: 659px; left: -481px; }
.sms-landing--log-in .sms-landing__stat--right-1 { top: 235px; left: 496px; }
.sms-landing--log-in .sms-landing__stat--right-2 { top: 455px; left: 395px; }
.sms-landing--log-in .sms-landing__stat--right-3 { top: 758px; left: 496px; }

/* /signup-thank-you/ — frame 5934:29913 */

.sms-landing__stripes {
	position: absolute;
	max-width: none;
	height: auto;
}

.sms-landing__stripes--left { top: 74px; left: -955px; }
.sms-landing__stripes--right { top: 415px; left: 519px; }
.sms-landing--thank-you .sms-landing__dot--big { top: 241px; left: 572px; }
.sms-landing--thank-you .sms-landing__dot--left { top: 571px; left: -440px; }
.sms-landing--thank-you .sms-landing__dot--right { top: 571px; left: 376px; }

.sms-landing__card--summary {
	text-align: center;
}

.sms-landing .sms-landing__summary {
	margin: 20px 0 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 26px;
	color: #192330;
}

.sms-landing .sms-landing__summary a {
	font-weight: 700;
	color: inherit;
	text-decoration: none;
}

/* No room for the side decoration (it spans 1232px; plus a 17px scrollbar): stats go into a grid under the card. */

@media (max-width: 1259px) {
	.sms-landing,
	.sms-landing--signup,
	.sms-landing--log-in {
		min-height: 0;
		padding: 40px 16px 56px;
	}

	.sms-landing--thank-you {
		min-height: 0;
		padding: 96px 16px 120px;
	}

	.sms-landing__stats {
		position: static;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px 12px;
		width: auto;
		max-width: 559px;
		height: auto;
		margin: 40px auto 0;
	}

	.sms-landing__stats .sms-landing__line,
	.sms-landing__stats .sms-landing__dot {
		display: none;
	}

	.sms-landing .sms-landing__stat {
		position: static;
		width: auto;
	}

	.sms-landing__stat-value {
		width: 88px;
		height: 88px;
		font-size: 24px;
	}

	.sms-landing__stat--right-1 .sms-landing__stat-value {
		font-size: 21px;
	}

	.sms-landing__stat-label {
		margin-top: 10px;
		font-size: 15px;
		line-height: 20px;
		white-space: normal;
	}
}

@media (max-width: 767px) {
	.sms-landing__decor {
		display: none;
	}
}

@media (max-width: 600px) {
	.sms-landing__card {
		padding: 24px 16px;
	}

	.sms-landing .sms-landing__title {
		font-size: 28px;
		line-height: 34px;
	}

	.sms-landing .sms-landing__subtitle,
	.sms-landing .sms-landing__summary {
		font-size: 18px;
		line-height: 24px;
	}

	.sms-landing__head {
		margin-bottom: 32px;
	}

	.sms-landing__checks,
	.sms-landing__errors.has-errors,
	.sms-landing .sms-landing__btn {
		margin-top: 32px;
	}
}

@media (max-width: 480px) {
	.sms-landing__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
}

/* Windows high contrast drops backgrounds, so the custom box would never look checked: show the native one. */
@media (forced-colors: active) {
	.sms-landing__check-input {
		opacity: 1;
	}

	.sms-landing__check-box {
		visibility: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sms-landing *,
	.sms-landing *::before {
		transition: none !important;
	}
}