.checkoutPage {
	background: #f5f5f7;
	color: #1d1d1f;
	min-height: 100vh;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(180%) blur(20px);
	background: rgba(255, 255, 255, 0.78);
	border-bottom: 1px solid rgba(210, 210, 215, 0.9);
}

.topbarInner {
	width: min(calc(100% - 64px), 1200px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 180px 1fr 280px;
	align-items: center;
	height: 52px;
	gap: 24px;
}

.backLink,
.helpText,
.progress span {
	font-size: 12px;
	line-height: 1;
}

.backLink {
	font-weight: 600;
	text-decoration: none;
	justify-self: start;

	&:hover {
		text-decoration: none;
	}
}

.progress {
	display: inline-flex;
	justify-content: center;
	gap: 22px;
	color: #6e6e73;
}

.progressActive {
	color: #1d1d1f;
	font-weight: 600;
}

.helpText {
	margin: 0;
	justify-self: end;
	color: #6e6e73;
}

.hero {
	padding: 72px 32px 36px;
}

.heroInner {
	width: min(100%, 1200px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
	gap: 32px;
	align-items: end;
}

.eyebrow,
.sectionKicker,
.stepCount {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6e6e73;
}

.heroTitle {
	margin: 0;
	font-size: clamp(42px, 6vw, 72px);
	line-height: 0.95;
	letter-spacing: -0.05em;
	max-width: 11ch;
}

.heroBody {
	max-width: 60ch;
	margin: 18px 0 0;
	font-size: 17px;
	line-height: 1.55;
	color: #424245;
}

.heroMeta {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;

	div {
		padding: 18px 18px 20px;
		border-radius: 24px;
		background: linear-gradient(180deg, #ffffff 0%, #f9f9fb 100%);
		border: 1px solid #e5e5ea;
		box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
	}

	strong,
	span {
		display: block;
	}

	strong {
		font-size: 16px;
		margin-bottom: 6px;
	}

	span {
		font-size: 14px;
		line-height: 1.45;
		color: #6e6e73;
	}
}

.checkoutSection {
	padding: 28px 32px 64px;
}

.checkoutGrid {
	width: min(100%, 1200px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.summaryRail {
	position: sticky;
	top: 84px;
	align-self: start;
}

.summarySticky {
	display: grid;
	gap: 16px;
}

.previewCard,
.orderCard,
.assuranceCard,
.panel,
.reviewCard {
	background: #ffffff;
	border: 1px solid #e5e5ea;
	border-radius: 32px;
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.previewCard,
.orderCard,
.assuranceCard,
.panel {
	padding: 22px;
}

.previewFrame {
	margin-top: 8px;
	padding: 22px;
	border-radius: 28px;
	background: radial-gradient(circle at top, #ffffff 0%, #f3f4f7 80%);
	border: 1px solid #ececf1;

	img {
		display: block;
		width: min(100%, 248px);
		height: auto;
		margin: 0 auto;
		object-fit: contain;
	}
}

.previewCopy {
	margin-top: 14px;
	display: grid;
	gap: 6px;
}

.previewTitle {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.previewSubtitle {
	margin: 0;
	font-size: 15px;
	color: #6e6e73;
}

.previewSpec {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: #424245;
}

.orderHeader {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;

	h2 {
		margin: 0;
		font-size: 25px;
		line-height: 1;
		letter-spacing: -0.03em;
	}
}

.priceNow {
	margin: 0;
	font-size: 29px;
	font-weight: 700;
	letter-spacing: -0.04em;
}

.orderRows {
	margin-top: 18px;
	display: grid;
	gap: 12px;
}

.cartList {
	margin-top: 18px;
	display: grid;
	gap: 14px;
}

.orderRow,
.orderSavings {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;

	span {
		color: #6e6e73;
	}

	strong {
		font-size: 15px;
		font-weight: 600;
		text-align: right;
	}
}

.orderSavings {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #e5e5ea;
}

.cartLine {
	display: grid;
	gap: 4px;
	min-width: 0;

	span {
		font-weight: 600;
		color: #1d1d1f;
	}
}

.cartLineMeta {
	margin: 0;
	font-size: 12px;
	line-height: 1.35;
	color: #6e6e73;
}

.cartItem {
	overflow: hidden;
	border: 1px solid #e5e5ea;
	border-radius: 24px;
	background: linear-gradient(180deg, #ffffff 0%, #fafafd 100%);
}

.cartItemImageWrap {
	padding: 18px;
	border-bottom: 1px solid rgba(210, 210, 215, 0.72);

	img {
		display: block;
		width: 100%;
		height: auto;
		max-width: 220px;
		margin: 0 auto;
	}
}

.cartItemBody {
	padding: 16px 18px 18px;
	display: grid;
	gap: 14px;
}

.cartItemTitle,
.cartItemSubtitle,
.cartItemMeta,
.cartItemPrice {
	margin: 0;
}

.cartItemTitle {
	display: block;
	font-size: 18px;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.cartItemSubtitle {
	font-size: 13px;
	line-height: 1.4;
	color: #424245;
}

.cartItemMeta {
	font-size: 12px;
	line-height: 1.4;
	color: #6e6e73;

	& + & {
		margin-top: 4px;
	}
}

.cartItemFooter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.cartItemPrice {
	font-size: 15px;
	font-weight: 700;
}

.cartItemRemove {
	padding: 0;
	border: 0;
	background: transparent;
	color: #0071e3;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.cartItemEmpty {
	padding: 18px;
	border: 1px dashed #d2d2d7;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	line-height: 1.5;
	color: #6e6e73;
}

.assuranceCard {
	h3 {
		margin: 0 0 12px;
		font-size: 18px;
		letter-spacing: -0.02em;
	}

	ul {
		margin: 0;
		padding-left: 18px;
		display: grid;
		gap: 8px;
		color: #424245;
		font-size: 13px;
		line-height: 1.45;
	}
}

.formColumn {
	display: grid;
	gap: 24px;
}

.panelHeader {
	margin-bottom: 22px;

	h2 {
		margin: 0;
		font-size: 34px;
		line-height: 1.02;
		letter-spacing: -0.04em;
	}

	p:last-child {
		margin: 12px 0 0;
		font-size: 16px;
		line-height: 1.55;
		color: #6e6e73;
	}
}

.fieldGrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.field {
	display: grid;
	gap: 8px;

	span {
		font-size: 13px;
		font-weight: 600;
		color: #424245;

		em {
			font-style: normal;
			font-weight: 500;
			color: #6e6e73;
		}
	}

	input,
	select,
	textarea {
		width: 100%;
		padding: 14px 16px;
		border: 1px solid #d2d2d7;
		border-radius: 18px;
		background: #fbfbfd;
		font-size: 14px;
		color: #1d1d1f;
		box-sizing: border-box;

		&:focus {
			outline: 2px solid rgba(0, 113, 227, 0.25);
			outline-offset: 0;
			border-color: #0071e3;
		}
	}

	textarea {
		min-height: 112px;
		resize: vertical;
	}
}

.fieldFull {
	grid-column: 1 / -1;
}

.stack {
	display: grid;
	gap: 14px;
}

.paymentShell {
	display: grid;
	gap: 18px;

	&[data-payment-state="loading"] {
		.stripeMount {
			border-color: #bcd0fb;
			background: linear-gradient(180deg, #f8fbff 0%, #f2f6fd 100%);
		}
	}

	&[data-payment-state="error"] {
		.stripeMount {
			border-color: rgba(180, 35, 24, 0.28);
			background: linear-gradient(180deg, #fff8f7 0%, #fff3f1 100%);
		}

		.paymentStatusPill {
			background: rgba(180, 35, 24, 0.12);
			color: #b42318;
		}
	}

	&[data-payment-state="ready"] {
		.paymentStatusPill {
			background: rgba(24, 121, 78, 0.12);
			color: #18794e;
		}
	}
}

.paymentModeRow {
	display: inline-grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: 6px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.04);
	width: min(100%, 420px);
}

.paymentModeButton {
	padding: 12px 16px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #6e6e73;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition:
		background-color 160ms ease,
		color 160ms ease,
		box-shadow 160ms ease;

	&[aria-pressed="true"] {
		background: #ffffff;
		color: #1d1d1f;
		box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
	}

	&:focus-visible {
		outline: 2px solid rgba(0, 113, 227, 0.35);
		outline-offset: 2px;
	}
}

.paymentPanel {
	padding: 22px;
	border: 1px solid #e5e5ea;
	border-radius: 28px;
	background: linear-gradient(180deg, #ffffff 0%, #fafafd 100%);
	box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.paymentPanelHeader {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 16px;

	strong,
	span,
	p {
		margin: 0;
	}

	strong {
		display: block;
		font-size: 18px;
		margin-bottom: 6px;
	}

	span,
	p {
		font-size: 13px;
		line-height: 1.45;
		color: #6e6e73;
	}

	p {
		white-space: nowrap;
		font-weight: 600;
		color: #1d1d1f;
	}
}

.stripeMount {
	padding: 20px;
	border: 1px dashed #c7d7f8;
	border-radius: 24px;
	background: linear-gradient(180deg, #f7fbff 0%, #f3f7fd 100%);
	min-height: 180px;
	display: grid;
	align-content: center;
	gap: 8px;
}

.stripeLoadingState,
.stripeReadyState {
	display: grid;
	gap: 12px;
}

.stripeLoadingState {
	grid-template-columns: auto 1fr;
	align-items: start;

	&[hidden] {
		display: none;
	}
}

.stripeReadyState {
	align-content: center;

	&[hidden] {
		display: none;
	}
}

.stripeSpinner {
	width: 20px;
	height: 20px;
	border-radius: 999px;
	border: 2px solid rgba(0, 113, 227, 0.16);
	border-top-color: #0071e3;
	animation: stripeSpin 0.9s linear infinite;
	margin-top: 2px;
}

.stripeLoadingCopy {
	display: grid;
	gap: 6px;
}

.stripeSkeletonGroup {
	grid-column: 1 / -1;
	display: grid;
	gap: 8px;
	margin-top: 4px;
}

.stripeSkeletonLine {
	display: block;
	height: 12px;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(0, 113, 227, 0.08) 0%, rgba(0, 113, 227, 0.18) 50%, rgba(0, 113, 227, 0.08) 100%);
	background-size: 220% 100%;
	animation: stripeShimmer 1.4s ease-in-out infinite;

	&:nth-child(1) {
		width: 72%;
	}

	&:nth-child(2) {
		width: 88%;
	}

	&:nth-child(3) {
		width: 56%;
	}
}

.stripeMountLabel,
.stripeMountBody {
	margin: 0;
}

.stripeMountLabel {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #1d1d1f;
}

.stripeMountBody {
	font-size: 14px;
	line-height: 1.5;
	color: #4a4a50;
	max-width: 52ch;
}

.paymentMetaRow,
.paymentStatusRow {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 14px;
}

.paymentMetaCard,
.paymentStatusCard {
	padding: 16px 18px;
	border-radius: 22px;
	border: 1px solid #e5e5ea;
	background: rgba(255, 255, 255, 0.82);

	strong,
	span {
		display: block;
	}

	strong {
		font-size: 14px;
		margin-bottom: 6px;
	}

	span {
		font-size: 13px;
		line-height: 1.45;
		color: #6e6e73;
	}
}

.paymentStatusPill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	margin: 8px 0 10px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(0, 113, 227, 0.12);
	color: #0071e3;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.paymentRetryButton {
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #0071e3;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	width: fit-content;

	&[hidden] {
		display: none;
	}

	&:focus-visible {
		outline: 2px solid rgba(0, 113, 227, 0.35);
		outline-offset: 2px;
		border-radius: 6px;
	}
	
	&:hover {
		text-decoration: underline;
	}
}

@keyframes stripeSpin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes stripeShimmer {
	0% {
		background-position: 100% 0;
	}

	100% {
		background-position: -100% 0;
	}
}

.optionCard,
.reviewCard {
	padding: 18px 20px;
	border-radius: 24px;
	background: linear-gradient(180deg, #ffffff 0%, #fafafd 100%);
}

.optionCard {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: flex-start;

	strong,
	span,
	p {
		margin: 0;
	}

	strong {
		display: block;
		font-size: 16px;
		margin-bottom: 6px;
	}

	span,
	p {
		font-size: 13px;
		line-height: 1.45;
		color: #6e6e73;
	}

	p {
		white-space: nowrap;
		font-weight: 600;
		color: #1d1d1f;
	}
}

.checkboxRow {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 12px;
	align-items: start;
	font-size: 14px;
	line-height: 1.5;
	color: #424245;

	& + & {
		margin-top: 14px;
	}

	input {
		margin: 3px 0 0;
	}

	span {
		font-size: 14px;
	}
}

.actions {
	display: flex;
	gap: 12px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.primaryCta,
.secondaryCta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 18px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 0;
}

.primaryCta {
	background: #0071e3;
	color: #ffffff;

	&:hover {
		background: #0077ed;
		text-decoration: none;
	}

	&:disabled,
	&[aria-disabled="true"] {
		opacity: 0.45;
		cursor: not-allowed;
		pointer-events: none;
	}
}

.secondaryCta {
	background: rgba(0, 0, 0, 0.04);
	color: #1d1d1f;

	&:hover {
		text-decoration: none;
		background: rgba(0, 0, 0, 0.06);
	}

	&:disabled,
	&[aria-disabled="true"] {
		opacity: 0.45;
		cursor: not-allowed;
		pointer-events: none;
	}
}

.footnote {
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: #6e6e73;
}

.statusCard {
	padding: 22px;
	border-radius: 28px;
	background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
	border: 1px solid rgba(0, 113, 227, 0.14);
	box-shadow: 0 20px 50px rgba(0, 113, 227, 0.08);
}

.statusPill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(0, 113, 227, 0.1);
	color: #0071e3;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.statusTitle {
	margin: 16px 0 0;
	font-size: 28px;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.statusBody {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: #424245;
}

.inlineMeta {
	margin-top: 20px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;

	div {
		padding: 16px 18px;
		border-radius: 22px;
		background: rgba(255, 255, 255, 0.88);
		border: 1px solid rgba(210, 210, 215, 0.75);
	}

	span,
	strong {
		display: block;
		margin: 0;
	}

	span {
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: #6e6e73;
	}

	strong {
		margin-top: 6px;
		font-size: 15px;
		line-height: 1.35;
		color: #1d1d1f;
	}
}

@media (max-width: 900px) {
	.topbarInner,
	.heroInner,
	.checkoutGrid {
		width: min(calc(100% - 48px), 1200px);
	}

	.heroInner,
	.checkoutGrid,
	.fieldGrid {
		grid-template-columns: 1fr;
	}

	.summaryRail {
		position: static;
	}

	.paymentMetaRow,
	.paymentStatusRow {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 734px) {
	.topbarInner {
		width: calc(100% - 32px);
		height: auto;
		padding: calc(env(safe-area-inset-top, 0px) + 10px) 0 10px;
		grid-template-columns: auto;
		gap: 10px;
	}

	.helpText {
		display: none;
	}

	.progress {
		justify-content: flex-start;
		gap: 10px;
		overflow-x: auto;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}

		span {
			flex: 0 0 auto;
			padding: 7px 10px;
			border-radius: 999px;
			background: rgba(0, 0, 0, 0.04);
		}
	}

	.progressActive {
		background: rgba(0, 113, 227, 0.1);
		color: #0071e3;
	}

	.hero {
		padding: 36px 16px 20px;
	}

	.heroInner,
	.checkoutGrid {
		width: 100%;
		gap: 16px;
	}

	.heroTitle {
		font-size: clamp(34px, 11vw, 46px);
		max-width: none;
	}

	.heroBody {
		font-size: 15px;
		line-height: 1.45;
	}

	.heroMeta div,
		.previewCard,
		.orderCard,
		.assuranceCard,
		.panel,
		.reviewCard,
		.paymentPanel {
		border-radius: 24px;
		box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
	}

	.checkoutSection {
		padding: 12px 16px 40px;
	}

	.previewCard,
		.orderCard,
		.assuranceCard,
		panel,
		.paymentPanel {
		padding: 18px;
	}

	.panel {
		padding: 18px;
	}

	.paymentModeRow {
		width: 100%;
	}

	.paymentModeButton {
		padding: 11px 14px;
		font-size: 12px;
	}

	.paymentPanelHeader {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.stripeMount {
		min-height: 152px;
		padding: 16px;
	}

	.stripeMountLabel {
		font-size: 12px;
	}

	.stripeMountBody,
		.paymentMetaCard span,
		.paymentStatusCard span {
		font-size: 12px;
	}

	.paymentMetaCard,
		.paymentStatusCard {
		padding: 14px 16px;
		border-radius: 18px;
	}

	.previewFrame {
		padding: 16px;

		img {
			width: min(100%, 220px);
		}
	}

	.previewTitle {
		font-size: 22px;
	}

	.previewSubtitle {
		font-size: 13px;
	}

	.previewSpec,
		.cartItemSubtitle,
		.cartItemMeta,
		.optionCard span,
		.optionCard p,
		.checkboxRow span {
		font-size: 12px;
	}

	.cartItemBody {
		padding: 14px 16px 16px;
		gap: 12px;
	}

	.cartItemImageWrap {
		padding: 16px;
	}

	.cartItemTitle {
		font-size: 16px;
	}

	.cartItemRemove,
		.cartItemPrice {
		font-size: 12px;
	}

	.orderHeader h2,
		.panelHeader h2 {
		font-size: 26px;
	}

	.priceNow {
		font-size: 24px;
	}

	.optionCard,
		.actions {
		grid-template-columns: 1fr;
	}

	.optionCard {
		display: grid;
	}

	.actions {
		display: grid;
	}

	.inlineMeta {
		grid-template-columns: 1fr;
	}

	.primaryCta,
		.secondaryCta {
		width: 100%;
	}
	}
