/*
Theme Name: Open the Books
Author: Your Name
Description: A custom theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: debt-clock
*/


*,
main *::before,
main *::after {
	padding: 0;
	margin: 0;
	border: none;
	box-sizing: border-box;
	list-style-type: none;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-size: 17px;
	letter-spacing: 0.2px;
	line-height: 1.3;
	text-decoration: none;
}

:root {
	--space: 100px;
	--gap: 40px;
	--max-width: 1440px;
	--padding: max(var(--space), calc((100vw - var(--max-width)) / 2));
	--background: #000;
	--blue: #04A5E0;
	--yellow: #F9ED1F;
	--orange: #6AA183;
	--black: #000;
	--white: #fff;
	--grey: #DCDCDC;
	--shadow: 0 0 25px #000000;
	--gradient-line: linear-gradient(90deg, #F3C017 0%, #FF9900 20%, #F1990C 21%, #BF9C38 27%, #919F60 33%, #6AA183 40%, #49A2A0 47%, #2EA4B7 54%, #19A5CA 62%, #0BA6D7 71%, #02A6DE 82%, #00A7E1 99%);
	--menu-height: 0px;
	--nav-padding-top: 30px;
	@media (max-width: 1200px) {
		--space: 50px;
	}
	@media (max-width: 1000px) {
		--space: 17px;
	}
}

:is(textarea, input)::placeholder {
	color: var(--yellow);
	opacity: 1;
}

:is(textarea, input):focus::placeholder {
	color: transparent;
}

html {
	scroll-behavior: smooth;
}

.button {
	background-color: var(--yellow);
	color: var(--black);
	padding: 14px 11px;
	font-weight: 700;
	font-size: 16px;
	line-height: 18.4px;
	border: none;
	width: 100%;
	max-width: 251px;
	transition: color linear 0.25s;
	display: inline-block;
  	text-align: center;
	cursor: pointer;
	&:is(:hover, :focus) {
		color: var(--black);
	}
	&.alt {
		background-color: var(--black);
		color: var(--orange);
		&:is(:hover, :focus) {
			color: var(--yellow);
		}
	}
}

@keyframes tick {
	0%   { transform: translateY(-30%); opacity: 0; }
	100% { transform: translateY(0);    opacity: 1; }
}

:is(h1, h2, h3, h4, h5, h6) {
	font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.045em;
}

header {
	display: flex;
	height: 902px;	
	background-color: var(--black);
	background-image: url(/wp-content/uploads/2026/03/papers.webp );
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover;
	flex-direction: column;
	align-items: center;
	justify-content: stretch;
	position: relative;
	padding: 58px var(--padding) 0 var(--padding);
	
	@media (max-width: 1000px) {
		height: 740px;
		padding-top: 87px;
	}
	
	& img {
		width: 100%;
    	max-width: 540px;
	}
	
	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
		height: 322px;
		width: 100%;
		left: 0;
	}
	
	&::before {
		content: '';
		position: absolute;
		bottom: 0;
		background-image: url(/wp-content/uploads/2026/03/scott-moe.webp);
		background-size: auto calc(100% + 16px);
		background-repeat: no-repeat;
		background-position: 50% 0;
		width: 100%;
		height: 428px;
		z-index: 1;
		opacity:0;
		transform:translateY(100px);
		transition: opacity linear 1s 1s, transform linear 1s 1s;
		@media (max-width: 1000px) {
			background-position: 50% 30px;
			width: 100%;
			height: 297px;
		}
	}
	
	&.fade-in-up-complete::before {
		opacity:1;
		transform:translateY(0);
	}
	
	
	
	& h1 {
		font-family: 'NeueHaasGroteskDisplayPro';
		text-align: center;
		vertical-align: middle;
		z-index: 1;
		text-shadow: var(--shadow);
		margin-top: 60px;
		line-break: anywhere;
		
		& .counter {
			font-weight: 900;
			font-size: 96px;
			color: var(--white);
			line-height: 1.15;
			letter-spacing: 0%;
			
			& .digit {
			  display: inline-block;
			  min-width: 1ch;
			  text-align: center;
			}

			& .sep {
			  display: inline-block;
			}

			& .tick {
			  animation: tick 0.15s ease-out;
			}
			
			@media (max-width: 1100px) {
				font-size: min(9vw, 80px);
			}
			
			@media (max-width: 700px) {
				font-size: 32px;
				margin-top: 12px;
			}
		}

		@media (max-width: 1000px) {
			margin-top: 90px;
		}
		
		& small {	
			font: inherit;
			line-height: 1;
			font-size: 36px;
			color: var(--yellow);
			line-break: auto;
			@media (max-width: 1000px) {
				font-size: 6vw;
			}
		}
		& span {
			font: inherit;
			line-height: inherit;
			display: flex;
			align-items: end;
			justify-content: center;
			@media (max-width: 1000px) {
				align-items: start;
			}
			& sub {
				font: inherit;
				line-height: inherit;
				font-size: 50px;
				display: flex;
				margin-left: 0px;
				transform: translateY(-15%);
				@media (max-width: 1000px) {
					font-size: inherit;
					transform: none;
				}
				@media (max-width: 400px) {
					display: none
				}
			}
		}
	}
	
}

.bar {
	min-height: 50px;
	padding: 8px var(--padding);
	background-color: var(--yellow);
	display: flex;
	text-align: center;
	gap: 22px;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 10;
	
	@media (max-width: 1000px) {
		padding-top: 15px;
		padding-bottom: 15px;
	}
	
	& p, strong {
		font-size: 15px;
		line-height: 1.15;
		letter-spacing: 0%;
	}
	& strong {
		text-transform: uppercase;
	}
	& img {
		height: 30px;
	}
}
	
footer a {
	text-decoration: underline;
	& em { font-style: italic }
}

section, footer {
	display: flex;
	flex-wrap: wrap;

	
	& a {
		font-style: inherit;
		color: inherit;
	}
	
	& h2 {
		margin-bottom: 40px;
		font-weight: 900;
		font-size: 28px;
		line-height: 32.2px;
		color: var(--white);
		& span {
			all: inherit;
			margin: 0;
		}
	}
	
	& p {
		color: var(--white);
	}
	
	& div.half {
		flex-basis: 50%;
		padding: 90px 20px 155px calc(var(--padding) + 44px);
		color: var(--background);
		@media(max-width: 1200px) {
			padding-left: var(--padding);
		}
		@media(max-width: 1000px) {
			--space: 30px;
			--padding: max(var(--space), calc((100vw - var(--max-width)) / 2));
			flex-basis: 100%;
			padding: 90px var(--padding);
		}
		& + div.half {
			position: relative;
			padding-right: calc(var(--padding) + 44px);
			padding-bottom: 123px;
			padding-left: 20px;
			background-image: url(images/megaphone-1.webp), url(images/megaphone-shape-1.svg);
			background-position: 0% calc(100% + 20px), 50%;
			background-size: 250px auto, cover;
			background-repeat: no-repeat;
			@media(max-width: 1200px) {
				padding-right: var(--padding);
			}
			@media(max-width: 1000px) {
				padding: 90px var(--padding);
				background-image: url(images/megaphone-2.webp), url(images/megaphone-shape.svg);
				background-position: calc(100% + 20px) calc(100% + 20px), 50%;
				background-size: 140px auto, cover;
				background-repeat: no-repeat;
			}
		}
		
	}
	
	& #petition {
		@media (max-width: 1000px) {
			order: 0;
			padding: 90px var(--padding) 183px var(--padding);
		}
	}
	
	& .blue {
		background-color: var(--orange);
		background-image: url(images/saskatchewan-legislature.webp);
		background-position: 100% 0;
		background-size: cover;
		background-repeat: no-repeat;
		@media (max-width: 1000px) {
			order: 1;
			background-size: auto 420px;
  			background-position: calc(100% + 28px) bottom;
		}
		& p {
			max-width: 356px;
			margin-bottom: 20px;
			@media (max-width: 1000px) {
				max-width: 100%
			}
		}
		& .button {
			margin-top: 118px;
			@media (max-width: 1000px) {
				margin-top: 20px;
			}
		}
	}
	& .black {
		background-color: var(--black);
		display: flex;
		flex-direction: column;
		text-align: right;
		align-items: end;
		@media (max-width: 1000px) {
			text-align: left;
		}
		& p {
			max-width: 461px;
			margin-bottom: 20px;
			@media (max-width: 1000px) {
				max-width: 100%;
				width: 100%;
			}
		}
		& .wpcf7 {
			margin-top: 20px;
			width: 100%;
		}
		& h2 {
			@media (max-width: 1000px) {
				width: 100%;
			}
		}
	}
	
	@media (max-width: 1000px) {
		& .button {
 			width: 100%;
      		/*width: calc(100% - 90px); */
			max-width: 100%;
			margin-top: -10px;
     		margin-bottom: 14px;
		}
		& .full-width {
			position: relative;
		}
		& .wpcf7-spinner {
			position: absolute;
			bottom: 12px;
		}
	}
	
	& form.wpcf7-form {
		--gap: 16px;
		gap: var(--gap);
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 461px;
		margin-left: auto;
		
		@media (max-width: 1000px) {
			max-width: 100%;
			width: 100%;
		}
		
		& p {
			width: 100%;
			max-width: 100%;
			margin-bottom: 0;
		}
		& input:not([type="submit"]), select, textarea, .attachment-wrapper {
			border: 1px solid #373632;
			background-color: rgba(0,0,0,0.85);
			color: var(--yellow);
			width: 100%;
			padding: 7px 13px;
			font-weight: 400;
			font-size: 12px;
			line-height: 18px;
			text-align: left;
		}
		& .attachment-wrapper .text p {
			cursor: pointer;
			font-weight: 400;
			font-size: 12px;
			line-height: 18px;
			color: var(--yellow);
			display: flex; 
			align-items: center;
			&::before {
				content: '';
				width: 12px;
				height: 12px;
				margin-right: 10px;
				background: url('data:image/svg+xml,<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.26777 4.66421L3.7929 7.13909C3.20711 7.72487 3.20711 8.67462 3.7929 9.26041C4.37868 9.84619 5.32843 9.84619 5.91422 9.26041L9.98008 5.19454C11.054 4.1206 11.054 2.3794 9.98008 1.30546C8.90614 0.231514 7.16493 0.231514 6.09099 1.30546L1.67157 5.72487C0.109477 7.28697 0.109476 9.81959 1.67157 11.3817C3.23367 12.9438 5.76633 12.9438 7.32843 11.3817L12.2782 6.43198" stroke="%23F9ED1F" stroke-linecap="round" stroke-linejoin="round"/></svg>');
				background-size: contain;
				background-repeat: no-repeat;
				display: inline-block;
			}
		}
		& .attachment-wrapper {
			position: relative;
			& input {
				display: none;
			}
			& .attachments {
				position: absolute;
				right: 10px;
				top: 2px;
				max-width: calc(100% - 100px);
				height: 100%;
			}
			& .attachment-pill {
				border: 1px solid #373632;
				color: #373632;
				font-size: 10px;
				padding: 6px 30px 6px 10px;
				display: flex;
				position: relative;
				background-color: rgba(255,255,255,0.85);
				border-radius: 5px;
				& button {
					background: transparent;
					position: absolute;
					height: 100%;
					right: 10px;
					top: 0;
					cursor: pointer;
				}
			}
		}
		 
		& textarea {
			height: 79px;
			resize: none;
		}
		& .wpcf7-list-item-label {
			font-weight: 400;
			font-size: 7px;
			color: var(--white);
			cursor: pointer;
			margin-top: -7px;
			margin-bottom: -7px;
			@media (max-width: 1000px) {
				max-width: 100%;
				padding-left: 20px;
			}
		}
		& .full-width {
			display: flex;
			gap: inherit;
			--columns: 2;
			@media (max-width: 1000px) {
				--columns: 1;
				flex-direction: column;
			}
		}
		& .half-width {
			flex: 0 1 calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
			@media (max-width: 1000px) {
				flex: 1
			}
		}
		& .wpcf7-list-item {
			margin: 0;
			max-width: 375px;
			@media (max-width: 1000px) {
				width: 100%;
			}
		}
		& .wpcf7-list-item-label::before,
		& .wpcf7-list-item-label::after {
			display: none;
		}
		& .wpcf7-acceptance label {
			display: flex;
			gap: 60px;
			&::after,
			&::before {
				content: '';
				position: absolute;
				margin-top: 0;
				left: 42px;
				width: 20px;
				height: 20px;
				background-color: var(--white);
				@media (max-width: 1000px) {
					left: 22px;
				}
			}
			&::before {
				width: 15px;
				height: 15px;
				margin-top: 2.5px;
        		margin-left: 2.5px;
				z-index: 10;
			}
			&:has(:checked)::before {
				background-color: var(--yellow);
			}
			& input {
				opacity: 0;
				max-width: 20px;
				width: auto;
			}
		}
		& .submit-row p {
			margin-top: 25px;
			display: flex;
			align-items: end;
			flex-direction: column;
			@media (max-width: 1000px) {
				align-items: start;
			}
		}
		& .wpcf7-not-valid-tip {
			text-align: center;
			font-size: 12px;
		}
		&  .wpcf7-response-output {
			margin: 0;
			text-align: center;
			color: #fff;
			&:empty {
				display: none;
			}
		}
	}
	
	&.yellow {
		background-color: var(--yellow);
		background-image: url(images/scott-moe-sitting.webp);
		background-repeat: no-repeat;
		background-size: auto 100%;
    	background-position: 81% calc(100% + 50px);
		@media (max-width: 1000px) {
			background-size: 282px;
  			background-position: 40% calc(100% + -14px);
		}
		& p {
			margin-bottom: 33px;
/* 			max-width: 468px; */
			color: var(--black);
		}
		& h2 {
			margin-bottom: 35px;
			color: var(--black);
		}
		& div.half {
			padding-top: 96px;
			padding-bottom: 77px;
			@media (max-width: 1000px) {
				--space: 30px;
				--padding: max(var(--space), calc((100vw - var(--max-width)) / 2));
				padding: 90px var(--padding);
				padding-bottom: 350px;
				/* height: 622px; */
			}
		}
	}
	
	& div.full {
		width: 100%;
		flex-basis: 100%;
		text-align: center;
		font-weight: 500;
		font-size: 14px;
		line-height: 21px;
		padding: 52px var(--padding);
		text-wrap: balance;
	}
	
}

.notice-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 11px;
	background-color: var(--yellow);
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: center;
	gap: 10px;
	& p {
		font-size: 10px;
		color: black;
		margin-bottom: 0 !important;
		text-align: center;
		max-width: 430px !important;
		& a {
			font-size: inherit;
			text-decoration: underline;
		}
	}
}

.outer-content {
	background-color: var(--black);
	.inner-content {
		max-width: 1440px;
		padding: 96px 100px;
		margin: 0 auto;
		display: flex;
		gap: 50px;
		@media (max-width: 1000px) {
			flex-direction: column-reverse;
			padding: 96px 44px;
		}
		& .button {
			white-space: nowrap;
			display: flex;
			align-items: center;
			width: 251px;
			gap: 20px;
			justify-content: center;
		}
		article {
			display: flex;
			gap: 22px;
			flex-direction: column;
			& h1 {
				font-weight: 900;
				font-size: 32px;
				line-height: 1.15;
				color: var(--yellow);
				margin-bottom: 20px;
			}
			& ul {
				padding-left: 20px;
				& li {
					list-style-type: disc;
				}
			}
			& :is(h2, p, strong, li) {
				color: var(--white);
			}
			& p a {
				color: var(--yellow);
				&:is(:hover, :focus) {
					text-decoration: underline;
				}
			}
		}
		aside {
			padding-right: 44px;
			@media (max-width: 1000px) {
				padding-right: 0;
			}
		}
	}
}



footer {
	background-color: var(--yellow);
	
	& div.half {
		padding: 88px 20px 0 var(--padding);
		gap: 16px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		@media (max-width: 1000px) {
			padding-top: 53px;
			padding-bottom: 44px;
			text-align: center;
			&:has(img) {
				display: none;
			}
		}
		
		 & + div.half {
			 padding: 88px calc(var(--padding) + 107px) 0 20px;
			 display: flex;
			 flex-direction: column;
			 background-image: none;
			 position: relative;
			 @media(max-width: 1200px) {
				padding-right: var(--padding);
			}
			 @media (max-width: 1000px) {
				text-align: center;
			}
		}
		& :is(address, p) {
			color: var(--black);
			font-weight: 500;
			font-size: 12px;
			line-height: 1.25;
			& a {
				font-size: inherit;
				line-height: inherit;
				transition: color linear 0.25s;
				&:is(:hover, :focus) {
					color: var(--orange);
				}
			}
		}
	}
	& img {
		max-width: 332px;
		filter: brightness(0);
		@media (max-width: 1000px) {
			margin: 0 auto;
			max-width: 230px;
		}
	}
	& div.half {
		color: var(--yellow);
	}
	& div.half + .half {
		text-align: right;
	}
}

.home footer {
	background-color: var(--black);
	& div.half {
		color: var(--black);
		& :is(address, p) {
			color: var(--yellow);
		}
	}
	& img {
		filter: none;
	}
}

:is(#el, .react-header) {
	min-height: 100dvh;
	background-color: #000;
	
	:root {
    --cream: #000000;
    --cream-deep: #0a0a0a;
    --ink: #ffffff;
    --ink-soft: #ffffff;
    --ink-faint: rgba(255, 255, 255, 0.55);
    --rule: rgba(255, 255, 255, 0.35);
    --rule-soft: rgba(255, 255, 255, 0.18);
    --accent: #ffffff;
  }
	
	*:not(style, script, svg, svg *) {
		all: unset;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
	
	.hero-bg {
		position: absolute;
		inset: 0;
		background-image: url(/wp-content/uploads/2026/05/scott-moe-face-scaled.jpg);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		animation: heroBgFade 0.5s ease-out forwards, heroBgScale 10s ease-out forwards;
		transform-origin: center;
		z-index: 0;
		will-change: transform, opacity;
		filter: brightness(1.25);
		&::after {
			content: "";
			position: absolute; inset: 0;
			background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.65));
		  }
	  }

	  .tip-banner {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background: #F9ED1F;
		padding: 5px 44px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		  & p {
			margin: 0;
			font-size: clamp(16px, 2.4vw, 20px);
			font-weight: 700;
			color: #000;
			letter-spacing: -0.06em;
			line-height: 0.92;
		  }
	  }
	
	.whistle-btn {
		background: #000;
		color: #F9ED1F;
		border: none;
		cursor: pointer;
		padding: 10px 20px;
		border-radius: 0;
		flex-shrink: 0;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: 700;
		font-size: 12px;
		letter-spacing: 0.04em;
		font-variant-numeric: tabular-nums;
		line-height: 1;
		white-space: nowrap;
	  }
	
	.hero {
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: clamp(80px, 20vh, 250px) clamp(20px, 5vw, 64px) clamp(32px, 4vw, 56px);
		padding-left: calc(var(--padding) + 44px);
		padding-right: calc(var(--padding) + 44px);
		gap: clamp(24px, 3vw, 40px);
		color: var(--ink);
		min-height: max(1050px, 100vh);
		box-sizing: border-box;
		@media (max-width: 1000px) {
			--padding: max(var(--space), calc((100vw - var(--max-width)) / 2));
			min-height: 100dvh;
			padding-left: var(--padding);
			padding-right: var(--padding);
		}
		&::before {
			content: "";
			position: absolute; inset: 0;
			pointer-events: none;
			opacity: 0;
		  }
		& > *:not(.hero-bg) { position: relative; z-index: 1; }
	  }

	  .center {
		display: flex;
		flex-direction: column;
		gap: 32px;
		align-items: stretch;
		overflow: hidden;
	  }
	
	.c-grid-scroll {
		display: grid;
		grid-template-rows: repeat(3, 1fr);
		grid-auto-flow: column;
		grid-auto-columns: calc(100% / 10);
		width: 250%;
		height: 100%;
		animation: scrollLeft 48s linear infinite;
		will-change: transform;
	  }
	
	    @media (max-width: 720px) {
			.center { gap: 20px; }
			.col-left { gap: 14px; }
			.col-right { min-height: 200px; }
			.ticker { grid-template-columns: auto 1fr; }
			.ticker .value { display: none; }
			.compare .c-head { padding: 9px 12px 8px; }
			.compare .c-head .title { font-size: 12px; }
			.compare .c-row { padding: 8px 12px; gap: 10px; }
			.compare .c-label { font-size: 12px; }
			.compare .c-value { font-size: clamp(15px, 4vw, 20px); }
			/* 3 visible columns on tablet */
			.c-grid-scroll { width: 333.33%; }
	}
	@media (max-width: 600px) {
		/* 2 rows, 2 visible: 30 items / 2 rows = 15 cols → width 750% */
		.c-grid-scroll {
			grid-template-rows: repeat(2, 1fr);
			grid-auto-columns: calc(100% / 15);
			width: 750%;
		}
	}
	@media (max-width: 480px) {
		/* Reduce hero top padding so content fits on screen */
		.hero { padding-top: clamp(56px, 12vh, 100px); }
		/* Single-row: 30 items / 1 row = 30 cols, 1 visible at a time → width = 3000% */
		.c-grid-scroll {
			grid-template-rows: 1fr;
			grid-auto-columns: calc(100% / 30);
			width: 3000%;
		}
		/* Compare panel height = card width (100vw) → square cards */
		.compare { flex: none; height: clamp(140px, 90vw, 220px); }
		/* Each card becomes a stacked (column) layout */
		.compare .c-row {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			gap: 6px;
			padding: 10px 8px;
			border-bottom: none;
		}
		.compare .c-icon { width: 28px; height: 28px; }
		.compare .c-icon svg { width: 20px; height: 20px; }
		.compare .c-label { font-size: 10px; line-height: 1.3; }
		.compare .c-label .sub { display: none; }
		.compare .c-value { font-size: 14px; font-weight: 700; }
	}
	
	.top-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 72px;
		align-items: stretch;
		justify-content: space-between;
	  }
	  .top-row > .compare { justify-self: end; }
	  @media (max-width: 980px) {
		.top-row { grid-template-columns: 1fr; gap: 28px; }
		.top-row > .compare { justify-self: stretch; }
		.col-right { min-height: 260px; }
		.compare { width: 100% !important; max-width: 100% !important; }
		.compare .c-value { font-size: clamp(16px, 3.5vw, 24px); }
	  }
	
 	.col-left {
		display: flex;
		flex-direction: column;
		gap: 20px;
		min-width: 0;
	  }

	  .compare {
		display: flex;
		flex-direction: column;
		border: 1px solid var(--rule);
		background: rgba(0,0,0,0.55);
		backdrop-filter: blur(2px);
		min-width: 0;
		flex: 1;
		min-height: 0;
	  }
	  .compare .c-head {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: baseline;
		padding: 11px 16px 10px;
		border-bottom: 1px solid var(--rule);
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: var(--ink);
		gap: 12px;
	  }
	  .compare .c-head .title {
		font-weight: 700;
		font-size: 13px;
		letter-spacing: -0.005em;
		text-transform: none;
	  }
  .compare .c-head .sub {
		font-weight: 500;
		font-size: 10px;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--ink-soft);
	  }
	  .compare .c-list {
		flex: 1;
		/*overflow: hidden;
		min-height: 0;
		position: relative;*/
	  } 
	  .compare .c-row {
		display: grid;
		grid-template-columns: 30px 1fr auto;
		align-items: center;
		gap: 14px;
		padding: 9px 16px;
		border-right: 1px solid var(--rule-soft);
		border-bottom: 1px solid var(--rule-soft);
		overflow: hidden;
	  }
		  .compare .c-icon {
		width: 28px; height: 28px;
		display: grid; place-items: center;
		color: var(--accent);
	  }
	  .compare .c-icon svg { display: block; width: 22px; height: 22px; }
	  .compare .c-label {
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: 500;
		font-size: 13px;
		letter-spacing: -0.005em;
		color: var(--ink);
		line-height: 1.25;
		text-transform: none;
	  }
	  .compare .c-label .sub {
		display: block;
		font-weight: 400;
		font-size: 11px;
		color: var(--ink-soft);
		letter-spacing: 0.02em;
		margin-top: 1px;
	  }
	  .compare .c-value {
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: 700;
		font-size: clamp(16px, 1.8vw, 26px);
		letter-spacing: -0.025em;
		color: var(--accent);
		font-variant-numeric: tabular-nums;
		text-align: right;
		white-space: nowrap;
		line-height: 1;
	  }
	  .compare .c-value .unit {
		font-weight: 500;
		font-size: 0.62em;
		color: var(--ink-soft);
		letter-spacing: 0.04em;
		margin-left: 2px;
	  } 
	
	.headline {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.045em;
    font-size: clamp(40px, 8vw, 180px);
    color: var(--ink);
  }
  .headline .row { display: block; }
  .headline .em {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 700;
    letter-spacing: -0.045em;
    color: var(--ink);
  }
  .headline .num {
    display: block;
    color: var(--accent);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.055em;
    font-size: clamp(50px, 11.5vw, 200px);
    line-height: 0.92;
    margin-top: 22px;
    white-space: nowrap;
  }

  .ticker-label {
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
    padding-bottom: 12px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--rule);
  }

  .ticker {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: end;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .ticker .label { white-space: nowrap; }
  .scale-segs { position: relative; flex: 1; height: 10px; align-self: center; }
  .segs-bg, .segs-fg { position: absolute; inset: 0; display: flex; gap: 2px; }
  .seg { flex: 1; height: 100%; border-radius: 1px; }
  .segs-bg .seg { background: rgba(255,255,255,0.18); }
  .segs-fg .seg { background: #F9ED1F; }
  .ticker .value {
    color: var(--ink);
    font-weight: 700;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    min-width: 14ch;
    text-align: right;
  }

  .col-right {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rule);
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
    min-height: clamp(180px, 30vh, 360px);
    flex: 1 1 auto;
  }


  .anno {
    position: absolute;
    pointer-events: none;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--cream);
    border: 1px solid var(--ink);
    padding: 5px 8px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    white-space: nowrap;
    z-index: 2;
  }
  .anno.show { opacity: 1; transform: none; }

  .fade {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
  }
  .fade.show { opacity: 1; transform: none; }

  .slot {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
	padding-right: 10px;
  }
  .slot .lift {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 0.85s cubic-bezier(.2,.75,.2,1);
  }
  .slot.show .lift { transform: none; }

}

  @keyframes scrollLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  @keyframes heroBgFade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes heroBgScale {
    from { transform: scale(1); }
    to   { transform: scale(1.15); }
  }