/* ---------- Tokens: one palette, used everywhere ---------- */
:root{
	--paper:#F7F5F0;
	--card:#FFFFFF;
	--ink:#15171C;
	--soft:#5B5F69;
	--line:#E3E0D8;
	--green:#0B8A4B;
	--green-soft:#E3F3EA;
	--holo:linear-gradient(110deg,#7FD4FF,#C9A0FF 30%,#FFB3C7 55%,#B8FFD9 80%,#7FD4FF);
	--radius:14px;
	--shadow:0 16px 40px -24px rgba(21,23,28,.35);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 1800px;
	font-family:'Inter',system-ui,sans-serif;
	background:var(--paper);
	color:var(--ink);
	line-height:1.55;
	margin:0 auto;
}

h1,h2,h3{font-family:'Lora',Georgia,serif;line-height:1.12;letter-spacing:-.01em}
button,input{font:inherit}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ---------- Layout helpers ---------- */
.wrap{width: 100%; max-width: 1750px; display: flex; flex-direction: column; align-items: center; margin:0 auto;padding:0 24px;}
section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 156px 0 0;
}
/* Shared title block: hero + every section head (your props) */
.title {
	max-width: 900px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.eyebrow{
	display:inline-flex;align-items:center;gap:8px;
	font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--green);
}
.eyebrow::before,
.eyebrow::after{content:"";width:24px;height:2px;background:var(--green);border-radius:2px}
.section-title{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:600;max-width:580px}
.section-sub{color:var(--soft);max-width:520px;margin-top:12px;font-size:1.02rem}

/* ---------- Nav: your pill idea, polished ---------- */
nav{
	position:fixed;top:16px;left:50%;transform:translateX(-50%);
	width:min(920px,calc(100% - 32px));
	display:flex;align-items:center;justify-content:space-between;gap:16px;
	padding:12px 12px 12px 20px;
	background:color-mix(in srgb, var(--paper) 85%, transparent); /* near-opaque PAPER, not white */
	backdrop-filter:blur(12px);                                   /* smudges whatever sneaks through */
	border:1px solid color-mix(in srgb, var(--line) 50%, transparent);
	border-radius:999px;
	z-index:50;
}
nav:hover,
nav:focus-within{                              /* wakes up on intent — incl. keyboard Tab */
	opacity:1;
	background:rgba(255,255,255,.85);
	border-color:var(--line);
}
.nav-cta{
	border:1px solid var(--line);                /* ghost button: outline, not solid ink */
	border-radius:999px;background:transparent;color:var(--ink);
	padding:8px 16px;font-size:.88rem;font-weight:600;cursor:pointer;
	text-decoration:none
}
.nav-cta:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.brand{font-family:'Lora',serif;font-weight:700;font-size:1.05rem;text-decoration:none}
.brand em{font-style:normal;color:var(--green)}
.nav-links{display:flex;gap:24px;list-style:none;font-size:.9rem;font-weight:500;color:var(--soft)}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.nav-cta{
	border:none;border-radius:999px;background:var(--ink);color:#fff;
	padding:8px 20px;font-size:.88rem;font-weight:600;cursor:pointer;
}
.nav-cta:hover{background:var(--green)}

@media (max-width:820px){
	.nav-links{display:none}
}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	.cta-button{transition:none}
}

/* ---------- Modal ---------- */
.modal-backdrop{
	position:fixed;inset:0;z-index:90;
	background:rgba(21,23,28,.45);
	backdrop-filter:blur(6px);
}
#signup-modal{
	position:fixed;inset:0;z-index:100;
	display:flex;align-items:center;justify-content:center;
	padding:24px;
}
.signup{
	position:relative;
	width:min(440px,100%);
	background:var(--card);
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:28px;
	animation:modal-in .25s ease both;
}
.signup::before{ 
	content:"";position:absolute;inset:-2px;z-index:-1;
	border-radius:16px;background:var(--paper);
	filter:saturate(1.2);
}
@keyframes modal-in{
	from{opacity:0;transform:translateY(14px) scale(.97)}
	to{opacity:1;transform:none}
}
.signup-header{
	display:flex;align-items:center;justify-content:space-between;gap:16px;
	margin-bottom:8px;
}
.signup-header h2{font-size:1.4rem;font-weight:600}
#close-modal{
	cursor:pointer;line-height:1;
	font-size:1.6rem;color:var(--soft);
	padding:2px 8px;border-radius:8px;
	transition:color .15s ease,background .15s ease;
}
#close-modal:hover{color:var(--ink);background:var(--green-soft)}
.signup > p{
	color:var(--soft);font-size:.95rem;
	margin-bottom:20px;max-width:360px;
}
.form-entry{margin-bottom:16px}
.form-entry h3{
	font-family:'Inter',system-ui,sans-serif; /* labels read better as UI text */
	font-size:.78rem;font-weight:600;
	letter-spacing:.06em;text-transform:uppercase;
	color:var(--soft);margin-bottom:6px;
}
.form-entry input{
	width:100%;
	background:var(--card);
	border:1px solid var(--line);
	padding:12px 14px;font-size:.95rem;color:var(--ink);
	transition:border-color .15s ease,box-shadow .15s ease;
}

.form-entry input:focus{
	outline:none;border-color:var(--green);
	box-shadow:0 0 0 3px var(--green-soft);
}

.submit{margin-top:24px}
.submit-button{
	width:100%;
	border:none;border-radius:12px;
	background:var(--ink);color:#fff;
	padding:14px;font-size:1rem;font-weight:600;cursor:pointer;
	transition:transform .15s ease,background .15s ease;
}
.submit-button:hover{background:var(--green);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){
	.signup{animation:none}
	.submit-button,#close-modal,.form-entry input{transition:none}
}