/* EduCraftHub – single stylesheet. Brand colors come from the logo. */
:root{
	
	--blue:#2b7bff;
	--blue-d:#1b5fd1;
	--pink:#db2a5a;
	--pink-d:#bf1f4c;
	--green:#00b862;
	--green-d:#0b7a45;
	
	--orange:#ff7a00;
	--yellow:#ffd600;
	--purple:#8a2be2;
	
	--navy:#0f1f4b;
	--ink:#26324d;
	--muted:#5a6580;
	--line:#e6e9f2;
	--bg:#fff;
	--tint:#fbf8f6;
	
	--r:16px;
	--r-sm:10px;
	--shadow:0 6px 20px rgba(15,31,75,.08);
	
	--font-body:"Nunito","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
	--font-heading:var(--font-body);
	--font:var(--font-body);
	--container:1180px;
	

}

*,*::before,*::after{
	box-sizing:border-box
}

html{
	-webkit-text-size-adjust:100%;
	scroll-behavior:smooth
}

@media (prefers-reduced-motion:reduce){
	html{
	scroll-behavior:auto
}
*{
	animation:none!important;
	transition:none!important
}

}

body{
	margin:0;
	font-family:var(--font);
	font-size:17px;
	line-height:1.6;
	color:var(--ink);
	background:var(--bg);
	overflow-x:hidden
}

img,svg{
	max-width:100%;
	height:auto
}

a{
	color:var(--blue-d)
}

a:hover{
	color:var(--pink-d)
}

h1,h2,h3,h4{
	font-family:var(--font);
	color:var(--navy);
	line-height:1.15;
	margin:0 0 .5em;
	font-weight:900
}

h1{
	font-size:clamp(2rem,4.5vw,3.2rem);
	letter-spacing:-.02em
}

h2{
	font-size:clamp(1.4rem,2.6vw,1.9rem);
	letter-spacing:-.01em
}

h3{
	font-size:1.05rem
}

p{
	margin:0 0 1em
}

ul,ol{
	padding-left:1.25em
}

.screen-reader-text{
	position:absolute!important;
	width:1px;
	height:1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap
}

.skip-link:focus{
	position:fixed!important;
	top:8px;
	left:8px;
	width:auto;
	height:auto;
	clip:auto;
	z-index:1000;
	background:#fff;
	color:var(--navy);
	padding:.7em 1em;
	border-radius:8px;
	box-shadow:var(--shadow)
}

:focus-visible{
	outline:3px solid var(--blue);
	outline-offset:2px;
	border-radius:4px
}

.container{
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding:0 20px
}

.container-narrow{
	max-width:820px
}

.icon{
	flex:none;
	vertical-align:-.2em
}

.admin-note{
	background:#fff7d6;
	border:1px dashed #c9a400;
	padding:.5em .8em;
	border-radius:8px;
	font-size:.85rem;
	margin-top:.6em
}

.fine{
	font-size:.85rem;
	color:var(--muted)
}


/* Buttons */
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:.5em;
	padding:.75em 1.3em;
	min-height:44px;
	border-radius:999px;
	border:2px solid transparent;
	font:inherit;
	font-weight:800;
	text-decoration:none;
	cursor:pointer;
	line-height:1.1;
	transition:background .15s,color .15s,border-color .15s
}

.btn-primary{
	background:var(--pink);
	color:#fff
}

.btn-primary:hover{
	background:var(--pink-d);
	color:#fff
}

.btn-outline{
	background:#fff;
	border-color:var(--navy);
	color:var(--navy)
}

.btn-outline:hover{
	background:var(--navy);
	color:#fff
}

.btn-light{
	background:#fff;
	color:var(--navy)
}

.btn-light:hover{
	background:var(--yellow);
	color:var(--navy)
}

.btn-lg{
	padding:.9em 1.6em;
	font-size:1.05rem
}

.btn-sm{
	padding:.55em 1em;
	font-size:.9rem;
	min-height:40px
}

.btn-block{
	display:flex;
	width:100%
}

.btn-row{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	margin:1.2em 0
}


/* Header */
.site-header{
	position:sticky;
	top:0;
	z-index:50;
	background:#fff;
	border-bottom:1px solid var(--line)
}

.header-inner{
	display:flex;
	align-items:center;
	gap:20px;
	min-height:76px;
	padding-top:env(safe-area-inset-top,0)
}

.brand{
	display:flex;
	align-items:center;
	gap:10px;
	text-decoration:none;
	flex:none
}

.brand-emblem{
	width:46px;
	height:auto
}

.brand-logo{
	max-height:56px;
	width:auto
}

.brand-text{
	display:flex;
	flex-direction:column;
	line-height:1
}

.wordmark{
	font-weight:900;
	font-size:1.65rem;
	letter-spacing:-.02em;
	font-style:normal
}

.wm-b{
	color:var(--blue)
}
.wm-b-lt{
	color:#6aa5ff
}
.wm-r{
	color:#ff3b6d
}
.wm-g{
	color:#19d27a
}

.brand-tag{
	font-size:.62rem;
	font-weight:700;
	color:var(--ink);
	margin-top:3px;
	white-space:nowrap
}

.brand-lt .brand-tag{
	color:#dfe6ff
}

.primary-nav{
	display:flex;
	align-items:center;
	gap:14px;
	margin-left:auto
}

.primary-nav .menu{
	display:flex;
	align-items:center;
	gap:2px;
	list-style:none;
	margin:0;
	padding:0
}

.primary-nav .menu>li{
	position:relative;
	display:flex;
	align-items:center
}

.primary-nav a{
	color:var(--navy);
	text-decoration:none;
	font-weight:800;
	font-size:.95rem;
	padding:.55em .8em;
	border-radius:999px;
	display:block
}

.primary-nav .menu>li>a:hover,.primary-nav .current-menu-item>a,.primary-nav .current-menu-ancestor>a{
	background:#ffe3ea;
	color:var(--pink-d)
}

.sub-menu{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	min-width:230px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-sm);
	box-shadow:var(--shadow);
	list-style:none;
	margin:0;
	padding:8px;
	z-index:60
}

.sub-menu a{
	border-radius:8px;
	font-weight:700;
	padding:.55em .8em
}

.sub-menu a:hover{
	background:#eef4ff;
	color:var(--blue-d)
}

.is-open>.sub-menu{
	display:block
}

.header-actions{
	display:flex;
	gap:4px;
	align-items:center
}

.icon-btn{
	background:none;
	border:0;
	width:44px;
	height:44px;
	border-radius:50%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	color:var(--navy);
	cursor:pointer
}

.icon-btn:hover{
	background:#eef4ff
}

.nav-toggle{
	display:none
}

.header-search{
	border-top:1px solid var(--line);
	background:var(--tint);
	padding:12px 0
}

.header-search[hidden]{
	display:none
}

.search-form{
	display:flex;
	max-width:560px;
	margin:0 auto
}

.search-form input[type=search]{
	flex:1;
	min-width:0;
	font:inherit;
	padding:.75em 1.1em;
	border:2px solid var(--line);
	border-right:0;
	border-radius:999px 0 0 999px;
	background:#fff;
	color:var(--ink)
}

.search-submit{
	border:2px solid var(--navy);
	background:var(--navy);
	color:#fff;
	padding:0 1.1em;
	border-radius:0 999px 999px 0;
	cursor:pointer;
	min-width:52px
}

@media (hover:hover) and (pointer:fine) and (min-width:1001px){
	
	.menu>li:hover>.sub-menu,.menu>li:focus-within>.sub-menu{
	display:block
}


}

@media (max-width:1000px){
	
	.nav-toggle{
	display:inline-flex
}

	.primary-nav{
	display:none;
	position:absolute;
	left:0;
	right:0;
	top:100%;
	background:#fff;
	border-bottom:1px solid var(--line);
	box-shadow:var(--shadow);
	flex-direction:column;
	align-items:stretch;
	gap:10px;
	padding:12px 20px 20px;
	max-height:calc(100vh - 80px);
	overflow:auto;
	margin:0
}

	.nav-open .primary-nav{
	display:flex
}

	.primary-nav .menu{
	flex-direction:column;
	align-items:stretch
}

	.primary-nav .menu>li{
	flex-wrap:wrap
}

	.primary-nav .menu>li>a{
	flex:1;
	padding:.85em .8em
}

	.sub-menu{
	position:static;
	width:100%;
	box-shadow:none;
	border:0;
	border-left:3px solid var(--line);
	border-radius:0;
	margin:0 0 6px 12px;
	padding:0 0 0 6px;
	min-width:0
}

	.nav-cta{
	justify-content:center
}

	.header-actions{
	margin-left:auto
}

	.primary-nav{
	margin-left:0
}


}

@media (max-width:480px){
	.wordmark{
	font-size:1.3rem
}
.brand-tag{
	font-size:.55rem
}
.brand-emblem{
	width:38px
}

}


/* Hero */
.hero{
	background:linear-gradient(135deg,#fff3ef 0%,#fff 55%,#eef4ff 100%);
	overflow:hidden
}

.hero-grid{
	display:grid;
	grid-template-columns:1.1fr .9fr;
	gap:30px;
	align-items:center;
	padding-top:44px;
	padding-bottom:44px
}

.eyebrow{
	font-weight:800;
	color:var(--muted);
	margin:0 0 .6em;
	font-size:.95rem
}

.eyebrow a{
	color:var(--pink-d);
	text-decoration:none
}

.hero h1{
	font-size:clamp(2.4rem,6vw,4.4rem);
	margin-bottom:.35em
}

.lead{
	font-size:1.2rem;
	max-width:34em
}

.hero-chips{
	display:flex;
	flex-wrap:wrap;
	gap:18px;
	list-style:none;
	padding:0;
	margin:1.2em 0 0;
	font-weight:700;
	font-size:.92rem
}

.hero-chips li{
	display:flex;
	align-items:center;
	gap:10px
}

.chip-ico,.why-ico{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:46px;
	height:46px;
	border-radius:50%;
	font-size:1.3rem
}

.c1{
	background:#ffe3ea
}
.c2{
	background:#fff0c9
}
.c3{
	background:#dff7e9
}

.hero-art{
	position:relative;
	min-height:380px
}

.sheet{
	position:absolute;
	background:#fff;
	border:2px solid #cfd6e8;
	border-radius:6px;
	box-shadow:var(--shadow);
	padding:18px;
	font-weight:900;
	color:var(--navy);
	display:flex;
	flex-direction:column;
	gap:10px
}

.sheet b{
	font-size:1.4rem;
	line-height:1
}

.sheet b i{
	font-style:normal;
	color:var(--blue)
}

.sheet span{
	height:2px;
	background:#cfd6e8;
	display:block
}

.sheet u{
	text-decoration:none;
	font-size:.8rem;
	font-weight:700;
	color:var(--muted);
	border-bottom:2px solid #cfd6e8
}

.sheet em{
	font-style:normal;
	color:var(--orange);
	letter-spacing:.2em
}

.sheet-a{
	width:46%;
	height:300px;
	right:2%;
	top:40px;
	transform:rotate(7deg);
	background:#fffdf6
}

.sheet-b{
	width:56%;
	height:340px;
	left:4%;
	top:10px;
	transform:rotate(-5deg)
}

.pencils{
	position:absolute;
	right:6%;
	bottom:0;
	display:flex;
	gap:6px;
	align-items:flex-end
}

.pencils i{
	display:block;
	width:14px;
	border-radius:7px 7px 2px 2px
}

.pencils i:nth-child(1){
	height:90px;
	background:var(--pink)
}
.pencils i:nth-child(2){
	height:110px;
	background:var(--orange)
}
.pencils i:nth-child(3){
	height:80px;
	background:var(--yellow)
}
.pencils i:nth-child(4){
	height:100px;
	background:var(--green)
}
.pencils i:nth-child(5){
	height:85px;
	background:var(--blue)
}

@media (max-width:860px){
	.hero-grid{
	grid-template-columns:1fr;
	padding-top:28px
}
.hero-art{
	min-height:300px;
	order:2
}

}


/* Sections */
.section{
	padding:44px 0
}

.section-tint{
	background:var(--tint)
}

.section-head{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:16px;
	flex-wrap:wrap;
	margin-bottom:20px
}

.section-head-center{
	justify-content:center;
	text-align:center
}

.section-head h2{
	margin:0
}

.rainbow{
	position:relative;
	padding-bottom:.45em;
	margin-bottom:.9em
}

.rainbow::after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:64px;
	height:5px;
	border-radius:5px;
	background:linear-gradient(90deg,var(--blue) 0 25%,var(--green) 0 50%,var(--yellow) 0 75%,var(--pink) 0)
}

.section-head-center .rainbow::after{
	left:50%;
	transform:translateX(-50%)
}

.more{
	font-weight:800;
	color:var(--blue-d);
	text-decoration:none;
	border-bottom:2px solid var(--blue);
	display:inline-flex;
	align-items:center;
	gap:4px
}

main section+section{
	margin-top:12px
}


/* Category tiles */
.tiles{
	list-style:none;
	margin:0 0 22px;
	padding:0;
	display:grid;
	grid-template-columns:repeat(8,1fr);
	gap:12px
}

.tile{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:8px;
	padding:16px 8px 12px;
	border-radius:var(--r);
	text-decoration:none;
	color:var(--navy);
	font-weight:800;
	text-align:center;
	height:100%;
	background:#fdeaf0;
	transition:transform .15s
}

.tile:hover{
	transform:translateY(-3px);
	color:var(--navy)
}

.tiles li:nth-child(8n+1) .tile{
	background:#fde6ea
}
.tiles li:nth-child(8n+2) .tile{
	background:#e3f0ff
}
.tiles li:nth-child(8n+3) .tile{
	background:#fff1d4
}
.tiles li:nth-child(8n+4) .tile{
	background:#fde6f2
}

.tiles li:nth-child(8n+5) .tile{
	background:#e1f7ea
}
.tiles li:nth-child(8n+6) .tile{
	background:#ece6ff
}
.tiles li:nth-child(8n+7) .tile{
	background:#ffe9d6
}
.tiles li:nth-child(8n+8) .tile{
	background:#e0f4fb
}

.tile-emoji{
	font-size:2.6rem;
	line-height:1
}

.tile-name{
	font-size:.95rem;
	line-height:1.2
}

.tile-go{
	width:28px;
	height:28px;
	border-radius:50%;
	background:#fff;
	display:inline-flex;
	align-items:center;
	justify-content:center
}

.tiles-wide{
	grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
	margin-bottom:34px
}

.tile-row{
	flex-direction:column;
	align-items:flex-start;
	text-align:left;
	padding:18px
}

.tile-row .tile-emoji{
	font-size:2rem
}

.tile-desc{
	font-weight:600;
	font-size:.88rem;
	color:var(--ink)
}

@media (max-width:1000px){
	.tiles{
	grid-template-columns:repeat(4,1fr)
}

}

@media (max-width:520px){
	.tiles{
	grid-template-columns:repeat(2,1fr)
}
.tiles-wide{
	grid-template-columns:1fr
}

}


/* Pills */
.pills{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	list-style:none;
	padding:0;
	margin:0 0 22px
}

.pills a{
	display:inline-block;
	padding:.45em 1em;
	border-radius:999px;
	background:#eef4ff;
	color:var(--blue-d);
	font-weight:800;
	text-decoration:none;
	font-size:.92rem;
	min-height:36px
}

.pills a:hover{
	background:var(--blue);
	color:#fff
}

.pills-sm a{
	font-size:.82rem;
	padding:.3em .8em;
	min-height:0
}

.pills-center{
	justify-content:center
}


/* Grids & cards */
.grid{
	display:grid;
	gap:20px;
	margin-bottom:28px
}

.grid-products{
	grid-template-columns:repeat(auto-fill,minmax(172px,1fr))
}

.grid-posts{
	grid-template-columns:repeat(auto-fill,minmax(280px,1fr))
}

.card{
	position:relative;
	display:flex;
	flex-direction:column;
	background:#fff;
	border-radius:var(--r-sm);
	overflow:hidden;
	border:1px solid var(--line);
	transition:box-shadow .15s,transform .15s
}

.card:hover,.card:focus-within{
	box-shadow:var(--shadow);
	transform:translateY(-2px)
}

.card-media{
	position:relative;
	display:block;
	aspect-ratio:1/1;
	background:#f1f4fb;
	overflow:hidden
}

.card-media-wide{
	aspect-ratio:16/9
}

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

.ph{
	display:flex;
	width:100%;
	height:100%;
	align-items:center;
	justify-content:center;
	font-size:3rem;
	color:#b9c4e4;
	background:linear-gradient(135deg,#eef4ff,#fdeaf0)
}

.ph-lg{
	aspect-ratio:1/1;
	font-size:6rem
}

.badge{
	position:absolute;
	top:8px;
	left:8px;
	background:var(--green-d);
	color:#fff;
	font-size:.75rem;
	font-weight:900;
	padding:.2em .7em;
	border-radius:999px
}

.card-body{
	padding:12px 14px 14px
}

.card-title{
	margin:0 0 .25em;
	font-size:1rem;
	line-height:1.25
}

.card-title a{
	color:var(--navy);
	text-decoration:none
}

.card-title a::after{
	content:"";
	position:absolute;
	inset:0
}

.card-meta{
	margin:0;
	color:var(--muted);
	font-size:.88rem
}

.card-meta a{
	color:var(--muted)
}

.card-excerpt{
	margin:.4em 0 0;
	font-size:.95rem
}


/* Newsletter band */
.band{
	margin:30px 0
}

.band-inner{
	display:flex;
	gap:24px;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	padding:30px;
	background:linear-gradient(100deg,#fff1d6,#ffe3ea 50%,#e9ddff);
	border-radius:22px
}

.band-copy{
	flex:1 1 320px
}

.band-copy h2{
	margin-bottom:.2em
}

.band-copy p{
	margin:0
}

.band-form{
	flex:1 1 360px;
	display:flex;
	flex-wrap:wrap;
	gap:10px
}

.band-form input{
	flex:1 1 200px;
	min-width:0;
	font:inherit;
	padding:.8em 1.1em;
	border:2px solid #fff;
	border-radius:999px;
	background:#fff
}

.band-form .fine{
	flex-basis:100%;
	margin:0
}


/* Why */
.why{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:24px
}

.why li{
	text-align:center
}

.why h3{
	margin:.6em 0 .2em
}

.why p{
	color:var(--muted);
	margin:0;
	font-size:.95rem
}

.why-ico{
	width:64px;
	height:64px;
	font-size:1.8rem
}

.w1{
	background:#ffe3ea
}
.w2{
	background:#dff7e9
}
.w3{
	background:#ece6ff
}
.w4{
	background:#e3f0ff
}

@media (max-width:900px){
	.why{
	grid-template-columns:repeat(2,1fr)
}

}

@media (max-width:480px){
	.why{
	grid-template-columns:1fr
}

}


/* Page heads, breadcrumbs, content */
.site-main{
	min-height:50vh
}

.page-head{
	padding:10px 0 12px
}

.page-head .intro{
	max-width:46em;
	font-size:1.1rem
}

.breadcrumbs{
	padding:16px 0 6px;
	font-size:.88rem
}

.breadcrumbs ol{
	display:flex;
	flex-wrap:wrap;
	gap:4px;
	list-style:none;
	margin:0;
	padding:0
}

.breadcrumbs li+li::before{
content:"\203A";
	margin-right:4px;
	color:var(--muted)
}

.breadcrumbs a{
	color:var(--blue-d)
}

.breadcrumbs [aria-current]{
	color:var(--muted)
}

.entry-content{
	font-size:1.06rem
}

.entry-content h2{
	margin-top:1.4em
}

.entry-content img{
	border-radius:var(--r-sm)
}

.entry-content table{
	border-collapse:collapse;
	width:100%;
	display:block;
	overflow-x:auto
}

.entry-content th,.entry-content td{
	border:1px solid var(--line);
	padding:.5em .7em;
	text-align:left
}

.entry-content blockquote{
	margin:1.2em 0;
	padding:.6em 1.2em;
	border-left:5px solid var(--yellow);
	background:var(--tint)
}

.post-hero{
	margin:0 0 1.4em
}

.post-hero img{
	width:100%;
	border-radius:var(--r)
}

.bottom-copy{
	margin:30px 0;
	padding:24px;
	background:var(--tint);
	border-radius:var(--r)
}

.empty{
	text-align:center;
	padding:40px 20px;
	background:var(--tint);
	border-radius:var(--r);
	margin:20px 0
}

.empty .btn-row{
	justify-content:center
}

.navigation.pagination{
	margin:10px 0 30px
}

.nav-links{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	justify-content:center
}

.page-numbers{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:44px;
	min-height:44px;
	padding:0 14px;
	border-radius:999px;
	border:2px solid var(--line);
	text-decoration:none;
	font-weight:800;
	color:var(--navy)
}

.page-numbers.current,.page-numbers:hover{
	background:var(--navy);
	border-color:var(--navy);
	color:#fff
}


/* Product page */
.product-top{
	display:grid;
	grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
	gap:36px;
	align-items:start;
	margin:10px 0 30px
}

.gallery-main{
	background:#f4f6fb;
	border-radius:var(--r);
	overflow:hidden;
	border:1px solid var(--line)
}

.gallery-main img{
	display:block;
	width:100%;
	height:auto
}

.gallery-thumbs{
	display:flex;
	gap:8px;
	list-style:none;
	padding:0;
	margin:10px 0 0;
	flex-wrap:wrap
}

.thumb{
	border:2px solid var(--line);
	border-radius:10px;
	background:#fff;
	padding:0;
	width:72px;
	height:72px;
	overflow:hidden;
	cursor:pointer
}

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

.thumb.is-active{
	border-color:var(--blue)
}

.product-summary h1{
	font-size:clamp(1.7rem,3.4vw,2.5rem)
}

.product-summary .intro{
	font-size:1.1rem
}

.price{
	font-weight:800;
	color:var(--navy)
}

.buy-box{
	margin:1.2em 0;
	padding:18px;
	border:2px solid var(--pink);
	border-radius:var(--r);
	background:#fff6f8
}

.buy-box .buy-btn{
	width:100%
}

.buy-box .fine{
	margin:.6em 0 0;
	text-align:center
}

.product-body{
	display:grid;
	grid-template-columns:minmax(0,1fr) 320px;
	gap:36px;
	align-items:start;
	margin-bottom:30px
}

.product-facts{
	border:1px solid var(--line);
	border-radius:var(--r);
	padding:20px;
	background:var(--tint)
}

.product-facts h2{
	font-size:1.15rem
}

.product-facts dt{
	font-weight:900;
	color:var(--navy);
	margin-top:.7em
}

.product-facts dd{
	margin:0
}

.product-facts .buy-btn{
	margin-top:1em
}

.checks{
	list-style:none;
	padding:0
}

.checks li{
	position:relative;
	padding:.35em 0 .35em 1.9em
}

.checks li::before{
content:"\2713";
	position:absolute;
	left:0;
	top:.3em;
	width:1.4em;
	height:1.4em;
	border-radius:50%;
	background:#dff7e9;
	color:var(--green-d);
	font-weight:900;
	text-align:center;
	line-height:1.4em;
	font-size:.85em
}

.buy-bar{
	display:none
}

@media (max-width:860px){
	
	.product-top,.product-body{
	grid-template-columns:1fr;
	gap:22px
}

	.buy-bar{
	display:flex;
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:40;
	align-items:center;
	gap:12px;
	padding:10px 16px calc(10px + env(safe-area-inset-bottom,0));
	background:#fff;
	border-top:1px solid var(--line);
	box-shadow:0 -4px 14px rgba(15,31,75,.1)
}

	.buy-bar-title{
	margin:0;
	flex:1;
	font-weight:800;
	font-size:.9rem;
	color:var(--navy);
	line-height:1.2
}

	.buy-bar .admin-note{
	display:none
}

	body.has-buy-bar{
	padding-bottom:78px
}


}


/* Contact form */
.contact-form label{
	display:block;
	font-weight:800;
	margin-bottom:.3em
}

.contact-form input,.contact-form textarea{
	width:100%;
	font:inherit;
	padding:.7em 1em;
	border:2px solid var(--line);
	border-radius:12px
}

.contact-form .hp{
	position:absolute;
	left:-9999px
}

.notice{
	padding:.8em 1em;
	border-radius:10px;
	font-weight:700
}

.notice.ok{
	background:#dff7e9
}
.notice.err{
	background:#ffe3ea
}


/* Footer */
.site-footer{
	background:var(--navy);
	color:#dfe6ff;
	margin-top:50px
}

.site-footer a{
	color:#dfe6ff;
	text-decoration:none
}

.site-footer a:hover{
	color:#fff;
	text-decoration:underline
}

.footer-grid{
	display:grid;
	grid-template-columns:1.5fr 1fr 1fr 1.2fr;
	gap:30px;
	padding-top:44px;
	padding-bottom:30px
}

.footer-col h2{
	color:#fff;
	font-size:1rem;
	margin-bottom:.8em
}

.footer-col > ul.ech-footer-links,.legal{
	list-style:none;
	margin:0;
	padding:0
}

.footer-col > ul.ech-footer-links > li{
	margin:.35em 0
}

.footer-brand p{
	margin:1em 0;
	font-size:.95rem
}

.social{
	display:flex;
	gap:10px;
	list-style:none;
	padding:0;
	margin:0
}

.social a{
	display:inline-flex;
	width:44px;
	height:44px;
	border-radius:50%;
	background:#fff;
	color:var(--navy)!important;
	align-items:center;
	justify-content:center
}


/* Accessible theme refinements and required layouts. */
:root{
	--container:1180px;
	--font-body:"Nunito","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
	--font-heading:var(--font-body)
}

body{
	font-family:var(--font-body)
}

h1,h2,h3,h4,button,input,select,textarea{
	font-family:var(--font-body)
}

.container{
	max-width:var(--container)
}

.header-inner{
	height:76px;
	min-height:76px
}

.brand-logo{
	display:block;
	width:auto;
	height:auto;
	max-width:255px;
	max-height:56px;
	object-fit:contain
}

.nav-parent{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	min-height:44px;
	padding:8px 12px;
	border:0;
	border-radius:999px;
	background:transparent;
	color:var(--navy);
	font:600 16px/1.2 var(--font-body);
	cursor:pointer
}

.nav-parent:hover,.nav-parent:focus-visible,.current-menu-item>a,.current-menu-ancestor>.nav-parent{
	background:#ffe3ea;
	color:var(--pink-d)
}

.primary-nav .menu>li>a{
	font-size:16px;
	font-weight:600;
	min-height:44px;
	display:flex;
	align-items:center
}

.sub-menu{
	min-width:240px;
	overflow:visible
}

.sub-menu a{
	min-height:44px;
	display:flex;
	align-items:center;
	font-size:15px
}

.site-header,.header-inner,.primary-nav{
	overflow:visible
}

.announcement{
	background:var(--navy);
	color:#fff;
	text-align:center;
	padding:7px 0;
	font-weight:700
}

.hero{
	background:linear-gradient(135deg,#fff3ef 0%,#fff 55%,#eef4ff 100%)
}

.hero h1{
	font-size:clamp(2.2rem,5vw,3.6rem)
}

.hero-art{
	position:relative;
	min-height:340px
}

.sheet{
	position:absolute;
	width:58%;
	height:260px;
	right:5%;
	top:30px;
	border:2px solid #cfd6e8;
	border-radius:8px;
	background:#fff;
	box-shadow:var(--shadow);
	padding:24px;
	color:var(--navy)
}

.sheet-b{
	right:34%;
	top:74px;
	transform:rotate(-8deg);
	background:#fffdf6
}

.sheet-a{
	transform:rotate(7deg)
}

.category-grid,.post-grid{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:20px
}

/* Blog and post archive cards only; shared post cards keep their existing layout. */
.post-grid--cards{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.post-card--archive{display:flex;min-width:0;height:100%;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}
.post-card-image{display:block;overflow:hidden;aspect-ratio:16/9;background:#f1f4f9}
.post-card-image img,.post-card-image-placeholder{display:block;width:100%;height:100%;object-fit:cover}
.post-card-image-placeholder{background:linear-gradient(135deg,#eef3fa,#dfe7f2)}
.post-card-content{display:flex;min-width:0;flex:1;flex-direction:column;padding:18px}
.post-card-categories{margin:0 0 8px;color:var(--muted);font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.post-card-categories a{color:inherit;text-decoration:none}
.post-card-categories a:hover,.post-card-categories a:focus-visible{text-decoration:underline}
.post-card-title{margin:0 0 10px;font-size:1.3rem;line-height:1.25}
.post-card-title a{color:var(--navy);text-decoration:none}
.post-card-title a:hover,.post-card-title a:focus-visible{text-decoration:underline}
.post-card-excerpt{margin:0 0 16px;color:var(--muted);line-height:1.55}
.post-card-read-more{align-self:flex-start;margin:0 0 14px;color:var(--blue-d);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.post-card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:8px;color:var(--muted);font-size:.83rem}
.post-card-share{display:flex;align-items:center;gap:2px}
.post-card-share a{display:grid;width:38px;height:38px;place-items:center;border-radius:8px;color:var(--navy)}
.post-card-share svg{width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.post-card-share .share-link--pinterest{color:#e60023}
.post-card-share .share-link--facebook{color:#1877f2}
.post-card-share .share-link--x{color:#111}
.post-card-share .share-link--email{color:#52627f}
.post-card-share .share-link--email svg{fill:none;stroke:currentColor}
.post-card-share a:focus-visible,.post-card-image:focus-visible{outline:3px solid #1575e8;outline-offset:2px}

.resource-layout{
	display:grid;
	grid-template-columns:minmax(0,1fr) 300px;
	gap:32px;
	align-items:start
}

.buy-box{
	position:sticky;
	top:96px
}

.footer-grid{
	display:grid;
	grid-template-columns:1.3fr 1fr 1fr 1fr;
	gap:32px;
	padding-top:56px;
	padding-bottom:38px
}

.footer-bottom{
	border-top:1px solid rgba(255,255,255,.12);
	padding-top:18px;
	padding-bottom:24px;
	display:flex;
	justify-content:space-between;
	gap:16px
}

.footer-bottom nav{
	display:flex;
	gap:18px;
	flex-wrap:wrap
}

.brand-footer .brand-logo{
	max-width:210px;
	max-height:85px;
	filter:none
}

.contact-circle{
	width:44px;
	height:44px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:#fff;
	color:var(--navy);
	text-decoration:none
}

.search-dialog{
	width:min(760px,calc(100% - 32px));
	border:0;
	border-radius:var(--r);
	padding:24px;
	box-shadow:0 12px 48px rgba(15,31,75,.22)
}

.search-dialog::backdrop{
	background:rgba(15,31,75,.45)
}

.search-dialog-inner{
	position:relative;
	padding-top:24px
}

.search-close{
	position:absolute;
	right:0;
	top:0;
	font-size:26px
}

.search-dialog .search-form{
	max-width:none
}

.search-dialog input[type=search]{
	font-size:18px
}

.search-chips{
	display:flex;
	flex-wrap:wrap;
	gap:8px
}

.search-chips a{
	display:inline-flex;
	align-items:center;
	min-height:40px;
	padding:7px 14px;
	border-radius:999px;
	background:#eef4ff;
	text-decoration:none
}

.direct-answer{
	padding:18px 22px;
	border-left:4px solid var(--pink);
	background:#fff6f8;
	border-radius:0 var(--r-sm) var(--r-sm) 0;
	font-size:1.08rem
}

.table-scroll{
	overflow-x:auto;
	margin:1.5rem 0
}

.table-scroll table{
	border-collapse:collapse;
	min-width:560px;
	width:100%
}

.table-scroll caption{
	text-align:left;
	font-weight:800;
	margin-bottom:8px
}

.table-scroll th,.table-scroll td{
	padding:12px;
	border:1px solid var(--line);
	text-align:left
}

.hp-field{
	position:absolute!important;
	left:-10000px!important
}

.menu-locked{
	overflow:hidden
}

.search-suggestions{
	display:grid;
	gap:4px;
	margin:8px 0
}

.search-suggestions a{
	padding:10px;
	border-radius:8px;
	text-decoration:none
}

.search-suggestions a:hover,.search-suggestions a:focus{
	background:#eef4ff
}

@media(max-width:1100px){
	.category-grid,.post-grid{
	grid-template-columns:repeat(2,minmax(0,1fr))
}
.post-grid--cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.primary-nav .menu>li>a,.nav-parent{
	font-size:14px;
	padding-left:7px;
	padding-right:7px
}

}

@media(max-width:900px){
	
	.header-inner{
	height:64px;
	min-height:64px
}

	.brand-logo{
	max-width:180px;
	max-height:48px
}

	.hero-grid{
	grid-template-columns:1fr;
	padding-top:34px;
	padding-bottom:34px
}

	.hero-art{
	min-height:220px
}

	.resource-layout{
	grid-template-columns:1fr
}

	.buy-box{
	position:static
}

	.footer-grid{
	grid-template-columns:repeat(2,minmax(0,1fr))
}


}

@media(max-width:600px){
	.category-grid,.post-grid{
	grid-template-columns:1fr
}

.post-grid--cards{grid-template-columns:minmax(0,1fr)}
.footer-grid{
	grid-template-columns:1fr
}
.footer-bottom{
	display:block
}
.footer-bottom nav{
	margin-top:12px
}
.hero-art{
	display:none
}
.search-dialog{
	position:fixed;
	inset:0;
	width:100%;
	height:100%;
	max-width:none;
	max-height:none;
	margin:0;
	border-radius:0
}
.search-dialog-inner{
	padding-top:34px
}

}

.social a:hover{
	background:var(--yellow);
	text-decoration:none!important
}

.footer-bottom{
	border-top:1px solid rgba(255,255,255,.14);
	padding:16px 0;
	font-size:.88rem
}

.footer-bottom .container{
	display:flex;
	flex-wrap:wrap;
	gap:10px 24px;
	justify-content:space-between
}

.footer-bottom p{
	margin:0
}

.legal{
	display:flex;
	gap:18px;
	flex-wrap:wrap
}

@media (max-width:900px){
	.footer-grid{
	grid-template-columns:1fr 1fr
}

}

@media (max-width:520px){
	.footer-grid{
	grid-template-columns:1fr
}

}

@media print{
	.site-header,.site-footer,.buy-bar,.band{
	display:none
}

/* v5 logo lockup, dropdowns, search dialog and footer social controls */
.brand-emblem{width:46px;height:56px;object-fit:contain;flex:none}
.brand{gap:9px;min-width:0}
.brand-text{min-width:0}
.wordmark{font-size:1.62rem;white-space:nowrap;letter-spacing:-.035em}
.wm-b{background:linear-gradient(100deg,#2b7bff,#63a4ff);color:transparent;background-clip:text;-webkit-background-clip:text}
.wm-r{background:linear-gradient(100deg,#f12e83,#db2a5a);color:transparent;background-clip:text;-webkit-background-clip:text}
.wm-g{background:linear-gradient(100deg,#09b96b,#44d27e);color:transparent;background-clip:text;-webkit-background-clip:text}
.brand-tag{font-size:.62rem;font-weight:700;color:var(--ink);margin-top:3px;white-space:nowrap}
.brand-lt .brand-tag{color:#dfe6ff}
.brand-footer{max-width:255px}
.brand-footer .wordmark{font-size:1.55rem}
.site-header,.header-inner,.primary-nav{overflow:visible}
.primary-nav .menu>li>.nav-parent{display:flex;align-items:center;justify-content:center;gap:0;margin:0;border:0;background:none;color:var(--navy);font:600 16px/1.2 var(--font-body);padding:.55em .8em;min-height:44px;cursor:pointer;border-radius:999px;white-space:nowrap}
.primary-nav .menu>li>.nav-parent:hover,.primary-nav .menu>li.is-open>.nav-parent{background:#ffe3ea;color:var(--pink-d)}
@media (hover:hover) and (pointer:fine) and (min-width:1001px){.primary-nav .menu>li:hover>.sub-menu,.primary-nav .menu>li:focus-within>.sub-menu{display:block}}
.primary-nav .menu>li.is-open>.sub-menu{display:block}
.sub-menu{min-width:240px;z-index:100;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(15,31,75,.17)}
.footer-social{display:flex;gap:12px;flex-wrap:wrap;list-style:none;padding:0;margin:1em 0 0}
.footer-social li{padding:0;margin:0}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fff;color:#0b1f4b;border:2px solid transparent;transition:background .15s,color .15s,transform .15s}
.footer-social a:hover{background:var(--yellow);color:#0b1f4b;transform:translateY(-2px)}
.footer-social a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.search-dialog{width:min(640px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);box-sizing:border-box;padding:0;border:0;border-radius:20px;overflow-x:hidden;overflow-y:auto;margin:auto;background:#fff;color:var(--ink);box-shadow:0 24px 80px rgba(5,15,40,.32)}
.search-dialog::backdrop{background:rgba(6,18,48,.62);backdrop-filter:blur(5px)}
.search-dialog-inner,.search-dialog-inner *{box-sizing:border-box;min-width:0}
.search-dialog-inner{position:relative;padding:24px;overflow-x:hidden}
.search-dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.search-dialog-heading h2{font-size:1.55rem;margin:0 0 20px;text-align:left;overflow-wrap:anywhere}
.search-close{flex:none;background:#f2f4f9;font-size:1.5rem;line-height:1}
.search-dialog .search-form{display:flex;width:100%;max-width:none;margin:0;gap:10px}
.search-dialog .search-form input[type=search]{height:52px;min-width:0;flex:1;border:2px solid var(--line);border-radius:12px;padding:0 14px;font:inherit;font-size:18px}
.search-dialog .search-submit{width:52px;height:52px;min-width:52px;padding:0;border:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--pink);color:#fff}
.search-popular-label{margin:24px 0 10px;font-weight:800;color:var(--navy)}
.search-chips{display:flex;flex-wrap:wrap;gap:8px;max-width:100%}
.search-chips a{display:inline-flex;max-width:100%;padding:7px 12px;border-radius:999px;background:#eef4ff;text-decoration:none;font-weight:700;white-space:normal;overflow-wrap:anywhere}
.search-suggestions{display:grid;gap:4px;max-height:240px;overflow:auto}
.search-suggestions:not(:empty){margin-top:12px}
.search-suggestions a{padding:9px 12px;border-radius:8px;text-decoration:none;overflow-wrap:anywhere}
.search-suggestions a:hover,.search-suggestions a:focus{background:#eef4ff}
body.dialog-open{overflow:hidden}
.account-link{flex:none;text-decoration:none}
@media(max-width:1000px){.primary-nav .menu>li{display:flex;flex-wrap:wrap}.primary-nav .menu>li>.nav-parent{justify-content:space-between;width:100%;text-align:left;padding:.75em .8em}.primary-nav .menu>li>a{flex:1}.primary-nav .menu>li>.sub-menu{display:none;position:static;width:100%;min-width:0;box-shadow:none;margin:0 0 8px 12px;border:0;border-left:3px solid var(--line);border-radius:0;padding:0 0 0 8px}.primary-nav .menu>li.is-open>.sub-menu{display:block}.primary-nav{position:absolute;top:100%;left:0;right:0;max-height:calc(100dvh - 100px);overflow-y:auto;z-index:90}.site-header{position:relative;z-index:91}.footer-social{gap:12px}}
@media(max-width:600px){.search-dialog{position:fixed;inset:16px 16px auto;width:auto;max-width:none;max-height:calc(100dvh - 32px);margin:0}.search-dialog-inner{padding:20px}.search-dialog-heading h2{font-size:1.3rem}.brand-emblem{width:38px;height:48px}.wordmark,.brand-footer .wordmark{font-size:1.16rem}.brand-tag{font-size:.5rem}}

}



@media (min-width:1024px){.post-grid--cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:601px) and (max-width:1023px){.post-grid--cards{grid-template-columns:repeat(2,minmax(0,1fr))}}