/*
 * Account v3 (D-544): design research/design/2026-10-29/signup-form/signup-form.pdf, 1920 px artboards. Sizes are the
 * PDF's, in --u units (1 px at 1920, 0.75 px at 1440 and below, down to the phone layout under 768 px). Colours are
 * palette v7 roles (ink #231f20, tile #f3f4f4, muted #9b9a9a, white); the two status colours, the verified green
 * #2d6b49 and the FAIR yellow #ebc852, are the design's own. Poppins 300/400/500 as the PDF. Scoped to .eup-acc3*.
 */

.eup-acc3,
.eup-acc3-popup {
	--u: clamp(0.75px, calc(100vw / 1920), 1px);
	--acc3-ink: #231f20;
	--acc3-tile: #f3f4f4;
	--acc3-muted: #9b9a9a;
	--acc3-white: #ffffff;
	--acc3-green: #2d6b49;
	--acc3-yellow: #ebc852;
	--acc3-r: calc(6 * var(--u));
	--acc3-field: calc(63.7 * var(--u));
	--acc3-label: calc(20.6 * var(--u));
	--acc3-btn: calc(22.8 * var(--u));
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--acc3-ink);
	-webkit-font-smoothing: antialiased;
}

body.eup-acc3-page {
	background: #f3f4f4;
}

body.eup-acc3-page #main,
body.eup-acc3-page #content,
body.eup-acc3-page .page-wrapper {
	background: transparent;
}

/* ---- Card ---------------------------------------------------------------------------------------------------- */

.eup-acc3 {
	--acc3-w: min(calc(100vw - 32px), calc(1614.8 * var(--u)));
	box-sizing: border-box;
	position: relative;
	width: var(--acc3-w);
	margin: calc(53 * var(--u)) 0 calc(80 * var(--u)) calc(50% - var(--acc3-w) / 2);
	padding: calc(87.5 * var(--u)) calc(71.4 * var(--u)) calc(72 * var(--u)) calc(90.8 * var(--u));
	min-height: calc(757.9 * var(--u)); /* The design keeps pages 1 and 2 at one card height. */
	background: var(--acc3-white);
	border: 1px solid var(--acc3-tile);
	border-radius: calc(10 * var(--u));
	display: grid;
	grid-template-columns: minmax(0, 545.6fr) minmax(0, 906.6fr);
	align-items: start;
	text-align: left;
}

.eup-acc3 *,
.eup-acc3 *::before,
.eup-acc3 *::after,
.eup-acc3-popup * {
	box-sizing: border-box;
}

.eup-acc3 [hidden],
.eup-acc3-popup [hidden] {
	display: none !important;
}

/* ---- Left column: "Your Eupepsia Account." and the three benefits -------------------------------------------- */

.eup-acc3-panel__title {
	margin: 0;
	padding-top: calc(2 * var(--u));
	font-size: calc(44.8 * var(--u));
	line-height: calc(54 * var(--u));
	font-weight: 400;
	letter-spacing: 0;
	color: var(--acc3-ink);
	text-transform: none;
}

.eup-acc3-panel__title span {
	display: block;
}

.eup-acc3-panel__list {
	list-style: none;
	margin: calc(46 * var(--u)) 0 0;
	padding: 0;
}

.eup-acc3-panel__list li {
	display: flex;
	align-items: flex-start;
	gap: calc(20 * var(--u));
	margin: 0 0 calc(28 * var(--u));
	padding: 0;
	font-size: calc(23.9 * var(--u));
	line-height: calc(29 * var(--u));
	font-weight: 300;
	max-width: calc(330 * var(--u));
}

.eup-acc3-panel__list li span {
	padding-top: calc(4 * var(--u));
}

.eup-acc3-icon,
.eup-acc3-panel__list svg,
.eup-acc3-panel__list img {
	flex: 0 0 auto;
	width: calc(36 * var(--u));
	height: calc(36 * var(--u));
	color: var(--acc3-ink);
}

/* ---- Tabs ---------------------------------------------------------------------------------------------------- */

.eup-acc3-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(4.9 * var(--u));
	height: var(--acc3-field);
	padding: calc(5 * var(--u));
	margin: 0 0 calc(28 * var(--u));
	background: var(--acc3-tile);
	border-radius: var(--acc3-r);
}

.eup-acc3-tab {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: calc(4 * var(--u));
	font-size: var(--acc3-btn);
	line-height: 1.2;
	font-weight: 400;
	color: var(--acc3-ink);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.eup-acc3-tab:hover,
.eup-acc3-tab:focus {
	color: var(--acc3-ink);
	text-decoration: none;
}

.eup-acc3-tab.is-active,
.eup-acc3-tab.is-active:hover,
.eup-acc3-tab.is-active:focus {
	background: var(--acc3-ink);
	color: var(--acc3-white);
}

.eup-acc3-tab:focus-visible,
.eup-acc3-btn:focus-visible,
.eup-acc3-provider:focus-visible,
.eup-acc3-textbtn:focus-visible,
.eup-acc3-show:focus-visible,
.eup-acc3-forgot:focus-visible,
.eup-acc3-guest a:focus-visible {
	outline: 2px solid var(--acc3-ink);
	outline-offset: 2px;
}

/* ---- Step heading -------------------------------------------------------------------------------------------- */

.eup-acc3-step {
	margin: 0;
	font-size: calc(15 * var(--u));
	line-height: calc(20 * var(--u));
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.eup-acc3-title {
	margin: 0;
	font-size: calc(32.1 * var(--u));
	line-height: calc(48 * var(--u));
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--acc3-ink);
}

.eup-acc3-lead {
	margin: 0;
	font-size: var(--acc3-label);
	line-height: calc(30 * var(--u));
	font-weight: 300;
}

.eup-acc3-lead strong {
	font-weight: 500;
}

.eup-acc3-error {
	margin: 0 0 calc(16 * var(--u));
	padding: calc(12 * var(--u)) calc(18 * var(--u));
	border-left: 3px solid var(--acc3-ink);
	background: var(--acc3-tile);
	font-size: calc(18 * var(--u));
	line-height: 1.45;
	font-weight: 400;
}

.eup-acc3-notices:empty {
	display: none;
}

/* ---- Fields -------------------------------------------------------------------------------------------------- */

.eup-acc3-form {
	margin: 0;
}

.eup-acc3-field {
	margin: 0 0 calc(21 * var(--u));
}

.eup-acc3-pane--email .eup-acc3-title {
	margin-bottom: calc(25.4 * var(--u));
}

.eup-acc3-pane--password .eup-acc3-verified,
.eup-acc3-pane--confirm .eup-acc3-verified {
	margin-bottom: calc(31 * var(--u));
}

.eup-acc3-pane--signin {
	padding-top: calc(2.6 * var(--u));
}

.eup-acc3-label {
	display: block;
	margin: 0 0 calc(9 * var(--u));
	font-size: var(--acc3-label);
	line-height: calc(30 * var(--u));
	font-weight: 300;
	color: var(--acc3-ink);
	text-transform: none;
	letter-spacing: 0;
}

.eup-acc3-label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(16 * var(--u));
	margin: 0 0 calc(9 * var(--u));
}

.eup-acc3-label-row .eup-acc3-label {
	margin: 0;
}

.eup-acc3 .eup-acc3-input,
.eup-acc3-popup .eup-acc3-input {
	display: block;
	width: 100%;
	height: var(--acc3-field);
	margin: 0;
	padding: 0 calc(22 * var(--u));
	border: 1px solid var(--acc3-ink);
	border-radius: var(--acc3-r);
	background: var(--acc3-white);
	box-shadow: none;
	font: inherit;
	/* S-PH (D-571, G9): never under 16 px, or iOS Safari zooms the page on focus (was 15.75 px from 768 to 1066 px wide). */
	font-size: max(16px, calc(21 * var(--u)));
	font-weight: 400;
	color: var(--acc3-ink);
}

.eup-acc3 .eup-acc3-input:focus,
.eup-acc3-popup .eup-acc3-input:focus {
	outline: 2px solid var(--acc3-ink);
	outline-offset: 1px;
	box-shadow: none;
}

.eup-acc3 .eup-acc3-input[aria-invalid="true"] {
	border-width: 2px;
}

.eup-acc3-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(23.1 * var(--u));
}

.eup-acc3-pw {
	position: relative;
}

.eup-acc3 .eup-acc3-input--pw {
	padding-right: calc(110 * var(--u));
	font-size: calc(23.9 * var(--u));
	font-weight: 500;
	letter-spacing: 0.08em;
}

.eup-acc3-show {
	position: absolute;
	top: 0;
	right: calc(8 * var(--u));
	height: 100%;
	min-width: 44px;
	padding: 0 calc(19 * var(--u));
	border: 0;
	background: transparent;
	color: var(--acc3-ink);
	font: inherit;
	font-size: calc(19.5 * var(--u));
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.eup-acc3-forgot {
	font-size: var(--acc3-label);
	line-height: calc(30 * var(--u));
	font-weight: 300;
	color: var(--acc3-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Buttons ------------------------------------------------------------------------------------------------- */

.eup-acc3 .eup-acc3-btn,
.eup-acc3-popup .eup-acc3-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--acc3-field);
	min-height: 44px;
	margin: 0;
	padding: 0 calc(20 * var(--u));
	border: 1px solid var(--acc3-ink);
	border-radius: var(--acc3-r);
	background: var(--acc3-ink);
	color: var(--acc3-white);
	font: inherit;
	font-size: var(--acc3-btn);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.2s ease;
}

.eup-acc3 .eup-acc3-btn:hover {
	background: #373334;
}

.eup-acc3 .eup-acc3-btn--outline,
.eup-acc3 .eup-acc3-btn--outline:hover {
	margin-top: calc(16 * var(--u));
	background: var(--acc3-white);
	color: var(--acc3-ink);
}

.eup-acc3-textbtn {
	display: inline-block;
	margin: 0;
	padding: 0;
	min-height: 0;
	border: 0;
	background: none;
	color: var(--acc3-ink);
	font: inherit;
	font-size: var(--acc3-label);
	line-height: calc(34 * var(--u));
	font-weight: 300;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.eup-acc3-textbtn--strong {
	font-weight: 500;
}

/* ---- "or" and the providers ---------------------------------------------------------------------------------- */

.eup-acc3-or {
	position: relative;
	height: calc(30 * var(--u));
	margin: calc(23 * var(--u)) 0 calc(18 * var(--u));
	text-align: center;
	font-size: calc(20 * var(--u));
	line-height: calc(30 * var(--u));
	font-weight: 300;
}

.eup-acc3-or::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	border-top: 1px solid var(--acc3-ink);
}

.eup-acc3-or span {
	position: relative;
	padding: 0 calc(6 * var(--u));
	background: var(--acc3-white);
}

.eup-acc3-providers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(18.4 * var(--u));
}

.eup-acc3-providers.is-single {
	grid-template-columns: 1fr;
}

.eup-acc3 .eup-acc3-provider,
.eup-acc3-popup .eup-acc3-provider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(14 * var(--u));
	height: var(--acc3-field);
	min-height: 44px;
	border: 1px solid var(--acc3-ink);
	border-radius: var(--acc3-r);
	background: var(--acc3-white);
	color: var(--acc3-ink);
	font-size: var(--acc3-btn);
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
}

.eup-acc3-mark {
	flex: 0 0 auto;
	width: calc(24 * var(--u));
	height: calc(24 * var(--u));
}

.eup-acc3-guest {
	margin: calc(30 * var(--u)) 0 0;
	font-size: var(--acc3-label);
	line-height: calc(34 * var(--u));
	font-weight: 300;
}

.eup-acc3-guest a {
	font-weight: 500;
	color: var(--acc3-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Step 2: the code ---------------------------------------------------------------------------------------- */

.eup-acc3-pane--code .eup-acc3-lead {
	margin-bottom: calc(34.4 * var(--u));
}

.eup-acc3-code-row {
	display: flex;
	align-items: center;
	gap: calc(24 * var(--u));
}

.eup-acc3-code {
	position: relative;
	flex: 0 0 auto;
	width: calc(479.5 * var(--u));
	height: var(--acc3-field);
}

.eup-acc3-code__boxes {
	display: none;
}

.eup-acc3 .eup-acc3-code__input {
	width: 100%;
	height: 100%;
	padding: 0 calc(22 * var(--u));
	border: 1px solid var(--acc3-ink);
	border-radius: var(--acc3-r);
	background: var(--acc3-white);
	font: inherit;
	font-size: calc(28 * var(--u));
	font-weight: 500;
	letter-spacing: 0.5em;
	color: var(--acc3-ink);
	box-shadow: none;
}

/* With the script: one input, drawn as six boxes behind transparent text (paste and autofill keep working). */
.eup-acc3-code.is-js .eup-acc3-code__boxes {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(6, calc(66.3 * var(--u)));
	gap: calc(16.3 * var(--u));
	pointer-events: none;
}

.eup-acc3-code.is-js .eup-acc3-code__boxes span {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--acc3-ink);
	border-radius: var(--acc3-r);
	background: var(--acc3-white);
	font-size: calc(28 * var(--u));
	font-weight: 500;
}

.eup-acc3-code.is-js .eup-acc3-code__boxes span.is-current {
	outline: 2px solid var(--acc3-ink);
	outline-offset: 1px;
}

.eup-acc3 .eup-acc3-code.is-js .eup-acc3-code__input {
	position: absolute;
	inset: 0;
	border-color: transparent;
	background: transparent;
	color: transparent;
	caret-color: transparent;
	outline: none;
}

.eup-acc3-resend {
	margin: calc(25 * var(--u)) 0 0;
}

.eup-acc3-resend__wait {
	margin: 0;
	font-size: var(--acc3-label);
	line-height: calc(34 * var(--u));
	font-weight: 300;
}

.eup-acc3-change {
	margin: 0;
}

.eup-acc3-hint {
	margin: calc(31 * var(--u)) 0 0;
	padding: calc(25 * var(--u)) calc(32 * var(--u));
	border-radius: var(--acc3-r);
	background: var(--acc3-tile);
	font-size: var(--acc3-label);
	line-height: calc(27 * var(--u));
	font-weight: 300;
}

/* ---- Step 3: password ---------------------------------------------------------------------------------------- */

.eup-acc3-verified {
	display: flex;
	align-items: center;
	gap: calc(6.5 * var(--u));
	margin: 0;
	font-size: var(--acc3-label);
	line-height: calc(34 * var(--u));
	font-weight: 400;
	color: var(--acc3-green);
}

.eup-acc3-verified__icon {
	width: calc(17.5 * var(--u));
	height: calc(17.5 * var(--u));
	flex: 0 0 auto;
}

.eup-acc3-pane--password .eup-acc3-pair .eup-acc3-field {
	margin-bottom: calc(24 * var(--u));
}

.eup-acc3-meter {
	display: inline-flex;
	align-items: center;
	gap: calc(17 * var(--u));
	min-height: calc(20 * var(--u));
}

.eup-acc3-meter__bars {
	display: inline-grid;
	grid-template-columns: repeat(4, calc(42.7 * var(--u)));
	gap: calc(7.3 * var(--u));
}

.eup-acc3-meter__bars i {
	display: block;
	height: calc(6 * var(--u));
	border-radius: calc(3 * var(--u));
	background: var(--acc3-tile);
}

.eup-acc3-meter__word {
	min-width: calc(40 * var(--u));
	font-size: calc(15 * var(--u));
	line-height: 1;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.eup-acc3-meter[data-level="weak"] .eup-acc3-meter__bars i:nth-child(-n+1) { background: var(--acc3-ink); }
.eup-acc3-meter[data-level="weak"] .eup-acc3-meter__word { color: var(--acc3-ink); }
.eup-acc3-meter[data-level="fair"] .eup-acc3-meter__bars i:nth-child(-n+2) { background: var(--acc3-yellow); }
.eup-acc3-meter[data-level="fair"] .eup-acc3-meter__word { color: var(--acc3-yellow); }
.eup-acc3-meter[data-level="good"] .eup-acc3-meter__bars i:nth-child(-n+3) { background: var(--acc3-green); }
.eup-acc3-meter[data-level="good"] .eup-acc3-meter__word { color: var(--acc3-green); }
.eup-acc3-meter[data-level="strong"] .eup-acc3-meter__bars i { background: var(--acc3-green); }
.eup-acc3-meter[data-level="strong"] .eup-acc3-meter__word { color: var(--acc3-green); }

.eup-acc3-rules {
	list-style: none;
	display: grid;
	grid-template-columns: calc(254.4 * var(--u)) calc(335.2 * var(--u)) 1fr;
	row-gap: calc(8 * var(--u));
	margin: calc(26.7 * var(--u)) 0 0;
	padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u)) calc(23.9 * var(--u));
	border-radius: var(--acc3-r);
	background: var(--acc3-tile);
}

.eup-acc3-rules li {
	display: flex;
	align-items: center;
	gap: calc(9 * var(--u));
	margin: 0;
	padding: 0;
	font-size: calc(17.4 * var(--u));
	line-height: calc(28 * var(--u));
	font-weight: 300;
}

.eup-acc3-rules__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(14 * var(--u));
	height: calc(14 * var(--u));
	flex: 0 0 auto;
	border: 1px solid var(--acc3-muted);
	border-radius: 50%;
}

.eup-acc3-rules__icon svg {
	display: none;
	width: calc(13.9 * var(--u));
	height: calc(10 * var(--u));
	color: var(--acc3-green);
}

.eup-acc3-rules li.is-met .eup-acc3-rules__icon {
	border-color: transparent;
}

.eup-acc3-rules li.is-met .eup-acc3-rules__icon svg {
	display: block;
}

.eup-acc3-check {
	display: flex;
	align-items: center;
	gap: calc(10 * var(--u));
	margin: calc(29 * var(--u)) 0 calc(34 * var(--u));
	font-size: calc(17.1 * var(--u));
	line-height: calc(28 * var(--u));
	font-weight: 300;
	cursor: pointer;
}

.eup-acc3-pane--signin .eup-acc3-check {
	margin: calc(4 * var(--u)) 0 calc(28.5 * var(--u));
}

.eup-acc3 .eup-acc3-check input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: calc(19.6 * var(--u));
	height: calc(19.6 * var(--u));
	min-width: 16px;
	min-height: 16px;
	margin: 0;
	border: 1px solid var(--acc3-ink);
	border-radius: 2px;
	background: var(--acc3-white);
	display: grid;
	place-content: center;
	cursor: pointer;
}

.eup-acc3 .eup-acc3-check input[type="checkbox"]:checked {
	background: var(--acc3-ink);
}

.eup-acc3 .eup-acc3-check input[type="checkbox"]:checked::after {
	content: "";
	width: 45%;
	height: 25%;
	border: 2px solid var(--acc3-white);
	border-top: 0;
	border-right: 0;
	transform: translateY(-15%) rotate(-45deg);
}

.eup-acc3 .eup-acc3-check input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--acc3-ink);
	outline-offset: 2px;
}

/* ---- Link and confirm screens -------------------------------------------------------------------------------- */

.eup-acc3-pane--link .eup-acc3-lead {
	margin: calc(8 * var(--u)) 0 calc(24 * var(--u));
}

.eup-acc3-cancel {
	margin: calc(20 * var(--u)) 0 0;
}

.eup-acc3-pane--confirm .eup-acc3-check {
	margin-top: calc(6 * var(--u));
}

/* ---- Popup (Flatsome header only) ---------------------------------------------------------------------------- */

.eup-acc3-popup {
	--u: 0.75px;
	padding: 8px 4px;
}

.eup-acc3-popup__title {
	margin: 0 0 16px;
	font-size: 26px;
	line-height: 1.2;
	font-weight: 400;
}

.eup-acc3-popup__signin {
	margin: 16px 0 0;
	font-size: 15px;
}

.eup-acc3-popup__signin a {
	color: var(--acc3-ink);
	text-decoration: underline;
}

/* ---- Narrower desktops and tablets --------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.eup-acc3 {
		grid-template-columns: 1fr;
		min-height: 0;
		row-gap: 28px;
		padding: 40px 40px 48px;
		margin-top: 24px;
	}

	.eup-acc3-panel__list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 28px;
		margin-top: 16px;
	}

	.eup-acc3-panel__list li {
		margin: 0;
		max-width: none;
	}

	.eup-acc3-panel__title span {
		display: inline;
	}
}

/* ---- Phones (no phone artboard: the desktop design, one column, at readable sizes) --------------------------- */

@media (max-width: 767px) {
	.eup-acc3,
	.eup-acc3-popup {
		--u: 0.7px;
		--acc3-field: 50px;
		--acc3-label: 15px;
		--acc3-btn: 16px;
	}

	.eup-acc3 {
		--acc3-w: calc(100vw - 32px);
		margin-top: 16px;
		margin-bottom: 40px;
		padding: 24px 18px 32px;
		row-gap: 20px;
		border-radius: 8px;
	}

	.eup-acc3-panel__title {
		font-size: 26px;
		line-height: 32px;
	}

	.eup-acc3-panel__list li {
		font-size: 15px;
		line-height: 20px;
		gap: 10px;
	}

	.eup-acc3-panel__list li span {
		padding-top: 2px;
	}

	.eup-acc3-icon,
	.eup-acc3-panel__list svg,
	.eup-acc3-panel__list img {
		width: 22px;
		height: 22px;
	}

	.eup-acc3-tabs {
		height: 48px;
		padding: 4px;
		margin-bottom: 20px;
	}

	.eup-acc3-step {
		font-size: 12px;
		line-height: 18px;
	}

	.eup-acc3-title {
		font-size: 23px;
		line-height: 34px;
	}

	.eup-acc3-lead,
	.eup-acc3-guest,
	.eup-acc3-hint,
	.eup-acc3-resend__wait,
	.eup-acc3-textbtn,
	.eup-acc3-forgot,
	.eup-acc3-verified {
		font-size: 15px;
		line-height: 22px;
	}

	.eup-acc3-label {
		line-height: 22px;
		margin-bottom: 6px;
	}

	.eup-acc3 .eup-acc3-input {
		font-size: 16px;
		padding: 0 14px;
	}

	.eup-acc3 .eup-acc3-input--pw {
		font-size: 17px;
		padding-right: 76px;
	}

	.eup-acc3-show {
		font-size: 14px;
		padding: 0 12px;
	}

	.eup-acc3-error {
		font-size: 14px;
	}

	.eup-acc3-or {
		font-size: 14px;
		margin: 18px 0 14px;
	}

	.eup-acc3-providers {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.eup-acc3-mark {
		width: 18px;
		height: 18px;
	}

	.eup-acc3-code-row {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.eup-acc3-code {
		width: min(100%, 318px);
		height: 50px;
	}

	.eup-acc3-code.is-js .eup-acc3-code__boxes {
		grid-template-columns: repeat(6, 1fr);
		gap: 8px;
	}

	.eup-acc3 .eup-acc3-code__input,
	.eup-acc3-code.is-js .eup-acc3-code__boxes span {
		font-size: 20px;
	}

	.eup-acc3-hint {
		padding: 14px 16px;
	}

	.eup-acc3-pair {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.eup-acc3-meter__bars {
		grid-template-columns: repeat(4, 24px);
		gap: 5px;
	}

	.eup-acc3-meter__bars i {
		height: 5px;
	}

	.eup-acc3-meter__word {
		font-size: 12px;
	}

	.eup-acc3-rules {
		grid-template-columns: 1fr;
		padding: 12px 14px;
		row-gap: 6px;
		column-gap: 10px;
	}

	.eup-acc3-rules li {
		font-size: 13px;
		line-height: 18px;
		gap: 7px;
	}

	.eup-acc3-rules__icon {
		width: 12px;
		height: 12px;
	}

	.eup-acc3-rules__icon svg {
		width: 11px;
		height: 8px;
	}

	.eup-acc3-check {
		font-size: 13px;
		line-height: 19px;
		margin: 18px 0 20px;
		align-items: flex-start;
	}
}

/* S-PH (D-571, G8): tap targets on touch screens only (hover:none and pointer:coarse). The "keep me signed in" row and the
   "Forgot password?" link become 44 px high; the rows' margins give back what the hit area adds, so no field moves. */
@media (hover: none) and (pointer: coarse) {
	.eup-acc3-forgot {
		display: inline-block;
		margin-block: -11px;
		padding-block: 11px;
	}

	.eup-acc3-check {
		align-items: flex-start;
		box-sizing: border-box;
		margin-bottom: calc(34 * var(--u) - 23px);
		min-height: 44px;
		padding-bottom: 23px;
	}

	.eup-acc3-pane--signin .eup-acc3-check {
		margin-bottom: calc(28.5 * var(--u) - 23px);
	}
}

@media (hover: none) and (pointer: coarse) and (max-width: 767px) {
	.eup-acc3-check {
		margin-bottom: -5px;
	}

	.eup-acc3-pane--signin .eup-acc3-check {
		margin-bottom: calc(28.5 * var(--u) - 25px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.eup-acc3 *,
	.eup-acc3-popup * {
		transition: none !important;
	}
}