@media (max-width: 767px) {

	/* The signed-in layout gets this from Bootstrap; account-mobile.css relies on it. */
	.dexacc-guest-page *,
	.dexacc-guest-page *::before,
	.dexacc-guest-page *::after {
		box-sizing: border-box;
	}

	body.dexacc-guest-page {
		margin: 0;
		background: var(--dexapp-page-bg);
		font-family: 'Plus Jakarta Sans', sans-serif;
		-webkit-font-smoothing: antialiased;
	}
	body.dexacc-guest-page.darkmode-page {
		background: var(--dexapp-navy);
	}

	.dexacc-guest {
		padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 16px);
	}
	.dexacc-guest .dexapp-acc-hero {
		padding-top: calc(18px + env(safe-area-inset-top, 0px));
	}

	.dexacc-guest-logo {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 64px;
		height: 64px;
		border-radius: 16px;
		background: var(--dexapp-navy);
		box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
	}
	/* No icon-only white logo exists, so the icon is cropped from the left of the white wordmark. */
	.dexacc-guest-mark {
		display: block;
		position: relative;
		width: 40px;
		height: 40px;
		overflow: hidden;
	}
	/* Offsets centre the icon and keep the "d" of the wordmark out of frame. */
	.dexacc-guest-mark img {
		position: absolute;
		top: -4px;
		left: -5px;
		width: auto;
		max-width: none;
		height: 46px;
	}
	.dexacc-guest-headline {
		margin-top: 12px;
		color: #fff;
		font-size: 15px;
		font-weight: 600;
	}
	.dexacc-guest-sub {
		margin-top: 2px;
		color: rgba(255, 255, 255, .75);
		font-size: 12px;
	}
	.dexacc-guest-actions {
		display: flex;
		gap: 10px;
		margin-top: 16px;
	}
	.dexacc-guest-btn,
	.dexacc-guest-btn:hover,
	.dexacc-guest-btn:focus {
		display: flex;
		flex: 1 1 0;
		align-items: center;
		justify-content: center;
		height: 44px;
		border-radius: 12px;
		font-size: 14px;
		font-weight: 700;
		text-decoration: none;
	}
	.dexacc-guest-btn--light,
	.dexacc-guest-btn--light:hover,
	.dexacc-guest-btn--light:focus {
		background: #fff;
		color: var(--dexapp-blue);
	}
	.dexacc-guest-btn--ghost,
	.dexacc-guest-btn--ghost:hover,
	.dexacc-guest-btn--ghost:focus {
		border: 1px solid rgba(255, 255, 255, .35);
		background: rgba(255, 255, 255, .12);
		color: #fff;
	}

	.dexacc-guest-rp {
		font-size: 13px;
		font-weight: 700;
		line-height: 1;
	}
	.dexacc-guest-static {
		cursor: default;
	}

	/* The language list sits between two rows, so the separator rule
	   (.dexapp-acc-row + .dexapp-acc-row) does not reach the row after it. */
	.dexacc-guest .dexapp-acc-lang-list + .dexapp-acc-row::before {
		position: absolute;
		top: 0;
		right: 4px;
		left: 4px;
		height: 1px;
		background: #EDF0F4;
		content: "";
		transform: scaleY(.5);
		transform-origin: 0 0;
	}
	.darkmode .dexacc-guest .dexapp-acc-lang-list + .dexapp-acc-row::before {
		background: rgba(255, 255, 255, .06);
	}
}