/*
 * The Mimetics page's own styles.
 * A parallel test as a table: each question, what a human respondent said and what the BioVid
 * mimetic said, with the mimetic's column shaded, and a closing row on what it shows.
 */

:is(.biovid-main, .editor-styles-wrapper) .bv-parallel {
	margin-top: clamp(28px, 3vw, 48px);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-parallel table {
	table-layout: fixed;
	font-size: var(--bv-text);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-parallel :is(th, td) {
	padding: 1em 1.4em 1.2em;
	border-bottom-color: var(--bv-rule);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-parallel :is(th, td):first-child {
	width: 30%;
	padding-left: 0;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-parallel thead th {
	padding-top: 1.1em;
	color: var(--bv-muted);
	font-size: var(--bv-text);
	letter-spacing: 0.01em;
	text-transform: none;
	border-bottom: 1px solid var(--bv-ink);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-parallel thead th:last-child {
	color: var(--bv-blue);
}

/* The mimetic's column, shaded down to the closing row: a blue tint, so it shows on the pale band too. */
:is(.biovid-main, .editor-styles-wrapper) .bv-parallel :is(thead th, tbody td):last-child {
	background: rgba(1, 108, 211, 0.07);
}

/* The question: its number in blue, then the question itself. */
:is(.biovid-main, .editor-styles-wrapper) .bv-parallel tbody td:first-child {
	color: var(--bv-blue);
	font-size: var(--bv-text-lg);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-parallel tbody td:first-child strong {
	display: block;
	margin-top: 0.3em;
	color: var(--bv-ink);
	font-size: var(--bv-text-sm);
	line-height: 1.45;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-parallel tbody td:last-child {
	color: var(--bv-blue);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-parallel tfoot td {
	border-top: 1px solid var(--bv-ink);
	border-bottom: 0;
	font-weight: var(--bv-regular);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-parallel tfoot td:first-child {
	color: var(--bv-blue);
	font-weight: var(--bv-bold);
}

/* Phones: each question becomes a card, with the two answers labelled under it. */
@media (max-width: 767px) {
	:is(.biovid-main, .editor-styles-wrapper) .bv-parallel :is(table, tbody, tfoot, tr, td) {
		display: block;
		width: auto;
	}

	:is(.biovid-main, .editor-styles-wrapper) .bv-parallel thead {
		display: none;
	}

	:is(.biovid-main, .editor-styles-wrapper) .bv-parallel tbody tr {
		margin-bottom: 20px;
		border-top: 1px solid var(--bv-ink);
	}

	:is(.biovid-main, .editor-styles-wrapper) .bv-parallel :is(th, td),
	:is(.biovid-main, .editor-styles-wrapper) .bv-parallel :is(th, td):first-child {
		width: auto;
		padding: 0.9em 1em;
		border-bottom: 0;
	}

	:is(.biovid-main, .editor-styles-wrapper) .bv-parallel tbody td:first-child {
		padding-left: 0;
	}

	:is(.biovid-main, .editor-styles-wrapper) .bv-parallel tbody td:not(:first-child)::before {
		display: block;
		margin-bottom: 0.4em;
		font-size: var(--bv-text-sm);
		font-style: normal;
		font-weight: var(--bv-bold);
		letter-spacing: 0.04em;
		color: var(--bv-muted);
	}

	:is(.biovid-main, .editor-styles-wrapper) .bv-parallel tbody td:nth-child(2)::before {
		content: "Human respondent";
	}

	:is(.biovid-main, .editor-styles-wrapper) .bv-parallel tbody td:last-child::before {
		content: "BioVid mimetic";
		color: var(--bv-blue);
	}

	:is(.biovid-main, .editor-styles-wrapper) .bv-parallel tfoot td {
		padding-left: 0;
		border-top: 0;
	}

	:is(.biovid-main, .editor-styles-wrapper) .bv-parallel tfoot td:first-child {
		padding-left: 0;
		padding-bottom: 0;
	}
}

/* The closing band: who to book a demo with, in a white panel where the contact form was. */
:is(.biovid-main, .editor-styles-wrapper) .bv-contact {
	box-sizing: border-box;
	padding: clamp(28px, 3vw, 44px);
	background: var(--bv-paper);
	border-radius: var(--bv-radius-panel);
	box-shadow: 0 0 0 1px rgba(16, 44, 88, 0.05), 0 22px 50px -24px rgba(16, 44, 88, 0.3);
	text-align: center;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-contact-photo {
	margin: 0 auto 22px;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-contact-photo img {
	display: block;
	width: clamp(140px, 10vw + 60px, 180px);
	height: auto;
	aspect-ratio: 1;
	margin: 0 auto;
	border-radius: 50%;
	object-fit: cover;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-contact-kicker {
	margin: 0 0 6px;
	font-size: var(--bv-label);
	font-weight: var(--bv-bold);
	letter-spacing: var(--bv-tracking-label);
	text-transform: uppercase;
	color: var(--bv-blue);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-contact-name {
	margin: 0;
	font-size: var(--bv-h3);
	font-weight: var(--bv-bold);
	line-height: 1.25;
	color: var(--bv-navy);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-contact-title {
	margin: 4px 0 24px;
	font-size: var(--bv-text-sm);
	line-height: 1.45;
	color: var(--bv-muted);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-contact .wp-block-buttons {
	justify-content: center;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-contact-linkedin {
	margin: 16px 0 0;
	line-height: 0;
}

/* Her LinkedIn profile as the LinkedIn mark; the link's words stay for screen readers. */
:is(.biovid-main, .editor-styles-wrapper) .bv-contact-linkedin a {
	display: inline-block;
	width: 32px;
	height: 32px;
	overflow: hidden;
	color: transparent;
	font-size: 0;
	background: var(--bv-blue);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z'/%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'%3E%3Cpath d='M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: background-color 0.2s ease;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-contact-linkedin a:hover {
	background: var(--bv-navy);
}

/* The opening argument, then its evidence: a hairline between them in the same band. */
:is(.biovid-main, .editor-styles-wrapper) .bv-intro .bv-decision {
	padding-top: clamp(48px, 5vw, 80px);
	border-top: 1px solid var(--bv-rule);
}

/* This statement is longer than the pattern's two short lines: a touch smaller, balanced across its lines. */
:is(.biovid-main, .editor-styles-wrapper) .bv-section h3.bv-statement {
	font-size: clamp(29px, 1.9vw + 14px, 46px);
	text-wrap: balance;
}

/* The A.I. Awards finalist badge has wide margins in its image: larger, so it reads the same size as its neighbour. */
:is(.biovid-main, .editor-styles-wrapper) .bv-awards .wp-image-72861 {
	height: clamp(112px, 4vw + 74px, 138px);
}

/*
 * The hero: the "How we build and validate them" band's gradient, mirrored, in place of the
 * stage hero's navy and spotlight: a light corner at top left, deepening to the right.
 */
:is(.biovid-main, .editor-styles-wrapper) .bv-hero {
	background-color: #016bd2;
	background-image:
		radial-gradient(50% 60% at 0% 0%, #3cb3e4 0%, rgba(60, 179, 228, 0) 100%),
		linear-gradient(225deg, #016bd2 0%, #0a74d4 100%);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-hero::before {
	display: none;
}

@media (max-width: 767px) {
	/* Sentence case is narrower than capitals, so the name can be larger on phones. */
	:is(.biovid-main, .editor-styles-wrapper) .bv-hero h1 {
		font-size: 13.5vw;
	}
}

/* The billing and tagline in full white: the pale blue and 90% white fade on the brighter blue. */
:is(.biovid-main, .editor-styles-wrapper) .bv-billing,
:is(.biovid-main, .editor-styles-wrapper) .bv-hero-tagline {
	color: var(--bv-paper);
}

/* The name in sentence case, still Heavy, with a small ™ (a <sup>) at cap height. */
:is(.biovid-main, .editor-styles-wrapper) .bv-hero h1 {
	text-transform: none;
	letter-spacing: -0.01em;
	line-height: 1;
	margin-bottom: 0.12em;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-hero h1 sup {
	font-size: 0.32em;
	vertical-align: baseline;
	position: relative;
	top: -1.5em;
	margin-left: 0.05em;
	line-height: 1;
}

/* The secondary link underlined, so it reads as a link on the blue. */
:is(.biovid-main, .editor-styles-wrapper) .bv-hero .bv-btn-text .wp-block-button__link {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/*
 * "How we build and validate them": the hero's blues instead of the navy band. The light
 * corner sits top right, where there are no words; phones, where the words run full width,
 * get the plain gradient.
 */
:is(.biovid-main, .editor-styles-wrapper) .bv-stage {
	background-color: #016bd2;
	background-image:
		radial-gradient(50% 60% at 100% 0%, #3cb3e4 0%, rgba(60, 179, 228, 0) 100%),
		linear-gradient(135deg, #016bd2 0%, #0a74d4 100%);
}

@media (max-width: 767px) {
	:is(.biovid-main, .editor-styles-wrapper) .bv-stage {
		background-image: linear-gradient(160deg, #016bd2 0%, #0a74d4 100%);
	}
}

:is(.biovid-main, .editor-styles-wrapper) .bv-stage p,
:is(.biovid-main, .editor-styles-wrapper) .bv-stage .bv-figure,
:is(.biovid-main, .editor-styles-wrapper) .bv-stage .bv-meter::after {
	color: var(--bv-paper);
}

/* The meter's 80–90% mark in pale blue on a darker track, so it stands out on the brighter band. */
:is(.biovid-main, .editor-styles-wrapper) .bv-stage .bv-meter::before {
	background:
		linear-gradient(90deg, transparent 80%, var(--bv-spot) 80%, var(--bv-spot) 90%, transparent 90%),
		rgba(0, 40, 100, 0.35);
}