:root {
	--accent: #EB6B1A;
	--accent-tint: rgba(235, 107, 26, 0.12);
	--background: #F2F2F7;
	--surface: #FFFFFF;
	--label: #000000;
	--secondary-label: rgba(60, 60, 67, 0.62);
	--separator: rgba(60, 60, 67, 0.16);
	--glow: rgba(235, 107, 26, 0.18);
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--accent-tint: rgba(235, 107, 26, 0.2);
		--background: #000000;
		--surface: #1C1C1E;
		--label: #FFFFFF;
		--secondary-label: rgba(235, 235, 245, 0.62);
		--separator: rgba(84, 84, 88, 0.6);
		--glow: rgba(235, 107, 26, 0.24);
	}
}

* {
	box-sizing: border-box;
}

/* Components set their own display; `hidden` must still win. */
[hidden] {
	display: none !important;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--background);
	color: var(--label);
	font: 17px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.page {
	max-width: 440px;
	margin: 0 auto;
	padding: max(24px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom));
}

/* The card floats in a soft light, like the opened card in the app. */
.stage {
	position: relative;
	padding: 28px 8px 36px;
}

.stage::before {
	content: "";
	position: absolute;
	inset: -10% -20% 10%;
	background: radial-gradient(closest-side, var(--glow), transparent);
	z-index: -1;
}

.card {
	position: relative;
	aspect-ratio: 85.6 / 53.98;
	border-radius: 18px;
	padding: 18px 18px 16px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: #FFFFFF;
	background: linear-gradient(135deg, #3A3A3C, #1C1C1E);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.28),
		0 18px 40px rgba(0, 0, 0, 0.22),
		0 2px 6px rgba(0, 0, 0, 0.12);
	overflow: hidden;
	transition: opacity 0.4s ease;
}

.card::after {
	/* Satin sheen across the face. */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.16) 48%, rgba(255, 255, 255, 0) 62%);
	pointer-events: none;
}

.card.dark-text {
	color: #14141A;
}

.card-header {
	display: flex;
	align-items: center;
	gap: 12px;
}

.monogram {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.22);
	font: 700 15px/1 ui-rounded, -apple-system, sans-serif;
}

.card.dark-text .monogram {
	background: rgba(20, 20, 26, 0.1);
}

.card-name {
	font-weight: 600;
	font-size: 17px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-footer {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.field-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	opacity: 0.72;
}

.field-value {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.content {
	text-align: center;
}

.eyebrow {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--secondary-label);
}

h1 {
	margin: 0 0 10px;
	font-size: 28px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.lead {
	margin: 0 auto 24px;
	max-width: 34ch;
	color: var(--secondary-label);
	text-wrap: pretty;
}

.actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 24px;
}

.button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	font: 600 17px/1.2 inherit;
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.button:active {
	transform: scale(0.98);
	opacity: 0.85;
}

.button:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
}

.primary {
	background: var(--accent);
	color: #FFFFFF;
}

.secondary {
	background: var(--accent-tint);
	color: var(--accent);
}

.tertiary {
	margin: 0 auto;
	min-height: 44px;
	background: transparent;
	color: var(--accent);
}

.soon {
	margin: 4px 0 0;
	font-size: 15px;
	color: var(--secondary-label);
}

.steps {
	margin: 0 0 12px;
	padding: 16px 16px 16px 36px;
	text-align: left;
	background: var(--surface);
	border-radius: 16px;
	font-size: 15px;
	color: var(--secondary-label);
}

.steps li + li {
	margin-top: 8px;
}

.steps strong,
.steps em {
	color: var(--label);
	font-style: normal;
	font-weight: 600;
}

.copied {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--secondary-label);
}

.privacy {
	margin: 28px auto 0;
	max-width: 36ch;
	font-size: 13px;
	color: var(--secondary-label);
}

/* Until the link is read, only the card silhouette shows. */
body:not(.is-ready):not(.is-error) .card {
	opacity: 0.4;
}

body.is-error .card {
	opacity: 0.25;
}

@media (prefers-reduced-motion: reduce) {
	.card,
	.button {
		transition: none;
	}
}