:root {
	--radius-btn: 7px;
	--char: rgb(31, 42, 36);
	--paper: rgb(250, 247, 242);
	--serif: "Source Serif 4",Georgia,serif;
	--white: rgb(255, 255, 255);
	--sans: system-ui,-apple-system,sans-serif;
	--border: rgb(221, 214, 202);
	--header-h-m: 50px;
	--accent-dark: rgb(36, 85, 64);
	--pop: rgb(47, 107, 79);
	--col: 39rem;
	--ink-soft: rgb(74, 86, 79);
	--header-h: 56px;
}
* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	font-family: var(--serif);
	margin: 0;
	font-size: 19px;
	-webkit-font-smoothing: antialiased;
	line-height: 1.65;
	color: var(--char);
	background: var(--paper);
}
.tone-dark {
	background: var(--char);
	color: var(--paper);
}
img {
	max-width: 100%;
	display: block;
}
a {
	color: var(--pop);
}
a:focus-visible, button:focus-visible {
	outline: 2px solid var(--pop);
	outline-offset: 3px;
	border-radius: 2px;
}
.site-header {
	z-index: 50;
	top: 0;
	background: var(--paper);
	position: sticky;
	border-bottom: 1px solid var(--border);
}
.site-header .in {
	margin: 0 auto;
	height: var(--header-h);
	padding: 0 1.25rem;
	align-items: center;
	max-width: 64rem;
	display: flex;
	justify-content: space-between;
}
.brand {
	font-size: 1.3rem;
	text-decoration: none;
	font-family: var(--serif);
	letter-spacing: -.01em;
	color: var(--char);
	font-weight: 700;
}
.ad-tag {
	font-family: var(--sans);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid var(--ink-soft);
	color: var(--ink-soft);
	padding: 0.2rem 0.55rem;
	border-radius: 3px;
}
.progress {
	z-index: 51;
	height: 3px;
	width: 0;
	top: var(--header-h);
	left: 0;
	background: var(--pop);
	position: fixed;
}
.wrap {
	padding: 0 1.25rem;
	max-width: var(--col);
	margin: 0 auto;
}
.kicker {
	margin: 2.5rem 0 0.75rem;
	font-family: var(--sans);
	color: var(--pop);
	font-size: 0.85rem;
	font-weight: 600;
}
h1 {
	margin: 0 0 1rem;
	line-height: 1.08;
	font-weight: 700;
	font-family: var(--serif);
	letter-spacing: -.015em;
	font-size: clamp(2rem,5.2vw,3rem);
}
.lead {
	line-height: 1.5;
	margin: 0 0 1rem;
	color: var(--ink-soft);
	font-size: 1.2rem;
}
.byline {
	margin: 0 0 1.75rem;
	font-size: 0.85rem;
	font-family: var(--sans);
	color: var(--ink-soft);
}
figure {
	margin: 1.75rem 0;
}
figure img {
	border-radius: 4px;
	width: 100%;
	height: auto;
	max-width: 100%;
	background: rgb(233, 227, 216);
}
figcaption {
	line-height: 1.45;
	margin-top: 0.5rem;
	color: var(--ink-soft);
	font-size: 0.82rem;
	font-family: var(--sans);
}
p {
	margin: 0 0 1.1rem;
}
.dropcap::first-letter {
	font-size: 3.6em;
	font-weight: 700;
	color: var(--pop);
	line-height: 0.85;
	float: left;
	padding: 0.08em 0.1em 0 0;
}
h2 {
	font-family: var(--serif);
	font-size: 1.45rem;
	line-height: 1.2;
	margin: 2rem 0 0.9rem;
	letter-spacing: -.01em;
}
blockquote {
	line-height: 1.5;
	border-left: 3px solid var(--pop);
	font-style: italic;
	padding: 0.2rem 0 0.2rem 1.1rem;
	margin: 1.6rem 0;
	font-size: 1.15rem;
}
blockquote p {
	margin: 0;
}
section[data-ojfg="story"] {
	--ojfg-story-top-m: calc(var(--header-h-m) + 1rem);
	margin: 1rem auto;
	padding: 0 1.25rem;
	max-width: 72rem;
	--ojfg-story-top: calc(var(--header-h) + 1rem);
}
.ojfg-step {
	max-width: var(--col);
}
.ojfg-step h2:first-child {
	margin-top: 0;
}
.ojfg-frame {
	margin: 0 0 1.5rem;
}
.product {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 1.5rem 1.4rem;
	margin: 2.5rem 0 1rem;
}
.product .lbl {
	margin: 0 0 0.3rem;
	font-family: var(--sans);
	color: var(--ink-soft);
	font-weight: 600;
	font-size: 0.85rem;
}
.product h3 {
	font-family: var(--serif);
	font-size: 1.5rem;
	margin: 0 0 0.9rem;
}
.product ul {
	margin: 0 0 1.3rem;
	padding-left: 1.2rem;
}
.product li {
	margin-bottom: 0.45rem;
}
.seller-note {
	margin: 0.7rem 0 0;
	font-size: 0.82rem;
	font-family: var(--sans);
	color: var(--ink-soft);
}
.ojfg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 1.4rem;
	border-radius: var(--radius-btn);
	font-family: var(--sans);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	cursor: pointer;
	border: 1.5px solid transparent;
	transition: background-color 0.15s,color 0.15s,border-color 0.15s;
}
.ojfg-btn-ic {
	height: 1.5em;
	display: inline-grid;
	background: color-mix(in srgb,currentColor 18%,transparent);
	place-items: center;
	border-radius: 4px;
	width: 1.5em;
}
.ojfg-btn:focus-visible {
	outline: 2px solid var(--pop);
	outline-offset: 3px;
}
.ojfg-btn--primary {
	color: rgb(255, 255, 255);
	background: var(--pop);
}
.ojfg-btn--primary:hover {
	background: var(--accent-dark);
}
.ojfg-btn--secondary {
	border-color: var(--pop);
	color: var(--pop);
	background: transparent;
}
.ojfg-btn--secondary:hover {
	background: color-mix(in srgb,var(--pop) 12%,transparent);
}
.ojfg-btn--tertiary {
	background: none;
	color: var(--pop);
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 0 0.3rem;
}
.ojfg-btn--tertiary:hover {
	text-decoration-thickness: 2px;
}
.ojfg-btn:disabled, .ojfg-btn[aria-disabled="true"] {
	pointer-events: none;
	opacity: 0.45;
	cursor: default;
}
.tone-ink .ojfg-btn--primary {
	background: var(--paper);
	color: var(--char);
}
.tone-ink .ojfg-btn--primary:hover {
	background: rgb(255, 255, 255);
}
.tone-ink .ojfg-btn--secondary {
	color: var(--paper);
	border-color: var(--paper);
}
.tone-ink .ojfg-btn--tertiary {
	color: var(--paper);
}
.product .ojfg-btn {
	width: 100%;
}
.site-footer {
	color: var(--paper);
	background: var(--char);
}
.disclosure {
	font-family: var(--sans);
	line-height: 1.55;
	margin: 1.5rem 0;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
	color: var(--ink-soft);
	font-size: 0.85rem;
}
.sources {
	font-family: var(--sans);
	margin: 2rem 0 3rem;
	color: var(--ink-soft);
	font-size: 0.85rem;
}
.sources h2 {
	font-family: var(--sans);
	font-size: 1rem;
	margin: 0 0 0.5rem;
}
.sources ol {
	margin: 0;
	padding-left: 1.2rem;
}
.site-footer {
	color: rgb(231, 226, 216);
	font-family: var(--sans);
	font-size: 0.85rem;
	line-height: 1.6;
	padding: 2.5rem 0 6rem;
	background: var(--char);
}
.site-footer a {
	color: rgb(255, 255, 255);
}
.site-footer p {
	margin: 0 0 0.7rem;
}
.sticky-cta {
	border-top: 1px solid var(--border);
	background: var(--paper);
	left: 0;
	transition: transform 0.25s;
	transform: translateY(110%);
	right: 0;
	padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
	bottom: 0;
	position: fixed;
	z-index: 60;
}
.sticky-cta.show {
	transform: none;
}
.sticky-cta .ojfg-btn {
	width: 100%;
}
@media (min-width:900px) {
	.sticky-cta {
		display: none;
	}
}
@media (max-width:600px) {
	body {
		font-size: 18px;
	}
	.site-header .in {
		height: var(--header-h-m);
	}
	.progress {
		top: var(--header-h-m);
	}
	.brand {
		font-size: 1.15rem;
	}
}
@media (prefers-reduced-motion:reduce) {
	html {
		scroll-behavior: auto;
	}
	* {
		transition: none !important;
		animation: none !important;
	}
}