/* ─── Plantiful Life — supplemental styles ──────────────────────────────── */

/* Keyboard focus: accessible, on-brand. Default WP focus is a plain blue outline. */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--leaf);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Anchor scroll-margin so in-page links land below the sticky header. */
:target {
	scroll-margin-top: 5rem;
}

/* Product card — bordered, rounded, padded, with subtle lift on hover.
   Card is a link to the product page, with nested links (App Store badge +
   Visit Site button) elevated so they still navigate to their own URLs. */
.plantiful-product-card {
	position: relative;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	background: #fff;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.plantiful-product-card > * + * {
	margin-top: var(--wp--preset--spacing--20);
}
.plantiful-product-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px -8px rgba(13, 124, 95, 0.18);
	border-color: var(--wp--preset--color--leaf);
}

/* Title link stretches invisibly across the whole card. */
.plantiful-product-card .card-main-link {
	color: var(--wp--preset--color--charcoal);
	text-decoration: none;
	transition: color 0.15s ease;
}
.plantiful-product-card .card-main-link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.plantiful-product-card:hover .card-main-link {
	color: var(--wp--preset--color--forest);
}

/* Nested interactive elements stay above the stretched link. */
.plantiful-product-card .wp-block-button,
.plantiful-product-card .plantiful-app-store-badge,
.plantiful-product-card a:not(.card-main-link),
.plantiful-product-card .plantiful-cta-row {
	position: relative;
	z-index: 2;
}

/* Equal-height product cards — any row of .plantiful-product-card columns
   stretches them to match the tallest sibling. Modern :has() support is ~96%
   in 2026 so this is safe. */
.wp-block-columns:has(> .wp-block-column > .plantiful-product-card) {
	align-items: stretch;
}
.wp-block-columns:has(> .wp-block-column > .plantiful-product-card) > .wp-block-column {
	display: flex;
}
.wp-block-columns:has(> .wp-block-column > .plantiful-product-card) > .wp-block-column > .plantiful-product-card {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Earlier column stacking — WP's default breakpoint is 782px, but at viewports
   between 782px and ~1100px, 3 tight columns squeeze the App Store badge past
   the card edge. Stack them into single column much sooner so each card gets
   full width (and the CTAs have room to sit horizontally). */
@media (max-width: 1099px) {
	.wp-block-columns:has(> .wp-block-column > .plantiful-product-card) {
		flex-direction: column !important;
		gap: var(--wp--preset--spacing--30);
	}
	.wp-block-columns:has(> .wp-block-column > .plantiful-product-card) > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}

/* CTA row on each card — horizontal flex, centered, pinned to the bottom of
   the card so all three cards' CTAs line up. Critically: max-width:100% +
   min-width:0 on children so they can shrink inside a narrow card;
   overflow:hidden as a safety net if a downstream element refuses to shrink. */
.plantiful-cta-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	padding-top: 1.25rem;
	max-width: 100%;
	overflow: hidden;
}
.plantiful-cta-row > * {
	min-width: 0;
}

/* App Store badge — the HTML attribute width="135" was being honored as the
   rendered width. Force width:auto so our CSS height (40px) actually drives
   the sizing and the aspect ratio is maintained. */
.plantiful-product-card .plantiful-app-store-badge img,
.plantiful-cta-row .plantiful-app-store-badge img {
	height: 40px !important;
	width: auto !important;
	max-width: 100%;
}

/* "Visit site →" CTA button — compact enough to fit alongside the badge even
   in a 3-column card layout. */
.plantiful-cta-button {
	display: inline-flex;
	align-items: center;
	background: var(--wp--preset--color--forest);
	color: #fff;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background 0.15s ease, transform 0.15s ease;
}
.plantiful-cta-button:hover,
.plantiful-cta-button:focus-visible {
	background: var(--wp--preset--color--leaf);
	color: #fff;
	transform: translateY(-1px);
}

/* On narrow-to-medium viewports, shrink badge further and tighten button so
   the pair always fits without clipping. */
@media (max-width: 1200px) {
	.plantiful-product-card .plantiful-app-store-badge img,
	.plantiful-cta-row .plantiful-app-store-badge img {
		height: 34px !important;
	}
	.plantiful-cta-button {
		padding: 0.4rem 0.75rem;
		font-size: 0.7rem;
	}
}

/* Prose density tweaks for blog posts. */
.wp-block-post-content p {
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
}
.wp-block-post-content h2,
.wp-block-post-content h3 {
	margin-top: 2.5rem;
}
.wp-block-post-content img {
	border-radius: 12px;
}

/* Selection color — tiny polish detail. */
::selection {
	background: var(--wp--preset--color--leaf);
	color: #fff;
}

/* Section position anchors kept for other decorative uses. */
.plantiful-section--hero,
.plantiful-section--cta {
	position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Product detail pages — App Store screenshot floated to the right of
   the content. Single pseudo-element per page, URL set per page-id.
   Text wraps naturally around it. Collapses to stacked layout on mobile.
   ═══════════════════════════════════════════════════════════════════════════ */
body.page-id-4204 .wp-block-post-content::before,
body.page-id-4205 .wp-block-post-content::before,
body.page-id-4206 .wp-block-post-content::before {
	content: "";
	float: right;
	width: 260px;
	aspect-ratio: 300 / 650;
	margin: 0 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	border-radius: 36px;
	background-size: cover;
	background-position: center;
	box-shadow: 0 16px 40px -8px rgba(13, 124, 95, 0.25);
	shape-outside: inset(0 round 36px);
}
body.page-id-4204 .wp-block-post-content::before {
	background-image: url('../images/plantiful-meal-screenshot.jpg');
}
body.page-id-4205 .wp-block-post-content::before {
	background-image: url('../images/is-it-vegan-screenshot.jpg');
}
body.page-id-4206 .wp-block-post-content::before {
	background-image: url('../images/recipe-tin-screenshot.jpg');
}
@media (max-width: 900px) {
	body.page-id-4204 .wp-block-post-content::before,
	body.page-id-4205 .wp-block-post-content::before,
	body.page-id-4206 .wp-block-post-content::before {
		float: none;
		width: 200px;
		margin: 0 auto var(--wp--preset--spacing--30);
		display: block;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   About page — founder portrait injected between the "About Us" heading
   and the first content block ("We build plant-based software."). Uses
   ::before on post-content (not main) so it sits after post-title in the
   DOM flow. Centered within the content column, doesn't touch the actual
   page content in the database.
   ═══════════════════════════════════════════════════════════════════════════ */
body.page-id-3365 .wp-block-post-content::before {
	content: "";
	display: block;
	width: 160px;
	height: 160px;
	margin: var(--wp--preset--spacing--30) auto var(--wp--preset--spacing--40);
	border-radius: 50%;
	background-image: url('../images/matt.jpg');
	background-size: cover;
	background-position: center 30%;
	border: 4px solid var(--wp--preset--color--forest);
	box-shadow: 0 8px 24px -8px rgba(13, 124, 95, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Page template — keep the auto-centered column (margin:0 auto from WP's
   constrained layout) so the page stays visually centered on wide monitors,
   but force every direct child to share the SAME max-width. That way short
   headings and long paragraphs all occupy the same column and look uniform.
   ═══════════════════════════════════════════════════════════════════════════ */
body.page main.is-layout-constrained > *,
body.page .wp-block-post-content.is-layout-constrained > *,
body.page .wp-block-post-content .wp-block-group.is-layout-constrained > * {
	max-width: 760px;
}

/* Editor-added center-justified flex groups were nesting content to the
   middle of a wider flex container, creating the dramatic indent under
   headings like "Years in the making". Override them to start-align, so
   nested paragraphs sit at the same left edge as their parent column. */
body.page .wp-block-post-content .wp-block-group.is-content-justification-center {
	justify-content: flex-start !important;
	align-items: flex-start !important;
}

/* Keep alignfull / alignwide blocks free to stretch past the 760px cap. */
body.page .wp-block-post-content > .alignfull {
	max-width: none !important;
}
body.page .wp-block-post-content > .alignwide {
	max-width: var(--wp--style--global--wide-size);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Site header — spans full viewport, site title flush-left, nav flush-right,
   with comfortable edge padding. Replaces the old 1100px-constrained layout.
   ═══════════════════════════════════════════════════════════════════════════ */
.plantiful-site-header {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) !important;
	border-bottom: 1px solid var(--wp--preset--color--sage);
	gap: var(--wp--preset--spacing--30);
}
.plantiful-site-header .wp-block-site-title a {
	color: var(--wp--preset--color--forest);
	text-decoration: none;
}
.plantiful-site-header .wp-block-navigation {
	margin-left: auto;
}
/* On small viewports, keep the title + nav flex row but let padding tighten. */
@media (max-width: 640px) {
	.plantiful-site-header {
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) !important;
	}
}

/* Mobile nav overlay (hamburger → full-screen menu) — center items and
   force forest-green links for both the header and footer navigations.
   Default WP behavior leaked right-alignment from the header's flex parent
   into the overlay; this overrides to match the footer nav's centered look. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--cream) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center !important;
	justify-content: center !important;
	text-align: center;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--forest) !important;
	font-weight: 500;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--leaf) !important;
}
/* Close (X) button also green for visual consistency. */
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg {
	fill: var(--wp--preset--color--forest);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Plantiful Life — semantic section + typography classes.
   Lets page content use simple block markup (no complex style objects that
   confuse Gutenberg's validator) while keeping the visual design intact.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Generic section wrapper. Vertical padding + horizontal gutter. */
.plantiful-section {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
	padding-left: var(--wp--preset--spacing--30);
	padding-right: var(--wp--preset--spacing--30);
}
.plantiful-section--wide {
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
}
.plantiful-section--tight {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

/* Hero — centered, constrained width, center-aligned text. */
.plantiful-section--hero > * {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Narrow body sections (manifesto, contact). */
.plantiful-section--narrow > * {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.plantiful-section--narrow-center > * {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* CTA band — forest bg, cream text, centered. */
.plantiful-section--cta {
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--cream);
	text-align: center;
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}
.plantiful-section--cta > * {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.plantiful-section--cta h2,
.plantiful-section--cta h3 {
	color: var(--wp--preset--color--cream);
}
.plantiful-section--cta p {
	color: rgba(253, 248, 240, 0.85);
}
.plantiful-section--cta .wp-block-button__link {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--forest);
}

/* Eyebrow label — small uppercase heading above a section title. */
.plantiful-eyebrow {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--forest);
}
.plantiful-eyebrow--leaf {
	color: var(--wp--preset--color--leaf);
	letter-spacing: 0.08em;
}

/* Lead paragraph — larger muted intro text. */
.plantiful-lead {
	color: var(--wp--preset--color--muted);
	line-height: 1.55;
}

/* Muted body copy — standard card description text. */
.plantiful-muted {
	color: var(--wp--preset--color--muted);
	line-height: 1.55;
}

/* Manifesto-style body — slightly looser leading, full charcoal. */
.plantiful-body-wide {
	color: var(--wp--preset--color--charcoal);
	line-height: 1.7;
}

/* Sage callout card — for pricing notes, "What's next" boxes. */
.plantiful-callout {
	background: var(--wp--preset--color--sage);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}
.plantiful-callout--lg {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--60);
}

/* Rounded blog-post card — used in the homepage "From the blog" grid and
   the /blog/ archive. Designed so every card in a row renders at the same
   visual height regardless of title length, excerpt length, or image aspect
   ratio. */
.plantiful-post-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
	height: 100%;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.plantiful-post-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px -8px rgba(13, 124, 95, 0.15);
	border-color: var(--wp--preset--color--leaf);
}

/* Force a proper CSS grid on any post-template containing post cards — each
   column is an equal fraction of the available width (no fr/max-content
   inconsistency), cards stretch to match the tallest sibling's height. */
.wp-block-post-template.is-layout-grid:has(.plantiful-post-card) {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	align-items: stretch;
	list-style: none;
	padding: 0;
	margin: 0;
}
.wp-block-post-template.is-layout-grid:has(.plantiful-post-card) > li {
	display: flex;
	margin: 0;
}
/* Tablet: 2 columns */
@media (max-width: 1023px) {
	.wp-block-post-template.is-layout-grid:has(.plantiful-post-card) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* Mobile: 1 column */
@media (max-width: 640px) {
	.wp-block-post-template.is-layout-grid:has(.plantiful-post-card) {
		grid-template-columns: 1fr;
	}
}

/* Featured image — fixed 16:9 aspect, cropped to fit. Removes the aspect-
   ratio chaos between landscape, square, and portrait originals. */
.plantiful-post-card .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wp--preset--color--sage);
}
.plantiful-post-card .wp-block-post-featured-image img,
.plantiful-post-card .wp-block-post-featured-image a {
	display: block;
	width: 100%;
	height: 100%;
}
.plantiful-post-card .wp-block-post-featured-image img {
	object-fit: cover;
	border-radius: 0;
}

/* All text content below the image gets uniform padding. */
.plantiful-post-card > *:not(.wp-block-post-featured-image) {
	padding-left: var(--wp--preset--spacing--30);
	padding-right: var(--wp--preset--spacing--30);
}
.plantiful-post-card > .wp-block-post-featured-image + * {
	padding-top: var(--wp--preset--spacing--30);
}
.plantiful-post-card > *:last-child {
	padding-bottom: var(--wp--preset--spacing--30);
}

/* Post date / category tag — small, uppercase, muted. */
.plantiful-post-card .wp-block-post-date,
.plantiful-post-card .wp-block-post-terms {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--10);
}
.plantiful-post-card .wp-block-post-terms a {
	color: var(--wp--preset--color--leaf);
	text-decoration: none;
	font-weight: 600;
}

/* Post title — charcoal (readable), Fraunces, clamped to 3 lines so every
   card's title block is the same height. Hovers to forest to signal link. */
.plantiful-post-card .wp-block-post-title {
	font-size: 1.125rem;
	line-height: 1.35;
	margin: 0 0 var(--wp--preset--spacing--20);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.plantiful-post-card .wp-block-post-title a {
	color: var(--wp--preset--color--charcoal);
	text-decoration: none;
	transition: color 0.15s ease;
}
.plantiful-post-card:hover .wp-block-post-title a {
	color: var(--wp--preset--color--forest);
}

/* Post excerpt — clamped to 3 lines; flex-grow pushes the card to fill
   vertical space evenly so short excerpts don't leave dead white space. */
.plantiful-post-card .wp-block-post-excerpt {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	line-height: 1.55;
	margin: 0;
	flex-grow: 1;
}
.plantiful-post-card .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}
.plantiful-post-card .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--forest);
	font-weight: 600;
	text-decoration: none;
	font-size: 0.875rem;
}
.plantiful-post-card .wp-block-post-excerpt__more-link:hover {
	color: var(--wp--preset--color--leaf);
}

/* Product card title (h3 inside wp:html blocks — theme.json's element.h3
   already applies Fraunces + weight, but size needs to be set explicitly
   because wp:html h3s don't pick up fontSize preset class). */
.plantiful-product-card__title {
	font-size: 1.75rem;
	line-height: 1.25;
	margin: 0 0 var(--wp--preset--spacing--20);
}
.plantiful-product-card__title a {
	color: inherit;
	text-decoration: none;
}

/* Product card icon — 72x72 rounded-square centered at top of each card.
   iOS app icons already have rounded corners baked into the artwork, but we
   add border-radius as a backup to smooth any raw 512x512 square output. */
.plantiful-product-card__icon {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 16px;
	margin: 0 auto var(--wp--preset--spacing--20);
	box-shadow: 0 4px 12px -4px rgba(13, 124, 95, 0.2);
}

/* Outline button variant styled for the Plantiful Life palette — the WP core
   is-style-outline default uses the button's text color, which produces
   a white outline when combined with theme.json's filled button defaults. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--forest);
	border: 2px solid var(--wp--preset--color--forest);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--cream);
}

/* Section title row — title + "See all" link flex-pair. */
.plantiful-section-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Official App Store badge link — required by Apple brand guidelines. */
.plantiful-app-store-badge {
	display: inline-block;
	line-height: 0;
	transition: opacity 0.15s ease, transform 0.15s ease;
	vertical-align: middle;
}
.plantiful-app-store-badge img {
	display: block;
	height: 45px;
	width: auto;
}
.plantiful-app-store-badge:hover,
.plantiful-app-store-badge:focus-visible {
	opacity: 0.85;
	transform: translateY(-1px);
}

/* CTA section — solid forest green anchor at the bottom of the page. */
.plantiful-section--cta {
	background: var(--wp--preset--color--forest);
}

/* ═══════════════════════════════════════════════════════════════════════════
   B2B STUDIO POSITIONING — shared components for homepage + /studio page.
   Paired with tokens added to theme.json (deep-green, mint, amber, pale-green,
   muted-dark). Everything below is used on both the new hybrid homepage and
   the /studio page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Hero (two-column) ──────────────────────────────────────────────────── */
.plantiful-hero-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	margin: var(--wp--preset--spacing--40) auto var(--wp--preset--spacing--50);
}
.plantiful-hero-grid__copy {
	min-width: 0;
}
.plantiful-hero-grid__headline {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.875rem, 4.5vw, 2.5rem);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: #1A2E1F;
	margin: 0 0 1rem;
}
.plantiful-hero-grid__subhead {
	font-size: clamp(0.9375rem, 1.1vw, 1rem);
	line-height: 1.55;
	color: #3D4A3D;
	margin: 0 0 1.375rem;
	max-width: 440px;
}
.plantiful-hero-grid__phone {
	display: flex;
	justify-content: center;
	align-items: center;
}
/* Device wrapper — dark bezel with notch, contains the screenshot. */
.plantiful-hero-grid__device {
	position: relative;
	width: 100%;
	max-width: 220px;
	background: #1A2E1F;
	border-radius: 32px;
	padding: 12px 10px 10px;
	box-shadow: 0 24px 48px -12px rgba(13, 124, 95, 0.25);
}
.plantiful-hero-grid__device::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 44%;
	max-width: 74px;
	height: 10px;
	background: #0C1A12;
	border-radius: 5px;
	z-index: 2;
}
.plantiful-hero-grid__device img,
.plantiful-hero-grid__device svg {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
	background: #FDF8F0;
}
/* Legacy selector kept for the (now unused) bare-SVG variant. */
.plantiful-hero-grid__phone > img:not(.plantiful-hero-grid__device img),
.plantiful-hero-grid__phone > svg {
	width: 100%;
	max-width: 220px;
	height: auto;
}
@media (max-width: 768px) {
	.plantiful-hero-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
		text-align: center;
	}
	.plantiful-hero-grid__subhead {
		margin-left: auto;
		margin-right: auto;
	}
	.plantiful-hero-grid__phone {
		order: 2;
	}
	.plantiful-hero-grid__phone svg {
		max-width: 200px;
	}
}

/* ─── Trust strip (inline stat list with dividers) ───────────────────────── */
.plantiful-trust-strip {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 1rem;
	border-top: 0.5px solid rgba(13, 124, 95, 0.18);
	font-size: 0.75rem;
	color: #3D4A3D;
}
.plantiful-trust-strip__item {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	white-space: nowrap;
}
.plantiful-trust-strip__stars {
	color: #C77A0C;
	letter-spacing: 1px;
}
.plantiful-trust-strip__divider {
	width: 1px;
	height: 10px;
	background: rgba(13, 124, 95, 0.25);
}
@media (max-width: 768px) {
	.plantiful-trust-strip {
		justify-content: center;
	}
}

/* ─── Pill button variants (outline secondary) ───────────────────────────── */
.plantiful-pill-btn,
a.plantiful-pill-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.6875rem 1.375rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	border: 1px solid transparent;
	transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
	cursor: pointer;
}
.plantiful-pill-btn--primary {
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--cream);
}
.plantiful-pill-btn--primary:hover {
	background: var(--wp--preset--color--leaf);
	color: var(--wp--preset--color--cream);
	transform: translateY(-1px);
}
.plantiful-pill-btn--outline {
	background: transparent;
	color: var(--wp--preset--color--forest);
	border-color: var(--wp--preset--color--forest);
}
.plantiful-pill-btn--outline:hover {
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--cream);
	transform: translateY(-1px);
}
.plantiful-pill-btn--on-dark {
	background: var(--wp--preset--color--cream);
	color: #1A2E1F;
}
.plantiful-pill-btn--on-dark:hover {
	background: #FFFFFF;
	color: #1A2E1F;
	transform: translateY(-1px);
}
.plantiful-pill-btns {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 0 1.375rem;
}
@media (max-width: 768px) {
	.plantiful-pill-btns {
		justify-content: center;
	}
}

/* ─── Tagline strip (italic serif between sections) ──────────────────────── */
.plantiful-tagline-strip {
	text-align: center;
	padding: 0.875rem 0;
	border-top: 0.5px solid rgba(13, 124, 95, 0.18);
	border-bottom: 0.5px solid rgba(13, 124, 95, 0.18);
	margin-bottom: var(--wp--preset--spacing--40);
}
.plantiful-tagline-strip p {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 1rem;
	color: var(--wp--preset--color--forest);
	margin: 0;
}

/* ─── B2B "For brands and teams" dark band ───────────────────────────────── */
.plantiful-brands-band {
	background: #1A2E1F;
	color: var(--wp--preset--color--cream);
	padding: clamp(2rem, 5vw, 3rem) var(--wp--preset--spacing--30) clamp(2.5rem, 6vw, 3.5rem);
}
.plantiful-brands-band__inner {
	max-width: 680px;
	margin: 0 auto;
	text-align: center;
}
.plantiful-brands-band__eyebrow {
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8FC9A8;
	font-weight: 500;
	margin-bottom: 0.625rem;
}
.plantiful-brands-band__headline {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.375rem, 3.2vw, 1.625rem);
	font-weight: 500;
	line-height: 1.15;
	color: var(--wp--preset--color--cream);
	margin: 0 0 0.625rem;
}
.plantiful-brands-band__subhead {
	font-size: 0.875rem;
	line-height: 1.55;
	color: #C5D4CA;
	margin: 0 auto 1.5rem;
	max-width: 460px;
}
.plantiful-brands-band__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.625rem;
	margin: 0 auto 1.5rem;
	max-width: 680px;
}
@media (max-width: 640px) {
	.plantiful-brands-band__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
.plantiful-brands-band__tile {
	background: rgba(253, 248, 240, 0.06);
	border-radius: 8px;
	padding: 0.875rem 0.625rem;
	text-align: center;
}
.plantiful-brands-band__tile-icon {
	font-size: 1.25rem;
	line-height: 1;
	margin-bottom: 0.5rem;
}
.plantiful-brands-band__tile-label {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--wp--preset--color--cream);
}

/* ─── Expanded product card (revised style from attached screenshot) ─────── */
.plantiful-app-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 0.5px solid rgba(13, 124, 95, 0.2);
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.plantiful-app-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 36px -12px rgba(13, 124, 95, 0.22);
	border-color: var(--wp--preset--color--leaf);
}
.plantiful-app-card__screenshot {
	position: relative;
	background: #E8F0E4;
	padding: 1.75rem 0 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
}
/* Device chrome: dark bezel with notch wrapping the screenshot image. */
.plantiful-app-card__phone {
	position: relative;
	width: 72%;
	max-width: 195px;
	margin-bottom: -1px; /* seamless into the card body */
	background: #1A2E1F;
	border-top-left-radius: 28px;
	border-top-right-radius: 28px;
	padding: 10px 8px 0;
	box-shadow: 0 -10px 32px -12px rgba(26, 46, 31, 0.35);
}
.plantiful-app-card__phone::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 44%;
	max-width: 70px;
	height: 10px;
	background: #0C1A12;
	border-radius: 5px;
	z-index: 2;
}
.plantiful-app-card__phone img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 14.5;
	object-fit: cover;
	object-position: top center;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	background: #FDF8F0;
}
.plantiful-app-card__body {
	padding: 1.125rem 1.25rem 1.375rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}
.plantiful-app-card__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.125rem;
}
.plantiful-app-card__icon {
	width: 24px;
	height: 24px;
	border-radius: 5px;
	flex-shrink: 0;
	object-fit: cover;
}
.plantiful-app-card__category {
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	font-weight: 500;
}
.plantiful-app-card__price {
	margin-left: auto;
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 500;
	background: var(--wp--preset--color--pale-green);
	color: var(--wp--preset--color--forest);
	padding: 3px 8px;
	border-radius: 999px;
}
.plantiful-app-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.2;
	color: #1A2E1F;
	margin: 0;
}
.plantiful-app-card__title a {
	color: inherit;
	text-decoration: none;
}
.plantiful-app-card__description {
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
	margin: 0;
}
.plantiful-app-card__rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: #3D4A3D;
	margin-top: 0.25rem;
}
.plantiful-app-card__rating-stars {
	color: var(--wp--preset--color--amber);
	letter-spacing: 1px;
}
/* CTA rows — split into primary (App Store) + secondary (Visit site).
   Both rows always render with reserved min-height so App Store badges
   align horizontally across all cards, regardless of whether a given
   card has a secondary CTA. */
.plantiful-app-card__cta-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	padding-top: 0.75rem;
	min-height: 54px;
}
.plantiful-app-card__cta-primary .plantiful-app-store-badge img {
	height: 40px;
}
.plantiful-app-card__cta-secondary {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-top: 0.25rem;
}
.plantiful-app-card__visit {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--forest);
	color: var(--wp--preset--color--forest);
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	line-height: 1;
	transition: background 0.15s ease, color 0.15s ease;
}
.plantiful-app-card__visit:hover {
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--cream);
}

/* Apps grid — stay 3-col on every desktop/laptop size, stack 1-col on mobile. */
.plantiful-apps-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 680px) {
	.plantiful-apps-grid { grid-template-columns: 1fr; }
}

/* At narrower desktop widths, tighten card internal padding so 3-col fits. */
@media (max-width: 1100px) {
	.plantiful-app-card__body { padding: 1rem 1rem 1.125rem; }
	.plantiful-app-card__title { font-size: 1.1875rem; }
	.plantiful-app-card__description { font-size: 0.75rem; }
	.plantiful-app-card__cta-primary .plantiful-app-store-badge img { height: 36px; }
	.plantiful-app-card__cta-primary { min-height: 50px; }
	.plantiful-app-card__visit { padding: 0.4375rem 0.875rem; font-size: 0.75rem; }
}

/* ─── Studio page: services grid, process strip, case study ──────────────── */
.plantiful-services-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0 auto;
	max-width: 1000px;
}
@media (max-width: 640px) {
	.plantiful-services-grid { grid-template-columns: 1fr; }
}
.plantiful-service-card {
	background: #FFFFFF;
	border: 0.5px solid rgba(13, 124, 95, 0.2);
	border-radius: 12px;
	padding: 1.5rem 1.375rem;
}
.plantiful-service-card__icon {
	font-size: 1.5rem;
	line-height: 1;
	margin-bottom: 0.75rem;
}
.plantiful-service-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 500;
	color: #1A2E1F;
	margin: 0 0 0.5rem;
}
.plantiful-service-card__body {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.875rem;
}
.plantiful-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}
.plantiful-chip {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 500;
	background: var(--wp--preset--color--pale-green);
	color: var(--wp--preset--color--forest);
	padding: 3px 8px;
	border-radius: 999px;
}

.plantiful-process-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0 auto;
	max-width: 1100px;
}
@media (max-width: 768px) {
	.plantiful-process-strip { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--20); }
}
.plantiful-process-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 1rem;
	margin-bottom: 0.75rem;
}
.plantiful-process-step__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 500;
	color: #1A2E1F;
	margin: 0 0 0.375rem;
}
.plantiful-process-step__body {
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.plantiful-case-study {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	max-width: 960px;
	margin: 0 auto;
	background: #FFFFFF;
	border: 0.5px solid rgba(13, 124, 95, 0.2);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--40);
}
@media (max-width: 768px) {
	.plantiful-case-study {
		grid-template-columns: 1fr;
		text-align: center;
	}
}
.plantiful-case-study__visual {
	background: var(--wp--preset--color--pale-green);
	border-radius: 12px;
	padding: 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.plantiful-case-study__visual svg {
	width: 100%;
	max-width: 160px;
	height: auto;
}
.plantiful-case-study__meta {
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.5rem;
}
.plantiful-case-study__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 500;
	color: #1A2E1F;
	margin: 0 0 0.75rem;
}
.plantiful-case-study__body {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
	margin: 0 0 1rem;
}

/* ─── Studio intake form (dark section) ──────────────────────────────────── */
.plantiful-intake-band {
	background: #1A2E1F;
	color: var(--wp--preset--color--cream);
	padding: clamp(2.5rem, 6vw, 4rem) var(--wp--preset--spacing--30);
}
.plantiful-intake-band__inner {
	max-width: 520px;
	margin: 0 auto;
}
.plantiful-intake-band .wp-block-heading,
.plantiful-intake-band h2,
.plantiful-intake-band h3 {
	color: var(--wp--preset--color--cream);
	text-align: center;
}
.plantiful-intake-band p {
	color: #C5D4CA;
	text-align: center;
}

/* Style WPForms inputs when they're inside the dark intake band. */
.plantiful-intake-band .wpforms-field-label,
.plantiful-intake-band .wpforms-field label {
	color: var(--wp--preset--color--cream) !important;
	font-size: 0.8125rem;
	font-weight: 500;
}
.plantiful-intake-band .wpforms-field input[type="text"],
.plantiful-intake-band .wpforms-field input[type="email"],
.plantiful-intake-band .wpforms-field select,
.plantiful-intake-band .wpforms-field textarea {
	background: rgba(253, 248, 240, 0.08) !important;
	border: 0.5px solid rgba(253, 248, 240, 0.15) !important;
	color: var(--wp--preset--color--cream) !important;
	border-radius: 8px !important;
	padding: 0.75rem 0.875rem !important;
}
.plantiful-intake-band .wpforms-field input::placeholder,
.plantiful-intake-band .wpforms-field textarea::placeholder {
	color: rgba(253, 248, 240, 0.5) !important;
}
.plantiful-intake-band .wpforms-field select option {
	background: #1A2E1F;
	color: var(--wp--preset--color--cream);
}
.plantiful-intake-band .wpforms-submit {
	background: var(--wp--preset--color--cream) !important;
	color: #1A2E1F !important;
	border: none !important;
	padding: 0.75rem 1.625rem !important;
	border-radius: 999px !important;
	font-weight: 500 !important;
	font-size: 0.875rem !important;
	transition: transform 0.15s ease;
}
.plantiful-intake-band .wpforms-submit:hover {
	background: #FFFFFF !important;
	transform: translateY(-1px);
}
.plantiful-intake-band .wpforms-submit-container {
	text-align: center !important;
}
.plantiful-intake-band .wpforms-confirmation-container-full {
	background: rgba(253, 248, 240, 0.08) !important;
	border: 0.5px solid rgba(253, 248, 240, 0.15) !important;
	color: var(--wp--preset--color--cream) !important;
	border-radius: 8px !important;
	text-align: center;
}

/* ─── Credential strip (small pills, studio hero) ───────────────────────── */
.plantiful-credential-strip {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	background: var(--wp--preset--color--pale-green);
	border-radius: 999px;
	padding: 0.625rem 1.25rem;
	margin: 0 auto;
	font-size: 0.75rem;
	color: #1A2E1F;
	align-items: center;
	justify-content: center;
}
.plantiful-credential-strip__item {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}
.plantiful-credential-strip__divider {
	width: 1px;
	height: 10px;
	background: rgba(13, 124, 95, 0.3);
}
@media (max-width: 560px) {
	.plantiful-credential-strip {
		border-radius: 16px;
		flex-direction: column;
		gap: 0.5rem;
	}
	.plantiful-credential-strip__divider { display: none; }
}

/* ─── Breadcrumb ─────────────────────────────────────────────────────────── */
.plantiful-breadcrumb {
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted);
	margin: var(--wp--preset--spacing--30) auto 0;
}
.plantiful-breadcrumb a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.plantiful-breadcrumb a:hover { color: var(--wp--preset--color--forest); }