/* BEGIN: Screen-specific styles */
@font-face {
	font-family: 'Outfit';
	src: url('../../fonts/outfit/static/Outfit-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Outfit';
	src: url('../../fonts/outfit/static/Outfit-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Outfit';
	src: url('../../fonts/outfit/static/Outfit-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Outfit';
	src: url('../../fonts/outfit/static/Outfit-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}

* {
	/*
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	*/
}

/* Light mode colors - System controlled default */
/* Usually the <html> element */
:root {
	--background-1: #e7f2ff;
	--background-2: #e7f2ff;
	--background-red-1: #ffb5b5;
	--text-color-1: #2e59b3;
	--text-color-green-1: #00c16a;
	--text-color-red-1: #f04141;
	--text-color-red-2: #b10707;
	--text-color-yellow-1: #e69f00;
	--text-color-blue-1: #003dcd;
	--heading-color-1: #003dcc;
	--link-text-color-1: #003dcc;
	--link-text-color-2: #003dcd;
	--link-text-color-3: #fff;
	--link-text-color-4: var(--link-text-color-1);
	--link-text-background-1: #d8eaff;
	--input-background-1: #fff;
	--input-border-color-1: #fff;
	--input-border-color-2: rgba(82, 107, 167, 0.3); /* #526ba7 */
	--input-border-focus-color-1: #fff;
	--input-border-focus-color-2: #003dcc;
	--input-text-color-1: #2e59b3;
	--input-text-color-2: #2e59b3;
	--input-placeholder-color-1: #8aa6da;
	--button-background-1: #003dcc;
	--button-text-color-1: #fff;
	--button-text-color-2: var(--link-text-color-1);
	--highlight-1-background: #003dcc;
	--highlight-1-text-color: #fff;
	--highlight-2-background: #003dcc;
	--highlight-2-text-color: #fff;
	--highlight-3-background: #d8eaff;
	--highlight-4-background: #ebf4ff;
	--highlight-5-background: #fff;
	--highlight-5-text-color: #2b74ff;
	--highlight-6-background: linear-gradient(135deg, #e3b566, #ceab60);
	--highlight-6-text-color: #000;
	--highlight-7-background: linear-gradient(135deg, #ffa178, #ffa178);
	--highlight-7-text-color: #000;
	--highlight-8-background: linear-gradient(135deg, #0959b9, #0959b9);
	--highlight-8-text-color: #000;
	--highlight-9-background: linear-gradient(135deg,#ff5c4d, #ff5c4d);
	--highlight-9-text-color: #000;
	--highlight-10-background: linear-gradient(135deg, #afb1fe, #afb1fe);
	--highlight-10-text-color: #000;
	--highlight-11-background: linear-gradient(135deg, #76b98c, #76b98c);
	--highlight-11-text-color: #000;
	--highlight-12-background: linear-gradient(135deg, #66c0ff, #66c0ff);
	--highlight-12-text-color: #000;
	--highlight-13-background: rgba(255, 255, 255, 0.1);
	--highlight-13-text-color: #2b74ff;
	--highlight-tip-background: #c3ffe1;
	--highlight-tip-text-color: #00c16a;
	--highlight-warning-background: #ffc3c3;
	--highlight-warning-text-color: #c30000;
	--shadow-background-1: #fff;
	--shadow-background-2: #e7f2ff;
	--list-item-border-top-color: #ccdbff;
	--outline-1-border-color: #ccdbff;
	--col-separator-background-1: #003dc9;
	--code-text-color-1: #526ba7;
	--code-background-1: var(--highlight-3-background);
	--code-border-color-1: rgba(82, 107, 167, 0.18); /* #526ba7 */
	--code-border-radius-1: 10px;
	--code-font-size-1: 80%;
	--code-padding-horizontal-1: 6px;
	--code-padding-vertical-1: 0px;
	--icon-color-1: none; /* #003dcc */
	--icon-color-2: brightness(5) saturate(0) brightness(5);
	--icon-color-3: var(--icon-color-1);
	--icon-color-5: var(--icon-color-1);
	--light-dark-tones-1: saturate(.92);
	--logo-color-1: none;
	--logo-color-2: brightness(0) saturate(100%) invert(18%) sepia(98%) saturate(4247%) hue-rotate(221deg) brightness(74%) contrast(101%);
}
/* Neutral placeholder for compact member forms in light mode */
:root:where(.secretpass-standalone) {
	--input-placeholder-color-1: #666;
}

/* Dark mode colors - System controlled default */
@media (prefers-color-scheme: dark) {
	:root {
		--background-1: #000;
		--background-2: #000;
		--background-red-1: #000;
		--text-color-1: #fff;
		--text-color-green-1: #00c16a;
		--text-color-red-1: #f04141;
		--text-color-red-2: #b10707;
		--text-color-yellow-1: #e69f00;
		--text-color-blue-1: #2b74ff;
		--heading-color-1: #fff;
		--link-text-color-1: #1a6bff;
		--link-text-color-2: #fff;
		--link-text-color-3: #fff;
		--link-text-color-4: var(--link-text-color-1);
		--link-text-background-1: rgba(0, 0, 0, 0);
		--input-background-1: #303030;
		--input-border-color-1: #303030;
		--input-border-color-2: rgba(82, 107, 167, 0.3); /* #526ba7 */
		--input-border-focus-color-1: #303030;
		--input-border-focus-color-2: #fff;
		--input-text-color-1: #fff;
		--input-text-color-2: #fff;
		--input-placeholder-color-1: #999;
		--button-background-1: #003dca;
		--button-text-color-1: #fff;
		--button-text-color-2: var(--link-text-color-1);
		--highlight-1-background: #003dca; /* Created via: --icon-color-1: brightness(1.3) hue-rotate(-20deg); */
		--highlight-1-text-color: #fff;
		--highlight-2-background: #003dca;
		--highlight-2-text-color: #fff;
		--highlight-3-background: #1c1c1c;
		--highlight-4-background: #303030;
		--highlight-5-background: #fff;
		--highlight-5-text-color: #2b74ff;
		--highlight-6-background: linear-gradient(135deg, #e3b566, #ceab60);
		--highlight-6-text-color: #000;
		--highlight-7-background: linear-gradient(135deg, #ffa178, #ffa178);
		--highlight-7-text-color: #000;
		--highlight-8-background: linear-gradient(135deg, #0959b9, #0959b9);
		--highlight-8-text-color: #000;
		--highlight-9-background: linear-gradient(135deg,#ff5c4d, #ff5c4d);
		--highlight-9-text-color: #000;
		--highlight-10-background: linear-gradient(135deg, #afb1fe, #afb1fe);
		--highlight-10-text-color: #000;
		--highlight-11-background: linear-gradient(135deg, #76b98c, #76b98c);
		--highlight-11-text-color: #000;
		--highlight-12-background: linear-gradient(135deg, #66c0ff, #66c0ff);
		--highlight-12-text-color: #000;
		--highlight-13-background: rgba(255, 255, 255, 0.1);
		--highlight-13-text-color: #2b74ff;
		--highlight-tip-background: #c3ffe1;
		--highlight-tip-text-color: #00c16a;
		--highlight-warning-background: #ffc3c3;
		--highlight-warning-text-color: #c30000;
		--shadow-background-1: #1c1c1c;
		--shadow-background-2: #000;
		--list-item-border-top-color: rgba(255, 255, 255, 0.1);
		--outline-1-border-color: rgba(255, 255, 255, 0.1);
		--col-separator-background-1: #003dc9;
		--code-text-color-1: #d0d0d0;
		--code-background-1: var(--highlight-3-background);
		--code-border-color-1: #303030;
		--code-border-radius-1: 10px;
		--code-font-size-1: 80%;
		--code-padding-horizontal-1: 6px;
		--code-padding-vertical-1: 0px;
		--icon-color-1: saturate(0.75) brightness(1.78); /* #1a6bff */
		--icon-color-2: brightness(5) saturate(0) brightness(5);
		--icon-color-3: var(--icon-color-2);
		--icon-color-5: var(--icon-color-1);
		--light-dark-tones-1: saturate(.88);
		--logo-color-1: brightness(5) saturate(0) brightness(5);
		--logo-color-2: brightness(5) saturate(0) brightness(5);
	}
}
/* Light mode colors - JS logic controlled for overrides */
.theme-light-1 {
	--background-1: #e7f2ff;
	--background-2: #e7f2ff;
	--background-red-1: #ffb5b5;
	--text-color-1: #2e59b3;
	--text-color-green-1: #00c16a;
	--text-color-red-1: #f04141;
	--text-color-red-2: #b10707;
	--text-color-yellow-1: #e69f00;
	--text-color-blue-1: #003dcd;
	--heading-color-1: #003dcc;
	--link-text-color-1: #003dcc;
	--link-text-color-2: #003dcd;
	--link-text-color-3: #fff;
	--link-text-color-4: var(--link-text-color-1);
	--link-text-background-1: #d8eaff;
	--input-background-1: #fff;
	--input-border-color-1: #fff;
	--input-border-color-2: rgba(82, 107, 167, 0.3); /* #526ba7 */
	--input-border-focus-color-1: #fff;
	--input-border-focus-color-2: #003dcc;
	--input-text-color-1: #2e59b3;
	--input-text-color-2: #2e59b3;
	--input-placeholder-color-1: #8aa6da;
	--button-background-1: #003dcc;
	--button-text-color-1: #fff;
	--button-text-color-2: var(--link-text-color-1);
	--highlight-1-background: #003dcc;
	--highlight-1-text-color: #fff;
	--highlight-2-background: #003dcc;
	--highlight-2-text-color: #fff;
	--highlight-3-background: #d8eaff;
	--highlight-4-background: #ebf4ff;
	--highlight-5-background: #fff;
	--highlight-5-text-color: #2b74ff;
	--highlight-6-background: linear-gradient(135deg, #e3b566, #ceab60);
	--highlight-6-text-color: #000;
	--highlight-7-background: linear-gradient(135deg, #ffa178, #ffa178);
	--highlight-7-text-color: #000;
	--highlight-8-background: linear-gradient(135deg, #0959b9, #0959b9);
	--highlight-8-text-color: #000;
	--highlight-9-background: linear-gradient(135deg,#ff5c4d, #ff5c4d);
	--highlight-9-text-color: #000;
	--highlight-10-background: linear-gradient(135deg, #afb1fe, #afb1fe);
	--highlight-10-text-color: #000;
	--highlight-11-background: linear-gradient(135deg, #76b98c, #76b98c);
	--highlight-11-text-color: #000;
	--highlight-12-background: linear-gradient(135deg, #66c0ff, #66c0ff);
	--highlight-12-text-color: #000;
	--highlight-13-background: rgba(255, 255, 255, 0.1);
	--highlight-13-text-color: #2b74ff;
	--highlight-tip-background: #c3ffe1;
	--highlight-tip-text-color: #00c16a;
	--highlight-warning-background: #ffc3c3;
	--highlight-warning-text-color: #c30000;
	--shadow-background-1: #fff;
	--shadow-background-2: #e7f2ff;
	--list-item-border-top-color: #ccdbff;
	--outline-1-border-color: #ccdbff;
	--col-separator-background-1: #003dc9;
	--code-text-color-1: #526ba7;
	--code-background-1: var(--highlight-3-background);
	--code-border-color-1: rgba(82, 107, 167, 0.18); /* #526ba7 */
	--code-border-radius-1: 10px;
	--code-font-size-1: 80%;
	--code-padding-horizontal-1: 6px;
	--code-padding-vertical-1: 0px;
	--icon-color-1: none; /* #003dcc */
	--icon-color-2: brightness(5) saturate(0) brightness(5);
	--icon-color-3: var(--icon-color-1);
	--icon-color-5: var(--icon-color-1);
	--light-dark-tones-1: saturate(.92);
	--logo-color-1: none;
	--logo-color-2: brightness(0) saturate(100%) invert(18%) sepia(98%) saturate(4247%) hue-rotate(221deg) brightness(74%) contrast(101%);
}
/* Neutral placeholder for compact member forms in light mode */
.theme-light-1:where(.secretpass-standalone) {
	--input-placeholder-color-1: #666;
}

/* Dark mode colors - JS logic controlled for overrides */
.theme-dark-1 {
	--background-1: #000;
	--background-2: #000;
	--background-red-1: #000;
	--text-color-1: #fff;
	--text-color-green-1: #00c16a;
	--text-color-red-1: #f04141;
	--text-color-red-2: #b10707;
	--text-color-yellow-1: #e69f00;
	--text-color-blue-1: #2b74ff;
	--heading-color-1: #fff;
	--link-text-color-1: #1a6bff;
	--link-text-color-2: #fff;
	--link-text-color-3: #fff;
	--link-text-color-4: var(--link-text-color-1);
	--link-text-background-1: rgba(0, 0, 0, 0);
	--input-background-1: #303030;
	--input-border-color-1: #303030;
	--input-border-color-2: rgba(82, 107, 167, 0.3); /* #526ba7 */
	--input-border-focus-color-1: #303030;
	--input-border-focus-color-2: #fff;
	--input-text-color-1: #fff;
	--input-text-color-2: #fff;
	--input-placeholder-color-1: #999;
	--button-background-1: #003dca;
	--button-text-color-1: #fff;
	--button-text-color-2: var(--link-text-color-1);
	--highlight-1-background: #003dca; /* Created via: --icon-color-1: brightness(1.3) hue-rotate(-20deg); */
	--highlight-1-text-color: #fff;
	--highlight-2-background: #003dca;
	--highlight-2-text-color: #fff;
	--highlight-3-background: #1c1c1c;
	--highlight-4-background: #303030;
	--highlight-5-background: #fff;
	--highlight-5-text-color: #2b74ff;
	--highlight-6-background: linear-gradient(135deg, #e3b566, #ceab60);
	--highlight-6-text-color: #000;
	--highlight-7-background: linear-gradient(135deg, #ffa178, #ffa178);
	--highlight-7-text-color: #000;
	--highlight-8-background: linear-gradient(135deg, #0959b9, #0959b9);
	--highlight-8-text-color: #000;
	--highlight-9-background: linear-gradient(135deg,#ff5c4d, #ff5c4d);
	--highlight-9-text-color: #000;
	--highlight-10-background: linear-gradient(135deg, #afb1fe, #afb1fe);
	--highlight-10-text-color: #000;
	--highlight-11-background: linear-gradient(135deg, #76b98c, #76b98c);
	--highlight-11-text-color: #000;
	--highlight-12-background: linear-gradient(135deg, #66c0ff, #66c0ff);
	--highlight-12-text-color: #000;
	--highlight-13-background: rgba(255, 255, 255, 0.1);
	--highlight-13-text-color: #2b74ff;
	--highlight-tip-background: #c3ffe1;
	--highlight-tip-text-color: #00c16a;
	--highlight-warning-background: #ffc3c3;
	--highlight-warning-text-color: #c30000;
	--shadow-background-1: #1c1c1c;
	--shadow-background-2: #000;
	--list-item-border-top-color: rgba(255, 255, 255, 0.1);
	--outline-1-border-color: rgba(255, 255, 255, 0.1);
	--col-separator-background-1: #003dc9;
	--code-text-color-1: #d0d0d0;
	--code-background-1: var(--highlight-3-background);
	--code-border-color-1: #303030;
	--code-border-radius-1: 10px;
	--code-font-size-1: 80%;
	--code-padding-horizontal-1: 6px;
	--code-padding-vertical-1: 0px;
	--icon-color-1: saturate(0.75) brightness(1.78); /* #1a6bff */
	--icon-color-2: brightness(5) saturate(0) brightness(5);
	--icon-color-3: var(--icon-color-2);
	--icon-color-5: var(--icon-color-1);
	--light-dark-tones-1: saturate(.88);
	--logo-color-1: brightness(5) saturate(0) brightness(5);
	--logo-color-2: brightness(5) saturate(0) brightness(5);
}


/* Inherit shared colours, keep site font + responsive type scale */

body {
	font: 600 22px 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
@media (max-width: 600px) {
	body {
		font-size: 20px;
	}
}
@media (max-width: 420px) {
	body {
		font-size: 18px;
	}
}
@media (max-width: 349px) {
	body {
		font-size: 14px;
	}
}


#screen--group-1 {
	/* display: flex; */
	/* flex-direction: column; */
	/* max-width: 800px; */
	margin: 0 auto;
	height: 100%;
}

#screen--header {
	height: 78px;
}

#screen--body figure img {
	border-radius: 24px;
}

#screen--body .screen.error .icon-arrow-long-left {
	filter: hue-rotate(140deg);
}

#screen--body .screen.error {
	background: var(--background-red-1);
	color: var(--text-color-red-2);
}
#screen--body .screen.error h1,
#screen--body .screen.error h2,
#screen--body .screen.error h3,
#screen--body .screen.error h4,
#screen--body .screen.error h5,
#screen--body .screen.error h6 {
	color: var(--text-color-red-2);
}
#screen--body .screen.error .btn-clear,
#screen--body .screen.error .btn-clear:hover,
#screen--body .screen.error .btn-clear:active,
#screen--body .screen.error .btn-clear:focus {
	color: var(--text-color-red-2);
}


/* Keep [hidden] controls out of layout, even if button class sets display */

.screen [hidden] {
	display: none !important;
}

input, textarea /*.contenteditable?*/ {
	-webkit-touch-callout:default;
	-webkit-user-select:text;
	-moz-user-select:text;
	-ms-user-select:text;
	user-select:text;
}

p {
	margin-top: 48px;
}
/* Keep site heading spacing, base.css sets shared type sizes */

h3 {
	margin-top: 48px;
}
h2 {
	margin-top: 48px;
}
@media (max-width: 600px) {
	h2 {
		font-size: 210%;
	}

	/* Homepage + shared feature titles same scale on small screens */

	#screen--secretpass-home h2:not(.text-lg),
	.secretpass-feature .secretpass-feature-title {
		font-size: max(36px, 250%);
	}

	#screen--secretpass-home h2.text-lg {
		font-size: max(24px, 150%);
	}
}
h1 {
	margin-top: 48px;
}

/* Keep site separator colour, base.css sets its size */

hr {
	background: rgba(82, 107, 167, 0.3); /* #526ba7 */
}

.logo-dynamic-1 {
	max-width: 168px;
}

/* Keep dotted field borders, base.css sets shared control colours + states */

*[type="text"], *[type="email"], *[type="url"], *[type="password"], *[type="search"], *[type="number"], *[type="tel"], *[type="range"], *[type="date"], *[type="month"], *[type="week"], *[type="time"], *[type="datetime"], *[type="datetime-local"], *[type="color"], textarea,
*[type="text"]:hover, *[type="email"]:hover, *[type="url"]:hover, *[type="password"]:hover, *[type="search"]:hover, *[type="number"]:hover, *[type="tel"]:hover, *[type="range"]:hover, *[type="date"]:hover, *[type="month"]:hover, *[type="week"]:hover, *[type="time"]:hover, *[type="datetime"]:hover, *[type="datetime-local"]:hover, *[type="color"]:hover, textarea:hover,
*[type="text"]:active, *[type="email"]:active, *[type="url"]:active, *[type="password"]:active, *[type="search"]:active, *[type="number"]:active, *[type="tel"]:active, *[type="range"]:active, *[type="date"]:active, *[type="month"]:active, *[type="week"]:active, *[type="time"]:active, *[type="datetime"]:active, *[type="datetime-local"]:active, *[type="color"]:active, textarea:active {
	border-bottom-style: dotted;
}
*[type="text"]:focus, *[type="email"]:focus, *[type="url"]:focus, *[type="password"]:focus, *[type="search"]:focus, *[type="number"]:focus, *[type="tel"]:focus, *[type="range"]:focus, *[type="date"]:focus, *[type="month"]:focus, *[type="week"]:focus, *[type="time"]:focus, *[type="datetime"]:focus, *[type="datetime-local"]:focus, *[type="color"]:focus, textarea:focus {
	border-bottom: 4px dotted var(--input-border-focus-color-2);
}


input.scheme-1[type="text"], input.scheme-1[type="email"], input.scheme-1[type="url"], input.scheme-1[type="password"], input.scheme-1[type="search"], input.scheme-1[type="number"], input.scheme-1[type="tel"], input.scheme-1[type="range"], input.scheme-1[type="date"], input.scheme-1[type="month"], input.scheme-1[type="week"], input.scheme-1[type="time"], input.scheme-1[type="datetime"], input.scheme-1[type="datetime-local"], input.scheme-1[type="color"], textarea.scheme-1,
input.scheme-1[type="text"]:hover, input.scheme-1[type="email"]:hover, input.scheme-1[type="url"]:hover, input.scheme-1[type="password"]:hover, input.scheme-1[type="search"]:hover, input.scheme-1[type="number"]:hover, input.scheme-1[type="tel"]:hover, input.scheme-1[type="range"]:hover, input.scheme-1[type="date"]:hover, input.scheme-1[type="month"]:hover, input.scheme-1[type="week"]:hover, input.scheme-1[type="time"]:hover, input.scheme-1[type="datetime"]:hover, input.scheme-1[type="datetime-local"]:hover, input.scheme-1[type="color"]:hover, textarea.scheme-1:hover,
input.scheme-1[type="text"]:active, input.scheme-1[type="email"]:active, input.scheme-1[type="url"]:active, input.scheme-1[type="password"]:active, input.scheme-1[type="search"]:active, input.scheme-1[type="number"]:active, input.scheme-1[type="tel"]:active, input.scheme-1[type="range"]:active, input.scheme-1[type="date"]:active, input.scheme-1[type="month"]:active, input.scheme-1[type="week"]:active, input.scheme-1[type="time"]:active, input.scheme-1[type="datetime"]:active, input.scheme-1[type="datetime-local"]:active, input.scheme-1[type="color"]:active, textarea.scheme-1:active {
	border: 4px solid var(--input-border-color-2);
	border-bottom-style: dotted;
	color: var(--input-text-color-2);
}
input.scheme-1[type="text"]:focus, input.scheme-1[type="email"]:focus, input.scheme-1[type="url"]:focus, input.scheme-1[type="password"]:focus, input.scheme-1[type="search"]:focus, input.scheme-1[type="number"]:focus, input.scheme-1[type="tel"]:focus, input.scheme-1[type="range"]:focus, input.scheme-1[type="date"]:focus, input.scheme-1[type="month"]:focus, input.scheme-1[type="week"]:focus, input.scheme-1[type="time"]:focus, input.scheme-1[type="datetime"]:focus, input.scheme-1[type="datetime-local"]:focus, input.scheme-1[type="color"]:focus, textarea.scheme-1:focus {
	border-top: 4px solid var(--input-border-focus-color-2);
	border-right: 4px solid var(--input-border-focus-color-2);
	border-bottom: 4px dotted var(--input-border-focus-color-2);
	border-left: 4px solid var(--input-border-focus-color-2);
}


/* Match PWA clear buttons w/ this theme's button colour */

.btn-clear,
.btn-clear:hover,
.btn-clear:active,
.btn-clear:focus {
	background: transparent;
	color: var(--button-text-color-2);
}

.icon-arrow-long-left {
	background: url('../../media/icon/icons-wide.svg#icon-arrow-long-left-2-blue.svg') 50% 50% no-repeat;
	background-size: contain;
}
.icon-arrow-long-right {
	background: url('../../media/icon/icons-wide.svg#icon-arrow-long-right-2-blue.svg') 50% 50% no-repeat;
	background-size: contain;
}
.icon-arrow-up-down {
	background: url('../../media/icon/icons-wide.svg#icon-arrow-up-down-2-blue.svg') 50% 50% no-repeat;
	background-size: 100% 100%;
}
.icon-color-1 {
	filter: var(--icon-color-1);
}
.icon-color-2 {
	filter: var(--icon-color-2);
}
.icon-color-3 {
	filter: var(--icon-color-3);
}
/* Content-link icons use same theme blue as nav icons */

.icon-color-5 {
	filter: var(--icon-color-5);
}
.light-dark-tones-1 {
	filter: var(--light-dark-tones-1);
}

.filter-white {
	/* filter: brightness(20); */
	filter: brightness(5) saturate(0) brightness(5);
}
.filter-none {
	filter: none;
}

/* Even line lengths for short centred copy, no lone last word */

.text-wrap-balance {
	text-wrap: balance;
}

.highlight-1 {
	background: var(--highlight-1-background);
	color: var(--highlight-1-text-color);
}
.highlight-2 {
	background: var(--highlight-2-background);
	color: var(--highlight-2-text-color);
	border-radius: 24px;
}
.highlight-3 {
	background: var(--highlight-3-background);
	border-radius: 24px;
}
.highlight-4 {
	background: var(--highlight-4-background);
	border-radius: 24px;
}
.highlight-5 {
	background: var(--highlight-5-background);
	color: var(--highlight-5-text-color);
}
.highlight-6 {
	background: var(--highlight-6-background);
	color: var(--highlight-6-text-color);
	border-radius: 24px;
}
.highlight-7 {
	background: var(--highlight-7-background);
	color: var(--highlight-7-text-color);
	border-radius: 24px;
}
.highlight-8 {
	background: var(--highlight-8-background);
	color: var(--highlight-8-text-color);
	border-radius: 24px;
}
.highlight-9 {
	background: var(--highlight-9-background);
	color: var(--highlight-9-text-color);
	border-radius: 24px;
}
.highlight-10 {
	background: var(--highlight-10-background);
	color: var(--highlight-10-text-color);
	border-radius: 24px;
}
.highlight-11 {
	background: var(--highlight-11-background);
	color: var(--highlight-11-text-color);
	border-radius: 24px;
}
.highlight-12 {
	background: var(--highlight-12-background);
	color: var(--highlight-12-text-color);
	border-radius: 24px;
}
.highlight-tip {
	background: var(--highlight-tip-background);
	color: var(--highlight-tip-text-color);
	border-radius: 24px;
}
.highlight-warning {
	background: var(--highlight-warning-background);
	color: var(--highlight-warning-text-color);
	border-radius: 24px;
}

.outline-1 {
	border: 2px solid var(--outline-1-border-color);
}

.text-color-green-1,
.text-color-green-1:hover,
.text-color-green-1:focus,
.text-color-green-1:active {
	color: var(--text-color-green-1);
}
.text-color-red-1,
.text-color-red-1:hover,
.text-color-red-1:focus,
.text-color-red-1:active {
	color: var(--text-color-red-1);
}
.text-color-yellow-1,
.text-color-yellow-1:hover,
.text-color-yellow-1:focus,
.text-color-yellow-1:active {
	color: var(--text-color-yellow-1);
}
.text-color-blue-1,
.text-color-blue-1:hover,
.text-color-blue-1:focus,
.text-color-blue-1:active {
	color: var(--text-color-blue-1);
}

.link-text-color-1,
.link-text-color-1:hover,
.link-text-color-1:focus,
.link-text-color-1:active {
	color: var(--link-text-color-1);
}
.link-text-color-2,
.link-text-color-2:hover,
.link-text-color-2:focus,
.link-text-color-2:active {
	color: var(--link-text-color-2);
}

.link-text-color-3,
.link-text-color-3:hover,
.link-text-color-3:focus,
.link-text-color-3:active {
	color: var(--link-text-color-3);
}

/* Content-link class uses shared nav blue */

.link-text-color-4,
.link-text-color-4:hover,
.link-text-color-4:focus,
.link-text-color-4:active {
	color: var(--link-text-color-4);
}

.transparent,
.transparent:hover,
.transparent:active,
.transparent:focus {
	background: transparent;
}


/* Logo sizing + filters only, shared image rules handle the rest */

.logo-dynamic-2 {
	padding: 16px 0;
}
@media (max-width: 374px) {
	.logo-dynamic-2 {
		padding: 14px 0;
	}
}
@media (max-width: 349px) {
	.logo-dynamic-2 {
		padding: 15px 0;
	}
}

.wait-time-countdown {
	display: inline-block;
	min-width: 2em;
}

.pin-code-input-wrapper {
	display: inline-block;
	width: 20%;
	margin-left: 3%;
}
.pin-code-input-wrapper:first-child {
	margin-left: 0;
}

.bar-chart {
	background: var(--highlight-13-background);
	border-radius: 3px;
	height: 12px;
	width: 100%;
}
.bar-chart-fill {
	background: var(--highlight-13-text-color);
	border-radius: 3px;
	height: 100%;
}


/* Extra styles */

/* Don't apply to <a> links inside of footer areas w/ <p> links */
/* Don't apply to <a> links that have images inside */
#screen--body p:not(#screen--footer-main-menu p):not(#screen--footer-newsletter-join-form p) a:not(:has(img)),
#screen--body p:not(#screen--footer-main-menu p):not(#screen--footer-newsletter-join-form p) a:not(:has(img)):hover,
#screen--body p:not(#screen--footer-main-menu p):not(#screen--footer-newsletter-join-form p) a:not(:has(img)):focus,
#screen--body p:not(#screen--footer-main-menu p):not(#screen--footer-newsletter-join-form p) a:not(:has(img)):active,
/* Don't apply to <a> links inside of footer areas w/ <li> */
/* Don't apply to <a> links that have images inside */
#screen--body li:not(#screen--footer-main-menu li):not(#screen--footer-newsletter-join-form li) a:not(:has(img)),
#screen--body li:not(#screen--footer-main-menu li):not(#screen--footer-newsletter-join-form li) a:not(:has(img)):hover,
#screen--body li:not(#screen--footer-main-menu li):not(#screen--footer-newsletter-join-form li) a:not(:has(img)):focus,
#screen--body li:not(#screen--footer-main-menu li):not(#screen--footer-newsletter-join-form li) a:not(:has(img)):active {
	background: var(--link-text-background-1);
	border-radius: 10px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	/* border: 1px solid #003dcc0f;*/
}

/* Text links can skip inline highlight padding via shared spacing utility */
:is(#screen--body p:not(#screen--footer-main-menu p):not(#screen--footer-newsletter-join-form p), #screen--body li:not(#screen--footer-main-menu li):not(#screen--footer-newsletter-join-form li)) a:not(:has(img)):not(.space-inner-horizontal-0) {
	padding: 0px 6px;
}

#screen--send-to-user-public-key-quantity .send-quantity-wrapper .type-wrapper > * {
	align-items: center;
	justify-content: center;
	display: flex;
}
#screen--send-to-user-public-key-quantity .send-quantity-wrapper .type-wrapper > * > span {
	padding-right: 30px;
	display: block;
	text-align: right;
	position: relative;
	width: 100%;
}

.secretpass-hero-icons {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.secretpass-hero-icon {
	position: absolute;
	top: var(--icon-top);
	left: 100%;
	width: var(--icon-size);
	height: auto;
	opacity: 0;
	will-change: transform, opacity;
	transform: translate3d(0, -50%, 0) rotate(var(--icon-rotate));
	animation: secretpass-hero-icon-drift var(--icon-duration) linear infinite;
	animation-delay: var(--icon-delay);
}

@keyframes secretpass-hero-icon-drift {
	0% {
		transform: translate3d(0, -50%, 0) rotate(var(--icon-rotate));
		opacity: 0;
	}

	12% {
		opacity: 0.2;
	}

	50% {
		opacity: 0.5;
	}

	88% {
		opacity: 0.24;
	}

	100% {
		transform: translate3d(calc(-180vw - 240px), -50%, 0) rotate(var(--icon-rotate));
		opacity: 0;
	}
}

.secretpass-eyebrow {
	position: relative;
	z-index: 2;
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	text-transform: uppercase;
}

.secretpass-hero-cta {
	position: relative;
	z-index: 2;
	background: transparent;
}

/* Keep hero button border, use shared button colours */

.secretpass-hero-cta .btn {
	border: 1px solid var(--button-background-1);
}


.secretpass-offer-card {
	border-left: 0;
}

.secretpass-offer-range {
	margin-top: 8px;
	color: #006bd6;
}

.secretpass-cta-panel {
	border-radius: 30px;
	background: linear-gradient(128deg, #003eb9 0%, #0281d4 100%);
	color: #fff;
}

.secretpass-cta-panel h2,
.secretpass-cta-panel p {
	color: #fff;
}

.secretpass-cta-panel .pill {
	background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 940px) {
	.secretpass-cta-panel {
		border-radius: 24px;
		padding: 34px 16px;
	}
}

@media (max-width: 640px) {
	.secretpass-hero-icon {
		width: calc(var(--icon-size) * 0.78);
	}
}

@media (prefers-color-scheme: dark) {
	.secretpass-offer-range {
		color: #56a8ff;
	}
}

.width-110px {
	width: 110px;
}
.width-120px {
	width: 120px;
}
.width-140px {
	width: 140px;
}
.width-150px {
	width: 150px;
}
.width-160px {
	width: 160px;
}
.width-170px {
	width: 170px;
}
.width-180px {
	width: 180px;
}
.width-190px {
	width: 190px;
}
.width-200px {
	width: 200px;
}
.width-220px {
	width: 220px;
}
.width-240px {
	width: 240px;
}
.width-260px {
	width: 260px;
}
.width-320px {
	width: 320px;
}
.width-360px {
	width: 360px;
}
.width-520px {
	width: 520px;
}
.width-570px {
	width: 570px;
}

/* Hero copy above animation, draws its decorative marks */

.secretpass-hero-copy {
	position: relative;
	z-index: 2;
	padding: 0 64px;
}

.secretpass-hero-heading {
	position: relative;
	color: var(--heading-color-1);
}

.secretpass-hero-title {
	font-size: clamp(36px, 7.5vw, 96px);
	line-height: 1.05;
}

.secretpass-hero-underline,
.secretpass-app-underline {
	display: inline-block;
	position: relative;
}

.secretpass-hero-underline {
	white-space: nowrap;
}

.secretpass-hero-underline::after,
.secretpass-app-underline::after {
	content: '';
	position: absolute;
	left: -2%;
	bottom: -0.13em;
	width: 104%;
	height: 0.18em;
	border-top: 0.085em solid #ff6b24;
	border-radius: 50%;
	transform: rotate(-0.6deg);
	pointer-events: none;
}

.secretpass-hero-rays,
.secretpass-hero-rays::before,
.secretpass-hero-rays::after {
	position: absolute;
	width: 34px;
	height: 3px;
	border-radius: 3px;
	background: currentColor;
	pointer-events: none;
}

.secretpass-hero-rays {
	top: 65%;
	left: -48px;
	transform: rotate(4deg);
}

.secretpass-hero-rays::before,
.secretpass-hero-rays::after {
	content: '';
	left: 5px;
}

.secretpass-hero-rays::before {
	top: -24px;
	transform: rotate(40deg);
}

.secretpass-hero-rays::after {
	top: 24px;
	transform: rotate(-40deg);
}

.secretpass-hero-star {
	position: absolute;
	top: -12px;
	right: -48px;
	width: 52px;
	height: 58px;
	background: currentColor;
	clip-path: polygon(evenodd, 50% 0%, 61% 34%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 20% 94%, 31% 58%, 2% 35%, 39% 34%, 50% 0%, 50% 14%, 43% 40%, 19% 41%, 38% 55%, 31% 78%, 50% 64%, 69% 78%, 62% 55%, 81% 41%, 57% 40%, 50% 14%);
	transform: rotate(12deg);
	pointer-events: none;
}

@media (max-width: 600px) {
	.secretpass-hero-copy {
		padding: 0 28px;
	}

	.secretpass-hero-rays {
		left: -22px;
		transform: scale(0.55);
		transform-origin: left center;
	}

	.secretpass-hero-star {
		top: -22px;
		right: -20px;
		transform: rotate(12deg) scale(0.6);
		transform-origin: right top;
	}
}

/* Orange strokes shared by live stats + weekly finds */

.secretpass-stat-value,
.secretpass-accent-rays,
.secretpass-app-accent-rays {
	position: relative;
	display: inline-block;
	max-width: 100%;
	padding-right: 0.42em;
}

.secretpass-stat-value {
	font-size: clamp(56px, 6vw, 80px);
	line-height: 1;
}

.secretpass-stat-value::before,
.secretpass-stat-value::after,
.secretpass-accent-rays::before,
.secretpass-accent-rays::after,
.secretpass-app-accent-rays::before,
.secretpass-app-accent-rays::after {
	content: '';
	position: absolute;
	width: 0.09em;
	height: 0.28em;
	border-radius: 0.04em;
	background: #ff6b24;
	pointer-events: none;
}

.secretpass-stat-value::before,
.secretpass-accent-rays::before,
.secretpass-app-accent-rays::before {
	top: 0.04em;
	right: 0.16em;
	transform: rotate(28deg);
}

.secretpass-stat-value::after,
.secretpass-accent-rays::after,
.secretpass-app-accent-rays::after {
	top: 0.28em;
	right: 0.12em;
	transform: rotate(65deg);
}

/* Photo card styles for categories + countries, no content shift on hover */

.secretpass-photo-card {
	min-width: 0;
}

.secretpass-photo-card:hover,
.secretpass-photo-card:focus-visible {
	box-shadow: 0 0 0 2px var(--link-text-color-1);
}

.secretpass-card-photo,
.secretpass-app-card-photo {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.secretpass-card-photo {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.secretpass-card-details {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* Native FAQ controls, only arrow turns when answer opens */

.secretpass-faq-item > summary {
	cursor: pointer;
	list-style: none;
}

.secretpass-faq-item > summary::-webkit-details-marker {
	display: none;
}

.secretpass-faq-item > summary:focus-visible {
	outline: 2px solid var(--link-text-color-1);
}

.secretpass-faq-item[open] .secretpass-faq-arrow {
	transform: rotate(180deg);
}

/* Help question links, FAQ card w/ right arrow */

.secretpass-help-link {
	color: inherit;
	text-decoration: none;
}

.secretpass-help-link:focus-visible {
	outline: 2px solid var(--link-text-color-1);
}

.secretpass-help-link-arrow {
	transform: rotate(-90deg);
}

/* Recolor wordmark, keep proportions + normal document flow */

.secretpass-closing-wordmark {
	aspect-ratio: 690 / 141;
	background: #ff6b24;
	mask: url('../../media/secretpass/branding/logo/secretpass-logo-v1-std.svg') center / contain no-repeat;
}

/* Callout copy + focus stay visible, actions use shared contrasting button */

.secretpass-join-callout {
	--heading-color-1: var(--highlight-1-text-color);
	--text-color-1: var(--highlight-1-text-color);
}

.secretpass-join-callout a:focus-visible {
	outline: 2px solid var(--highlight-1-text-color);
	outline-offset: 4px;
}

@media (max-width: 1100px) {
	.secretpass-callout-arrow {
		display: none;
	}
}

/* Larger orange strokes, w/ matching space reserved beside text */

.secretpass-accent-rays-lg {
	padding-right: 0.84em;
}

.secretpass-accent-rays-lg::before,
.secretpass-accent-rays-lg::after {
	font-size: 2em;
}

/* Drop artwork floats above a steady timer, numbers stay readable */

.secretpass-drop-preview .col-width-1 {
	min-width: 0;
}

.secretpass-drop-art {
	position: relative;
	width: 320px;
	max-width: 100%;
	height: 240px;
	margin: 0 auto;
}

.secretpass-drop-art-main {
	position: absolute;
	width: 56%;
	height: auto;
	left: 22%;
	top: 12%;
	animation: secretpass-drop-float 4s ease-in-out infinite;
}

.secretpass-drop-art-orbit {
	position: absolute;
	width: 17%;
	height: auto;
	animation: secretpass-drop-float 5s ease-in-out infinite;
}

.secretpass-drop-art-orbit:nth-child(2) {
	left: 1%;
	top: 18%;
	animation-delay: -1s;
}

.secretpass-drop-art-orbit:nth-child(3) {
	right: 1%;
	top: 8%;
	animation-delay: -2s;
}

.secretpass-drop-art-orbit:nth-child(4) {
	left: 8%;
	bottom: 10%;
	animation-delay: -3s;
}

.secretpass-drop-art-orbit:nth-child(5) {
	right: 5%;
	bottom: 15%;
	animation-delay: -4s;
}

.secretpass-drop-countdown {
	display: flex;
	justify-content: center;
	gap: 8px;
	font-variant-numeric: tabular-nums;
}

.secretpass-drop-countdown > div {
	flex: 1;
	min-width: 0;
	max-width: 88px;
	background: rgba(0, 0, 0, 0.18);
}

@keyframes secretpass-drop-float {
	0%, 100% {
		transform: translateY(0) rotate(-4deg);
	}
	50% {
		transform: translateY(-10px) rotate(4deg);
	}
}

/* Drop landed: celebrate once, then keep floating like before the drop */

.secretpass-drop-preview[data-drop-state="landed"] .secretpass-drop-art-main {
	animation: secretpass-drop-landed 800ms ease-out both, secretpass-drop-float 4s ease-in-out 800ms infinite;
}

.secretpass-drop-preview[data-drop-state="pending"] img {
	animation: none;
}

@keyframes secretpass-drop-landed {
	0% {
		transform: translateY(-20px) scale(0.9);
	}
	60% {
		transform: translateY(4px) scale(1.05);
	}
	100% {
		transform: translateY(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.secretpass-drop-preview img {
		animation: none !important;
	}
}


/* Member screens use website typography utilities, only shell layout rules here */

:where(.secretpass-standalone) * {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.secretpass-member-layout {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

:where(.secretpass-standalone) #screen--header {
	background: var(--background-2);
	flex-shrink: 0;
	z-index: 50000;
}

.secretpass-member-back {
	width: 100%;
}

.secretpass-member-back,
.secretpass-member-back .screen[data-visible="1"] {
	height: auto;
	flex-shrink: 0;
}

:where(.secretpass-standalone) #screen--body {
	flex: 1;
	min-height: 0;
}

:where(.secretpass-standalone) .logo-dynamic-2 {
	padding-right: 20px;
	padding-left: 20px;
}

@media (max-width: 374px) {
	:where(.secretpass-standalone) .logo-dynamic-2 {
		padding-right: 10px;
		padding-left: 10px;
	}
}

.disable-context-menu {
	-webkit-touch-callout: none;
}

.disable-selection-temporary,
.disable-selection-temporary *,
.disable-selection-temporary *:before,
.disable-selection-temporary *:after {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* Member offers, sign-in, membership, wallet and account components */

.secretpass-app-intro-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: 320px;
	display: flex;
	align-items: center;
}

.secretpass-app-intro-hero h1,
.secretpass-app-intro-hero p {
	color: inherit;
}

.secretpass-app-intro-hero-copy {
	position: relative;
	z-index: 2;
	margin: 0 auto;
	text-align: center;
}

.secretpass-app-paywall-hero-cta {
	display: block;
	width: auto;
	max-width: 410px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
}

.secretpass-app-paywall-hero-cta strong,
.secretpass-app-paywall-hero-cta span {
	display: block;
}

.secretpass-app-intro-hero-icons {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.secretpass-app-intro-hero-icon {
	position: absolute;
	top: var(--icon-top);
	left: 100%;
	width: var(--icon-size);
	height: auto;
	opacity: 0;
	filter: saturate(0.9);
	will-change: transform, opacity;
	transform: translate3d(0, -50%, 0) rotate(var(--icon-rotate));
	animation: secretpass-app-intro-hero-icon-drift var(--icon-duration) linear infinite;
	animation-delay: var(--icon-delay);
}

@keyframes secretpass-app-intro-hero-icon-drift {
	0% {
		transform: translate3d(0, -50%, 0) rotate(var(--icon-rotate));
		opacity: 0;
	}

	12% {
		opacity: 0.18;
	}

	50% {
		opacity: 0.44;
	}

	88% {
		opacity: 0.22;
	}

	100% {
		transform: translate3d(calc(-180vw - 240px), -50%, 0) rotate(var(--icon-rotate));
		opacity: 0;
	}
}

.secretpass-login-required {
	position: relative;
	overflow: hidden;
	border-radius: 30px;
	background: var(--secretpass-app-panel-background);
	color: var(--secretpass-app-panel-text-color);
}

.secretpass-login-required h1,
.secretpass-login-required h2,
.secretpass-login-required p {
	color: var(--secretpass-app-panel-text-color);
}

.secretpass-login-required .pill {
	background: var(--secretpass-app-panel-pill-background);
	color: var(--secretpass-app-panel-pill-text-color);
}

.secretpass-app-list-copy {
	min-width: 0;
}

.secretpass-app-status-badge-featured {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--highlight-warning-text-color);
	color: var(--highlight-warning-background);
	font-size: 70%;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
}

@media (max-width: 640px) {
	.secretpass-app-intro-hero {
		min-height: 300px;
	}

	.secretpass-app-intro-hero-icon {
		width: calc(var(--icon-size) * 0.78);
	}

	.secretpass-login-required {
		border-radius: 24px;
	}
}

#screen--secretpass-app-settings--daily-reward-status,
#screen--secretpass-app-paywall--referral-status,
#screen--secretpass-app-paywall--referral-progress,
#screen--secretpass-app-paywall--referral-next-reward {
	min-height: 1.4em;
}

/* SecretPass member experience */

.secretpass-app-shell {
	margin-right: auto;
	margin-left: auto;
	text-align: left;
}

.secretpass-app-shell h1,
.secretpass-app-shell h2,
.secretpass-app-shell p {
	text-align: inherit;
}

.secretpass-app-eyebrow {
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.secretpass-app-drop-hero {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	align-items: center;
	gap: 18px;
	overflow: hidden;
}

/* 3 member shortcuts kept together, w/ room for SVG artwork */

.secretpass-app-quick-paths {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.secretpass-app-quick-paths > a {
	min-width: 0;
}

@media (max-width: 420px) {
	.secretpass-app-quick-paths {
		gap: 8px;
	}

	.secretpass-app-quick-paths > a {
		padding: 12px 8px;
	}
}

.secretpass-app-drop-hero h1,
.secretpass-app-drop-hero h2,
.secretpass-app-drop-hero p {
	color: var(--heading-color-1);
}

.secretpass-app-drop-hero .btn {
	grid-column: 1 / -1;
}

.secretpass-app-drop-hero-art {
	position: relative;
	aspect-ratio: 360 / 280;
}

.secretpass-app-drop-hero-art-group {
	position: absolute;
	inset: 0;
	opacity: 0;
	animation: secretpass-app-drop-hero-art-group 20s ease-in-out infinite;
}

.secretpass-app-drop-hero-art-group-1 {
	animation-delay: 0s;
}

.secretpass-app-drop-hero-art-group-2 {
	animation-delay: -15s;
}

.secretpass-app-drop-hero-art-group-3 {
	animation-delay: -10s;
}

.secretpass-app-drop-hero-art-group-4 {
	animation-delay: -5s;
}

.secretpass-app-drop-hero-art-item {
	position: absolute;
	height: auto;
}

.secretpass-app-drop-hero-art-item-1 {
	top: 3%;
	right: 3%;
	width: 65%;
	transform: rotate(5deg);
}

.secretpass-app-drop-hero-art-item-2 {
	right: 48%;
	bottom: 2%;
	width: 44%;
	transform: rotate(-9deg);
}

.secretpass-app-drop-hero-art-item-3 {
	top: 10%;
	right: 63%;
	width: 30%;
	transform: rotate(-16deg);
}

.secretpass-app-drop-hero-art-item-4 {
	top: 6%;
	right: 3%;
	width: 63%;
	transform: rotate(6deg);
}

.secretpass-app-drop-hero-art-item-5 {
	right: 58%;
	bottom: 4%;
	width: 36%;
	transform: rotate(-12deg);
}

.secretpass-app-drop-hero-art-item-6 {
	top: 5%;
	right: 65%;
	width: 28%;
	transform: rotate(15deg);
}

/* Each new assortment arrives w/ a small lift, then rests */

@keyframes secretpass-app-drop-hero-art-group {
	0%,
	20%,
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	25%,
	95% {
		opacity: 0;
		transform: translateY(8px) scale(0.97);
	}

	98% {
		opacity: 1;
		transform: translateY(-2px) scale(1.01);
	}
}

.secretpass-app-drop-hero .secretpass-app-live-count {
	color: var(--link-text-color-1);
	font-size: clamp(40px, 14vw, 64px);
	font-weight: 700;
	line-height: 1.05;
}

.secretpass-app-card-heading,
.secretpass-app-section-heading {
	justify-content: space-between;
	gap: 16px;
}

/* Keep page illustrations beside titles, not stranded at far edge */

.secretpass-app-page-heading {
	gap: 24px;
}

.secretpass-app-page-heading > h1 {
	min-width: 0;
}

@media (max-width: 520px) {
	.secretpass-app-page-heading {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
}

.secretpass-app-progress-card .bar-chart,
.secretpass-app-league-card .bar-chart {
	height: 9px;
}

.secretpass-app-progress-card .bar-chart-fill,
.secretpass-app-league-card .bar-chart-fill {
	background: linear-gradient(90deg, #003dcc, #2b74ff);
	transition: width 360ms ease;
}

.secretpass-app-stat-chip {
	padding: 7px 11px;
	border-radius: 999px;
	background: var(--highlight-4-background);
	font-size: 0.72em;
	white-space: nowrap;
}

.secretpass-app-mission-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
}


.secretpass-app-featured-deal-icon {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border-radius: 19px;
	background: var(--highlight-4-background);
}

.secretpass-app-region-card,
.secretpass-app-category-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
}

.secretpass-app-region-card .icon,
.secretpass-app-category-card .icon {
	margin-bottom: 6px;
}

.secretpass-app-category-card strong {
	line-height: 1.1;
}

.secretpass-app-reward-card {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	align-items: center;
	gap: 16px;
}

.secretpass-app-reward-card .btn {
	grid-column: 1 / -1;
}

/* Space out daily missions for easy scanning, team task lists unchanged */

#screen--secretpass-app-earn--missions .secretpass-app-challenge-row {
	margin-top: 12px;
}

.secretpass-app-challenge-row .bar-chart {
	height: 6px;
}

.secretpass-app-challenge-row .bar-chart-fill {
	background: var(--link-text-color-1);
}

.secretpass-app-challenge-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
}

.secretpass-app-list-icon {
	display: grid;
	place-items: center;
	padding: 4px;
	border-radius: 14px;
	background: var(--highlight-4-background);
}

.secretpass-app-challenge-title {
	min-width: 0;
}

.secretpass-app-challenge-row strong {
	font-size: 0.78em;
	text-align: right;
}

/* Section artwork beside copy, SVG not distorted */

.secretpass-app-feature-intro:not(.hide) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	align-items: start;
	gap: 24px;
}

.secretpass-app-feature-art {
	flex-shrink: 0;
}

.secretpass-app-feature-intro > .btn {
	grid-column: 1 / -1;
}

@media (max-width: 700px) {
	.secretpass-app-feature-intro:not(.hide) {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
}

.secretpass-app-league-card h2,
.secretpass-app-league-card p,
.secretpass-app-profile-card h2,
.secretpass-app-profile-card p {
	color: var(--heading-color-1);
}

.secretpass-app-league-emblem,
.secretpass-app-profile-emblem {
	display: grid;
	place-items: center;
	float: right;
	width: 72px;
	height: 72px;
	border-radius: 24px;
	background: var(--highlight-4-background);
	color: var(--heading-color-1);
	font-size: 1.75em;
}

.secretpass-app-league-emblem img {
	width: 64px;
	height: 64px;
}

/* Match 4:3 reward artwork height w/o stretching square emblems */

#screen--secretpass-app-league .secretpass-app-league-emblem,
.secretpass-app-profile-emblem {
	width: clamp(100px, calc((100% - 16px) / 4), 270px);
	height: auto;
	margin: 0;
	float: none;
	background: none;
}

#screen--secretpass-app-league .secretpass-app-league-emblem img,
.secretpass-app-profile-emblem img {
	width: 100%;
	height: auto;
}

.secretpass-app-ranking-list > .sub-section {
	margin-top: 12px;
}

.secretpass-app-ranking-place {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.secretpass-app-leaderboard-tabs .btn {
	min-height: 44px;
}

.secretpass-app-ranking-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
}

.secretpass-app-ranking-row > span:first-child {
	font-size: 0.82em;
	font-weight: 700;
	text-align: center;
}

.secretpass-app-ranking-row strong,
.secretpass-app-ranking-row small {
	display: block;
}

.secretpass-app-ranking-row > strong:last-child {
	justify-self: end;
	min-width: 6ch;
	text-align: right;
	white-space: nowrap;
}

.secretpass-app-ranking-row small {
	margin-top: 3px;
	opacity: 0.72;
}

.secretpass-app-ranking-row-current strong {
	color: var(--text-color-blue-1);
}

.secretpass-app-team-card .bar-chart {
	height: 9px;
}

.secretpass-app-team-card .bar-chart-fill {
	background: linear-gradient(90deg, #003dcc, #2b74ff);
	transition: width 360ms ease;
}

.secretpass-app-team-card .highlight-3 {
	color: var(--text-color-1);
}

.secretpass-app-team-goal-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
}

.secretpass-app-team-goal-row strong,
.secretpass-app-team-goal-row small {
	display: block;
}

.secretpass-app-team-goal-row small {
	margin-top: 3px;
	opacity: 0.72;
}

.secretpass-app-team-goal-state {
	font-size: 0.7em;
	font-weight: 700;
	text-transform: uppercase;
}

/* Light theme: darker supporting text, small print/error codes/offer labels stay faded */

.theme-light-1 .secretpass-app-shell .fade-50:not(.text-xs):not(.error-code):not(.secretpass-offer-fact-label),
.theme-light-1 .secretpass-app-shell .fade-75,
.theme-light-1 .secretpass-app-ranking-row small,
.theme-light-1 .secretpass-app-team-goal-row small {
	opacity: 1;
}

@media (prefers-color-scheme: light) {
	html:not(.theme-dark-1) .secretpass-app-shell .fade-50:not(.text-xs):not(.error-code):not(.secretpass-offer-fact-label),
	html:not(.theme-dark-1) .secretpass-app-shell .fade-75,
	html:not(.theme-dark-1) .secretpass-app-ranking-row small,
	html:not(.theme-dark-1) .secretpass-app-team-goal-row small {
		opacity: 1;
	}
}

.secretpass-app-profile-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.secretpass-app-profile-links strong,
.secretpass-app-profile-links small {
	display: block;
}

.secretpass-app-profile-links small {
	margin-top: 3px;
	font-size: 0.68em;
	font-weight: 500;
	opacity: 0.72;
}

.secretpass-app-drop-schedule-card {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
}

.secretpass-app-drop-schedule-card strong,
.secretpass-app-drop-schedule-card small {
	display: block;
}

.secretpass-app-drop-schedule-card small {
	margin-top: 4px;
	opacity: 0.72;
}

.secretpass-app-next-voucher-drop-hero,
.secretpass-app-drop-live-heading {
	overflow: hidden;
}

.secretpass-app-next-voucher-drop-hero h1,
.secretpass-app-next-voucher-drop-hero p,
.secretpass-app-drop-live-heading h1,
.secretpass-app-drop-live-heading p {
	color: #fff;
}

.secretpass-app-next-voucher-drop-hero .btn {
	background: #fff;
	color: #003dcc;
}

.secretpass-app-next-voucher-drop-art,
.secretpass-app-live-voucher-drop-art {
	text-align: center;
}

.secretpass-app-next-voucher-drop-art img {
	animation: secretpass-app-next-voucher-drop-art-float 3s ease-in-out infinite;
}

#screen--secretpass-app-drop-live[data-visible="1"] .secretpass-app-live-voucher-drop-art img {
	transform-origin: center bottom;
	animation: secretpass-app-live-voucher-drop-art-shake 1.25s cubic-bezier(0.2, 0.8, 0.24, 1) both;
}

@keyframes secretpass-app-next-voucher-drop-art-float {
	0%,
	100% {
		transform: translateY(0) rotate(-1.5deg);
	}

	50% {
		transform: translateY(-10px) rotate(1.5deg);
	}
}

@keyframes secretpass-app-live-voucher-drop-art-shake {
	0% {
		opacity: 0;
		transform: translateY(8px) scale(0.92) rotate(0deg);
	}

	14% {
		opacity: 1;
		transform: translateY(0) scale(1) rotate(-6deg);
	}

	28% {
		transform: translateY(-2px) scale(1.02) rotate(5deg);
	}

	42% {
		transform: translateY(0) scale(1) rotate(-4deg);
	}

	56% {
		transform: rotate(3deg);
	}

	70% {
		transform: rotate(-2deg);
	}

	84% {
		transform: rotate(1deg);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1) rotate(0deg);
	}
}

.secretpass-app-next-voucher-drop-countdown {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.secretpass-app-next-voucher-drop-countdown span {
	display: flex;
	flex-direction: column;
	min-width: 68px;
	padding: 10px;
	border-radius: 16px;
	background: rgba(0, 0, 0, 0.18);
}

.secretpass-app-next-voucher-drop-countdown strong,
.secretpass-app-next-voucher-drop-countdown small {
	color: #fff;
}

.secretpass-app-next-voucher-drop-countdown strong {
	font-size: 1.6em;
}

.secretpass-app-next-voucher-drop-countdown small {
	font-size: 0.62em;
	text-transform: uppercase;
}

.secretpass-app-claim-celebration {
	position: relative;
	display: grid;
	place-items: center;
	width: 112px;
	height: 112px;
	margin-right: auto;
	margin-left: auto;
}

.secretpass-app-claim-success-icon {
	z-index: 2;
	transform: scale(1);
}

/* Start celebration when screen opens, incl repeat successes */

.screen[data-visible="1"] .secretpass-app-claim-success-icon {
	animation: secretpass-app-claim-success-pop 720ms cubic-bezier(0.2, 0.9, 0.25, 1.35) both;
}

.secretpass-app-claim-success-icon .icon {
	width: 80px;
	height: auto;
}

.secretpass-app-credit-badge {
	font-size: 1em;
}

.secretpass-app-top-up-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.secretpass-app-top-up-button .icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.secretpass-app-claim-celebration > span {
	--claim-particle-x: 0px;
	--claim-particle-y: -92px;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 18px;
	border-radius: 4px;
	background: #2b74ff;
	opacity: 0;
}

.screen[data-visible="1"] .secretpass-app-claim-celebration > span {
	animation: secretpass-app-claim-particle 900ms ease-out both;
}

/* Visible app shell can't start celebrations in hidden screens */

.screen[data-visible="0"] .secretpass-app-claim-success-icon,
.screen[data-visible="0"] .secretpass-app-claim-celebration > span,
[data-account-step][hidden] .secretpass-app-claim-success-icon,
[data-account-step][hidden] .secretpass-app-claim-celebration > span,
[data-install-device][hidden] .secretpass-app-claim-success-icon,
[data-install-device][hidden] .secretpass-app-claim-celebration > span {
	animation: none;
}

.secretpass-app-claim-celebration > span:nth-child(2n) {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #f7ba2a;
}

.secretpass-app-claim-celebration > span:nth-child(3n) {
	background: #21bf73;
}

.secretpass-app-claim-celebration > span:nth-child(1) {
	--claim-particle-x: -86px;
	--claim-particle-y: -76px;
}
.secretpass-app-claim-celebration > span:nth-child(2) {
	--claim-particle-x: -38px;
	--claim-particle-y: -108px;
}
.secretpass-app-claim-celebration > span:nth-child(3) {
	--claim-particle-x: 18px;
	--claim-particle-y: -112px;
}
.secretpass-app-claim-celebration > span:nth-child(4) {
	--claim-particle-x: 82px;
	--claim-particle-y: -78px;
}
.secretpass-app-claim-celebration > span:nth-child(5) {
	--claim-particle-x: 104px;
	--claim-particle-y: -20px;
}
.secretpass-app-claim-celebration > span:nth-child(6) {
	--claim-particle-x: 94px;
	--claim-particle-y: 48px;
}
.secretpass-app-claim-celebration > span:nth-child(7) {
	--claim-particle-x: 42px;
	--claim-particle-y: 92px;
}
.secretpass-app-claim-celebration > span:nth-child(8) {
	--claim-particle-x: -18px;
	--claim-particle-y: 104px;
}
.secretpass-app-claim-celebration > span:nth-child(9) {
	--claim-particle-x: -78px;
	--claim-particle-y: 78px;
}
.secretpass-app-claim-celebration > span:nth-child(10) {
	--claim-particle-x: -106px;
	--claim-particle-y: 24px;
}
.secretpass-app-claim-celebration > span:nth-child(11) {
	--claim-particle-x: -102px;
	--claim-particle-y: -28px;
}
.secretpass-app-claim-celebration > span:nth-child(12) {
	--claim-particle-x: 46px;
	--claim-particle-y: 78px;
}

@keyframes secretpass-app-claim-success-pop {
	0% {
		transform: scale(0.35);
	}
	58% {
		transform: scale(1.12);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes secretpass-app-claim-particle {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.2) rotate(0);
	}
	18% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform:
			translate(
				calc(-50% + var(--claim-particle-x)),
				calc(-50% + var(--claim-particle-y))
			)
			scale(1)
			rotate(220deg);
	}
}

.secretpass-app-tab-bar-spacer {
	height: 112px;
}

.secretpass-app-tab-icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 10px;
	font-size: 1.45em;
	line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
	.secretpass-app-progress-card .bar-chart-fill,
	.secretpass-app-league-card .bar-chart-fill,
	.secretpass-app-team-card .bar-chart-fill,
	.secretpass-app-mission-card,
	.secretpass-app-region-card,
	.secretpass-app-category-card,
	.secretpass-app-profile-links a {
		transition: none;
	}

	.screen[data-visible="1"] .secretpass-app-claim-success-icon,
	.screen[data-visible="1"] .secretpass-app-claim-celebration > span,
	.secretpass-app-next-voucher-drop-art img,
	.secretpass-app-live-voucher-drop-art img,
	.secretpass-app-achievement-bar.secretpass-app-achievement-bar-swap-out,
	.secretpass-app-achievement-bar.secretpass-app-achievement-bar-swap-in {
		animation: none;
	}

	.secretpass-app-drop-hero-art-group-1 {
		animation: none;
		opacity: 1;
	}

	.secretpass-app-drop-hero-art-group-2,
	.secretpass-app-drop-hero-art-group-3,
	.secretpass-app-drop-hero-art-group-4 {
		animation: none;
		opacity: 0;
	}

	.secretpass-app-intro-hero-icon {
		animation: none;
		opacity: 0.18;
		transform: translate3d(-50vw, -50%, 0) rotate(var(--icon-rotate));
	}
}

#screen--secretpass-app-deal--merchant {
	max-width: 100%;
	overflow-wrap: anywhere;
}

.secretpass-app-deal-hero > h1 {
	margin-top: 24px;
	line-height: 1.12;
	overflow-wrap: anywhere;
}

.secretpass-deal-list-item-content > h3 {
	display: -webkit-box;
	line-height: 1.16;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.secretpass-app-deal-hero-pricing {
	font-size: clamp(1.4em, 5vw, 2em);
	font-weight: 800;
	line-height: 1.15;
}

#screen--secretpass-app-deal--region {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
}

#screen--secretpass-app-deal--category-btn {
	scroll-margin-top: 18px;
}

.secretpass-app-ranking-list,
.secretpass-app-ranking-row {
	width: 100%;
}

.secretpass-app-ranking-row {
	grid-template-columns: auto minmax(0, 1fr) minmax(7ch, max-content);
}

.secretpass-app-ranking-row > div {
	min-width: 0;
}

.secretpass-app-ranking-row > strong:last-child {
	justify-self: stretch;
	width: 100%;
}

.secretpass-app-tab-icon svg {
	display: block;
	width: 26px;
	height: 26px;
	fill: currentColor;
}

#screen--secretpass-app-overview--mission-progress {
	line-height: 1.35;
	white-space: pre-line;
}

.secretpass-app-drop-schedule-art {
	display: grid;
	justify-items: center;
	gap: 4px;
	min-width: 76px;
}

.secretpass-app-drop-schedule-art img {
	display: block;
	width: 68px;
	height: 68px;
}

@media (max-width: 420px) {
	/* Member rankings readable on narrow screens */

	.secretpass-app-ranking-row {
		grid-template-columns: auto minmax(0, 1fr) minmax(6ch, max-content);
		gap: 8px;
	}

	.secretpass-app-ranking-row > strong:last-child {
		font-size: 0.9em;
	}

}

.secretpass-app-achievement-bar {
	top: 74px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px;
	margin-bottom: 24px;
	padding: 10px;
	border-radius: 24px;
	box-shadow: 0 12px 28px rgba(0, 35, 135, 0.28);
}

.secretpass-app-achievement-bar.secretpass-app-achievement-bar-swap-out {
	transform-origin: center bottom;
	animation: secretpass-app-achievement-bar-swap-out 220ms cubic-bezier(0.34, 0.08, 0.16, 1) both;
}

.secretpass-app-achievement-bar.secretpass-app-achievement-bar-swap-in {
	transform-origin: center bottom;
	animation: secretpass-app-achievement-bar-swap-in 360ms cubic-bezier(0.2, 0.96, 0.26, 1.08) both;
}

@keyframes secretpass-app-achievement-bar-swap-out {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1) rotate(0deg);
	}

	40% {
		opacity: 0.18;
		transform: translateY(4px) scale(0.985) rotate(-0.2deg);
	}

	100% {
		opacity: 0;
		transform: translateY(8px) scale(0.96) rotate(-0.4deg);
	}
}

@keyframes secretpass-app-achievement-bar-swap-in {
	0% {
		opacity: 0;
		transform: translateY(10px) scale(0.96) rotate(0.6deg);
	}

	58% {
		opacity: 1;
		transform: translateY(-1px) scale(1.01) rotate(-0.25deg);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1) rotate(0deg);
	}
}

.secretpass-app-achievement-bar-open {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 2px;
	color: #fff;
}

.secretpass-app-achievement-bar-open:hover,
.secretpass-app-achievement-bar-open:focus,
.secretpass-app-achievement-bar-open:active {
	color: #fff;
}

.secretpass-app-achievement-bar-icon {
	display: block;
	object-fit: contain;
}

.secretpass-app-achievement-bar-copy {
	display: block;
	min-width: 0;
	text-align: left;
}

.secretpass-app-achievement-bar-copy > span,
.secretpass-app-achievement-bar-copy > strong,
.secretpass-app-achievement-bar-copy > small {
	display: block;
	color: #fff;
}

.secretpass-app-achievement-bar-copy > strong {
	font-size: 1.05em;
	line-height: 1.2;
}

.secretpass-app-achievement-bar-copy > strong,
.secretpass-app-achievement-bar-copy > small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.secretpass-app-achievement-bar-copy > small {
	margin-top: 2px;
	opacity: 0.78;
	line-height: 1.25;
}

.secretpass-app-achievement-bar-copy .bar-chart {
	height: 5px;
	margin-top: 7px;
	background: rgba(255, 255, 255, 0.2);
}

.secretpass-app-achievement-bar-copy .bar-chart-fill {
	background: #fff;
	transition: width 360ms ease;
}

.secretpass-app-achievement-bar-dismiss {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(0, 21, 83, 0.28);
	color: #fff;
}

.secretpass-app-achievement-bar-dismiss:hover,
.secretpass-app-achievement-bar-dismiss:focus,
.secretpass-app-achievement-bar-dismiss:active {
	background: rgba(0, 21, 83, 0.42);
	color: #fff;
}

.secretpass-app-achievement-bar-dismiss svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.secretpass-app-progress-card {
	display: block;
	color: inherit;
}

.secretpass-app-progress-card:hover,
.secretpass-app-progress-card:focus,
.secretpass-app-progress-card:active {
	color: inherit;
}

.secretpass-app-progress-card-action {
	gap: 10px;
}

@media (max-width: 420px) {
	.secretpass-app-achievement-bar {
		border-radius: 20px;
	}

	.secretpass-app-achievement-bar-open {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 9px;
	}

	.secretpass-app-achievement-bar-copy > strong {
		font-size: 0.98em;
	}

	.secretpass-app-achievement-bar-copy > small {
		font-size: 0.76em;
	}

	.secretpass-app-achievement-bar-dismiss {
		width: 32px;
		height: 32px;
	}
}

/* Website headline styling + orange strokes in paywall */

.secretpass-app-paywall-hero {
	min-height: 320px;
}

.secretpass-app-paywall-headline {
	font-size: clamp(40px, 12vw, 72px);
	line-height: 1.05;
}

.secretpass-app-paywall-stat-value {
	font-size: clamp(32px, 9vw, 48px);
	line-height: 1.05;
	overflow-wrap: anywhere;
}

.pill .secretpass-app-paywall-hero-cta {
	width: 100%;
	max-width: none;
}

/* Website photos in compact member cards, click targets unchanged */

.secretpass-app-photo-card {
	overflow: hidden;
}


.secretpass-app-card-photo {
	display: block;
	width: 100%;
	height: auto;
}

.secretpass-app-country-photo {
	aspect-ratio: 1;
}

.secretpass-app-perks-hero {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	align-items: center;
	gap: 24px;
}

.secretpass-app-perks-hero h2,
.secretpass-app-perks-hero p {
	color: #fff;
}

.secretpass-app-perks-list {
	display: grid;
	gap: 12px;
}

.secretpass-app-perk-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 14px;
	margin-top: 0;
}

.secretpass-app-perk-card-copy {
	min-width: 0;
}

.secretpass-app-perk-card-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.secretpass-app-perk-card-heading strong {
	min-width: 0;
	line-height: 1.2;
}

.secretpass-app-perk-card-heading .secretpass-app-stat-chip {
	flex: 0 0 auto;
}

.secretpass-app-perk-card-copy > small {
	display: block;
	margin-top: 6px;
	line-height: 1.35;
}

@media (max-width: 520px) {
	.secretpass-app-perk-card-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 7px;
	}
}

/* Main action stays visible on blue highlight panel */

.btn.btn-on-highlight {
	background: #fff;
	color: #003dcc;
}

/* Homepage actions + photo sections, shared w/ public offer/guide pages */

.secretpass-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	max-width: min(360px, 100%);
	padding: 14px 24px;
	border-radius: 999px;
}

.secretpass-button > .icon {
	flex-shrink: 0;
}

.secretpass-feature > .col-width-1 {
	min-width: 0;
}

/* Fit long titles in 2-column tablet layout w/o splitting words */

@media (min-width: 701px) and (max-width: 1100px) {
	.secretpass-feature-title {
		font-size: clamp(36px, 5.8vw, 60px);
	}
}

.secretpass-feature-media > img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
	object-fit: cover;
}

.secretpass-feature-media > .secretpass-ticket + img {
	margin-top: 12px;
}

/* Ticket label above photo, w/ homepage corners/padding/cutouts */

.secretpass-ticket {
	margin-top: 0;
	padding: 12px 24px;
	border-radius: 12px;
	background: #ff6b24;
	color: #fff;
	text-align: center;
	mask-image: radial-gradient(circle 12px at 0 50%, transparent 98%, #000), radial-gradient(circle 12px at 100% 50%, transparent 98%, #000);
	mask-composite: intersect;
}

/* Same size/shape as shop pill, stock stays non-interactive status */

.btn.secretpass-stock-pill {
	display: inline-block;
	background: #ff6b24;
	color: #fff;
	cursor: default;
	user-select: text;
}

/* Shared hide class wins for unknown/distant expiry dates */

.btn.secretpass-stock-pill.hide {
	display: none;
}

/* Ticket cutouts + blue palette for each offer's buying summary */

.secretpass-ticket.highlight-1 {
	background: var(--highlight-1-background);
	color: var(--highlight-1-text-color);
}

.secretpass-offer-ticket {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	min-width: 0;
	padding: 20px 24px;
	text-align: left;
}

.secretpass-offer-ticket > .secretpass-offer-fact {
	flex: 1 1 130px;
}

.secretpass-offer-ticket > .secretpass-offer-fact--pricing {
	flex-basis: 100%;
}

.secretpass-offer-ticket .secretpass-offer-fact-label,
.secretpass-offer-ticket del.secretpass-offer-fact-value,
.secretpass-offer-ticket .secretpass-offer-scope {
	opacity: 1;
}

.secretpass-offer-ticket .secretpass-offer-scope {
	display: block;
}

.secretpass-offer-ticket > .secretpass-offer-scope {
	flex-basis: 100%;
	margin: 0;
}

/* Browsing controls + 1st offers close to compact heading */

.secretpass-offers-heading {
	position: relative;
	padding: 0 clamp(140px, 22vw, 270px) 12px;
	container-type: inline-size;
}

/* Longest word fits heading width, ~0.62em per bold character */

.secretpass-offers-heading h1.secretpass-feature-title {
	font-size: min(clamp(36px, 5.4vw, 72px), calc(100cqi / (var(--heading-longest-word, 1) * 0.62)));
	line-height: 1.05;
	overflow-wrap: break-word;
}

@media (max-width: 600px) {
	.secretpass-offers-heading h1.secretpass-feature-title {
		font-size: min(max(36px, 250%), calc(100cqi / (var(--heading-longest-word, 1) * 0.62)));
	}
}

.secretpass-offers-loop,
.secretpass-offers-sparkles {
	position: absolute;
	pointer-events: none;
}

.secretpass-offers-loop {
	top: 12px;
	left: 0;
	width: clamp(120px, 20vw, 250px);
	height: auto;
}

.secretpass-offers-sparkles {
	top: 28px;
	right: 0;
	width: 90px;
	height: 90px;
}

.secretpass-offers-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.secretpass-offers-filters > select {
	flex: 1 1 160px;
	min-width: 0;
	width: auto;
}

.secretpass-offers-more-filters > summary {
	display: list-item;
	list-style-position: inside;
	cursor: pointer;
}

.secretpass-offers-more-filters[open] {
	flex-basis: 100%;
	order: 1;
}

.secretpass-offers-more-filters[open] > div {
	margin-top: 12px;
}

.secretpass-offers-expiring {
	width: auto;
	white-space: nowrap;
	cursor: pointer;
}

.secretpass-offers-expiring input {
	flex-shrink: 0;
}

/* Ticket card: shop, saving, item + conditions, then meta + action pinned to bottom */

.secretpass-offer-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	padding: 20px;
	overflow-wrap: anywhere;
}

/* Ticket + conditions join the card's order, saving shows above item name */

.secretpass-offer-card > .secretpass-offer-facts {
	display: contents;
}

.secretpass-offer-card > *,
.secretpass-offer-card > .secretpass-offer-facts > .secretpass-offer-fact {
	flex: 0 0 auto;
	order: 4;
	margin-top: 0;
}

.secretpass-offer-card > .secretpass-offer-card-shop {
	order: 1;
}

.secretpass-offer-card > .secretpass-offer-facts > .secretpass-offer-fact.secretpass-offer-ticket {
	order: 2;
}

.secretpass-offer-card > h2,
.secretpass-offer-card > h3 {
	order: 3;
	font-size: 22px;
	line-height: 1.2;
}

.secretpass-offer-card h2 a {
	display: block;
}

.secretpass-offer-card > .secretpass-offer-card-footer {
	order: 5;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 10px;
	margin-top: auto;
	padding-top: 6px;
}

/* Shop row always 1 line, very long shop names shorten */

.secretpass-offer-card-shop {
	position: static;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.secretpass-offer-card .secretpass-shop-monogram {
	width: 30px;
	height: 30px;
	font-size: 14px;
}

.secretpass-offer-card .secretpass-offer-card-merchant {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	font-weight: 700;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.secretpass-offer-card .secretpass-verified-shop {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

/* Expiry, stock + report chips on the card's top edge, same place on every card, shop row + ticket never move. Shop row is static so the card positions them */

.secretpass-offer-card-status {
	position: absolute;
	top: -13px;
	right: 20px;
	display: flex;
	gap: 6px;
}

.secretpass-offer-card-status:not(:has(> :not(.hide))) {
	display: none;
}

.secretpass-offer-card-chip {
	display: inline-block;
	margin: 0;
	padding: 4px 10px;
	border-radius: 999px;
	background: #ff6b24;
	color: #fff;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	user-select: text;
}

.secretpass-offer-card-chip.hide {
	display: none;
}

.secretpass-offer-card-chip--report-approved {
	background: color-mix(in srgb, var(--text-color-green-1) 18%, transparent);
	color: var(--text-color-green-1);
}

.secretpass-offer-card-chip--report-rejected {
	background: var(--highlight-4-background);
	color: inherit;
}

/* Same ticket height on every card, text size steps down for longer offers */

.secretpass-offer-card .secretpass-offer-ticket {
	flex-wrap: wrap;
	align-content: center;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 6px 24px;
	min-height: 120px;
	padding: 14px 22px;
	text-align: left;
}

.secretpass-offer-card .secretpass-offer-ticket > .secretpass-offer-fact {
	flex: 0 1 auto;
	min-width: 0;
}

.secretpass-offer-card .secretpass-offer-ticket .secretpass-offer-fact-list {
	justify-content: flex-start;
	margin-top: 0;
}

.secretpass-offer-card .secretpass-offer-ticket .secretpass-offer-fact-label {
	font-size: 14px;
	font-weight: 600;
}

/* Ticket already says it's the offer, label only kept for bare numbers */

.secretpass-offer-card .secretpass-offer-ticket > .secretpass-offer-fact--offer > .secretpass-offer-fact-label,
.secretpass-offer-card .secretpass-offer-ticket > .secretpass-offer-fact--features > .secretpass-offer-fact-label {
	display: none;
}

.secretpass-offer-card .secretpass-offer-facts .secretpass-offer-ticket .secretpass-offer-fact-value:not(del) {
	font-size: 44px;
	line-height: 1.05;
}

.secretpass-offer-card .secretpass-offer-facts .secretpass-offer-ticket--l .secretpass-offer-fact-value:not(del) {
	font-size: 34px;
}

.secretpass-offer-card .secretpass-offer-facts .secretpass-offer-ticket--m .secretpass-offer-fact-value:not(del) {
	font-size: 26px;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.secretpass-offer-card .secretpass-offer-facts .secretpass-offer-ticket--s .secretpass-offer-fact-value:not(del) {
	display: -webkit-box;
	overflow: hidden;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.secretpass-offer-card .secretpass-offer-ticket .secretpass-offer-scope {
	margin-top: 4px;
	font-size: 15px;
}

/* Conditions under item name, smaller than the saving */

.secretpass-offer-card > .secretpass-offer-facts > .secretpass-offer-fact:not(.secretpass-offer-ticket) {
	font-size: 15px;
	opacity: 0.8;
}

.secretpass-offer-card > .secretpass-offer-facts > .secretpass-offer-fact:not(.secretpass-offer-ticket) .secretpass-offer-fact-list {
	margin-top: 0;
}

/* Country, time left + category on 1 line, orange while expiring */

.secretpass-offer-card .secretpass-offer-card-meta {
	display: flex;
	flex-basis: 100%;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0;
}

.secretpass-offer-card .secretpass-offer-card-meta > p {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.secretpass-offer-card .secretpass-offer-card-meta .icon {
	width: 18px;
	height: 18px;
}

/* Category always on its own line, same on every card */

.secretpass-offer-card .secretpass-offer-card-meta > .secretpass-offer-card-category {
	flex-basis: 100%;
}

.secretpass-offer-card:has(.secretpass-offer-card-chip[data-secretpass-expiry]:not(.hide)) .secretpass-offer-card-deadline {
	color: #ff6b24;
	font-weight: 700;
}

/* 1 action, store button beside it for verified shops */

.secretpass-offer-card .secretpass-offer-card-actions {
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	margin: 0;
}

.secretpass-offer-card .secretpass-offer-card-actions > img.icon {
	width: 18px;
	height: 18px;
}

.secretpass-offer-card .secretpass-offer-card-store {
	margin: 0;
	white-space: nowrap;
}

/* 2 or 3 per row on wide screens, equal heights keep actions level */

@media (min-width: 1101px) {
	.cols:has(> .secretpass-offer-card) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
		align-items: stretch;
	}

	.secretpass-offer-grid-3:has(> .secretpass-offer-card) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cols:has(> .secretpass-offer-card) > .col-separator-no-bg-md,
	.cols:has(> .secretpass-offer-card) > .col-width-1:empty {
		display: none;
	}
}

/* Offer cards get a full row at tablet breakpoint */

@media (max-width: 1100px) {
	.cols:has(> .secretpass-offer-card) {
		flex-direction: column;
	}

	.cols:has(> .secretpass-offer-card) > .col-separator-no-bg-md,
	.cols:has(> .secretpass-offer-card) > .col-width-1:empty {
		display: none;
	}
}

.secretpass-offer-card-header {
	gap: 14px;
}

.secretpass-offer-card-header .secretpass-app-featured-deal-icon {
	flex-shrink: 0;
}

.secretpass-offer-card-conditions {
	flex-basis: 100%;
}

.secretpass-offer-card-conditions summary {
	display: list-item;
	cursor: pointer;
	list-style-position: inside;
	color: var(--link-text-color-2);
}

.secretpass-offer-card-conditions[open] > .secretpass-offer-fact {
	margin-top: 12px;
}

.secretpass-offer-card-region,
.secretpass-offer-card-deadline {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
}

.secretpass-offer-card-region,
.secretpass-offer-card-footer .secretpass-offer-card-deadline {
	margin-top: 0;
}

.secretpass-offer-card .icon {
	flex-shrink: 0;
}

.secretpass-offers-filters summary:focus-visible,
.secretpass-offers-expiring input:focus-visible,
.secretpass-offer-card a:focus-visible,
.secretpass-offer-card summary:focus-visible {
	outline: 2px solid var(--link-text-color-1);
	outline-offset: 4px;
}

@media (max-width: 700px) {
	.secretpass-offers-heading {
		padding: 0 0 12px;
	}

	.secretpass-offers-loop,
	.secretpass-offers-sparkles {
		display: none;
	}

	.secretpass-offers-filters > select {
		flex-basis: calc(50% - 6px);
	}
}

.secretpass-deal-list-item-content:focus-visible {
	outline: 2px solid var(--button-background-1);
	outline-offset: 3px;
}

/* Current price 1st, blue highlights make savings easy to compare */

.secretpass-offer-facts .secretpass-offer-fact--pricing .secretpass-offer-fact-list {
	align-items: flex-end;
	gap: 12px 24px;
	margin-top: 0;
}

.secretpass-offer-facts .secretpass-offer-ticket .secretpass-offer-fact-value:not(del) {
	display: block;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.025em;
	font-variant-numeric: tabular-nums;
}

.secretpass-offer-facts .secretpass-offer-fact--pricing del.secretpass-offer-fact-value {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0;
	text-decoration-thickness: 1px;
}

.secretpass-app-deal-hero .secretpass-offer-facts .secretpass-offer-ticket .secretpass-offer-fact-value:not(del) {
	font-size: clamp(36px, 5vw, 48px);
}

/* Purchase requirements below savings, readable w/o competing w/ discount */

.secretpass-offer-facts .secretpass-offer-fact--minimum-spend {
	flex-basis: 100%;
}

.secretpass-offer-facts .secretpass-offer-fact--minimum-spend .secretpass-offer-fact-list {
	margin-top: 0;
	line-height: 1.5;
}

.secretpass-offer-facts .secretpass-offer-fact--minimum-spend .secretpass-offer-scope {
	opacity: 1;
}

/* Normal-sized details in 2 columns only if each has room */

.secretpass-offer-facts > .secretpass-offer-fact--product,
.secretpass-offer-facts > .secretpass-offer-fact--specifications {
	flex-basis: 100%;
}

.secretpass-offer-fact--product .secretpass-offer-fact-list,
.secretpass-offer-fact--specifications .secretpass-offer-fact-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(240px, calc(50% - 10px))), 1fr));
	gap: 20px;
}

.secretpass-offer-fact--product .secretpass-offer-fact-list > li,
.secretpass-offer-fact--specifications .secretpass-offer-fact-list > li {
	margin: 0;
}

/* Vary orange heading accents w/ 1 shared non-interactive SVG sprite */

.secretpass-heading-mark::after {
	content: none;
}

.secretpass-heading-mark > img {
	position: absolute;
	left: -3%;
	bottom: -0.24em;
	width: 106%;
	height: 0.34em;
	pointer-events: none;
}

.secretpass-heading-mark-circle {
	padding: 0 0.25em;
}

.secretpass-heading-mark-circle > img {
	top: -0.06em;
	bottom: auto;
	height: 1.45em;
}

.secretpass-hero-star.secretpass-heading-sparkles {
	top: -28px;
	right: -90px;
	width: 86px;
	height: 86px;
	background: none;
	clip-path: none;
	transform: rotate(8deg);
}

@media (max-width: 600px) {
	.secretpass-hero-star.secretpass-heading-sparkles {
		top: -26px;
		right: -28px;
		width: 44px;
		height: 44px;
	}
}

/* Fit shared selects in compact filter rows, interaction states unchanged */

select.form-control-compact {
	margin-top: 0;
	padding: 10px 40px 10px 16px;
	font-size: 80%;
}

/* Compact comparison cards + native payment controls for Pricing + account checkout */

.secretpass-selection-card,
.secretpass-order-total {
	justify-content: space-between;
	gap: 24px;
}

.secretpass-plan-frequency {
	display: flex;
	justify-content: center;
	gap: 4px;
	border: 0;
	padding: 0;
	text-align: center;
}

.secretpass-plan-frequency legend {
	width: 100%;
	margin-bottom: 12px;
}

.secretpass-plan-frequency label {
	position: relative;
	cursor: pointer;
}

.secretpass-plan-frequency input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.secretpass-plan-frequency span {
	display: block;
	min-width: 130px;
	padding: 12px 20px;
	border-radius: 24px;
	background: var(--highlight-3-background);
}

.secretpass-plan-frequency input:checked + span {
	background: var(--button-background-1);
	color: var(--button-text-color-1);
}

.secretpass-plan-frequency input:focus-visible + span {
	outline: 2px solid var(--link-text-color-1);
	outline-offset: 4px;
}

.secretpass-plan-comparison:has(input[name="plan-frequency"][value="monthly"]:checked) [data-plan-frequency="once"],
.secretpass-plan-comparison:has(input[name="plan-frequency"][value="once"]:checked) [data-plan-frequency="monthly"] {
	display: none;
}

.secretpass-plan-card {
	position: relative;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border: 2px solid transparent;
	padding-top: 42px;
}

.secretpass-plan-featured {
	border-color: #ff6b24;
}

.secretpass-plan-best {
	position: absolute;
	top: -16px;
	left: 24px;
	right: 24px;
	text-align: center;
}

.secretpass-plan-saving {
	font-size: 16px;
}

.secretpass-plan-description {
	flex-grow: 1;
	line-height: 1.5;
}

/* Website palette for clear checkout progress, either colour theme */

.secretpass-checkout-progress {
	display: flex;
	gap: 12px;
	margin: 0 0 28px;
	padding: 0;
}

.secretpass-checkout-progress li {
	flex: 1;
	padding: 12px 0;
	border-bottom: 2px solid var(--outline-1-border-color);
}

.secretpass-checkout-progress li[aria-current="step"] {
	border-color: var(--link-text-color-1);
	color: var(--link-text-color-1);
	font-weight: 700;
}

.secretpass-order-total {
	padding: 20px 0;
	border-bottom: 1px solid var(--outline-1-border-color);
}

/* Long-form text uses standard site weight, FAQs reuse homepage layout */

.secretpass-reading p,
.secretpass-reading li,
.secretpass-reading dd {
	line-height: 1.65;
}

.secretpass-reading h2 {
	margin-top: 40px;
}

.secretpass-help-directory li {
	margin-top: 0;
}

#screen--secretpass-account [data-account-step] > h1 {
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.2;
}

@media (max-width: 700px) {
	.secretpass-plan-frequency span {
		min-width: 110px;
	}
}

/* Short secondary page intros, plan prices carry visual weight */

.secretpass-page-intro h1 {
	margin-top: 0;
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.2;
}

/* Mobile page titles match feature headings, status screens stay compact */

@media (max-width: 600px) {
	h1:not(.text-lg),
	#screen--secretpass-account [data-account-step]:not(.error) > h1:not(.text-lg) {
		font-size: max(36px, 250%);
	}
}

/* Reserve room for stars, not clipped at narrow screen edges */

.secretpass-page-intro .secretpass-hero-copy {
	padding: 0;
}

.secretpass-page-intro .secretpass-hero-heading {
	max-width: calc(100% - 64px);
}

.secretpass-plan-card > .text-xl > [data-plan-frequency] {
	font-size: 16px;
	white-space: nowrap;
}

/* Ending offers callout w/ own illustration, reuses drop section spacing/colours */

.secretpass-expiring-callout .col-width-2 {
	min-width: 0;
}

.secretpass-expiring-art {
	min-width: 0;
	text-align: center;
}

/* Member intro illustrations match expiring-offers artwork */

.secretpass-expiring-art img,
.secretpass-app-drop-hero-art,
.secretpass-app-reward-art,
.secretpass-app-feature-art,
.secretpass-app-perks-hero-art {
	display: block;
	width: 100%;
	max-width: 360px;
	height: auto;
	margin: 0 auto;
}

.secretpass-expiring-art img {
	animation: secretpass-drop-float 6s ease-in-out infinite;
}

@media (max-width: 700px) {
	.secretpass-app-drop-hero,
	.secretpass-app-reward-card,
	.secretpass-app-perks-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.secretpass-expiring-art img,
	.secretpass-app-drop-hero-art,
	.secretpass-app-reward-art,
	.secretpass-app-feature-art,
	.secretpass-app-perks-hero-art {
		max-width: 220px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.secretpass-expiring-art img {
		animation: none;
	}
}

/* Money summaries + charts readable at member-page widths */

.secretpass-finance-chart {
	height: 160px;
	min-width: 0;
	gap: 4px;
}

.secretpass-finance-bar {
	height: 100%;
	display: flex;
	align-items: flex-end;
	min-width: 0;
	position: relative;
}

.secretpass-finance-bar .bar-chart-fill {
	width: 100%;
}

.secretpass-finance-chart-value {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.secretpass-finance-bar:focus .secretpass-finance-chart-value,
.secretpass-finance-bar:hover .secretpass-finance-chart-value {
	clip-path: none;
	width: auto;
	height: auto;
	min-width: 9em;
	padding: 0.5em;
	background: var(--input-background-1);
	color: var(--input-text-color-1);
	z-index: 2;
}

.secretpass-finance-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.secretpass-finance-table th,
.secretpass-finance-table td {
	padding: 0.65em 0.75em;
	vertical-align: top;
	min-width: 7em;
}

.secretpass-finance-table td > span {
	display: block;
	max-width: 22em;
	overflow-wrap: anywhere;
}

@media (max-width: 767px) {
	.secretpass-finance-chart {
		gap: 2px;
	}
}

/* Motion per illustration, w/ quiet pauses between gestures */

.secretpass-motion-gift {
	--illustration-animation: secretpass-gift-wiggle 7s ease-in-out infinite;
	transform-origin: 50% 85%;
}

.secretpass-motion-trophy {
	--illustration-animation: secretpass-trophy-rise 900ms ease-out both;
	transform-origin: 50% 100%;
}

.secretpass-motion-badge {
	--illustration-animation: secretpass-badge-reveal 750ms ease-out both;
}

.secretpass-motion-friends {
	--illustration-animation: secretpass-friends-greet 9s ease-in-out infinite;
	transform-origin: 50% 80%;
}

.secretpass-motion-vouchers {
	--illustration-animation: secretpass-vouchers-nudge 8s ease-in-out infinite;
}

@keyframes secretpass-gift-wiggle {
	0%, 6%, 16%, 100% { transform: rotate(0); }
	8%, 12% { transform: rotate(-2deg); }
	10%, 14% { transform: rotate(2deg); }
}

@keyframes secretpass-trophy-rise {
	0% { transform: translateY(8px) scale(.96); }
	70% { transform: translateY(-2px) scale(1.01); }
	100% { transform: none; }
}

@keyframes secretpass-badge-reveal {
	0% { transform: scale(.92); }
	65% { transform: scale(1.025); }
	100% { transform: none; }
}

@keyframes secretpass-friends-greet {
	0%, 12%, 28%, 100% { transform: rotate(0); }
	18% { transform: rotate(-1.5deg); }
	23% { transform: rotate(1deg); }
}

@keyframes secretpass-vouchers-nudge {
	0%, 14%, 30%, 100% { transform: translateX(0); }
	20% { transform: translateX(4px); }
	25% { transform: translateX(-2px); }
}

@media (prefers-reduced-motion: no-preference) {
	.screen[data-visible="1"] :is(.secretpass-motion-gift, .secretpass-motion-trophy, .secretpass-motion-badge, .secretpass-motion-friends, .secretpass-motion-vouchers) {
		animation: var(--illustration-animation);
	}

	.screen [data-account-step][hidden] [class*="secretpass-motion-"] {
		animation: none;
	}
}

/* Hero proof strip: live catalogue numbers under main CTA */

.secretpass-hero-proof {
	list-style: none;
	padding: 0;
	margin-left: 0;
	gap: 8px;
	flex-wrap: wrap;
}

.secretpass-hero-proof > li {
	margin: 0;
	white-space: nowrap;
}

/* Offer eyebrow, shop initial + members-only code */

.secretpass-offer-card-header > span {
	text-transform: lowercase;
	letter-spacing: 0.02em;
}

.secretpass-shop-monogram {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: hsl(var(--monogram-hue, 220) 65% 42%);
	color: #fff;
	font-weight: 800;
	font-size: 15px;
	line-height: 1;
}

/* Shop name stays 1 line */

.secretpass-offer-card-merchant {
	max-width: calc(100% - 42px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.secretpass-locked-code .icon,
.secretpass-shop-fact-value .icon {
	width: 22px;
	height: 22px;
}

.secretpass-shop-fact-value {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.secretpass-locked-code {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	margin-bottom: 12px;
	padding: 8px 14px;
	border: 1px dashed currentColor;
	border-radius: 12px;
	opacity: 0.85;
}

.secretpass-locked-code-dots {
	margin-left: auto;
	letter-spacing: 2px;
}

#screen--secretpass-app-deal--coupon-code-visible .secretpass-locked-code {
	min-height: 0;
	margin-bottom: 0;
	padding: 0;
	border: 0;
}

@media (max-width: 700px) {
	.secretpass-hero-proof {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		font-size: 14px;
	}

	.secretpass-hero-proof > li {
		padding-left: 8px;
		padding-right: 8px;
		text-align: center;
	}
}

/* Breadcrumbs, shop answer + facts, shop link lists */

.secretpass-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.secretpass-breadcrumbs li {
	margin: 0;
}

.secretpass-breadcrumbs li + li::before {
	content: "›";
	margin-right: 8px;
	opacity: 0.5;
}

.secretpass-breadcrumbs [aria-current="page"] {
	opacity: 0.75;
}

.secretpass-answer {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.secretpass-shop-facts {
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 0;
}

.secretpass-shop-facts dd {
	margin-left: 0;
}

.secretpass-shop-links {
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin-left: 0;
}

.secretpass-shop-links > li {
	margin: 0;
}

.secretpass-shop-links a {
	gap: 10px;
	text-decoration: none;
}

.secretpass-shop-letters {
	flex-wrap: wrap;
	gap: 6px;
}