/*
Theme Name:   AI Marketing
Description:  The brand look on Frost: a warm paper page, Instrument Serif headings with a cobalt italic accent, small monospace labels, hairline-ruled grids and ink buttons. The palette is applied to the colour names Frost's templates and patterns use so they come out in the brand's colours, plus the styles for the sections the AI Marketer Bridge plugin writes. Frost supplies the other templates and the pattern library.
Template:     frost
Version:      0.4.0
Requires at least: 6.9
Requires PHP: 8.0
License:      GPL-2.0-or-later
Text Domain:  ai-marketing-theme
*/

:root {
	--site-mono: var(--wp--preset--font-family--jetbrains-mono);
	--site-serif: var(--wp--preset--font-family--instrument-serif);
	--site-rule: var(--wp--preset--color--border-light);
}

/* The italic word in a heading is the accent: serif italic in cobalt. */
h1 em,
h2 em,
h3 em {
	font-style: italic;
	color: var(--wp--preset--color--primary);
}

/* Header */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 20;
}
.wp-site-blocks {
	overflow-x: clip;
}
/* The bands run edge to edge, so the page content meets the header and the footer with no gap. */
.wp-site-blocks > main {
	margin-block: 0;
}
/* A page that ends on a band (the closing call to action) meets the footer with no paper between. */
.wp-site-blocks > main:has(.entry-content > .ai-section:last-child) {
	padding-bottom: 0 !important;
}
.site-header {
	background-color: color-mix(in srgb, var(--wp--preset--color--tertiary) 84%, transparent) !important;
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: 1px solid var(--site-rule);
}
.site-header .brand-mark {
	display: inline-flex;
	line-height: 0;
}
.site-header .wp-block-site-title {
	font-family: var(--site-serif);
	font-weight: 400;
	letter-spacing: -0.01em;
	font-size: 1.7rem !important;
	line-height: 1;
}
.site-header .wp-block-site-title a {
	text-decoration: none;
	color: var(--wp--preset--color--main);
}
.site-header .wp-block-navigation {
	font-size: 0.95rem;
}
.site-header .wp-block-navigation a {
	text-decoration: none;
	color: var(--wp--preset--color--secondary);
}
.site-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--main);
}
.site-header .wp-block-navigation__responsive-container-open {
	border: 1px solid var(--site-rule);
	border-radius: 3px;
	background: transparent;
	padding: 8px;
}
/* The Features dropdown: a paper card with a hairline, like the rest of the header. Inside the mobile overlay the menu
   already has its own background, so only the desktop dropdown is styled. */
.site-header .wp-block-navigation:not(.has-modal-open) .wp-block-navigation__submenu-container {
	min-width: 220px;
	padding: 6px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--site-rule);
	border-radius: 4px;
	box-shadow: 0 16px 40px rgb(15 17 21 / 10%);
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 12px;
	border-radius: 3px;
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--main);
}
@media (max-width: 600px) {
	.site-header .alignwide {
		flex-wrap: nowrap;
	}
	.site-header .wp-block-button__link {
		padding: 9px 14px;
	}
	.site-header .wp-block-site-title {
		font-size: 1.45rem !important;
	}
}

/* Buttons: ink, square, set in mono capitals. The outline style is a hairline of ink. */
.wp-block-button__link {
	padding: 14px 22px;
	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		border-color 0.15s ease;
}
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline-background .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--main);
	border: 1px solid var(--wp--preset--color--main);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline-background .wp-block-button__link:hover {
	background: var(--wp--preset--color--main);
	color: var(--wp--preset--color--base);
}
.site-header .wp-block-button__link {
	padding: 10px 18px;
}

/* Sections rendered by the AI Marketer Bridge plugin. Each one sits in a full-width band, with a hairline between
   bands: a page of these alternates between the paper colour and a lighter panel, and the first one is the hero. A
   mono counter ("01 /") labels each section's heading. */
.entry-content {
	counter-reset: section;
}
.ai-section {
	position: relative;
	isolation: isolate;
	max-width: min(1120px, 100%) !important;
	padding-block: clamp(56px, 9vw, 120px);
}
.ai-section::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	z-index: -1;
	border-top: 1px solid var(--site-rule);
}
.ai-section:nth-child(even)::before {
	background: var(--wp--preset--color--base);
}
.ai-section h2 {
	font-size: clamp(2.2rem, 4.6vw, 3.6rem);
	line-height: 1.04;
	margin-top: 0;
}
.ai-section h2::before {
	counter-increment: section;
	content: counter(section, decimal-leading-zero) " /";
	display: block;
	margin-bottom: 18px;
	font-family: var(--site-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--primary);
}
.ai-section p,
.ai-section li {
	font-size: 1.075rem;
	line-height: 1.65;
}

/* Hero: the first text section, or a page that opens with Frost's hero pattern (its group is called "welcome"). The
   headline is left-aligned on a soft haze, with the accent words in italic. */
.entry-content > .ai-text:first-child,
.welcome {
	position: relative;
	isolation: isolate;
	text-align: left;
	padding-block: clamp(72px, 12vw, 168px) clamp(56px, 8vw, 112px) !important;
}
.entry-content > .ai-text:first-child {
	display: block;
}
/* Frost centres the pattern's children at a narrow width; the hero's text starts where the other sections do, at the edge
   of the page's content box. */
.welcome {
	padding-inline: 0 !important;
	max-width: min(1120px, 100%);
	margin-inline: auto !important;
}
.welcome > * {
	margin-inline: 0 !important;
}
.welcome > :not(h2):not(p) {
	max-width: none !important;
}
.entry-content > .ai-text:first-child::before,
.welcome::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	z-index: -1;
	border-top: 0;
	/* A photo of soft sunset clouds (Davies Designs Studio, Unsplash License), washed with the paper colour so the
	   headline stays legible: nearly solid under the text, letting the photo through on the right. */
	background:
		linear-gradient(
			90deg,
			var(--wp--preset--color--tertiary) 0%,
			rgb(246 244 238 / 92%) 50%,
			rgb(246 244 238 / 52%) 76%,
			rgb(246 244 238 / 18%) 100%
		),
		linear-gradient(180deg, rgb(246 244 238 / 0%) 60%, rgb(246 244 238 / 55%) 100%),
		url("assets/images/hero.jpg");
	background-repeat: no-repeat;
	background-position:
		0 0,
		0 0,
		70% 40%;
	background-size:
		auto,
		auto,
		cover;
	background-color: var(--wp--preset--color--tertiary);
}
/* On a narrow hero the text spans the whole width, so the paper wash is stronger. */
@media (max-width: 899px) {
	.entry-content > .ai-text:first-child::before,
	.welcome::before {
		background-image:
			linear-gradient(180deg, rgb(246 244 238 / 95%), rgb(246 244 238 / 88%)),
			linear-gradient(180deg, rgb(246 244 238 / 0%) 60%, rgb(246 244 238 / 55%) 100%),
			url("assets/images/hero.jpg");
	}
}
.entry-content > .ai-text:first-child h2,
.welcome .wp-block-heading {
	font-size: clamp(2.8rem, 7.6vw, 6.2rem) !important;
	line-height: 0.98;
	letter-spacing: -0.025em;
	max-width: 12em !important;
	margin-inline: 0 !important;
	text-align: left !important;
}
.entry-content > .ai-text:first-child h2::before {
	content: none;
}
.welcome .wp-block-heading::after {
	content: none;
}
.entry-content > .ai-text:first-child p,
.welcome p {
	font-size: clamp(1.08rem, 1.7vw, 1.25rem) !important;
	color: #2e323b;
	text-shadow: 0 0 14px rgb(246 244 238 / 90%);
	max-width: 36em !important;
	margin: 1.6em 0 0 !important;
	text-align: left !important;
}
.welcome .wp-block-buttons,
.entry-content > .ai-text:first-child .wp-block-buttons {
	justify-content: flex-start !important;
	margin-top: 36px !important;
}
.ai-hero h1 {
	font-size: clamp(2.4rem, 5vw, 3.6rem);
}
.ai-hero p {
	font-size: 1.2rem;
	color: var(--wp--preset--color--secondary);
	max-width: 36em;
}

/* The dark statement band that follows the hero (a Frost group with the "contrast" background) */
.entry-content > .has-contrast-background-color {
	padding-block: clamp(64px, 9vw, 120px) !important;
}
.entry-content > .has-contrast-background-color h2 {
	font-size: clamp(2rem, 4.4vw, 3.4rem) !important;
	line-height: 1.06;
	text-align: left !important;
	max-width: 14em;
	margin-inline: 0 !important;
}
.entry-content > .has-contrast-background-color p {
	color: #b9bdc7;
	text-align: left !important;
	max-width: 40em;
	margin-inline: 0 !important;
}
.entry-content > .has-contrast-background-color .wp-block-group {
	max-width: 1120px !important;
	margin-inline: auto !important;
}

/* The three expectations in the dark band: ruled columns under the heading */
.entry-content > .has-contrast-background-color .ai-expect {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 3.5vw, 56px);
	margin-top: clamp(36px, 5vw, 64px) !important;
}
.entry-content > .has-contrast-background-color .ai-expect > .ai-expect-item {
	margin: 0 !important;
	padding-top: 24px;
	border-top: 1px solid #3b4050;
}
.entry-content > .has-contrast-background-color .ai-expect-item h3 {
	margin: 0 0 14px;
	color: var(--wp--preset--color--base);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.12;
}
.entry-content > .has-contrast-background-color .ai-expect-item p {
	margin: 0 !important;
	font-size: 1.05rem;
	line-height: 1.65;
}
@media (min-width: 900px) {
	.entry-content > .has-contrast-background-color .ai-expect-item h3 {
		min-height: 2.24em;
	}
}
@media (max-width: 899px) {
	.entry-content > .has-contrast-background-color .ai-expect {
		grid-template-columns: 1fr;
	}
}

/* Text sections: heading on the left, words on the right */
.ai-text {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: clamp(32px, 6vw, 88px);
	align-items: start;
}
.ai-text > h2 {
	grid-column: 1;
	grid-row: 1 / span 3;
}
.ai-text > :not(h2) {
	grid-column: 2;
	margin-block: 0 1em;
}
@media (max-width: 800px) {
	.ai-text {
		display: block;
	}
}

/* Pricing: a list in a text section becomes plan cells in a ruled grid. A parent theme's rules can take the padding off
   a post's first and last list item, so these selectors are written to outrank that. */
.ai-text:has(> ul) {
	display: block;
}
.ai-text > ul {
	list-style: none;
	padding: 0;
	margin: 40px 0 28px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0;
	border-top: 1px solid var(--site-rule);
	border-left: 1px solid var(--site-rule);
}
.entry-content .ai-section.ai-text > ul > li {
	background: var(--wp--preset--color--base);
	border-right: 1px solid var(--site-rule);
	border-bottom: 1px solid var(--site-rule);
	padding: 36px 28px;
	font-size: 1.05rem;
}
.ai-section:nth-child(even).ai-text > ul > li {
	background: var(--wp--preset--color--tertiary);
}
.ai-text > ul > li:nth-child(2) {
	box-shadow: inset 0 3px 0 var(--wp--preset--color--primary);
}
.ai-text > ul > li strong {
	display: block;
	font-family: var(--site-serif);
	font-weight: 400;
	font-size: 2rem;
	line-height: 1.1;
	margin-bottom: 0.4em;
}
.ai-text:has(> ul) > p {
	color: var(--wp--preset--color--secondary);
	max-width: 36em;
}

/* Feature cards: cells of a hairline grid, each with a serif title */
.ai-features {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0 !important;
}
.ai-features > h2 {
	grid-column: 1 / -1;
	max-width: 14em;
	margin-bottom: clamp(32px, 5vw, 56px);
}
.ai-feature {
	background: transparent;
	border-top: 1px solid var(--site-rule);
	border-right: 1px solid var(--site-rule);
	padding: 32px 28px 36px;
	transition: background-color 0.18s ease;
}
.ai-feature:nth-of-type(3n + 1) {
	border-left: 1px solid var(--site-rule);
}
.ai-features > .ai-feature:last-child {
	border-bottom: 1px solid var(--site-rule);
}
@media (min-width: 900px) {
	.ai-features > .ai-feature:nth-last-child(-n + 3) {
		border-bottom: 1px solid var(--site-rule);
	}
}
/* Five cards fill two rows evenly: three across the top, two wider ones below. */
@media (min-width: 900px) {
	.ai-features:has(> .ai-feature:nth-child(6)):not(:has(> .ai-feature:nth-child(7))) {
		grid-template-columns: repeat(6, 1fr);
	}
	.ai-features:has(> .ai-feature:nth-child(6)):not(:has(> .ai-feature:nth-child(7))) > .ai-feature {
		grid-column: span 2;
	}
	.ai-features:has(> .ai-feature:nth-child(6)):not(:has(> .ai-feature:nth-child(7))) > .ai-feature:nth-of-type(n + 4) {
		grid-column: span 3;
	}
	.ai-features:has(> .ai-feature:nth-child(6)):not(:has(> .ai-feature:nth-child(7))) > .ai-feature:nth-of-type(3) {
		border-bottom: 0;
	}
}
/* Three cards, each a wide row: the picture fills the left half of the card, as large as the pictures on the wide cards of
   "One app, not a stack of tools", with the words beside it. */
@media (min-width: 900px) {
	.ai-features:has(> .ai-feature:nth-child(4)):not(:has(> .ai-feature:nth-child(5))) {
		grid-template-columns: 1fr;
	}
	.ai-features:has(> .ai-feature:nth-child(4)):not(:has(> .ai-feature:nth-child(5))) > .ai-feature {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr auto auto 1fr;
		padding: 0;
		border-left: 1px solid var(--site-rule);
		border-bottom: 0;
	}
	.ai-features:has(> .ai-feature:nth-child(4)):not(:has(> .ai-feature:nth-child(5))) > .ai-feature:last-child {
		border-bottom: 1px solid var(--site-rule);
	}
	.ai-features:has(> .ai-feature:nth-child(4)):not(:has(> .ai-feature:nth-child(5))) > .ai-feature > .ai-shot {
		grid-column: 1;
		grid-row: 1 / -1;
		margin: 0;
	}
	.ai-features:has(> .ai-feature:nth-child(4)):not(:has(> .ai-feature:nth-child(5))) > .ai-feature > .ai-shot img {
		border-right: 1px solid var(--site-rule);
	}
	.ai-features:has(> .ai-feature:nth-child(4)):not(:has(> .ai-feature:nth-child(5))) > .ai-feature > h3,
	.ai-features:has(> .ai-feature:nth-child(4)):not(:has(> .ai-feature:nth-child(5))) > .ai-feature > p {
		grid-column: 2;
		margin-inline: clamp(32px, 5vw, 56px);
	}
	.ai-features:has(> .ai-feature:nth-child(4)):not(:has(> .ai-feature:nth-child(5))) > .ai-feature > h3 {
		grid-row: 2;
		font-size: 2.2rem;
		margin-bottom: 14px;
	}
	.ai-features:has(> .ai-feature:nth-child(4)):not(:has(> .ai-feature:nth-child(5))) > .ai-feature > p {
		grid-row: 3;
		font-size: 1.1rem;
	}
}
.ai-feature:hover {
	background: var(--wp--preset--color--base);
}
.ai-section:nth-child(even) .ai-feature:hover {
	background: var(--wp--preset--color--tertiary);
}
.ai-feature::before {
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	margin-bottom: 28px;
	border: 1px solid var(--site-rule);
	border-radius: 3px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M11 29 L18 22 L23 26 L33 15' fill='none' stroke='%232447ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='33' cy='15' r='2.4' fill='%232447ff'/%3E%3C/svg%3E")
		center / 70% no-repeat,
		var(--wp--preset--color--base);
}
/* Icons for the cards of the "coworker" and "one app" sections: the card's class says which (ai-icon-goal and so on), and
   the tile keeps the same frame as the generic one. */
.ai-feature.ai-icon-goal::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%232447ff%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%225%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%221.2%22 fill=%22%232447ff%22/%3E%3C/svg%3E");
	background-size: 54%;
}
.ai-feature.ai-icon-investigate::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%232447ff%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2210.5%22 cy=%2210.5%22 r=%226.5%22/%3E%3Cpath d=%22M15.5 15.5 L21 21%22/%3E%3C/svg%3E");
	background-size: 54%;
}
.ai-feature.ai-icon-away::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%232447ff%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7 V12 L15.5 14%22/%3E%3C/svg%3E");
	background-size: 54%;
}
.ai-feature.ai-icon-remember::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%232447ff%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 3.5 H18 V21 L12 16.5 L6 21 Z%22/%3E%3C/svg%3E");
	background-size: 54%;
}
.ai-feature.ai-icon-ask::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%232447ff%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3 L20 6 V12 C20 16.5 16.5 19.5 12 21 C7.5 19.5 4 16.5 4 12 V6 Z%22/%3E%3Cpath d=%22M8.5 12 L11 14.5 L15.5 9.5%22/%3E%3C/svg%3E");
	background-size: 54%;
}
.ai-feature.ai-icon-ai::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%232447ff%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2.5 12 C5 7 8.5 5 12 5 C15.5 5 19 7 21.5 12 C19 17 15.5 19 12 19 C8.5 19 5 17 2.5 12 Z%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/svg%3E");
	background-size: 54%;
}
.ai-feature.ai-icon-search::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%232447ff%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 17 L9 11 L13 14 L21 6%22/%3E%3Cpath d=%22M15 6 H21 V12%22/%3E%3C/svg%3E");
	background-size: 54%;
}
.ai-feature.ai-icon-journeys::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%232447ff%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%226%22 cy=%226%22 r=%222.5%22/%3E%3Ccircle cx=%2218%22 cy=%2218%22 r=%222.5%22/%3E%3Cpath d=%22M8.5 6 H14 C16.5 6 16.5 12 14 12 H10 C7.5 12 7.5 18 10 18 H15.5%22/%3E%3C/svg%3E");
	background-size: 54%;
}
.ai-feature.ai-icon-chat::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%232447ff%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 5 H20 V16 H11 L6.5 20 V16 H4 Z%22/%3E%3C/svg%3E");
	background-size: 54%;
}
.ai-feature.ai-icon-content::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%232447ff%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 3 H14 L19 8 V21 H6 Z%22/%3E%3Cpath d=%22M14 3 V8 H19%22/%3E%3Cpath d=%22M9 13 H16 M9 17 H14%22/%3E%3C/svg%3E");
	background-size: 54%;
}
/* The "coworker" cards have no picture, so their icons are larger. */
.ai-feature:is(.ai-icon-goal, .ai-icon-investigate, .ai-icon-away, .ai-icon-remember, .ai-icon-ask)::before {
	width: 72px;
	height: 72px;
	margin-bottom: 32px;
	border-radius: 4px;
	background-size: 52%;
}
.ai-feature h3 {
	margin-top: 0;
	font-size: 1.75rem;
	line-height: 1.12;
	overflow-wrap: break-word;
	hyphens: auto;
}
.ai-feature p {
	margin-bottom: 0;
	color: var(--wp--preset--color--secondary);
}

/* Images: a product image under the hero that rises over its lower edge, and one at the top of each feature card. The
   drawn mock-ups in assets/images (invented sample data) can be swapped for real screenshots in the editor. */
.ai-shot {
	margin: 0;
}
.ai-shot img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--site-rule);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
}
.ai-section.ai-showcase {
	z-index: 2;
	margin-top: calc(-1 * clamp(40px, 6vw, 88px));
	padding-block: 0 clamp(48px, 7vw, 96px);
}
.ai-section.ai-showcase::before {
	content: none;
}
.ai-showcase .ai-shot img {
	box-shadow: 0 40px 90px -36px rgb(15 17 21 / 38%);
}
.ai-feature .ai-shot {
	margin: -32px -28px 24px;
}
.ai-feature .ai-shot img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border: 0;
	border-bottom: 1px solid var(--site-rule);
	border-radius: 0;
}
.ai-feature:has(> .ai-shot)::before {
	content: none;
}

/* Steps: a ruled row of numbered columns */
.ai-steps > h2 {
	max-width: 14em;
	margin-bottom: clamp(32px, 5vw, 56px);
}
.ai-steps ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(24px, 3vw, 40px);
	counter-reset: step;
}
.entry-content .ai-section.ai-steps ol > li {
	counter-increment: step;
	background: transparent;
	border-top: 1px solid var(--wp--preset--color--main);
	padding: 20px 0 0;
	margin: 0;
}
.ai-steps li::before {
	content: counter(step, decimal-leading-zero);
	display: block;
	margin-bottom: 40px;
	font-family: var(--site-mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--primary);
}
.ai-steps li strong {
	display: block;
	font-family: var(--site-serif);
	font-weight: 400;
	font-size: 1.9rem;
	line-height: 1.1;
	margin-bottom: 0.3em;
}
.ai-steps li {
	color: var(--wp--preset--color--secondary);
}

/* The tags under a step: which parts of the product it covers. Set as inline code in the editor. */
.ai-steps li code {
	display: inline-block;
	margin: 14px 6px 0 0;
	padding: 5px 9px;
	border: 1px solid var(--site-rule);
	border-radius: 3px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
	font-family: var(--site-mono);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* FAQ: a ruled list of questions that open with a plus */
.ai-faq > h2 {
	margin-bottom: clamp(24px, 4vw, 48px);
}
.ai-faq details {
	border-top: 1px solid var(--site-rule);
	padding: 22px 0;
	margin: 0;
	max-width: 860px;
}
.ai-faq details:last-of-type {
	border-bottom: 1px solid var(--site-rule);
}
.ai-faq summary {
	cursor: pointer;
	font-family: var(--site-serif);
	font-size: 1.55rem;
	line-height: 1.2;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}
.ai-faq summary::-webkit-details-marker {
	display: none;
}
.ai-faq summary::after {
	content: "+";
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--site-rule);
	border-radius: 3px;
	font-family: var(--site-mono);
	font-size: 1.1rem;
	line-height: 1;
	color: var(--wp--preset--color--main);
}
.ai-faq details[open] summary::after {
	content: "\2212";
	background: var(--wp--preset--color--main);
	border-color: var(--wp--preset--color--main);
	color: var(--wp--preset--color--base);
}
.ai-faq details > :not(summary) {
	margin: 16px 0 0;
	max-width: 44em;
	color: var(--wp--preset--color--secondary);
}

/* Closing call to action: an ink band */
.ai-cta {
	color: var(--wp--preset--color--base);
}
.ai-section.ai-cta::before {
	background:
		radial-gradient(44rem 22rem at 92% 0%, rgb(36 71 255 / 38%), transparent 62%),
		var(--wp--preset--color--main);
	border-top: 0;
}
.ai-cta h2 {
	color: var(--wp--preset--color--base);
	font-size: clamp(2.4rem, 5.4vw, 4.4rem);
	max-width: 12em;
}
.ai-cta h2::before {
	color: #8ea0ff;
}
.ai-cta h2 em {
	color: #8ea0ff;
}
.ai-cta p {
	color: #b9bdc7;
	max-width: 36em;
}
.ai-cta .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
}
.ai-cta .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Blog and posts: ruled lists, ink titles, small mono meta */
.wp-block-query-title,
.wp-block-post-title,
h1.wp-block-heading {
	font-size: clamp(2.4rem, 5vw, 4rem);
	line-height: 1.04;
}
.wp-block-post-template > li {
	border-top: 1px solid var(--site-rule);
	padding-block: 28px;
}
.wp-block-post-template .wp-block-post-title {
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	margin-bottom: 10px;
}
.wp-block-post-title a {
	color: var(--wp--preset--color--main);
	text-decoration: none;
}
.wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}
.wp-block-post-date,
.wp-block-post-author-name,
.wp-block-post-terms {
	font-family: var(--site-mono);
	font-size: 0.72rem !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}
.wp-block-post-date a,
.wp-block-post-author-name a {
	color: inherit;
	text-decoration: none;
}
.wp-block-read-more {
	font-family: var(--site-mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--main);
	border-bottom: 1px solid var(--wp--preset--color--main);
}
.wp-block-read-more:hover {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

/* Footer */
.site-footer {
	margin-block-start: 0;
}
.site-footer a {
	color: inherit;
	text-decoration: none;
}
.site-footer a:hover {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}
.site-footer .site-footer-tagline {
	font-family: var(--site-serif);
	font-size: 1.5rem;
	line-height: 1.25;
}
.site-footer .wp-block-navigation {
	font-family: var(--site-mono);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.site-footer-legal {
	border-top: 1px solid var(--wp--preset--color--border-dark);
	padding-top: 24px;
}
.site-footer-legal p {
	margin: 0;
	font-family: var(--site-mono);
	letter-spacing: 0.06em;
}