/*
 * The site's own pages in the new design: About (about.html), Privacy and Terms (privacy.html,
 * terms.html), Support (support-main.html), the newsletter (newsletter_v2.html), the business
 * plan (ecom-business-landing_v2.html) and the short message pages on pages/message.html (a
 * sign-up's steps, a form's thanks), scoped .pg, with their parts in pages/. On the
 * index pages' kit (ix_base.css: the --ix-* tokens, .ix-wrap, .ix-forest, .ix-search, .ix-pill).
 * A forest top, then the page on the canvas: reading text (.pg-prose), the legal pages' contents
 * beside it (pages/_toc.html), FAQs as native <details> (pages/_faq.html), Support's contact
 * cards and About's story. Terms and Privacy also open in the app's WebView, at phone width.
 * pages.js keeps --pg-nav (how much of the top the navbar covers) and builds the contents.
 */

.pg {
	/* The forest band's colours (ix_base.css .ix-forest), for the forest pieces outside it:
	   the business page's step numbers and closing card */
	--ix-forest: #1A2116;
	--ix-cream: #F8FFF6;
	--ix-sage: #C4D7C1;
	--pg-nav: 0px;       /* the navbar while it shows (for the contents' sticky top) */
	--pg-nav-h: 80px;    /* its height either way (for the jump to a heading) */
	--pg-read: 44rem;
	--pg-radius: 22px;

	/* Clear of the footer's curved top, which sits 36px over the page (site_app.css) */
	padding-bottom: calc(clamp(2.75rem, 6vw, 4.5rem) + 36px);
	background: var(--ix-canvas);
	color: var(--ix-ink);
}

.pg :focus-visible {
	outline: 3px solid var(--ix-green);
	outline-offset: 3px;
}

.pg-eyebrow {
	margin: 0 0 .6rem;
	color: var(--ix-green);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.pg .pg-h2 {
	margin: 0 0 1.25rem;
	color: var(--ix-ink);
	font-family: var(--ix-display);
	font-size: clamp(1.75rem, 5vw, 2.5rem);
	font-weight: normal;
	line-height: 1.1;
	letter-spacing: -.01em;
	scroll-margin-top: calc(var(--pg-nav-h) + 1.5rem);
}

.pg-section {
	padding-top: clamp(2.75rem, 6vw, 4.5rem);
}

.pg-narrow {
	max-width: calc(var(--pg-read) + 2 * var(--ix-gutter));
}

/* ---------- The forest top ---------- */

.pg-hero {
	padding: clamp(2rem, 6vw, 4rem) 0 clamp(2.75rem, 7vw, 4.5rem);
	text-align: center;
}

.pg-hero__inner {
	max-width: 48rem;
}

.ix-forest .pg-eyebrow {
	color: var(--ix-lime);
}

.pg .pg-title {
	margin: 0;
	color: var(--ix-cream);
	font-family: var(--ix-display);
	font-size: clamp(2.4rem, 8vw, 4rem);
	font-weight: normal;
	line-height: 1;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.pg-lede {
	max-width: 34rem;
	margin: .9rem auto 0;
	color: var(--ix-sage);
	font-size: 1.0625rem;
	line-height: 1.55;
	text-wrap: pretty;
}

.pg-lede + .pg-lede {
	margin-top: .6rem;
}

.pg .pg-lede a {
	color: var(--ix-cream);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(190, 227, 120, .6);
	text-underline-offset: .2em;
}

/* ---------- Reading text ---------- */

.pg-prose {
	color: var(--ix-text);
	font-size: 1.0625rem;
	line-height: 1.7;
	overflow-wrap: break-word;
}

.pg-prose p {
	margin: 0 0 1.1em;
}

.pg-prose h2 {
	margin: 2.75rem 0 .75rem;
	padding-top: 0;
	color: var(--ix-ink);
	font-family: var(--ix-display);
	font-size: clamp(1.6rem, 4vw, 2rem);
	font-weight: normal;
	line-height: 1.15;
	scroll-margin-top: calc(var(--pg-nav-h) + 1.5rem);
}

.pg-prose h3 {
	margin: 1.75rem 0 .5rem;
	color: var(--ix-ink);
	font-family: var(--ix-sans);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	scroll-margin-top: calc(var(--pg-nav-h) + 1.5rem);
}

.pg-prose ul,
.pg-prose ol {
	margin: 0 0 1.1em;
	padding-left: 1.3rem;
}

.pg-prose li {
	margin-bottom: .45em;
}

.pg-prose li::marker {
	color: var(--ix-green);
}

.pg-prose strong,
.pg-prose b {
	color: var(--ix-ink);
}

.pg-prose a,
.pg-faq__a a,
.pg-contact a,
.pg-more a {
	color: var(--ix-green-dark);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(80, 113, 55, .4);
	text-underline-offset: .2em;
}

.pg-prose a:hover,
.pg-faq__a a:hover,
.pg-contact a:hover,
.pg-more a:hover {
	text-decoration-color: currentColor;
}

/* The page's opening paragraphs, a size up */
.pg-intro {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--ix-line);
	color: var(--ix-ink);
	font-size: clamp(1.0625rem, 2.4vw, 1.1875rem);
	line-height: 1.6;
}

/* ---------- Privacy and Terms: the text, its contents beside it on desktop ---------- */

.pg-legal {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	padding-top: clamp(2rem, 5vw, 3rem);
}

.pg-legal .pg-prose {
	width: 100%;
	max-width: var(--pg-read);
	margin-inline: auto;
}

@media (min-width: 1000px) {
	.pg-legal {
		grid-template-columns: 15rem minmax(0, var(--pg-read));
		justify-content: center;
		align-items: start;
		gap: clamp(2.5rem, 5vw, 4.5rem);
	}
}

.pg-toc {
	width: 100%;
	max-width: var(--pg-read);
	margin-inline: auto;
}

.pg-toc__box {
	border-radius: var(--pg-radius);
	background: var(--ix-paper);
	box-shadow: 0 1px 0 rgba(26, 37, 24, .04), 0 10px 30px rgba(26, 37, 24, .06);
}

.pg-toc__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	color: var(--ix-green);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}

.pg-toc__title::-webkit-details-marker {
	display: none;
}

.pg-toc__title svg,
.pg-faq__icon {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	color: var(--ix-green);
	transition: transform .3s var(--ix-ease);
}

details[open] > .pg-toc__title svg,
.pg-faq[open] .pg-faq__icon {
	transform: rotate(180deg);
}

.pg-toc__list {
	margin: 0;
	padding: 0 .75rem 1rem;
	list-style: none;
	counter-reset: pg-toc;
}

.pg .pg-toc__list a {
	display: block;
	padding: .4rem .5rem .3rem;
	border-radius: 10px;
	color: var(--ix-text);
	font-size: .9375rem;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

.pg .pg-toc__list a[aria-current="true"] {
	background: rgba(80, 113, 55, .1);
	color: var(--ix-green-dark);
	font-weight: 600;
}

@media (min-width: 1000px) {
	.pg-toc {
		position: sticky;
		top: calc(var(--pg-nav) + 1.5rem);
		max-height: calc(100vh - var(--pg-nav) - 3rem);
		overflow-y: auto;
		transition: top .6s;   /* with the navbar (nav_scroll.js) */
	}

	.pg-toc__title {
		cursor: default;
		pointer-events: none;   /* always open here (pages.js) */
	}

	.pg-toc__title svg {
		display: none;
	}
}

@media (hover: hover) {
	.pg .pg-toc__list a:hover {
		background: rgba(80, 113, 55, .07);
		color: var(--ix-ink);
	}
}

/* ---------- FAQs (pages/_faq.html) ---------- */

.pg-faqs {
	margin: 0;
	padding: .25rem 1.25rem;
	border-radius: var(--pg-radius);
	background: var(--ix-paper);
	box-shadow: 0 1px 0 rgba(26, 37, 24, .04), 0 10px 30px rgba(26, 37, 24, .06);
	list-style: none;
}

.pg-faq + .pg-faq {
	border-top: 1px solid var(--ix-line);
}

.pg-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 0 .95rem;
	color: var(--ix-ink);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.pg-faq__q::-webkit-details-marker {
	display: none;
}

.pg-faq__a {
	padding: 0 2.25rem 1.2rem 0;
	color: var(--ix-text);
	line-height: 1.65;
}

.pg-faq__a p {
	margin: 0;
}

@media (hover: hover) {
	.pg-faq__q:hover {
		color: var(--ix-green-dark);
	}
}

/* Opening smoothly where the browser can animate to the answer's height */
@supports (interpolate-size: allow-keywords) {
	.pg-faq {
		interpolate-size: allow-keywords;
	}

	.pg-faq::details-content {
		height: 0;
		overflow: clip;
		transition: height .3s var(--ix-ease), content-visibility .3s allow-discrete;
	}

	.pg-faq[open]::details-content {
		height: auto;
	}
}

.pg-faq-group + .pg-faq-group {
	margin-top: clamp(2rem, 5vw, 2.75rem);
}

.pg .pg-faq-group__title {
	margin: 0 0 .85rem;
	color: var(--ix-ink);
	font-family: var(--ix-display);
	font-size: clamp(1.4rem, 4vw, 1.75rem);
	font-weight: normal;
	line-height: 1.15;
}

.pg-more {
	margin: 1.25rem 0 0;
	color: var(--ix-muted);
	text-align: center;
}

/* ---------- Support: the search in the top, the topics, the contact cards ---------- */

.pg-search {
	max-width: 34rem;
	margin: 1.5rem auto 0;
	text-align: left;
}

.pg-topics {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	padding-top: clamp(1.5rem, 4vw, 2rem);
}

.pg-results__note {
	margin: 0 0 .5rem;
	color: var(--ix-muted);
}

.pg-empty {
	padding: 1.5rem 0;
	color: var(--ix-text);
	text-align: center;
}

.pg-contact__intro {
	max-width: 40rem;
	margin: -.5rem 0 1.5rem;
	color: var(--ix-text);
	line-height: 1.6;
}

.pg-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.pg-contact__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.pg-contact__card {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	height: 100%;
	padding: 1.4rem 1.5rem;
	border-radius: var(--pg-radius);
	background: var(--ix-paper);
	box-shadow: 0 1px 0 rgba(26, 37, 24, .04), 0 10px 30px rgba(26, 37, 24, .06);
}

.pg-contact__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: .35rem;
	border-radius: 50%;
	background: rgba(190, 227, 120, .45);
	color: var(--ix-green-dark);
}

.pg-contact__icon svg {
	width: 1.3rem;
	height: 1.3rem;
}

.pg .pg-contact__title {
	margin: 0;
	color: var(--ix-ink);
	font-family: var(--ix-display);
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1.15;
}

.pg-contact__text {
	margin: 0;
	color: var(--ix-text);
	line-height: 1.55;
}

/* ---------- About: the top with a photo, the story as a timeline ---------- */

@media (min-width: 900px) {
	.pg-hero--split {
		text-align: left;
	}

	.pg-hero--split .pg-hero__inner {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
		align-items: center;
		gap: clamp(2rem, 5vw, 4.5rem);
		max-width: 68rem;
	}

	.pg-hero--split .pg-lede {
		margin-inline: 0;
	}

	.pg-hero--split .pg-hero__photo {
		margin: 0;
		justify-self: end;
	}
}

.pg-hero__photo {
	display: block;
	width: min(100%, 26rem);
	height: auto;   /* the crop below, not the height attribute */
	margin: 1.75rem auto 0;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 35%;
	border-radius: 24px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

@media (max-width: 899.98px) {
	.pg-hero__photo {
		aspect-ratio: 4 / 3;
		width: min(100%, 34rem);
	}
}

/* About's sections share one left edge: the story's width, the FAQs at reading width in it */
.pg-wide {
	max-width: 60rem;
	margin: 0 auto;
}

.pg-wide .pg-faqs,
.pg-wide .pg-more {
	max-width: var(--pg-read);
}

.pg-wide .pg-more {
	text-align: left;
}

.pg .pg-story__title {
	margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

.pg-story__list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The line the moments hang on */
.pg-story__list::before {
	content: "";
	position: absolute;
	top: .6rem;
	bottom: .6rem;
	left: 7px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(var(--ix-lime), rgba(80, 113, 55, .25));
}

.pg-moment {
	position: relative;
	padding-left: 2.25rem;
}

.pg-moment + .pg-moment {
	margin-top: clamp(2.25rem, 6vw, 3.5rem);
}

.pg-moment::before {
	content: "";
	position: absolute;
	top: .3rem;
	left: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--ix-lime);
	box-shadow: 0 0 0 4px var(--ix-canvas), 0 0 0 5px rgba(80, 113, 55, .35);
}

.pg-moment__when {
	margin: 0 0 .85rem;
	color: var(--ix-green);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.pg-moment__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	align-items: center;
}

@media (min-width: 760px) {
	.pg-moment__body {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: clamp(1.5rem, 4vw, 2.75rem);
	}
}

.pg-moment__media {
	margin: 0;
}

.pg-moment__media img,
.pg-moment__media video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 18px;
	background: var(--ix-surface);
	box-shadow: 0 14px 34px rgba(26, 37, 24, .14);
}

/* The 2014 kitchen loop's pause and play (pages.js) */
.pg-loop {
	position: relative;
}

.pg .pg-loop__toggle {
	position: absolute;
	right: .75rem;
	bottom: .75rem;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(26, 33, 22, .62);
	color: #F8FFF6;
	cursor: pointer;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.pg .pg-loop__toggle:focus {
	outline: none;
}

.pg .pg-loop__toggle:focus-visible {
	outline: 3px solid var(--ix-lime);
	outline-offset: 2px;
}

.pg-loop__toggle svg {
	width: 1.1rem;
	height: 1.1rem;
}

.pg-loop__pause,
.pg-loop.is-playing .pg-loop__play {
	display: none;
}

.pg-loop.is-playing .pg-loop__pause {
	display: block;
}

.pg-moment__text p {
	margin: 0 0 .9em;
}

.pg-moment__text p:last-child {
	margin-bottom: 0;
}

.pg-moment__sign {
	color: var(--ix-ink);
	font-family: var(--ix-display);
	font-size: 1.5rem;
	line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
	.pg-toc,
	.pg-toc__title svg,
	.pg-faq__icon {
		transition: none;
	}

	.pg-faq::details-content {
		transition: none;
	}
}


/* ---------- Buttons: the lime pill, and a quiet outline one on the forest ---------- */

.pg .pg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 2.875rem;
	padding: .7rem 1.5rem .6rem;
	border: 0;
	border-radius: 999px;
	background: var(--ix-lime);
	color: var(--ix-ink);
	font-family: var(--ix-sans);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow .3s var(--ix-ease), transform .3s var(--ix-ease), background-color .2s;
}

.pg .pg-btn--ghost {
	background: transparent;
	color: var(--ix-cream);
	box-shadow: inset 0 0 0 1px rgba(248, 255, 246, .35);
}

@media (hover: hover) {
	.pg .pg-btn:hover {
		color: var(--ix-ink);
		box-shadow: 0 0 0 5px rgba(190, 227, 120, .25), 0 0 22px 4px rgba(190, 227, 120, .3);
		transform: translateY(-1px);
	}

	.pg .pg-btn--ghost:hover {
		background: rgba(248, 255, 246, .08);
		color: var(--ix-cream);
		box-shadow: inset 0 0 0 1px rgba(248, 255, 246, .6);
	}
}

.pg .ix-forest :focus-visible {
	outline-color: var(--ix-lime);
}

.pg-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .6rem 1rem;
	margin-top: 1.75rem;
}

/* Small print on the forest: the sign-up's terms, an email to write to */
.pg-fine {
	max-width: 30rem;
	margin: 1.1rem auto 0;
	color: #9AA39A;
	font-size: .875rem;
	line-height: 1.5;
	text-wrap: pretty;
}

.pg .pg-fine a {
	color: var(--ix-sage);
	text-decoration: underline;
	text-decoration-color: rgba(196, 215, 193, .5);
	text-underline-offset: .18em;
}

.pg .pg-fine a:hover {
	color: var(--ix-cream);
}

/* ---------- Message pages (pages/message.html): one thing to say, and the next step ---------- */

.pg-msg {
	display: grid;
	align-items: center;
	min-height: clamp(24rem, 62vh, 36rem);
	padding-top: clamp(2.5rem, 7vw, 4.5rem);
	padding-bottom: clamp(3.25rem, 8vw, 5rem);
}

.pg-msg .pg-hero__inner {
	max-width: 38rem;
}

.pg .pg-msg .pg-title {
	font-size: clamp(2.2rem, 7vw, 3.4rem);
}

.pg-msg__orb {
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	margin: 0 auto 1.4rem;
	border-radius: 50%;
	background: var(--ix-lime);
	color: var(--ix-forest);
	box-shadow: 0 0 0 8px rgba(190, 227, 120, .12), 0 0 44px rgba(190, 227, 120, .28);
}

.pg-msg__orb svg {
	width: 1.9rem;
	height: 1.9rem;
}

/* The error pages: the old pages' falling lime (drawn on white), in a white porthole */
.pg-msg__lime {
	display: grid;
	place-items: center;
	width: 9.5rem;
	height: 9.5rem;
	margin: 0 auto 1.4rem;
	overflow: hidden;
	border-radius: 50%;
	background: #FFF;
	box-shadow: 0 0 0 8px rgba(248, 255, 246, .08), 0 18px 40px rgba(0, 0, 0, .35);
}

.pg-msg__lime img {
	width: 5.4rem;
	height: auto;
	transform: rotate(-6deg);
	animation: pg-freefall 4.5s ease-in-out infinite;
}

@keyframes pg-freefall {
	0%, 100% { transform: translateY(-5px) rotate(-7deg); }
	50% { transform: translateY(5px) rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
	.pg-msg__lime img {
		animation: none;
	}
}

/* Something went wrong: the footer's soft coral, not the lime */
.pg-msg__orb--alert {
	background: #F2A58E;
	box-shadow: 0 0 0 8px rgba(242, 165, 142, .12), 0 0 44px rgba(242, 165, 142, .22);
}

.pg-msg .pg-signup {
	margin-top: 1.5rem;
}

/* The newsletter's thanks: the guide's cover in place of the orb (scoped: .pg-news__guide comes later) */
.pg-msg .pg-msg__guide {
	width: fit-content;
	margin: 0 auto 1.6rem;
}

/* ---------- The newsletter sign-up on the forest (pages/_signup.html) ---------- */

.pg-signup {
	max-width: 30rem;
	margin: 1.6rem auto 0;
}

.pg-signup__form {
	display: flex;
	gap: .5rem;
}

.pg .pg-signup__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 3rem;
	padding: .6rem 1.15rem .5rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--ix-cream);
	color: var(--ix-ink);
	font-family: var(--ix-sans);
	font-size: 1rem;   /* 16px: phones don't zoom in on it */
}

.pg .pg-signup__input::placeholder {
	color: var(--ix-muted);
	font-family: var(--ix-sans);   /* the site sets placeholders in its display font */
	opacity: 1;
}

.pg .pg-signup__input:focus {
	border-color: var(--ix-lime);
	outline: none;
	box-shadow: 0 0 0 4px rgba(190, 227, 120, .3);
}

.pg-signup .pg-btn {
	flex: none;
	min-height: 3rem;
}

@media (max-width: 379.98px) {
	.pg-signup__form {
		flex-direction: column;
	}
}

.pg-signup__feedback {
	margin: .85rem 0 0;
	color: var(--ix-lime);
	font-weight: 600;
	line-height: 1.45;
}

.pg-signup__feedback:empty {
	display: none;
}

.pg-signup__feedback.is-error {
	color: #F2A58E;
}

/* ---------- The newsletter page: the guide beside the sign-up ---------- */

.pg-news {
	padding-bottom: clamp(3.25rem, 8vw, 5.5rem);
}

.pg-news .pg-hero__inner {
	display: grid;
	justify-items: center;
}

.pg-news__guide {
	position: relative;
	order: -1;   /* phones: the guide first, small, then what it is and the form */
	margin: 0 0 1.5rem;
}

.pg-news__cover {
	display: block;
	width: clamp(7.5rem, 30vw, 9.5rem);
	height: auto;
	border-radius: 6px;
	box-shadow: 0 22px 40px -12px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .35);
	transform: rotate(-4deg);
}

/* "Free": the gold badge (site_app.css .pul-free) on the booklet's corner */
.pg-news__sticker {
	top: -.6rem;
	right: -1.4rem;
	width: 3.4rem;
	height: 3.4rem;
	font-size: .8rem;
}

@media (min-width: 900px) {
	.pg-news {
		text-align: left;
	}

	.pg-news .pg-hero__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
		align-items: center;
		justify-items: stretch;
		gap: clamp(2rem, 5vw, 4.5rem);
		max-width: 68rem;
	}

	.pg-news .pg-lede,
	.pg-news .pg-signup,
	.pg-news .pg-fine {
		margin-inline: 0;
	}

	.pg-news__guide {
		order: 0;
		justify-self: center;
		margin: 0;
	}

	.pg-news__cover {
		width: clamp(14rem, 22vw, 17rem);
	}

	.pg-news__sticker {
		top: -1rem;
		right: -1.75rem;
		width: 4.5rem;
		height: 4.5rem;
		font-size: 1.05rem;
	}
}

/* What's in the guide, under the top */
.pg-inside__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.pg-inside__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
}

.pg-inside__item {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	height: 100%;
	padding: 1.15rem 1.25rem;
	border-radius: var(--pg-radius);
	background: var(--ix-paper);
	box-shadow: 0 1px 0 rgba(26, 37, 24, .04), 0 10px 30px rgba(26, 37, 24, .06);
}

/* Three across while narrow: the icon over the words */
@media (min-width: 700px) and (max-width: 999.98px) {
	.pg-inside__item {
		flex-direction: column;
		gap: .6rem;
	}
}

.pg-inside__item .pg-contact__icon {
	flex: none;
	margin: 0;
}

/* The apps' own marks (Recipes, Ingredients): the pot is wide and the aubergine tall, so their box
   is a little larger than the line icons' to look the same size in the circle */
.pg-contact__icon--app svg {
	width: 1.4rem;
	height: 1.4rem;
}

.pg .pg-inside__title {
	margin: .2rem 0 .2rem;
	color: var(--ix-ink);
	font-family: var(--ix-display);
	font-size: 1.3rem;
	font-weight: normal;
	line-height: 1.15;
}

.pg-inside__text {
	margin: 0;
	color: var(--ix-text);
	line-height: 1.5;
}

.pg-inside__note {
	margin: 1.25rem 0 0;
	color: var(--ix-muted);
}

/* ---------- The business plan: the top with a photo, who we are, the app, the pilot ---------- */

.pg-biz__photo {
	object-position: 64% 40%;   /* Sadia, right of the photo's middle */
}

@media (min-width: 900px) {
	.pg-hero--split .pg-actions {
		justify-content: flex-start;
	}
}

.pg .pg-biz__mail {
	color: var(--ix-sage);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(196, 215, 193, .45);
	text-underline-offset: .2em;
}

.pg .pg-biz__mail:hover {
	color: var(--ix-cream);
}

/* Who we are: a paper strip rising into the forest top */
.pg-proof {
	position: relative;
	z-index: 1;
	margin-top: calc(-1 * clamp(1.5rem, 4vw, 2.25rem));
}

.pg-proof__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .1rem 1.25rem;
	max-width: 68rem;
	margin: 0 auto;
	padding: .85rem 1.25rem;
	border-radius: var(--pg-radius);
	background: var(--ix-paper);
	list-style: none;
	box-shadow: 0 1px 0 rgba(26, 37, 24, .04), 0 14px 36px rgba(26, 37, 24, .1);
}

@media (min-width: 600px) {
	.pg-proof__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.pg-proof__list {
		grid-template-columns: repeat(4, auto);
		justify-content: space-between;
		padding: 1rem 2rem;
	}
}

.pg-proof__item {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .4rem 0;
	color: var(--ix-ink);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.pg-proof__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: rgba(190, 227, 120, .45);
	color: var(--ix-green-dark);
}

.pg-proof__icon svg {
	width: 1.05rem;
	height: 1.05rem;
}

/* The Times' "T" in ink, as the paper prints it (and as on the home page) */
.pg-proof__icon--nyt {
	color: var(--ix-ink);
}

.pg .pg-proof__text {
	color: inherit;
	text-decoration: none;
}

.pg a.pg-proof__text:hover {
	color: var(--ix-green);
	text-decoration: underline;
	text-decoration-color: rgba(80, 113, 55, .4);
	text-underline-offset: .2em;
}

/* What's in the app: the checklist beside three of its screens */
.pg-app {
	display: grid;
	align-items: center;
	gap: 2.5rem;
}

@media (min-width: 900px) {
	.pg-app {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(2rem, 6vw, 5rem);
		max-width: 68rem;
	}

	.pg-app__phones {
		order: -1;
	}
}

.pg-app__intro {
	max-width: 34rem;
	margin: -.5rem 0 1.4rem;
	color: var(--ix-text);
	line-height: 1.6;
}

.pg-checks {
	display: grid;
	gap: .75rem;
	margin: 0 0 1.6rem;
	padding: 0;
	list-style: none;
}

.pg-checks li {
	position: relative;
	padding-left: 2.15rem;
	color: var(--ix-ink);
	line-height: 1.45;
}

/* The app pages' lime check discs */
.pg-checks li::before {
	content: '';
	position: absolute;
	top: .02rem;
	left: 0;
	width: 1.45rem;
	height: 1.45rem;
	border-radius: 50%;
	background: var(--ix-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A2116' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-8.5'/%3E%3C/svg%3E") center / .85rem no-repeat;
}

.pg .pg-link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--ix-green);
	font-weight: 700;
	text-decoration: none;
}

.pg-link svg {
	width: 1rem;
	height: 1rem;
	transition: transform .25s var(--ix-ease);
}

.pg .pg-link:hover {
	color: var(--ix-green-dark);
}

.pg-link:hover svg {
	transform: translateX(3px);
}

/* Three phones: the recipes in front, cooking and groceries fanned out behind */
.pg-app__phones {
	position: relative;
	display: flex;
	justify-content: center;
	padding-top: 1rem;
}

.pg-phone {
	display: block;
	width: clamp(9rem, 32vw, 12.5rem);
	padding: .4rem;
	border-radius: 1.9rem;
	background: #0F140D;
	box-shadow: 0 30px 60px -22px rgba(26, 37, 24, .5), 0 0 0 1px rgba(26, 37, 24, .08);
}

.pg-phone img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1.55rem;
}

.pg-phone--front {
	position: relative;
	z-index: 2;
}

.pg-phone--left,
.pg-phone--right {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform-origin: 50% 100%;
}

.pg-phone--left {
	transform: translateX(-108%) rotate(-8deg) scale(.84);
}

.pg-phone--right {
	transform: translateX(8%) rotate(8deg) scale(.84);
}

/* How the pilot program works */
.pg-steps {
	display: grid;
	gap: .9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 800px) {
	.pg-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
}

.pg-steps__item {
	padding: 1.4rem 1.5rem 1.5rem;
	border-radius: var(--pg-radius);
	background: var(--ix-paper);
	box-shadow: 0 1px 0 rgba(26, 37, 24, .04), 0 10px 30px rgba(26, 37, 24, .06);
}

.pg-steps__num {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	margin-bottom: .9rem;
	border-radius: 50%;
	background: var(--ix-forest);
	color: var(--ix-lime);
	font-family: var(--ix-display);
	font-size: 1.25rem;
	line-height: 1;
}

/* One per row on phones: the number beside the words */
@media (max-width: 799.98px) {
	.pg-steps__item {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 1rem;
		padding: 1.2rem 1.25rem 1.3rem;
	}

	.pg-steps__num {
		grid-row: span 2;
		margin: 0;
	}
}

.pg .pg-steps__title {
	margin: 0 0 .35rem;
	color: var(--ix-ink);
	font-family: var(--ix-display);
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1.15;
}

.pg-steps__text {
	margin: 0;
	color: var(--ix-text);
	line-height: 1.55;
}

/* The closing email, on a forest card */
.pg-cta {
	margin-top: clamp(1.5rem, 4vw, 2.25rem);
	padding: clamp(1.75rem, 5vw, 2.5rem) 1.25rem;
	border-radius: var(--pg-radius);
	background: var(--ix-forest);
	text-align: center;
}

.pg .pg-cta__text {
	margin: 0;
	color: var(--ix-cream);
	font-family: var(--ix-display);
	font-size: clamp(1.6rem, 4.5vw, 2.1rem);
	line-height: 1.15;
}

.pg-cta .pg-actions {
	margin-top: 1.1rem;
}

.pg-cta__mail {
	color: var(--ix-sage);
}

.pg .pg-cta :focus-visible {
	outline-color: var(--ix-lime);
}

@media (prefers-reduced-motion: reduce) {
	.pg .pg-btn,
	.pg-link svg {
		transition: none;
	}

	.pg .pg-btn:hover {
		transform: none;
	}
}


/* ---------- Notifications off (comment-notifications.html): the comment and its replies ---------- */

.pg-comment {
	padding: 1.4rem 1.5rem;
	border-radius: var(--pg-radius);
	background: var(--ix-paper);
	box-shadow: 0 1px 0 rgba(26, 37, 24, .04), 0 10px 30px rgba(26, 37, 24, .06);
}

.pg-comment__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .2rem .6rem;
	margin: 0;
	color: var(--ix-ink);
}

.pg-comment__head time {
	color: var(--ix-muted);
	font-size: .875rem;
}

.pg-comment__logo {
	width: 20px;
	height: auto;
}

.pg-comment__stars {
	margin: .25rem 0 0;
	color: rgba(26, 37, 24, .2);
	font-size: 1rem;
	letter-spacing: .08em;
}

.pg-comment__stars .is-on {
	color: var(--ix-mustard);
}

.pg-comment__text {
	margin: .6rem 0 0;
	color: var(--ix-text);
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.pg-comment__reply {
	margin-top: 1.1rem;
	padding: 1rem 0 0 1rem;
	border-top: 1px solid var(--ix-line);
	border-left: 3px solid rgba(190, 227, 120, .7);
}

.pg-comment__back {
	margin: 1.25rem 0 0;
}


/* ---------- Feedback (feedback.html): a form in the comment form's design ----------
 * As the recipe and article pages' comment form (comment_section.css #comment-form): a large
 * rounded box for the message, pill fields with an icon, a green pill to send with the paper
 * plane; white fields with the apps' 2px green border, a lighter green while typing. */

#pg-feedback-form {
	scroll-margin-top: calc(var(--pg-nav-h) + 1rem);
}

.pg-fb {
	display: grid;
	gap: .6rem;
}

.pg-fb__field {
	display: grid;
	gap: .3rem;
}

.pg-fb__row {
	display: grid;
	gap: .6rem;
}

@media (min-width: 576px) {
	.pg-fb__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.pg .pg-fb__text,
.pg .pg-fb__input {
	width: 100%;
	border: 2px solid var(--ix-green);
	background-color: #FFF;
	color: var(--ix-ink);
	font-family: var(--ix-sans);
	font-size: 1.0625rem;   /* 16px and up: phones don't zoom in */
	box-shadow: none;
}

.pg .pg-fb__text {
	min-height: 9rem;
	padding: .8rem 1rem;
	border-radius: 20px;
	line-height: 1.5;
	resize: vertical;
}

.pg .pg-fb__input {
	height: 3rem;
	padding: .2rem 1rem 0 2.6rem;
	border-radius: 999px;
	background: #FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%235F6B5B' d='M8 8a3.25 3.25 0 1 0 0-6.5A3.25 3.25 0 0 0 8 8zm0 1.4c-3.2 0-5.75 1.6-5.75 3.6v.85c0 .4.33.65.7.65h10.1c.37 0 .7-.25.7-.65V13c0-2-2.55-3.6-5.75-3.6z'/%3E%3C/svg%3E") 1rem 50% / 1rem no-repeat;
	font-size: 1rem;
}

.pg .pg-fb__input--email {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%235F6B5B' d='M1.5 3.5h13A1 1 0 0 1 15.5 4.5v7a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1zm.6 1.3 5.9 4.1 5.9-4.1H2.1zm11.9 1.2-5.6 3.9a.7.7 0 0 1-.8 0L2 6v5.2h12V6z'/%3E%3C/svg%3E");
}

.pg .pg-fb__text:focus,
.pg .pg-fb__input:focus {
	border-color: #75A153;
	outline: none;
	box-shadow: 0 0 0 4px rgba(117, 161, 83, .18);
}

.pg .pg-fb__text::placeholder,
.pg .pg-fb__input::placeholder {
	color: var(--ix-muted);
	font-family: var(--ix-sans);   /* the site sets placeholders in its display font */
	opacity: 1;
}

.pg .pg-fb [aria-invalid="true"] {
	border-color: #B4553D;
}

.pg-fb__error {
	margin: 0 0 0 1rem;
	color: #B4553D;
	font-size: .875rem;
}

.pg-fb__alert {
	padding: .8rem 1.1rem;
	border-radius: 14px;
	background: rgba(242, 165, 142, .22);
	color: #7A2F1D;
}

.pg-fb__alert p {
	margin: 0;
}

/* Off screen, not display:none: simple bots skip hidden fields */
.pg-fb__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pg-fb__end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1rem;
	margin-top: .25rem;
}

.pg-fb__end .cf-turnstile:empty {
	display: none;
}

/* Send: the comment form's green pill with the paper plane */
.pg .pg-fb__send {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 2.75rem;
	margin-left: auto;
	padding: .55rem 1.2rem .45rem 1.3rem;
	border: 0;
	border-radius: 999px;
	background: var(--ix-green);
	color: #FFF;
	font-family: var(--ix-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s, opacity .2s;
}

.pg .pg-fb__send:hover {
	background: var(--ix-green-dark);
}

.pg .pg-fb__send:disabled {
	opacity: .6;
	cursor: default;
}

.pg-fb__send svg {
	width: 1rem;
	height: 1rem;
	margin-top: -.1rem;
}

.pg-fb__fine {
	margin: .4rem 0 0;
	color: var(--ix-muted);
	font-size: .875rem;
	line-height: 1.5;
}

.pg .pg-fb__fine a {
	color: var(--ix-green);
	text-decoration: underline;
	text-underline-offset: .18em;
}


/* ---------- An eBook's errata (ebook-errata.html): the cover in the top, corrections by page ---------- */

.pg-errata__cover {
	display: block;
	width: min(100%, 15rem);
	height: auto;
	margin: 1.75rem auto 0;
	border-radius: 8px;
	box-shadow: 0 24px 50px rgba(0, 0, 0, .4);
}

@media (min-width: 900px) {
	.pg-errata__cover {
		justify-self: end;
		margin: 0;
	}
}

.pg-errata {
	display: grid;
	gap: .9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pg-errata__item {
	padding: 1.2rem 1.4rem;
	border-radius: var(--pg-radius);
	background: var(--ix-paper);
	box-shadow: 0 1px 0 rgba(26, 37, 24, .04), 0 10px 30px rgba(26, 37, 24, .06);
}

.pg-errata__where {
	margin: 0 0 .4rem;
	color: var(--ix-ink);
}

.pg-errata__where em {
	color: var(--ix-muted);
}

.pg-errata__text {
	color: var(--ix-text);
	line-height: 1.6;
}

.pg-errata__text p {
	margin: 0;
}

.pg-errata__text p + p {
	margin-top: .6rem;
}


/* ---------- The Vegan Starter Guide (vegan-start.html, vegan_start.js): a checklist ---------- */

.vs-progress {
	max-width: 24rem;
	margin: 1.5rem auto 0;
}

.vs-progress__count {
	margin: 0 0 .5rem;
	color: var(--ix-cream);
	font-weight: 700;
}

.vs-progress__track {
	height: .5rem;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(248, 255, 246, .14);
}

.vs-progress__bar {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--ix-lime);
	transition: width .4s var(--ix-ease);
}

.vs-list {
	display: grid;
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vs-step {
	position: relative;
	padding: 1.15rem 1.25rem 1.2rem 4rem;
	border-radius: var(--pg-radius);
	background: var(--ix-paper);
	box-shadow: 0 1px 0 rgba(26, 37, 24, .04), 0 10px 30px rgba(26, 37, 24, .06);
	transition: background-color .25s;
}

/* The checkbox, drawn as the app pages' disc: empty ring, then lime with a tick */
.vs .vs-step__box {
	position: absolute;
	top: 1.05rem;
	left: 1.15rem;
	width: 1.9rem;
	height: 1.9rem;
	margin: 0;
	border: 2px solid rgba(26, 37, 24, .25);
	border-radius: 50%;
	background: #FFF center / 1rem no-repeat;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color .2s, border-color .2s;
}

.vs .vs-step__box:checked {
	border-color: var(--ix-lime);
	background-color: var(--ix-lime);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A2116' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-8.5'/%3E%3C/svg%3E");
}

.vs .vs-step__box:focus-visible {
	outline: 3px solid var(--ix-green);
	outline-offset: 3px;
}

.vs .vs-step__title {
	display: block;
	margin: .2rem 0 0;
	color: var(--ix-ink);
	font-family: var(--ix-display);
	font-size: 1.35rem;
	line-height: 1.2;
	cursor: pointer;
}

.vs-step:has(.vs-step__box:checked) {
	background: #F3F8EA;
}

.vs-step:has(.vs-step__box:checked) .vs-step__title {
	color: var(--ix-green-dark);
}

.vs-step__text {
	margin: .5rem 0 0;
	color: var(--ix-text);
	line-height: 1.6;
}

.vs .vs-step__text a,
.vs .vs-done__text a {
	color: var(--ix-green);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(80, 113, 55, .4);
	text-underline-offset: .18em;
}

/* Every step done: the message, on the forest */
.vs-done {
	margin-bottom: 1rem;
	padding: 1.4rem 1.5rem;
	border-radius: var(--pg-radius);
	background: var(--ix-forest);
	color: var(--ix-sage);
	text-align: center;
}

.vs-done__title {
	margin: 0;
	color: var(--ix-lime);
	font-family: var(--ix-display);
	font-size: 1.8rem;
}

.vs-done__text {
	margin: .5rem 0 0;
	line-height: 1.6;
}

.vs .vs-done__text a {
	color: var(--ix-cream);
	text-decoration-color: rgba(190, 227, 120, .6);
}

.vs-controls {
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
}

.vs .vs-mode {
	min-height: 2.75rem;
	padding: .6rem 1.35rem .5rem;
	border: 1.5px solid var(--ix-green);
	border-radius: 999px;
	background: transparent;
	color: var(--ix-green);
	font-family: var(--ix-sans);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}

.vs .vs-mode[aria-pressed="true"] {
	background: var(--ix-green);
	color: #FFF;
}

/* Screenshot mode: the titles only, closer together */
.vs.is-compact .vs-hide {
	display: none;
}

.vs.is-compact .vs-list {
	gap: .45rem;
}

.vs.is-compact .vs-step {
	padding-top: .8rem;
	padding-bottom: .8rem;
}

.vs.is-compact .vs-step__box {
	top: .7rem;
}

@media (prefers-reduced-motion: reduce) {
	.vs-progress__bar,
	.vs-step,
	.vs .vs-step__box {
		transition: none;
	}
}


/* ---------- An eBook's download (ebook-fulfill.html, ebook-redownload.html) ----------
 * The split top's text holds three states the page's script shows and hides (by id): each a
 * heading with a small disc (a spinner while preparing, a tick when ready, coral when something
 * went wrong), its words and the lime download button. */

.pg-dl__state {
	margin-top: 1.4rem;
}

.pg .pg-dl__h {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .7rem;
	margin: 0 0 .2rem;
	color: var(--ix-cream);
	font-family: var(--ix-display);
	font-size: clamp(1.45rem, 4vw, 1.85rem);
	font-weight: normal;
	line-height: 1.2;
	text-align: left;
}

.pg-dl__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--ix-lime);
	color: var(--ix-forest);
	box-shadow: 0 0 0 6px rgba(190, 227, 120, .12);
}

.pg-dl__icon svg {
	width: 1.3rem;
	height: 1.3rem;
}

.pg-dl__icon--alert {
	background: #F2A58E;
	box-shadow: 0 0 0 6px rgba(242, 165, 142, .12);
}

.pg-spin {
	display: block;
	width: 1.15rem;
	height: 1.15rem;
	border: 2.5px solid rgba(26, 33, 22, .22);
	border-top-color: var(--ix-forest);
	border-radius: 50%;
	animation: pg-spin .9s linear infinite;
}

@keyframes pg-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.pg-spin {
		animation-duration: 2.4s;
	}
}

.pg-dl code {
	padding: .1rem .4rem;
	border-radius: 6px;
	background: rgba(248, 255, 246, .12);
	color: var(--ix-cream);
	font-size: .9em;
	overflow-wrap: anywhere;
}

.pg-dl__photo {
	object-position: 50% 30%;
}

@media (min-width: 900px) {
	.pg-hero--split .pg-dl__h {
		justify-content: flex-start;
	}

	.pg-hero--split .pg-fine {
		margin-inline: 0;
	}
}


/* ---------- The paper top: pages that are only their top ----------
 * The message pages (pages/message.html) and an eBook's download (ebook-fulfill.html,
 * ebook-redownload.html) have nothing below their top, so a forest top left a pale strip between
 * its curve and the footer's. These say their one thing on the page's own paper (.pg-paper in
 * place of .ix-forest), and the footer is the page's dark end. The forest top's light colours,
 * dark here: every text colour is AA on the paper (#EEEFEB): ink 13.8:1, text 7.5:1, muted and
 * the eyebrow's green 4.8:1. */

.pg .pg-paper .pg-title,
.pg .pg-paper .pg-dl__h {
	color: var(--ix-ink);
}

.pg-paper .pg-lede {
	color: var(--ix-text);
}

.pg .pg-paper .pg-lede a {
	color: var(--ix-ink);
	text-decoration-color: rgba(80, 113, 55, .5);
}

.pg-paper .pg-fine {
	color: var(--ix-muted);
}

.pg .pg-paper .pg-fine a {
	color: var(--ix-text);
	text-decoration-color: rgba(69, 78, 67, .4);
}

.pg .pg-paper .pg-fine a:hover {
	color: var(--ix-ink);
}

.pg .pg-paper .pg-btn--ghost {
	color: var(--ix-ink);
	box-shadow: inset 0 0 0 1px rgba(26, 37, 24, .3);
}

@media (hover: hover) {
	.pg .pg-paper .pg-btn--ghost:hover {
		background: rgba(26, 37, 24, .05);
		color: var(--ix-ink);
		box-shadow: inset 0 0 0 1px rgba(26, 37, 24, .55);
	}
}

/* The glows, as soft rings and shadows: light on light doesn't glow */
.pg-paper .pg-msg__orb {
	box-shadow: 0 0 0 8px rgba(190, 227, 120, .3), 0 12px 28px rgba(80, 113, 55, .16);
}

.pg-paper .pg-msg__orb--alert {
	box-shadow: 0 0 0 8px rgba(242, 165, 142, .28), 0 12px 28px rgba(166, 78, 55, .14);
}

.pg-paper .pg-dl__icon {
	box-shadow: 0 0 0 6px rgba(190, 227, 120, .3);
}

.pg-paper .pg-dl__icon--alert {
	box-shadow: 0 0 0 6px rgba(242, 165, 142, .28);
}

.pg-paper .pg-msg__lime {
	box-shadow: 0 0 0 8px rgba(255, 255, 255, .55), 0 16px 34px rgba(26, 37, 24, .14);
}

.pg-paper .pg-news__cover {
	box-shadow: 0 20px 36px -14px rgba(26, 37, 24, .45), 0 2px 6px rgba(26, 37, 24, .18);
}

.pg-paper .pg-hero__photo {
	box-shadow: 0 22px 48px -18px rgba(26, 37, 24, .4);
}

.pg-dl.pg-paper code {
	background: rgba(26, 37, 24, .07);
	color: var(--ix-ink);
}

/* The sign-up (the newsletter's confirm error) and the 404's search: white fields with a rim */
.pg .pg-paper .pg-signup__input {
	border-color: rgba(26, 37, 24, .18);
	background: #FFF;
}

.pg .pg-paper .pg-signup__input:focus {
	border-color: var(--ix-green);
	box-shadow: 0 0 0 4px rgba(190, 227, 120, .45);
}

.pg-paper .pg-signup__feedback {
	color: var(--ix-green-dark);
}

.pg-paper .pg-signup__feedback.is-error {
	color: #A64E37;   /* the coral, dark enough for the paper (4.8:1) */
}