@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Source+Sans+3:wght@400;600;700&display=swap');

/* Base colors and global sizing */
:root {
	--ink:#000000;
	--cream:#DBDEDD;
	--paper:#DBDEDD;
	--green:#6F686D;
	--lime:#FCA311;
	--orange:#D98324;
	--muted:#6F686D;
	--line:#DBDEDD;
}
* {
box-sizing:border-box;
}
html {
scroll-behavior:smooth;
}
body {
	
		margin:0;
	background:var(--paper);
	color:var(--ink);
	
		font:16px 'Source Sans 3',sans-serif;
}
a {
	color:inherit;
	
		text-decoration:none;
}
.section-wrap {
	max-width:1180px;
	
		margin:auto;
	
		padding-left:28px;
	
		padding-right:28px;
}
.site-header {
	
		height:78px;
	padding:0 max(28px,calc((100vw - 1180px)/2));
	display:flex;
	
		align-items:center;
	
		justify-content:space-between;
	border-bottom:1px solid var(--line);
	background:var(--paper);
	
		position:relative;
	
		z-index:2;
}
.brand {
	display:flex;
	
		align-items:center;
	
		gap:10px;
	font-family:'Josefin Sans',sans-serif;
	font-weight:700;
	
		letter-spacing:-.04em;
	font-size:22px;
}
.brand img {
	
		width:34px;
	
		height:34px;
	
		object-fit:contain;
}
nav {
	display:flex;
	
		align-items:center;
	
		gap:34px;
	font-family:'Josefin Sans',sans-serif;
	font-size:14px;
	font-weight:700;
}
nav a:not(.nav-cta):not(.nav-github):hover,.text-link:hover {
color:var(--orange);
}
.nav-cta,.nav-github {
	background:var(--ink);
	color:var(--paper);
	padding:12px 17px;
	border-radius:30px;
	transition:background-color .2s,color .2s;
}
.nav-cta:hover {
	background:var(--green);
	color:var(--paper);
}
.nav-github {
background:var(--orange);
}
.nav-github:hover {
	background:var(--green);
	color:var(--paper);
}
.nav-cta span,.button span {
	margin-left:14px;
	color:var(--lime);
}
h1,h2,h3,p {
margin-top:0;
}
h1,h2 {
	font-family:'Josefin Sans',sans-serif;
	font-weight:700;
	font-size:clamp(48px,7vw,88px);
	
		line-height:.98;
	
		letter-spacing:-.06em;
	margin-bottom:28px;
}
h2 {
font-size:clamp(40px,5vw,64px);
}
h3 {
	
		font-family:'Josefin Sans',sans-serif;
	
		font-weight:700;
}
.eyebrow,.section-label,.mini-label,.progress-wrap,#progress-text {
	
		font:700 12px 'Josefin Sans',sans-serif;
	text-transform:uppercase;
	
		letter-spacing:.08em;
}
.hero {
	min-height:650px;
	display:grid;
	grid-template-columns:1fr 1fr;
	
		align-items:center;
	
		padding-top:55px;
	
		padding-bottom:85px;
}
.hero-intro {
	max-width:400px;
	
		font-size:20px;
	
		line-height:1.45;
	color:var(--muted);
	margin-bottom:34px;
}
.eyebrow {
	color:var(--orange);
	margin-bottom:22px;
}
.button {
	border:0;
	border-radius:30px;
	padding:16px 22px;
	
		font:700 14px 'Josefin Sans',sans-serif;
	
		cursor:pointer;
	display:inline-flex;
	
		align-items:center;
	
		justify-content:center;
}
.button-dark {
	background:var(--ink);
	color:var(--paper);
}
.button-dark:hover {
background:var(--green);
}
.button.button-bright span {
color:var(--ink);
}
.hero-art {
	
		height:475px;
	display:grid;
	place-items:center;
}
.hero-logo {
	
		width:min(330px,80%);
	
		height:auto;
}
.about,.ratings,.method {
	
		padding-top:100px;
	
		padding-bottom:120px;
}
.section-label {
	color:var(--orange);
	border-top:1px solid var(--line);
	
		padding-top:16px;
	margin-bottom:66px;
}
.about-grid,.method-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	
		gap:10%;
	
		align-items:start;
}
.about-text {
	max-width:450px;
	color:var(--muted);
	
		font-size:18px;
	
		line-height:1.55;
}
.text-link {
	display:inline-block;
	color:var(--ink);
	
		font-family:'Josefin Sans',sans-serif;
	
		font-weight:700;
	border-bottom:1px solid var(--orange);
	
		padding-bottom:5px;
	margin-top:15px;
}
.text-link span {
	color:var(--orange);
	margin-left:25px;
}
.ratings {
	background:var(--cream);
	max-width:none;
	
		padding-left:max(28px,calc((100vw - 1180px)/2));
	
		padding-right:max(28px,calc((100vw - 1180px)/2));
}
.ratings-heading {
	display:flex;
	
		justify-content:space-between;
	
		align-items:end;
	margin-bottom:45px;
}
.ratings-heading p {
	max-width:290px;
	color:var(--muted);
	
		line-height:1.5;
	margin-bottom:8px;
}
.rating-grid {
	display:grid;
	grid-template-columns:repeat(7,1fr);
	
		gap:11px;
}
.rating-card {
	background:var(--paper);
	min-height:285px;
	padding:18px 13px;
	display:grid;
	grid-template-rows:155px 1fr;
	row-gap:20px;
	border:1px solid transparent;
	transition:.2s;
}
.rating-card>div {
	display:flex;
	flex-direction:column;
	
		align-items:stretch;
}
.rating-card:hover {
	border-color:var(--orange);
	transform:translateY(-5px);
}
.rating-card img {
	
		width:100%;
	
		height:155px;
	
		object-fit:contain;
}
.rating-card h3 {
	
		font-size:26px;
	
		line-height:1;
	
		margin:0 0 7px;
}
.rating-card p {
	
		font-size:12px;
	
		line-height:1.4;
	color:var(--muted);
	
		margin:0;
}
.calculator {
	background:var(--green);
	color:var(--paper);
	padding:100px 0 110px;
}
.light {
	color:var(--lime);
	border-color:var(--green);
}
.calculator h2 {
margin-bottom:14px;
}
.calculator-head {
	display:flex;
	
		justify-content:space-between;
	
		align-items:end;
	margin-bottom:48px;
}
.calculator-head p {
color:#DBDEDD;
}
.progress-wrap {
	color:#DBDEDD;
	
		width:260px;
}
.progress {
	
		height:3px;
	background:#DBDEDD;
	margin-top:13px;
}
.progress i {
	display:block;
	background:var(--lime);
	
		height:100%;
	
		width:12.5%;
	transition:.3s;
}
.question {
	max-width:780px;
}
.question h3 {
	
		font-size:28px;
	
		line-height:1.2;
	margin-bottom:25px;
	
		letter-spacing:-.04em;
}
.question-note {
	color:#DBDEDD;
	
		font-size:14px;
	margin-top:-14px;
	margin-bottom:24px;
}
.shake {
animation:shake .35s;
}
@keyframes shake {
	25% {
	transform:translateX(-8px);
}
75% {
transform:translateX(8px);
}
}
.option {
	display:block;
	border:1px solid #DBDEDD;
	
		margin:10px 0;
	padding:18px 20px;
	border-radius:5px;
	
		cursor:pointer;
	color:#DBDEDD;
	transition:.2s;
}
.option:hover {
border-color:var(--lime);
}
.option input {
	accent-color:var(--lime);
	margin-right:13px;
}
.option.selected {
	background:#6F686D;
	
		border-color:var(--lime);
	color:var(--paper);
}
.quiz-actions {
	display:flex;
	
		gap:12px;
	margin-top:34px;
}
.button-outline {
	background:transparent;
	border:1px solid #DBDEDD;
	color:var(--paper);
}
.button-outline:disabled {
	
		opacity:.35;
	
		cursor:not-allowed;
}
.button-bright {
	background:var(--lime);
	color:var(--ink);
}
.button-bright:hover {
background:#FCA311;
}
.result {
	
	max-width:780px;
	margin-top:30px;
	padding:28px;
	background:var(--orange);
	
		font-size:18px;
	display:flex;
	
		align-items:center;
	
		gap:24px;
}
.result[hidden] {
display:none;
}
.result-rating-image {
	
		width:86px;
	
		height:112px;
	
		object-fit:contain;
	flex:0 0 auto;
}
.result b {
	
		font-family:'Josefin Sans',sans-serif;
	
		font-weight:700;
}
.method-grid p {
	color:var(--muted);
	
		line-height:1.55;
	
		font-size:17px;
}
.score-line {
	display:flex;
	
		align-items:center;
	
		gap:15px;
	
		border-top:1px solid var(--line);
	padding:15px 0;
}
.score-line strong {
	
		font:700 22px 'Josefin Sans',sans-serif;
	
		width:50px;
}
.score-line b {
	
		font-family:'Josefin Sans',sans-serif;
	
		font-weight:700;
	background:var(--orange);
	color:var(--paper);
	padding:7px 10px;
	
		border-radius:3px;
}
.score-a-plus {
background:#1CAE15!important;
}
.score-z {
background:#9D2911!important;
}
.score-line span {
	color:var(--muted);
	
		font-size:14px;
}
.fine-print {
	
		font-size:13px!important;
	color:#6F686D!important;
	margin-top:30px;
}
/* Footer */
footer {
	
		background:var(--ink);
	color:var(--paper);
	padding:30px 0;
}
.footer-inner {
	display:flex;
	
		align-items:center;
	
		gap:28px;
}
.footer-inner p {
	color:#DBDEDD;
	
		margin:0;
}
.footer-links {
	display:flex;
	
		gap:20px;
	
		font-family:'Josefin Sans',sans-serif;
	
		font-size:14px;
}
.footer-links a {
transition:color .2s;
}
.footer-links a:hover {
color:var(--lime);
}
.contribute-button {
	margin-left:auto;
	
		background:var(--lime);
	
		color:var(--ink);
	padding:12px 17px;
	
		border-radius:30px;
	
		font:700 14px 'Josefin Sans',sans-serif;
	
		transition:background-color .2s,color .2s;
}
.contribute-button:hover {
	
		background:var(--orange);
	
		color:var(--paper);
}

/* Responsive layout */
@media (max-width: 800px) {
	nav a:not(.nav-cta) {
	display:none;
}
.hero {
	grid-template-columns:1fr;
	
		padding-top:80px;
}
.hero-art {
	
		height:400px;
	margin-top:25px;
}
.about-grid,.method-grid {
	grid-template-columns:1fr;
	
		gap:25px;
}
.ratings-heading,.calculator-head {
display:block;
}
.ratings-heading p {
margin-top:25px;
}
.rating-grid {
grid-template-columns:repeat(2,1fr);
}
.rating-card {
min-height:255px;
}
.progress-wrap {
margin-top:35px;
}
.footer-inner {
	
		gap:20px;
	flex-wrap:wrap;
}
.footer-inner p {
order:2;
}
.footer-links {
order:3;
}
.contribute-button {
	order:4;
	margin-left:0;
}
}

@media (max-width: 450px) {
	.hero-art {
	
		transform:scale(.82);
	transform-origin:left center;
	margin-right:-80px;
}
.site-header {
	
		padding-left:18px;
	
		padding-right:18px;
}
.section-wrap {
	
		padding-left:20px;
	
		padding-right:20px;
}
.nav-cta {
padding:10px 12px;
}
.ratings {
	
		padding-left:20px;
	
		padding-right:20px;
}
}