.tss-passport-public,
.tss-passport-public *,
.tss-passport-drawer,
.tss-passport-drawer *,
.tss-passport-moment,
.tss-passport-moment *,
.tss-passport-toast,
.tss-passport-confetti {
	box-sizing: border-box;
}

/* Definitive rules and standalone terms keep the programme extractable. */
.tss-passport-terms--facts { display: grid; gap: var(--tss-sp-6); }

.tss-passport-fact-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tss-sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tss-passport-fact-grid li,
.tss-passport-reward-facts article {
	display: grid;
	gap: 6px;
	border: var(--tss-line-2) solid var(--tss-passport-black);
	padding: var(--tss-sp-4);
	background: var(--tss-passport-paper);
	box-shadow: var(--tss-shadow-sm);
}

.tss-passport-fact-grid strong,
.tss-passport-reward-facts h3 { margin: 0; font-size: 18px; font-weight: var(--tss-w-black); }
.tss-passport-fact-grid span,
.tss-passport-reward-facts p { margin: 0; color: var(--tss-passport-muted); font-size: 13px; line-height: 1.5; }

.tss-passport-reward-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tss-sp-4); }
.tss-passport-reward-facts article { border-top-width: 8px; border-top-color: var(--tss-passport-yellow); }
.tss-passport-reward-facts article > span { font-size: 11px; font-weight: var(--tss-w-black); letter-spacing: .04em; text-transform: uppercase; }

.tss-passport-legal {
	display: grid;
	gap: var(--tss-sp-5);
	max-width: 920px;
	margin: 0 auto;
	padding: clamp(24px, 5vw, 64px);
	border: var(--tss-line-2) solid var(--tss-passport-black);
	background: var(--tss-passport-paper);
	box-shadow: var(--tss-shadow-md);
}

.tss-passport-legal header { padding-bottom: var(--tss-sp-5); border-bottom: var(--tss-line-2) solid var(--tss-passport-black); }
.tss-passport-legal h1 { max-width: 14ch; margin: 8px 0 12px; font-size: clamp(36px, 6vw, 72px); line-height: .95; }
.tss-passport-legal h2 { margin: 0 0 8px; font-size: clamp(22px, 3vw, 30px); }
.tss-passport-legal h3 { margin: 16px 0 4px; font-size: 18px; }
.tss-passport-legal p,
.tss-passport-legal li { line-height: 1.65; }
.tss-passport-legal section { padding-bottom: var(--tss-sp-4); border-bottom: 1px dashed rgba(16, 16, 16, .28); }
.tss-passport-legal__contents { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border: var(--tss-line-2) solid var(--tss-passport-black); padding: 12px; background: var(--tss-passport-yellow); box-shadow: var(--tss-shadow-sm); }
.tss-passport-legal__contents strong { margin-right: 4px; }
.tss-passport-legal__contents a { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--tss-passport-black); padding: 8px 11px; background: var(--tss-passport-paper); color: var(--tss-passport-black); font-size: 13px; font-weight: var(--tss-w-black); text-decoration: none; }
.tss-passport-legal section[id] { scroll-margin-top: 110px; }

@media (max-width: 760px) {
	.tss-passport-fact-grid,
	.tss-passport-reward-facts { grid-template-columns: 1fr; }
	.tss-passport-legal { margin-inline: 12px; padding: 22px 18px; box-shadow: var(--tss-shadow-sm); }
	.tss-passport-legal__contents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tss-passport-legal__contents strong { grid-column: 1 / -1; }
}

/* Passport Club polish: account document components. */
.tss-passport-club-page--polish {
	--tss-passport-rule: 26px;
	--tss-passport-tabs-active: 0;
	container: tss-passport / inline-size;
	display: grid;
	gap: 20px;
	width: 100%;
	min-width: 0;
	color: var(--tss-passport-ink);
}

.tss-passport-club-page--polish * { box-sizing: border-box; }
.tss-passport-club-page--polish :is(h2, h3, p, ol, ul, dl) { margin-top: 0; }

.tss-passport-club-page--polish .tss-passport-pocket__heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 16px;
}

.tss-passport-club-page--polish .tss-passport-pocket__heading div { display: grid; gap: 5px; }
.tss-passport-club-page--polish .tss-passport-pocket__heading h2 { margin: 0; color: var(--tss-passport-black); font-size: clamp(26px, 4cqw, 40px); font-weight: var(--tss-w-black); line-height: 1; }

.tss-passport-label,
.tss-passport-form-no {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--tss-passport-muted);
	font-size: 12px;
	font-weight: var(--tss-w-black);
	letter-spacing: .05em;
	line-height: 1;
	text-transform: uppercase;
}

.tss-passport-label::before { width: 14px; height: 2px; background: currentColor; content: ""; }
.tss-passport-form-no { border: var(--tss-line-1) solid var(--tss-passport-black); padding: 7px 8px; color: var(--tss-passport-black); }

.tss-passport-club-page--polish .tss-passport-pocket__tabs { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--tss-line-2) solid var(--tss-passport-black); background: var(--tss-passport-paper); box-shadow: var(--tss-shadow-sm); }
.tss-passport-club-page--polish .tss-passport-pocket__tabs button { min-height: 46px; border: 0; border-right: var(--tss-line-1) solid var(--tss-passport-black); padding: 8px; background: transparent; color: var(--tss-passport-black); font: inherit; font-size: 13px; font-weight: var(--tss-w-black); cursor: pointer; }
.tss-passport-club-page--polish .tss-passport-pocket__tabs button:last-child { border-right: 0; }
.tss-passport-club-page--polish .tss-passport-pocket__tabs button[aria-selected="true"] { background: var(--tss-passport-yellow); box-shadow: inset 0 -3px 0 var(--tss-passport-black); }

.tss-passport-spread {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
	border: var(--tss-line-3) solid var(--tss-passport-black);
	background: var(--tss-passport-paper);
	box-shadow: var(--tss-shadow-lg);
	overflow: hidden;
}

.tss-passport-spread__page {
	display: grid;
	align-content: start;
	gap: var(--tss-passport-rule);
	min-width: 0;
	padding: clamp(16px, 3cqw, 28px);
	background:
		repeating-linear-gradient(0deg, transparent 0 calc(var(--tss-passport-rule) - 1px), rgba(16, 16, 16, .05) calc(var(--tss-passport-rule) - 1px) var(--tss-passport-rule)),
		var(--tss-passport-paper);
	background-origin: content-box;
}

.tss-passport-spread__page--status { background: linear-gradient(135deg, rgba(219, 238, 232, .5), transparent 55%), repeating-linear-gradient(0deg, transparent 0 calc(var(--tss-passport-rule) - 1px), rgba(16, 16, 16, .05) calc(var(--tss-passport-rule) - 1px) var(--tss-passport-rule)), var(--tss-passport-paper); background-origin: content-box; }
.tss-passport-spread__spine { border-right: var(--tss-line-1) dashed rgba(16, 16, 16, .24); border-left: var(--tss-line-1) dashed rgba(16, 16, 16, .24); background: linear-gradient(90deg, rgba(16, 16, 16, .08), transparent 48%, rgba(16, 16, 16, .08)); }
.tss-passport-spread__page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.tss-passport-seal { display: block; width: 42px; height: 42px; border: 2px solid var(--tss-passport-black); border-radius: 50%; background: repeating-conic-gradient(var(--tss-passport-black) 0 7deg, transparent 7deg 14deg); }
.tss-passport-seal::after { display: block; width: 22px; height: 22px; margin: 8px; border-radius: 50%; background: var(--tss-passport-paper); content: ""; }

.tss-passport-stamp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tss-passport-stamp { position: relative; display: grid; min-height: 122px; place-items: center; gap: 4px; border: var(--tss-line-2) solid var(--tss-passport-black); padding: 10px; color: var(--tss-passport-black); text-align: center; transform: rotate(-2deg); }
.tss-passport-stamp:nth-child(2n) { transform: rotate(2deg); }
.tss-passport-stamp:nth-child(3n) { transform: rotate(6deg); }
.tss-passport-stamp strong { font-size: clamp(20px, 4cqw, 38px); font-weight: var(--tss-w-black); line-height: .95; }
.tss-passport-stamp small { max-width: 100%; font-size: 11px; font-weight: var(--tss-w-black); line-height: 1.08; overflow-wrap: anywhere; }
.tss-passport-stamp--next { background: var(--tss-passport-yellow); }
.tss-passport-stamp--inked { background: rgba(21, 125, 116, .1); color: var(--tss-passport-teal); }
.tss-passport-stamp--inked.is-coral { background: rgba(255, 142, 120, .12); color: var(--tss-passport-coral); }
.tss-passport-stamp--example { border-style: dashed; background: transparent; color: rgba(16, 16, 16, .58); }
.tss-passport-stamp--example i { position: absolute; right: 5px; bottom: 5px; font-size: 9px; font-style: normal; font-weight: var(--tss-w-black); text-transform: uppercase; }
.tss-passport-stamp em { position: absolute; inset: -9px; border: var(--tss-line-2) solid currentColor; opacity: 0; pointer-events: none; transform: rotate(-4deg) scale(.82); }

.tss-passport-rule-copy { margin-bottom: 0; color: var(--tss-passport-ink); font-size: 15px; line-height: var(--tss-passport-rule); }
.tss-passport-plain-link { width: fit-content; border: 0; padding: 0; background: transparent; color: var(--tss-passport-black); font: inherit; font-size: 13px; font-weight: var(--tss-w-black); text-align: left; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }

.tss-passport-rank-stamp { display: grid; width: fit-content; gap: 4px; border: var(--tss-line-3) solid var(--tss-passport-black); padding: 13px 16px; background: var(--tss-passport-paper); box-shadow: var(--tss-shadow-sm); transform: rotate(-4deg); }
.tss-passport-rank-stamp span { color: var(--tss-passport-muted); font-size: 11px; font-weight: var(--tss-w-black); letter-spacing: .05em; text-transform: uppercase; }
.tss-passport-rank-stamp strong { color: var(--tss-passport-black); font-size: clamp(28px, 5cqw, 46px); font-weight: var(--tss-w-black); line-height: .9; }

.tss-passport-route-track { display: grid; grid-template-columns: auto minmax(70px, 1fr) auto; gap: 9px; align-items: center; min-height: 28px; color: var(--tss-passport-muted); font-size: 12px; font-weight: var(--tss-w-black); line-height: 1.15; }
.tss-passport-route-track i { position: relative; display: block; height: 7px; border: 2px dashed var(--tss-passport-black); background: var(--tss-passport-paper); overflow: hidden; }
.tss-passport-route-track i::after { display: block; width: var(--tss-passport-progress); height: 100%; background: var(--tss-passport-teal); content: ""; }
.tss-passport-route-track b { display: none; }
.tss-passport-route-track strong { color: var(--tss-passport-black); }

.tss-passport-counterfoil { display: grid; gap: 12px; border: var(--tss-line-2) solid var(--tss-passport-black); padding: 14px; background: var(--tss-passport-panel); box-shadow: var(--tss-shadow-sm); }
.tss-passport-counterfoil > div,
.tss-passport-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tss-passport-counterfoil > strong { color: var(--tss-passport-black); font-size: 20px; font-weight: var(--tss-w-black); line-height: 1.08; }
.tss-passport-counterfoil p { margin-bottom: 0; color: var(--tss-passport-ink); font-size: 14px; line-height: 1.45; }
.tss-passport-counterfoil dl { display: grid; gap: 8px; margin-bottom: 0; }
.tss-passport-counterfoil dl div { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 8px; font-size: 12px; line-height: 1.3; }
.tss-passport-counterfoil dt { color: var(--tss-passport-muted); font-weight: var(--tss-w-black); }
.tss-passport-counterfoil dd { margin: 0; color: var(--tss-passport-black); font-weight: var(--tss-w-bold); }

.tss-passport-state { display: inline-flex; align-items: center; width: fit-content; border: var(--tss-line-1) solid var(--tss-passport-black); padding: 5px 7px; background: var(--tss-passport-paper); color: var(--tss-passport-black); font-size: 11px; font-weight: var(--tss-w-black); line-height: 1; }
.tss-passport-state.is-held { background: var(--tss-passport-sage); }
.tss-passport-state.is-ready { background: var(--tss-passport-yellow); }
.tss-passport-paused-note { margin-bottom: 0; border-left: 3px solid var(--tss-passport-sage-ink); padding-left: 10px; color: var(--tss-passport-ink); font-size: 13px; font-weight: var(--tss-w-bold); line-height: 1.4; }
.tss-passport-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.tss-passport-club-page--polish .tss-passport-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: var(--tss-line-2) solid var(--tss-passport-black); padding: 10px 15px; background: var(--tss-passport-paper); box-shadow: 3px 3px 0 var(--tss-passport-black); color: var(--tss-passport-black); font-size: 14px; font-weight: var(--tss-w-black); line-height: 1.1; text-decoration: none; transition: background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; }
.tss-passport-club-page--polish .tss-passport-button--primary { background: var(--tss-passport-yellow); }
.tss-passport-club-page--polish .tss-passport-button:hover { background: var(--tss-passport-cream); }
.tss-passport-club-page--polish .tss-passport-button--primary:hover { background: #ffe36e; }
.tss-passport-club-page--polish .tss-passport-button:active { box-shadow: 1px 1px 0 var(--tss-passport-black); transform: translate(1px, 1px); }
.tss-passport-club-page--polish :is(a, button):focus-visible { outline: 3px solid var(--tss-passport-coral); outline-offset: 3px; }

.tss-passport-itinerary,
.tss-passport-panel { border: var(--tss-line-2) solid var(--tss-passport-black); padding: clamp(16px, 3cqw, 24px); background: var(--tss-passport-paper); box-shadow: var(--tss-shadow-sm); }
.tss-passport-itinerary summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--tss-passport-black); font-weight: var(--tss-w-black); cursor: pointer; }
.tss-passport-itinerary summary em { color: var(--tss-passport-muted); font-size: 12px; font-style: normal; }
.tss-passport-itinerary ol { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.tss-passport-itinerary li { display: grid; gap: 3px; border-left: 3px solid rgba(16, 16, 16, .25); padding: 5px 0 5px 11px; }
.tss-passport-itinerary li.is-current { border-left-color: var(--tss-passport-teal); }
.tss-passport-itinerary li strong { color: var(--tss-passport-black); font-weight: var(--tss-w-black); }
.tss-passport-itinerary li b { color: var(--tss-passport-ink); font-size: 14px; }
.tss-passport-itinerary li p { margin-bottom: 0; color: var(--tss-passport-muted); font-size: 13px; line-height: 1.35; }
.tss-passport-itinerary li em { color: var(--tss-passport-muted); font-size: 12px; font-style: normal; font-weight: var(--tss-w-bold); }

.tss-passport-panel { min-width: 0; }
.tss-passport-panel__head { margin-bottom: 16px; }
.tss-passport-panel__head > div { display: grid; gap: 5px; }
.tss-passport-panel__head h3 { margin: 0; color: var(--tss-passport-black); font-size: 24px; font-weight: var(--tss-w-black); line-height: 1; }
.tss-passport-ticket-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.tss-passport-ticket { position: relative; display: grid; gap: 8px; width: 100%; min-height: 150px; border: var(--tss-line-2) solid var(--tss-passport-black); padding: 15px 18px; background: var(--tss-passport-panel); color: var(--tss-passport-black); text-align: left; }
.tss-passport-ticket > i { position: absolute; top: 0; bottom: 0; left: 0; width: 10px; background: var(--tss-passport-paper); }
.tss-passport-ticket--preview { max-width: 520px; border-style: dashed; background: transparent; color: var(--tss-passport-muted); }
.tss-passport-ticket--preview > i { border-right: var(--tss-line-1) dashed var(--tss-passport-black); background: transparent; }
.tss-passport-ticket--held { box-shadow: var(--tss-shadow-sm); cursor: pointer; }
.tss-passport-ticket--held > i { background: var(--tss-passport-sage); }
.tss-passport-ticket--ready { box-shadow: var(--tss-shadow-md); cursor: pointer; }
.tss-passport-ticket--ready > i { background: var(--tss-passport-yellow); }
.tss-passport-ticket strong { color: var(--tss-passport-black); font-size: 19px; font-weight: var(--tss-w-black); line-height: 1.05; }
.tss-passport-ticket p { margin-bottom: 0; color: var(--tss-passport-ink); font-size: 13px; line-height: 1.35; }
.tss-passport-ticket small { color: var(--tss-passport-muted); font-size: 12px; font-weight: var(--tss-w-bold); }
.tss-passport-ticket--held:hover { background: var(--tss-passport-cream); }
.tss-passport-ticket--ready:hover { background: #fff8db; }
.tss-passport-ticket--held:active,
.tss-passport-ticket--ready:active { box-shadow: 1px 1px 0 var(--tss-passport-black); transform: translate(1px, 1px); }

.tss-passport-lore { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tss-passport-lore li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 11px; align-items: start; border-left: 3px solid var(--tss-passport-teal); padding: 8px 0 8px 10px; }
.tss-passport-lore li.is-warning { border-left-color: var(--tss-passport-coral); }
.tss-passport-lore__glyph { display: grid; width: 25px; height: 25px; place-items: center; border: var(--tss-line-1) solid currentColor; border-radius: 50%; color: var(--tss-passport-teal); font-size: 14px; font-weight: var(--tss-w-black); }
.tss-passport-lore li.is-warning .tss-passport-lore__glyph { color: var(--tss-passport-coral); }
.tss-passport-lore strong { display: block; color: var(--tss-passport-black); font-size: 14px; font-weight: var(--tss-w-black); }
.tss-passport-lore p { margin: 3px 0 0; color: var(--tss-passport-muted); font-size: 13px; line-height: 1.35; }
.tss-passport-lore time { color: var(--tss-passport-muted); font-size: 12px; font-weight: var(--tss-w-bold); }
.tss-passport-terms { box-shadow: none; }
.tss-passport-terms p { margin: 12px 0 0; color: var(--tss-passport-muted); font-size: 13px; line-height: 1.45; }

.tss-passport-public-router { display: grid; grid-template-columns: minmax(250px, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 48px); align-items: stretch; width: min(100% - clamp(20px, 4vw, 32px), 980px); margin: 0 auto; padding: clamp(24px, 5vw, 56px) 0; }
.tss-passport-public-router__credential { position: relative; display: grid; align-content: space-between; min-height: 270px; gap: 18px; border: var(--tss-line-3) solid var(--tss-passport-black); padding: 22px; background: var(--tss-passport-black); color: var(--tss-passport-paper); box-shadow: var(--tss-shadow-lg); overflow: hidden; }
.tss-passport-public-router__credential .tss-passport-label { color: var(--tss-passport-paper); }
.tss-passport-public-router__credential strong { position: relative; font-size: clamp(32px, 4.5vw, 52px); font-weight: var(--tss-w-black); line-height: .9; }
.tss-passport-public-router__credential p { position: relative; max-width: 30ch; margin: 0; font-size: 14px; font-weight: var(--tss-w-bold); line-height: 1.4; }
.tss-passport-public-router__ghost { position: absolute; right: -8px; bottom: -10px; color: rgba(255, 247, 223, .13); font-size: clamp(64px, 10vw, 115px); font-weight: var(--tss-w-black); line-height: .78; text-align: right; }
.tss-passport-public-router__copy { display: grid; align-content: center; justify-items: start; gap: 16px; }
.tss-passport-public-router__copy h1 { margin: 0; color: var(--tss-passport-black); font-size: clamp(32px, 4.5vw, 56px); font-weight: var(--tss-w-black); line-height: .95; }
.tss-passport-public-router__copy p { max-width: 44ch; margin: 0; color: var(--tss-passport-ink); font-size: 16px; line-height: 1.45; }

@media (prefers-reduced-motion: no-preference) {
	.tss-passport-club-page--polish[data-tss-passport-settle="true"] .tss-passport-spread { animation: tssPassportPolishSettle 240ms var(--tss-ease-out) both; }
	.tss-passport-club-page--polish .tss-passport-stamp.is-stamping em,
	.tss-passport-club-page--polish .tss-passport-stamp em.is-visible { animation: tssPassportPolishStamp 560ms var(--tss-ease-out) both; }
	.tss-passport-club-page--polish [data-passport-panel].tss-passport-panel--incoming { animation: tssPassportPolishSlide 180ms var(--tss-ease-out) both; }
}

@keyframes tssPassportPolishSettle { from { opacity: .65; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes tssPassportPolishStamp { 0% { opacity: 0; transform: rotate(-4deg) scale(.82); } 65% { opacity: 1; transform: rotate(-4deg) scale(1.04); } 100% { opacity: 0; transform: rotate(-4deg) scale(1.08); } }
@keyframes tssPassportPolishSlide { from { opacity: .35; transform: translateX(6px); } to { opacity: 1; transform: none; } }

@container tss-passport (max-width: 980px) {
	.tss-passport-club-page--polish { --tss-passport-tabs-active: 1; }
	.tss-passport-club-page--polish .tss-passport-pocket__tabs { display: grid; }
	.tss-passport-club-page--polish .tss-passport-spread { grid-template-columns: 1fr; }
	.tss-passport-club-page--polish .tss-passport-spread__spine { display: none; }
	.tss-passport-club-page--polish [data-passport-panel][hidden] { display: none; }
}

@container tss-passport (max-width: 720px) {
	.tss-passport-stamp-grid { gap: 9px; }
	.tss-passport-stamp { min-height: 100px; padding: 7px; }
	.tss-passport-counterfoil dl div { grid-template-columns: 1fr; gap: 2px; }
	.tss-passport-ticket-list { grid-template-columns: 1fr; }
}

@container tss-passport (max-width: 520px) {
	.tss-passport-club-page--polish .tss-passport-pocket__heading { align-items: start; }
	.tss-passport-form-no { font-size: 10px; }
	.tss-passport-stamp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tss-passport-stamp { min-height: 84px; }
	.tss-passport-stamp strong { font-size: 21px; }
	.tss-passport-stamp small { font-size: 9px; }
	.tss-passport-stamp--example:nth-child(n+4) { display: none; }
	.tss-passport-lore li { grid-template-columns: 28px minmax(0, 1fr); }
	.tss-passport-lore time { grid-column: 2; }
}

@media (max-width: 720px) {
	.tss-passport-public-router { grid-template-columns: 1fr; width: min(100% - 32px, 560px); }
	.tss-passport-public-router__credential { min-height: 230px; }
}

:root {
	--tss-passport-black: #101010;
	--tss-passport-ink: #2e2a22;
	--tss-passport-muted: #5d564b;
	--tss-passport-cream: #fff5d8;
	--tss-passport-paper: #fffdf3;
	--tss-passport-panel: #ffffff;
	--tss-passport-yellow: #ffd633;
	--tss-passport-sage: #dbeee8;
	--tss-passport-mint: #e7f7ef;
	--tss-passport-teal: #157d74;
	--tss-passport-coral: #ff8e78;
	--tss-passport-gold: #a87f00;
	--tss-passport-sage-ink: #3f6f5e;

	--tss-fs-label: 12px;
	--tss-fs-small: 13px;
	--tss-fs-body: clamp(15px, 1.4vw, 17px);
	--tss-fs-h3: 20px;
	--tss-fs-h2: clamp(26px, 3vw, 40px);
	--tss-fs-h1: clamp(38px, 5.5vw, 64px);
	--tss-fs-display: clamp(34px, 5vw, 58px);
	--tss-track-caps: 0.05em;

	--tss-w-body: 500;
	--tss-w-bold: 700;
	--tss-w-black: 900;

	--tss-sp-1: 4px;
	--tss-sp-2: 8px;
	--tss-sp-3: 12px;
	--tss-sp-4: 16px;
	--tss-sp-5: 24px;
	--tss-sp-6: 32px;
	--tss-pad-section: clamp(16px, 2.4vw, 28px);

	--tss-line-1: 1px;
	--tss-line-2: 2px;
	--tss-line-3: 3px;
	--tss-r: 8px;

	--tss-shadow-sm: 2px 2px 0 rgba(16, 16, 16, 0.2);
	--tss-shadow-md: 4px 4px 0 rgba(16, 16, 16, 0.22);
	--tss-shadow-lg: 8px 8px 0 rgba(16, 16, 16, 0.28);
	--tss-shadow-reward: 8px 8px 0 var(--tss-passport-yellow);

	--tss-dur-fast: 150ms;
	--tss-dur-base: 320ms;
	--tss-dur-slow: 620ms;
	--tss-ease-out: cubic-bezier(0.2, 0.8, 0.25, 1);
	--tss-ease-pop: cubic-bezier(0.16, 0.92, 0.26, 1.12);
	--tss-header-offset: 0px;
}

.tss-passport-public [hidden],
.tss-passport-drawer [hidden],
.tss-passport-moment [hidden],
.tss-passport-toast[hidden],
.tss-passport-confetti[hidden] {
	display: none !important;
}

body.tss-passport-public-page #page-header.page-header--page {
	display: none;
}

.tss-passport-public {
	display: grid;
	gap: var(--tss-sp-5);
	width: min(100% - clamp(20px, 4vw, 32px), 1220px);
	margin: 0 auto;
	padding: var(--tss-pad-section) 0 clamp(48px, 7vw, 86px);
	color: var(--tss-passport-ink);
	container: tss-passport / inline-size;
	font-family: inherit;
	font-weight: var(--tss-w-body);
	min-width: 0;
}

.tss-passport-drawer,
.tss-passport-moment,
.tss-passport-toast {
	font-weight: var(--tss-w-body);
}

.tss-passport-public a,
.tss-passport-public button {
	font-family: inherit;
	font-weight: inherit;
}

.tss-passport-public button {
	cursor: pointer;
}

.tss-passport-public :is(a, button, [tabindex="0"]):focus-visible,
.tss-passport-drawer :is(a, button):focus-visible,
.tss-passport-moment :is(a, button):focus-visible {
	outline: 3px solid var(--tss-passport-coral);
	outline-offset: 3px;
}

.tss-passport-hero,
.tss-passport-actions,
.tss-passport-stage,
.tss-passport-panel,
.tss-passport-terms {
	border: var(--tss-line-1) solid rgba(16, 16, 16, 0.14);
	border-radius: var(--tss-r);
	background: rgba(255, 253, 243, 0.88);
	box-shadow: none;
}

.tss-passport-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
	gap: var(--tss-sp-5);
	align-items: stretch;
	overflow: hidden;
	min-width: 0;
	padding: var(--tss-pad-section);
	background:
		linear-gradient(115deg, rgba(219, 238, 232, 0.88), rgba(231, 247, 239, 0.76) 58%, rgba(255, 253, 243, 0.96)),
		var(--tss-passport-paper);
}

.tss-passport-hero::after {
	content: "";
	position: absolute;
	right: clamp(18px, 8vw, 140px);
	bottom: -22px;
	width: 120px;
	height: 120px;
	border: 16px solid rgba(21, 125, 116, 0.13);
	border-radius: 999px;
	pointer-events: none;
}

.tss-passport-hero__copy {
	position: relative;
	z-index: 1;
	display: grid;
	align-content: center;
	gap: var(--tss-sp-5);
	min-width: 0;
	min-height: clamp(230px, 24vw, 320px);
	border: var(--tss-line-1) dashed rgba(16, 16, 16, 0.18);
	border-radius: var(--tss-r);
	padding: clamp(18px, 3.5vw, 40px);
	background: rgba(255, 253, 243, 0.52);
}

.tss-passport-tag {
	display: inline-flex;
	width: fit-content;
	max-width: 100%;
	align-items: center;
	justify-content: center;
	border: var(--tss-line-2) solid var(--tss-passport-black);
	border-radius: 999px;
	padding: var(--tss-sp-2) var(--tss-sp-3);
	background: var(--tss-passport-paper);
	color: var(--tss-passport-black);
	box-shadow: var(--tss-shadow-sm);
	font-size: var(--tss-fs-label);
	font-weight: var(--tss-w-black);
	letter-spacing: var(--tss-track-caps);
	line-height: 1;
	text-transform: uppercase;
}

.tss-passport-hero .tss-passport-tag,
.tss-passport-tag--action {
	background: var(--tss-passport-yellow);
}

.tss-passport-tag--soft {
	background: var(--tss-passport-sage);
}

.tss-passport-hero h1,
.tss-passport-stage h2,
.tss-passport-panel h2,
.tss-passport-next h2,
.tss-passport-terms h2,
.tss-passport-drawer h2 {
	margin: 0;
	color: var(--tss-passport-black);
	font-weight: var(--tss-w-bold);
	letter-spacing: 0;
	line-height: 0.98;
}

.tss-passport-hero h1 {
	max-width: 790px;
	font-size: var(--tss-fs-h1);
	overflow-wrap: anywhere;
}

.tss-passport-hero p,
.tss-passport-summary p,
.tss-passport-next p,
.tss-passport-panel-head p,
.tss-passport-terms li,
.tss-passport-drawer p {
	margin: 0;
	color: var(--tss-passport-ink);
	font-size: var(--tss-fs-body);
	font-weight: var(--tss-w-body);
	line-height: 1.48;
}

.tss-passport-hero__actions,
.tss-passport-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tss-sp-3);
	align-items: center;
}

.tss-passport-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	max-width: 100%;
	border: var(--tss-line-2) solid var(--tss-passport-black);
	border-radius: 999px;
	padding: 10px 18px;
	background: var(--tss-passport-panel);
	color: var(--tss-passport-black);
	box-shadow: none;
	font-size: 14px;
	font-weight: var(--tss-w-black);
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--tss-dur-fast) var(--tss-ease-out), box-shadow var(--tss-dur-fast) var(--tss-ease-out), transform var(--tss-dur-fast) var(--tss-ease-out);
}

.tss-passport-button--primary {
	background: var(--tss-passport-yellow);
}

.tss-passport-button--quiet {
	border-color: rgba(16, 16, 16, 0.24);
	color: rgba(16, 16, 16, 0.52);
}

.tss-passport-button:hover {
	background: var(--tss-passport-cream);
}

.tss-passport-button:active {
	box-shadow: var(--tss-shadow-sm);
	transform: translate(1px, 1px);
}

.tss-passport-hero__panel {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--tss-sp-3);
	align-content: stretch;
	min-width: 0;
}

.tss-passport-mini-metric {
	display: grid;
	gap: var(--tss-sp-2);
	min-width: 0;
	border: var(--tss-line-1) solid rgba(16, 16, 16, 0.12);
	border-radius: var(--tss-r);
	padding: clamp(14px, 2vw, 20px);
	background: var(--tss-passport-panel);
	box-shadow: inset 0 0 0 var(--tss-line-1) color-mix(in srgb, var(--tss-passport-panel) 55%, transparent);
}

.tss-passport-mini-metric span,
.tss-passport-progress-block__top,
.tss-passport-ticket span,
.tss-passport-route-chip span,
.tss-passport-rules-list span {
	color: var(--tss-passport-muted);
	font-size: var(--tss-fs-label);
	font-weight: var(--tss-w-black);
	letter-spacing: var(--tss-track-caps);
	line-height: 1;
	text-transform: uppercase;
}

.tss-passport-mini-metric strong {
	color: var(--tss-passport-black);
	font-size: clamp(26px, 3vw, 36px);
	font-weight: var(--tss-w-black);
	line-height: 1;
}

.tss-passport-actions {
	position: sticky;
	top: var(--tss-sp-3);
	z-index: 5;
	padding: var(--tss-sp-3);
	background: rgba(255, 253, 243, 0.94);
	backdrop-filter: blur(10px);
}

.tss-passport-stage {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
	gap: var(--tss-sp-5);
	overflow: hidden;
	padding: var(--tss-pad-section);
}

.tss-passport-stage::before {
	content: "";
	position: absolute;
	inset: auto -60px -160px auto;
	width: 360px;
	height: 260px;
	border-radius: 999px;
	background: rgba(21, 125, 116, 0.08);
	pointer-events: none;
}

.tss-passport-card {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1fr);
	gap: var(--tss-sp-5);
	align-items: stretch;
	border: var(--tss-line-3) solid var(--tss-passport-black);
	border-radius: var(--tss-r);
	padding: var(--tss-sp-5);
	background:
		linear-gradient(135deg, rgba(255, 253, 243, 0.96), rgba(219, 238, 232, 0.9) 72%),
		var(--tss-passport-paper);
}

.tss-passport-cover {
	position: relative;
	overflow: hidden;
	min-height: 360px;
	border: var(--tss-line-3) solid var(--tss-passport-black);
	border-radius: var(--tss-r);
	background:
		radial-gradient(circle at 84% 16%, rgba(16, 16, 16, 0.09) 0 46px, transparent 47px),
		linear-gradient(160deg, rgba(255, 253, 243, 0.96), rgba(255, 249, 224, 0.94));
	box-shadow: var(--tss-shadow-lg);
	transform: rotate(-1deg);
}

.tss-passport-cover__wordmark {
	position: absolute;
	top: 26px;
	left: 24px;
	color: rgba(16, 16, 16, 0.055);
	font-size: var(--tss-fs-display);
	font-weight: var(--tss-w-black);
	line-height: 0.86;
	pointer-events: none;
}

.tss-passport-cover__seal {
	position: absolute;
	top: 28px;
	right: 24px;
	width: 62px;
	height: 62px;
	border: var(--tss-line-3) solid rgba(16, 16, 16, 0.56);
	border-radius: 50%;
	background:
		repeating-conic-gradient(from 0deg, rgba(16, 16, 16, 0.42) 0deg 6deg, transparent 6deg 12deg),
		radial-gradient(circle, transparent 0 23px, rgba(255, 253, 243, 0.95) 24px 100%);
}

.tss-passport-stamp {
	position: absolute;
	left: 44px;
	right: 32px;
	bottom: 42px;
	display: grid;
	gap: var(--tss-sp-2);
	max-width: 270px;
	border: 5px solid var(--tss-passport-black);
	border-radius: var(--tss-r);
	padding: var(--tss-sp-5);
	background: var(--tss-passport-yellow);
	color: var(--tss-passport-black);
	box-shadow: var(--tss-shadow-md);
	transform: rotate(-4deg);
	transform-origin: 50% 70%;
}

.tss-passport-stamp span {
	font-size: var(--tss-fs-label);
	font-weight: var(--tss-w-black);
	letter-spacing: var(--tss-track-caps);
	line-height: 1;
	text-transform: uppercase;
}

.tss-passport-stamp strong {
	font-size: var(--tss-fs-display);
	font-weight: var(--tss-w-black);
	letter-spacing: 0;
	line-height: 0.92;
}

.tss-passport-stamp.is-stamping {
	animation: tssPassportStamp var(--tss-dur-slow) var(--tss-ease-pop);
}

.tss-passport-stamp-splash {
	position: absolute;
	left: 44px;
	bottom: 168px;
	opacity: 0;
	border: var(--tss-line-2) solid var(--tss-passport-black);
	border-radius: 999px;
	padding: var(--tss-sp-2) var(--tss-sp-3);
	background: var(--tss-passport-coral);
	color: var(--tss-passport-black);
	font-size: var(--tss-fs-label);
	font-weight: var(--tss-w-black);
	letter-spacing: var(--tss-track-caps);
	text-transform: uppercase;
	transform: rotate(-8deg) scale(0.88);
}

.tss-passport-stamp-splash.is-visible {
	animation: tssPassportSplash var(--tss-dur-slow) var(--tss-ease-out) forwards;
}

.tss-passport-summary,
.tss-passport-next {
	position: relative;
	z-index: 1;
	display: grid;
	align-content: center;
	gap: var(--tss-sp-4);
	min-width: 0;
	border: var(--tss-line-2) solid rgba(16, 16, 16, 0.14);
	border-radius: var(--tss-r);
	padding: var(--tss-pad-section);
	background: var(--tss-passport-panel);
}

.tss-passport-summary h2,
.tss-passport-next h2,
.tss-passport-panel h2 {
	font-size: var(--tss-fs-h2);
}

.tss-passport-progress-block {
	display: grid;
	gap: var(--tss-sp-2);
	margin-top: var(--tss-sp-1);
}

.tss-passport-progress-block__top {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tss-sp-2);
	justify-content: space-between;
	color: var(--tss-passport-black);
}

.tss-passport-progress-block__top strong {
	color: var(--tss-passport-black);
	font-size: var(--tss-fs-label);
	font-weight: var(--tss-w-black);
	letter-spacing: var(--tss-track-caps);
	line-height: 1;
	text-transform: uppercase;
}

.tss-passport-progress-track {
	--progress: 50%;
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 16px;
	border: var(--tss-line-3) solid var(--tss-passport-black);
	border-radius: 999px;
	background: var(--tss-passport-panel);
}

.tss-passport-progress-track i {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--progress);
	border-right: var(--tss-line-3) solid var(--tss-passport-black);
	background:
		repeating-linear-gradient(90deg, var(--tss-passport-yellow) 0 28px, var(--tss-passport-teal) 28px 42px);
	transition: width var(--tss-dur-base) var(--tss-ease-out);
}

.tss-passport-progress-track--small {
	height: 12px;
	border-width: var(--tss-line-2);
}

.tss-passport-reward-pulse {
	border: var(--tss-line-1) solid rgba(21, 125, 116, 0.26);
	border-radius: var(--tss-r);
	padding: var(--tss-sp-4);
	background: rgba(223, 244, 242, 0.9);
	color: var(--tss-passport-teal);
	font-size: 15px;
	font-weight: var(--tss-w-bold);
	line-height: 1.35;
}

.tss-passport-reward-pulse.is-hot {
	animation: tssPassportPulse var(--tss-dur-slow) var(--tss-ease-out);
}

.tss-passport-route-grid,
.tss-passport-ticket-grid {
	display: grid;
	gap: var(--tss-sp-3);
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.tss-passport-route-chip,
.tss-passport-ticket {
	min-width: 0;
	border: var(--tss-line-2) solid rgba(16, 16, 16, 0.18);
	border-radius: var(--tss-r);
	padding: var(--tss-sp-3);
	background: rgba(255, 253, 243, 0.76);
	color: var(--tss-passport-black);
	font-weight: var(--tss-w-body);
	text-align: left;
	transition: border-color var(--tss-dur-fast) var(--tss-ease-out), box-shadow var(--tss-dur-fast) var(--tss-ease-out), transform var(--tss-dur-fast) var(--tss-ease-out);
}

.tss-passport-route-chip {
	display: grid;
	gap: var(--tss-sp-2);
}

.tss-passport-route-chip strong,
.tss-passport-ticket strong {
	display: block;
	color: var(--tss-passport-black);
	font-size: var(--tss-fs-h3);
	font-weight: var(--tss-w-black);
	line-height: 1.08;
}

.tss-passport-route-chip small,
.tss-passport-ticket small {
	display: inline-flex;
	width: fit-content;
	max-width: 100%;
	border: var(--tss-line-1) solid rgba(16, 16, 16, 0.12);
	border-radius: 999px;
	padding: var(--tss-sp-1) var(--tss-sp-2);
	background: var(--tss-passport-panel);
	color: var(--tss-passport-black);
	font-size: var(--tss-fs-label);
	font-weight: var(--tss-w-bold);
	line-height: 1;
}

.tss-passport-route-chip.is-current,
.tss-passport-route-chip:hover,
.tss-passport-ticket:hover {
	border-color: var(--tss-passport-black);
	background: var(--tss-passport-cream);
}

.tss-passport-route-note {
	border-left: var(--tss-line-3) solid var(--tss-passport-teal);
	padding-left: var(--tss-sp-3);
	font-size: 15px;
}

.tss-passport-screen-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tss-sp-5);
	align-items: start;
}

.tss-passport-panel {
	display: grid;
	gap: var(--tss-sp-5);
	min-width: 0;
	padding: var(--tss-pad-section);
	background: rgba(255, 253, 243, 0.88);
}

.tss-passport-panel-head {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(220px, 1fr);
	gap: var(--tss-sp-4);
	align-items: start;
}

.tss-passport-panel-head > p {
	justify-self: end;
	max-width: 420px;
	text-align: right;
}

.tss-passport-ticket-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tss-passport-ticket {
	display: grid;
	gap: var(--tss-sp-3);
	min-height: 165px;
	background: rgba(255, 253, 243, 0.86);
}

.tss-passport-ticket[disabled] {
	cursor: default;
	opacity: 0.76;
}

.tss-passport-ticket p {
	margin: 0;
	color: var(--tss-passport-ink);
	font-size: 14px;
	font-weight: var(--tss-w-body);
	line-height: 1.38;
}

.tss-passport-ticket.is-ready {
	background: rgba(255, 253, 243, 0.96);
}

.tss-passport-ticket.is-empty,
.tss-passport-ticket.is-preview {
	background: var(--tss-passport-panel);
}

.tss-passport-ticket.is-cart,
.tss-passport-ticket.is-ready.is-used {
	background: rgba(223, 244, 242, 0.78);
}

.tss-passport-ticket.is-ready.is-used {
	opacity: 0.72;
}

.tss-passport-ticket.is-ready.is-used small {
	background: var(--tss-passport-mint);
}

.tss-passport-ticket.is-ready::after,
.tss-passport-ticket.is-cart::after,
.tss-passport-ticket.is-ready[data-signal-ticket]::after {
	content: "";
	display: block;
	height: 1px;
	margin-top: auto;
	background: rgba(16, 16, 16, 0.12);
}

.tss-passport-ticket.is-ready[data-signal-ticket] {
	background: rgba(219, 238, 232, 0.76);
}

.tss-passport-rank-track {
	display: grid;
	gap: var(--tss-sp-3);
	grid-template-columns: repeat(6, minmax(0, 1fr));
	align-items: stretch;
}

.tss-passport-rank-step {
	position: relative;
	display: grid;
	gap: var(--tss-sp-2);
	min-width: 0;
	min-height: 135px;
	align-content: start;
	border: var(--tss-line-2) solid rgba(16, 16, 16, 0.12);
	border-radius: var(--tss-r);
	padding: var(--tss-sp-3);
	background: var(--tss-passport-paper);
	color: var(--tss-passport-black);
	font-weight: var(--tss-w-body);
	text-align: left;
	transition: border-color var(--tss-dur-fast) var(--tss-ease-out), box-shadow var(--tss-dur-fast) var(--tss-ease-out), transform var(--tss-dur-fast) var(--tss-ease-out);
}

.tss-passport-rank-step::after {
	content: "";
	position: absolute;
	top: 32px;
	right: -14px;
	width: 14px;
	height: var(--tss-line-1);
	background: rgba(16, 16, 16, 0.22);
}

.tss-passport-rank-step:last-child::after {
	content: none;
}

.tss-passport-rank-step span {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: var(--tss-line-2) solid var(--tss-passport-black);
	border-radius: 50%;
	background: var(--tss-passport-paper);
	box-shadow: none;
	font-size: 18px;
	font-weight: var(--tss-w-black);
	line-height: 1;
}

.tss-passport-rank-step strong {
	color: var(--tss-passport-black);
	font-size: 16px;
	font-weight: var(--tss-w-black);
	line-height: 1.04;
}

.tss-passport-rank-step small {
	color: var(--tss-passport-muted);
	font-size: var(--tss-fs-label);
	font-weight: var(--tss-w-bold);
	letter-spacing: var(--tss-track-caps);
	line-height: 1.2;
	text-transform: uppercase;
}

.tss-passport-rank-step.is-complete {
	background: rgba(223, 244, 242, 0.9);
}

.tss-passport-rank-step.is-current {
	border-color: var(--tss-passport-black);
	background: rgba(255, 253, 243, 0.96);
}

.tss-passport-rank-step.is-complete span {
	background: var(--tss-passport-mint);
}

.tss-passport-rank-step.is-current span {
	background: var(--tss-passport-yellow);
	box-shadow: var(--tss-shadow-sm);
}

.tss-passport-rank-step.is-new span {
	animation: tssPassportBadge var(--tss-dur-slow) var(--tss-ease-pop);
}

.tss-passport-rank-detail {
	border: var(--tss-line-2) solid var(--tss-passport-black);
	border-radius: var(--tss-r);
	padding: var(--tss-sp-4);
	background: var(--tss-passport-panel);
}

.tss-passport-rank-detail strong {
	display: block;
	margin-bottom: var(--tss-sp-1);
	color: var(--tss-passport-black);
	font-size: var(--tss-fs-h3);
	font-weight: var(--tss-w-black);
	line-height: 1.08;
}

.tss-passport-rank-detail p {
	margin: 0;
	color: var(--tss-passport-ink);
	font-size: 14px;
	font-weight: var(--tss-w-body);
	line-height: 1.42;
}

.tss-passport-activity-list {
	display: grid;
	gap: var(--tss-sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tss-passport-activity-list li {
	display: grid;
	gap: var(--tss-sp-1);
	border: var(--tss-line-1) solid rgba(16, 16, 16, 0.1);
	border-radius: var(--tss-r);
	padding: var(--tss-sp-3) var(--tss-sp-4);
	background: var(--tss-passport-panel);
}

.tss-passport-activity-list span {
	width: fit-content;
	border-radius: 999px;
	padding: var(--tss-sp-1) var(--tss-sp-2);
	background: var(--tss-passport-mint);
	color: var(--tss-passport-black);
	font-size: var(--tss-fs-label);
	font-weight: var(--tss-w-black);
	letter-spacing: var(--tss-track-caps);
	line-height: 1;
	text-transform: uppercase;
}

.tss-passport-activity-list strong {
	color: var(--tss-passport-black);
	font-size: 15px;
	font-weight: var(--tss-w-black);
	line-height: 1.2;
}

.tss-passport-activity-list p {
	margin: 0;
	color: var(--tss-passport-ink);
	font-size: var(--tss-fs-small);
	font-weight: var(--tss-w-body);
	line-height: 1.35;
}

.tss-passport-panel--phone {
	overflow: hidden;
}

.tss-passport-phone-demo {
	display: grid;
	justify-content: center;
}

.tss-passport-phone-shell {
	width: min(360px, 100%);
	border: 9px solid var(--tss-passport-black);
	border-radius: 28px;
	padding: var(--tss-sp-3);
	background: #1f1f1f;
	box-shadow: var(--tss-shadow-lg);
}

.tss-passport-phone-screen {
	display: grid;
	gap: var(--tss-sp-3);
	min-height: 440px;
	border-radius: 18px;
	padding: var(--tss-sp-3);
	background: var(--tss-passport-paper);
}

.tss-passport-phone-hero {
	display: grid;
	gap: var(--tss-sp-2);
	border: var(--tss-line-3) solid var(--tss-passport-black);
	border-radius: var(--tss-r);
	padding: var(--tss-sp-3);
	background: var(--tss-passport-sage);
	color: var(--tss-passport-black);
}

.tss-passport-phone-hero span {
	font-size: var(--tss-fs-label);
	font-weight: var(--tss-w-black);
	letter-spacing: var(--tss-track-caps);
	line-height: 1;
	text-transform: uppercase;
}

.tss-passport-phone-hero strong {
	font-size: var(--tss-fs-h3);
	font-weight: var(--tss-w-black);
	line-height: 1.05;
}

.tss-passport-mobile-tabs {
	display: grid;
	gap: var(--tss-sp-2);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tss-passport-mobile-tabs button {
	min-height: 30px;
	border: var(--tss-line-2) solid var(--tss-passport-black);
	border-radius: 999px;
	background: var(--tss-passport-panel);
	color: var(--tss-passport-black);
	font-size: var(--tss-fs-label);
	font-weight: var(--tss-w-bold);
	line-height: 1;
}

.tss-passport-mobile-tabs button[aria-selected="true"] {
	background: var(--tss-passport-black);
	color: var(--tss-passport-paper);
}

.tss-passport-mobile-pane {
	display: none;
	gap: var(--tss-sp-2);
}

.tss-passport-mobile-pane.is-active {
	display: grid;
}

.tss-passport-mobile-card {
	display: grid;
	gap: var(--tss-sp-1);
	border-radius: var(--tss-r);
	padding: var(--tss-sp-3);
	background: var(--tss-passport-panel);
}

.tss-passport-mobile-card strong {
	color: var(--tss-passport-black);
	font-size: var(--tss-fs-small);
	font-weight: var(--tss-w-black);
	line-height: 1.1;
}

.tss-passport-mobile-card span {
	color: var(--tss-passport-ink);
	font-size: var(--tss-fs-label);
	font-weight: var(--tss-w-body);
	line-height: 1.3;
}

.tss-passport-terms {
	display: grid;
	grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
	gap: var(--tss-sp-5);
	padding: var(--tss-pad-section);
	background: rgba(255, 253, 243, 0.9);
}

.tss-passport-terms h2 {
	margin-top: var(--tss-sp-3);
	font-size: var(--tss-fs-h2);
}

.tss-passport-terms ul {
	display: grid;
	gap: var(--tss-sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tss-passport-terms li {
	border: var(--tss-line-1) solid rgba(16, 16, 16, 0.12);
	border-radius: var(--tss-r);
	padding: var(--tss-sp-3) var(--tss-sp-4);
	background: var(--tss-passport-panel);
	font-size: 14px;
}

.tss-passport-drawer {
	position: fixed;
	inset: 0;
	z-index: 10050;
	width: 100vw;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--tss-passport-black);
}

.tss-passport-drawer:not([open]),
.tss-passport-drawer[hidden],
.tss-passport-toast[hidden] {
	display: none;
}

.tss-passport-drawer::backdrop {
	background: transparent;
}

body.tss-passport-drawer-open {
	overflow: hidden;
}

.tss-passport-drawer__shade {
	position: absolute;
	inset: 0;
	background: rgba(16, 16, 16, 0.42);
}

.tss-passport-drawer__panel {
	position: absolute;
	right: clamp(10px, 3vw, 30px);
	bottom: clamp(10px, 3vw, 30px);
	display: grid;
	gap: var(--tss-sp-4);
	width: min(470px, calc(100vw - 20px));
	max-height: calc(100dvh - 20px);
	overflow: auto;
	border: var(--tss-line-3) solid var(--tss-passport-black);
	border-radius: var(--tss-r);
	padding: var(--tss-pad-section);
	background: var(--tss-passport-paper);
	box-shadow: var(--tss-shadow-reward);
}

.tss-passport-drawer__close {
	position: absolute;
	top: var(--tss-sp-3);
	right: var(--tss-sp-3);
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: var(--tss-line-2) solid var(--tss-passport-black);
	border-radius: 50%;
	background: var(--tss-passport-panel);
	color: var(--tss-passport-black);
	font-size: 18px;
	font-weight: var(--tss-w-black);
	line-height: 1;
}

.tss-passport-drawer h2 {
	padding-right: 28px;
	font-size: var(--tss-fs-h2);
}

.tss-passport-rules-list {
	display: grid;
	gap: var(--tss-sp-3);
}

.tss-passport-rules-list div {
	display: grid;
	gap: var(--tss-sp-2);
	border: var(--tss-line-1) solid rgba(16, 16, 16, 0.12);
	border-radius: var(--tss-r);
	padding: var(--tss-sp-3);
	background: var(--tss-passport-panel);
}

.tss-passport-rules-list strong {
	color: var(--tss-passport-black);
	font-size: 15px;
	font-weight: var(--tss-w-bold);
	line-height: 1.3;
}

.tss-passport-drawer__cta {
	width: fit-content;
}

body.tss-passport-moment-open {
	overflow: hidden;
}

.tss-passport-moment {
	position: fixed;
	inset: 0;
	z-index: 10070;
	width: min(100vw - 24px, 980px);
	max-width: 980px;
	max-height: calc(100dvh - 24px);
	margin: auto;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--tss-passport-black);
	overflow: visible;
}

.tss-passport-moment::backdrop {
	background:
		linear-gradient(rgba(16, 16, 16, 0.58), rgba(16, 16, 16, 0.58)),
		radial-gradient(circle at 50% 16%, rgba(255, 214, 51, 0.22), transparent 34%);
	backdrop-filter: blur(5px);
}

.tss-passport-moment[open] {
	display: grid;
	place-items: center;
}

.tss-passport-moment__shell {
	--moment-ink: var(--tss-passport-teal);
	--moment-ink-soft: rgba(21, 125, 116, 0.14);
	position: relative;
	display: grid;
	grid-template-columns: minmax(280px, 1fr) minmax(280px, 0.78fr);
	gap: var(--tss-sp-5);
	width: 100%;
	max-height: calc(100dvh - 24px);
	overflow: auto;
	border: var(--tss-line-3) solid var(--tss-passport-black);
	border-radius: var(--tss-r);
	padding: var(--tss-pad-section);
	background:
		linear-gradient(135deg, rgba(255, 214, 51, 0.22), rgba(223, 244, 242, 0.78) 48%, rgba(255, 253, 243, 0.98)),
		var(--tss-passport-paper);
	box-shadow: var(--tss-shadow-reward);
}

.tss-passport-moment.is-open .tss-passport-moment__shell {
	animation: tssPassportMomentEnter var(--tss-dur-base) var(--tss-ease-pop);
}

.tss-passport-moment__shell[data-ink="coral"] {
	--moment-ink: var(--tss-passport-coral);
	--moment-ink-soft: rgba(255, 142, 120, 0.18);
}

.tss-passport-moment__shell[data-ink="yellow"] {
	--moment-ink: var(--tss-passport-gold);
	--moment-ink-soft: rgba(255, 214, 51, 0.24);
}

.tss-passport-moment__shell[data-ink="sage"] {
	--moment-ink: var(--tss-passport-sage-ink);
	--moment-ink-soft: rgba(219, 238, 232, 0.76);
}

.tss-passport-moment__shell[data-ink="black"] {
	--moment-ink: var(--tss-passport-black);
	--moment-ink-soft: rgba(16, 16, 16, 0.1);
}

.tss-passport-moment__close {
	position: absolute;
	top: var(--tss-sp-3);
	right: var(--tss-sp-3);
	z-index: 3;
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: var(--tss-line-2) solid var(--tss-passport-black);
	border-radius: 50%;
	background: var(--tss-passport-panel);
	color: var(--tss-passport-black);
	font-size: 19px;
	font-weight: var(--tss-w-black);
	line-height: 1;
}

.tss-passport-moment__close:hover {
	background: var(--tss-passport-yellow);
}

.tss-passport-moment__close:active {
	transform: translate(1px, 1px);
}

.tss-passport-moment__stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(360px, 48vw, 520px);
	overflow: hidden;
	border: var(--tss-line-2) dashed rgba(16, 16, 16, 0.2);
	border-radius: var(--tss-r);
	background:
		linear-gradient(90deg, rgba(16, 16, 16, 0.05) 1px, transparent 1px),
		linear-gradient(180deg, rgba(16, 16, 16, 0.05) 1px, transparent 1px),
		rgba(255, 253, 243, 0.74);
	background-size: 32px 32px;
	perspective: 900px;
}

.tss-passport-moment__book {
	position: relative;
	width: min(78%, 360px);
	aspect-ratio: 0.72;
	border: var(--tss-line-3) solid var(--tss-passport-black);
	border-radius: var(--tss-r);
	background: var(--tss-passport-black);
	box-shadow: var(--tss-shadow-lg);
	transform: rotate(-3deg);
}

.tss-passport-moment__page {
	position: absolute;
	inset: 12px 10px 12px 18px;
	overflow: hidden;
	border: var(--tss-line-2) solid rgba(16, 16, 16, 0.16);
	border-radius: var(--tss-r);
	background:
		radial-gradient(circle at 82% 16%, var(--moment-ink-soft) 0 48px, transparent 49px),
		repeating-linear-gradient(180deg, rgba(16, 16, 16, 0.05) 0 1px, transparent 1px 24px),
		var(--tss-passport-paper);
}

.tss-passport-moment__page::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 10px;
	background: linear-gradient(90deg, rgba(16, 16, 16, 0.16), transparent);
}

.tss-passport-moment__tag {
	position: absolute;
	top: 14px;
	right: 18px;
	z-index: 1;
	display: inline-grid;
	place-items: center;
	width: 50px;
	height: 58px;
	border: var(--tss-line-2) solid var(--tss-passport-black);
	border-radius: var(--tss-sp-1) var(--tss-sp-1) var(--tss-r) var(--tss-r);
	background: var(--tss-passport-yellow);
	color: var(--tss-passport-black);
	font-size: var(--tss-fs-small);
	font-weight: var(--tss-w-black);
	line-height: 1;
	transform: rotate(6deg);
	box-shadow: var(--tss-shadow-sm);
}

.tss-passport-moment__tag::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 50%;
	width: 7px;
	height: 7px;
	border: var(--tss-line-2) solid var(--tss-passport-black);
	border-radius: 50%;
	background: var(--tss-passport-paper);
	transform: translateX(-50%);
}

.tss-passport-moment__page-label {
	position: absolute;
	top: 18px;
	left: 24px;
	right: 78px;
	color: rgba(16, 16, 16, 0.46);
	font-size: var(--tss-fs-label);
	font-weight: var(--tss-w-black);
	letter-spacing: var(--tss-track-caps);
	line-height: 1;
	text-transform: uppercase;
}

.tss-passport-moment__stamp-result {
	position: absolute;
	left: 50%;
	top: 52%;
	display: grid;
	place-items: center;
	width: clamp(148px, 42%, 190px);
	aspect-ratio: 1;
	border: 8px double var(--moment-ink);
	border-radius: 50%;
	color: var(--moment-ink);
	opacity: 0.14;
	text-align: center;
	text-transform: uppercase;
	transform: translate(-50%, -50%) rotate(-8deg) scale(0.86);
}

.tss-passport-moment__stamp-result span {
	font-size: var(--tss-fs-display);
	font-weight: var(--tss-w-black);
	letter-spacing: 0;
	line-height: 0.9;
}

.tss-passport-moment__stamp-result strong {
	max-width: 86%;
	font-size: clamp(12px, 1.7vw, 17px);
	font-weight: var(--tss-w-black);
	letter-spacing: var(--tss-track-caps);
	line-height: 1;
	overflow-wrap: anywhere;
}

.tss-passport-moment.is-stamped .tss-passport-moment__stamp-result {
	opacity: 1;
	animation: tssPassportMomentStampResult var(--tss-dur-slow) var(--tss-ease-pop);
}

.tss-passport-moment.is-stamped .tss-passport-moment__book {
	animation: tssPassportBookEcho var(--tss-dur-slow) var(--tss-ease-out);
}

.tss-passport-moment__route {
	position: absolute;
	left: 26px;
	right: 24px;
	bottom: 38px;
	height: 44px;
	border-top: var(--tss-line-3) dashed rgba(16, 16, 16, 0.16);
	border-bottom: var(--tss-line-3) dashed rgba(16, 16, 16, 0.09);
	transform: rotate(-2deg);
}

.tss-passport-moment__stamp-shadow {
	position: absolute;
	left: 50%;
	top: calc(50% + 116px);
	width: min(180px, 38%);
	height: 22px;
	border-radius: 999px;
	background: rgba(16, 16, 16, 0.16);
	transform: translateX(-50%);
	transition: opacity var(--tss-dur-fast) var(--tss-ease-out), transform var(--tss-dur-fast) var(--tss-ease-out);
}

.tss-passport-moment__stamp-press {
	position: absolute;
	left: 50%;
	top: 50%;
	display: grid;
	place-items: center;
	width: clamp(140px, 24vw, 196px);
	aspect-ratio: 1;
	border: 5px solid var(--tss-passport-black);
	border-radius: 50%;
	background:
		radial-gradient(circle, color-mix(in srgb, var(--tss-passport-panel) 96%, transparent) 0 42%, var(--tss-passport-yellow) 43% 100%);
	color: var(--tss-passport-black);
	font-weight: var(--tss-w-body);
	box-shadow: var(--tss-shadow-lg);
	text-align: center;
	text-transform: uppercase;
	touch-action: none;
	transform: translate(-50%, -126%) rotate(-7deg);
	transition: box-shadow var(--tss-dur-fast) var(--tss-ease-out), opacity var(--tss-dur-fast) var(--tss-ease-out), transform var(--tss-dur-fast) var(--tss-ease-out);
}

.tss-passport-moment__stamp-press::after {
	content: "";
	position: absolute;
	inset: -18px;
	z-index: -1;
	border-radius: 50%;
	background:
		radial-gradient(circle, var(--moment-ink-soft) 0 36%, transparent 37%),
		radial-gradient(circle at 28% 66%, rgba(16, 16, 16, 0.1) 0 8px, transparent 9px),
		radial-gradient(circle at 74% 32%, rgba(16, 16, 16, 0.08) 0 7px, transparent 8px);
	opacity: 0;
	transform: scale(0.64);
	transition: opacity var(--tss-dur-fast) var(--tss-ease-out), transform var(--tss-dur-base) var(--tss-ease-pop);
}

.tss-passport-moment__stamp-press span {
	font-size: var(--tss-fs-display);
	font-weight: var(--tss-w-black);
	letter-spacing: 0;
	line-height: 0.85;
}

.tss-passport-moment__stamp-press small {
	max-width: 84%;
	color: var(--tss-passport-black);
	font-size: var(--tss-fs-label);
	font-weight: var(--tss-w-black);
	line-height: 1;
	overflow-wrap: anywhere;
}

.tss-passport-moment.is-pressing .tss-passport-moment__stamp-press {
	box-shadow: var(--tss-shadow-sm);
	transform: translate(-50%, -78%) rotate(-7deg) scale(0.96);
}

.tss-passport-moment.is-pressing .tss-passport-moment__stamp-press::after {
	opacity: 1;
	transform: scale(1);
}

.tss-passport-moment.is-pressing .tss-passport-moment__stamp-shadow {
	opacity: 0.42;
	transform: translateX(-50%) scale(0.82);
}

.tss-passport-moment.is-stamped .tss-passport-moment__stamp-press {
	opacity: 0.1;
	pointer-events: none;
	box-shadow: var(--tss-shadow-sm);
	transform: translate(-50%, -56%) rotate(-7deg) scale(0.9);
}

.tss-passport-moment.is-stamped .tss-passport-moment__stamp-shadow {
	opacity: 0;
}

.tss-passport-moment__copy {
	display: grid;
	align-content: center;
	gap: var(--tss-sp-3);
	min-width: 0;
	padding: clamp(8px, 1.4vw, 16px) clamp(4px, 1vw, 10px);
}

.tss-passport-moment__copy h2 {
	margin: 0;
	color: var(--tss-passport-black);
	font-size: var(--tss-fs-display);
	font-weight: var(--tss-w-black);
	letter-spacing: 0;
	line-height: 0.98;
	overflow-wrap: anywhere;
}

.tss-passport-moment__copy p {
	margin: 0;
	color: var(--tss-passport-ink);
	font-size: var(--tss-fs-body);
	font-weight: var(--tss-w-body);
	line-height: 1.45;
}

.tss-passport-moment__instruction {
	width: fit-content;
	max-width: 100%;
	border: var(--tss-line-2) solid var(--tss-passport-black);
	border-radius: 999px;
	padding: var(--tss-sp-2) var(--tss-sp-3);
	background: var(--tss-passport-panel);
	color: var(--tss-passport-black) !important;
	font-size: var(--tss-fs-label) !important;
	font-weight: var(--tss-w-black) !important;
	letter-spacing: var(--tss-track-caps);
	line-height: 1 !important;
	text-transform: uppercase;
}

.tss-passport-moment__result {
	display: block;
	width: fit-content;
	max-width: 100%;
	border-left: var(--tss-line-3) solid var(--moment-ink);
	border-radius: var(--tss-r);
	padding: var(--tss-sp-3) var(--tss-sp-4);
	background: var(--moment-ink-soft);
	color: var(--tss-passport-black);
	font-size: var(--tss-fs-h3);
	font-weight: var(--tss-w-black);
	line-height: 1.1;
	animation: tssPassportMomentReveal var(--tss-dur-base) var(--tss-ease-pop);
}

.tss-passport-moment__result[hidden] {
	display: none;
}

.tss-passport-moment__ticket {
	position: relative;
	display: grid;
	gap: var(--tss-sp-1);
	width: min(100%, 360px);
	overflow: hidden;
	border: var(--tss-line-2) solid var(--tss-passport-black);
	border-radius: var(--tss-r);
	padding: var(--tss-sp-4) 18px;
	background: var(--tss-passport-panel);
	box-shadow: var(--tss-shadow-md);
	animation: tssPassportMomentReveal var(--tss-dur-base) 80ms var(--tss-ease-pop) both;
}

.tss-passport-moment__ticket[hidden] {
	display: none;
}

.tss-passport-moment__ticket::before,
.tss-passport-moment__ticket::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 12px;
	background: radial-gradient(circle, var(--tss-passport-paper) 0 4px, transparent 5px) 0 8px / 12px 18px repeat-y;
}

.tss-passport-moment__ticket::before {
	left: -6px;
}

.tss-passport-moment__ticket::after {
	right: -6px;
}

.tss-passport-moment__ticket span {
	color: var(--tss-passport-muted);
	font-size: var(--tss-fs-label);
	font-weight: var(--tss-w-black);
	letter-spacing: var(--tss-track-caps);
	line-height: 1;
	text-transform: uppercase;
}

.tss-passport-moment__ticket strong {
	color: var(--tss-passport-black);
	font-size: 22px;
	font-weight: var(--tss-w-black);
	line-height: 1.04;
}

.tss-passport-moment__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tss-sp-3);
	align-items: center;
}

.tss-passport-moment__afterglow {
	display: grid;
	gap: var(--tss-sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
	animation: tssPassportMomentReveal var(--tss-dur-base) 140ms var(--tss-ease-pop) both;
}

.tss-passport-moment__afterglow[hidden] {
	display: none;
}

.tss-passport-moment__afterglow li {
	position: relative;
	border-left: var(--tss-line-3) solid var(--moment-ink);
	border-radius: var(--tss-r);
	padding: var(--tss-sp-2) var(--tss-sp-3);
	background: var(--tss-passport-panel);
	color: var(--tss-passport-ink);
	font-size: 14px;
	font-weight: var(--tss-w-bold);
	line-height: 1.25;
}

.tss-passport-toast {
	position: fixed;
	left: 50%;
	bottom: 18px;
	z-index: 10060;
	display: grid;
	gap: var(--tss-sp-1);
	width: min(430px, calc(100vw - 24px));
	border: var(--tss-line-3) solid var(--tss-passport-black);
	border-radius: var(--tss-r);
	padding: 15px 18px;
	background: var(--tss-passport-yellow);
	color: var(--tss-passport-black);
	box-shadow: var(--tss-shadow-reward);
	transform: translateX(-50%);
}

.tss-passport-toast strong {
	font-size: 16px;
	font-weight: var(--tss-w-black);
	line-height: 1.1;
}

.tss-passport-toast span {
	font-size: 14px;
	font-weight: var(--tss-w-bold);
	line-height: 1.25;
}

.tss-passport-confetti {
	position: fixed;
	inset: 0;
	z-index: 10040;
	pointer-events: none;
}

.tss-passport-confetti i {
	position: absolute;
	top: -18px;
	width: 12px;
	height: 18px;
	border: var(--tss-line-1) solid rgba(16, 16, 16, 0.12);
	border-radius: var(--tss-sp-1);
	animation: tssPassportConfetti 1500ms var(--tss-ease-out) forwards;
}

.tss-passport-confetti i.is-tag {
	width: 15px;
	height: 19px;
	border-color: var(--tss-passport-black);
	border-radius: var(--tss-sp-1) var(--tss-sp-1) var(--tss-r) var(--tss-r);
}

.tss-passport-confetti i.is-tag::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(16, 16, 16, 0.55);
	transform: translateX(-50%);
}

.tss-passport-confetti i.is-dash {
	width: 18px;
	height: 5px;
	border-radius: 999px;
}

.tss-passport-confetti i.is-paper {
	width: 10px;
	height: 14px;
	border-radius: var(--tss-sp-1);
	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.45), transparent);
}

body.tss-passport-account-page .tss-passport-public--account {
	--tss-header-offset: clamp(86px, 7vw, 116px);
	width: 100%;
	margin: 0;
	padding-top: var(--tss-header-offset);
	gap: var(--tss-sp-5);
}

.tss-passport-public--account .tss-passport-hero {
	grid-template-columns: 1fr;
	gap: var(--tss-sp-4);
	padding: var(--tss-pad-section);
}

.tss-passport-public--account .tss-passport-hero__copy {
	min-height: auto;
	padding: var(--tss-pad-section);
}

.tss-passport-public--account .tss-passport-hero h1 {
	max-width: 780px;
	font-size: var(--tss-fs-h1);
	line-height: 1.02;
}

.tss-passport-public--account .tss-passport-hero p {
	max-width: 760px;
}

.tss-passport-public--account .tss-passport-hero__panel {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tss-passport-public--account .tss-passport-mini-metric {
	min-height: 112px;
	align-content: center;
}

.tss-passport-public--account .tss-passport-mini-metric strong {
	font-size: clamp(24px, 2.5vw, 32px);
	overflow-wrap: anywhere;
}

.tss-passport-public--account .tss-passport-stage,
.tss-passport-public--account .tss-passport-screen-grid,
.tss-passport-public--account .tss-passport-terms {
	grid-template-columns: 1fr;
}

.tss-passport-public--account .tss-passport-actions {
	top: calc(var(--tss-header-offset) + var(--tss-sp-3));
}

.tss-passport-public--account .tss-passport-rank-track {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tss-passport-public--account .tss-passport-rank-step:nth-child(3n)::after {
	content: none;
}

@media (max-width: 1180px) {
	body.tss-passport-account-page .tss-passport-public--account {
		--tss-header-offset: 0px;
	}
}

@keyframes tssPassportStamp {
	0% {
		transform: rotate(-4deg) translateY(-12px) scale(1.08);
	}
	58% {
		transform: rotate(-4deg) translateY(12px) scale(0.96);
	}
	100% {
		transform: rotate(-4deg) translateY(0) scale(1);
	}
}

@keyframes tssPassportSplash {
	0% {
		opacity: 0;
		transform: rotate(-8deg) translateY(8px) scale(0.84);
	}
	22%,
	72% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(-8deg) translateY(-18px) scale(1);
	}
}

@keyframes tssPassportPulse {
	0% {
		outline: var(--tss-line-1) solid rgba(21, 125, 116, 0.28);
		outline-offset: 0;
	}
	100% {
		outline: var(--tss-line-1) solid rgba(21, 125, 116, 0);
		outline-offset: 16px;
	}
}

@keyframes tssPassportBadge {
	0% {
		transform: scale(0.92) rotate(-8deg);
	}
	55% {
		transform: scale(1.08) rotate(7deg);
	}
	100% {
		transform: scale(1) rotate(0deg);
	}
}

@keyframes tssPassportConfetti {
	0% {
		opacity: 0;
		transform: translateY(-20px) rotate(0deg);
	}
	15% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(102vh) rotate(380deg);
	}
}

@keyframes tssPassportMomentEnter {
	0% {
		opacity: 0;
		transform: translateY(18px) scale(0.98);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes tssPassportMomentStampResult {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) rotate(-8deg) scale(1.28);
	}
	52% {
		opacity: 1;
		transform: translate(-50%, -50%) rotate(-8deg) scale(0.92);
	}
	100% {
		opacity: 1;
		transform: translate(-50%, -50%) rotate(-8deg) scale(1);
	}
}

@keyframes tssPassportBookEcho {
	0% {
		transform: rotate(-3deg) translateY(0) scale(1);
	}
	38% {
		transform: rotate(-4deg) translateY(5px) scale(0.985);
	}
	100% {
		transform: rotate(-3deg) translateY(0) scale(1);
	}
}

@keyframes tssPassportMomentReveal {
	0% {
		opacity: 0;
		transform: translateY(10px) scale(0.985);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tss-passport-public *,
	.tss-passport-drawer *,
	.tss-passport-moment *,
	.tss-passport-toast,
	.tss-passport-confetti i {
		animation: none !important;
		scroll-behavior: auto !important;
		transition: none !important;
	}
}

@container tss-passport (max-width: 980px) {
	.tss-passport-hero,
	.tss-passport-stage,
	.tss-passport-card,
	.tss-passport-screen-grid,
	.tss-passport-terms {
		grid-template-columns: 1fr;
	}

	.tss-passport-hero__copy {
		min-height: auto;
	}

	.tss-passport-hero h1 {
		font-size: clamp(38px, 7cqw, 58px);
		line-height: 1.02;
	}

	.tss-passport-hero__panel {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tss-passport-actions {
		position: static;
	}

	.tss-passport-rank-track {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tss-passport-rank-step:nth-child(3n)::after {
		content: none;
	}
}

@container tss-passport (max-width: 720px) {
	.tss-passport-hero__panel,
	.tss-passport-panel-head,
	.tss-passport-card {
		grid-template-columns: 1fr;
	}

	.tss-passport-panel-head > p {
		justify-self: start;
		text-align: left;
	}

	.tss-passport-hero__actions,
	.tss-passport-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tss-passport-button {
		width: 100%;
		min-height: 40px;
		padding-inline: var(--tss-sp-3);
		font-size: var(--tss-fs-label);
	}

	.tss-passport-card {
		padding: var(--tss-sp-3);
	}

	.tss-passport-cover {
		min-height: clamp(240px, 72cqw, 320px);
		transform: none;
	}

	.tss-passport-cover__wordmark {
		top: 22px;
		left: 20px;
		font-size: clamp(42px, 15cqw, 58px);
	}

	.tss-passport-cover__seal {
		width: 52px;
		height: 52px;
	}

	.tss-passport-moment__shell {
		grid-template-columns: 1fr;
	}

	.tss-passport-moment__stage {
		min-height: 340px;
	}

	.tss-passport-ticket-grid,
	.tss-passport-route-grid {
		grid-template-columns: 1fr;
	}

	.tss-passport-rank-track {
		grid-template-columns: 1fr;
	}

	.tss-passport-rank-step {
		min-height: 104px;
	}

	.tss-passport-rank-step::after {
		content: none;
	}

	.tss-passport-drawer__panel {
		right: var(--tss-sp-3);
		left: var(--tss-sp-3);
		bottom: var(--tss-sp-3);
		width: auto;
	}
}

@container tss-passport (max-width: 520px) {
	.tss-passport-hero,
	.tss-passport-stage,
	.tss-passport-panel,
	.tss-passport-terms {
		padding: var(--tss-sp-3);
	}

	.tss-passport-hero__copy {
		padding: var(--tss-sp-4);
	}

	.tss-passport-hero h1 {
		font-size: clamp(34px, 10cqw, 46px);
	}

	.tss-passport-hero p,
	.tss-passport-summary p,
	.tss-passport-next p,
	.tss-passport-panel-head p {
		font-size: 14px;
	}

	.tss-passport-summary h2,
	.tss-passport-next h2,
	.tss-passport-panel h2,
	.tss-passport-terms h2 {
		font-size: clamp(26px, 8.4cqw, 36px);
	}

	.tss-passport-hero__actions,
	.tss-passport-actions,
	.tss-passport-rank-track {
		grid-template-columns: 1fr;
	}

	.tss-passport-moment {
		width: calc(100vw - 16px);
		max-height: calc(100dvh - 16px);
	}

	.tss-passport-moment__shell {
		max-height: calc(100dvh - 16px);
		padding: var(--tss-sp-3);
		box-shadow: var(--tss-shadow-reward);
	}

	.tss-passport-moment__stage {
		min-height: 300px;
	}

	.tss-passport-moment__book {
		width: min(70%, 260px);
	}

	.tss-passport-moment__stamp-press {
		width: 132px;
	}

	.tss-passport-moment__copy h2 {
		font-size: clamp(30px, 10cqw, 42px);
	}

	.tss-passport-cover {
		min-height: 238px;
	}

	.tss-passport-cover__seal {
		top: 18px;
		right: 18px;
		width: 46px;
		height: 46px;
	}

	.tss-passport-stamp {
		left: 20px;
		right: 20px;
		bottom: 28px;
		max-width: none;
		padding: var(--tss-sp-4);
	}

	.tss-passport-phone-screen {
		min-height: 410px;
	}

	.tss-passport-moment__stage {
		min-height: 270px;
	}

	.tss-passport-moment__book {
		width: min(66%, 220px);
	}

	.tss-passport-moment__stamp-press {
		width: 118px;
	}

	.tss-passport-moment__stamp-result {
		width: 132px;
	}
}

/* Account-only Passport Club spread. */
.tss-passport-club-page--spread,
.tss-passport-club-page--spread * {
	box-sizing: border-box;
}

.tss-passport-club-page--spread {
	display: grid;
	gap: var(--tss-sp-5);
	width: 100%;
	color: var(--tss-passport-ink);
}

.tss-passport-club-page--spread :is(h3, p, ol, ul, details) {
	margin-top: 0;
}

.tss-passport-pocket__heading,
.tss-passport-pocket__tabs {
	display: none;
}

.tss-passport-pocket__history {
	display: contents;
}

.tss-spread {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
	border: var(--tss-line-3) solid var(--tss-passport-black);
	border-radius: var(--tss-r);
	background:
		linear-gradient(90deg, rgba(16, 16, 16, 0.07), transparent 7%, transparent 93%, rgba(16, 16, 16, 0.07)),
		var(--tss-passport-paper);
	box-shadow: var(--tss-shadow-lg);
	overflow: hidden;
}

.tss-spread__page {
	display: grid;
	align-content: start;
	gap: var(--tss-sp-4);
	min-width: 0;
	min-height: clamp(430px, 44vw, 570px);
	padding: clamp(16px, 2.4vw, 28px);
	background:
		repeating-linear-gradient(0deg, transparent 0 31px, rgba(16, 16, 16, 0.035) 31px 32px),
		linear-gradient(180deg, rgba(255, 253, 243, 0.96), rgba(255, 245, 216, 0.88));
}

.tss-spread__page--status {
	background:
		linear-gradient(135deg, rgba(219, 238, 232, 0.78), rgba(255, 253, 243, 0.94) 48%, rgba(255, 214, 51, 0.16)),
		var(--tss-passport-paper);
}

.tss-spread__spine {
	border-right: var(--tss-line-1) dashed rgba(16, 16, 16, 0.22);
	border-left: var(--tss-line-1) dashed rgba(16, 16, 16, 0.22);
	background:
		linear-gradient(90deg, rgba(16, 16, 16, 0.08), transparent 48%, rgba(16, 16, 16, 0.08)),
		rgba(255, 255, 255, 0.42);
}

.tss-spread__label,
.tss-passport-club-page--spread .tss-passport-club-page__section-heading span {
	color: var(--tss-passport-muted);
	font-size: var(--tss-fs-label);
	font-weight: var(--tss-w-black);
	letter-spacing: var(--tss-track-caps);
	line-height: 1;
	text-transform: uppercase;
}

.tss-spread__label {
	margin-bottom: 0;
}

.tss-spread__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tss-sp-3);
}

.tss-spread-stamp {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border: var(--tss-line-2) dashed rgba(16, 16, 16, 0.26);
	border-radius: 16px;
	padding: var(--tss-sp-2);
	background: rgba(255, 255, 255, 0.55);
	color: rgba(16, 16, 16, 0.34);
	text-align: center;
	transform: rotate(-3deg);
}

.tss-spread-stamp:nth-child(even) {
	transform: rotate(2deg);
}

.tss-spread-stamp strong {
	color: inherit;
	font-size: clamp(22px, 3vw, 38px);
	font-weight: var(--tss-w-black);
	line-height: 0.9;
}

.tss-spread-stamp small {
	max-width: 100%;
	color: inherit;
	font-size: 10px;
	font-weight: var(--tss-w-black);
	line-height: 1.05;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.tss-spread-stamp.is-filled {
	border-style: solid;
	background: rgba(21, 125, 116, 0.1);
	color: var(--tss-passport-teal);
	box-shadow: inset 0 0 0 2px rgba(21, 125, 116, 0.16);
}

.tss-spread-stamp.is-ink-coral {
	background: rgba(255, 142, 120, 0.12);
	color: #9f3c2d;
	box-shadow: inset 0 0 0 2px rgba(255, 142, 120, 0.18);
}

.tss-spread-stamp.is-next {
	border-style: solid;
	background: var(--tss-passport-yellow);
	color: var(--tss-passport-black);
}

.tss-spread-stamp em {
	position: absolute;
	inset: -10px;
	border: var(--tss-line-2) solid currentColor;
	border-radius: 20px;
	opacity: 0;
	pointer-events: none;
	transform: scale(0.82) rotate(-8deg);
}

.tss-spread-stamp em.is-visible,
.tss-spread-stamp.is-stamping em {
	animation: tssPassportSplash 780ms var(--tss-ease-out) both;
}

.tss-spread__pagelink {
	align-self: end;
	width: fit-content;
	color: var(--tss-passport-black);
	font-size: var(--tss-fs-small);
	font-weight: var(--tss-w-black);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.tss-spread__rank {
	margin-bottom: 0;
	color: var(--tss-passport-black);
	font-size: clamp(34px, 5vw, 58px);
	font-weight: var(--tss-w-black);
	letter-spacing: 0;
	line-height: 0.96;
	overflow-wrap: anywhere;
}

.tss-spread__progress {
	position: relative;
	height: 18px;
	border: var(--tss-line-2) solid var(--tss-passport-black);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	overflow: hidden;
}

.tss-spread__progress i {
	display: block;
	width: var(--progress, 0%);
	height: 100%;
	border-right: var(--tss-line-2) solid var(--tss-passport-black);
	background: linear-gradient(90deg, var(--tss-passport-yellow), var(--tss-passport-coral));
}

.tss-spread__next {
	margin-bottom: 0;
	color: var(--tss-passport-muted);
	font-size: var(--tss-fs-body);
	font-weight: var(--tss-w-bold);
	line-height: 1.35;
}

/* The counterfoil makes the next rank worth understanding without turning the Pocket into a reward catalogue. */
.tss-passport-next-unlock {
	display: grid;
	gap: var(--tss-sp-3);
	border: var(--tss-line-2) solid var(--tss-passport-black);
	border-radius: var(--tss-r);
	padding: var(--tss-sp-4);
	background:
		linear-gradient(90deg, rgba(16, 16, 16, 0.06) 1px, transparent 1px),
		linear-gradient(rgba(16, 16, 16, 0.05) 1px, transparent 1px),
		var(--tss-passport-paper);
	background-size: 18px 18px;
	box-shadow: var(--tss-shadow-sm);
}

.tss-passport-next-unlock.is-live {
	border-color: var(--tss-passport-teal);
	background-color: rgba(219, 238, 232, 0.64);
}

.tss-passport-next-unlock.is-held {
	border-style: dashed;
	box-shadow: none;
}

.tss-passport-next-unlock__top {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tss-sp-2);
	align-items: center;
	justify-content: space-between;
}

.tss-passport-next-unlock__top > span,
.tss-passport-next-unlock__top small,
.tss-passport-next-unlock dl dt,
.tss-spread__ladder-copy > em {
	font-size: var(--tss-fs-label);
	font-weight: var(--tss-w-black);
	letter-spacing: var(--tss-track-caps);
	line-height: 1.1;
	text-transform: uppercase;
}

.tss-passport-next-unlock__top > span,
.tss-passport-next-unlock dl dt {
	color: var(--tss-passport-muted);
}

.tss-passport-next-unlock__top small {
	border: var(--tss-line-1) solid var(--tss-passport-black);
	border-radius: 999px;
	padding: 4px 7px;
	background: var(--tss-passport-paper);
	color: var(--tss-passport-black);
}

.tss-passport-next-unlock strong {
	color: var(--tss-passport-black);
	font-size: clamp(20px, 2.4vw, 27px);
	font-weight: var(--tss-w-black);
	line-height: 1.02;
	overflow-wrap: anywhere;
}

.tss-passport-next-unlock p,
.tss-passport-next-unlock em {
	margin: 0;
	color: var(--tss-passport-ink);
	font-size: 14px;
	font-style: normal;
	font-weight: var(--tss-w-bold);
	line-height: 1.38;
}

.tss-passport-next-unlock dl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tss-sp-2);
	margin: 0;
}

.tss-passport-next-unlock dl div {
	min-width: 0;
	border-top: var(--tss-line-1) solid rgba(16, 16, 16, 0.2);
	padding-top: var(--tss-sp-2);
}

.tss-passport-next-unlock dl dt,
.tss-passport-next-unlock dl dd {
	margin: 0;
}

.tss-passport-next-unlock dl dd {
	margin-top: 3px;
	color: var(--tss-passport-ink);
	font-size: 12px;
	font-weight: var(--tss-w-bold);
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.tss-passport-next-unlock > em {
	border-left: var(--tss-line-3) solid var(--tss-passport-coral);
	padding-left: var(--tss-sp-2);
}

.tss-spread__ladder {
	display: grid;
	gap: var(--tss-sp-2);
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}

.tss-spread__rank-trail {
	margin: var(--tss-sp-3) 0 0;
}

.tss-spread__rank-trail summary {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tss-sp-2);
	align-items: center;
	justify-content: space-between;
	width: 100%;
	color: var(--tss-passport-black);
	font-size: var(--tss-fs-small);
	font-weight: var(--tss-w-black);
	cursor: pointer;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.tss-spread__rank-trail[open] summary {
	margin-bottom: var(--tss-sp-3);
}

.tss-spread__rank-trail summary em {
	color: var(--tss-passport-muted);
	font-size: var(--tss-fs-label);
	font-style: normal;
	font-weight: var(--tss-w-bold);
}

.tss-spread__ladder li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--tss-sp-3);
	margin: 0;
	border: var(--tss-line-2) solid rgba(16, 16, 16, 0.16);
	border-radius: var(--tss-r);
	padding: var(--tss-sp-3);
	background: rgba(255, 255, 255, 0.7);
}

.tss-spread__ladder li.is-current {
	border-color: var(--tss-passport-black);
	background: rgba(219, 238, 232, 0.78);
	box-shadow: var(--tss-shadow-sm);
}

.tss-spread__ladder li.is-held {
	border-style: dashed;
}

.tss-spread__ladder-index {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: var(--tss-line-2) solid var(--tss-passport-black);
	border-radius: 999px;
	background: var(--tss-passport-paper);
	color: var(--tss-passport-black);
	font-size: 12px;
	font-weight: var(--tss-w-black);
	line-height: 1;
}

.tss-spread__ladder-copy,
.tss-spread__ladder-copy > * {
	min-width: 0;
	overflow-wrap: anywhere;
}

.tss-spread__ladder-copy strong,
.tss-spread__ladder-copy b {
	display: block;
	color: var(--tss-passport-black);
	font-weight: var(--tss-w-black);
	line-height: 1.1;
}

.tss-spread__ladder-copy strong {
	font-size: 14px;
}

.tss-spread__ladder-copy small {
	display: block;
	margin-top: 2px;
	color: var(--tss-passport-muted);
	font-size: 12px;
	font-weight: var(--tss-w-bold);
	line-height: 1.2;
}

.tss-spread__ladder-copy b {
	margin-top: var(--tss-sp-2);
	font-size: 15px;
}

.tss-spread__ladder-copy p,
.tss-spread__ladder-copy i {
	display: block;
	margin: var(--tss-sp-2) 0 0;
	color: var(--tss-passport-ink);
	font-size: 12px;
	font-style: normal;
	font-weight: var(--tss-w-bold);
	line-height: 1.32;
}

.tss-spread__ladder-copy > em {
	display: inline-block;
	margin-top: var(--tss-sp-2);
	border-radius: 999px;
	padding: 4px 6px;
	background: rgba(16, 16, 16, 0.07);
	color: var(--tss-passport-muted);
	font-style: normal;
}

.tss-passport-wallet,
.tss-passport-club-page__history,
.tss-passport-plain-terms {
	border: var(--tss-line-3) solid var(--tss-passport-black);
	border-radius: var(--tss-r);
	padding: clamp(16px, 2.2vw, 24px);
	background: var(--tss-passport-paper);
	box-shadow: var(--tss-shadow-md);
}

.tss-passport-club-page--spread .tss-passport-club-page__section-heading {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tss-sp-2) var(--tss-sp-4);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--tss-sp-4);
}

.tss-passport-club-page--spread .tss-passport-club-page__section-heading h3 {
	margin-bottom: 0;
	color: var(--tss-passport-black);
	font-size: var(--tss-fs-h2);
	font-weight: var(--tss-w-black);
	letter-spacing: 0;
	line-height: 1;
}

.tss-passport-club-page--spread .tss-passport-club-page__section-heading span {
	border: var(--tss-line-2) solid var(--tss-passport-black);
	border-radius: 999px;
	padding: 7px 10px;
	background: var(--tss-passport-yellow);
	color: var(--tss-passport-black);
	box-shadow: var(--tss-shadow-sm);
}

.tss-passport-club-token-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tss-sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tss-passport-club-token-list li {
	margin: 0;
}

.tss-passport-club-token-list button,
.tss-passport-wallet .tss-passport-ticket--ghost {
	position: relative;
	display: grid;
	gap: var(--tss-sp-2);
	width: 100%;
	min-height: 136px;
	border: var(--tss-line-2) dashed var(--tss-passport-black);
	border-radius: var(--tss-r);
	padding: var(--tss-sp-4);
	background: #fff;
	color: var(--tss-passport-black);
	text-align: left;
	cursor: pointer;
}

.tss-passport-club-token-list button::before,
.tss-passport-club-token-list button::after,
.tss-passport-wallet .tss-passport-ticket--ghost::before,
.tss-passport-wallet .tss-passport-ticket--ghost::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	border: var(--tss-line-2) solid var(--tss-passport-black);
	border-radius: 50%;
	background: var(--tss-passport-paper);
	transform: translateY(-50%);
}

.tss-passport-club-token-list button::before,
.tss-passport-wallet .tss-passport-ticket--ghost::before {
	left: -10px;
}

.tss-passport-club-token-list button::after,
.tss-passport-wallet .tss-passport-ticket--ghost::after {
	right: -10px;
}

.tss-passport-club-token-list button:hover,
.tss-passport-club-token-list button:focus {
	background: var(--tss-passport-cream);
}

.tss-passport-club-token-list strong,
.tss-passport-wallet .tss-passport-ticket--ghost strong {
	color: var(--tss-passport-black);
	font-size: clamp(18px, 2vw, 24px);
	font-weight: var(--tss-w-black);
	line-height: 1.05;
}

.tss-passport-club-token-list span,
.tss-passport-club-token-list small,
.tss-passport-wallet .tss-passport-ticket--ghost span {
	color: var(--tss-passport-muted);
	font-size: 13px;
	font-weight: var(--tss-w-bold);
	line-height: 1.35;
}

.tss-passport-wallet .tss-passport-ticket--ghost {
	max-width: 520px;
	opacity: 0.72;
}

.tss-passport-wallet .tss-passport-ticket--ghost p {
	margin: 0;
	color: var(--tss-passport-muted);
	font-size: 13px;
	font-weight: var(--tss-w-bold);
	line-height: 1.35;
}

.tss-passport-wallet .tss-passport-ticket--ghost button {
	justify-self: start;
	min-height: 32px;
	border: 0;
	border-bottom: var(--tss-line-2) solid var(--tss-passport-black);
	padding: 0;
	background: transparent;
	color: var(--tss-passport-black);
	font: inherit;
	font-size: 13px;
	font-weight: var(--tss-w-black);
	line-height: 1.1;
	cursor: pointer;
}

.tss-passport-club-history-list,
.tss-passport-history-earlier ol {
	display: grid;
	gap: var(--tss-sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tss-passport-club-history-list__item,
.tss-passport-history-earlier li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--tss-sp-3);
	align-items: start;
	border-left: var(--tss-line-3) solid var(--tss-passport-teal);
	border-radius: var(--tss-r);
	padding: var(--tss-sp-3);
	background: rgba(255, 255, 255, 0.72);
}

.tss-passport-club-history-list__item.is-warning {
	border-left-color: var(--tss-passport-coral);
}

.tss-passport-club-history-list__item strong,
.tss-passport-history-earlier strong {
	display: block;
	color: var(--tss-passport-black);
	font-weight: var(--tss-w-black);
	line-height: 1.15;
}

.tss-passport-club-history-list__item span,
.tss-passport-club-history-list__item small,
.tss-passport-history-earlier span {
	color: var(--tss-passport-muted);
	font-size: var(--tss-fs-small);
	font-weight: var(--tss-w-bold);
	line-height: 1.3;
}

.tss-passport-history-earlier {
	margin-top: var(--tss-sp-4);
}

.tss-passport-history-earlier summary,
.tss-passport-plain-terms summary {
	cursor: pointer;
	color: var(--tss-passport-black);
	font-weight: var(--tss-w-black);
}

.tss-passport-plain-terms {
	box-shadow: none;
}

.tss-passport-plain-terms p {
	margin: var(--tss-sp-3) 0;
	color: var(--tss-passport-muted);
	font-size: var(--tss-fs-small);
	font-weight: var(--tss-w-bold);
	line-height: 1.4;
}

.tss-passport-plain-terms a {
	color: var(--tss-passport-black);
	font-weight: var(--tss-w-black);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.tss-passport-public--account .tss-passport-phone,
.tss-passport-public--account .tss-passport-phone-demo {
	display: none;
}

@media (max-width: 980px) {
	.tss-spread {
		grid-template-columns: 1fr;
	}

	.tss-spread__spine {
		height: 18px;
		border-top: var(--tss-line-1) dashed rgba(16, 16, 16, 0.22);
		border-right: 0;
		border-bottom: var(--tss-line-1) dashed rgba(16, 16, 16, 0.22);
		border-left: 0;
	}

	.tss-spread__page {
		min-height: auto;
	}
}

@media (max-width: 720px) {
	.tss-passport-club-page--pocket {
		gap: 14px;
	}

	.tss-passport-pocket__heading {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 2px 2px 0;
	}

	.tss-passport-pocket__heading strong {
		color: var(--tss-passport-black);
		font-size: 20px;
		font-weight: var(--tss-w-black);
		line-height: 1;
	}

	.tss-passport-pocket__heading span {
		border: var(--tss-line-2) solid var(--tss-passport-black);
		border-radius: 999px;
		padding: 5px 8px;
		background: var(--tss-passport-paper);
		color: var(--tss-passport-black);
		font-size: 11px;
		font-weight: var(--tss-w-black);
		line-height: 1;
	}

	.tss-passport-pocket__tabs {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		border: var(--tss-line-2) solid var(--tss-passport-black);
		background: var(--tss-passport-paper);
		box-shadow: var(--tss-shadow-sm);
	}

	.tss-passport-pocket__tabs button {
		min-height: 46px;
		border: 0;
		border-right: var(--tss-line-1) solid var(--tss-passport-black);
		padding: 9px 6px;
		background: transparent;
		color: var(--tss-passport-black);
		font: inherit;
		font-size: 13px;
		font-weight: var(--tss-w-black);
		line-height: 1;
		cursor: pointer;
	}

	.tss-passport-pocket__tabs button:last-child {
		border-right: 0;
	}

	.tss-passport-pocket__tabs button[aria-selected="true"] {
		background: var(--tss-passport-yellow);
		box-shadow: inset 0 -3px 0 var(--tss-passport-black);
	}

	.tss-passport-pocket__tabs button:active {
		background: var(--tss-passport-cream);
	}

	.tss-passport-club-page--pocket [data-passport-panel][hidden] {
		display: none;
	}

	.tss-passport-club-page--pocket .tss-spread {
		grid-template-columns: 1fr;
		box-shadow: var(--tss-shadow-md);
	}

	.tss-passport-club-page--pocket .tss-spread__spine {
		display: none;
	}

	.tss-passport-club-page--pocket .tss-spread__page {
		min-height: 0;
		padding: 18px;
	}

	.tss-passport-club-page--pocket .tss-spread__page--status {
		order: 1;
		gap: 14px;
	}

	.tss-passport-club-page--pocket .tss-spread__page--stamps {
		order: 2;
		gap: 12px;
		border-top: var(--tss-line-1) dashed rgba(16, 16, 16, 0.24);
	}

	.tss-passport-club-page--pocket .tss-spread__rank {
		font-size: clamp(32px, 10vw, 44px);
	}

	.tss-passport-club-page--pocket .tss-spread__next {
		font-size: 15px;
	}

	.tss-passport-club-page--pocket .tss-passport-next-unlock {
		gap: 10px;
		padding: 14px;
	}

	.tss-passport-club-page--pocket .tss-passport-next-unlock dl {
		grid-template-columns: 1fr;
	}

	.tss-passport-club-page--pocket .tss-spread__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 9px;
	}

	.tss-passport-club-page--pocket .tss-spread-stamp:not(.is-filled):not(.is-next) {
		display: none;
	}

	.tss-passport-club-page--pocket .tss-spread-stamp strong {
		font-size: clamp(20px, 8vw, 30px);
	}

	.tss-passport-club-page--pocket .tss-spread__pagelink {
		min-height: 44px;
		display: inline-flex;
		align-items: end;
	}

	.tss-passport-club-page--pocket .tss-spread__rank-trail {
		margin-top: 2px;
	}

	.tss-passport-club-page--pocket .tss-spread__ladder button {
		min-height: 52px;
	}

	.tss-passport-club-page--pocket .tss-spread__ladder li {
		gap: 10px;
		padding: 12px;
	}

	.tss-passport-club-page--pocket .tss-passport-wallet,
	.tss-passport-club-page--pocket .tss-passport-club-page__history,
	.tss-passport-club-page--pocket .tss-passport-plain-terms {
		padding: 18px;
		box-shadow: var(--tss-shadow-md);
	}

	.tss-passport-club-page--pocket .tss-passport-pocket__history {
		display: grid;
		gap: 14px;
	}

	.tss-passport-club-page--pocket .tss-passport-wallet .tss-passport-ticket--ghost {
		min-height: 104px;
		padding: 16px;
	}

	.tss-passport-club-page--pocket .tss-passport-club-token-list {
		grid-template-columns: 1fr;
	}

	.tss-passport-club-page--pocket .tss-passport-club-token-list button {
		min-height: 116px;
		padding: 16px;
	}

	.tss-passport-club-page--pocket .tss-passport-club-history-list__item,
	.tss-passport-club-page--pocket .tss-passport-history-earlier li {
		grid-template-columns: 1fr;
	}
}

/* Credential Foldout system: public explanation and private member record use different jobs. */
.tss-passport-public--preview .tss-passport-hero {
	grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
	border: var(--tss-line-3) solid var(--tss-passport-black);
	background: var(--tss-passport-paper);
	box-shadow: var(--tss-shadow-lg);
}

.tss-passport-public--preview .tss-passport-hero::after {
	display: none;
}

.tss-passport-public--preview .tss-passport-hero__copy {
	border-style: solid;
	background:
		linear-gradient(90deg, rgba(255, 214, 51, 0.18) 1px, transparent 1px),
		linear-gradient(rgba(16, 16, 16, 0.05) 1px, transparent 1px),
		var(--tss-passport-paper);
	background-size: 28px 28px;
}

.tss-passport-preview-card {
	position: relative;
	display: grid;
	align-content: space-between;
	gap: var(--tss-sp-5);
	min-height: 100%;
	overflow: hidden;
	border: var(--tss-line-3) solid var(--tss-passport-black);
	padding: clamp(22px, 3vw, 36px);
	background: var(--tss-passport-black);
	color: var(--tss-passport-paper);
	box-shadow: var(--tss-shadow-md);
}

.tss-passport-preview-card::before {
	content: "SIM\A SHOP";
	position: absolute;
	right: 22px;
	bottom: 16px;
	white-space: pre;
	color: rgba(255, 253, 243, 0.1);
	font-size: clamp(56px, 8vw, 96px);
	font-weight: var(--tss-w-black);
	line-height: 0.78;
	letter-spacing: -0.09em;
}

.tss-passport-preview-card span,
.tss-passport-preview-card strong,
.tss-passport-preview-card p {
	position: relative;
	z-index: 1;
}

.tss-passport-preview-card span {
	color: var(--tss-passport-yellow);
	font-size: var(--tss-fs-label);
	font-weight: var(--tss-w-black);
	letter-spacing: var(--tss-track-caps);
	line-height: 1;
	text-transform: uppercase;
}

.tss-passport-preview-card strong {
	max-width: 12ch;
	font-size: clamp(30px, 4vw, 50px);
	font-weight: var(--tss-w-black);
	line-height: 0.94;
	letter-spacing: -0.055em;
}

.tss-passport-preview-card p {
	max-width: 32ch;
	color: var(--tss-passport-paper);
	font-size: var(--tss-fs-small);
	line-height: 1.42;
}

.tss-passport-public-guide {
	display: grid;
	grid-template-columns: minmax(230px, 0.62fr) minmax(0, 1.38fr);
	overflow: hidden;
	border: var(--tss-line-3) solid var(--tss-passport-black);
	background: var(--tss-passport-paper);
	box-shadow: var(--tss-shadow-lg);
}

.tss-passport-public-guide__cover {
	position: relative;
	display: grid;
	align-content: space-between;
	min-height: 450px;
	overflow: hidden;
	padding: clamp(22px, 3vw, 34px);
	background: var(--tss-passport-black);
	color: var(--tss-passport-paper);
}

.tss-passport-public-guide__cover span {
	color: rgba(255, 253, 243, 0.18);
	font-size: clamp(60px, 7vw, 94px);
	font-weight: var(--tss-w-black);
	line-height: 0.76;
	letter-spacing: -0.09em;
}

.tss-passport-public-guide__cover strong {
	max-width: 7ch;
	font-size: clamp(28px, 4vw, 48px);
	font-weight: var(--tss-w-black);
	line-height: 0.9;
	letter-spacing: -0.045em;
}

.tss-passport-public-guide__cover i {
	justify-self: start;
	border: var(--tss-line-2) solid var(--tss-passport-black);
	padding: var(--tss-sp-2) var(--tss-sp-3);
	background: var(--tss-passport-yellow);
	color: var(--tss-passport-black);
	font-size: var(--tss-fs-label);
	font-style: normal;
	font-weight: var(--tss-w-black);
	letter-spacing: var(--tss-track-caps);
	transform: rotate(-4deg);
}

.tss-passport-public-guide__steps {
	display: grid;
	align-content: center;
	padding: clamp(18px, 3vw, 42px);
}

.tss-passport-public-guide__steps > div {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	column-gap: var(--tss-sp-4);
	padding: var(--tss-sp-5) 0;
	border-top: var(--tss-line-1) solid rgba(16, 16, 16, 0.2);
}

.tss-passport-public-guide__steps > div:first-child {
	border-top: 0;
}

.tss-passport-public-guide__steps > div > span {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: var(--tss-line-2) solid var(--tss-passport-black);
	border-radius: 50%;
	background: var(--tss-passport-sage);
	font-size: var(--tss-fs-label);
	font-weight: var(--tss-w-black);
}

.tss-passport-public-guide__steps h2 {
	margin: 0;
	color: var(--tss-passport-black);
	font-size: clamp(22px, 2.5vw, 34px);
	font-weight: var(--tss-w-black);
	line-height: 1;
	letter-spacing: -0.035em;
}

.tss-passport-public-guide__steps p {
	margin: var(--tss-sp-2) 0 0;
	color: var(--tss-passport-ink);
	font-size: var(--tss-fs-body);
	line-height: 1.45;
}

.tss-passport-public--member .tss-passport-hero {
	grid-template-columns: minmax(0, 1fr) minmax(280px, 0.74fr);
	border: var(--tss-line-3) solid var(--tss-passport-black);
	background: var(--tss-passport-paper);
	box-shadow: var(--tss-shadow-lg);
}

.tss-passport-public--member .tss-passport-hero__copy {
	min-height: 0;
	border-style: solid;
	background:
		linear-gradient(90deg, rgba(16, 16, 16, 0.06) 1px, transparent 1px),
		linear-gradient(rgba(16, 16, 16, 0.06) 1px, transparent 1px),
		var(--tss-passport-paper);
	background-size: 26px 26px;
}

.tss-passport-public--member .tss-passport-hero__panel {
	grid-template-columns: 1fr;
}

.tss-passport-public--member .tss-passport-mini-metric {
	border-color: var(--tss-passport-black);
	box-shadow: none;
}

.tss-passport-public--member .tss-passport-mini-metric:first-child {
	background: var(--tss-passport-black);
}

.tss-passport-public--member .tss-passport-mini-metric:first-child span,
.tss-passport-public--member .tss-passport-mini-metric:first-child strong {
	color: var(--tss-passport-paper);
}

.tss-passport-public--member .tss-passport-stage {
	grid-template-columns: minmax(0, 1.52fr) minmax(280px, 0.7fr);
	border: var(--tss-line-3) solid var(--tss-passport-black);
	background: var(--tss-passport-paper);
	box-shadow: var(--tss-shadow-lg);
}

.tss-passport-public--member .tss-passport-stage::before {
	display: none;
}

.tss-passport-public--member .tss-passport-card {
	gap: 0;
	padding: 0;
	background: var(--tss-passport-paper);
	box-shadow: none;
}

.tss-passport-public--member .tss-passport-cover {
	min-height: 430px;
	border-width: 0;
	border-right: var(--tss-line-2) dashed rgba(16, 16, 16, 0.34);
	border-radius: 0;
	background: var(--tss-passport-black);
	box-shadow: none;
	transform: none;
}

.tss-passport-public--member .tss-passport-cover__wordmark {
	color: rgba(255, 253, 243, 0.12);
}

.tss-passport-public--member .tss-passport-cover__seal {
	border-color: var(--tss-passport-yellow);
	background:
		repeating-conic-gradient(from 0deg, var(--tss-passport-yellow) 0deg 6deg, transparent 6deg 12deg),
		radial-gradient(circle, transparent 0 23px, var(--tss-passport-black) 24px 100%);
}

.tss-passport-public--member .tss-passport-summary {
	padding: clamp(22px, 3vw, 38px);
	background: var(--tss-passport-paper);
}

.tss-passport-public--member .tss-passport-next {
	border-left: var(--tss-line-2) dashed rgba(16, 16, 16, 0.25);
	padding-left: var(--tss-sp-5);
}

.tss-passport-member-tabs {
	display: none;
}

@container tss-passport (max-width: 980px) {
	.tss-passport-public--preview .tss-passport-hero,
	.tss-passport-public--member .tss-passport-hero,
	.tss-passport-public-guide,
	.tss-passport-public--member .tss-passport-stage {
		grid-template-columns: 1fr;
	}

	.tss-passport-preview-card {
		min-height: 270px;
	}

	.tss-passport-public-guide__cover {
		min-height: 250px;
	}

	.tss-passport-public-guide__cover strong {
		max-width: 12ch;
	}

	.tss-passport-public--member .tss-passport-next {
		border-top: var(--tss-line-2) dashed rgba(16, 16, 16, 0.25);
		border-left: 0;
		padding-top: var(--tss-sp-5);
		padding-left: 0;
	}
}

@container tss-passport (max-width: 720px) {
	.tss-passport-public--preview .tss-passport-hero,
	.tss-passport-public--member .tss-passport-hero,
	.tss-passport-public-guide,
	.tss-passport-public--member .tss-passport-stage {
		box-shadow: var(--tss-shadow-md);
	}

	.tss-passport-preview-card {
		min-height: 250px;
	}

	.tss-passport-public-guide__cover {
		min-height: 220px;
	}

	.tss-passport-public-guide__steps {
		padding: var(--tss-sp-4);
	}

	.tss-passport-public-guide__steps > div {
		grid-template-columns: 38px minmax(0, 1fr);
		column-gap: var(--tss-sp-3);
		padding: var(--tss-sp-4) 0;
	}

	.tss-passport-public-guide__steps > div > span {
		width: 30px;
		height: 30px;
	}

	.tss-passport-public--member .tss-passport-cover {
		min-height: 250px;
		border-right: 0;
		border-bottom: var(--tss-line-2) dashed rgba(255, 253, 243, 0.34);
	}

	.tss-passport-public--member .tss-passport-member-tabs {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		border: var(--tss-line-2) solid var(--tss-passport-black);
		background: var(--tss-passport-paper);
	}

	.tss-passport-member-tabs button {
		min-height: 44px;
		border: 0;
		border-right: var(--tss-line-1) solid var(--tss-passport-black);
		border-radius: 0;
		background: var(--tss-passport-paper);
		color: var(--tss-passport-black);
		font-size: var(--tss-fs-label);
		font-weight: var(--tss-w-black);
	}

	.tss-passport-member-tabs button:last-child {
		border-right: 0;
	}

	.tss-passport-member-tabs button.is-active {
		background: var(--tss-passport-black);
		color: var(--tss-passport-paper);
	}

	.tss-passport-public--member[data-active-passport-view="next"] [data-passport-view]:not([data-passport-view="next"]),
	.tss-passport-public--member[data-active-passport-view="wallet"] [data-passport-view]:not([data-passport-view="wallet"]),
	.tss-passport-public--member[data-active-passport-view="history"] [data-passport-view]:not([data-passport-view="history"]) {
		display: none;
	}

	.tss-passport-public--member .tss-passport-screen-grid {
		display: grid;
		grid-template-columns: 1fr;
	}
}