@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Roboto+Condensed:wght@400;500;600&display=swap");

:root {
	--sw-navy: #040525;
	--sw-blue: #08A5ED;
	--sw-blue-dark: #0079c4;
	--sw-sky: #08a5ed;
	--sw-muted: #43528c;
	--sw-border: #d5e1eb;
	--sw-surface: #fff;
	--sw-soft: #eaf8ff;
	--sw-font-display: "Barlow Condensed", Impact, sans-serif;
	--sw-font-body: "Roboto Condensed", Arial, sans-serif
}

/* The splash brings its own header/footer inside the view. */
.layout:has(.sw-landing)>.navbar,
.layout:has(.sw-landing)>.footer {
	display: none
}

.layout:has(.sw-landing)>.page {
	padding: 0
}

.sw-landing {
	min-height: 100vh;
	background: var(--sw-surface);
	color: var(--sw-navy);
	font-family: var(--sw-font-body);
	font-size: 18px;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased
}

.sw-landing *,
.sw-landing *::before,
.sw-landing *::after {
	box-sizing: border-box
}

.sw-landing p {
	font-family: inherit;
	color: inherit
}

.sw-landing :where(a) {
	color: inherit;
	text-decoration: none
}

.sw-landing a:focus-visible {
	outline: 2px solid var(--sw-sky);
	outline-offset: 3px
}

.sw-landing__wrap {
	width: min(100% - 48px, 1080px);
	margin: 0 auto
}

/* Header */
.sw-landing__top {
	background: var(--sw-surface);
	border-bottom: 1px solid var(--sw-border)
}

.sw-landing__top-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 74px
}

.sw-landing__brand {
	font-family: var(--sw-font-display);
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -1.6px;
	line-height: 1;
	color: var(--sw-navy);
	white-space: nowrap
}

.sw-landing__brand small {
	font: inherit;
	letter-spacing: inherit;
	color: var(--sw-sky)
}

.sw-landing__signin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 16px;
	border: 1px solid var(--sw-sky);
	border-radius: 5px;
	background: transparent;
	color: var(--sw-blue-dark);
	font-family: var(--sw-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	transition: background .15s, border-color .15s, color .15s
}

.sw-landing__signin:hover,
.sw-landing__signin:focus-visible {
	background: var(--sw-blue);
	border-color: var(--sw-blue);
	color: #fff;
	text-decoration: none
}

/* Hero on soft blue */
.sw-landing__hero {
	position: relative;
	z-index: 1;
	padding: 64px 0 0;
	background-color: #f4fbff
}

.sw-landing__hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
	gap: 64px;
	align-items: center
}

.sw-landing__copy {
	padding: 8px 0 64px
}

.sw-landing__rule {
	display: block;
	width: 58px;
	height: 3px;
	margin: 0 0 26px;
	background: var(--sw-blue)
}

.sw-landing__hero h1 {
	margin: 0;
	font-family: var(--sw-font-display);
	font-size: clamp(68px, 7vw, 100px);
	font-weight: 700;
	line-height: .9;
	letter-spacing: -3px;
	color: var(--sw-navy);
	text-align: left
}

.sw-landing__hero h1 em {
	font-style: normal;
	color: var(--sw-sky)
}

.sw-landing__lead {
	margin: 22px 0 28px;
	color: var(--sw-navy);
	font-family: var(--sw-font-body);
	font-size: 28px;
	line-height: 1.2;
	text-align: left
}

.sw-landing__join {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 34px;
	border: 1px solid var(--sw-blue);
	border-radius: 9px;
	background: var(--sw-blue);
	color: #fff;
	font-family: var(--sw-font-body);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	transition: background .15s, border-color .15s
}

.sw-landing__join:hover,
.sw-landing__join:focus-visible {
	background: var(--sw-sky);
	border-color: var(--sw-blue-dark);
	color: #fff;
	text-decoration: none
}

.sw-landing__pricing {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin: 24px 0 0;
	color: var(--sw-muted);
	font-family: var(--sw-font-body);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.3
}

.sw-landing__pricing span+span::before {
	content: none;
}

.sw-landing__pricing .sw-landing__free {
	display: inline-block;
	margin-left: 4px;
	padding: 3px 9px;
	border: 1px solid #08A5ED;
	border-radius: 5px;
	background: #08A5ED;
	color: #fff;
	font-size: 1.3em;
	font-weight: 800;
	line-height: 1.2;
	vertical-align: baseline;
}

.sw-landing__polygamy {
	margin: 12px 0 0;
	color: var(--sw-muted);
	font-size: 16px;
	line-height: 1.3
}

.sw-landing__polygamy a {
	color: var(--sw-blue-dark);
	font-weight: 600;
	border-bottom: 1px solid rgba(0, 121, 196, .45)
}

.sw-landing__polygamy a:hover,
.sw-landing__polygamy a:focus-visible {
	color: var(--sw-blue);
	border-bottom-color: var(--sw-blue);
	text-decoration: none
}

.sw-landing__photo {
	position: relative;
	margin-bottom: -76px;
	padding: 10px;
	border: 1px solid rgba(8, 165, 237, .45);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 26px 50px rgba(4, 5, 37, .10)
}

.sw-landing__photo::before {
	content: "";
	position: absolute;
	top: -18px;
	right: -18px;
	width: 110px;
	height: 110px;
	border-top: 2px solid rgba(8, 165, 237, .6);
	border-right: 2px solid rgba(8, 165, 237, .6);
	border-radius: 0 12px 0 0;
	pointer-events: none
}

.sw-landing__photo img {
	display: block;
	width: 100%;
	height: 452px;
	object-fit: cover;
	object-position: center;
	border-radius: 7px
}

/* Benefits as a numbered list */
.sw-landing__benefits {
	padding: 138px 0 92px;
	background: var(--sw-surface)
}

.sw-landing__benefits-grid {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: 88px;
	align-items: start
}

.sw-landing__benefits-head h2 {
	margin: 0 0 16px;
	font-family: var(--sw-font-display);
	font-size: clamp(38px, 4vw, 50px);
	font-weight: 700;
	line-height: .98;
	letter-spacing: -1.4px;
	color: var(--sw-navy);
	text-align: left
}

.sw-landing__benefits-head p {
	margin: 0;
	max-width: 390px;
	color: var(--sw-muted);
	font-size: 18px;
	line-height: 1.5
}

.sw-landing__benefit {
	display: grid;
	grid-template-columns: 66px minmax(0, 1fr);
	gap: 22px;
	padding: 26px 0;
	border-top: 1px solid var(--sw-border)
}

.sw-landing__benefit:last-child {
	border-bottom: 1px solid var(--sw-border)
}

.sw-landing__num {
	font-family: var(--sw-font-display);
	font-size: 36px;
	font-weight: 700;
	line-height: .9;
	color: var(--sw-sky)
}

.sw-landing__benefit h3 {
	margin: 0 0 5px;
	font-family: var(--sw-font-display);
	font-size: 29px;
	font-weight: 700;
	line-height: 1;
	color: var(--sw-navy)
}

.sw-landing__benefit p {
	margin: 0;
	color: var(--sw-muted);
	font-size: 16px;
	line-height: 1.4
}

/* Commitments */
.sw-landing__commitments {
	padding: 62px 0 66px;
	background: var(--sw-soft)
}

.sw-landing__commitments-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px
}

.sw-landing__commitment {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	column-gap: 18px;
	align-items: start;
	padding: 26px 28px;
	border: 1px solid var(--sw-border);
	border-radius: 12px;
	background: var(--sw-surface);
	box-shadow: 0 12px 26px rgba(4, 5, 37, .05)
}

.sw-landing__icon {
	grid-row: span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: var(--sw-soft);
	color: var(--sw-blue)
}

.sw-landing__icon svg {
	width: 26px;
	height: 26px
}

.sw-landing__commitment h3 {
	margin: 0 0 6px;
	font-family: var(--sw-font-display);
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	color: var(--sw-navy)
}

.sw-landing__commitment p {
	margin: 0;
	color: var(--sw-muted);
	font-size: 17px;
	line-height: 1.45
}

/* Footer */
.sw-landing__footer {
	padding: 38px 0 24px;
	background: var(--sw-surface);
	border-top: 1px solid var(--sw-border);
	color: var(--sw-navy)
}

.sw-landing__footer-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 22px 40px
}

.sw-landing__footer-brand {
	font-family: var(--sw-font-display);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -1.4px;
	line-height: 1;
	color: var(--sw-navy);
	white-space: nowrap
}

.sw-landing__footer-brand small {
	font: inherit;
	letter-spacing: inherit;
	color: var(--sw-blue-dark)
}

.sw-landing__footer-links {
	display: flex;
	flex-wrap: wrap
}

.sw-landing__footer-links a {
	padding: 0 14px;
	border-right: 1px solid var(--sw-border);
	color: var(--sw-navy);
	font-size: 14px;
	line-height: 1.2
}

.sw-landing__footer-links a:last-child {
	border-right: 0
}

.sw-landing__footer-links a:hover,
.sw-landing__footer-links a:focus-visible {
	color: var(--sw-blue-dark);
	text-decoration: none
}

.sw-landing__footer-bottom {
	margin: 28px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--sw-border);
	color: var(--sw-muted);
	font-size: 14px
}

@media (max-width:991.98px) {
	.sw-landing__hero {
		padding-top: 44px
	}

	.sw-landing__hero-grid {
		grid-template-columns: 1fr;
		gap: 36px
	}

	.sw-landing__copy {
		padding-bottom: 0;
		text-align: center
	}

	.sw-landing__rule {
		margin-left: auto;
		margin-right: auto
	}

	.sw-landing__hero h1,
	.sw-landing__lead {
		text-align: center
	}

	.sw-landing__pricing {
		justify-content: center
	}

	.sw-landing__polygamy {
		text-align: center
	}

	.sw-landing__photo {
		max-width: 520px;
		margin: 0 auto 48px
	}

	.sw-landing__photo::before {
		right: -12px;
		top: -12px
	}

	.sw-landing__photo img {
		height: auto;
		aspect-ratio: 1.35/1
	}

	.sw-landing__benefits {
		padding: 64px 0 68px
	}

	.sw-landing__benefits-grid {
		grid-template-columns: 1fr;
		gap: 34px
	}

	.sw-landing__benefits-head {
		text-align: center
	}

	.sw-landing__benefits-head h2 {
		text-align: center
	}

	.sw-landing__benefits-head p {
		margin: 0 auto
	}

	.sw-landing__commitments-grid {
		grid-template-columns: 1fr;
		gap: 14px
	}

	.sw-landing__footer-top {
		justify-content: center;
		text-align: center
	}

	.sw-landing__footer-links {
		justify-content: center
	}

	.sw-landing__footer-bottom {
		text-align: center
	}
}

@media (max-width:575.98px) {
	.sw-landing__wrap {
		width: calc(100% - 40px)
	}

	.sw-landing__top-inner {
		min-height: 64px
	}

	.sw-landing__brand {
		font-size: 30px;
		letter-spacing: -1.2px
	}

	.sw-landing__signin {
		padding: 8px 11px;
		font-size: 14px
	}

	.sw-landing__hero {
		padding-top: 36px
	}

	.sw-landing__hero h1 {
		font-size: clamp(54px, 15vw, 70px);
		letter-spacing: -1.8px
	}

	.sw-landing__lead {
		margin: 16px 0 22px;
		font-size: 22px
	}

	.sw-landing__join {
		width: 100%;
		max-width: 290px;
		font-size: 23px;
		padding: 13px 22px
	}

	.sw-landing__pricing {
		justify-content: center;
		margin-top: 19px;
		font-size: 17px
	}

	.sw-landing__polygamy {
		font-size: 15px
	}

	.sw-landing__photo {
		margin-bottom: 36px;
		padding: 8px
	}

	.sw-landing__photo img {
		aspect-ratio: 1.2/1
	}

	.sw-landing__benefits {
		padding: 48px 0 52px
	}

	.sw-landing__benefits-head h2 {
		font-size: 38px
	}

	.sw-landing__benefits-head p {
		font-size: 17px
	}

	.sw-landing__benefit {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 16px;
		padding: 20px 0
	}

	.sw-landing__num {
		font-size: 30px
	}

	.sw-landing__benefit h3 {
		font-size: 26px
	}

	.sw-landing__commitments {
		padding: 48px 0 52px
	}

	.sw-landing__commitment {
		grid-template-columns: 50px minmax(0, 1fr);
		column-gap: 14px;
		padding: 22px 20px
	}

	.sw-landing__icon {
		width: 50px;
		height: 50px
	}

	.sw-landing__commitment h3 {
		font-size: 29px
	}

	.sw-landing__commitment p {
		font-size: 16px
	}

	.sw-landing__footer {
		padding: 34px 0 22px
	}

	.sw-landing__footer-brand {
		font-size: 28px
	}

	.sw-landing__footer-links a {
		padding: 0 10px;
		font-size: 13px
	}

	.sw-landing__footer-bottom {
		margin-top: 22px;
		font-size: 13px
	}
}