/*
Theme Name: Tapybl
Theme URI: https://anitech.example/tapybl
Author: Anitech
Author URI: https://anitech.example
Description: A quiet editorial block theme set in Montserrat, on the Tapybl brand palette: cream page, dark green ink, eagle green links, lime for primary actions. The font is bundled, so no build step and no external requests.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.85.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tapybl
Tags: block-patterns, full-site-editing, editor-style, blog, news, one-column, wide-blocks, accessibility-ready
*/

/* The brand green, light at the left edge: hero, use cases cards, impact panel, CTA. */
:root {
	--tapybl-green: linear-gradient(90deg, #2d6826 0%, #123f1e 14%, #072d1b 38%, #06301d 58%, #0b4a2b 80%, #083d22 100%);
}

/*
 * The bulk of the design lives in theme.json.
 * Only what theme.json cannot express belongs here.
 */

/* Body links: a hairline underline that thickens on hover. */
.entry-content a:where(:not(.wp-element-button)),
.wp-block-post-excerpt a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: text-decoration-thickness 120ms ease, color 120ms ease;
}

.entry-content a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 2px;
}

/*
 * A visible, consistent focus ring across the interface.
 * Eagle Green, not Lime: Lime on Cream is 1.21:1, so a Lime ring would be
 * invisible. Lime is reserved for filled surfaces such as the button.
 */
:where(a, button, input, textarea, select, .wp-block-navigation-item__content):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
	border-radius: 2px;
}

/*
 * Header bar: a white pill floating on the page background.
 *
 * The blocks inside are plain core blocks, so the menu, the logo and both
 * buttons stay editable in the Site Editor; the theme only owns the chrome.
 */
.tapybl-header__bar {
	/* A pill needs the side padding to clear its own curve. */
	min-height: 3.5rem;
}

.tapybl-header__brand {
	flex: none;
}

.tapybl-header__brand .wp-block-site-logo img {
	display: block;
	border-radius: 0;
}

.tapybl-header__nav {
	/*
	 * Sits next to the logo and takes the slack, pushing the actions right.
	 * The offset is padding rather than margin on purpose: core ships
	 * `.is-layout-flex > :is(*, div){margin:0}`, whose specificity beats a
	 * single class, so a margin here would silently be reset.
	 */
	flex: 1 1 auto;
	justify-content: flex-start;
	padding-inline-start: var(--wp--preset--spacing--40);
}

.tapybl-header__nav .wp-block-navigation-item__content {
	font-weight: 500;
}

.tapybl-header__actions {
	flex: none;
	align-items: center;
}

.tapybl-header__actions .wp-block-button__link {
	padding: 0.6rem 1.25rem;
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

/* "Sign In": outlined, filling with ink on hover. */
.tapybl-header__actions .is-style-outline .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--border);
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
}

.tapybl-header__actions .is-style-outline .wp-block-button__link:hover,
.tapybl-header__actions .is-style-outline .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* On a tablet the bar keeps one row, a little tighter. */
@media (min-width: 600px) and (max-width: 781px) {
	.tapybl-header__bar {
		flex-wrap: nowrap !important;
		padding-left: 1rem !important;
	}

	.tapybl-header__nav {
		padding-inline-start: 0.75rem;
	}

	.tapybl-header__nav :is(.wp-block-navigation__container, .wp-block-page-list) {
		flex-wrap: nowrap;
		gap: 0.85rem;
		white-space: nowrap;
	}

	.tapybl-header__actions {
		gap: 0.35rem !important;
	}

	.tapybl-header__actions .wp-block-button__link {
		padding-inline: 0.75rem;
	}
}

/*
 * Below core's navigation breakpoint (600px) the bar is just the logo and the menu
 * toggle, still a pill. The buttons move into the open menu: while it is open
 * they are pinned to its foot, over the overlay, so they stay the same blocks
 * and need no copy inside the navigation.
 */
@media (max-width: 599px) {
	.tapybl-header__bar {
		flex-wrap: nowrap !important;
		justify-content: space-between !important;
		min-height: 4rem;
		padding-right: 1.25rem !important;
		padding-left: 1.5rem !important;
	}

	.tapybl-header__brand .wp-block-site-logo img {
		width: 34px !important;
	}

	.tapybl-header__nav {
		flex: 0 0 auto;
		padding-inline-start: 0;
	}

	.tapybl-header__nav .wp-block-navigation__responsive-container-open svg {
		width: 32px;
		height: 32px;
	}

	.tapybl-header__actions {
		display: none !important;
	}

	.tapybl-header__bar:has(.is-menu-open) .tapybl-header__actions {
		position: fixed;
		inset: auto 1.5rem 2rem;
		z-index: 100001;
		display: flex !important;
		flex-direction: column;
		gap: 0.75rem;
	}

	.tapybl-header__actions .wp-block-button {
		width: 100%;
	}

	.tapybl-header__actions .wp-block-button__link {
		display: block;
		padding-block: 0.9rem;
		font-size: 1rem;
		text-align: center;
	}

	/* The open menu: big links down the left, one per line, divided. */
	.tapybl-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		padding: 1.25rem 1.5rem 10rem;
	}

	.tapybl-header__nav .is-menu-open .wp-block-navigation__responsive-container-close svg {
		width: 32px;
		height: 32px;
	}

	.tapybl-header__nav .is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 3.5rem;
		width: 100%;
		align-items: stretch !important;
	}

	.tapybl-header__nav .is-menu-open :is(.wp-block-navigation__container, .wp-block-page-list) {
		width: 100%;
		gap: 0 !important;
	}

	.tapybl-header__nav .is-menu-open .wp-block-navigation-item {
		width: 100%;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.tapybl-header__nav .is-menu-open .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding-block: 1.1rem !important;
		font-size: 1.75rem;
		font-weight: 700;
		letter-spacing: -0.02em;
	}

	.tapybl-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-bottom: 0;
	}

	.tapybl-header__nav .is-menu-open .wp-block-navigation__submenu-container {
		padding: 0 0 1rem !important;
	}

	.tapybl-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding-block: 0.4rem !important;
		font-size: 1.125rem;
		font-weight: 500;
	}
}

/* Site title in the header. */
.tapybl-site-title a {
	text-decoration: none;
}

/* Short decorative rule before section headings. */
.tapybl-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.tapybl-eyebrow::before {
	content: "";
	display: inline-block;
	width: 1.75rem;
	height: 1px;
	margin-inline-end: 0.75rem;
	vertical-align: middle;
	background-color: currentColor;
}

/* Featured images: soft corners and a stable crop. */
.wp-block-post-featured-image img {
	border-radius: 4px;
}

/* Navigation: an underline that grows from the left. */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -0.35em;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 160ms ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* The mobile overlay menu does not need the animated underline. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* Quotes: a Lime rule instead of the default border. Decorative, not text. */
.wp-block-quote {
	border-inline-start: 3px solid var(--wp--preset--color--accent);
	padding-inline-start: var(--wp--preset--spacing--40);
}

/*
 * Listing card: fixed image on the left, text taking the rest.
 * It stacks on its own once the text no longer fits in 18rem. The flex layout
 * in theme.json cannot express flex-basis, which is why this lives here.
 */
.tapybl-card > .wp-block-post-featured-image {
	flex: 0 0 13rem;
	margin: 0;
}

.tapybl-card__body {
	flex: 1 1 18rem;
	min-width: 0;
}

/*
 * Logo strip.
 *
 * Client logos arrive at every aspect ratio, so the row normalises them by
 * height and lets the width follow. Desaturating them keeps one visual weight
 * across a dozen unrelated brands; drop the filter line to show them in colour.
 *
 * The row runs the width of the page, and on a screen wide enough to hold them
 * all on one line the logos spread edge to edge across it rather than bunching
 * in the middle. Narrower, it wraps and centres instead: on a phone that line
 * cannot hold them however small they get.
 */
.tapybl-logos .tapybl-logos__row {
	gap: clamp(1rem, 2.6vw, 2.75rem);
	row-gap: clamp(1.25rem, 2.5vw, 2rem);
	padding-inline: var(--wp--preset--spacing--40);
}

@media (min-width: 1000px) {
	.tapybl-logos .tapybl-logos__row {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 1.5vw;
		padding-inline: 7vw;
	}
}

/*
 * Narrower, and unless motion is turned down, the row is a ticker instead:
 * one line, sliding left forever. It is twice as long as it looks --
 * tapybl_logos_marquee() appends a copy of the logos -- so sliding it by half
 * lands it exactly where it started. The spacing is a margin after each logo,
 * not a gap, so that half is exact.
 */
.tapybl-logos__clone {
	display: none;
}

@media (max-width: 999px) and (prefers-reduced-motion: no-preference) {
	.tapybl-logos {
		overflow-x: clip;
	}

	.tapybl-logos .tapybl-logos__row {
		flex-wrap: nowrap;
		justify-content: flex-start;
		width: max-content;
		max-width: none;
		gap: 0;
		padding-inline: 0;
		animation: tapybl-logos-slide 30s linear infinite;
	}

	.tapybl-logos__row figure {
		flex: none;
		margin-inline-end: clamp(2rem, 7vw, 3.5rem);
	}

	.tapybl-logos__clone {
		display: block;
	}
}

@keyframes tapybl-logos-slide {
	to { transform: translateX(-50%); }
}

/*
 * The row styles its images, rather than each image carrying a class. That way
 * a logo you drop in later is normalised exactly like the ones that shipped:
 * insert an Image block anywhere inside the row and it just matches.
 */
.tapybl-logos__row figure {
	margin: 0;
}

/*
 * Height sets the scale and the width follows, so a mark and a wordmark carry
 * the same weight. Ten of them and their gaps still have to come to less than
 * the line: a wide wordmark is what would break that, hence the maximum.
 */
.tapybl-logos__row img {
	display: block;
	width: auto;
	height: clamp(2.75rem, 6.2vw, 7rem);
	max-width: max(5rem, 6.5vw);
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.7;
	transition: opacity 140ms ease, filter 140ms ease;
}

/* Only linked logos get a hover: an unlinked one is not interactive. */
.tapybl-logos__row a:hover img,
.tapybl-logos__row a:focus-visible img {
	filter: none;
	opacity: 1;
}

/*
 * FAQ accordion.
 *
 * Built on core/details, so it works with no JavaScript and is keyboard
 * accessible by default. The rules hang off the surrounding list rather than a
 * class on each item, which is what lets a Details block added later match the
 * ones that shipped.
 */
.tapybl-faq__items .wp-block-details {
	border-radius: 12px;
	padding: 0.9rem 1.2rem;
	transition: background-color 140ms ease;
}

.tapybl-faq__items .wp-block-details[open] {
	background-color: var(--wp--preset--color--brand-dark);
}

.tapybl-faq__items summary {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

/* Hide the native disclosure triangle; the circled sign below replaces it. */
.tapybl-faq__items summary::-webkit-details-marker {
	display: none;
}

.tapybl-faq__items summary::before {
	content: "+";
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	border: 1.5px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	color: var(--wp--preset--color--accent);
	font-weight: 500;
	line-height: 1;
	transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 140ms ease, color 140ms ease;
}

.tapybl-faq__items summary:hover::before {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--brand-dark);
}

/* The sign spins half a turn as it flips from plus to minus. */
.tapybl-faq__items .wp-block-details[open] summary::before {
	content: "\2212";
	transform: rotate(180deg);
}

/*
 * The answer slides open instead of popping in. Height to `auto` needs
 * interpolate-size; where that is missing the answer still fades, and where
 * ::details-content is missing it just opens as before.
 */
.tapybl-faq__items {
	interpolate-size: allow-keywords;
}

.tapybl-faq__items .wp-block-details::details-content {
	block-size: 0;
	overflow: clip;
	opacity: 0;
	transition: block-size 320ms ease, opacity 240ms ease, content-visibility 320ms allow-discrete;
}

.tapybl-faq__items .wp-block-details[open]::details-content {
	block-size: auto;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.tapybl-faq__items summary::before,
	.tapybl-faq__items .wp-block-details::details-content {
		transition: none;
	}
}

.tapybl-faq__items summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Line the answer up with the question, past the icon and its gap. */
.tapybl-faq__items .wp-block-details > :not(summary) {
	margin-inline-start: 2.4em;
	margin-block-start: 0.5rem;
	color: var(--wp--preset--color--contrast-3);
}

/* The "tapybl + You" lockup. */
.tapybl-faq__pill {
	display: flex;
	align-items: center;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
}

.tapybl-faq__pill .wp-block-image {
	margin: 0;
}

.tapybl-faq__pill img {
	display: block;
	width: auto;
	height: 1.05rem;
}

.tapybl-faq__plus {
	margin: 0;
	opacity: 0.7;
}

.tapybl-faq__you {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.35rem;
	height: 2.35rem;
	border-radius: 999px;
}

.tapybl-faq__you p {
	margin: 0;
}

/*
 * On a phone, centred: the title, then the questions, then the "still have
 * questions" block at the foot. The first column is dissolved so its blocks
 * can be put either side of the questions, and the open answer sits on a
 * neutral grey rather than green.
 */
@media (max-width: 781px) {
	.tapybl-faq .wp-block-columns {
		flex-direction: column;
		gap: 0;
		text-align: center;
	}

	.tapybl-faq .wp-block-column:has(.tapybl-faq__title) {
		display: contents;
	}

	.tapybl-faq .wp-block-column > * {
		order: 2;
	}

	.tapybl-faq .wp-block-column > .tapybl-faq__title {
		order: 0;
	}

	.tapybl-faq .wp-block-column:has(.tapybl-faq__items) {
		order: 1;
		margin-block: 1.5rem 3rem;
		text-align: start;
	}

	.tapybl-faq .tapybl-faq__lockup,
	.tapybl-faq .wp-block-buttons {
		justify-content: center;
	}

	.tapybl-faq .wp-block-column > h3 {
		margin-top: 0.75rem !important;
	}

	.tapybl-faq .wp-block-column > p {
		margin-top: 0.25rem;
	}

	.tapybl-faq .wp-block-column > .wp-block-buttons {
		margin-top: 1rem !important;
	}

	.tapybl-faq__items summary {
		line-height: 1.3;
	}

	.tapybl-faq__items .wp-block-details[open] {
		background-color: rgb(255 255 255 / 0.08);
	}

	.tapybl-faq__items .wp-block-details > :not(summary) {
		color: var(--wp--preset--color--base);
	}
}

/* Category list: no bullets, it is navigation rather than prose. */
.wp-block-categories-list {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-categories-list li + li {
	margin-block-start: 0.4em;
}

/*
 * Footer.
 *
 * Everything here is core blocks, so the background colour, the background
 * image, the number of columns and every colour stay editable in the Site
 * Editor. These rules only cover what block settings cannot express: the label
 * treatment, the bullet-less lists, the two-up Use cases list and the watermark.
 */
.tapybl-footer__title {
	margin: 0 0 1.25rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tapybl-footer__list {
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
}

.tapybl-footer__list li + li {
	margin-block-start: 0.75em;
}

.tapybl-footer__list a {
	text-decoration: none;
}

.tapybl-footer__list a:hover,
.tapybl-footer__list a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* "Use cases" puts its two lists side by side; they stack on narrow screens. */
.tapybl-footer__split > .tapybl-footer__list {
	flex: 1 1 9rem;
}

/*
 * The nested group picks up the column's blockGap as a 32px top margin, which
 * left this column's lists 12px below the others. Two classes, so it outranks
 * the generated blockGap rule and the heading's own margin sets the gap.
 */
.tapybl-footer__cols .tapybl-footer__split {
	margin-block-start: 0;
}

/*
 * On a phone, two columns: Product beside Resources, Customers beside Use
 * cases, and Use cases' second list beside the colophon at the foot. The
 * columns and the split are dissolved so their headings and lists can be
 * placed on one grid; the columns are taken in the pattern's order (Product,
 * Use cases, Resources, Customers, colophon).
 */
@media (max-width: 781px) {
	.tapybl-footer .tapybl-footer__cols {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 1.5rem;
		row-gap: 0;
	}

	.tapybl-footer__cols > .wp-block-column,
	.tapybl-footer__cols .tapybl-footer__split {
		display: contents;
	}

	.tapybl-footer__cols > .wp-block-column > *,
	.tapybl-footer__cols .tapybl-footer__split > * {
		margin-block: 0;
	}

	.tapybl-footer__cols .tapybl-footer__title {
		margin-bottom: 1.25rem;
	}

	.tapybl-footer__cols > :nth-child(1) > .tapybl-footer__title { grid-area: 1 / 1; }
	.tapybl-footer__cols > :nth-child(1) > .tapybl-footer__list { grid-area: 2 / 1; }
	.tapybl-footer__cols > :nth-child(3) > .tapybl-footer__title { grid-area: 1 / 2; }
	.tapybl-footer__cols > :nth-child(3) > .tapybl-footer__list { grid-area: 2 / 2; }
	.tapybl-footer__cols > :nth-child(4) > .tapybl-footer__title { grid-area: 3 / 1; }
	.tapybl-footer__cols > :nth-child(4) > .tapybl-footer__list { grid-area: 4 / 1; }
	.tapybl-footer__cols > :nth-child(2) > .tapybl-footer__title { grid-area: 3 / 2; }
	.tapybl-footer__cols > :nth-child(2) .tapybl-footer__list:first-child { grid-area: 4 / 2; }
	.tapybl-footer__cols > :nth-child(2) .tapybl-footer__list:nth-child(2) { grid-area: 5 / 1; }

	.tapybl-footer__cols > :nth-child(5) > * {
		grid-area: 5 / 2;
		align-self: end;
	}

	/* The space between the three bands. */
	.tapybl-footer__cols > :is(:nth-child(2), :nth-child(4)) > .tapybl-footer__title,
	.tapybl-footer__cols > :nth-child(2) .tapybl-footer__list:nth-child(2),
	.tapybl-footer__cols > :nth-child(5) > * {
		margin-top: 2.5rem;
	}
}

/*
 * The oversized wordmark. Its contrast against the background is about 1.1:1,
 * matching the reference: it should register as texture, not as content, which
 * is also why it carries an empty alt.
 */
.tapybl-footer__mark {
	margin-block: var(--wp--preset--spacing--50) 0;
	pointer-events: none;
}

.tapybl-footer__mark img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.1;
}

/* The read-more link is inline; the constrained layout must not centre it. */
.wp-block-read-more {
	margin-inline-end: auto;
}

/* Listing pagination. */
.wp-block-query-pagination {
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/*
 * Pricing.
 *
 * Everything visible is a core block, so these rules only cover what block
 * settings cannot express: the switch, the cross-card alignment, the check
 * marks and the ring around the featured plan. As with the FAQ, they hang off
 * .tapybl-pricing rather than a class on each item, so a plan or a row added
 * later matches the ones that shipped.
 */

/*
 * core's flex layout puts display:flex on the price groups, which outranks the
 * display:none the browser gives [hidden]. Without this the switch would hide
 * nothing at all.
 */
.tapybl-pricing [hidden] {
	display: none !important;
}

.tapybl-pricing__title {
	margin-bottom: var(--wp--preset--spacing--30);
}

/*
 * Switch.
 *
 * The pill is the group, so its lime comes from the block's own background
 * setting and the knob from its text colour: both are changed in the editor
 * sidebar, not here. Lime is legible in this spot because it is a filled
 * surface rather than text.
 */
.tapybl-pricing__switchbar {
	margin-top: var(--wp--preset--spacing--30);
}

.tapybl-pricing__switch {
	padding: 0.25rem;
	border-radius: var(--wp--preset--border-radius--pill);
}

.tapybl-pricing__toggle {
	display: flex;
	align-items: center;
	width: 4rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.tapybl-pricing__knob {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background-color: currentColor;
	transition: transform 160ms ease;
}

.tapybl-pricing__toggle[aria-checked="true"] .tapybl-pricing__knob {
	transform: translateX(2.5rem);
}

/*
 * The active term. Weight carries the state as well as colour does, so a term
 * the editor has recoloured still reads as on or off.
 */
.tapybl-pricing__term {
	margin: 0;
	color: var(--wp--preset--color--contrast-2);
}

.tapybl-pricing__term.is-on {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.tapybl-pricing__knob {
		transition: none;
	}
}

/*
 * Cross-card alignment.
 *
 * Each card hands its six parts to the section grid, so the names, the prices,
 * the buttons and both separators sit on shared rows: a plan whose description
 * wraps onto a second line cannot drag its price out of line with the others.
 * Where subgrid is missing the cards simply stack their own content, which
 * costs the alignment and nothing else.
 */
.tapybl-pricing__cards {
	row-gap: 0;
}

/*
 * Three cards do not fit the 44/62rem reading measure the rest of the theme is
 * set to: at wideSize each column lands around 280px and the capacity rows
 * start wrapping. This is the one place a section steps outside it, so the
 * selector is deliberately specific enough to outrank the alignwide rule.
 */
.tapybl-pricing .tapybl-pricing__cards.alignwide,
.tapybl-pricing .tapybl-pricing__notes.alignwide {
	max-width: 76rem;
}

/* The small print under the cards. */
.tapybl-pricing__notes p {
	text-wrap: pretty;
}

@supports (grid-template-rows: subgrid) {
	@media (min-width: 60rem) {
		.tapybl-pricing__card {
			display: grid;
			grid-row: span 6;
			grid-template-rows: subgrid;
			row-gap: 0;
		}
	}
}

.tapybl-pricing__name {
	margin: 0;
}

.tapybl-pricing__blurb {
	margin-top: 0.8rem;
	text-wrap: pretty;
}

/* The price hugs the foot of its row, so the buttons below line up. */
.tapybl-pricing__prices {
	align-self: end;
	margin-top: 2.45rem;
}

.tapybl-pricing__price {
	align-items: baseline;
}

.tapybl-pricing__amount {
	margin: 0;
	line-height: 1;
}

.tapybl-pricing__period,
.tapybl-pricing__save {
	margin: 0;
}

/* Full-bleed button with a trailing arrow the screen reader never announces. */
.tapybl-pricing__cta {
	margin-top: 2.8rem;
}

.tapybl-pricing__cta .wp-block-button {
	width: 100%;
}

.tapybl-pricing__cta .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	width: 100%;
	font-weight: 700;
}

.tapybl-pricing__cta .wp-block-button__link::after {
	content: "\2192";
}

.tapybl-pricing__capacity,
.tapybl-pricing__features {
	margin-top: var(--wp--preset--spacing--40);
}

/*
 * Section label ("Capacity", "Everything you need to create"). It reads as a
 * heading for the block under it, so it takes the weight of one and stands
 * clear of both the rule above and the list below.
 */
.tapybl-pricing__label {
	margin: 1.6rem 0 0;
	font-weight: 600;
}

.tapybl-pricing__capacity .tapybl-pricing__label + .tapybl-pricing__row {
	margin-top: 1.125rem;
}

.tapybl-pricing__row {
	align-items: baseline;
}

.tapybl-pricing__row p {
	margin: 0;
}

/*
 * The figures are Eagle Green, not Lime. Lime on the page background is about
 * 1.2:1: fine for the filled button and the filled tick below, unreadable as
 * text. Same call the checklist block style already makes.
 */
.tapybl-pricing__value {
	text-align: end;
}

.tapybl-pricing__list {
	margin: 1.125rem 0 0;
	padding-inline-start: 0;
	list-style: none;
}

.tapybl-pricing__list li {
	position: relative;
	padding-inline-start: 1.9rem;
}

.tapybl-pricing__list li + li {
	margin-top: 0.8rem;
}

.tapybl-pricing__list li::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: 0;
	top: 0.05em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-size: 0.7rem;
	font-weight: 700;
}

/*
 * The ring around the featured plan is drawn outside the card by a pseudo
 * element rather than by padding, because padding on a subgrid item would push
 * its rows out of step with the cards either side of it.
 */
.tapybl-pricing__card--featured {
	position: relative;
}

.tapybl-pricing__card--featured::before {
	content: "";
	position: absolute;
	inset: -2.5rem -2rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--preset--border-radius--large);
	pointer-events: none;
}

.tapybl-pricing__card--featured .wp-block-separator {
	color: var(--wp--preset--color--accent);
}

/* One column below the point where three of them stop fitting. */
@media (max-width: 59.999rem) {
	.tapybl-pricing__cards {
		grid-template-columns: 1fr;
		row-gap: var(--wp--preset--spacing--60);
	}

	/*
	 * Stacked there is no subgrid to keep in step, so every plan gets a real
	 * frame of its own -- a faint line, the featured one in Lime -- in place of
	 * the drawn one.
	 */
	.tapybl-pricing__cards {
		row-gap: 1.5rem;
	}

	.tapybl-pricing .tapybl-pricing__card {
		padding: 2rem 1.5rem;
		border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
		border-radius: var(--wp--preset--border-radius--large);
	}

	.tapybl-pricing .tapybl-pricing__card--featured {
		border-color: var(--wp--preset--color--accent);
	}

	.tapybl-pricing__card--featured::before {
		display: none;
	}
}

/* A highlighted word in a heading sits in a tinted box, not on the line. */
.wp-block-heading mark {
	padding: 0 0.18em;
	border-radius: var(--wp--preset--border-radius--small);
}

/*
 * Use cases and impact.
 *
 * A dark panel of use cases drifting upwards, and four cards beside it. The
 * panel is a window: the list is taller than it, printed twice by
 * functions.php, and both copies slide by exactly one list -- so the second
 * reaches the top as the first leaves and the loop has no seam.
 */
/*
 * Wider than the theme's wide size, as the section next to it: a panel and four
 * cards on one line need the room, and at 62rem the cards come out narrower
 * than the sentences in them.
 */
.tapybl-impact .tapybl-impact__grid.alignwide {
	max-width: min(100%, 84rem);
}

.tapybl-impact .tapybl-impact__panel {
	position: relative;
	overflow: hidden;
	background-image: var(--tapybl-green);
}

/*
 * Both runs are lifted out of the flow, which is what lets the panel take its
 * height from the cards beside it rather than from a list several times taller
 * than the section. They are stacked by the animation instead: the first walks
 * up and out, the second follows it in from below, and at the end of a turn the
 * second stands exactly where the first began -- so the loop has no seam.
 *
 * The travel is one list plus the gap after it. Anything else and the spacing
 * stutters once per turn.
 */
.tapybl-impact .tapybl-impact__run {
	position: absolute;
	inset-inline: 0;
	top: 0;
	align-items: center;
	animation: tapybl-impact-run-a 45s linear infinite;
}

.tapybl-impact .tapybl-impact__run + .tapybl-impact__run {
	/* Where it waits when the animation is off, rather than over the first. */
	transform: translateY(calc(100% + var(--wp--preset--spacing--30)));
	animation-name: tapybl-impact-run-b;
}

@keyframes tapybl-impact-run-a {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(calc(-100% - var(--wp--preset--spacing--30)));
	}
}

@keyframes tapybl-impact-run-b {
	from {
		transform: translateY(calc(100% + var(--wp--preset--spacing--30)));
	}

	to {
		transform: translateY(0);
	}
}

.tapybl-impact .tapybl-impact__case {
	margin: 0;
	padding: 0.7rem 1.5rem;
	border-radius: var(--wp--preset--border-radius--pill);
	text-align: center;
}

/*
 * The icon sits at the top of the card and the words at the foot, which is what
 * holds the four titles level with each other however long they run.
 */
.tapybl-impact .tapybl-impact__card {
	height: 100%;
	align-items: stretch;
}

.tapybl-impact .tapybl-impact__icon {
	flex: 0 0 auto;
	margin: 0;
}

.tapybl-impact__icon img {
	display: block;
}

.tapybl-impact .tapybl-impact__body {
	margin-top: auto;
}

/* Core stretches columns to the tallest; the cards fill what they are given. */
.tapybl-impact .tapybl-impact__col {
	display: flex;
}

/*
 * Stopped, the list would strand whatever it happened to be showing, so the
 * window becomes an ordinary scrolling one instead.
 */
@media (prefers-reduced-motion: reduce) {
	.tapybl-impact .tapybl-impact__panel {
		overflow-y: auto;
	}

	.tapybl-impact .tapybl-impact__run {
		animation: none;
	}
}

/*
 * Stacked, the panel has no cards beside it to take its height from, so it
 * states one.
 */
@media (max-width: 781px) {
	.tapybl-impact .tapybl-impact__panel {
		min-height: 30rem;
	}

	/*
	 * On a phone: squarer pills, and cards with air between the icon and the
	 * words, a lighter, larger title and denser copy. The !importants are over
	 * the blocks' own weight, size and colour.
	 */
	.tapybl-impact .tapybl-impact__case {
		border-radius: 12px;
	}

	.tapybl-impact .tapybl-impact__body {
		margin-top: 3rem;
	}

	.tapybl-impact__body h3 {
		font-size: 1.5rem !important;
		font-weight: 700 !important;
	}

	.tapybl-impact__body p {
		font-size: 0.875rem !important;
		line-height: 1.35;
		color: var(--wp--preset--color--contrast) !important;
	}
}

/* A tablet has room for the cards two by two again. */
@media (min-width: 600px) and (max-width: 781px) {
	.tapybl-impact .tapybl-impact__cards {
		flex-wrap: nowrap !important;
	}

	.tapybl-impact .tapybl-impact__cards > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
	}
}

/*
 * The slider.
 *
 * Shared by every section built to the contract -- a .tapybl-slider holding a
 * .tapybl-slider__track -- which today is the customer quotes. What belongs to
 * a section is under that section below; what is here is the mechanism.
 *
 * The track is a scroll container, not a transform: the browser handles the
 * swipe, the trackpad, the keyboard and the snapping, and the arrows added in
 * functions.php only push it along. So a slider works before the script module
 * loads, and with it never loading.
 */
.tapybl-slider__track {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Room for the focus ring, which the scroll container would otherwise cut. */
	padding-block: 4px;
	scrollbar-width: none;
}

.tapybl-slider__track::-webkit-scrollbar {
	display: none;
}

.tapybl-slider__nav {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	justify-content: center;
	margin-top: var(--wp--preset--spacing--40);
}

/*
 * The nav is served hidden for the store to reveal, and display:flex above
 * would quietly beat the attribute -- one class against the user agent's
 * [hidden] -- leaving a pair of arrows on a section that does not scroll.
 */
.tapybl-slider__nav[hidden] {
	display: none;
}

.tapybl-slider__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--preset--border-radius--pill);
	background: none;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background-color 140ms ease, opacity 140ms ease;
}

.tapybl-slider__arrow:hover:not([disabled]) {
	background-color: var(--wp--preset--color--border);
}

/*
 * The arrow at the end it has reached goes quiet rather than disappearing, so
 * the pair keeps its place and the row does not shift under the pointer.
 */
.tapybl-slider__arrow[disabled] {
	opacity: 0.3;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.tapybl-slider__track {
		scroll-behavior: auto;
	}

	.tapybl-slider__arrow {
		transition-duration: 0s;
	}
}

/*
 * Customer quotes.
 *
 * One quote's width, named once: the slides are sized by it and the track is
 * padded by what is left over. In viewport units rather than a percentage of
 * the track, because that padding is derived from the same figure -- a slide
 * measured against the track, whose width the padding then changes, has no
 * answer.
 */
.tapybl-quotes {
	--tapybl-quote-width: clamp(20rem, 34vw, 46rem);
}

.tapybl-quotes .tapybl-quotes__track {
	/*
	 * The row runs the width of the page rather than the measure the heading is
	 * set to, so the quotes get the room and there is always another one coming
	 * in from the right.
	 *
	 * Half a page either side of a slide, so the first and the last can reach
	 * the middle: without it a centred snap has nowhere to put them and the row
	 * opens against the left edge. The page padding is the floor, for the width
	 * at which a slide is nearly the whole screen.
	 */
	padding-inline: max(
		var(--wp--preset--spacing--40),
		calc((100vw - var(--tapybl-quote-width)) / 2)
	);
}

/*
 * A third of the page each, so the row always fills it and there is always
 * another quote coming in from the right: two whole ones and the edge of a
 * third at common widths, more as the window grows. A fixed maximum would let
 * the row stop short of the edge on a wide screen, which is the one thing this
 * layout cannot do; the bounds are there only to keep the measure readable at
 * the extremes.
 *
 * Basis rather than width: the slides are flex items, and a long quote has to
 * grow downwards, not sideways.
 */
.tapybl-quotes .tapybl-quotes__slide {
	flex: 0 0 var(--tapybl-quote-width);
	/* Centred, not leading: the section opens on the first quote, in the middle. */
	scroll-snap-align: center;
}

.tapybl-quotes .tapybl-quotes__logo {
	flex: 0 0 auto;
	margin: 0;
}

/* Whatever shape a real logo arrives in, the circle is what shows. */
.tapybl-quotes__logo img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--wp--preset--border-radius--pill);
}

/*
 * On a phone the row leads from the content edge instead of the middle, each
 * quote narrow enough that the next one shows beside it.
 */
@media (max-width: 781px) {
	.tapybl-quotes {
		--tapybl-quote-width: 72vw;
	}

	.tapybl-quotes .tapybl-quotes__track {
		gap: 1.5rem;
		padding-inline: var(--wp--style--root--padding-left);
		scroll-padding-inline: var(--wp--style--root--padding-left);
	}

	.tapybl-quotes .tapybl-quotes__slide {
		scroll-snap-align: start;
	}

	.tapybl-quotes .tapybl-quotes__slide > p {
		font-size: 1.0625rem !important;
		line-height: 1.4;
	}
}

/*
 * Where learning meets performance.
 *
 * A standfirst on the left and three portrait cards on the right, each with its
 * caption laid over the foot of the picture. The caption is an ordinary group
 * in the flow of the card; everything that lifts it onto the photograph is
 * here, so without this stylesheet it drops underneath and still reads.
 */
/*
 * Wider than the theme's wide size. Three portrait cards and a column of prose
 * need the room -- at 62rem the cards come out narrower than their own caption
 * -- so this one grid opts out, while the headline above it stays on the
 * measure the rest of the site is set to.
 */
.tapybl-series .tapybl-series__grid.alignwide {
	max-width: min(100%, 84rem);
}

.tapybl-series .tapybl-series__card {
	position: relative;
	overflow: hidden;
}

.tapybl-series .tapybl-series__photo {
	margin: 0;
}

/*
 * A crop, not a fixed picture: whatever is dropped in fills the card and is
 * trimmed, so three photographs of three different shapes still line up.
 */
.tapybl-series__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 7;
	object-fit: cover;
}

.tapybl-series .tapybl-series__tag {
	position: absolute;
	inset-inline: 0.75rem;
	bottom: 0.75rem;
	align-items: center;
}

.tapybl-series .tapybl-series__badge {
	margin: 0;
	padding: 0.5rem 0.6rem;
	border-radius: var(--wp--preset--border-radius--medium);
	line-height: 1;
	letter-spacing: 0.01em;
}

/* Room for the longest badge, so the three names start on the same line. */
.tapybl-series .tapybl-series__badge {
	min-width: 3.4rem;
	text-align: center;
}

/*
 * The link is the one thing in the column that is not prose, so it carries the
 * accent and the underline that goes with it.
 */
.tapybl-series__link a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.tapybl-series__link a:hover,
.tapybl-series__link a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/*
 * Cards with videos. A card's videos are Video blocks dropped inside it in the
 * editor; on the front end they are hidden and assets/js/series.js plays them
 * in a modal. The editor canvas keeps them showing, as a row under the photo,
 * since that is where they are added and reordered -- the caption comes off
 * the picture there to make room.
 */
:where(body:not(.editor-styles-wrapper)) .tapybl-series__card .wp-block-video {
	display: none;
}

.editor-styles-wrapper .tapybl-series__card:has(.wp-block-video) .tapybl-series__tag {
	position: static;
	margin: 0.75rem;
}

.editor-styles-wrapper .tapybl-series__card .wp-block-video {
	margin: 0.75rem;
}

/*
 * The module marks a card .is-video and lays a button over the whole of it,
 * with the play mark in the middle. Hovering zooms the picture a touch and
 * swells the mark.
 */
.tapybl-series__open {
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: none;
	cursor: pointer;
}

.tapybl-series__open:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -4px;
}

.tapybl-series__card.is-video .tapybl-series__photo img {
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tapybl-series__card.is-video:hover .tapybl-series__photo img {
	transform: scale(1.05);
}

.tapybl-series__play {
	position: absolute;
	top: 42%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	transform: translate(-50%, -50%);
	transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 320ms ease;
}

/* Nudged right so the triangle looks centred rather than measures centred. */
.tapybl-series__play svg {
	margin-inline-start: 0.15rem;
}

.tapybl-series__card.is-video:hover .tapybl-series__play,
.tapybl-series__open:focus-visible .tapybl-series__play {
	transform: translate(-50%, -50%) scale(1.15);
	box-shadow: 0 0 0 0.6rem color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent);
}

/* The modal the videos play in. The dialog is the frame; the page dims behind. */
/*
 * Sized as a vertical reel before the video has loaded, so the frame does not
 * jump; a video of another shape is letterboxed inside it.
 */
.tapybl-video {
	width: min(92vw, 28rem, calc(85vh * 9 / 16));
	max-height: 90vh;
	padding: 0;
	border: 0;
	border-radius: var(--wp--preset--border-radius--large);
	background: #000;
	overflow: visible;
	opacity: 0;
	transform: scale(0.94) translateY(1rem);
	transition: opacity 260ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1), overlay 360ms allow-discrete, display 360ms allow-discrete;
}

.tapybl-video[open] {
	opacity: 1;
	transform: none;
}

@starting-style {
	.tapybl-video[open] {
		opacity: 0;
		transform: scale(0.94) translateY(1rem);
	}
}

.tapybl-video::backdrop {
	background: rgb(0 0 0 / 0);
	backdrop-filter: blur(0);
	transition: background-color 260ms ease, backdrop-filter 260ms ease, overlay 260ms allow-discrete, display 260ms allow-discrete;
}

.tapybl-video[open]::backdrop {
	background: rgb(0 0 0 / 0.8);
	backdrop-filter: blur(6px);
}

@starting-style {
	.tapybl-video[open]::backdrop {
		background: rgb(0 0 0 / 0);
		backdrop-filter: blur(0);
	}
}

/* One bar per video, story-style; each fills as its video plays. */
.tapybl-video__bars {
	position: absolute;
	top: 0.75rem;
	inset-inline: 0.75rem;
	z-index: 1;
	display: flex;
	gap: 0.3rem;
	pointer-events: none;
}

.tapybl-video__bar {
	flex: 1;
	height: 3px;
	border-radius: 3px;
	background: rgb(255 255 255 / 0.3);
	overflow: hidden;
}

.tapybl-video__bar::after {
	content: "";
	display: block;
	height: 100%;
	background: var(--wp--preset--color--accent);
	transform: scaleX(var(--done, 0));
	transform-origin: left;
	transition: transform 250ms linear;
}

.tapybl-video.is-single .tapybl-video__bars,
.tapybl-video.is-single .tapybl-video__step,
.tapybl-video.is-first .tapybl-video__step--prev,
.tapybl-video.is-last .tapybl-video__step--next {
	visibility: hidden;
}

/* Previous and next sit outside the frame, either side of it. */
.tapybl-video__step {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.12);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 160ms ease, transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tapybl-video__step--prev {
	right: calc(100% + 0.75rem);
}

.tapybl-video__step--next {
	left: calc(100% + 0.75rem);
}

.tapybl-video__step:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	transform: translateY(-50%) scale(1.1);
}

.tapybl-video__step:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* No room either side on a phone: they come in over the picture instead. */
@media (max-width: 600px) {
	.tapybl-video__step {
		background: rgb(0 0 0 / 0.45);
	}

	.tapybl-video__step--prev {
		right: auto;
		left: 0.5rem;
	}

	.tapybl-video__step--next {
		left: auto;
		right: 0.5rem;
	}
}

.tapybl-video__player {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: contain;
	border-radius: inherit;
	background: #000;
}

.tapybl-video__close {
	position: absolute;
	top: -0.9rem;
	right: -0.9rem;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tapybl-video__close:hover {
	transform: rotate(90deg);
}

.tapybl-video__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 3px;
}

/*
 * The "Buy now" modal (assets/js/modals.js): a white card asking for an email,
 * opening and dimming the page the way the video one does.
 */
.tapybl-lead {
	width: min(92vw, 30rem);
	padding: 2.5rem 2rem 2rem;
	border: 0;
	border-radius: var(--wp--preset--border-radius--large);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	overflow: visible;
	opacity: 0;
	transform: scale(0.94) translateY(1rem);
	transition: opacity 260ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1), overlay 360ms allow-discrete, display 360ms allow-discrete;
}

.tapybl-lead[open] {
	opacity: 1;
	transform: none;
}

@starting-style {
	.tapybl-lead[open] {
		opacity: 0;
		transform: scale(0.94) translateY(1rem);
	}
}

.tapybl-lead::backdrop {
	background: rgb(0 0 0 / 0);
	transition: background-color 260ms ease, backdrop-filter 260ms ease, overlay 260ms allow-discrete, display 260ms allow-discrete;
}

.tapybl-lead[open]::backdrop {
	background: rgb(1 30 30 / 0.7);
	backdrop-filter: blur(6px);
}

@starting-style {
	.tapybl-lead[open]::backdrop {
		background: rgb(0 0 0 / 0);
	}
}

.tapybl-lead__form > * {
	margin: 0;
}

.tapybl-lead__title {
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.tapybl-lead__text {
	margin-top: 0.6rem !important;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--wp--preset--color--contrast-2);
}

.tapybl-lead__name {
	width: 100%;
	box-sizing: border-box;
	margin-top: 1.5rem !important;
}

.tapybl-lead__row {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem !important;
}

:is(.tapybl-lead__name, .tapybl-lead__email) {
	flex: 1;
	min-width: 0;
	padding: 0.8rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: inherit;
	font: inherit;
	font-size: 1rem;
}

:is(.tapybl-lead__name, .tapybl-lead__email):focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--contrast);
}

.tapybl-lead.is-error :is(.tapybl-lead__name, .tapybl-lead__email):invalid {
	border-color: #c0392b;
}

.tapybl-lead__submit {
	flex: none;
	padding: 0.8rem 1.3rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--accent);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.2s ease, opacity 0.2s;
}

.tapybl-lead__submit:hover {
	transform: translateY(-2px);
}

.tapybl-lead__submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* Off screen rather than display: none, which some bots skip. */
.tapybl-lead__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.tapybl-lead__status {
	min-height: 1.4em;
	margin-top: 0.6rem !important;
	font-size: 0.875rem;
	font-weight: 600;
}

.tapybl-lead.is-error .tapybl-lead__status {
	color: #c0392b;
}

.tapybl-lead__fine {
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-2);
}

/* Sent: the form gives way to the thanks. */
.tapybl-lead.is-done :is(.tapybl-lead__name, .tapybl-lead__row, .tapybl-lead__fine) {
	display: none;
}

.tapybl-lead.is-done .tapybl-lead__status {
	font-size: 1.05rem;
}

.tapybl-lead__close {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tapybl-lead__close:hover {
	transform: rotate(90deg);
}

@media (max-width: 480px) {
	.tapybl-lead {
		padding: 2.25rem 1.25rem 1.5rem;
	}

	.tapybl-lead__row {
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tapybl-lead,
	.tapybl-lead::backdrop,
	.tapybl-lead__close {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tapybl-series__card.is-video .tapybl-series__photo img,
	.tapybl-series__play,
	.tapybl-video,
	.tapybl-video::backdrop,
	.tapybl-video__bar::after,
	.tapybl-video__step,
	.tapybl-video__close {
		transition: none;
	}
}

/*
 * Stacked, the three cards would each be as tall as a full-width 5:7 crop and
 * the section would run for pages, so the ratio flattens out.
 */
/*
 * On a phone the cards stay portrait, one per screen, and the tag becomes a
 * neutral bar with the badge as a square flush at its start. The copy beside
 * them reads in white. The !importants are over the blocks' own colours and
 * padding.
 */
@media (max-width: 781px) {
	.tapybl-series__photo img {
		aspect-ratio: 2 / 3;
	}

	.tapybl-series .tapybl-series__lead p {
		color: var(--wp--preset--color--base) !important;
	}

	.tapybl-series .tapybl-series__tag {
		inset-inline: 1rem;
		bottom: 1rem;
		align-items: stretch;
		overflow: hidden;
		padding: 0 0.9rem 0 0 !important;
		border-radius: 10px !important;
		background-color: #161616 !important;
	}

	.tapybl-series .tapybl-series__badge {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.9rem 0.6rem;
		border-radius: 0;
	}

	.tapybl-series .tapybl-series__tag > .wp-block-group {
		align-self: center;
		padding-block: 0.5rem;
	}
}

/* A tablet fits the three cards side by side again. */
@media (min-width: 600px) and (max-width: 781px) {
	.tapybl-series .tapybl-series__cards {
		flex-wrap: nowrap !important;
	}

	.tapybl-series .tapybl-series__cards > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
	}

	.tapybl-series .tapybl-series__tag {
		inset-inline: 0.5rem;
		bottom: 0.5rem;
	}
}

/*
 * Closing call to action.
 *
 * A dark band the width of the page, with the corners rounded off, and the
 * headline set as large as the measure allows, on the brand green gradient.
 */
/*
 * A full-width block is pulled out to the page edges by a negative margin the
 * size of the root padding. Folding the inset into that same margin lands the
 * band 25px from the viewport whatever the root padding is at that width, and
 * gives the rounded corners something to sit against.
 *
 * Written against the same parent class core matches on, and one class longer,
 * so it wins the cascade wherever the two stylesheets end up in the head.
 */
.has-global-padding > .tapybl-cta.alignfull {
	margin-right: calc(25px - var(--wp--style--root--padding-right));
	margin-left: calc(25px - var(--wp--style--root--padding-left));
}

.tapybl-cta {
	background-image: var(--tapybl-green);
}

/* Three even lines rather than two full ones and an orphan. */
.tapybl-cta__title {
	text-wrap: balance;
}

/*
 * The gap between the points is wide enough to read as a row, but the block
 * gap applies to both axes, and once the row wraps on a narrow screen that
 * same distance between the lines pulls the group apart.
 */
.tapybl-cta .tapybl-cta__proof {
	row-gap: 0.75rem;
}

/*
 * The tick belongs to the row, not to each point: any paragraph dropped into
 * the group is a proof point and is marked like the rest. Lime on this ground
 * reads at any size, which is why the tick is Lime and the words are not.
 */
.tapybl-cta__proof p::before {
	content: "\2713";
	margin-inline-end: 0.5em;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

/*
 * The buttons are the theme's pills. The outlined one is a border in the text
 * colour, which the block sets to Lime; core would otherwise draw it in the
 * inherited Cream and lose the pair.
 */
.tapybl-cta .wp-block-button__link {
	padding: 0.85rem 1.75rem;
	font-size: var(--wp--preset--font-size--medium);
}

/*
 * On a phone: the hero's dark green, a headline given the card's full width,
 * the points as a left-aligned list centred as a block, and the buttons
 * stacked at one width with a quieter outline.
 */
@media (max-width: 781px) {
	.tapybl-cta {
		padding-inline: 1.25rem !important;
		background: var(--tapybl-green) !important;
	}

	.tapybl-cta .tapybl-cta__title {
		line-height: 1 !important;
	}

	.tapybl-cta .tapybl-cta__proof {
		flex-direction: column;
		align-items: flex-start;
		width: fit-content;
	}

	.tapybl-cta .tapybl-cta__proof p {
		font-size: 1rem !important;
	}

	.tapybl-cta .wp-block-buttons {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}

	.tapybl-cta .wp-block-button {
		width: min(100%, 15rem);
	}

	.tapybl-cta .wp-block-button__link {
		width: 100%;
		padding-inline: 1rem;
	}

	.tapybl-cta .is-style-outline .wp-block-button__link {
		border: 1px solid rgb(255 255 255 / 0.2);
	}
}

/*
 * Feature grid.
 *
 * Two columns of cards flanking a tall media panel. Core columns stretch to the
 * tallest of the three, so making each side a flex column and letting its cards
 * share the leftover height is what lines the two sides up into a grid: the
 * cards end up level with each other whatever their copy is, and the panel
 * between them is as tall as they are.
 *
 * The rules below are written .tapybl-features .tapybl-features__x on purpose.
 * They correct the layout classes core generates for the blocks, which are a
 * single class each, so the extra step is what settles the cascade rather than
 * the order the two stylesheets happen to be printed in.
 */

/* On a phone the intro tightens up: a closer-set title, darker, denser copy. */
@media (max-width: 781px) {
	.tapybl-features .tapybl-features__title {
		line-height: 1.05;
	}

	.tapybl-features .tapybl-features__title mark {
		padding-inline: 0.1em;
	}

	.tapybl-features .tapybl-features__title + p {
		/* Over core's layout margins and the block's own colour class, both !important. */
		margin-inline: calc(-1 * var(--wp--preset--spacing--20)) !important;
		color: var(--wp--preset--color--contrast) !important;
		font-size: 1rem;
		line-height: 1.4;
	}
}

.tapybl-features .tapybl-features__col {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

/* The column is a flow layout, whose block gap is margins. Here it is the gap. */
.tapybl-features .tapybl-features__col > * {
	margin-block: 0;
}

.tapybl-features .tapybl-features__card {
	flex: 1;
	/* Core starts a vertical flex group at flex-start; the rows want full width. */
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--border);
	cursor: pointer;
	transition: box-shadow 160ms ease, border-color 160ms ease;
}

/* The card under the pointer lifts. */
.tapybl-features .tapybl-features__card:hover {
	border-color: transparent;
	box-shadow: var(--wp--preset--shadow--soft);
}

@media (prefers-reduced-motion: reduce) {
	.tapybl-features .tapybl-features__card {
		transition-duration: 0s;
	}
}

/*
 * The icons are off for now. Hidden rather than taken out of the pattern: the
 * Image blocks stay in the content, so bringing them back is deleting one line.
 * The head is a flex row with a gap, and a hidden item takes its gap with it,
 * which is what leaves the title flush against the padding.
 *
 * The rest of the rule is what the icon needs once it is back: its own size,
 * held when a title wraps to a second line.
 */
.tapybl-features .tapybl-features__icon {
	display: none;
	flex: 0 0 auto;
	margin: 0;
}

.tapybl-features__icon img {
	display: block;
}

/*
 * The panel is a crop, not a fixed picture: whatever is dropped in fills the
 * column and is trimmed, so replacing it cannot pull the section out of shape.
 */
.tapybl-features .tapybl-features__media {
	display: flex;
	position: relative;
}

.tapybl-features .tapybl-features__media > :is(.wp-block-image, .wp-block-video) {
	display: flex;
	flex: 1;
	margin: 0;
}

.tapybl-features__media :is(img, video) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--wp--preset--border-radius--large);
}

/*
 * Stacked, there is no column height left to fill, so the panel sets its own:
 * it keeps the full width and takes its height from the ratio instead. Without
 * the flex-start it would still stretch, and the image would fall back to its
 * intrinsic width rather than the width of the cards above it.
 */
@media (max-width: 781px) {
	.tapybl-features .tapybl-features__media {
		align-items: flex-start;
	}

	.tapybl-features__media :is(img, video) {
		height: auto;
		/* The animations' own shape, so on a phone one fills the panel. */
		aspect-ratio: 400 / 680;
		max-height: 40rem;
	}

	/*
	 * On a phone the panel leads and the cards shrink to a list under it: icon
	 * and title, the description left out. The !importants are over the block's own padding and font size.
	 */
	.tapybl-features .tapybl-features__grid {
		row-gap: 0.5rem;
	}

	.tapybl-features .tapybl-features__media {
		order: -1;
		/* No wider than a phone screen, so it does not fill a tablet. */
		max-width: 24rem;
		margin-inline: auto;
		margin-bottom: var(--wp--preset--spacing--30);
	}

	.tapybl-features .tapybl-features__col {
		gap: 0.5rem;
	}

	.tapybl-features .tapybl-features__card {
		flex: none;
		padding: 1rem 1.25rem !important;
	}

	.tapybl-features .tapybl-features__card > p {
		display: none;
	}

	.tapybl-features .tapybl-features__head {
		gap: 1rem;
	}

	.tapybl-features .tapybl-features__icon {
		display: block;
	}

	.tapybl-features__icon img {
		width: 1.75rem !important;
	}

	.tapybl-features .tapybl-features__head h3 {
		font-size: 1rem !important;
	}
}

/*
 * How it works.
 *
 * Three steps, each an illustration over a title and a checklist. The panels
 * are held to one ratio and cropped rather than left at their own size, so a
 * picture of another shape dropped into one column cannot push its title out
 * of line with the other two.
 */
.tapybl-steps__figure {
	margin: 0;
}

.tapybl-steps__figure img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--wp--preset--border-radius--large);
}

/*
 * A video dropped into a step column stands in for the illustration, so it
 * takes the same frame. The ratio is held by the figure, not the video: core
 * prints the media's own aspect-ratio inline on the <video>, and an inline
 * style would beat anything set here. The video then fills that box, and the
 * clipping lives on the figure because the element paints its own black
 * background over the rounded corners otherwise.
 */
.tapybl-steps__col .wp-block-video {
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--large);
	line-height: 0;
}

.tapybl-steps__col .wp-block-video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Core starts a vertical flex group at flex-start, which would shrink each row
 * to its text. Stretching them keeps every icon on the same left edge and lets
 * a long line wrap against the column instead of against itself.
 */
.tapybl-steps .tapybl-steps__list {
	align-items: stretch;
}

.tapybl-steps .tapybl-steps__icon {
	flex: 0 0 auto;
	margin: 0;
}

.tapybl-steps__icon img {
	display: block;
}

@media (max-width: 781px) {
	/*
	 * On a phone the steps are a swipe row instead, edge to edge with the next
	 * one peeking in: a scroll container that snaps, so no script. It runs out
	 * over the page padding, and its own padding puts the first step back on
	 * the content edge. The !importants are over core stacking columns on mobile.
	 */
	.tapybl-steps .tapybl-steps__grid {
		flex-wrap: nowrap !important;
		gap: 1.25rem;
		margin-inline: calc(-1 * var(--wp--style--root--padding-left)) !important;
		padding-inline: var(--wp--style--root--padding-left);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--wp--style--root--padding-left);
		scrollbar-width: none;
	}

	.tapybl-steps .tapybl-steps__grid::-webkit-scrollbar {
		display: none;
	}

	.tapybl-steps .tapybl-steps__grid > .tapybl-steps__col {
		flex: 0 0 min(78%, 20rem) !important;
		scroll-snap-align: start;
	}
}

/*
 * Hero.
 *
 * Copy on the left, a phone on the right turning documents into reels. The
 * copy is the pattern's blocks; the backdrop and the phone are added by
 * tapybl_hero_stage() in functions.php and run by assets/js/hero.js. Without
 * the script the phone holds its first reel, with the quiz already answered.
 *
 * A fixed height, not a minimum: the phone is sized as a share of the row, and
 * a percentage of an auto height has nothing to resolve against. The section
 * clips what spills -- the cards hang off the phone on purpose -- so nothing
 * here can push the page sideways.
 */
.tapybl-hero {
	--tapybl-hero-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--tapybl-hero-dur: 3200ms;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	grid-template-rows: minmax(0, 1fr);
	align-items: center;
	height: clamp(40rem, calc(100svh - 3rem), 58rem);
	padding-top: var(--tapybl-hero-header, 0);
	background: linear-gradient(125deg, #0b3a36 0%, #0f4a3e 45%, #1b5a38 75%, #0c3f3b 100%);
	color: #fff;
}

/*
 * A page that opens on the hero lets it run up under the header, so the
 * gradient starts where the page does instead of below a band of cream. The
 * header keeps its place -- absolute with no offsets stays where it would have
 * been -- and the hero reserves its height as padding. Any other page, and any
 * page where something comes first, keeps the header in the flow.
 */
.wp-site-blocks:has(> main > .entry-content:first-child > :is(.tapybl-hero, .tapybl-hero-photo):first-child) {
	position: relative;
}

.wp-site-blocks:has(> main > .entry-content:first-child > :is(.tapybl-hero, .tapybl-hero-photo):first-child) > header {
	position: absolute;
	inset-inline: 0;
	z-index: 20;
}

.wp-site-blocks:has(> main > .entry-content:first-child > :is(.tapybl-hero, .tapybl-hero-photo):first-child) > main {
	margin-block-start: 0;
}

/* The header's height: its padding either side of a one-row bar, or two rows stacked. */
.wp-site-blocks:has(> main > .entry-content:first-child > :is(.tapybl-hero, .tapybl-hero-photo):first-child) :is(.tapybl-hero, .tapybl-hero-photo) {
	--tapybl-hero-header: calc(2 * var(--wp--preset--spacing--30) + 3.75rem);
}

@media (max-width: 781px) {
	.wp-site-blocks:has(> main > .entry-content:first-child > :is(.tapybl-hero, .tapybl-hero-photo):first-child) :is(.tapybl-hero, .tapybl-hero-photo) {
		--tapybl-hero-header: calc(2 * var(--wp--preset--spacing--30) + 8.5rem);
	}
}

/* The flow layout's block gap would push the phone off the row's centre. */
.tapybl-hero > * {
	margin-block: 0;
}

/* Backdrop: three drifting blurs. */
.tapybl-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.tapybl-hero__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(110px);
	opacity: 0.28;
	animation: tapybl-hero-drift 18s ease-in-out infinite alternate;
}

.tapybl-hero__orb.is-1 {
	top: -16vw;
	right: -10vw;
	width: 46vw;
	height: 46vw;
	background: #7fe3ae;
}

.tapybl-hero__orb.is-2 {
	right: 14vw;
	bottom: -18vw;
	width: 28vw;
	height: 28vw;
	background: var(--wp--preset--color--accent);
	opacity: 0.22;
	animation-duration: 22s;
	animation-direction: alternate-reverse;
}

.tapybl-hero__orb.is-3 {
	top: 30%;
	left: -8vw;
	width: 24vw;
	height: 24vw;
	background: #9ad8c4;
	opacity: 0.2;
	animation-duration: 26s;
}

/* Copy. */
.tapybl-hero__copy {
	position: relative;
	z-index: 3;
	padding-inline: clamp(1.5rem, 6vw, 7rem) clamp(1.5rem, 4vw, 3.5rem);
}

.tapybl-hero .tapybl-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.tapybl-hero__eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	animation: tapybl-hero-ping 2s infinite;
}

.tapybl-hero .tapybl-hero__title {
	max-width: 15.5em;
	font-size: clamp(1.875rem, 3.5vw, 3.5rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.028em;
	text-wrap: balance;
	color: #fff;
}

.tapybl-hero__title mark {
	padding-inline: 0.08em;
	border-radius: 0.14em;
}

/* Once hero.js has split the headline: each word rises out of its own slot. */
.tapybl-hero__word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.1em;
	margin-bottom: -0.1em;
}

.tapybl-hero__word > span {
	display: inline-block;
	transform: translateY(110%) rotate(4deg);
	transform-origin: left bottom;
	animation: tapybl-hero-rise 1s var(--tapybl-hero-ease) forwards;
}

.tapybl-hero__word.is-hl > span {
	position: relative;
	color: var(--wp--preset--color--contrast);
	z-index: 0;
	padding-inline: 0.08em;
}

/* The highlight, drawn per word and swept in after the headline lands. */
.tapybl-hero__word.is-hl > span::before {
	content: "";
	position: absolute;
	inset: 0.06em -0.02em 0.02em;
	z-index: -1;
	border-radius: 0.14em;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	animation: tapybl-hero-mark 0.8s var(--tapybl-hero-ease) 1.25s forwards;
}

.tapybl-hero .tapybl-hero__ctas {
	margin-top: clamp(1.25rem, 3vh, 2rem);
}

.tapybl-hero__eyebrow,
.tapybl-hero__ctas {
	animation: tapybl-hero-fade 0.9s var(--tapybl-hero-ease) both;
}

.tapybl-hero__eyebrow {
	animation-delay: 0.1s;
}

.tapybl-hero__ctas {
	animation-delay: 1.15s;
}

.tapybl-hero .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.9375rem;
	font-weight: 800;
	transition: transform 0.35s var(--tapybl-hero-ease), background-color 0.25s, color 0.25s, border-color 0.25s;
}

.tapybl-hero .tapybl-hero__start .wp-block-button__link {
	padding: 1rem 1.75rem;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 14px 34px rgb(0 0 0 / 0.3);
}

.tapybl-hero .tapybl-hero__start .wp-block-button__link:hover {
	background-color: #fff;
	color: var(--wp--preset--color--contrast);
}

.tapybl-hero__start .wp-block-button__link::after {
	content: "";
	width: 17px;
	height: 17px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.35s var(--tapybl-hero-ease);
}

.tapybl-hero__start .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

.tapybl-hero .tapybl-hero__watch .wp-block-button__link,
.tapybl-hero .tapybl-hero__watch .wp-block-button__link:hover {
	padding: 0.875rem 1.375rem 0.875rem 0.875rem;
	border: 1.5px solid rgb(255 255 255 / 0.5);
	background-color: rgb(255 255 255 / 0.06);
	color: #fff;
}

.tapybl-hero .tapybl-hero__watch .wp-block-button__link:hover {
	border-color: #fff;
}

.tapybl-hero__watch .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1.5l7 4.5-7 4.5z' fill='%23011e1e'/%3E%3C/svg%3E") center / 9px no-repeat;
}

/* The phone. */
.tapybl-hero__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	perspective: 1400px;
}

.tapybl-hero__rig {
	position: relative;
	height: min(78%, 640px);
	aspect-ratio: 9 / 18.5;
	transform-style: preserve-3d;
	transform: rotateY(var(--tapybl-hero-ry, -10deg)) rotateX(var(--tapybl-hero-rx, 4deg));
	transition: transform 0.8s var(--tapybl-hero-ease);
}

.tapybl-hero__phone {
	position: absolute;
	inset: 0;
	padding: 9px;
	border-radius: 44px;
	background: #0a0f0f;
	box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.14) inset, 0 50px 100px rgb(1 30 30 / 0.28), 0 0 0 1px #000;
}

/* The notch. */
.tapybl-hero__phone::before {
	content: "";
	position: absolute;
	top: 18px;
	left: 35%;
	z-index: 5;
	width: 30%;
	height: 22px;
	border-radius: 14px;
	background: #000;
}

/* No footage yet: the screen is a deep green the reel's title sits on. */
.tapybl-hero__screen {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 36px;
	background: radial-gradient(120% 70% at 30% 20%, #1f5a52, #12211f 70%);
	color: #fff;
}

/*
 * A screenshot of the finished reel, when the reel has one. It slides in with a
 * slow settle, the way the next reel in a feed does.
 */
.tapybl-hero__shot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.08);
	transition: opacity 0.6s, transform 3.4s var(--tapybl-hero-ease);
}

.tapybl-hero__shot.is-on {
	opacity: 1;
	transform: none;
}

/* It carries its own title and player: the phone's own chrome steps aside. */
.tapybl-hero__screen::after,
.tapybl-hero__bars,
.tapybl-hero__meta {
	transition: opacity 0.35s;
}

.tapybl-hero__screen.has-shot::after,
.tapybl-hero__screen.has-shot .tapybl-hero__bars,
.tapybl-hero__screen.has-shot .tapybl-hero__meta {
	opacity: 0;
}

.tapybl-hero__screen::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgb(0 0 0 / 0.45), transparent 22%, transparent 52%, rgb(0 0 0 / 0.82));
	pointer-events: none;
}

.tapybl-hero__bars {
	position: absolute;
	top: 52px;
	right: 14px;
	left: 14px;
	z-index: 3;
	display: flex;
	gap: 4px;
}

.tapybl-hero__bars span {
	flex: 1;
	height: 3px;
	overflow: hidden;
	border-radius: 2px;
	background: rgb(255 255 255 / 0.28);
}

.tapybl-hero__bars i {
	display: block;
	width: 0;
	height: 100%;
	background: #fff;
}

.tapybl-hero__bars .is-past i {
	width: 100%;
}

.tapybl-hero__bars .is-now i {
	animation: tapybl-hero-progress var(--tapybl-hero-dur) linear forwards;
}

.tapybl-hero__meta {
	position: absolute;
	right: 16px;
	bottom: 18px;
	left: 16px;
	z-index: 3;
}

.tapybl-hero__source,
.tapybl-hero__reel {
	transition: opacity 0.35s, transform 0.5s var(--tapybl-hero-ease);
}

.tapybl-hero__meta.is-out > * {
	opacity: 0;
	transform: translateY(8px);
}

.tapybl-hero__source {
	display: inline-block;
	margin-bottom: 9px;
	padding: 3px 8px;
	border: 1px solid rgb(255 255 255 / 0.28);
	border-radius: 7px;
	background: rgb(255 255 255 / 0.16);
	backdrop-filter: blur(6px);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.7px;
	text-transform: uppercase;
}

.tapybl-hero .tapybl-hero__reel {
	margin: 0;
	font-size: clamp(14px, 1.9vh, 18px);
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -0.015em;
	text-wrap: pretty;
}

.tapybl-hero__flash {
	position: absolute;
	inset: -2px;
	z-index: 6;
	border-radius: 46px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--accent), 0 0 60px 6px rgb(189 244 54 / 0.55);
	opacity: 0;
	pointer-events: none;
}

.tapybl-hero__flash.is-going {
	animation: tapybl-hero-flash 0.9s var(--tapybl-hero-ease);
}

/* The document that flies in from the left and is swallowed by the screen. */
.tapybl-hero__doc {
	--tapybl-hero-doc: clamp(120px, 11vw, 168px);
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 8;
	display: flex;
	flex-direction: column;
	gap: 7px;
	width: var(--tapybl-hero-doc);
	aspect-ratio: 3 / 4;
	margin: calc(var(--tapybl-hero-doc) * -0.667) 0 0 calc(var(--tapybl-hero-doc) * -0.5);
	padding: 14px;
	border-radius: 14px;
	background: #f4f5ee;
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 0 0 1px rgb(1 30 30 / 0.08), 0 24px 50px rgb(1 30 30 / 0.22);
	opacity: 0;
	pointer-events: none;
}

.tapybl-hero__doc.is-going {
	animation: tapybl-hero-suck var(--tapybl-hero-dur) var(--tapybl-hero-ease) forwards;
}

.tapybl-hero__doc .is-tag {
	align-self: flex-start;
	padding: 3px 7px;
	border-radius: 6px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--accent);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.7px;
	text-transform: uppercase;
}

.tapybl-hero__doc .is-line {
	height: 6px;
	border-radius: 3px;
	background: rgb(1 30 30 / 0.14);
}

.tapybl-hero__doc .is-line.is-bold {
	width: 80%;
	height: 9px;
	background: rgb(1 30 30 / 0.8);
}

.tapybl-hero__doc .is-block {
	flex: 1;
	border-radius: 8px;
	background: linear-gradient(135deg, rgb(0 82 80 / 0.2), rgb(67 217 138 / 0.25));
}

.tapybl-hero__doc.is-video .is-block {
	display: grid;
	place-items: center;
	background: #0a0f0f;
}

.tapybl-hero__doc.is-video .is-block::after {
	content: "";
	margin-left: 4px;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	border-left: 14px solid var(--wp--preset--color--accent);
}

.tapybl-hero__doc.is-prompt {
	background: #0a0f0f;
	color: #fff;
	box-shadow: 0 0 0 1.5px rgb(189 244 54 / 0.5), 0 24px 50px rgb(0 0 0 / 0.45);
}

.tapybl-hero__doc.is-prompt .is-tag {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.tapybl-hero__doc.is-prompt p {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: rgb(255 255 255 / 0.85);
}

.tapybl-hero__doc.is-prompt p::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 13px;
	margin-left: 3px;
	vertical-align: -2px;
	background: var(--wp--preset--color--accent);
	animation: tapybl-hero-blink 1s steps(1) infinite;
}

/* The cards hanging off the phone: the quiz, or for a signed reel the acknowledgement. */
.tapybl-hero__float {
	position: absolute;
	z-index: 9;
	border-radius: 18px;
	background: #fff;
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 0 0 1px rgb(1 30 30 / 0.08), 0 30px 60px rgb(1 30 30 / 0.18);
	transform: translateZ(90px);
}

.tapybl-hero__quiz {
	top: 50%;
	right: -38%;
	width: clamp(190px, 15vw, 230px);
	padding: 14px;
	transition: opacity 0.5s, transform 0.7s var(--tapybl-hero-ease);
}

.tapybl-hero__quiz.is-out {
	opacity: 0;
	transform: translateZ(90px) translateY(12px);
}

.tapybl-hero__kicker {
	margin-bottom: 6px;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}

.tapybl-hero__question {
	margin-bottom: 10px;
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.tapybl-hero__answer {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	padding: 8px 10px;
	border-radius: 10px;
	background: rgb(1 30 30 / 0.06);
	font-size: 11.5px;
	font-weight: 700;
	transition: background-color 0.4s;
}

.tapybl-hero__answer b {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 1.5px solid rgb(1 30 30 / 0.3);
	border-radius: 50%;
	transition: all 0.4s;
}

.tapybl-hero__answer.is-ok {
	background: var(--wp--preset--color--accent);
}

.tapybl-hero__answer.is-ok b {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
}

.tapybl-hero__answer.is-ok b::after {
	content: "";
	width: 6px;
	height: 3px;
	border-bottom: 2px solid var(--wp--preset--color--accent);
	border-left: 2px solid var(--wp--preset--color--accent);
	transform: rotate(-45deg) translate(1px, -1px);
}


.tapybl-hero__ack {
	top: 50%;
	right: -30%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px 10px 10px;
	background: var(--wp--preset--color--contrast);
	color: #fff;
	box-shadow: 0 30px 60px rgb(1 30 30 / 0.25);
	font-size: 12px;
	font-weight: 800;
	transition: opacity 0.5s, transform 0.7s var(--tapybl-hero-ease);
}

.tapybl-hero__ack.is-out {
	opacity: 0;
	transform: translateZ(90px) translateY(12px);
}

.tapybl-hero__ack i {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #43d98a;
	color: var(--wp--preset--color--contrast);
}

.tapybl-hero__ack small {
	display: block;
	margin-top: 2px;
	font-size: 10.5px;
	font-weight: 600;
	color: rgb(255 255 255 / 0.55);
}

@media (max-width: 1000px) {
	.tapybl-hero__quiz {
		top: 12%;
		right: -40%;
		width: 175px;
	}

	.tapybl-hero__ack {
		top: 12%;
	}
}

/* Stacked: the copy, then the phone in a row of its own. */
@media (max-width: 781px) {
	.tapybl-hero {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 28rem;
		height: auto;
		padding-block: calc(var(--tapybl-hero-header, 0px) + var(--wp--preset--spacing--50)) var(--wp--preset--spacing--50);
	}

	.tapybl-hero__copy {
		padding-inline: var(--wp--preset--spacing--40);
	}

	.tapybl-hero__rig {
		height: 88%;
	}

	.tapybl-hero__quiz {
		right: -30%;
		width: 170px;
	}
}

@keyframes tapybl-hero-drift {
	to { transform: translate(-6vw, 5vw) scale(1.12); }
}

@keyframes tapybl-hero-ping {
	0% { box-shadow: 0 0 0 0 rgb(189 244 54 / 0.6); }
	70%, 100% { box-shadow: 0 0 0 10px rgb(189 244 54 / 0); }
}

@keyframes tapybl-hero-rise {
	to { transform: none; }
}

@keyframes tapybl-hero-mark {
	to { transform: scaleX(1); }
}

@keyframes tapybl-hero-fade {
	from { opacity: 0; transform: translateY(14px); }
}

@keyframes tapybl-hero-progress {
	to { width: 100%; }
}

@keyframes tapybl-hero-flash {
	15% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes tapybl-hero-suck {
	0% { opacity: 0; transform: translate3d(-150%, -10%, 120px) rotate(-14deg) scale(0.9); }
	14% { opacity: 1; transform: translate3d(-130%, -4%, 120px) rotate(-8deg) scale(1); }
	46% { opacity: 1; transform: translate3d(-118%, 4%, 120px) rotate(-3deg) scale(1); }
	66% { opacity: 1; transform: translate3d(-10%, 0, 60px) rotate(0) scale(0.34); }
	74%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.1); }
}

@keyframes tapybl-hero-blink {
	50% { opacity: 0; }
}

/* hero.js stands down too, so the phone holds its first reel. */
@media (prefers-reduced-motion: reduce) {
	.tapybl-hero *,
	.tapybl-hero *::before,
	.tapybl-hero *::after {
		animation: none !important;
		transition: none !important;
	}
}

/*
 * Use cases.
 *
 * A stack of audiences, each a group holding its copy and its media -- a photo
 * with the reel floating over it. Unmarked, which is what the editor shows,
 * they sit one under the other, each copy beside its media, so every one can
 * be edited in full. On the front tapybl_use_cases() marks the section
 * is-slider and the first audience is-on, and the section becomes one screen:
 * copy on the left between the eyebrow and the arrows, media on the right.
 */
.tapybl-cases {
	--tapybl-cases-ease: cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	background: radial-gradient(120% 100% at 0% 0%, #0c6a40 0%, #04382b 42%, #011e1e 100%);
	color: #fff;
}

.tapybl-cases .tapybl-cases__eyebrow {
	margin: 0;
	padding-inline: clamp(0.25rem, 2vw, 2rem);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.tapybl-cases__slide {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(1.25rem, 3vw, 3rem);
	margin-block: clamp(1.5rem, 3vw, 2.5rem);
}

.tapybl-cases__copy {
	align-self: center;
	padding-inline: clamp(0.25rem, 2vw, 2rem);
}

.tapybl-cases__copy > * {
	margin: 0;
}

.tapybl-cases .tapybl-cases__tag {
	display: inline-block;
	margin-bottom: 1.375rem;
	padding: 6px 12px;
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-size: 0.71875rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tapybl-cases .tapybl-cases__title {
	font-size: clamp(2.75rem, 6.2vw, 6.5rem);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.035em;
	color: #fff;
	text-wrap: balance;
}

.tapybl-cases .tapybl-cases__desc {
	max-width: 34rem;
	margin-top: 1.625rem;
	font-size: clamp(0.875rem, 1.08vw, 1.0625rem);
	line-height: 1.65;
	text-wrap: pretty;
}

.tapybl-cases .tapybl-cases__more {
	margin-top: 1.625rem;
}

.tapybl-cases__more a {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.9375rem;
	font-weight: 800;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.tapybl-cases__more a::after {
	content: "";
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23011e1e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center / 15px no-repeat;
	transition: transform 0.35s var(--tapybl-cases-ease);
}

.tapybl-cases__more a:hover::after {
	transform: translateX(4px);
}

/* The media: a photo filling a rounded panel, with the reel floating over it. */
.tapybl-cases__media {
	position: relative;
	min-height: 35rem;
	overflow: hidden;
	border-radius: 28px;
	background: #1b2b28;
	box-shadow: 0 40px 80px rgb(1 30 30 / 0.22);
}

.tapybl-cases__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(180deg, rgb(0 0 0 / 0.18), transparent 30%, transparent 60%, rgb(0 0 0 / 0.35));
	pointer-events: none;
}

.tapybl-cases .tapybl-cases__photo {
	position: absolute;
	inset: 0;
	margin: 0;
}

.tapybl-cases__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

.tapybl-cases .tapybl-cases__reel {
	position: absolute;
	right: clamp(1.25rem, 6%, 4rem);
	bottom: clamp(1.25rem, 6%, 3.5rem);
	z-index: 4;
	width: clamp(190px, 17vw, 250px);
	margin: 0;
	padding: 8px;
	border: 1px solid rgb(255 255 255 / 0.45);
	border-radius: 30px;
	background: rgb(255 255 255 / 0.22);
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
	backdrop-filter: blur(18px) saturate(1.3);
	box-shadow: 0 30px 60px rgb(0 0 0 / 0.35);
	transform: translate(var(--tapybl-cases-x, 0), var(--tapybl-cases-y, 0));
	transition: transform 0.8s var(--tapybl-cases-ease), opacity 0.5s;
}

.tapybl-cases__reel img {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 13.5;
	border-radius: 23px;
	object-fit: cover;
}

.tapybl-cases .tapybl-cases__all {
	margin: 0;
	padding-inline: clamp(0.25rem, 2vw, 2rem);
}

.tapybl-cases__all a {
	padding-bottom: 3px;
	border-bottom: 2px solid var(--wp--preset--color--accent);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 800;
	text-decoration: none;
}

/*
 * The slider. One grid for the section; the slides and each slide inside them
 * take it over as subgrids, so every audience's copy lands in the middle of
 * the left column and its media fills the right, all in the same cells.
 */
.tapybl-cases.is-slider {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	grid-template-rows: auto minmax(0, 1fr) auto;
	column-gap: clamp(1.25rem, 3vw, 3rem);
	min-height: clamp(38rem, 100svh, 52rem);
}

.tapybl-cases.is-slider > *,
.tapybl-cases.is-slider .tapybl-cases__slides > * {
	margin: 0;
}

.tapybl-cases.is-slider .tapybl-cases__eyebrow {
	grid-area: 1 / 1;
	padding-top: clamp(1rem, 2.4vw, 2.5rem);
}

.tapybl-cases.is-slider .tapybl-cases__slides,
.tapybl-cases.is-slider .tapybl-cases__slide {
	display: grid;
	grid-area: 1 / 1 / -1 / -1;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
}

.tapybl-cases.is-slider .tapybl-cases__copy {
	grid-area: 2 / 1;
	padding-block: 2.5rem;
}

/*
 * Stacked, a panel's own backdrop would hide the photo it wipes in over, so
 * the panels are see-through and each photo carries its own.
 */
.tapybl-cases.is-slider .tapybl-cases__media {
	grid-area: 1 / 2 / -1 / -1;
	background: transparent;
}

.tapybl-cases.is-slider .tapybl-cases__all,
.tapybl-cases__nav {
	position: relative;
	z-index: 5;
	grid-area: 3 / 1;
	align-self: center;
}

.tapybl-cases.is-slider .tapybl-cases__all {
	justify-self: end;
}

.tapybl-cases__nav {
	display: flex;
	gap: 0.625rem;
	justify-self: start;
	padding-inline: clamp(0.25rem, 2vw, 2rem);
}

.tapybl-cases__nav[hidden] {
	display: none;
}

.tapybl-cases__arrow {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1.5px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--accent);
	cursor: pointer;
	transition: background-color 0.25s, color 0.25s;
}

.tapybl-cases__arrow:hover,
.tapybl-cases__arrow.is-fill {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.tapybl-cases__arrow.is-fill:hover {
	border-color: #fff;
	background: #fff;
}

/*
 * Which audience shows. The copy of the one leaving fades down and out while
 * the next one's rises in after it; its photo wipes in from the right over the
 * one leaving, which holds still underneath until it is covered.
 */
.tapybl-cases.is-slider .tapybl-cases__copy > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.45s, transform 0.7s var(--tapybl-cases-ease);
}

.tapybl-cases.is-slider .is-on .tapybl-cases__copy > * {
	opacity: 1;
	transform: none;
	transition-delay: 0.38s;
}

.tapybl-cases.is-slider .is-on .tapybl-cases__desc {
	transition-delay: 0.44s;
}

.tapybl-cases.is-slider .is-on .tapybl-cases__more {
	transition-delay: 0.48s;
}

.tapybl-cases.is-slider .tapybl-cases__slide:not(.is-on) .tapybl-cases__copy {
	pointer-events: none;
}

.tapybl-cases.is-slider .tapybl-cases__slide:not(.is-on, .is-prev) .tapybl-cases__media {
	visibility: hidden;
}

.tapybl-cases.is-slider .is-on .tapybl-cases__media {
	z-index: 2;
}

.tapybl-cases.is-slider .is-prev .tapybl-cases__media {
	z-index: 1;
}

.tapybl-cases.is-slider .tapybl-cases__photo {
	clip-path: inset(0 0 0 100%);
}

.tapybl-cases.is-slider .is-on .tapybl-cases__photo {
	clip-path: inset(0);
	transition: clip-path 1.1s var(--tapybl-cases-ease);
}

.tapybl-cases.is-slider .is-prev .tapybl-cases__photo {
	clip-path: inset(0);
}

.tapybl-cases.is-slider .tapybl-cases__photo img {
	transform: scale(1.08);
}

.tapybl-cases.is-slider .is-on .tapybl-cases__photo img {
	transform: none;
	transition: transform 7s linear;
}

.tapybl-cases.is-slider .is-prev .tapybl-cases__reel {
	opacity: 0;
}

.tapybl-cases__word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}

.tapybl-cases__word > span {
	display: inline-block;
}

.tapybl-cases.is-slider .is-on .tapybl-cases__word > span {
	animation: tapybl-cases-rise 0.9s var(--tapybl-cases-ease) both;
}

/* Backdrop: two slow blurs. */
.tapybl-cases__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.tapybl-cases__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(110px);
	animation: tapybl-cases-drift 18s ease-in-out infinite alternate;
}

.tapybl-cases__orb.is-1 {
	top: -18vw;
	left: -12vw;
	width: 44vw;
	height: 44vw;
	background: #12955a;
	opacity: 0.45;
}

.tapybl-cases__orb.is-2 {
	bottom: -20vw;
	left: 22vw;
	width: 30vw;
	height: 30vw;
	background: var(--wp--preset--color--accent);
	opacity: 0.14;
	animation-duration: 22s;
	animation-direction: alternate-reverse;
}

/* Stacked: media on top, then the copy, then the arrows. */
@media (max-width: 900px) {
	.tapybl-cases__slide {
		grid-template-columns: minmax(0, 1fr);
	}

	.tapybl-cases__media {
		order: -1;
		min-height: 26rem;
	}

	.tapybl-cases.is-slider {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto auto;
		row-gap: 1.25rem;
		min-height: 0;
	}

	.tapybl-cases.is-slider .tapybl-cases__media {
		grid-area: 2 / 1;
	}

	.tapybl-cases.is-slider .tapybl-cases__copy {
		grid-area: 3 / 1;
		padding-block: 0.5rem;
	}

	.tapybl-cases.is-slider .tapybl-cases__all,
	.tapybl-cases__nav {
		grid-area: 4 / 1;
	}
}

/*
 * Use cases — two cards (patterns/use-cases-cards.php).
 *
 * The same slider in a different coat: no full-bleed backdrop, but two
 * rounded cards side by side -- the copy, eyebrow and arrows on a dark green
 * card on the left, the photo on the right. The green card is the slider's own
 * backdrop layer, narrowed to the left column. The reel sits in a lesson card
 * with its name above and its result below, and that card is what floats.
 */
/* Two cards need more room than the theme's wide size, as the pricing table does. */
.tapybl-cases.tapybl-cases--cards.alignwide {
	max-width: 76rem;
}

.tapybl-cases.tapybl-cases--cards {
	--tapybl-cc-gap: clamp(0.75rem, 1.4vw, 1.25rem);
	--tapybl-cc-pad: clamp(1.5rem, 5vw, 5rem);
	--tapybl-cc-radius: 20px;
	padding: 0;
	background: transparent;
	overflow: visible;
}

/* Stacked (the editor), each copy has half the width: a smaller title keeps words whole. */
.tapybl-cases--cards:not(.is-slider) .tapybl-cases__title {
	font-size: clamp(2rem, 3.4vw, 3.25rem);
}

/* The editor, and no script: one green card holding the stack. */
.tapybl-cases--cards:not(.is-slider) {
	padding: var(--tapybl-cc-pad);
	border-radius: var(--tapybl-cc-radius);
	background: var(--tapybl-green);
}

.tapybl-cases--cards.is-slider {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--tapybl-cc-gap);
	min-height: clamp(36rem, 50vw, 46rem);
}

.tapybl-cases--cards .tapybl-cases__bg {
	inset: 0 auto 0 0;
	width: calc(50% - var(--tapybl-cc-gap) / 2);
	overflow: hidden;
	border-radius: var(--tapybl-cc-radius);
	background: var(--tapybl-green);
}

.tapybl-cases--cards .tapybl-cases__orb.is-1 {
	top: -10vw;
	left: -10vw;
	width: 30vw;
	height: 30vw;
	opacity: 0.35;
}

.tapybl-cases--cards .tapybl-cases__orb.is-2 {
	left: 10vw;
	width: 22vw;
	height: 22vw;
}

.tapybl-cases--cards.is-slider .tapybl-cases__eyebrow,
.tapybl-cases--cards.is-slider .tapybl-cases__copy,
.tapybl-cases--cards .tapybl-cases__nav,
.tapybl-cases--cards.is-slider .tapybl-cases__all {
	padding-inline: var(--tapybl-cc-pad);
}

.tapybl-cases--cards.is-slider .tapybl-cases__eyebrow {
	padding-top: clamp(2rem, 6vw, 5.5rem);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
}

.tapybl-cases--cards.is-slider .tapybl-cases__nav,
.tapybl-cases--cards.is-slider .tapybl-cases__all {
	padding-bottom: clamp(2rem, 6vw, 5.5rem);
}

.tapybl-cases--cards .tapybl-cases__title {
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	font-weight: 700;
	line-height: 1.02;
	overflow-wrap: normal;
	hyphens: none;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--accent);
}

.tapybl-cases--cards .tapybl-cases__desc {
	max-width: 32rem;
	margin-top: 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: rgb(255 255 255 / 0.92);
}

.tapybl-cases--cards .tapybl-cases__more {
	margin-top: 1rem;
}

.tapybl-cases--cards .tapybl-cases__more a {
	font-size: 0.9375rem;
	font-weight: 600;
}

.tapybl-cases--cards .tapybl-cases__more a::after {
	display: none;
}

.tapybl-cases--cards .tapybl-cases__more a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Pill arrows, both filled. */
.tapybl-cases--cards .tapybl-cases__nav {
	gap: 0.875rem;
}

.tapybl-cases--cards .tapybl-cases__arrow {
	width: 3.5rem;
	height: 2.375rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	transition: background-color 0.25s, transform 0.3s var(--tapybl-cases-ease);
}

.tapybl-cases--cards .tapybl-cases__arrow:hover {
	background: #fff;
	transform: translateY(-2px);
}

.tapybl-cases--cards .tapybl-cases__all a {
	padding: 0;
	border: 0;
	color: var(--wp--preset--color--accent);
	font-size: 0.9375rem;
	font-weight: 600;
}

.tapybl-cases--cards .tapybl-cases__all a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* The photo card, flush with the green one: no block gap above it. */
.tapybl-cases--cards.is-slider .tapybl-cases__slide > * {
	margin-block: 0;
}

.tapybl-cases--cards .tapybl-cases__media {
	min-height: clamp(30rem, 46vw, 46rem);
	border-radius: var(--tapybl-cc-radius);
	box-shadow: none;
}

.tapybl-cases--cards .tapybl-cases__media::after {
	display: none;
}

/*
 * The lesson card: a thick frame of frosted glass around an empty window onto
 * the photo underneath, with the course and lesson laid over the window's top
 * on a darkening fade and the result below it on the glass. The glass is the
 * card's ::before, blurred, with the window masked out of it -- the window is
 * 9:15, so a rounded rectangle drawn in that proportion is the hole. It stays
 * put under the pointer, unlike the original slider's reel. The
 * window is the empty group in the pattern; a reel image left there by an
 * earlier version of the pattern is treated the same way and not shown.
 */
.tapybl-cases--cards .tapybl-cases__lesson {
	--pad: 0.75rem;
	position: absolute;
	top: 41%;
	left: 35%;
	z-index: 4;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	width: clamp(160px, 29%, 240px);
	padding: var(--pad) var(--pad) 0.85rem;
	border: 1px solid rgb(255 255 255 / 0.6);
	border-radius: 30px;
	box-shadow: 0 30px 60px rgb(0 0 0 / 0.22);
	color: #fff;
	container-type: inline-size;
}

.tapybl-cases--cards .tapybl-cases__lesson::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: rgb(225 225 225 / 0.45);
	-webkit-backdrop-filter: blur(14px) saturate(1.15);
	backdrop-filter: blur(14px) saturate(1.15);
	--hole: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 150'%3E%3Crect width='90' height='150' rx='12'/%3E%3C/svg%3E");
	-webkit-mask-image: linear-gradient(#000 0 0), var(--hole);
	-webkit-mask-size: 100% 100%, 100cqw calc(100cqw * 5 / 3);
	-webkit-mask-position: 0 0, var(--pad) var(--pad);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-composite: xor;
	mask-image: linear-gradient(#000 0 0), var(--hole);
	mask-size: 100% 100%, 100cqw calc(100cqw * 5 / 3);
	mask-position: 0 0, var(--pad) var(--pad);
	mask-repeat: no-repeat;
	mask-composite: exclude;
}

.tapybl-cases--cards .tapybl-cases__lesson > * {
	margin: 0;
}

.tapybl-cases--cards .tapybl-cases__course,
.tapybl-cases--cards .tapybl-cases__name {
	grid-area: 1 / 1;
	z-index: 2;
	align-self: start;
	padding-inline: 0.85rem;
	text-shadow: 0 1px 6px rgb(0 0 0 / 0.3);
}

.tapybl-cases--cards .tapybl-cases__course {
	padding-top: 0.85rem;
	font-size: 0.625rem;
	line-height: 1.2;
	color: rgb(255 255 255 / 0.9);
}

.tapybl-cases--cards .tapybl-cases__name {
	padding-top: 1.6rem;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.25;
}

/*
 * The window is drawn, not a block: the course line is stretched to its
 * height, which sizes the first row, and ::after paints the fade and the play
 * mark into it. A window or reel block left by an earlier version of the
 * pattern is not shown.
 */
.tapybl-cases--cards .tapybl-cases__lesson :is(.tapybl-cases__window, .tapybl-cases__reel) {
	display: none;
}

.tapybl-cases--cards .tapybl-cases__course {
	min-height: calc(100cqw * 5 / 3);
}

.tapybl-cases--cards .tapybl-cases__lesson::after {
	content: "";
	position: absolute;
	top: var(--pad);
	left: var(--pad);
	z-index: 1;
	width: 100cqw;
	height: calc(100cqw * 5 / 3);
	border-radius: calc(100cqw * 12 / 90);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") 51.5% 50% / 11% no-repeat,
		radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.4) calc(100cqw * 0.13), transparent calc(100cqw * 0.13 + 1px)),
		linear-gradient(180deg, rgb(0 0 0 / 0.45) 0%, rgb(0 0 0 / 0.12) 28%, transparent 45%);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
	pointer-events: none;
}

/* The result, dark on the glass. */
.tapybl-cases--cards .tapybl-cases__done {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.7rem;
	padding-inline: 0.2rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: #111;
}

.tapybl-cases--cards .tapybl-cases__done::before {
	content: "";
	flex: none;
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 50%;
	background: #111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 70% no-repeat;
}

.tapybl-cases--cards .tapybl-cases__score {
	padding-inline-start: 1.5rem;
	font-size: 0.6875rem;
	color: rgb(17 17 17 / 0.75);
}

/*
 * The lesson card rises in once its photo has wiped in. The card itself only
 * moves: any opacity below 1 on it would make it a backdrop root, and the
 * glass would show unblurred until the fade ended. So the fade is on the
 * glass, the window and the text instead, and the blur comes in with them.
 * The card leaving needs nothing -- the next photo wipes in over it.
 */
.tapybl-cases--cards.is-slider .is-on .tapybl-cases__lesson {
	animation: tapybl-cc-rise 0.8s var(--tapybl-cases-ease) 0.55s backwards;
}

.tapybl-cases--cards.is-slider .is-on .tapybl-cases__lesson::before,
.tapybl-cases--cards.is-slider .is-on .tapybl-cases__lesson::after,
.tapybl-cases--cards.is-slider .is-on .tapybl-cases__lesson > * {
	animation: tapybl-cc-fade 0.8s var(--tapybl-cases-ease) 0.55s backwards;
}

@keyframes tapybl-cc-rise {
	from { translate: 0 24px; border-color: transparent; box-shadow: none; }
}

@keyframes tapybl-cc-fade {
	from { opacity: 0; }
}

/* Stacked: one green card, the photo first inside it. */
@media (max-width: 900px) {
	.tapybl-cases--cards .tapybl-cases__bg {
		width: 100%;
	}

	/* The photo, then the eyebrow, the copy, and the arrows beside the link. */
	.tapybl-cases--cards.is-slider {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		padding-bottom: var(--tapybl-cc-pad);
	}

	.tapybl-cases--cards.is-slider .tapybl-cases__media {
		grid-area: 1 / 1;
		min-height: 0;
		aspect-ratio: 16 / 10;
		margin: var(--tapybl-cc-pad) var(--tapybl-cc-pad) 0;
	}

	.tapybl-cases--cards.is-slider .tapybl-cases__eyebrow {
		grid-area: 2 / 1;
		padding-top: 0.5rem;
	}

	.tapybl-cases--cards.is-slider .tapybl-cases__nav,
	.tapybl-cases--cards.is-slider .tapybl-cases__all {
		padding-top: 1rem;
		padding-bottom: 0;
	}

	.tapybl-cases--cards.is-slider .tapybl-cases__nav {
		justify-self: start;
	}

	.tapybl-cases--cards .tapybl-cases__title {
		font-size: clamp(2.25rem, 10.5vw, 3rem);
	}

	.tapybl-cases--cards .tapybl-cases__desc {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	/* The photo is wide and short here: the lesson card rises to fit it. */
	.tapybl-cases--cards .tapybl-cases__lesson {
		top: 8%;
		left: 55%;
		width: clamp(140px, 24%, 200px);
	}
}

/* On a phone the photo is square and the lesson card shrinks with it. */
@media (max-width: 600px) {
	.tapybl-cases--cards.is-slider .tapybl-cases__media {
		aspect-ratio: 1;
	}

	.tapybl-cases--cards .tapybl-cases__lesson {
		--pad: 0.4rem;
		top: 28%;
		left: 35%;
		width: 30%;
		padding-bottom: 0.4rem;
		border-radius: 16px;
	}

	.tapybl-cases--cards .tapybl-cases__course,
	.tapybl-cases--cards .tapybl-cases__name {
		padding-inline: 0.4rem;
	}

	/* One line, so it cannot run into the lesson's name. */
	.tapybl-cases--cards .tapybl-cases__course {
		overflow: hidden;
		padding-top: 0.4rem;
		font-size: 0.4375rem;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.tapybl-cases--cards .tapybl-cases__nav {
		gap: 0.5rem;
	}

	.tapybl-cases--cards .tapybl-cases__arrow {
		width: 3rem;
	}

	.tapybl-cases--cards .tapybl-cases__all a {
		font-size: 0.875rem;
	}

	.tapybl-cases--cards .tapybl-cases__name {
		padding-top: 0.85rem;
		font-size: 0.5625rem;
	}

	.tapybl-cases--cards .tapybl-cases__done {
		gap: 0.25rem;
		margin-top: 0.4rem;
		font-size: 0.5rem;
	}

	.tapybl-cases--cards .tapybl-cases__done::before {
		width: 0.6rem;
		height: 0.6rem;
	}

	.tapybl-cases--cards .tapybl-cases__score {
		padding-inline-start: 1.05rem;
		font-size: 0.4375rem;
	}
}

@keyframes tapybl-cases-rise {
	from { transform: translateY(105%); }
}

@keyframes tapybl-cases-drift {
	to { transform: translate(6vw, 4vw) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
	.tapybl-cases *,
	.tapybl-cases *::before,
	.tapybl-cases *::after {
		animation: none !important;
		transition: none !important;
	}
}

/*
 * Use cases index.
 *
 * A headline, a list of audiences and, on the front, a phone beside the list.
 * Unmarked -- in the editor -- every row is open and shows its own reel, so
 * each can be edited in full. tapybl_use_cases_index() marks the section
 * is-index, gathers the reels into the phone and opens the first row; from
 * there one row is open at a time and the phone plays its reel.
 *
 * Wider than the theme's wide size, like the series grid: the list and the
 * phone need the room.
 */
.tapybl-index {
	--tapybl-index-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--tapybl-index-line: rgb(1 30 30 / 0.14);
	padding-block: clamp(3rem, 8vh, 5.5rem) clamp(3rem, 8vw, 6rem);
}

.tapybl-index.alignwide {
	max-width: min(100%, 77.5rem);
}

.tapybl-index > *,
.tapybl-index__list > * {
	margin-block: 0;
}

.tapybl-index .tapybl-index__title {
	font-size: clamp(2.75rem, 5.6vw, 5.25rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.035em;
}

/* The highlighted word: a lime bar under it, drawn behind the letters. */
.tapybl-index__title em {
	position: relative;
	z-index: 0;
	font-style: normal;
}

.tapybl-index__title em::after {
	content: "";
	position: absolute;
	right: -0.04em;
	bottom: 0.1em;
	left: -0.04em;
	z-index: -1;
	height: 0.26em;
	background: var(--wp--preset--color--accent);
}

.tapybl-index .tapybl-index__lead {
	max-width: 27.5rem;
	margin-top: 1.25rem;
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	font-weight: 500;
	line-height: 1.55;
	text-wrap: pretty;
}

.tapybl-index .tapybl-index__list {
	margin-top: clamp(2.25rem, 6vh, 3.5rem);
	border-top: 1px solid var(--wp--preset--color--contrast);
}

/*
 * A row: the name, with the arrow at the far end, over the line on it. The
 * whole row is the name's link -- it stretches over it -- so pointing anywhere
 * on the row opens it and a click goes to the page.
 */
.tapybl-index__row {
	position: relative;
	padding-block: 1.375rem;
	border-bottom: 1px solid var(--tapybl-index-line);
}

.tapybl-index__row > * {
	margin-block: 0;
}

.tapybl-index .tapybl-index__name {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: clamp(1.375rem, 2.2vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.tapybl-index__name a {
	color: inherit;
	text-decoration: none;
}

.tapybl-index__name a::before {
	content: "";
	position: absolute;
	inset: 0;
}

.tapybl-index__name::after {
	content: "";
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	margin-left: auto;
	border: 1.5px solid var(--tapybl-index-line);
	border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23011e1e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center / 16px no-repeat;
	transition: all 0.4s var(--tapybl-index-ease);
}

.tapybl-index .tapybl-index__desc {
	max-width: 31.25rem;
	padding-top: 0.75rem;
	font-size: 0.96875rem;
	line-height: 1.6;
	text-wrap: pretty;
}

.tapybl-index__reel {
	max-width: 10rem;
	margin-top: 1rem;
}

.tapybl-index__reel figcaption {
	font-size: 0.8125rem;
}

/*
 * On the front. The rows fold shut but the open one, its line sliding out
 * from under the name with a bar that runs for as long as it stays open.
 */
.tapybl-index.is-index {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	grid-template-rows: auto auto 1fr;
	column-gap: clamp(2rem, 5vw, 5rem);
}

.tapybl-index.is-index > :not(.tapybl-index__side) {
	grid-column: 1;
}

.tapybl-index.is-index .tapybl-index__reel {
	display: none;
}

.tapybl-index.is-index .tapybl-index__row {
	display: grid;
	grid-template-rows: auto 0fr;
	transition: grid-template-rows 0.55s var(--tapybl-index-ease);
}

.tapybl-index.is-index .tapybl-index__row.is-on {
	grid-template-rows: auto 1fr;
}

.tapybl-index.is-index .tapybl-index__desc {
	min-height: 0;
	overflow: hidden;
}

.tapybl-index.is-index .tapybl-index__name {
	color: rgb(1 30 30 / 0.38);
	transition: color 0.4s;
}

.tapybl-index.is-index .is-on .tapybl-index__name,
.tapybl-index.is-index .tapybl-index__row:hover .tapybl-index__name {
	color: var(--wp--preset--color--contrast);
}

.tapybl-index.is-index .tapybl-index__name::after {
	opacity: 0;
	transform: translateX(-8px);
}

.tapybl-index.is-index .is-on .tapybl-index__name::after {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent);
	opacity: 1;
	transform: none;
}

/* The bar: a track the width of the line, filling over the open time. */
.tapybl-index.is-index .tapybl-index__desc::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 1rem;
	background: linear-gradient(var(--wp--preset--color--contrast), var(--wp--preset--color--contrast)) 0 0 / 0 100% no-repeat, var(--tapybl-index-line);
}

.tapybl-index.is-index .is-on .tapybl-index__desc::after {
	animation: tapybl-index-progress 6s linear forwards;
}

.tapybl-index__list.is-held .is-on .tapybl-index__desc::after {
	animation-play-state: paused;
}

/* The phone, holding still beside the list as the page scrolls. */
.tapybl-index__side {
	grid-column: 2;
	grid-row: 1 / -1;
}

.tapybl-index__stick {
	position: sticky;
	top: 2.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.125rem;
}

.tapybl-index__phone {
	width: min(100%, 330px);
	aspect-ratio: 9 / 19;
	padding: 10px;
	border-radius: 46px;
	background: var(--wp--preset--color--contrast);
	box-shadow: 0 40px 80px rgb(1 30 30 / 0.22);
}

.tapybl-index__screen {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 37px;
	background: #12211f;
}

.tapybl-index__shot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 0.6s, transform 1s var(--tapybl-index-ease);
}

.tapybl-index__shot.is-on {
	opacity: 1;
	transform: none;
}

.tapybl-index .tapybl-index__now {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgb(1 30 30 / 0.6);
}

.tapybl-index__now b {
	color: var(--wp--preset--color--contrast);
}

/* Stacked: the phone first, smaller, and no longer sticking. */
@media (max-width: 900px) {
	.tapybl-index.is-index {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
	}

	.tapybl-index__side {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 2rem;
	}

	.tapybl-index__stick {
		position: static;
	}

	.tapybl-index__phone {
		width: 220px;
	}
}

/*
 * On a phone, centred: the title, the phone, then the list as a stack of big
 * names -- no lines, arrows or bar -- with the open one dark over its copy and
 * the rest muted. The highlight becomes a box behind the whole word.
 */
@media (max-width: 781px) {
	.tapybl-index.is-index {
		text-align: center;
	}

	.tapybl-index .tapybl-index__title {
		font-size: clamp(2.25rem, 10vw, 2.75rem);
		text-wrap: balance;
	}

	.tapybl-index__title em::after {
		right: -0.08em;
		bottom: 0.02em;
		left: -0.08em;
		height: 0.9em;
		border-radius: 0.12em;
	}

	.tapybl-index .tapybl-index__lead {
		margin-inline: auto;
	}

	.tapybl-index.is-index .tapybl-index__side {
		grid-row: 3;
		margin-block: 2rem 1.5rem;
	}

	.tapybl-index.is-index .tapybl-index__list {
		grid-row: 4;
		margin-top: 0;
		border-top: 0;
	}

	.tapybl-index.is-index .tapybl-index__row {
		padding-block: 0.6rem;
		border-bottom: 0;
	}

	.tapybl-index.is-index .tapybl-index__name {
		justify-content: center;
		font-size: clamp(1.75rem, 8vw, 2.25rem);
		font-weight: 800;
		line-height: 1.05;
		letter-spacing: -0.03em;
		text-wrap: balance;
	}

	.tapybl-index.is-index .tapybl-index__name::after,
	.tapybl-index.is-index .tapybl-index__desc::after {
		display: none;
	}

	.tapybl-index.is-index .tapybl-index__desc {
		max-width: 22rem;
		margin-inline: auto;
		padding-top: 0.5rem;
		color: rgb(1 30 30 / 0.65);
	}
}

@keyframes tapybl-index-progress {
	to { background-size: 100% 100%, auto; }
}

@media (prefers-reduced-motion: reduce) {
	.tapybl-index *,
	.tapybl-index *::before,
	.tapybl-index *::after {
		animation: none !important;
		transition: none !important;
	}
}

/*
 * Hero — phone in hand (patterns/hero-photo.php).
 *
 * Copy on the left, the phone on the right, both on one centred measure --
 * the background runs full width, the content does not. The photo sits on the
 * foot of the section. When a video is chosen, tapybl_hero_photo_screen()
 * marks it and adds the photo's cut-out; the rules below put the video on the
 * phone's screen and the cut-out over both. The numbers are the screen's place
 * in assets/images/hero-phone.webp (1686 x 1655), as fractions of it, so they
 * hold at any size. It shares the hero's trick of running up under the
 * header when it opens the page (see the rules for .tapybl-hero above).
 */
.tapybl-hero-photo {
	--tapybl-hp-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--tapybl-hp-gutter: max(var(--wp--preset--spacing--40), calc((100% - 74rem) / 2));
	/* How far the phone may hang past the content: into the side margin, never off the page. */
	--tapybl-hp-bleed: max(0px, calc((100vw - 74rem) / 2));
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	column-gap: var(--wp--preset--spacing--40);
	align-items: center;
	min-height: clamp(40rem, 100svh, 52rem);
	padding-top: var(--tapybl-hero-header, 0);
	padding-inline: var(--tapybl-hp-gutter);
	/* The use cases card's green, run across the hero. */
	background: var(--tapybl-green);
	color: #fff;
}

.tapybl-hero-photo > * {
	margin-block: 0;
}

.tapybl-hero-photo__copy {
	position: relative;
	z-index: 2;
	padding-block: var(--wp--preset--spacing--50);
}

.tapybl-hero-photo__copy > * {
	animation: tapybl-hp-rise 0.9s var(--tapybl-hp-ease) both;
}

.tapybl-hero-photo__copy > :nth-child(2) { animation-delay: 0.12s; }
.tapybl-hero-photo__copy > :nth-child(3) { animation-delay: 0.24s; }
.tapybl-hero-photo__copy > :nth-child(4) { animation-delay: 0.36s; }

.tapybl-hero-photo .tapybl-hero-photo__title {
	max-width: 9.6em;
	margin: 0;
	font-size: clamp(2.5rem, 4.4vw, 4.4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #fff;
}

.tapybl-hero-photo__title mark {
	padding: 0;
}

.tapybl-hero-photo .tapybl-hero-photo__lead {
	max-width: 31em;
	margin: clamp(1.5rem, 5vh, 3rem) 0 0;
	font-size: 1rem;
	line-height: 1.45;
	color: rgb(255 255 255 / 0.88);
}

.tapybl-hero-photo .tapybl-hero-photo__ctas {
	gap: 0.5rem;
	margin-top: clamp(1.5rem, 5vh, 3rem);
}

.tapybl-hero-photo .wp-block-button__link {
	padding: 0.8rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	transition: transform 0.3s var(--tapybl-hp-ease), background-color 0.25s, color 0.25s, border-color 0.25s;
}

.tapybl-hero-photo .wp-block-button__link:hover {
	transform: translateY(-2px);
}

.tapybl-hero-photo .tapybl-hero-photo__start .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.tapybl-hero-photo .tapybl-hero-photo__start .wp-block-button__link:hover {
	background-color: #fff;
}

.tapybl-hero-photo .tapybl-hero-photo__watch .wp-block-button__link {
	border: 1px solid rgb(255 255 255 / 0.25);
	background: transparent;
	color: var(--wp--preset--color--accent);
}

.tapybl-hero-photo .tapybl-hero-photo__watch .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--accent);
}

.tapybl-hero-photo .tapybl-hero-photo__perks {
	gap: 0.5rem 1.5rem;
	margin-top: 1.1rem;
	font-size: 1rem;
	color: var(--wp--preset--color--accent);
}

.tapybl-hero-photo__perks p {
	margin: 0;
}

.tapybl-hero-photo__perks p::before {
	content: "\2713";
	margin-inline: 0.4rem 0.6rem;
}

/*
 * The phone: the photo, the video and cut-out laid exactly over it, and the
 * three labels floating around it. It is drawn much larger than its column --
 * the photo's transparent left side runs in under the copy -- and hangs past
 * the content's right edge into the side margin, as in the design. The hands
 * run off the section's foot, which clips them.
 *
 * --w is the photo's width; every offset below is a share of it or of the
 * photo itself (assets/images/hero-phone.webp, 2244 x 1838 in its source), so
 * all of it scales together.
 */
.tapybl-hero-photo .tapybl-hero-photo__media {
	--w: min(218%, 69rem);
	position: relative;
	align-self: end;
	justify-self: end;
	width: var(--w);
	max-width: none;
	/* Into the margin, then on by the photo's empty right side. */
	margin-inline-end: calc(-1 * min(25%, var(--tapybl-hp-bleed)) - var(--w) * 0.1765);
	aspect-ratio: 2244 / 1838;
	/* What hangs below the section: the hands under the phone. */
	margin-block-end: calc(var(--w) * -0.171);
	animation: tapybl-hp-in 1.1s var(--tapybl-hp-ease) 0.2s both;
}

.tapybl-hero-photo__media > * {
	margin: 0;
}

.tapybl-hero-photo .tapybl-hero-photo__image,
.tapybl-hero-photo__overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.tapybl-hero-photo__media .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
}

/* Stacked by z-index, not source order, so the blocks can sit in any order. */
.tapybl-hero-photo .tapybl-hero-photo__image {
	z-index: 0;
}

.tapybl-hero-photo__overlay {
	z-index: 2;
}

/* The screen, in the photo: slightly turned, and inset past the bezel. */
.tapybl-hero-photo .tapybl-hero-photo__media .wp-block-video {
	z-index: 1;
	position: absolute;
	top: 0.958%;
	left: 37.549%;
	width: 26.765%;
	height: 70.479%;
	overflow: hidden;
	border-radius: 16.65% / 7.72%;
	background: #000;
	rotate: -0.75deg;
}

/*
 * The labels: placed where the design has them, tilted as drawn, popping in
 * after the headline and then drifting, each on its own beat.
 */
.tapybl-hero-photo .tapybl-hero-photo__label {
	--in: 0.7s;
	position: absolute;
	z-index: 3;
	height: auto;
	filter: drop-shadow(0 14px 24px rgb(0 0 0 / 0.28));
	/*
	 * Three motions on three properties, so they stack: the pop on scale, the
	 * drift on translate and rotate, the pulse on transform.
	 */
	animation:
		tapybl-hp-pop 0.7s var(--tapybl-hp-ease) both,
		tapybl-hp-float 5s ease-in-out infinite alternate,
		tapybl-hp-pulse 2.6s ease-in-out infinite;
	animation-delay: var(--in), calc(var(--in) + 0.7s), calc(var(--in) + 0.7s);
}

.tapybl-hero-photo .tapybl-hero-photo__label img {
	height: auto;
}

.tapybl-hero-photo .tapybl-hero-photo__label--lesson {
	--in: 0.95s;
	top: 32.64%;
	left: 21.52%;
	width: 19.83%;
	animation-duration: 0.7s, 6s, 3s;
}

.tapybl-hero-photo .tapybl-hero-photo__label--policy {
	--in: 0.7s;
	top: 15.13%;
	left: 58.38%;
	width: 19.7%;
}

.tapybl-hero-photo .tapybl-hero-photo__label--privacy {
	--in: 1.2s;
	top: 48.42%;
	left: 58.33%;
	width: 17.2%;
	animation-duration: 0.7s, 4.5s, 2.3s;
}

@keyframes tapybl-hp-pop {
	from { opacity: 0; scale: 0.6; }
}

@keyframes tapybl-hp-float {
	from { translate: -3px -12px; rotate: -1.5deg; }
	to { translate: 3px 12px; rotate: 1.5deg; }
}

/* A heartbeat: a quick swell and settle, then a rest. */
@keyframes tapybl-hp-pulse {
	0%, 55%, 100% { transform: scale(1); }
	20% { transform: scale(1.06); }
	35% { transform: scale(0.99); }
}

.tapybl-hero-photo__media .wp-block-video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tapybl-hero-photo__media .wp-block-video:has(.tapybl-hero-photo__unplaced) {
	display: none;
}

.tapybl-hero-photo__overlay {
	pointer-events: none;
}

@keyframes tapybl-hp-rise {
	from { opacity: 0; transform: translateY(24px); }
}

@keyframes tapybl-hp-in {
	from { opacity: 0; transform: translateY(40px); }
}

.editor-styles-wrapper .tapybl-hero-photo,
.editor-styles-wrapper .tapybl-hero-photo * {
	animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.tapybl-hero-photo,
	.tapybl-hero-photo * {
		animation: none !important;
	}
}

/* Stacked: the copy, then the phone in a row of its own. */
@media (max-width: 781px) {
	.tapybl-hero-photo {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--40);
		min-height: 0;
		padding-top: calc(var(--tapybl-hero-header, 0px) + var(--wp--preset--spacing--40));
	}

	.tapybl-hero-photo__copy {
		padding-bottom: 0;
		text-align: center;
	}

	.tapybl-hero-photo .tapybl-hero-photo__title {
		max-width: 7em;
		margin-inline: auto;
		font-size: clamp(2.5rem, 12vw, 3.5rem);
		text-wrap: balance;
	}

	.tapybl-hero-photo .tapybl-hero-photo__lead {
		margin: 1.5rem auto 0;
		font-size: 0.9375rem;
	}

	.tapybl-hero-photo .tapybl-hero-photo__ctas {
		flex-direction: column;
		align-items: center;
		margin-top: 1.75rem;
	}

	.tapybl-hero-photo .tapybl-hero-photo__ctas .wp-block-button {
		width: min(100%, 14rem);
	}

	.tapybl-hero-photo .tapybl-hero-photo__ctas .wp-block-button__link {
		width: 100%;
		padding-inline: 1rem;
	}

	.tapybl-hero-photo .tapybl-hero-photo__perks {
		flex-direction: column;
		align-items: center;
		margin-top: 1.5rem;
	}

	/*
	 * Bigger than the screen, so the hands run off both sides, with the phone
	 * (its centre sits at 50.93% of the photo) in the middle of the page.
	 */
	.tapybl-hero-photo .tapybl-hero-photo__media {
		--w: min(175vw, 46rem);
		justify-self: start;
		margin-inline: calc(50% - var(--w) * 0.5093) 0;
		margin-block-end: 0;
	}

	/* Pulled in and shrunk, so they stay on the page. */
	.tapybl-hero-photo .tapybl-hero-photo__label--lesson {
		top: 34%;
		left: 26.6%;
		width: 16%;
	}

	.tapybl-hero-photo .tapybl-hero-photo__label--policy {
		top: 4%;
		left: 56.9%;
		width: 17.7%;
	}

	.tapybl-hero-photo .tapybl-hero-photo__label--privacy {
		top: 58%;
		left: 58.6%;
		width: 16.5%;
	}
}