@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

		*,
		*::before,
		*::after {
			box-sizing: border-box;
			margin: 0;
			padding: 0
		}

		:root {
			--bg: #fcfcfa;
			--fg: #1f1f1f;
			--card-bg: #fff;
			--muted: #6b6b6b;
			--border: #e2e2e2;
			--green: hsl(142, 60%, 38%);
			--green-light: rgba(46, 139, 87, .1);
			--red: hsl(0, 72%, 50%);
			--red-light: rgba(220, 38, 38, .08);
			--gold: hsl(45, 85%, 48%);
			--blue: #1a73e8;
			--cta: linear-gradient(135deg, hsl(142, 60%, 35%), hsl(155, 50%, 40%));
			--radius: 14px;
			--card: var(--card-bg);
			--green-bg: rgba(46, 139, 87, .08);
			--green-border: rgba(46, 139, 87, .2);
			--red-bg: rgba(220, 38, 38, .06);
			--red-border: rgba(220, 38, 38, .15);
		}

		body,
		html {
			font-family: 'Montserrat', sans-serif;
			background: var(--bg);
			color: var(--fg);
			line-height: 1.6;
			font-size: 18px;
			-webkit-font-smoothing: antialiased
		}

		a {
			color: inherit;
			text-decoration: none
		}

		button,
		input {
			font-family: inherit;
			border: none
		}

		button {
			cursor: pointer
		}

		.wrap {
			max-width: 620px;
			margin: 0 auto;
			padding: 20px 20px 300px
		}

		.hidden {
			display: none !important
		}

		.tc {
			text-align: center
		}

		.muted {
			color: var(--muted)
		}

		.sm {
			font-size: 16px
		}

		.xs {
			font-size: 14px
		}

		.lg {
			font-size: 21px
		}

		.xl {
			font-size: 24px
		}

		.xxl {
			font-size: 28px
		}

		.bold {
			font-weight: 700
		}

		.black {
			font-weight: 900
		}

		.leading {
			line-height: 1.8
		}

		.mx {
			max-width: 520px;
			margin-left: auto;
			margin-right: auto
		}

		.green {
			color: var(--green)
		}

		.red {
			color: var(--red)
		}

		.fade-in {
			animation: fadeUp .5s ease both
		}

		@keyframes fadeUp {
			from {
				opacity: 0;
				transform: translateY(12px)
			}

			to {
				opacity: 1;
				transform: none
			}
		}

		.card {
			background: var(--card-bg);
			border: 1px solid var(--border);
			border-radius: var(--radius);
			padding: 24px;
			margin-bottom: 16px
		}

		.card-green {
			border-color: rgba(46, 139, 87, .25)
		}

		.pill {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			padding: 6px 16px;
			border-radius: 99px;
			font-size: 14px;
			font-weight: 700
		}

		.pill-green {
			background: var(--green-light);
			color: var(--green);
			border: 1px solid rgba(46, 139, 87, .2)
		}

		.pill-red {
			background: var(--red-light);
			color: var(--red);
			border: 1px solid rgba(220, 38, 38, .2)
		}

		.cta {
			display: block;
			width: 100%;
			padding: 20px;
			background: var(--cta);
			color: #fff;
			font-weight: 900;
			font-size: 18px;
			border-radius: var(--radius);
			text-align: center;
			box-shadow: 0 4px 20px rgba(46, 139, 87, .3);
			transition: all .2s;
			position: relative;
			overflow: hidden;
			line-height: 1.4
		}

		.cta:hover {
			filter: brightness(1.08);
			transform: scale(1.02)
		}

		@keyframes pulseGlow {

			0%,
			100% {
				box-shadow: 0 0 20px rgba(46, 139, 87, .3)
			}

			50% {
				box-shadow: 0 0 40px rgba(46, 139, 87, .5)
			}
		}

		.cta {
			animation: pulseGlow 2s ease-in-out infinite
		}

		@keyframes shimmer {
			0% {
				left: -100%
			}

			50%,
			100% {
				left: 100%
			}
		}

		.cta::after {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
			animation: shimmer 2.5s ease-in-out infinite
		}

		.cta-sub {
			display: block;
			font-size: 15px;
			font-weight: 500;
			opacity: .85;
			margin-top: 4px
		}

		.no-thanks {
			font-size: 14px;
			color: var(--blue);
			text-decoration: underline;
			text-underline-offset: 4px;
			cursor: pointer;
			background: none;
			border: none;
			font-family: inherit;
			transition: color .2s;
			padding: 8px
		}

		.no-thanks:hover {
			color: hsl(210, 70%, 40%)
		}

		.input {
			width: 100%;
			padding: 14px 18px;
			border: 2px solid var(--border);
			border-radius: 10px;
			font-size: 16px;
			transition: border-color .2s;
			background: #fff
		}

		.input:focus {
			outline: none;
			border-color: var(--green)
		}

		.progress-bar {
			height: 8px;
			background: var(--border);
			border-radius: 99px;
			overflow: hidden;
			margin-bottom: 24px
		}

		.progress-fill {
			height: 100%;
			background: var(--green);
			border-radius: 99px;
			transition: width .6s ease
		}

		.ck {
			position: relative;
			background: linear-gradient(170deg, #f2f6fb, #e8eef6 50%, #f0f4fa);
			border: 1.5px solid #c0cfdd;
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 2px 16px rgba(0, 0, 0, .06);
			margin-bottom: 20px
		}

		.ck::before {
			content: '';
			position: absolute;
			inset: 0;
			background: repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(130, 160, 200, .05) 4px, rgba(130, 160, 200, .05) 5px), repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(130, 160, 200, .05) 4px, rgba(130, 160, 200, .05) 5px);
			pointer-events: none;
			z-index: 0
		}

		.ck>* {
			position: relative;
			z-index: 1
		}

		.ck-accent {
			height: 3px
		}

		.ck-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12px 18px 6px
		}

		.ck-num {
			font-family: 'Courier New', monospace;
			font-size: 11px;
			color: #8a9ab0;
			font-weight: 700
		}

		.ck-body {
			padding: 2px 18px 14px
		}

		.ck-date {
			font-size: 11px;
			color: #7a8a9a;
			text-align: right;
			margin-bottom: 10px
		}

		.ck-label {
			font-size: 9px;
			color: #8a9ab0;
			letter-spacing: 1.5px;
			text-transform: uppercase;
			font-weight: 700;
			margin-bottom: 3px
		}

		.ck-row {
			display: flex;
			align-items: center;
			gap: 10px;
			padding-bottom: 8px;
			border-bottom: 1.5px solid #b0c0d0;
			margin-bottom: 10px
		}

		.ck-name {
			flex: 1;
			font-size: 17px;
			font-weight: 700;
			color: #1a2a3a
		}

		.ck-amt {
			font-size: 19px;
			font-weight: 900;
			color: #1a6b3a;
			background: rgba(255, 255, 255, .6);
			border: 1.5px solid #b0c0d0;
			border-radius: 4px;
			padding: 3px 10px;
			white-space: nowrap
		}

		.ck-memo {
			font-size: 10px;
			color: #8a9ab0;
			padding-bottom: 6px;
			border-bottom: 1px solid #c4d2e0;
			margin-bottom: 8px
		}

		.ck-sig-area {
			text-align: right
		}

		.ck-sig {
			font-family: 'Brush Script MT', 'Segoe Script', cursive;
			font-size: 22px;
			color: #1a2a3a;
			border-bottom: 1.5px solid #b0c0d0;
			padding: 0 8px 2px;
			display: inline-block
		}

		.ck-micr {
			font-family: 'Courier New', monospace;
			font-size: 10px;
			color: #8a9ab0;
			letter-spacing: 3px;
			text-align: center;
			padding: 7px 16px;
			background: rgba(0, 0, 0, .015);
			border-top: 1px solid rgba(0, 0, 0, .04)
		}

		.ck-void {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) rotate(-25deg);
			font-size: 52px;
			font-weight: 900;
			color: rgba(220, 38, 38, .2);
			letter-spacing: 10px;
			pointer-events: none;
			z-index: 2
		}

		.ck-note {
			font-size: 10px;
			color: var(--muted);
			text-align: center;
			font-style: italic;
			margin-top: 4px;
			margin-bottom: 14px
		}

		.spot-row {
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 8px 14px;
			border-radius: 8px;
			background: #f5f5f5;
			border: 1px solid var(--border);
			margin-bottom: 6px;
			opacity: .3;
			transition: all .3s
		}

		.spot-row.checked {
			opacity: 1
		}

		.spot-bar {
			flex: 1;
			height: 6px;
			background: var(--border);
			border-radius: 99px;
			overflow: hidden
		}

		.spot-fill {
			height: 100%;
			width: 0%;
			border-radius: 99px;
			transition: width .4s
		}

		.spot-fill.taken {
			background: rgba(220, 38, 38, .5)
		}

		.spot-fill.open {
			background: var(--green)
		}

		.meter {
			height: 14px;
			border-radius: 99px;
			background: #eee;
			overflow: hidden;
			margin: 12px 0
		}

		.meter-fill {
			height: 100%;
			border-radius: 99px;
			transition: width 1s ease
		}

		.q-opt {
			width: 100%;
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 14px 16px;
			border: 2px solid var(--border);
			border-radius: 10px;
			background: #fff;
			cursor: pointer;
			transition: all .2s;
			font-family: inherit;
			margin-bottom: 8px;
			font-size: 17px;
			font-weight: 600;
			text-align: left
		}

		.q-opt:hover {
			border-color: rgba(46, 139, 87, .4);
			background: rgba(46, 139, 87, .04)
		}

		.q-opt .dot {
			width: 20px;
			height: 20px;
			border-radius: 50%;
			border: 2px solid var(--border);
			flex-shrink: 0
		}

		.countdown {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4px
		}

		.cd-digit {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 40px;
			height: 48px;
			background: var(--red-light);
			border-radius: 8px;
			font-size: 22px;
			font-weight: 900;
			color: var(--red);
			border: 1px solid rgba(220, 38, 38, .15)
		}

		.cd-sep {
			font-size: 22px;
			font-weight: 900;
			color: var(--red)
		}

		.sticky {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 50;
			background: rgba(252, 252, 250, .96);
			backdrop-filter: blur(12px);
			border-top: 1px solid var(--border);
			box-shadow: 0 -4px 20px rgba(0, 0, 0, .08);
			padding: 14px 16px;
			transform: translateY(100%);
			transition: transform .4s
		}

		.sticky.show {
			transform: translateY(0)
		}

		.sticky-inner {
			max-width: 620px;
			margin: 0 auto
		}

		.overlay {
			position: fixed;
			inset: 0;
			z-index: 60;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 16px;
			background: rgba(0, 0, 0, .7);
			backdrop-filter: blur(4px)
		}

		.overlay-box {
			width: 100%;
			max-width: 440px;
			max-height: 90vh;
			overflow-y: auto;
			background: var(--bg);
			border-radius: 16px;
			border: 1px solid var(--border);
			box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
			padding: 24px
		}

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

		.spinner {
			width: 40px;
			height: 40px;
			border: 4px solid var(--border);
			border-top-color: var(--green);
			border-radius: 50%;
			animation: spin .8s linear infinite;
			margin: 0 auto 16px
		}

		.benefit {
			display: flex;
			align-items: flex-start;
			gap: 12px;
			margin-bottom: 14px
		}

		.benefit-icon {
			width: 36px;
			height: 36px;
			border-radius: 8px;
			background: var(--green-light);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			font-size: 16px
		}

		.reason {
			background: #fff;
			border: 1px solid var(--border);
			border-radius: 12px;
			padding: 16px 18px;
			margin-bottom: 12px
		}

		.reason-num {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 28px;
			height: 28px;
			border-radius: 50%;
			background: var(--red-light);
			color: var(--red);
			font-size: 13px;
			font-weight: 900;
			border: 1px solid rgba(220, 38, 38, .15);
			margin-right: 8px;
			flex-shrink: 0
		}

		.assistant-card {
			background: linear-gradient(135deg, rgba(46, 139, 87, .06), rgba(46, 139, 87, .02));
			border: 1px solid rgba(46, 139, 87, .2);
			border-radius: 12px;
			padding: 16px 18px;
			margin: 16px auto;
			max-width: 320px;
			text-align: center
		}

		.proof {
			background: var(--card);
			border: 1px solid var(--green-border);
			border-radius: var(--radius);
			padding: 18px;
			margin-bottom: 16px
		}

		.proof-top {
			display: flex;
			align-items: center;
			gap: 12px;
			margin-bottom: 10px
		}

		.proof-avatar {
			width: 44px;
			height: 44px;
			border-radius: 50%;
			background: var(--green-bg);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 18px;
			flex-shrink: 0;
			border: 2px solid var(--green-border)
		}

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

		.proof-city {
			font-size: 12px;
			color: var(--muted)
		}

		.proof-amt {
			font-size: 24px;
			font-weight: 900;
			color: var(--green);
			margin-bottom: 6px
		}

		.proof-quote {
			font-size: 13px;
			color: var(--muted);
			font-style: italic;
			line-height: 1.6;
			border-top: 1px solid var(--border);
			padding-top: 10px;
			margin-top: 10px
		}

		.vn-wrap {
			max-width: 620px;
			margin: 0 auto;
			padding: 10px 20px 0
		}

		.vn-row {
			display: flex;
			align-items: flex-end;
			gap: 8px;
			animation: vnSlideIn .45s cubic-bezier(.34, 1.56, .64, 1) both;
		}

		@keyframes vnSlideIn {
			from {
				opacity: 0;
				transform: translateY(14px) scale(.97)
			}

			to {
				opacity: 1;
				transform: none
			}
		}

		.vn-avatar {
			width: 34px;
			height: 34px;
			border-radius: 50%;
			object-fit: cover;
			object-position: center top;
			flex-shrink: 0;
			border: 1.5px solid rgba(0, 0, 0, .08);
		}

		.vn-bubble {
			background: #34c759;
			border-radius: 18px 18px 18px 4px;
			padding: 9px 13px 9px 11px;
			max-width: 300px;
			box-shadow: 0 2px 10px rgba(52, 199, 89, .35), 0 1px 3px rgba(0, 0, 0, .1);
		}

		.vn-sender {
			font-size: 11.5px;
			font-weight: 700;
			color: rgba(255, 255, 255, .9);
			margin-bottom: 6px;
			font-family: -apple-system, 'SF Pro Text', Arial, sans-serif;
			letter-spacing: -.1px;
			display: flex;
			align-items: center;
			gap: 6px;
		}

		.vn-new-badge {
			background: rgba(255, 255, 255, .28);
			color: #fff;
			font-size: 9px;
			font-weight: 700;
			letter-spacing: .4px;
			text-transform: uppercase;
			padding: 1px 6px;
			border-radius: 99px;
			font-family: -apple-system, 'SF Pro Text', Arial, sans-serif;
			opacity: 0;
			transition: opacity .3s;
		}

		.vn-new-badge.show {
			opacity: 1
		}

		.vn-controls {
			display: flex;
			align-items: center;
			gap: 8px
		}

		.vn-play-btn {
			width: 32px;
			height: 32px;
			border-radius: 50%;
			background: rgba(255, 255, 255, .95);
			border: none;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
			transition: transform .1s, background .1s;
		}

		.vn-play-btn:active {
			transform: scale(.9)
		}

		.vn-canvas {
			flex: 1;
			height: 32px;
			display: block;
			border-radius: 2px;
			min-width: 0;
		}

		.vn-time {
			font-size: 11px;
			color: rgba(255, 255, 255, .85);
			font-family: -apple-system, 'SF Pro Text', monospace;
			min-width: 30px;
			text-align: right;
			flex-shrink: 0;
			letter-spacing: -.3px;
		}

		@keyframes pulseBlue {

			0%,
			100% {
				box-shadow: 0 0 20px rgba(26, 115, 232, .3)
			}

			50% {
				box-shadow: 0 0 40px rgba(26, 115, 232, .5)
			}
		}

		.ftr-logo {
			float: none;
		}