:root{
	--bg: rgba(249,242,236,1);
	--text: rgba(26,26,26,.8);
	--border: rgba(26,26,26,.12);
	--card: rgba(255,255,255,.55);
	--shadow: 0 10px 30px rgba(43,43,43,.08);
	--radius: 18px;
	--accent: rgba(222,150,126.1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
	margin: 0;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
	background: var(--bg);
	color: var(--text);
	line-height: 1.55;
}

.container{
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 24px 0 24px;
}

/* ── Sticky header with halftone shadow ── */
.site-header{
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: var(--bg);
	padding: 12px;
}
.site-header::after{
	content: '';
	position: absolute;
	bottom: -22px;
	left: 0;
	width: 100%;
	height: 22px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='1.6' fill='%231a1a1a' opacity='0.18'/%3E%3C/svg%3E");
	background-size: 8px 8px;
	background-repeat: repeat;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
	mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
	pointer-events: none;
}

.header-inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 68px;
	gap: 16px;
}

.brand{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--text);
	white-space: nowrap;
}

.brand-mark{
	width: 50px;
	height: 50px;
	display: inline-flex;
	align-items: center;
}

.brand-mark img{
 	width: 100%; 
 	height: 100%; 
 	object-fit: contain;
 	display: block;
 }

.brand-name{
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	min-width: 200px;
}
.tagline{
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent);
	text-align: right;
	white-space: nowrap;
}
.tagline-sub{
	font-family: 'Garamond', 'EB Garamond', Georgia, serif;
	font-style: italic;
	text-transform: none;
	letter-spacing: .02em;
	font-size: 14px;
	display: block;
}


.hero, .book{
	padding: 44px 0 10px;
}

/* Hero card with halftone corner */
.hero-inner{
	padding: 34px;
	border: 1px solid var(--border);
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}


.book-inner {
	padding: 34px;
	border: 1px solid var(--border);
	background: var(--accent);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

h1{
	margin: 0 0 14px;
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.05;
	letter-spacing: -.02em;
}

h2{
	margin: 0 0 16px;
	font-size: clamp(24px, 2.5vw, 34px);
	letter-spacing: -.01em;
	text-transform: capitalize;
}

.lead{
	font-size: clamp(20px, 1.5vw, 24px);
	max-width: 74ch;
}

.subtle{ color: var(--accent); }

.hero-actions{
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 20px;
}

.button{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border-radius: 999px;
	text-decoration: none;
	border: 1px solid var(--border);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .03em;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.button.primary{
	background: var(--text);
	color: var(--accent);
	border-color: var(--text);
}

.button.primary:hover{
	background: var(--accent);
	color: var(--text);
	border-color: var(--text);
}
.button.ghost{
	background: rgba(255,255,255,.85);
	color: var(--accent);
	border-color: var(--border);
}

.button.ghost:hover{
	background: rgba(255,255,255,.45);
	color: var(--accent);
	border-color: var(--border);
}

.section{ 
	padding: 18px 0;
	 }
	 
.prose{ max-width: 78ch; }

.cards{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 36px;
}

.card{
	padding: 18px;
	border: 1px solid var(--border);
	background: rgba(255,255,255,.55);
	border-radius: var(--radius);
}

.cards--two{
	grid-template-columns: repeat(2, 1fr);
}

.download-link{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--text);
	color: var(--bg);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .03em;
	transition: background .2s ease, color .2s ease;
}

.download-link:hover{
	background: var(--accent);
	color: var(--text);
}

.download-icon{
	flex-shrink: 0;
}

.card-label{
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--accent);
	margin: 4px 0 12px;
}

.steps{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 18px;
}

.step{
	padding: 18px;
	border: 1px solid var(--border);
	background: rgba(255,255,255,.55);
	border-radius: var(--radius);
}

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

.two-col{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 18px;
}

.panel{
	padding: 18px;
	border: 1px solid var(--border);
	background: rgba(255,255,255,.55);
	border-radius: var(--radius);
}
.panel.dark{
	color: #F9F2EC;
	background: rgba(0,0,0,.65);
}

/* Dark panel uses lighter dots */
.panel.dark::after{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='1.6' fill='%23F9F2EC' opacity='0.08'/%3E%3C/svg%3E");
}

/* ── Halftone corner texture utility ── */
/* Add class="halftone" to any element for the corner dot treatment */
.halftone{
	position: relative;
	overflow: hidden;
}
.halftone::after{
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 70%;
	height: 70%;
	pointer-events: none;
	z-index: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='1.6' fill='%231a1a1a' opacity='0.16'/%3E%3C/svg%3E");
	background-size: 8px 8px;
	-webkit-mask-image: radial-gradient(ellipse at 100% 100%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.22) 35%, transparent 68%);
	mask-image: radial-gradient(ellipse at 100% 100%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.22) 35%, transparent 68%);
}
.halftone > *{
	position: relative;
	z-index: 1;
}
/* Subtle variant — lighter, smaller coverage (e.g. hero) */
.halftone-subtle::after{
	width: 60%;
	height: 60%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='1.6' fill='%231a1a1a' opacity='0.07'/%3E%3C/svg%3E");
	-webkit-mask-image: radial-gradient(ellipse at 100% 100%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.15) 30%, transparent 60%);
	mask-image: radial-gradient(ellipse at 100% 100%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.15) 30%, transparent 60%);
}
/* Light dots for dark backgrounds */
.halftone-light::after{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='1.6' fill='%23F9F2EC' opacity='0.08'/%3E%3C/svg%3E");
}
/* ── Book section photo layout ── */
.book-layout{
	display: flex;
	align-items: center;
	gap: 34px;
}

.book-photo{
	flex-shrink: 0;
	width: 240px;
	height: 240px;
	border-radius: var(--radius);
	overflow: hidden;
}

.book-photo img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.book-content{
	flex: 1;
}

/* ── Override Acuity embed button styles ── */
.acuity-embed-button{
	border-radius: 999px !important;
	padding: 10px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: .03em !important;
	font-family: inherit !important;
}

.footer{
	padding: 18px 36px;
	background-color: var(--bg);
}

@media (max-width: 740px){
	.header-inner{ flex-wrap: wrap; }
	.tagline{ text-align: left; width: 100%; margin:0 0 18px 0;}
	.hero-inner{ padding: 22px; }
	.two-col{ grid-template-columns: 1fr; }
	.cards{ grid-template-columns: 1fr; }
	.steps{ grid-template-columns: 1fr; }
	.book-layout{ flex-direction: column; text-align: center; }
	.book-photo{ width: 180px; height: 180px; }
}

@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior: auto; }
	.button{ transition: none; }
}