@font-face{font-family:Lato;src:url('../fonts/Lato-Regular.ttf') format('truetype');font-weight:400;font-style:normal}
@font-face{font-family:Lato;src:url('../fonts/Lato-Bold.ttf') format('truetype');font-weight:700;font-style:normal}
@font-face{font-family:Lato;src:url('../fonts/Lato-Black.ttf') format('truetype');font-weight:900;font-style:normal}

:root{
	--jade:#2A7982;
	--prussian:#002B3E;
	--charcoal:#373738;
	--gold:#B9A482;
	--warm-grey:#8C8B8D;
	--grey-cloud:#B4B4B8;
	--chalk:#ECECF0;
	--white:#FFFFFF;
}

*{box-sizing:border-box}
html{font-size:16px}
body{
	margin:0;
	font-family:Lato,Arial,sans-serif;
	color:var(--charcoal);
	background:var(--chalk);
	line-height:1.55;
}
a{color:var(--jade)}
img{display:block;max-width:100%;height:auto}

.doc-shell{min-height:100vh}
.doc-hero{
	background:var(--prussian);
	color:var(--white);
	padding:2rem;
	border-bottom:8px solid var(--gold);
}
.doc-hero-inner{
	max-width:1040px;
	margin:0 auto;
	display:grid;
	grid-template-columns:180px 1fr;
	gap:2rem;
	align-items:center;
}
.doc-logo{
	width:170px;
	height:auto;
}
.print-logo{display:none}
.doc-label{
	margin:0 0 .6rem;
	color:var(--gold);
	font-size:.75rem;
	font-weight:700;
	letter-spacing:.18em;
	text-transform:uppercase;
}
h1{
	margin:0;
	font-size:clamp(2rem,4vw,3.4rem);
	line-height:1;
	letter-spacing:0;
}
.doc-subtitle{
	max-width:720px;
	margin:.9rem 0 0;
	color:rgba(255,255,255,.78);
	font-size:1rem;
}
.doc-meta{
	display:flex;
	flex-wrap:wrap;
	gap:.5rem;
	margin-top:1.25rem;
}
.meta-pill{
	border:1px solid rgba(255,255,255,.25);
	border-radius:3px;
	padding:.35rem .55rem;
	color:rgba(255,255,255,.82);
	font-size:.72rem;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
}

.doc-main{
	max-width:1040px;
	margin:0 auto;
	padding:2rem;
	background:var(--white);
}
.intro-grid{
	display:grid;
	grid-template-columns:1.15fr .85fr;
	gap:1.5rem;
	margin-bottom:2rem;
}
.panel{
	border:1px solid var(--chalk);
	border-radius:6px;
	padding:1.25rem;
	background:#fff;
}
.panel-muted{background:#f8f8fa}
.panel-dark{
	background:var(--prussian);
	color:#fff;
	border-color:var(--prussian);
}
.panel-dark p,.panel-dark li{color:rgba(255,255,255,.78)}
.panel-dark h2,.panel-dark h3{color:#fff}
h2{
	margin:0 0 .85rem;
	color:var(--prussian);
	font-size:1.35rem;
	line-height:1.2;
}
h3{
	margin:0 0 .45rem;
	color:var(--prussian);
	font-size:1rem;
	line-height:1.25;
}
p{margin:.65rem 0;color:#555}
ul,ol{margin:.6rem 0 0;padding-left:1.25rem}
li{margin:.35rem 0;color:#555}

.doc-note{
	border-left:5px solid var(--gold);
	padding:.9rem 1rem;
	background:#fbfaf7;
	color:#4b4640;
	margin:1rem 0;
}
.warning{
	border-color:var(--jade);
	background:#f3f9fa;
}
.placeholder{
	color:#6a6a6a;
	font-style:italic;
}
.step-list{
	counter-reset:step;
	display:grid;
	gap:1rem;
	margin-top:1rem;
}
.step{
	display:grid;
	grid-template-columns:56px 1fr;
	gap:1rem;
	padding:1rem;
	border:1px solid var(--chalk);
	border-radius:6px;
	break-inside:avoid;
}
.step::before{
	counter-increment:step;
	content:counter(step);
	display:flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	border-radius:50%;
	background:var(--jade);
	color:#fff;
	font-weight:900;
}
.step-media{
	margin-top:.8rem;
	border:1px solid var(--chalk);
	border-radius:4px;
	overflow:hidden;
	background:#f5f5f6;
}
.step-media picture{display:block}
.step-media img{
	width:100%;
	height:auto;
	object-fit:contain;
}
.caption{
	padding:.55rem .7rem;
	color:#666;
	font-size:.78rem;
	border-top:1px solid var(--chalk);
	background:#fff;
}
.checklist{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:.75rem;
	margin-top:1rem;
}
.check-item{
	display:grid;
	grid-template-columns:24px 1fr;
	gap:.6rem;
	align-items:start;
	padding:.75rem;
	border:1px solid var(--chalk);
	border-radius:4px;
	break-inside:avoid;
}
.check-box{
	width:18px;
	height:18px;
	border:2px solid var(--jade);
	margin-top:.2rem;
}
.spec-table{
	width:100%;
	border-collapse:collapse;
	margin-top:1rem;
	font-size:.92rem;
}
.spec-table th,.spec-table td{
	text-align:left;
	vertical-align:top;
	padding:.65rem;
	border:1px solid var(--chalk);
}
.spec-table th{
	color:var(--prussian);
	background:#f8f8fa;
	font-weight:900;
}
.doc-footer{
	max-width:1040px;
	margin:0 auto;
	padding:1.25rem 2rem 2rem;
	color:#666;
	font-size:.78rem;
	background:var(--white);
	border-top:1px solid var(--chalk);
}
.footer-meta{
	display:flex;
	flex-wrap:wrap;
	gap:.45rem .9rem;
	margin-bottom:.55rem;
	color:var(--prussian);
	font-size:.72rem;
	font-weight:900;
	letter-spacing:.06em;
	text-transform:uppercase;
}
.footer-meta span{
	padding-right:.9rem;
	border-right:1px solid var(--chalk);
}
.footer-meta span:last-child{
	padding-right:0;
	border-right:0;
}
.page-break{break-before:page}

@media (max-width:760px){
	.doc-hero{padding:1.5rem}
	.doc-hero-inner{grid-template-columns:1fr;gap:1.25rem}
	.doc-main{padding:1.25rem}
	.intro-grid,.checklist{grid-template-columns:1fr}
	.step{grid-template-columns:1fr}
	.step::before{width:38px;height:38px}
}

@media print{
	@page{margin:.55in}
	*{
		color:#000 !important;
		background:#fff !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	body{font-size:11pt;line-height:1.4;background:#fff}
	a{text-decoration:none;color:#000 !important}
	.doc-hero{
		padding:0 0 .25in;
		border-bottom:2px solid #000;
	}
	.doc-hero-inner{
		max-width:none;
		grid-template-columns:1.35in 1fr;
		gap:.25in;
	}
	.doc-logo{width:1.2in;filter:grayscale(100%)}
	.screen-logo{display:none}
	.print-logo{display:block}
	h1{font-size:24pt}
	.doc-subtitle{font-size:10pt}
	.doc-main,.doc-footer{
		max-width:none;
		padding:.25in 0 0;
	}
	.panel,.step,.check-item,.spec-table th,.spec-table td{
		border-color:#999 !important;
	}
	.meta-pill{
		border:1px solid #777;
		padding:.08in .12in;
		font-size:8pt;
	}
	.step::before{
		border:1px solid #000;
		width:.32in;
		height:.32in;
	}
	.step{grid-template-columns:.45in 1fr}
	.step-media img{filter:grayscale(100%)}
	.caption{font-size:8pt}
	.no-print{display:none !important}
}
