/* Easy Ventory blog styles (shared by blog.html and blog-article.html) */
:root{
	--ink:#0d1b2e;
	--navy:#0f2f5c;
	--blue:#1b4a8f;
	--mint:#2fdf84;
	--rose:#dc7094;
	--paper:#f6f8fb;
	--muted:#5b6b80;
	--line:#e3e9f1;
	--body:#24364f;
	--font:"Avenir Next","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif
}

*{
	box-sizing:border-box;
	margin:0;
	padding:0
}

html{
	scroll-behavior:smooth
}

body{
	font-family:var(--font);
	color:var(--ink);
	background:var(--paper);
	line-height:1.55;
	-webkit-font-smoothing:antialiased
}

a{
	color:inherit
}

img{
	max-width:100%;
	display:block
}

:focus-visible{
	outline:3px solid var(--mint);
	outline-offset:3px;
	border-radius:8px
}

.wrap{
	width:min(1140px,92%);
	margin-inline:auto
}


/* header */
.hero{
	color:#fff;
	padding-bottom:6rem;
	border-radius:0 0 48px 48px;
	background:
	radial-gradient(700px 400px at 90% 10%,rgba(47,223,132,.18),transparent 60%),
	radial-gradient(600px 400px at 0% 100%,rgba(220,112,148,.14),transparent 60%),
	linear-gradient(160deg,#0a2347,var(--navy) 45%,var(--blue))
}

.logo{
	font-weight:800;
	font-size:1.3rem;
	letter-spacing:-.02em;
	text-decoration:none;
	display:flex;
	align-items:center;
	gap:.6rem
}

.logo i{
	width:34px;
	height:34px;
	border-radius:10px;
	background:var(--mint);
	display:grid;
	place-items:center;
	color:#04261a;
	font-style:normal
}

h1{
	font-size:clamp(2.4rem,5.5vw,4rem);
	line-height:1.03;
	letter-spacing:-.035em;
	margin-top:2.5rem;
	max-width:16ch
}

.sub{
	margin-top:1.1rem;
	color:#cfdcf0;
	font-size:1.2rem;
	max-width:46ch
}


/* search + category chips */
.search{
	margin-top:1.8rem;
	display:flex;
	max-width:460px;
	background:#fff;
	border-radius:999px;
	padding:.35rem;
	box-shadow:0 20px 40px -20px rgba(0,0,0,.4)
}

.search input{
	flex:1;
	min-width:0;
	border:0;
	background:none;
	font:inherit;
	color:var(--ink);
	padding:.6rem 1.1rem;
	outline:none
}

.search button{
	border:0;
	border-radius:999px;
	background:var(--navy);
	color:#fff;
	font:inherit;
	font-weight:700;
	padding:.6rem 1.3rem;
	cursor:pointer
}

.chips{
	margin-top:1.4rem;
	display:flex;
	flex-wrap:wrap;
	gap:.5rem
}

.chips a{
	text-decoration:none;
	font-size:.9rem;
	font-weight:600;
	padding:.4rem 1rem;
	border-radius:999px;
	background:rgba(255,255,255,.1);
	border:1px solid rgba(255,255,255,.2)
}

.chips a:hover{
	background:rgba(255,255,255,.2)
}

.chips a[aria-current]{
	background:var(--mint);
	border-color:var(--mint);
	color:#04261a
}


/* covers (swap for <img> when a post has a cover image) */
.cover{
	position:relative;
	display:block;
	overflow:hidden;
	aspect-ratio:16/10;
	border-radius:22px;
	background:var(--navy)
}

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

.cover::before,.cover::after{
	content:"";
	position:absolute;
	border-radius:50%;
	background:rgba(255,255,255,.13)
}

.cover::before{
	width:70%;
	aspect-ratio:1;
	right:-18%;
	top:-30%
}

.cover::after{
	width:38%;
	aspect-ratio:1;
	left:-8%;
	bottom:-24%
}

.cover .glyph{
	position:absolute;
	inset:0;
	display:grid;
	place-items:center;
	font-family:"Courier New",ui-monospace,monospace;
	font-weight:700;
	font-size:clamp(1.3rem,3vw,2rem);
	color:#fff;
	text-align:center;
	padding:1rem;
	z-index:1;
	letter-spacing:-.02em
}

[data-cat=stock]{
	background:linear-gradient(135deg,#1b4a8f,#0f2f5c)
}

[data-cat=tips]{
	background:linear-gradient(135deg,#2fdf84,#0b8a55)
}

[data-cat=privacy]{
	background:linear-gradient(135deg,#b79cf0,#6b4fc2)
}

[data-cat=receipts]{
	background:linear-gradient(135deg,#e88aa9,#a3335a)
}

[data-cat=compare]{
	background:linear-gradient(135deg,#f5b942,#c97b0a)
}

.tag{
	display:inline-block;
	font-size:.78rem;
	font-weight:700;
	letter-spacing:.03em;
	text-transform:uppercase;
	text-decoration:none;
	color:var(--blue);
	background:#eaf1fb;
	padding:.25rem .75rem;
	border-radius:999px
}

.meta{
	font-size:.88rem;
	color:var(--muted);
	display:flex;
	flex-wrap:wrap;
	gap:.3rem .8rem;
	align-items:center
}

.meta i{
	width:4px;
	height:4px;
	border-radius:50%;
	background:#b7c3d4
}


/* blogroll */
.list{
	margin-top:-3.5rem
}

.feature{
	display:grid;
	grid-template-columns:1.1fr 1fr;
	gap:2.5rem;
	align-items:center;
	background:#fff;
	border-radius:32px;
	padding:1.2rem;
	box-shadow:0 30px 60px -35px rgba(15,47,92,.45);
	text-decoration:none
}

.feature .cover{
	aspect-ratio:4/3;
	border-radius:24px;
	height:100%
}

.feature .body{
	padding:1rem 1.2rem 1rem 0
}

.feature h2{
	font-size:clamp(1.7rem,3vw,2.5rem);
	letter-spacing:-.03em;
	line-height:1.1;
	margin:.9rem 0
}

.feature p{
	color:var(--muted);
	font-size:1.08rem
}

.feature .meta{
	margin-top:1.3rem
}

.more{
	margin-top:1.4rem;
	display:inline-flex;
	font-weight:700;
	color:var(--blue)
}

.feature:hover .more,.post:hover h3{
	text-decoration:underline
}

.sec{
	margin:4rem 0 1.5rem;
	display:flex;
	justify-content:space-between;
	align-items:end;
	gap:1rem
}

.sec h2{
	font-size:1.6rem;
	letter-spacing:-.02em
}

.grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1.6rem
}

.post{
	background:#fff;
	border-radius:28px;
	padding:.8rem .8rem 1.5rem;
	text-decoration:none;
	display:flex;
	flex-direction:column;
	box-shadow:0 20px 40px -32px rgba(15,47,92,.5);
	transition:transform .25s,box-shadow .25s
}

.post:hover{
	transform:translateY(-4px);
	box-shadow:0 30px 50px -30px rgba(15,47,92,.55)
}

.post .tag{
	align-self:flex-start;
	margin:1.1rem .7rem 0
}

.post h3{
	font-size:1.25rem;
	line-height:1.25;
	letter-spacing:-.02em;
	margin:.7rem .7rem 0
}

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

.post .meta{
	margin:auto .7rem 0;
	padding-top:1rem
}

.pager{
	margin-top:3rem;
	padding:1.5rem 0;
	display:flex;
	justify-content:center;
	gap:.5rem;
	flex-wrap:wrap
}

.pager a{
	min-width:44px;
	height:44px;
	padding:0 1rem;
	display:grid;
	place-items:center;
	border-radius:999px;
	background:#fff;
	font-weight:700;
	text-decoration:none;
	color:var(--blue);
	box-shadow:0 10px 20px -14px rgba(15,47,92,.5)
}

.pager a[aria-current]{
	background:var(--navy);
	color:#fff
}

.pager a:hover:not([aria-current]){
	background:#eaf1fb
}


/* shared blocks */
.promo{
	margin-top:5rem;
	background:linear-gradient(135deg,var(--navy),#2f4b69);
	color:#fff;
	border-radius:28px;
	padding:2.4rem;
	display:flex;
	gap:1.5rem;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap
}

.promo h3{
	font-size:1.6rem;
	letter-spacing:-.02em;
	max-width:22ch;
	line-height:1.2
}

.promo p{
	color:#cfdcf0;
	margin-top:.4rem;
	max-width:44ch
}

.btn{
	display:inline-flex;
	font:inherit;
	font-weight:700;
	font-size:1.02rem;
	padding:.9rem 1.6rem;
	border-radius:999px;
	text-decoration:none;
	background:var(--mint);
	color:#04261a;
	box-shadow:0 10px 30px -8px rgba(47,223,132,.6);
	transition:transform .2s
}

.btn:hover{
	transform:translateY(-2px)
}

.btn.alt{
	background:rgba(255,255,255,.12);
	color:#fff;
	box-shadow:none;
	border:1px solid rgba(255,255,255,.3)
}

footer{
	text-align:center;
	color:var(--muted);
	font-size:.9rem;
	padding:3rem 0 2.5rem;
	margin-top:4rem
}

footer a{
	color:var(--blue);
	text-decoration:none;
	margin:0 .8rem
}


/* ---------- article ---------- */
.progress{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:4px;
	background:var(--mint);
	transform:scaleX(0);
	transform-origin:0 50%;
	z-index:50
}

@supports (animation-timeline:scroll()){
	.progress{
		animation:grow linear both;
		animation-timeline:scroll(root)
	}
}

@keyframes grow{
	to{
		transform:scaleX(1)
	}
}

.art-hero{
	padding-bottom:9rem
}

.crumbs{
	margin-top:1.6rem;
	font-size:.9rem;
	color:#a9bddb
}

.crumbs a{
	text-decoration:none
}
.crumbs a:hover{
	text-decoration:underline
}

.art-hero .tag{
	margin-top:1.4rem;
	background:rgba(255,255,255,.14);
	color:#fff
}

.art-hero h1{
	margin-top:1rem;
	max-width:20ch;
	font-size:clamp(2.1rem,5vw,3.5rem)
}

.byline{
	margin-top:1.6rem;
	display:flex;
	align-items:center;
	gap:.9rem;
	flex-wrap:wrap;
	color:#cfdcf0;
	font-size:.95rem
}

.avatar{
	width:42px;
	height:42px;
	border-radius:50%;
	background:var(--mint);
	color:#04261a;
	display:grid;
	place-items:center;
	font-weight:800;
	font-size:.9rem
}

.byline b{
	color:#fff;
	display:block;
	line-height:1.2
}

.art-cover{
	margin-top:-6.5rem
}

.art-cover .cover{
	aspect-ratio:21/9;
	border-radius:32px;
	box-shadow:0 30px 60px -35px rgba(15,47,92,.6)
}

.art-cover .glyph{
	font-size:clamp(1.8rem,5vw,3.4rem)
}

.art{
	margin-top:3rem;
	display:grid;
	grid-template-columns:minmax(0,720px) 250px;
	gap:4rem;
	justify-content:center
}

.toc{
	position:sticky;
	top:1.5rem;
	align-self:start;
	font-size:.92rem
}

.toc h2{
	font-size:.78rem;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--muted);
	margin-bottom:.8rem
}

.toc ol{
	list-style:none;
	border-left:2px solid var(--line)
}

.toc a{
	display:block;
	padding:.4rem 0 .4rem 1rem;
	margin-left:-2px;
	border-left:2px solid transparent;
	color:var(--muted);
	text-decoration:none;
	line-height:1.35
}

.toc a:hover{
	color:var(--blue);
	border-left-color:var(--blue)
}

.share{
	margin-top:2rem
}

.share h2{
	font-size:.78rem;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--muted);
	margin-bottom:.7rem
}

.share div,.share-row div{
	display:flex;
	flex-wrap:wrap;
	gap:.5rem
}

.share a{
	font-size:.85rem;
	font-weight:700;
	text-decoration:none;
	padding:.4rem .9rem;
	border-radius:999px;
	background:#fff;
	color:var(--blue);
	box-shadow:0 8px 16px -12px rgba(15,47,92,.6)
}

.share a:hover{
	background:#eaf1fb
}

.share-row{
	display:none;
	margin-top:2.5rem
}

.share-row h2{
	font-size:1rem;
	margin-bottom:.7rem
}


.prose{
	font-size:1.12rem;
	line-height:1.8;
	color:var(--body)
}

.prose>*:first-child{
	margin-top:0
}

.prose .lede{
	font-size:1.35rem;
	line-height:1.6;
	color:var(--ink);
	font-weight:500
}

.prose h2{
	font-size:clamp(1.55rem,3vw,1.95rem);
	letter-spacing:-.025em;
	line-height:1.2;
	margin:3rem 0 .6rem;
	color:var(--ink);
	scroll-margin-top:1.5rem
}

.prose h3{
	font-size:1.3rem;
	letter-spacing:-.015em;
	margin:2rem 0 .3rem;
	color:var(--ink)
}

.prose p{
	margin-top:1.1rem
}

.prose a{
	color:var(--blue);
	font-weight:600;
	text-decoration-color:rgba(27,74,143,.35);
	text-underline-offset:3px
}

.prose ul,.prose ol{
	margin:1.1rem 0 0 1.4rem
}

.prose li{
	margin-top:.5rem;
	padding-left:.3rem
}

.prose li::marker{
	color:var(--blue);
	font-weight:700
}

.prose strong{
	color:var(--ink)
}

.prose blockquote{
	margin:2.2rem 0;
	padding:1.3rem 1.7rem;
	border-left:5px solid var(--mint);
	background:#fff;
	border-radius:0 22px 22px 0;
	font-size:1.3rem;
	font-weight:600;
	line-height:1.5;
	color:var(--ink);
	box-shadow:0 20px 40px -34px rgba(15,47,92,.5)
}

.prose figure{
	margin:2.2rem 0
}

.prose figure img{
	width:100%;
	border-radius:22px
}

.prose figcaption{
	font-size:.88rem;
	color:var(--muted);
	margin-top:.7rem;
	text-align:center
}

.prose code{
	font-family:"Courier New",ui-monospace,monospace;
	font-size:.92em;
	background:#e9eef6;
	padding:.1rem .45rem;
	border-radius:6px
}

.tbl{
	margin:2rem 0;
	overflow-x:auto;
	border-radius:20px;
	box-shadow:0 20px 40px -34px rgba(15,47,92,.5)
}

.prose table{
	width:100%;
	border-collapse:collapse;
	background:#fff;
	font-size:.98rem;
	line-height:1.5
}

.prose th{
	background:var(--navy);
	color:#fff;
	text-align:left;
	padding:.8rem 1.1rem;
	white-space:nowrap
}

.prose td{
	padding:.8rem 1.1rem;
	border-top:1px solid var(--line)
}

.callout{
	margin:2rem 0;
	background:#eaf1fb;
	border-radius:22px;
	padding:1.3rem 1.6rem;
	font-size:1.02rem;
	line-height:1.65
}

.callout b.k{
	display:block;
	font-size:.78rem;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--blue);
	margin-bottom:.3rem
}

.callout.tip{
	background:#d9f8e8
}
.callout.tip b.k{
	color:#0b6b3a
}

.eq{
	display:flex;
	align-items:center;
	gap:.5rem;
	flex-wrap:wrap;
	font-weight:700;
	font-size:1.15rem;
	margin-top:.6rem
}

.eq .i,.eq .o{
	padding:.1rem .7rem;
	border-radius:10px;
	font-weight:600
}

.eq .i{
	background:var(--mint);
	color:#04261a
}
.eq .o{
	background:var(--rose);
	color:#fff
}

.eq .r{
	background:#fff;
	padding:.1rem .7rem;
	border-radius:10px
}

.takeaways{
	margin:2.6rem 0;
	background:#fff;
	border-radius:26px;
	padding:1.6rem 1.8rem;
	box-shadow:0 20px 40px -32px rgba(15,47,92,.5);
	border-top:5px solid var(--mint)
}

.takeaways h2{
	margin:0!important;
	font-size:1.3rem!important
}

.cta{
	margin:2.6rem 0;
	background:linear-gradient(135deg,var(--navy),#2f4b69);
	border-radius:26px;
	padding:1.8rem 2rem;
	color:#fff;
	display:flex;
	gap:1.2rem;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap
}

.cta b{
	display:block;
	font-size:1.3rem;
	letter-spacing:-.02em;
	line-height:1.25
}

.cta span{
	color:#cfdcf0;
	font-size:.98rem;
	line-height:1.5;
	display:block;
	margin-top:.3rem
}

.prose .cta a.btn{
	color:#04261a;
	text-decoration:none
}

.author{
	margin-top:3rem;
	display:flex;
	gap:1.1rem;
	align-items:center;
	background:#fff;
	border-radius:26px;
	padding:1.4rem 1.6rem;
	box-shadow:0 20px 40px -32px rgba(15,47,92,.5)
}

.author .avatar{
	width:56px;
	height:56px;
	flex:none;
	font-size:1.1rem
}

.author p{
	color:var(--muted);
	font-size:.95rem;
	margin-top:.15rem
}

.related{
	margin-top:5rem
}


@media(max-width:900px){
	.feature{
		grid-template-columns:1fr;
		gap:1rem
	}
	.feature .body{
		padding:.5rem 1rem 1rem
	}

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

	.art{
		grid-template-columns:minmax(0,1fr)
	}
	.toc,.share{
		display:none
	}
	.share-row{
		display:block
	}
}

@media(max-width:600px){
	.grid{
		grid-template-columns:1fr
	}
	.prose{
		font-size:1.05rem
	}
	.art-cover .cover{
		aspect-ratio:16/10
	}
	.cta{
		padding:1.4rem
	}
}

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


/* blocks that contain paragraphs (generated by the publishing page) */
.callout>p:first-of-type{
	margin-top:0
}

.callout p+p{
	margin-top:.6rem
}

.takeaways ul{
	margin-top:.8rem
}


/* loading skeleton + empty/error states (blog list) */
.skel{
	pointer-events:none
}

.skel .cover{
	background:linear-gradient(90deg,#e9eef6,#f6f8fb,#e9eef6);
	background-size:200% 100%;
	animation:shine 1.4s linear infinite
}

.skel .cover::before,.skel .cover::after{
	display:none
}

.skel .ln{
	height:14px;
	border-radius:8px;
	margin:1rem .7rem 0;
	background:#eef2f8
}

.skel .ln.s{
	width:40%
}
.skel .ln.m{
	width:80%
}

@keyframes shine{
	to{
		background-position:-200% 0
	}
}

.state{
	text-align:center;
	padding:3.5rem 1rem;
	color:var(--muted);
	background:#fff;
	border-radius:28px;
	box-shadow:0 20px 40px -32px rgba(15,47,92,.5)
}

.state h3{
	color:var(--ink);
	font-size:1.4rem;
	letter-spacing:-.02em;
	margin-bottom:.4rem
}

.state .btn{
	margin-top:1.2rem
}

@media(prefers-reduced-motion:reduce){
	.skel .cover{
		animation:none
	}
}


/* make the HTML hidden attribute always win over component display rules */
[hidden]{
	display:none!important
}


/* NAV START (site navigation;
 self-contained, can be pasted into any page's CSS) */
.site-nav{
	position:relative;
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:1.5rem 0
}

.site-nav .links{
	display:flex;
	gap:1.8rem;
	font-size:.95rem
}

.site-nav .links a{
	color:#fff;
	text-decoration:none;
	opacity:.8
}

.site-nav .links a:hover,.site-nav .links a[aria-current]{
	opacity:1
}

.site-nav .links a[aria-current]{
	border-bottom:2px solid var(--mint,#2fdf84);
	padding-bottom:2px
}

.site-nav .nav-toggle{
	display:none;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:5px;
	width:44px;
	height:44px;
	padding:0;
	border:1px solid rgba(255,255,255,.22);
	border-radius:12px;
	background:rgba(255,255,255,.1);
	color:#fff;
	cursor:pointer
}

.site-nav .nav-toggle:hover{
	background:rgba(255,255,255,.18)
}

.site-nav .nav-toggle:focus-visible{
	outline:3px solid var(--mint,#2fdf84);
	outline-offset:2px
}

.site-nav .nav-toggle span{
	display:block;
	width:20px;
	height:2px;
	border-radius:2px;
	background:currentColor;
	transition:transform .25s,opacity .2s
}

.site-nav.open .nav-toggle span:nth-child(1){
	transform:translateY(7px) rotate(45deg)
}

.site-nav.open .nav-toggle span:nth-child(2){
	opacity:0
}

.site-nav.open .nav-toggle span:nth-child(3){
	transform:translateY(-7px) rotate(-45deg)
}

@media(max-width:760px){

	.site-nav .links{
		flex-wrap:wrap;
		justify-content:flex-end;
		gap:.4rem 1.1rem
	}
							/* if the script can't run, links just stay visible */
	.site-nav.js .nav-toggle{
		display:inline-flex
	}

	.site-nav.js .links{
		display:none;
		position:absolute;
		top:100%;
		left:0;
		right:0;
		z-index:30;
		flex-direction:column;
		flex-wrap:nowrap;
		justify-content:flex-start;
		gap:.2rem;
		margin-top:.3rem;
		padding:.6rem;
		border-radius:20px;
		font-size:1.05rem;
		background:#0b2750;
		border:1px solid rgba(255,255,255,.16);
		box-shadow:0 30px 50px -20px rgba(0,0,0,.55)
	}

	.site-nav.js.open .links{
		display:flex
	}

	.site-nav.js .links a{
		padding:.85rem 1rem;
		border-radius:12px;
		opacity:.92
	}

	.site-nav.js .links a:hover{
		background:rgba(255,255,255,.08);
		opacity:1
	}

	.site-nav.js .links a[aria-current]{
		border-bottom:0;
		padding-bottom:.85rem;
		background:rgba(47,223,132,.14);
		color:var(--mint,#2fdf84)
	}
}

/* NAV END */