/**
 * Passport, front end.
 *
 * The same two greens as everything else: #1D201A is the page, #262A20 is an
 * accent and never a field. Chrome sits darker than the page, not lighter.
 */
.kp {
	--kp-bg: #1D201A;
	--kp-surface: #262A20;
	--kp-ink: #ECE7DD;
	--kp-muted: #9A9C92;
	--kp-faint: #77776F;
	--kp-line: rgba(236, 231, 221, .11);
	--kp-brass: #C2A06B;
	--kp-sage: #A6B29B;

	max-width: 480px;
	margin: 0 auto;
	padding: clamp(24px, 5vw, 56px) 20px;
	color: var(--kp-ink);
	font-family: Mulish, -apple-system, sans-serif;
}

.kp * { min-width: 0; box-sizing: border-box; }

.kp-card {
	margin-bottom: 20px;
	padding: clamp(22px, 3vw, 34px);
	border: 1px solid var(--kp-line);
	background: var(--kp-bg);
}

.kp-eyebrow {
	margin: 0 0 12px;
	color: var(--kp-brass);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
}

.kp-title {
	margin: 0 0 10px;
	font-family: Cormorant, Georgia, serif;
	font-size: clamp(30px, 5vw, 42px);
	font-weight: 400;
	line-height: 1.1;
}

.kp-sub {
	margin: 0 0 12px;
	font-family: Cormorant, Georgia, serif;
	font-size: 24px;
	font-weight: 400;
}

.kp-rule {
	width: 56px;
	margin: 18px 0 20px;
	border: 0;
	border-top: 1px solid var(--kp-brass);
}

.kp-lead {
	margin: 0 0 16px;
	color: var(--kp-muted);
	font-size: 15px;
	line-height: 1.75;
}

.kp-field { display: block; margin-bottom: 16px; }

.kp-field span {
	display: block;
	margin-bottom: 7px;
	color: var(--kp-faint);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.kp-field input {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--kp-line);
	background: var(--kp-surface);
	color: var(--kp-ink);
	font-family: inherit;
	font-size: 15px;
}

.kp-field input:focus { border-color: var(--kp-brass); outline: none; }

.kp-btn {
	display: inline-block;
	margin-top: 6px;
	padding: 13px 28px;
	border: 0;
	background: var(--kp-ink);
	color: var(--kp-bg);
	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.kp-btn.kp-ghost {
	border: 1px solid var(--kp-line);
	background: transparent;
	color: var(--kp-ink);
}

.kp-msg {
	margin: 0 0 16px;
	padding: 13px 16px;
	border-left: 2px solid var(--kp-brass);
	background: var(--kp-surface);
	color: var(--kp-muted);
	font-size: 14px;
}

.kp-msg.is-bad { border-left-color: #C7594E; }
.kp-msg.is-ok { border-left-color: var(--kp-sage); }

.kp-products { margin: 0; padding: 0; list-style: none; }

.kp-products li { border-bottom: 1px solid var(--kp-line); }
.kp-products li:last-child { border-bottom: 0; }

.kp-products a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 0;
	color: var(--kp-ink);
	text-decoration: none;
}

.kp-product-name { font-family: Cormorant, Georgia, serif; font-size: 21px; }

.kp-product-go {
	color: var(--kp-brass);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}