/**
 * The WordPress adaptation layer.
 *
 * Loaded after theme.css. Everything in here either replaces CSS the Webflow
 * export inlined into its HTML, or styles output that only exists once the site
 * runs on WordPress (comments, pagination, alignment classes, form responses).
 *
 * normalize.css and webflow.css are untouched, and theme.css only had references
 * to deleted images removed — every theme-specific rule lives here.
 */

/* -------------------------------------------------------------------------
 * 1. Interaction start states
 *
 * The export's home page carried an 8 KB inline <style> in <head> that hid every
 * element an interaction was about to animate in, listed one data-w-id at a time
 * — sixteen selectors per breakpoint, four breakpoints. Every one of those ids
 * belonged to either .services-arrow or .services-video-card, so two class
 * selectors do the same job, and they keep working when the services list is
 * edited rather than only covering the eight cards the design shipped with.
 * ---------------------------------------------------------------------- */

@media (min-width: 768px) {
	html.w-mod-js:not(.w-mod-ix) .services-arrow {
		opacity: 0;
	}

	html.w-mod-js:not(.w-mod-ix) .services-video-card {
		width: 0;
	}
}

@media (max-width: 767px) {
	html.w-mod-js:not(.w-mod-ix) .services-arrow {
		opacity: 0;
	}

	html.w-mod-js:not(.w-mod-ix) .services-video-card {
		width: 0;
		height: 0;
	}
}

/* -------------------------------------------------------------------------
 * 2. The scrolling call to action
 *
 * From the export's .cta-code embed.
 * ---------------------------------------------------------------------- */

.cta-curve {
	transform-origin: center;
	animation: tnc-rotate 20s linear infinite;
}

.cta-wrap {
	animation: tnc-marquee 30s linear infinite;
}

.cta-block:hover > .cta-wrap {
	animation-play-state: paused;
}

@keyframes tnc-rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes tnc-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

/**
 * The "Our Journey" marquee, from the export's .journey-code embed.
 *
 * Both embeds named their animation `scroll`, so on the about page — which
 * carries both — the second definition silently overrode the first and the
 * journey band scrolled with the call to action's distance instead of its own.
 * Naming them apart restores the intended `calc(-100% - 1rem)` offset.
 */
.journey-text {
	animation: tnc-journey-marquee 30s linear infinite;
}

.journey-loop:hover > .journey-text {
	animation-play-state: paused;
}

@keyframes tnc-journey-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-100% - 1rem));
	}
}

@media (prefers-reduced-motion: reduce) {
	.cta-curve,
	.cta-wrap,
	.journey-text {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
 * 3. Slider navigation dots
 *
 * From the export's .choose-embed embed. Applied to both sliders rather than
 * only the one the embed happened to sit inside.
 * ---------------------------------------------------------------------- */

.choose-slider .w-slider-dot,
.review-slider .w-slider-dot {
	width: 32px;
	height: 8px;
	margin: 0;
	background-color: #d9d9d9;
	border-radius: 0;
}

.choose-slider .w-slider-dot.w-active,
.review-slider .w-slider-dot.w-active {
	background-color: #ffa16f;
}

/* -------------------------------------------------------------------------
 * 4. Accessibility helpers
 * ---------------------------------------------------------------------- */

.tnc-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 1000000;
	padding: 12px 20px;
	background: #000;
	color: #fff;
	font-family: Inter, sans-serif;
	font-size: 14px;
	text-decoration: none;
	border-radius: 8px;
	transition: top 0.2s ease;
}

.tnc-skip-link:focus {
	top: 16px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* The forms' honeypot. Never shown, never announced, never tabbed to. */
.tnc-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid #4deba1;
	outline-offset: 3px;
}

.brands-card[role="button"] {
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * 5. Form responses
 *
 * Replaces Webflow's .w-form-done / .w-form-fail panels, which only appeared
 * after a successful POST to formdata.webflow.com.
 * ---------------------------------------------------------------------- */

.tnc-form-message {
	margin-top: 16px;
	padding: 14px 18px;
	font-family: Inter, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	border-radius: 10px;
}

.tnc-form-message:focus {
	outline: none;
}

.tnc-form-message.is-success {
	background-color: #e8fbf2;
	color: #10603c;
	border: 1px solid #4deba1;
}

.tnc-form-message.is-error {
	background-color: #fdeceb;
	color: #7a1f1a;
	border: 1px solid #f0a3a0;
}

/* -------------------------------------------------------------------------
 * 6. Post content
 *
 * The design styles article bodies through .details-* classes. These rules give
 * the same treatment to whatever the block editor emits, so writers do not have
 * to know the design's class names.
 *
 * .details-content is a flex column with a 40px gap in the design; the editor's
 * blocks carry their own rhythm below, so the gap is dropped here or every block
 * would get both.
 * ---------------------------------------------------------------------- */

.details-content.tnc-entry-content {
	display: block;
	min-width: 0;
}

.tnc-entry-content > * {
	margin-top: 0;
	margin-bottom: 24px;
}

.tnc-entry-content > *:last-child {
	margin-bottom: 0;
}

/* Empty paragraphs the editor leaves behind add a blank line each. */
.tnc-entry-content > p:empty {
	display: none;
}

.tnc-entry-content h2,
.tnc-entry-content h3,
.tnc-entry-content h4,
.tnc-entry-content h5,
.tnc-entry-content h6 {
	margin-top: 56px;
	margin-bottom: 16px;
	font-family: var(--font-family--heading);
	color: var(--color--black);
	text-transform: none;
	scroll-margin-top: 32px;
}

.tnc-entry-content h2 {
	font-size: var(--_typography---heading-04--size);
	line-height: var(--_typography---heading-04--height);
	font-weight: var(--font-weight--semi-bold, 600);
}

.tnc-entry-content h3 {
	margin-top: 40px;
	font-size: var(--_typography---heading-05--size);
	line-height: var(--_typography---heading-05--height);
	font-weight: var(--font-weight--semi-bold, 600);
}

.tnc-entry-content h4,
.tnc-entry-content h5,
.tnc-entry-content h6 {
	margin-top: 32px;
	font-size: var(--_typography---heading-06--size);
	line-height: var(--_typography---heading-06--height);
	font-weight: var(--font-weight--medium);
}

/* No double gap when a heading is the first thing in the article. */
.tnc-entry-content > :is(h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

.tnc-entry-content p,
.tnc-entry-content li {
	font-family: var(--font-family--paragraph);
	font-size: var(--_typography---text-large--size);
	line-height: var(--line-height--xxxl);
	color: var(--color--text);
}

.tnc-entry-content strong,
.tnc-entry-content b {
	color: var(--color--black);
	font-weight: 600;
}

.tnc-entry-content ul,
.tnc-entry-content ol {
	padding-left: 24px;
}

.tnc-entry-content li {
	margin-bottom: 8px;
	padding-left: 4px;
}

.tnc-entry-content li::marker {
	color: var(--color--black);
}

.tnc-entry-content a {
	color: var(--color--black);
	text-decoration: underline;
	text-decoration-color: var(--color--primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	word-break: break-word;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.tnc-entry-content a:hover {
	color: var(--color--black);
	text-decoration-color: var(--color--black);
}

/* The design's .details-quote: a black rule on a white panel. */
.tnc-entry-content blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: var(--_size-variables---global-sizes--size-xxl) var(--_size-variables---global-sizes--size-3xl) var(--_size-variables---global-sizes--size-xxl) var(--_size-variables---global-sizes--size-2xl);
	border-left: var(--_size-variables---global-sizes--size-xxs) solid var(--color--black);
	background-color: var(--color--white);
	font-style: normal;
}

.tnc-entry-content blockquote p {
	font-family: var(--_typography---heading-06--font);
	font-size: var(--_typography---heading-06--size);
	line-height: var(--_typography---heading-06--height);
	color: var(--color--black);
}

.tnc-entry-content blockquote cite {
	display: block;
	margin-top: 12px;
	font-size: var(--_typography---text-small--size);
	font-style: normal;
	color: var(--color--text);
}

.tnc-entry-content figure {
	margin-left: 0;
	margin-right: 0;
}

.tnc-entry-content img,
.tnc-entry-content iframe,
.tnc-entry-content video {
	max-width: 100%;
	height: auto;
	border-radius: var(--_size-variables---border-radius--radius-xs);
}

.tnc-entry-content .wp-block-image,
.tnc-entry-content .wp-block-embed,
.tnc-entry-content .wp-block-video {
	margin-top: 32px;
	margin-bottom: 32px;
}

.tnc-entry-content .wp-block-image img {
	display: block;
}

.tnc-entry-content .aligncenter img {
	margin-left: auto;
	margin-right: auto;
}

.tnc-entry-content hr,
.tnc-entry-content .wp-block-separator {
	margin: 48px 0;
	border: 0;
	border-top: 1px solid var(--color--stroke);
}

.tnc-entry-content pre {
	padding: 20px;
	overflow-x: auto;
	background: var(--color--white);
	border: 1px solid var(--color--stroke);
	border-radius: var(--_size-variables---border-radius--radius-xs);
	font-size: 14px;
}

.tnc-entry-content code {
	padding: 2px 6px;
	background: var(--color--white);
	border-radius: 4px;
	font-size: 0.9em;
}

.tnc-entry-content pre code {
	padding: 0;
	background: none;
}

.tnc-entry-content table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	background: var(--color--white);
}

.tnc-entry-content th,
.tnc-entry-content td {
	padding: 12px 16px;
	border: 1px solid var(--color--stroke);
	text-align: left;
	font-size: 16px;
}

.tnc-entry-content th {
	color: var(--color--black);
	font-weight: 600;
}

/* Block buttons in the article follow the design's black pill. */
.tnc-entry-content .wp-block-button__link {
	padding: 12px 28px;
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	background-color: var(--color--black);
	color: var(--color--white);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.tnc-entry-content .wp-block-button__link:hover {
	background-color: #333;
	color: var(--color--white);
}

/*
 * The in-article table of contents from the Table of Contents Plus plugin,
 * restyled to the design: white panel, black heading, numbered rows with the
 * accent colour, no light-blue box.
 */
.tnc-entry-content #toc_container {
	display: block;
	width: 100% !important;
	margin: 40px 0;
	padding: var(--_size-variables---global-sizes--size-xxl);
	background: var(--color--white);
	border: 1px solid var(--color--stroke);
	border-left: var(--_size-variables---global-sizes--size-xxs) solid var(--color--black);
	border-radius: 0;
	box-sizing: border-box;
	font-family: var(--font-family--paragraph);
}

.tnc-entry-content #toc_container .toc_title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 20px;
	font-family: var(--font-family--heading);
	font-size: var(--_typography---heading-06--size);
	line-height: var(--_typography---heading-06--height);
	font-weight: 600;
	text-align: left;
	color: var(--color--black);
}

.tnc-entry-content #toc_container .toc_toggle {
	font-family: var(--font-family--paragraph);
	font-size: 14px;
	font-weight: 400;
	color: var(--color--text);
}

.tnc-entry-content #toc_container .toc_toggle a {
	color: inherit;
	text-decoration: none;
}

.tnc-entry-content #toc_container ul,
.tnc-entry-content #toc_container li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}

.tnc-entry-content #toc_container ul ul {
	margin: 4px 0 4px 32px;
}

.tnc-entry-content #toc_container li {
	font-size: 16px;
	line-height: 1.5;
}

.tnc-entry-content #toc_container li a {
	display: flex;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--color--stroke);
	color: var(--color--text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.tnc-entry-content #toc_container > ul > li:last-child > a {
	border-bottom: 0;
}

.tnc-entry-content #toc_container li a:hover {
	color: var(--color--black);
}

.tnc-entry-content #toc_container .toc_number {
	flex: none;
	min-width: 20px;
	color: var(--color--primary);
	font-weight: 600;
}

/* The design's FAQ block at the end of an article. */
.tnc-entry-content .details-descrp {
	margin-top: 64px;
}

.tnc-entry-content .details-name {
	margin-bottom: 0;
}

/* Core alignment and caption classes. */
.alignleft {
	float: left;
	margin: 0 24px 16px 0;
}

.alignright {
	float: right;
	margin: 0 0 16px 24px;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignwide,
.alignfull {
	max-width: 100%;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.wp-element-caption,
figcaption {
	margin-top: 12px;
	font-family: var(--font-family--paragraph);
	font-size: 14px;
	color: var(--color--text);
	text-align: center;
}

.sticky,
.gallery-caption,
.bypostauthor {
	/* Required by the theme review guidelines; the design has no visual state for these. */
	display: block;
}

/*
 * The core image lightbox ("Expand on click").
 *
 * WordPress sizes and centres .lightbox-image-container, then expects the image
 * to fill it through rules scoped to .wp-block-image. The overlay's copy of a
 * resized image drops that class and keeps its inline width, so the picture sat
 * in the container's top-left corner instead of the middle of the screen.
 */
.wp-lightbox-overlay .lightbox-image-container figure {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
}

.wp-lightbox-overlay .lightbox-image-container img {
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	max-height: none !important;
	object-fit: contain;
	border-radius: 0;
	vertical-align: top;
}

.wp-lightbox-overlay .scrim {
	background-color: var(--color--background-01) !important;
}

/* -------------------------------------------------------------------------
 * 7. Article sidebar: table of contents, sharing, AI summary
 * ---------------------------------------------------------------------- */

.details-sidebar {
	padding-right: var(--_size-variables---global-sizes--size-xxl);
	border-right: 0;
	/* Sticky only works while the sidebar fits the screen; see .details-wrapp. */
	max-height: calc(100vh - 2 * var(--_size-variables---global-sizes--size-3xl));
	grid-row-gap: 48px;
}

.details-sidebar .details-wrapp {
	width: 100%;
	min-height: 0;
	flex: 0 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--color--icon-bg) transparent;
	/* Room for the focus ring and the scrollbar. */
	padding: 4px 12px 4px 4px;
	margin: -4px -12px -4px -4px;
}

.details-sidebar .details-title {
	position: sticky;
	top: 0;
	z-index: 1;
	width: 100%;
	padding-bottom: 4px;
	background-color: var(--color--background-01);
}

.details-sidebar .details-item {
	align-items: flex-start;
	text-decoration-color: transparent;
	transition: color 0.3s, text-decoration-color 0.3s;
}

.details-sidebar .details-item:hover {
	text-decoration-color: currentColor;
}

.details-sidebar .details-item .details-dot {
	margin-top: 0.65em;
	color: var(--color--icon-bg);
	transition: color 0.3s, transform 0.3s;
}

.details-sidebar .details-item.is-h3 {
	padding-left: var(--_size-variables---global-sizes--size-l);
	font-size: var(--_typography---text-small--size);
}

/* Section spy: the entry for the section being read. */
.details-sidebar .details-item.is-active {
	color: var(--color--black);
	font-weight: 500;
	text-decoration-color: currentColor;
}

.details-sidebar .details-item.is-active .details-dot {
	color: var(--color--primary);
	transform: scale(1.5);
}

.details-sidebar .details-share {
	flex: none;
}

.tnc-ai-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--_size-variables---global-sizes--size-xs);
}

.tnc-ai-link {
	--tnc-ai-bg: var(--color--black);
	--tnc-ai-fg: var(--color--white);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: var(--_size-variables---global-sizes--size-xxl);
	padding: 0 12px;
	background-color: var(--tnc-ai-bg);
	border: 1px solid var(--tnc-ai-border, var(--tnc-ai-bg));
	color: var(--tnc-ai-fg);
	font-family: var(--font-family--paragraph);
	font-size: var(--_typography---text-small--size);
	font-weight: 500;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.tnc-ai-link:hover {
	color: var(--tnc-ai-fg);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	filter: brightness(1.05);
}

/* Each assistant in its own colours. */
.tnc-ai-link.is-chatgpt {
	--tnc-ai-bg: #10a37f;
}

.tnc-ai-link.is-claude {
	--tnc-ai-bg: #d97757;
}

.tnc-ai-link.is-grok {
	--tnc-ai-bg: #000;
}

.tnc-ai-link.is-google {
	--tnc-ai-bg: #fff;
	--tnc-ai-fg: #1f1f1f;
	--tnc-ai-border: #dadce0;
}

.tnc-ai-icon {
	width: 16px;
	height: 16px;
	flex: none;
}

/*
 * Tablet and phone: the TOC comes first, above the article, as a compact
 * panel that scrolls inside itself; sharing and the AI links follow the
 * article. The design stacked the whole sidebar under the post
 * (column-reverse), so readers met the contents only after the last line.
 * display: contents lets the sidebar's children be ordered independently.
 */
@media screen and (max-width: 991px) {
	.details-desp-block {
		flex-direction: column;
		align-items: stretch;
	}

	.details-sidebar {
		display: contents;
	}

	.details-sidebar .details-wrapp {
		order: -1;
		width: 100%;
		max-height: min(360px, 55vh);
		margin: 0;
		padding: 0 20px 20px;
		overflow-y: auto;
		background-color: var(--color--white);
		border: 1px solid var(--color--stroke);
		border-left: var(--_size-variables---global-sizes--size-xxs) solid var(--color--black);
		box-sizing: border-box;
	}

	.details-sidebar .details-title {
		position: sticky;
		top: 0;
		padding: 20px 0 12px;
		margin-bottom: 4px;
		background-color: var(--color--white);
		font-size: var(--_typography---heading-06--size);
	}

	.details-content.tnc-entry-content {
		order: 0;
	}

	.details-sidebar .details-share {
		order: 1;
	}

	.details-sidebar .tnc-ai-summary {
		order: 2;
	}
}

@media screen and (max-width: 767px) {
	.details-sidebar .details-wrapp {
		padding: 0 16px 16px;
	}

	.details-sidebar .details-title {
		padding-top: 16px;
	}
}

/* -------------------------------------------------------------------------
 * 8. Article FAQ
 *
 * A plain accordion (theme.js). The toggle is a <button>, so the browser's
 * button styling is reset to the design's .faq-toggle.
 * ---------------------------------------------------------------------- */

.tnc-faq .faq-toggle {
	width: 100%;
	margin: 0;
	background: none;
	border: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.tnc-faq .faq-title {
	display: block;
	color: var(--color--black);
}

.tnc-faq .faq-wrapp {
	height: auto;
	transition: height 0.35s ease;
}

/* theme.css gives .faq-wrapp display:flex, which would beat [hidden]. */
.tnc-faq .faq-wrapp[hidden] {
	display: none;
}

.tnc-faq .faq-except {
	padding-left: calc(var(--_size-variables---global-sizes--size-2xl) + var(--_size-variables---global-sizes--size-m));
	color: var(--color--text);
}

.tnc-faq .faq-except > :last-child {
	margin-bottom: 0;
}

.tnc-faq .faq-plus {
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.tnc-faq.is-open .faq-plus {
	transform: rotate(90deg);
	opacity: 0;
}

/* Keyboard focus keeps the theme's ring; a mouse click does not leave one. */
.tnc-faq .faq-toggle:focus:not(:focus-visible) {
	outline: none;
}

.tnc-entry-content .tnc-faq .faq-toggle:focus-visible {
	outline-offset: 6px;
}

/* -------------------------------------------------------------------------
 * 9. Blog archive: cards and pagination
 * ---------------------------------------------------------------------- */

/* The card zoom, formerly a Webflow hover interaction (1.15 over 500ms). */
.blog-card .blog-image {
	transition: transform 0.5s ease-in-out;
}

.blog-card:hover .blog-image,
.blog-card:focus-visible .blog-image {
	transform: scale(1.15);
}

[data-tnc-posts] {
	transition: opacity 0.25s ease;
}

[data-tnc-posts].is-loading {
	opacity: 0.4;
	pointer-events: none;
}

[data-tnc-posts]:focus {
	outline: none;
}

.blog-card-pagins {
	flex-wrap: wrap;
	row-gap: var(--_size-variables---global-sizes--size-xs);
}

.blog-card-pagins .pagin {
	min-width: 44px;
	min-height: 40px;
	color: var(--color--black);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.blog-card-pagins a.pagin:hover {
	background-color: var(--color--black);
	color: var(--color--white);
}

/* The page you are on. */
.blog-card-pagins .pagin.is-current {
	background-color: var(--color--black);
	color: var(--color--white);
	cursor: default;
}

.blog-card-pagins .pagin.is-dots {
	min-width: 0;
	padding-left: 4px;
	padding-right: 4px;
	background-color: transparent;
	cursor: default;
}

/* Previous / Next on the ends that have nowhere to go are not rendered by WordPress. */
@media screen and (max-width: 767px) {
	.blog-card-pagins .pagin {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Arrows only: the words do not fit beside the numbers on a phone. */
	.blog-card-pagins .pagin.is-prev .pagin-text,
	.blog-card-pagins .pagin.is-next .pagin-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* Core's pagination markup, used by comments and any template without the design's. */
.tnc-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
	margin-top: 48px;
	font-family: var(--font-family--paragraph);
}

.tnc-pagination .page-numbers,
.tnc-comments .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	background-color: var(--color--white);
	color: var(--color--black);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tnc-pagination .page-numbers:hover,
.tnc-pagination .page-numbers.current,
.tnc-comments .nav-links .page-numbers:hover,
.tnc-comments .nav-links .page-numbers.current {
	background-color: var(--color--black);
	color: var(--color--white);
}

.tnc-pagination .page-numbers.dots {
	background-color: transparent;
}

/* -------------------------------------------------------------------------
 * 10. Comments
 *
 * The design has no comment styling — the export was a static site — so the
 * list and form borrow the contact page's language: white panels, hairline
 * fields, the black pill button.
 * ---------------------------------------------------------------------- */

.tnc-comments-section {
	padding-top: var(--_size-variables---global-sizes--size-4xl, 48px);
	padding-bottom: var(--global-variables--section-space);
}

.tnc-comments {
	max-width: 860px;
	margin: 0 auto;
	font-family: var(--font-family--paragraph);
	color: var(--color--text);
}

.tnc-comments .details-title {
	margin: 0 0 24px;
	font-family: var(--font-family--heading);
	font-size: var(--_typography---heading-05--size);
	line-height: var(--_typography---heading-05--height);
	font-weight: 600;
	text-transform: none;
	color: var(--color--black);
}

.tnc-comments .comment-list,
.tnc-comments ol {
	margin: 0 0 56px;
	padding: 0;
	list-style: none;
}

.tnc-comments .children {
	margin: 16px 0 0;
	padding-left: 32px;
	border-left: 1px solid var(--color--stroke);
}

.tnc-comments li.comment,
.tnc-comments li.pingback,
.tnc-comments li.trackback {
	margin-bottom: 16px;
}

.tnc-comments .comment-body {
	position: relative;
	padding: 24px 28px;
	background-color: var(--color--white);
	border: 1px solid var(--color--stroke);
}

.tnc-comments .comment-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: center;
	margin-bottom: 12px;
	font-size: var(--_typography---text-small--size);
	color: var(--color--text);
}

.tnc-comments .comment-author {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--color--black);
	font-weight: 600;
	font-size: 16px;
}

.tnc-comments .comment-author .says {
	display: none;
}

.tnc-comments .comment-author a,
.tnc-comments .comment-metadata a {
	color: inherit;
	text-decoration: none;
}

.tnc-comments .comment-metadata a:hover,
.tnc-comments .comment-author a:hover {
	color: var(--color--black);
}

.tnc-comments .avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.tnc-comments .comment-content {
	font-size: 16px;
	line-height: var(--line-height--xxl);
}

.tnc-comments .comment-content p {
	margin: 0 0 12px;
}

.tnc-comments .reply {
	margin-top: 8px;
}

.tnc-comments .comment-reply-link {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 14px;
	border: 1px solid var(--color--black);
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	color: var(--color--black);
	font-size: var(--_typography---text-small--size);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tnc-comments .comment-reply-link:hover {
	background-color: var(--color--black);
	color: var(--color--white);
}

.tnc-comments .comment-awaiting-moderation {
	display: block;
	margin-top: 8px;
	font-style: italic;
}

.tnc-comments .comment-respond {
	padding: 40px;
	background-color: var(--color--white);
	border: 1px solid var(--color--stroke);
}

.tnc-comments .comment-reply-title small {
	margin-left: 12px;
	font-family: var(--font-family--paragraph);
	font-size: 14px;
	font-weight: 400;
}

.tnc-comments .comment-reply-title small a {
	color: var(--color--text);
	text-decoration: underline;
}

.tnc-comments .comment-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.tnc-comments .comment-form > p {
	margin: 0;
}

.tnc-comments .comment-notes,
.tnc-comments .logged-in-as,
.tnc-comments .comment-form-comment,
.tnc-comments .comment-form-url,
.tnc-comments .comment-form-cookies-consent,
.tnc-comments .form-submit,
.tnc-comments .akismet_comment_form_privacy_notice {
	grid-column: 1 / -1;
}

.tnc-comments .comment-notes,
.tnc-comments .logged-in-as,
.tnc-comments .akismet_comment_form_privacy_notice {
	font-size: var(--_typography---text-small--size);
	line-height: var(--line-height--xxl);
}

/* Akismet prints its notice after the form, flush against the button. */
.tnc-comments .akismet_comment_form_privacy_notice {
	margin-top: 20px;
	margin-bottom: 0;
}

.tnc-comments .comment-form label {
	display: block;
	margin-bottom: 8px;
	color: var(--color--black);
	font-size: var(--_typography---text-small--size);
	font-weight: 500;
}

.tnc-comments .required {
	color: #fb2c36;
}

.tnc-comments input[type="text"],
.tnc-comments input[type="email"],
.tnc-comments input[type="url"],
.tnc-comments textarea {
	display: block;
	width: 100%;
	padding: 14px 16px;
	background-color: var(--color--background-01);
	border: 1px solid var(--color--stroke);
	border-radius: 0;
	color: var(--color--black);
	font: inherit;
	font-size: 16px;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.tnc-comments textarea {
	min-height: 160px;
	resize: vertical;
}

.tnc-comments input[type="text"]:focus,
.tnc-comments input[type="email"]:focus,
.tnc-comments input[type="url"]:focus,
.tnc-comments textarea:focus {
	background-color: var(--color--white);
	border-color: var(--color--black);
	outline: none;
}

.tnc-comments .comment-form-cookies-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.tnc-comments .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
	color: var(--color--text);
}

.tnc-comments .comment-form-cookies-consent input {
	margin-top: 4px;
	accent-color: var(--color--black);
}

.tnc-comments .submit {
	padding: 14px 32px;
	background: var(--color--black);
	color: var(--color--white);
	border: 0;
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.tnc-comments .submit:hover {
	background-color: #333;
}

.tnc-comments a {
	color: var(--color--black);
}

@media screen and (max-width: 767px) {
	.tnc-comments .comment-form {
		grid-template-columns: 1fr;
	}

	.tnc-comments .comment-respond {
		padding: 24px 20px;
	}

	.tnc-comments .comment-body {
		padding: 20px;
	}

	.tnc-comments .children {
		padding-left: 16px;
	}
}

/* -------------------------------------------------------------------------
 * 11. Admin bar
 *
 * .page-wrapper sets z-index: 999999, which is above the admin bar's 99999 and
 * would paint over it. It is a static, non-positioned stacking context in the
 * design, so lowering it changes nothing on the front end.
 * ---------------------------------------------------------------------- */

body.admin-bar .page-wrapper {
	z-index: 1;
}

/* -------------------------------------------------------------------------
 * 12. The talent-pool photo marquee
 *
 * From the export's .pool-code embed. This was the third block to define
 * @keyframes scroll under that name — see the note on the journey marquee above.
 * ---------------------------------------------------------------------- */

.pool-card {
	animation: tnc-pool-marquee 60s linear infinite;
}

.pool-card-block:hover > .pool-card {
	animation-play-state: paused;
}

@keyframes tnc-pool-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-100% - 1rem));
	}
}

@media (prefers-reduced-motion: reduce) {
	.pool-card {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
 * 13. Webflow CDN placeholders
 *
 * theme.css is kept as close to the export as possible, and three of its rules carry
 * `background-image: url(https://d3e54v103j8qbb.cloudfront.net/...)` — Webflow's
 * stock placeholder for an unfilled background slot:
 *
 *   .theme-card            every colour variant overrides it with a local image,
 *                          so it only fires if a card has no colour set
 *   .touch-field           every modifier (.user, .envelop, .location,
 *                          .touch-area) overrides it with a local icon, so it
 *                          only fires on an unmodified field
 *   .w-embed-youtubevideo  fires on any YouTube embed in article content
 *
 * Overriding them here removes the last third-party asset requests from the
 * front end without editing the exported stylesheet.
 * ---------------------------------------------------------------------- */

.theme-card,
.touch-field,
.w-embed-youtubevideo {
	background-image: none;
}

/* Re-apply the design's own values, which the rule above would otherwise flatten. */
.theme-card.orange-theme {
	background-image: url("../images/Orange-BG.webp");
}

.theme-card.green-theme {
	background-image: url("../images/Green-BG.webp");
}

.theme-card.pink-theme {
	background-image: url("../images/Pink-BG.webp");
}

.theme-card.yellow-theme {
	background-image: url("../images/Yellow-BG.webp");
}

.touch-field.user {
	background-image: url("../images/User.svg");
}

.touch-field.envelop {
	background-image: url("../images/Envelop.svg");
}

.touch-field.location {
	background-image: url("../images/Location.svg");
}

.touch-field.touch-area {
	background-image: url("../images/Pen.svg");
}

/* -------------------------------------------------------------------------
 * 14. Password-protected content
 *
 * WordPress's equivalent of the export's 401.html: a centred card with a lock,
 * a short explanation and the design's pill field (see .tnc-pill-form).
 * ---------------------------------------------------------------------- */

.tnc-entry-content > .tnc-protected,
.tnc-protected {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 560px;
	margin: 0 auto;
	padding: 48px 40px;
	background-color: var(--color--white);
	border: 1px solid var(--color--stroke);
	text-align: center;
}

.tnc-protected-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 24px;
	background-color: var(--color--background-01);
	border-radius: 50%;
	color: var(--color--black);
}

.tnc-protected-icon svg {
	width: 28px;
	height: 28px;
}

.tnc-entry-content .tnc-protected-title,
.tnc-protected-title {
	margin: 0 0 8px;
	font-family: var(--font-family--heading);
	font-size: var(--_typography---heading-05--size);
	line-height: var(--_typography---heading-05--height);
	font-weight: 600;
	text-transform: none;
	color: var(--color--black);
}

.tnc-entry-content .tnc-protected-text,
.tnc-protected-text {
	margin: 0 0 28px;
	font-size: 16px;
	color: var(--color--text);
}

.tnc-protected .tnc-form-message {
	width: 100%;
	margin: 0 0 20px;
}

.tnc-protected .tnc-pill-form {
	width: 100%;
}

@media screen and (max-width: 479px) {
	.tnc-protected {
		padding: 32px 20px;
	}
}

/* -------------------------------------------------------------------------
 * 14b. The pill field on light backgrounds
 *
 * The search form (404, search results) and the password form reuse the
 * footer newsletter field, which is styled for the black footer: white text,
 * white placeholder. On the light pages the typed text was invisible.
 * ---------------------------------------------------------------------- */

.tnc-pill-form {
	gap: var(--_size-variables---global-sizes--size-xs);
	width: 100%;
	max-width: 560px;
	margin: 0;
	background-color: var(--color--white);
	border-color: rgba(0, 0, 0, 0.15);
	transition: border-color 0.2s ease;
}

.tnc-pill-form:focus-within {
	border-color: var(--color--black);
}

.tnc-pill-form .footer-field {
	min-width: 0;
	margin: 0;
	border: 0;
	color: var(--color--black);
	box-shadow: none;
}

.tnc-pill-form .footer-field::placeholder {
	color: var(--color--text);
	opacity: 1;
}

.tnc-pill-form .footer-field:focus {
	outline: none;
}

.tnc-pill-form .footer-field::-webkit-search-cancel-button {
	cursor: pointer;
}

.tnc-pill-form .footer-btn {
	margin: 0;
	border: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tnc-pill-form .footer-btn:hover {
	background-color: var(--color--black);
	color: var(--color--white);
}

@media screen and (max-width: 479px) {
	.tnc-pill-form .footer-btn {
		width: auto;
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* -------------------------------------------------------------------------
 * 15. Global type
 *
 * A bare <h1> (post content, plugin output) uses the heading-03 size. Page
 * titles (.hero-title) come in three sizes, set per template:
 *
 *   default     heading-01  home, about, career, contact, blog and archives
 *   .is-medium  heading-02  brand guidelines, privacy policy and other pages
 *   .is-small   heading-03  single posts, 404, password-protected pages
 *
 * Article titles are also Capitalized rather than UPPERCASE (.is-capitalized),
 * which reads better for long sentence-style titles.
 * ---------------------------------------------------------------------- */

h1 {
	font-size: var(--_typography---heading-03--size);
}

h1.hero-title {
	font-size: var(--_typography---heading-01--size);
	line-height: var(--_typography---heading-01--height);
}

h1.hero-title.is-medium {
	font-size: var(--_typography---heading-02--size);
	line-height: var(--_typography---heading-02--height);
}

h1.hero-title.is-small {
	font-size: var(--_typography---heading-03--size);
	line-height: var(--_typography---heading-03--height);
}

h1.hero-title.is-capitalized {
	text-transform: capitalize;
}

/* -------------------------------------------------------------------------
 * 16. Home: "Brands we power" popups
 *
 * Opened by theme.js (initBrandPopups). The inline transform/opacity in the
 * markup are the closed state; .is-open overrides them, hence !important.
 * ---------------------------------------------------------------------- */

.brands-popup {
	visibility: hidden;
	transition: transform 0.5s ease-in-out, visibility 0s linear 0.5s;
}

.brands-popup.is-open {
	visibility: visible;
	transform: translate3d(0, 0, 0) !important;
	transition: transform 0.5s ease-in-out, visibility 0s linear 0s;
}

.brands-overlay {
	transition: opacity 0.5s ease-in-out;
}

.brands-overlay.is-open {
	opacity: 0.75 !important;
}

/* Cards without a detail panel are not clickable. */
.brands-card:not([data-tnc-brand]) {
	cursor: default;
}

/* -------------------------------------------------------------------------
 * 17. Home: "Who we are" on small phones
 *
 * The design fixes the block at 50vh below 480px. On a short screen (an
 * iPhone SE is 667px tall) the statement no longer fits, and because the block
 * is bottom-aligned inside an overflow:hidden section the top of it — the
 * "Who We Are" pill — was cut off.
 * ---------------------------------------------------------------------- */

@media screen and (max-width: 479px) {
	.who-block {
		height: auto;
		min-height: 50vh;
	}
}

/* -------------------------------------------------------------------------
 * 18. About: hero portrait
 *
 * The design's frame is the portrait 1226×1512 photo. Fixing the ratio keeps
 * that shape whatever an editor uploads, instead of letting a landscape image
 * flatten the hero.
 * ---------------------------------------------------------------------- */

.about-thumb {
	height: auto;
	aspect-ratio: 1226 / 1512;
}

/* -------------------------------------------------------------------------
 * 19. Mobile card carousels
 *
 * tnc_carousel() in inc/helpers.php: a native scroll-snap row, so it follows
 * the finger and shows the next card peeking in. The track bleeds to both
 * edges of the screen; theme.js adds the dots.
 * ---------------------------------------------------------------------- */

/* The wrappers sit in flex columns aligned to flex-start, which would let the
 * track grow to its full content width instead of scrolling. */
.values-slider-block,
.career-slider-block,
.cultures-slider-block,
.review-slider-block {
	align-self: stretch;
	width: 100%;
	min-width: 0;
}

.tnc-carousel {
	--tnc-slide: 350px;
	--tnc-gap: var(--_size-variables---global-sizes--size-l);
	--tnc-bleed: 20px;
	--tnc-dot: rgba(0, 0, 0, 0.18);
	position: relative;
	width: 100%;
}

.tnc-carousel-track {
	display: flex;
	gap: var(--tnc-gap);
	margin-left: calc(-1 * var(--tnc-bleed));
	margin-right: calc(-1 * var(--tnc-bleed));
	padding-left: var(--tnc-bleed);
	padding-right: var(--tnc-bleed);
	scroll-padding-left: var(--tnc-bleed);
	scroll-padding-right: var(--tnc-bleed);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.tnc-carousel-track::-webkit-scrollbar {
	display: none;
}

.tnc-carousel-track:focus-visible {
	outline-offset: 4px;
}

.tnc-carousel-slide {
	display: flex;
	flex: 0 0 var(--tnc-slide);
	max-width: 85%;
	scroll-snap-align: start;
}

.tnc-carousel-slide > * {
	width: 100%;
	max-width: none;
}

.tnc-carousel-dots {
	display: flex;
	gap: 8px;
	margin-top: var(--_size-variables---global-sizes--size-xl);
}

.tnc-carousel-dot {
	width: 32px;
	height: 8px;
	padding: 0;
	background-color: var(--tnc-dot);
	border: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.tnc-carousel-dot.is-active {
	background-color: var(--color--primary);
}

/* Per section: slide width as the design's slider masks had it, and dots that
 * show up on the dark sections. */
.tnc-carousel.is-values,
.tnc-carousel.is-cultures {
	--tnc-dot: rgba(255, 255, 255, 0.3);
}

.tnc-carousel.is-review {
	--tnc-slide: 380px;
}

.tnc-carousel.is-review .review-card {
	max-width: none;
	height: 100%;
}

.tnc-carousel.is-cultures {
	--tnc-slide: 250px;
	--tnc-gap: 10px;
}

/* The cultures heading is centred on small screens; the dots follow it. */
.tnc-carousel.is-cultures .tnc-carousel-dots {
	justify-content: center;
}

@media screen and (max-width: 479px) {
	.tnc-carousel.is-values,
	.tnc-carousel.is-career,
	.tnc-carousel.is-review {
		--tnc-slide: 300px;
		--tnc-gap: var(--_size-variables---global-sizes--size-s);
	}

	.tnc-carousel.is-cultures {
		--tnc-slide: 200px;
	}
}

/* -------------------------------------------------------------------------
 * 20. Career: no open positions
 * ---------------------------------------------------------------------- */

.tnc-place-empty {
	gap: var(--_size-variables---global-sizes--size-xl);
}

.tnc-place-empty .place-except {
	max-width: 560px;
}

@media screen and (max-width: 767px) {
	.tnc-place-empty {
		flex-direction: column;
		align-items: flex-start;
	}

	/* The design indents the button past the role number, which this row has none of. */
	.tnc-place-empty .place-button {
		margin-left: 0;
	}
}

/* -------------------------------------------------------------------------
 * 21. Contact: office cards
 *
 * Links (WhatsApp, email) and copy buttons (addresses, hours). No dragging.
 * ---------------------------------------------------------------------- */

.branch-card.is-action {
	color: var(--color--black);
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.branch-card.is-action:hover {
	color: var(--color--black);
	transform: scale(1.04);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.branch-card.is-copied {
	transform: scale(0.97);
}

/* -------------------------------------------------------------------------
 * 22. Status toast ("Copied to clipboard")
 * ---------------------------------------------------------------------- */

.tnc-toast {
	position: fixed;
	left: 50%;
	bottom: 128px;
	z-index: 1000001;
	padding: 12px 22px;
	background-color: var(--color--black);
	color: var(--color--white);
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	font-family: var(--font-family--paragraph);
	font-size: 14px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 12px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.tnc-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
	.brands-popup,
	.brands-overlay,
	.blog-card .blog-image,
	.branch-card.is-action,
	.tnc-toast {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 23. Legal and plain pages (page.php, e.g. the privacy policy)
 *
 * Long documents need a clearer outline than an article: each section heading
 * opens with a rule and generous space above, bold "label" paragraphs read as
 * sub-headings, and lists sit close to the sentence that introduces them.
 * ---------------------------------------------------------------------- */

.privacy-desp.tnc-entry-content p,
.privacy-desp.tnc-entry-content li {
	font-size: 17px;
	line-height: var(--line-height--xxxl);
}

.privacy-desp.tnc-entry-content > h2,
.privacy-desp.tnc-entry-content > h3 {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid var(--color--stroke);
	color: var(--color--black);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.privacy-desp.tnc-entry-content > h2 {
	font-size: var(--_typography---heading-03--size);
	line-height: var(--_typography---heading-03--height);
}

.privacy-desp.tnc-entry-content > h3 {
	font-size: var(--_typography---heading-04--size);
	line-height: var(--_typography---heading-04--height);
}

.privacy-desp.tnc-entry-content > h4,
.privacy-desp.tnc-entry-content > h5,
.privacy-desp.tnc-entry-content > h6 {
	margin-top: 36px;
	margin-bottom: 12px;
	color: var(--color--black);
	font-size: var(--_typography---heading-06--size);
	font-weight: 600;
}

/* The first section follows the intro, so it needs no rule. */
.privacy-desp.tnc-entry-content > :is(h2, h3):first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* A paragraph that is only a bold label ("Information you give us") is a
 * sub-heading in practice; tnc_mark_label_paragraphs() tags it. */
.privacy-desp.tnc-entry-content > p.tnc-subhead {
	margin-top: 32px;
	margin-bottom: 12px;
	color: var(--color--black);
}

.privacy-desp.tnc-entry-content > p.tnc-subhead strong,
.privacy-desp.tnc-entry-content > p.tnc-subhead b {
	font-family: var(--font-family--heading);
	font-size: var(--_typography---heading-06--size);
	line-height: var(--_typography---heading-06--height);
	font-weight: 600;
}

.privacy-desp.tnc-entry-content > p + ul,
.privacy-desp.tnc-entry-content > p + ol {
	margin-top: -8px;
}

.privacy-desp.tnc-entry-content li {
	margin-bottom: 10px;
}

.privacy-desp.tnc-entry-content li::marker {
	color: var(--color--primary);
}

/* The intro reads a step larger than the body. */
.privacy-desp.tnc-entry-content > p:first-child {
	font-size: var(--_typography---heading-06--size);
	line-height: var(--line-height--xxl);
	color: var(--color--black);
}

@media screen and (max-width: 767px) {
	.privacy-desp.tnc-entry-content > * {
		margin-bottom: 16px;
	}

	.privacy-desp.tnc-entry-content > h2,
	.privacy-desp.tnc-entry-content > h3 {
		margin-top: 24px;
		margin-bottom: 10px;
		padding-top: 20px;
	}

	.privacy-desp.tnc-entry-content > h4,
	.privacy-desp.tnc-entry-content > h5,
	.privacy-desp.tnc-entry-content > h6 {
		margin-top: 24px;
		margin-bottom: 8px;
	}

	.privacy-desp.tnc-entry-content p,
	.privacy-desp.tnc-entry-content li {
		font-size: 16px;
		line-height: var(--line-height--xxl);
	}

	.privacy-desp.tnc-entry-content > p:first-child {
		font-size: 17px;
	}

	.privacy-desp.tnc-entry-content > p.tnc-subhead {
		margin-top: 24px;
		margin-bottom: 8px;
	}

	.privacy-desp.tnc-entry-content > p + ul,
	.privacy-desp.tnc-entry-content > p + ol {
		margin-top: -4px;
	}

	.privacy-desp.tnc-entry-content ul,
	.privacy-desp.tnc-entry-content ol {
		padding-left: 20px;
	}

	.privacy-desp.tnc-entry-content li {
		margin-bottom: 6px;
	}

	.privacy-hero-block {
		margin-bottom: var(--_size-variables---global-sizes--size-xxl);
	}
}

/* -------------------------------------------------------------------------
 * 24. Brand guidelines: click-to-copy colour swatches
 * ---------------------------------------------------------------------- */

.colors-card.is-copyable {
	cursor: pointer;
}

.colors-card.is-copyable .colors-thumb {
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.colors-card.is-copyable:hover .colors-thumb {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.colors-card.is-copyable .colors-code {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* A small "copy" hint next to the code. */
.colors-card.is-copyable .colors-code::after {
	content: "";
	width: 14px;
	height: 14px;
	background-color: currentColor;
	opacity: 0.45;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1'/%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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: opacity 0.2s ease;
}

.colors-card.is-copyable:hover .colors-code::after {
	opacity: 1;
}

.colors-card.is-copied .colors-thumb {
	transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
	.colors-card.is-copyable .colors-thumb {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 25. About: founders and team
 *
 * The TNCFlow about-page sections in this site's language: square frames,
 * Gallery for names, the black-outline pill, square icon buttons.
 * ---------------------------------------------------------------------- */

.tnc-about-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--_size-variables---global-sizes--size-s);
	max-width: 720px;
	margin: 0 auto var(--_size-variables---global-sizes--size-6xl, 64px);
	text-align: center;
}

.tnc-about-summary {
	max-width: 560px;
	font-size: var(--_typography---text-large--size);
	line-height: var(--_typography---text-large--height);
	color: var(--color--text);
}

/* Founders */

.tnc-founders {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--_size-variables---global-sizes--size-xxl);
}

.tnc-founder {
	display: flex;
	flex-direction: column;
	background-color: var(--color--white);
	border: 1px solid var(--color--stroke);
}

.tnc-founder-photo {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: linear-gradient(180deg, #ebebea 0%, var(--color--background-01) 100%);
}

.tnc-founder-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 0.6s ease;
}

.tnc-founder:hover .tnc-founder-img {
	transform: scale(1.04);
}

.tnc-founder-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--_size-variables---global-sizes--size-l);
	padding: var(--_size-variables---global-sizes--size-xxl);
}

.tnc-founder-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--_size-variables---global-sizes--size-s);
}

.tnc-founder-name {
	margin: 0;
	font-family: var(--font-family--tagline);
	font-size: var(--_typography---heading-04--size);
	line-height: var(--_typography---heading-04--height);
	font-weight: var(--font-weight--normal);
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--color--black);
}

.tnc-founder-role {
	padding: var(--_size-variables---global-sizes--size-xxs) var(--_size-variables---global-sizes--size-m);
	border: 1px solid var(--color--black);
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	font-size: var(--_typography---text-small--size);
	font-weight: 600;
	color: var(--color--black);
	white-space: nowrap;
}

.tnc-founder-bio {
	flex: 1;
	margin: 0;
	font-size: var(--_typography---text-medium--size);
	line-height: var(--line-height--xxl);
	color: var(--color--text);
}

.tnc-founder-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--_size-variables---global-sizes--size-xs);
	padding-top: var(--_size-variables---global-sizes--size-l);
	border-top: 1px solid var(--color--stroke);
}

.tnc-founder-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: var(--color--background-01);
	color: var(--color--black);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tnc-founder-link:hover {
	background-color: var(--color--black);
	color: var(--color--white);
}

.tnc-founder-icon {
	width: 18px;
	height: 18px;
}

/* Team photo wall */

.tnc-team-section {
	background-color: var(--color--background-01);
}

.tnc-team-gallery {
	column-count: 3;
	column-gap: var(--_size-variables---global-sizes--size-l);
}

.tnc-team-photo {
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: var(--_size-variables---global-sizes--size-l);
	overflow: hidden;
	background-color: #ebebea;
	break-inside: avoid;
	line-height: 0;
}

.tnc-team-img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.6s ease;
}

.tnc-team-photo.is-tall .tnc-team-img {
	height: 600px;
	object-fit: cover;
}

/* The design's dark wash and plus, on hover. */
.tnc-team-photo::after {
	content: "+";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.55) 100%);
	color: var(--color--white);
	font-family: var(--font-family--paragraph);
	font-size: 40px;
	font-weight: 300;
	line-height: 1;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.tnc-team-photo:hover .tnc-team-img,
.tnc-team-photo:focus-visible .tnc-team-img {
	transform: scale(1.05);
}

.tnc-team-photo:hover::after,
.tnc-team-photo:focus-visible::after {
	opacity: 1;
}

@media screen and (max-width: 991px) {
	.tnc-founders {
		gap: var(--_size-variables---global-sizes--size-l);
	}

	.tnc-founder-body {
		padding: var(--_size-variables---global-sizes--size-xl);
	}

	.tnc-team-gallery {
		column-count: 2;
	}

	.tnc-team-photo.is-tall .tnc-team-img {
		height: 480px;
	}
}

@media screen and (max-width: 767px) {
	.tnc-founders {
		grid-template-columns: 1fr;
	}

	.tnc-founder-photo {
		aspect-ratio: 4 / 5;
	}

	.tnc-about-head {
		margin-bottom: var(--_size-variables---global-sizes--size-3xl);
	}
}

@media screen and (max-width: 479px) {
	.tnc-team-gallery {
		column-count: 1;
	}

	.tnc-team-photo.is-tall .tnc-team-img {
		height: 420px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tnc-founder-img,
	.tnc-team-img {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 26. Archive listings (category, tag, author, date, search)
 *
 * The blog index pairs its heading with a large image, which is what the
 * design's spacing is sized for. Without it, the heading's 88px margin, the
 * block's section-sized gap and the grid's own margins stacked into ~290px of
 * empty space above the posts and ~250px below the pagination.
 * ---------------------------------------------------------------------- */

.blog-section.tnc-archive {
	padding-bottom: var(--_size-variables---global-sizes--size-8xl, 80px);
}

.tnc-archive .blog-block {
	grid-row-gap: var(--_size-variables---global-sizes--size-6xl, 64px);
}

.tnc-archive .blog-info-block {
	margin-bottom: 0;
}

.tnc-archive .blog-card-wrapp {
	margin-top: 0;
	margin-bottom: var(--_size-variables---global-sizes--size-5xl, 56px);
}

@media screen and (max-width: 767px) {
	.blog-section.tnc-archive {
		padding-bottom: var(--_size-variables---global-sizes--size-4xl, 48px);
	}

	.tnc-archive .blog-block {
		grid-row-gap: var(--_size-variables---global-sizes--size-3xl, 40px);
	}

	.tnc-archive .blog-card-wrapp {
		margin-bottom: var(--_size-variables---global-sizes--size-3xl, 40px);
	}
}

/* -------------------------------------------------------------------------
 * 27. Article breadcrumb ("Blog / Post title")
 *
 * The design lays the link and the title out as two flex items, so on a phone
 * a long title wrapped inside its own narrow column beside "Blog". It now
 * flows as one line of text, cut off with an ellipsis on small screens.
 * ---------------------------------------------------------------------- */

.hero-info-block:has(> .tnc-breadcrumb) {
	align-self: stretch;
	width: 100%;
	min-width: 0;
}

.hero-info.tnc-breadcrumb {
	display: block;
	width: 100%;
	text-align: center;
}

.tnc-breadcrumb .hero-info-link,
.tnc-breadcrumb .hero-info-text {
	display: inline;
}

@media screen and (max-width: 767px) {
	.hero-info.tnc-breadcrumb {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

/* -------------------------------------------------------------------------
 * 28. Black Friday Deals template
 *
 * The banner is the site's one dark section; everything below it is the usual
 * light page. The deal grid ([tnc_deals]) and the submission form (Gravity
 * Forms) are plugin output, restyled here under their section classes so the
 * plugins' own blue, rounded, DM Sans styling gives way to the design's black
 * pills, square cards, Archivo headings and Inter body text.
 * ---------------------------------------------------------------------- */

/* Shown only to editors when a shortcode's plugin is inactive. */
.tnc-plugin-missing {
	margin: 0;
	padding: var(--_size-variables---global-sizes--size-l);
	border: 1px dashed var(--color--black);
	font-size: var(--_typography---text-small--size);
	color: var(--color--black);
	text-align: center;
}

/* Banner */

.tnc-bf-hero {
	position: relative;
	overflow: hidden;
	padding: var(--global-variables--section-space) 0;
	/* The glow is what shows when no video or image is set. */
	background:
		radial-gradient(ellipse 60% 55% at 50% 110%, rgba(255, 161, 111, 0.35) 0%, rgba(255, 161, 111, 0) 70%),
		radial-gradient(ellipse 40% 40% at 85% 0%, rgba(255, 161, 111, 0.12) 0%, rgba(255, 161, 111, 0) 70%),
		var(--color--black);
	color: var(--color--white);
}

.tnc-bf-hero-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.45;
	pointer-events: none;
}

/* A wash that keeps the type readable over any frame of the video. */
.tnc-bf-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.75) 100%);
	pointer-events: none;
}

/* The site's vertical rules, faint on black. */
.tnc-bf-hero .line-section {
	z-index: 2;
}

.tnc-bf-hero .line-stroke {
	background-color: rgba(255, 255, 255, 0.08);
}

.tnc-bf-hero .main-container {
	position: relative;
	z-index: 3;
}

.tnc-bf-hero-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--_size-variables---global-sizes--size-xl);
	text-align: center;
}

.tnc-bf-eyebrow {
	padding: var(--_size-variables---global-sizes--size-xxs) var(--_size-variables---global-sizes--size-m);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	font-size: var(--_typography---text-small--size);
	font-weight: var(--font-weight--semi-bold);
	color: var(--color--white);
}

h1.tnc-bf-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--_size-variables---global-sizes--size-xl) var(--_size-variables---global-sizes--size-3xl);
	font-size: clamp(56px, 11vw, 148px);
	line-height: 0.9;
	letter-spacing: -0.035em;
	color: var(--color--white);
}

/* The discount sticker. */
.tnc-bf-badge {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: clamp(112px, 13vw, 168px);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: var(--color--primary);
	color: var(--color--black);
	transform: rotate(-12deg);
}

.tnc-bf-badge-ring {
	position: absolute;
	inset: -10px;
	border: 2px dashed var(--color--primary);
	border-radius: 50%;
	animation: tnc-bf-spin 24s linear infinite;
}

.tnc-bf-badge-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
}

.tnc-bf-badge-small {
	font-size: clamp(12px, 1.3vw, 16px);
	font-weight: var(--font-weight--semi-bold);
	letter-spacing: 0.08em;
}

.tnc-bf-badge-value {
	margin: 2px 0;
	font-size: clamp(36px, 4.6vw, 58px);
	font-weight: var(--font-weight--extra-bold);
	letter-spacing: -0.05em;
}

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

.tnc-bf-sub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--_size-variables---global-sizes--size-s) var(--_size-variables---global-sizes--size-l);
}

.tnc-bf-cyber {
	margin: 0;
	font-family: var(--font-family--heading);
	font-size: clamp(40px, 7vw, 96px);
	font-weight: var(--font-weight--bold);
	line-height: 1;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--color--white);
}

.tnc-bf-accent {
	font-family: var(--font-family--tagline);
	font-weight: var(--font-weight--normal);
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--color--primary);
}

/* The page heroes' arrow-and-pill tag; the black arrow turns white on black. */
.tnc-bf-year .hero-arrow {
	filter: invert(1);
}

.tnc-bf-year .hero-button {
	font-size: var(--_typography---text-small--size);
}

/* Deal listing: the [tnc_deals] plugin output */

.tnc-deals-section .tnc-deals-wrapper {
	--tnc-deals-primary: var(--color--black);
	--tnc-deals-muted: var(--color--text);
	padding: 0;
	font-family: var(--font-family--paragraph);
}

.tnc-deals-section .tnc-deals-search {
	max-width: 720px;
	padding: 6px;
	border: 1px solid var(--color--icon-bg);
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	background-color: var(--color--white);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tnc-deals-section .tnc-deals-search:hover {
	border-color: #a8a8a8;
}

/* The whole pill takes focus, as the form fields do: black edge, orange ring. */
.tnc-deals-section .tnc-deals-search:focus-within {
	border-color: var(--color--black);
	box-shadow: 0 0 0 4px rgba(255, 161, 111, 0.3);
}

.tnc-deals-section .tnc-deals-search-input:focus,
.tnc-deals-section .tnc-deals-search-input:focus-visible {
	outline: none;
	box-shadow: none;
}

.tnc-deals-section .tnc-deals-search-input::-webkit-search-cancel-button {
	cursor: pointer;
}

/*
 * The plugin's buttons. The TNC Bookshelf plugin's Bootstrap gives every
 * clicked button a blue focus ring (button:focus); a mouse click now leaves
 * nothing, and keyboard focus gets the theme's black ring.
 */
.tnc-deals-section .tnc-deals-wrapper button:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.tnc-deals-section .tnc-deals-wrapper button:focus-visible,
.tnc-deals-section .tnc-deals-card-button:focus-visible {
	outline: 2px solid var(--color--black);
	outline-offset: 2px;
	box-shadow: none;
}

.tnc-deals-section .tnc-deals-search-submit:focus-visible {
	outline-offset: -2px;
	outline-color: var(--color--white);
}

.tnc-deals-section .tnc-deals-search-input {
	padding: 10px 20px;
	font-family: inherit;
	font-size: var(--_typography---text-medium--size);
	font-weight: var(--font-weight--normal);
	color: var(--color--black);
}

.tnc-deals-section .tnc-deals-search-submit {
	margin-right: 0 !important;
	padding: 10px 24px;
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	background-color: var(--color--black);
	font-family: inherit;
	font-size: var(--_typography---text-medium--size);
	letter-spacing: -0.019em;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tnc-deals-section .tnc-deals-search-submit:hover,
.tnc-deals-section .tnc-deals-search-submit:focus-visible {
	background-color: var(--color--primary);
	color: var(--color--black);
}

.tnc-deals-section .tnc-deals-filters {
	justify-content: center;
	max-width: none;
	margin: var(--_size-variables---global-sizes--size-xxl) 0 0;
}

.tnc-deals-section .tnc-deals-filter {
	padding: 6px 16px;
	border: 1px solid var(--color--black);
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	background-color: var(--color--transparent);
	font-family: inherit;
	font-size: var(--_typography---text-small--size);
	font-weight: var(--font-weight--medium);
	line-height: 1.5;
	color: var(--color--black);
}

.tnc-deals-section .tnc-deals-filter:hover,
.tnc-deals-section .tnc-deals-filter.active {
	background-color: var(--color--black);
	color: var(--color--white);
}

.tnc-deals-section .tnc-deals-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: var(--_size-variables---global-sizes--size-xl);
	margin-top: var(--_size-variables---global-sizes--size-5xl);
}

.tnc-deals-section .tnc-deals-card {
	border: 1px solid var(--color--stroke);
	border-radius: 0;
	background-color: var(--color--white);
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.tnc-deals-section .tnc-deals-card:hover {
	border-color: var(--color--black);
	transform: translateY(-4px);
}

.tnc-deals-section .tnc-deals-card-header {
	padding: 0;
	overflow: hidden;
}

/* Banners are submitted at 840×476. */
.tnc-deals-section .tnc-deals-featured {
	aspect-ratio: 840 / 476;
	height: auto;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.tnc-deals-section .tnc-deals-card:hover .tnc-deals-featured {
	transform: scale(1.04);
}

.tnc-deals-section span.tnc-deals-card-badge.tnc-deals-card-badge-percentage {
	top: var(--_size-variables---global-sizes--size-m);
	left: var(--_size-variables---global-sizes--size-m);
	padding: 2px 12px;
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	background-color: var(--color--primary);
	font-family: inherit;
	font-size: 13px;
	font-weight: var(--font-weight--semi-bold);
	color: var(--color--black);
}

.tnc-deals-section .tnc-deals-card-body {
	gap: var(--_size-variables---global-sizes--size-s);
	padding: var(--_size-variables---global-sizes--size-xl);
}

.tnc-deals-section .tnc-deals-card-title {
	margin: 0;
	font-family: var(--font-family--heading);
	font-size: 22px;
	font-weight: var(--font-weight--semi-bold);
	line-height: var(--line-height--m);
	letter-spacing: -0.02em;
	color: var(--color--black);
}

.tnc-deals-section .tnc-deals-card-description,
.tnc-deals-section .tnc-deals-card-meta-label,
.tnc-deals-section .tnc-deals-card-meta-value,
.tnc-deals-section .tnc-deals-coupon-label,
.tnc-deals-section .tnc-deals-coupon-value,
.tnc-deals-section .tnc-deals-card-badge-label,
.tnc-deals-section .tnc-deals-card-badge-value {
	font-family: inherit;
	font-size: 15px;
	font-weight: var(--font-weight--normal);
	line-height: var(--line-height--xl);
	text-align: left;
	color: var(--color--text);
}

.tnc-deals-section .tnc-deals-card-meta-label,
.tnc-deals-section .tnc-deals-coupon-label,
.tnc-deals-section .tnc-deals-card-badge-label {
	font-weight: var(--font-weight--medium);
	color: var(--color--black);
}

.tnc-deals-section .tnc-deals-card-meta-icon,
.tnc-deals-section .tnc-deals-coupon-icon {
	color: var(--color--black);
}

/* The coupon reads as a cut-out code. */
.tnc-deals-section .tnc-deals-coupon {
	align-self: flex-start;
	gap: var(--_size-variables---global-sizes--size-xs);
	padding: 6px 12px;
	border: 1px dashed var(--color--black);
	background-color: var(--color--background-02);
}

.tnc-deals-section .tnc-deals-coupon-value {
	font-weight: var(--font-weight--semi-bold);
	letter-spacing: 0.04em;
	color: var(--color--black);
}

.tnc-deals-section .tnc-deals-card-actions {
	padding: 0 var(--_size-variables---global-sizes--size-xl) var(--_size-variables---global-sizes--size-xl);
}

.tnc-deals-section .tnc-deals-card-button {
	gap: var(--_size-variables---global-sizes--size-xs);
	padding: 12px 20px;
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	background-color: var(--color--black);
	font-family: inherit;
	font-size: var(--_typography---text-medium--size);
	font-weight: var(--font-weight--medium);
	letter-spacing: -0.019em;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tnc-deals-section .tnc-deals-card-button:hover,
.tnc-deals-section .tnc-deals-card-button:focus-visible {
	background-color: var(--color--primary);
	color: var(--color--black) !important;
}

.tnc-deals-section .tnc-deals-empty {
	color: var(--color--text);
}

.tnc-deals-section .tnc-deals-pagination {
	gap: var(--_size-variables---global-sizes--size-xs);
	margin-top: var(--_size-variables---global-sizes--size-5xl);
}

.tnc-deals-section .tnc-deals-pagination button {
	min-width: 40px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--color--black);
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	box-shadow: none;
	background-color: var(--color--transparent);
	font-family: inherit;
	font-size: var(--_typography---text-small--size);
	font-weight: var(--font-weight--medium);
	color: var(--color--black);
}

.tnc-deals-section .tnc-deals-pagination button:not([disabled]):hover,
.tnc-deals-section .tnc-deals-pagination button.active {
	background-color: var(--color--black);
	color: var(--color--white);
}

/* Submit a deal */

.tnc-deals-submit {
	position: relative;
	overflow: hidden;
	background-color: var(--color--background-02);
}

.tnc-deals-submit .section-space {
	position: relative;
	z-index: 2;
}

/* A step down from the page's section headings: this one is a long sentence. */
.tnc-deals-submit .tnc-head {
	max-width: 780px;
}

.tnc-deals-submit h2.section-title {
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: var(--line-height--xs);
}

.tnc-deals-form {
	max-width: 880px;
	margin: 0 auto;
	padding: var(--_size-variables---global-sizes--size-4xl);
	border: 1px solid var(--color--stroke);
	background-color: var(--color--white);
}

/*
 * Gravity Forms (whichever form the "submit_shortcode" field places).
 *
 * Scoped to the section's own #tnc-deals-form id: Gravity's stylesheets
 * (legacy and Orbital) use long class chains and can load after this file, and
 * one id outranks them all without !important — whatever the form's id is.
 *
 * Minimal filled fields: a light grey well that turns white with a black edge
 * and a soft orange ring on focus. Labels are small and black; "(Required)"
 * becomes an asterisk.
 */

#tnc-deals-form .gform_wrapper {
	--tnc-field-bg: var(--color--background-01);
	--tnc-field-border: transparent;
	--tnc-field-radius: var(--_size-variables---border-radius--radius-xs);
	--tnc-field-error: #c0392b;
	margin: 0;
	font-family: var(--font-family--paragraph);
}

#tnc-deals-form .gform_wrapper .gform_heading {
	display: none;
}

#tnc-deals-form .gform_wrapper .gform_fields {
	row-gap: var(--_size-variables---global-sizes--size-xl);
	column-gap: var(--_size-variables---global-sizes--size-l);
}

#tnc-deals-form .gform_wrapper .gfield {
	margin: 0;
	padding: 0;
}

#tnc-deals-form .gform_wrapper .gfield_label {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	margin: 0 0 var(--_size-variables---global-sizes--size-xs);
	padding: 0;
	font-family: inherit;
	font-size: var(--_typography---text-small--size);
	font-weight: var(--font-weight--medium);
	line-height: var(--line-height--l);
	letter-spacing: -0.01em;
	color: var(--color--black);
}

#tnc-deals-form .gform_wrapper .gfield_required {
	margin: 0;
	padding: 0;
	color: var(--orange--600);
}

/* "(Required)" → "*". The inputs already carry aria-required. */
#tnc-deals-form .gform_wrapper .gfield_required_text {
	font-size: 0;
}

#tnc-deals-form .gform_wrapper .gfield_required_text::after {
	content: "*";
	font-size: var(--_typography---text-small--size);
	font-weight: var(--font-weight--semi-bold);
}

#tnc-deals-form .gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
#tnc-deals-form .gform_wrapper select,
#tnc-deals-form .gform_wrapper textarea {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--tnc-field-border);
	border-radius: var(--tnc-field-radius);
	background-color: var(--tnc-field-bg);
	box-shadow: none;
	font-family: inherit;
	font-size: 15px;
	line-height: var(--line-height--xl);
	letter-spacing: -0.01em;
	color: var(--color--black);
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#tnc-deals-form .gform_wrapper textarea {
	min-height: 140px;
	height: 140px;
	resize: vertical;
}

#tnc-deals-form .gform_wrapper ::placeholder {
	color: #9a9a9a;
	opacity: 1;
}

#tnc-deals-form .gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="file"]):hover,
#tnc-deals-form .gform_wrapper select:hover,
#tnc-deals-form .gform_wrapper textarea:hover {
	--tnc-field-border: var(--color--icon-bg);
}

#tnc-deals-form .gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="file"]):focus,
#tnc-deals-form .gform_wrapper select:focus,
#tnc-deals-form .gform_wrapper textarea:focus {
	--tnc-field-bg: var(--color--white);
	--tnc-field-border: var(--color--black);
	outline: none;
	box-shadow: 0 0 0 4px rgba(255, 161, 111, 0.3);
}

/* A plain chevron in place of the browser's select arrow. */
#tnc-deals-form .gform_wrapper select {
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

/* Date fields: the calendar button sits inside the field. */
#tnc-deals-form .gform_wrapper .ginput_container_date {
	position: relative;
}

#tnc-deals-form .gform_wrapper .ginput_container_date input {
	padding-right: 48px;
}

#tnc-deals-form .gform_wrapper .gform-datepicker-toggle,
#tnc-deals-form .gform_wrapper .ui-datepicker-trigger {
	position: absolute;
	top: 50%;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color--black);
	transform: translateY(-50%);
	cursor: pointer;
}

/* The banner upload reads as a drop zone. */
#tnc-deals-form .gform_wrapper input[type="file"] {
	width: 100%;
	padding: 10px;
	border: 1px dashed #bdbdbd;
	border-radius: var(--tnc-field-radius);
	background-color: var(--color--background-02);
	font-family: inherit;
	font-size: var(--_typography---text-small--size);
	color: var(--color--text);
	cursor: pointer;
	transition: border-color 0.2s ease;
}

#tnc-deals-form .gform_wrapper input[type="file"]:hover,
#tnc-deals-form .gform_wrapper input[type="file"]:focus-visible {
	border-color: var(--color--black);
	outline: none;
}

#tnc-deals-form .gform_wrapper input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 6px 14px;
	border: 0;
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	background-color: var(--color--black);
	font-family: inherit;
	font-size: 13px;
	font-weight: var(--font-weight--medium);
	color: var(--color--white);
	cursor: pointer;
}

#tnc-deals-form .gform_wrapper .gform_drop_area {
	padding: var(--_size-variables---global-sizes--size-xl);
	border: 1px dashed #bdbdbd;
	border-radius: var(--tnc-field-radius);
	background-color: var(--color--background-02);
}

#tnc-deals-form .gform_wrapper .gform_fileupload_rules,
#tnc-deals-form .gform_wrapper .gfield_description:not(.validation_message) {
	display: block;
	margin-top: 6px;
	padding: 0;
	font-size: 12px;
	line-height: var(--line-height--l);
	color: var(--color--text);
}

#tnc-deals-form .gform_wrapper input[type="checkbox"],
#tnc-deals-form .gform_wrapper input[type="radio"] {
	accent-color: var(--color--black);
}

/* Errors */

#tnc-deals-form .gform_wrapper .gfield_error input:not([type="submit"]):not([type="file"]),
#tnc-deals-form .gform_wrapper .gfield_error select,
#tnc-deals-form .gform_wrapper .gfield_error textarea {
	--tnc-field-border: var(--tnc-field-error);
	--tnc-field-bg: #fdf3f2;
}

#tnc-deals-form .gform_wrapper .gfield_error .gfield_label {
	color: var(--color--black);
}

#tnc-deals-form .gform_wrapper .validation_message,
#tnc-deals-form .gform_wrapper .gfield_validation_message {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13px;
	color: var(--tnc-field-error);
}

#tnc-deals-form .gform_wrapper .gform_validation_errors {
	margin: 0 0 var(--_size-variables---global-sizes--size-xl);
	padding: var(--_size-variables---global-sizes--size-m) var(--_size-variables---global-sizes--size-l);
	border: 1px solid #f1c6c0;
	border-radius: var(--tnc-field-radius);
	background-color: #fdf3f2;
	box-shadow: none;
}

#tnc-deals-form .gform_wrapper .gform_validation_errors .gform_submission_error {
	margin: 0;
	font-family: inherit;
	font-size: var(--_typography---text-small--size);
	font-weight: var(--font-weight--medium);
	line-height: var(--line-height--l);
	text-transform: none;
	color: var(--tnc-field-error);
}

/* Submit */

#tnc-deals-form .gform_wrapper .gform_footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--_size-variables---global-sizes--size-m);
	margin: var(--_size-variables---global-sizes--size-3xl) 0 0;
	padding: var(--_size-variables---global-sizes--size-xl) 0 0;
	border-top: 1px solid var(--color--stroke);
}

/* The design's black pill. */
#tnc-deals-form .gform_wrapper .gform_footer .gform_button {
	width: auto;
	min-height: 48px;
	margin: 0;
	padding: 12px 32px;
	border: 1px solid var(--color--black);
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	background-color: var(--color--black);
	box-shadow: none;
	font-family: inherit;
	font-size: var(--_typography---text-medium--size);
	font-weight: var(--font-weight--medium);
	line-height: var(--line-height--xl);
	letter-spacing: -0.019em;
	color: var(--color--white);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#tnc-deals-form .gform_wrapper .gform_footer .gform_button:hover,
#tnc-deals-form .gform_wrapper .gform_footer .gform_button:focus-visible {
	border-color: var(--color--primary);
	background-color: var(--color--primary);
	color: var(--color--black);
}

#tnc-deals-form .gform_wrapper .gform_footer .gform_button:focus-visible {
	outline: 2px solid var(--color--black);
	outline-offset: 3px;
}

/* Shown after an AJAX submit, outside the wrapper the rules above target. */
.tnc-deals-form .gform_confirmation_message {
	padding: var(--_size-variables---global-sizes--size-3xl) var(--_size-variables---global-sizes--size-l);
	font-family: var(--font-family--paragraph);
	font-size: var(--_typography---text-medium--size);
	color: var(--color--black);
	text-align: center;
}

@media screen and (max-width: 991px) {
	.tnc-bf-hero {
		padding: var(--_size-variables---global-sizes--size-10xl) 0;
	}

	.tnc-deals-form {
		padding: var(--_size-variables---global-sizes--size-xxl);
	}

}

@media screen and (max-width: 767px) {
	.tnc-bf-hero {
		padding: var(--_size-variables---global-sizes--size-8xl) 0;
	}

	h1.tnc-bf-title {
		flex-direction: column;
	}

	.tnc-deals-section .tnc-deals-search-input {
		min-width: 0;
		padding: 8px 12px;
	}

	.tnc-deals-section .tnc-deals-search-submit {
		padding: 8px 18px;
	}

	.tnc-deals-section .tnc-deals-filters {
		margin-top: var(--_size-variables---global-sizes--size-l);
	}

	.tnc-deals-form {
		padding: var(--_size-variables---global-sizes--size-xl) var(--_size-variables---global-sizes--size-l);
	}

	/* Gravity's half-width fields stack on phones. */
	#tnc-deals-form .gform_wrapper .gform_fields {
		grid-template-columns: 1fr;
	}

	#tnc-deals-form .gform_wrapper .gfield {
		grid-column: 1 / -1;
	}

	#tnc-deals-form .gform_wrapper .gform_footer .gform_button {
		width: 100%;
	}

}

@media (prefers-reduced-motion: reduce) {
	.tnc-bf-badge-ring {
		animation: none;
	}

	.tnc-deals-section .tnc-deals-card,
	.tnc-deals-section .tnc-deals-featured {
		transition: none;
	}

	.tnc-deals-section .tnc-deals-card:hover,
	.tnc-deals-section .tnc-deals-card:hover .tnc-deals-featured {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * 29. Shared page sections: heading and two-column FAQ
 *
 * Used by the Black Friday Deals and product templates
 * (template-parts/global/section-head and faq-split).
 * ---------------------------------------------------------------------- */

.tnc-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--_size-variables---global-sizes--size-m);
	max-width: 860px;
	margin: 0 auto var(--_size-variables---global-sizes--size-5xl);
	text-align: center;
}

.tnc-head.is-left {
	align-items: flex-start;
	margin-left: 0;
	text-align: left;
}

/* For headings in a half-width column, or long sentence-style titles. */
.tnc-head.is-compact h2.section-title,
.tnc-head.is-compact h3.section-title {
	font-size: clamp(28px, 3vw, 40px);
	line-height: var(--line-height--xs);
}

.tnc-intro {
	max-width: 720px;
	margin: 0;
	color: var(--color--text);
}

/* FAQ */

.tnc-faq-split-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--_size-variables---global-sizes--size-8xl);
	align-items: start;
}

.tnc-faq-split-text {
	position: sticky;
	top: 120px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--_size-variables---global-sizes--size-m);
}

/* Sized for a narrow column rather than a full-width heading. */
.tnc-faq-split h2.section-title {
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: var(--line-height--xs);
}

/* The sign-off and the support button, set apart from the intro by a rule. */
.tnc-faq-split-help {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--_size-variables---global-sizes--size-l);
	width: 100%;
	margin-top: var(--_size-variables---global-sizes--size-xl);
	padding-top: var(--_size-variables---global-sizes--size-xxl);
	border-top: 1px solid var(--color--icon-bg);
}

.tnc-faq-split-note {
	margin: 0;
	font-family: var(--font-family--tagline);
	font-size: var(--_size-variables---global-sizes--size-xl);
	line-height: var(--line-height--s);
	letter-spacing: -0.03em;
	color: var(--color--black);
}

/* Each question is its own card; the open one is outlined in black. */
.tnc-faq-split-list.faqs {
	gap: var(--_size-variables---global-sizes--size-s);
	margin-top: 0;
}

.tnc-faq-split-list .tnc-faq {
	border: 1px solid var(--color--stroke);
	background-color: var(--color--white);
	transition: border-color 0.25s ease;
}

.tnc-faq-split-list .tnc-faq:hover {
	border-color: #c3c3c3;
}

.tnc-faq-split-list .tnc-faq.is-open {
	border-color: var(--color--black);
}

.tnc-faq-split-list .tnc-faq .faq-toggle {
	align-items: center;
	padding: var(--_size-variables---global-sizes--size-l) var(--_size-variables---global-sizes--size-xl);
}

.tnc-faq-split-list .tnc-faq .faq-num {
	flex: none;
}

.tnc-faq-split-list .tnc-faq .faq-title.details-faq-title {
	margin-top: 0;
	font-size: 17px;
	font-weight: var(--font-weight--medium);
	line-height: var(--line-height--m);
}

/* The plus/minus sits in a round button that fills black when open. */
.tnc-faq-split-list .tnc-faq .faq-icon {
	flex: none;
	width: 32px;
	height: 32px;
	margin-top: 0;
	border: 1px solid var(--color--icon-bg);
	border-radius: 50%;
	color: var(--color--black);
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.tnc-faq-split-list .tnc-faq.is-open .faq-icon {
	border-color: var(--color--black);
	background-color: var(--color--black);
	color: var(--color--white);
}

/* Answers line up with the question text, past the "Q." badge. */
.tnc-faq-split-list .tnc-faq .faq-except.details-faq-except {
	max-width: none;
	margin-top: 0;
	padding:
		0
		calc(var(--_size-variables---global-sizes--size-xl) + 32px + var(--_size-variables---global-sizes--size-m))
		var(--_size-variables---global-sizes--size-xl)
		calc(var(--_size-variables---global-sizes--size-xl) + var(--_size-variables---global-sizes--size-2xl) + var(--_size-variables---global-sizes--size-m));
	font-size: 15px;
	line-height: var(--line-height--xxl);
}

.tnc-faq-split-list .tnc-faq .faq-except a {
	color: var(--color--black);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tnc-faq-split-list .tnc-faq .faq-toggle:focus-visible {
	outline-offset: -2px;
}

@media screen and (max-width: 991px) {
	.tnc-faq-split-grid {
		grid-template-columns: 1fr;
		gap: var(--_size-variables---global-sizes--size-4xl);
	}

	.tnc-faq-split-text {
		position: static;
	}
}

@media screen and (max-width: 767px) {
	.tnc-head {
		margin-bottom: var(--_size-variables---global-sizes--size-3xl);
	}

	.tnc-faq-split-list .tnc-faq .faq-toggle {
		gap: var(--_size-variables---global-sizes--size-s);
		padding: var(--_size-variables---global-sizes--size-m);
	}

	.tnc-faq-split-list .tnc-faq .faq-except.details-faq-except {
		padding: 0 var(--_size-variables---global-sizes--size-m) var(--_size-variables---global-sizes--size-l);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tnc-faq-split-list .tnc-faq,
	.tnc-faq-split-list .tnc-faq .faq-icon {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 30. Product templates (Product Landing, Product Preview)
 *
 * White cards with a hairline stroke on the light page, black highlight
 * cards, Archivo headings and the brand orange as the single accent — the
 * sticker behind the hero image, the step numbers, the review stars and the
 * help band.
 * ---------------------------------------------------------------------- */

.tnc-pd-icon {
	width: 22px;
	height: 22px;
}

/* Hero */

.tnc-pd-hero {
	padding: var(--global-variables--hero-space) 0 var(--_size-variables---global-sizes--size-10xl);
}

.tnc-pd-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--_size-variables---global-sizes--size-6xl);
	align-items: center;
}

.tnc-pd-hero.is-centered .tnc-pd-hero-grid {
	grid-template-columns: minmax(0, 1fr);
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.tnc-pd-hero-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.tnc-pd-hero.is-centered .tnc-pd-hero-text {
	align-items: center;
}

h1.tnc-pd-title {
	margin-top: var(--_size-variables---global-sizes--size-s);
}

.tnc-pd-tagline {
	margin: var(--_size-variables---global-sizes--size-l) 0 0;
	font-family: var(--font-family--heading);
	font-size: var(--_typography---heading-06--size);
	font-weight: var(--font-weight--medium);
	line-height: var(--line-height--m);
	letter-spacing: -0.02em;
	color: var(--color--black);
}

.tnc-pd-lead {
	max-width: 560px;
	margin: var(--_size-variables---global-sizes--size-s) 0 0;
	font-size: 17px;
	color: var(--color--text);
}

.tnc-pd-hero.is-centered .tnc-pd-lead {
	max-width: 640px;
	margin-top: var(--_size-variables---global-sizes--size-l);
}

.tnc-pd-chips-block {
	margin-top: var(--_size-variables---global-sizes--size-2xl);
}

.tnc-pd-chips-label {
	margin-bottom: var(--_size-variables---global-sizes--size-s);
	font-size: 12px;
	font-weight: var(--font-weight--semi-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color--text);
}

.tnc-pd-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tnc-pd-chip {
	padding: 4px 10px;
	border: 1px solid var(--color--stroke);
	background-color: var(--color--white);
	font-size: 12px;
	font-weight: var(--font-weight--semi-bold);
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--color--black);
}

.tnc-pd-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--_size-variables---global-sizes--size-s);
	margin-top: var(--_size-variables---global-sizes--size-xxl);
}

.tnc-pd-hero.is-centered .tnc-pd-actions {
	justify-content: center;
}

/* A framed screenshot; in the hero it sits on an offset orange block. */
.tnc-pd-frame {
	position: relative;
	padding: clamp(12px, 2.4vw, 28px);
	border: 1px solid var(--color--stroke);
	background-color: var(--color--white);
}

.tnc-pd-frame-img {
	display: block;
	width: 100%;
	height: auto;
}

.tnc-pd-hero-media {
	position: relative;
	isolation: isolate;
	padding: 0 var(--_size-variables---global-sizes--size-m) var(--_size-variables---global-sizes--size-m) 0;
}

.tnc-pd-hero-media::before {
	content: "";
	position: absolute;
	inset: var(--_size-variables---global-sizes--size-m) 0 0 var(--_size-variables---global-sizes--size-m);
	z-index: -1;
	background-color: var(--color--primary);
}

/* How it works */

.tnc-pd-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: var(--_size-variables---global-sizes--size-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tnc-pd-step {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color--stroke);
	background-color: var(--color--white);
}

.tnc-pd-step-media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: var(--_size-variables---global-sizes--size-xl);
	background-color: var(--color--background-02);
	border-bottom: 1px solid var(--color--stroke);
}

.tnc-pd-step-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.tnc-pd-step-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--_size-variables---global-sizes--size-s);
	padding: var(--_size-variables---global-sizes--size-2xl);
}

.tnc-pd-step-num {
	padding: 2px 10px;
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	background-color: var(--color--primary);
	font-size: 12px;
	font-weight: var(--font-weight--bold);
	letter-spacing: 0.04em;
	color: var(--color--black);
}

h3.tnc-pd-step-title {
	font-size: 22px;
	font-weight: var(--font-weight--semi-bold);
	line-height: var(--line-height--m);
	letter-spacing: -0.02em;
	color: var(--color--black);
}

.tnc-pd-step-text {
	font-size: 15px;
	line-height: var(--line-height--xxl);
	color: var(--color--text);
}

.tnc-pd-step-text p {
	margin: 0 0 var(--_size-variables---global-sizes--size-s);
}

.tnc-pd-step-text ol,
.tnc-pd-step-text ul {
	margin: 0;
	padding-left: 20px;
}

.tnc-pd-step-text li + li {
	margin-top: 6px;
}

.tnc-pd-step-text li::marker {
	font-weight: var(--font-weight--semi-bold);
	color: var(--color--black);
}

.tnc-pd-step-text > :last-child {
	margin-bottom: 0;
}

/* Two columns: video / image beside copy */

.tnc-pd-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--_size-variables---global-sizes--size-6xl);
	align-items: center;
}

.tnc-pd-split-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.tnc-pd-split-text .tnc-head {
	margin-bottom: var(--_size-variables---global-sizes--size-xxl);
}

.tnc-pd-split-text .tnc-head:last-child {
	margin-bottom: 0;
}

.tnc-pd-live-section,
.tnc-pd-stats-section {
	background-color: var(--color--white);
}

.tnc-pd-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--color--stroke);
	background-color: var(--color--black);
}

.tnc-pd-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.tnc-pd-benefit-section {
	position: relative;
	overflow: hidden;
	background-color: var(--color--background-02);
}

.tnc-pd-benefit-section .section-space {
	position: relative;
	z-index: 2;
}

/* Features */

.tnc-pd-highlights,
.tnc-pd-features,
.tnc-pd-reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: var(--_size-variables---global-sizes--size-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tnc-pd-highlights {
	margin-bottom: var(--_size-variables---global-sizes--size-l);
}

.tnc-pd-highlight {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--_size-variables---global-sizes--size-s);
	padding: var(--_size-variables---global-sizes--size-xxl);
	background-color: var(--color--black);
}

.tnc-pd-highlight-icon,
.tnc-pd-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--_size-variables---global-sizes--size-xs);
}

.tnc-pd-highlight-icon {
	background-color: rgba(255, 161, 111, 0.16);
	color: var(--color--primary);
}

h3.tnc-pd-highlight-title {
	font-size: var(--_typography---heading-06--size);
	font-weight: var(--font-weight--semi-bold);
	line-height: var(--line-height--m);
	letter-spacing: -0.02em;
	color: var(--color--white);
}

.tnc-pd-highlight-text {
	margin: 0;
	font-size: 15px;
	line-height: var(--line-height--xxl);
	color: rgba(255, 255, 255, 0.7);
}

.tnc-pd-feature {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--_size-variables---global-sizes--size-xs);
	padding: var(--_size-variables---global-sizes--size-2xl);
	border: 1px solid var(--color--stroke);
	background-color: var(--color--white);
	transition: border-color 0.25s ease;
}

.tnc-pd-feature:hover {
	border-color: var(--color--black);
}

.tnc-pd-feature-icon {
	background-color: var(--color--background-01);
	color: var(--color--black);
	transition: background-color 0.25s ease;
}

.tnc-pd-feature:hover .tnc-pd-feature-icon {
	background-color: var(--color--primary);
}

h3.tnc-pd-feature-title {
	font-size: 18px;
	font-weight: var(--font-weight--semi-bold);
	line-height: var(--line-height--m);
	letter-spacing: -0.02em;
	color: var(--color--black);
}

.tnc-pd-feature-text {
	margin: 0;
	font-size: 15px;
	line-height: var(--line-height--xxl);
	color: var(--color--text);
}

/* Figures */

.tnc-pd-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	border-top: 1px solid var(--color--stroke);
	border-left: 1px solid var(--color--stroke);
}

/* Figure first visually; the label stays first in the source for the <dl>. */
.tnc-pd-stat {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: var(--_size-variables---global-sizes--size-xs);
	padding: var(--_size-variables---global-sizes--size-xxl);
	border-right: 1px solid var(--color--stroke);
	border-bottom: 1px solid var(--color--stroke);
}

.tnc-pd-stat-value {
	margin: 0;
	font-family: var(--font-family--heading);
	font-size: clamp(40px, 4.4vw, 56px);
	font-weight: var(--font-weight--bold);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--color--black);
}

.tnc-pd-stat-label {
	font-size: 15px;
	color: var(--color--text);
}

/* Reviews */

.tnc-pd-review {
	display: flex;
	flex-direction: column;
	gap: var(--_size-variables---global-sizes--size-l);
	padding: var(--_size-variables---global-sizes--size-xxl);
	border: 1px solid var(--color--stroke);
	background-color: var(--color--white);
}

.tnc-pd-stars {
	display: flex;
	gap: 2px;
	color: var(--orange--500);
}

.tnc-pd-star {
	width: 18px;
	height: 18px;
}

.tnc-pd-star.is-empty {
	color: var(--color--icon-bg);
}

.tnc-pd-quote {
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 17px;
	line-height: var(--line-height--xl);
	color: var(--color--black);
}

.tnc-pd-author {
	display: flex;
	flex-direction: column;
	padding-top: var(--_size-variables---global-sizes--size-m);
	border-top: 1px solid var(--color--stroke);
}

.tnc-pd-author-name {
	font-family: var(--font-family--heading);
	font-size: var(--_typography---text-medium--size);
	font-weight: var(--font-weight--semi-bold);
	color: var(--color--black);
}

.tnc-pd-author-role {
	font-size: 13px;
	color: var(--color--text);
}

/* Help band */

.tnc-pd-help-space {
	padding-bottom: var(--global-variables--section-space);
}

.tnc-pd-help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--_size-variables---global-sizes--size-xxl);
	padding: var(--_size-variables---global-sizes--size-4xl) var(--_size-variables---global-sizes--size-5xl);
	background-color: var(--color--primary);
}

.tnc-pd-help-text {
	max-width: 620px;
}

h2.tnc-pd-help-title {
	font-size: clamp(28px, 3vw, 40px);
	line-height: var(--line-height--xs);
	color: var(--color--black);
}

.tnc-pd-help-copy {
	margin: var(--_size-variables---global-sizes--size-xs) 0 0;
	color: rgba(0, 0, 0, 0.75);
}

/* Preview: workflow tabs */

.tnc-pv-demo {
	display: flex;
	justify-content: center;
	margin: calc(var(--_size-variables---global-sizes--size-xxl) * -1) 0 var(--_size-variables---global-sizes--size-5xl);
}

.tnc-pv-tablist {
	display: flex;
	gap: 4px;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto var(--_size-variables---global-sizes--size-5xl);
	padding: 4px;
	overflow-x: auto;
	border: 1px solid var(--color--stroke);
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	background-color: var(--color--white);
	scrollbar-width: none;
}

.tnc-pv-tablist::-webkit-scrollbar {
	display: none;
}

.tnc-pv-tab {
	flex: none;
	padding: 10px 20px;
	border: 0;
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	background-color: var(--color--transparent);
	font-family: var(--font-family--paragraph);
	font-size: 15px;
	font-weight: var(--font-weight--medium);
	line-height: 1.4;
	color: var(--color--text);
	white-space: nowrap;
	cursor: pointer;
	/* Colour only: the sliding pill draws the selected background. */
	transition: color 0.2s ease;
}

.tnc-pv-tab:hover {
	color: var(--color--black);
}

.tnc-pv-tab[aria-selected="true"] {
	background-color: var(--color--black);
	color: var(--color--white);
}

.tnc-pv-tab:focus:not(:focus-visible),
.tnc-pv-panel:focus:not(:focus-visible) {
	outline: none;
}

.tnc-pv-tab:focus-visible {
	outline: 2px solid var(--color--black);
	outline-offset: 2px;
}

/* Until theme.js runs, show only the first panel; without JS, show them all. */
html.w-mod-js .tnc-pv-tabs:not(.is-ready) .tnc-pv-panel ~ .tnc-pv-panel {
	display: none;
}

html:not(.w-mod-js) .tnc-pv-tablist {
	display: none;
}

.tnc-pv-method + .tnc-pv-method {
	margin-top: var(--_size-variables---global-sizes--size-5xl);
	padding-top: var(--_size-variables---global-sizes--size-5xl);
	border-top: 1px solid var(--color--icon-bg);
}

.tnc-pv-method-head {
	max-width: 720px;
	margin-bottom: var(--_size-variables---global-sizes--size-2xl);
}

h3.tnc-pv-method-title {
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: var(--font-weight--semi-bold);
	line-height: var(--line-height--s);
	letter-spacing: -0.025em;
	color: var(--color--black);
}

.tnc-pv-method-text {
	margin: var(--_size-variables---global-sizes--size-xs) 0 0;
	font-size: var(--_typography---text-medium--size);
	color: var(--color--text);
}

.tnc-pv-screens {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--_size-variables---global-sizes--size-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tnc-pv-figure {
	margin: 0;
}

.tnc-pv-shot {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: var(--_size-variables---global-sizes--size-s);
	overflow: hidden;
	border: 1px solid var(--color--stroke);
	background-color: var(--color--white);
	transition: border-color 0.25s ease;
}

.tnc-pv-shot:hover,
.tnc-pv-shot:focus-visible {
	border-color: var(--color--black);
}

.tnc-pv-shot-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform 0.5s ease;
}

.tnc-pv-shot:hover .tnc-pv-shot-img {
	transform: scale(1.03);
}

.tnc-pv-caption {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: var(--_size-variables---global-sizes--size-s);
	font-size: var(--_typography---text-small--size);
	font-weight: var(--font-weight--medium);
	color: var(--color--black);
}

.tnc-pv-caption-num {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--color--black);
	font-size: 11px;
	font-weight: var(--font-weight--semi-bold);
	color: var(--color--white);
}

@media screen and (max-width: 991px) {
	.tnc-pd-hero-grid,
	.tnc-pd-split {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--_size-variables---global-sizes--size-4xl);
	}

	.tnc-pd-help {
		padding: var(--_size-variables---global-sizes--size-3xl);
	}
}

@media screen and (max-width: 767px) {
	.tnc-pd-hero {
		padding-bottom: var(--_size-variables---global-sizes--size-6xl);
	}

	.tnc-pd-stat {
		padding: var(--_size-variables---global-sizes--size-l);
	}

	.tnc-pd-help {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--_size-variables---global-sizes--size-xxl) var(--_size-variables---global-sizes--size-l);
	}

	.tnc-pd-help-space {
		padding-bottom: var(--_size-variables---global-sizes--size-6xl);
	}

	.tnc-pv-tablist {
		margin-bottom: var(--_size-variables---global-sizes--size-3xl);
	}

	.tnc-pv-tab {
		padding: 8px 16px;
		font-size: var(--_typography---text-small--size);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tnc-pd-feature,
	.tnc-pd-feature-icon,
	.tnc-pv-tab,
	.tnc-pv-shot,
	.tnc-pv-shot-img {
		transition: none;
	}

	.tnc-pv-shot:hover .tnc-pv-shot-img {
		transform: none;
	}
}

/* Product illustrations (template-parts/product/art) */

.tnc-art {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* The hero drawing sits on a soft orange glow instead of the offset block. */
.tnc-pd-hero-media.is-art {
	padding: 0;
}

.tnc-pd-hero-media.is-art::before {
	inset: 6% 2% 2% 10%;
	background: radial-gradient(closest-side, rgba(255, 161, 111, 0.32), rgba(255, 161, 111, 0));
}

.tnc-pd-step-media.is-art {
	padding: var(--_size-variables---global-sizes--size-m) var(--_size-variables---global-sizes--size-s) var(--_size-variables---global-sizes--size-xs);
}

.tnc-pd-step-media.is-art .tnc-art {
	height: 100%;
}

/* The floating cards drift a few pixels, out of step with each other. */
.tnc-art-float {
	animation: tnc-art-float 6s ease-in-out infinite;
}

.tnc-art-float.is-delay-1 {
	animation-delay: -2s;
}

.tnc-art-float.is-delay-2 {
	animation-delay: -4s;
}

@keyframes tnc-art-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-6px);
	}
}

/* The install step's upload bar fills, pauses, and starts again. */
.tnc-art-progress {
	transform-box: fill-box;
	transform-origin: left center;
	animation: tnc-art-progress 3.6s ease-in-out infinite;
}

@keyframes tnc-art-progress {
	0% {
		transform: scaleX(0.12);
	}

	70%,
	100% {
		transform: scaleX(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tnc-art-float,
	.tnc-art-progress {
		animation: none;
	}
}

/* Preview: animated tab switching and the screenshot lightbox */

.tnc-pv-tablist {
	position: relative;
}

/* The pill under the selected tab; theme.js sizes and slides it. */
.tnc-pv-tab-indicator {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 0;
	width: 0;
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	background-color: var(--color--black);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.tnc-pv-tab-indicator.is-instant {
	transition: none;
}

.tnc-pv-tab {
	position: relative;
	z-index: 1;
}

/* Once the script runs, the sliding pill draws the selected state. */
.tnc-pv-tabs.is-ready .tnc-pv-tab-indicator {
	opacity: 1;
}

.tnc-pv-tabs.is-ready .tnc-pv-tab[aria-selected="true"] {
	background-color: var(--color--transparent);
}

/* The outgoing panel fades and drops away... */
.tnc-pv-panel.is-leaving {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

/* ...and the incoming one rises in, a section at a time. */
.tnc-pv-panel.is-entering .tnc-pv-method {
	animation: tnc-pv-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tnc-pv-panel.is-entering .tnc-pv-method:nth-child(2) {
	animation-delay: 0.07s;
}

.tnc-pv-panel.is-entering .tnc-pv-method:nth-child(3) {
	animation-delay: 0.14s;
}

.tnc-pv-panel.is-entering .tnc-pv-method:nth-child(n + 4) {
	animation-delay: 0.21s;
}

@keyframes tnc-pv-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Screenshots open in Webflow's lightbox; a zoom badge appears on hover. */
.tnc-pv-shot {
	position: relative;
	cursor: zoom-in;
}

.tnc-pv-zoom {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--color--black);
	color: var(--color--white);
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.tnc-pv-zoom-icon {
	width: 18px;
	height: 18px;
}

.tnc-pv-shot:hover .tnc-pv-zoom,
.tnc-pv-shot:focus-visible .tnc-pv-zoom {
	opacity: 1;
	transform: none;
}

/* Touch screens have no hover: keep the badge visible. */
@media (hover: none) {
	.tnc-pv-zoom {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tnc-pv-tab-indicator,
	.tnc-pv-panel.is-leaving,
	.tnc-pv-zoom {
		transition: none;
	}

	.tnc-pv-panel.is-entering .tnc-pv-method {
		animation: none;
	}
}

/*
 * Raster screenshots in a step card: fill the 4:3 box and letterbox inside it.
 * A flex item's min-height defaults to its content height, so without this an
 * <img> with large width/height attributes stretched the box well past 4:3.
 */
.tnc-pd-step-media {
	overflow: hidden;
}

.tnc-pd-step-media > .tnc-pd-step-img {
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
}

.tnc-pd-step-media.is-art > .tnc-art {
	width: 100%;
	max-height: 100%;
}

/* -------------------------------------------------------------------------
 * 31. Addon template (Addon Landing)
 *
 * Reuses the product template's hero, step cards, FAQ and help band. What is
 * new: the jump links, the demo blocks, and a brand pass over the Display
 * addon's shortcode output — its purple, Nunito and rounded, shadowed cards
 * become black, Inter / Archivo and hairline-stroked squares. Every override
 * is scoped to .tnc-ad-stage, so the plugin's own pages are untouched.
 * ---------------------------------------------------------------------- */

/* The plugin's stylesheet sets body { background: #FBFBFF } on every page. */
body.page-template-page-templates-template-addon {
	background-color: var(--color--background-01);
}

/* How it works: link buttons under the step text */

.tnc-ad-req .tnc-pd-step-body {
	padding: var(--_size-variables---global-sizes--size-3xl);
}

.tnc-ad-req-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--_size-variables---global-sizes--size-xs);
	margin: auto 0 0;
	padding: var(--_size-variables---global-sizes--size-s) 0 0;
	list-style: none;
}

.tnc-ad-req-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid var(--color--black);
	font-size: 15px;
	font-weight: var(--font-weight--semi-bold);
	line-height: 1.2;
	color: var(--color--black);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.tnc-ad-req-link:hover,
.tnc-ad-req-link:focus-visible {
	background-color: var(--color--black);
	color: var(--color--white);
}

.tnc-ad-arrow {
	width: 14px;
	height: 14px;
	flex: none;
	transition: transform 0.25s ease;
}

.tnc-ad-req-link:hover .tnc-ad-arrow {
	transform: translate(2px, -2px);
}

/* Demos */

.tnc-ad-demos-section {
	background-color: var(--color--white);
	border-top: 1px solid var(--color--stroke);
	border-bottom: 1px solid var(--color--stroke);
}

.tnc-ad-jump {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--_size-variables---global-sizes--size-xs);
	margin: calc(var(--_size-variables---global-sizes--size-xxl) * -1) 0 var(--_size-variables---global-sizes--size-5xl);
}

/* Without a section heading above, the links open the section. */
.tnc-ad-jump:first-child {
	margin-top: 0;
}

.tnc-ad-jump-link {
	padding: 8px 20px;
	border: 1px solid var(--color--stroke);
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	background-color: var(--color--white);
	font-size: 15px;
	font-weight: var(--font-weight--semi-bold);
	color: var(--color--black);
	text-decoration: none;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.tnc-ad-jump-link:hover,
.tnc-ad-jump-link:focus-visible {
	border-color: var(--color--black);
	background-color: var(--color--primary);
}

.tnc-ad-demos {
	display: flex;
	flex-direction: column;
	gap: var(--_size-variables---global-sizes--size-10xl);
}

.tnc-ad-demo {
	display: flex;
	flex-direction: column;
	gap: var(--_size-variables---global-sizes--size-l);
	/* Keep the heading clear of the sticky navigation after a jump. */
	scroll-margin-top: 120px;
}

.tnc-ad-demo-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--_size-variables---global-sizes--size-s);
	max-width: 640px;
	margin-bottom: var(--_size-variables---global-sizes--size-s);
}

h3.tnc-ad-demo-title {
	font-size: clamp(28px, 3vw, 40px);
	font-weight: var(--font-weight--bold);
	line-height: var(--line-height--xs);
	letter-spacing: -0.03em;
	color: var(--color--black);
}

.tnc-ad-demo-text {
	margin: 0;
	font-size: 17px;
	color: var(--color--text);
}

.tnc-ad-stage {
	margin: 0;
	border: 1px solid var(--color--stroke);
	background-color: var(--color--background-02);
}

.tnc-ad-stage-label {
	padding: 12px var(--_size-variables---global-sizes--size-l);
	border-bottom: 1px solid var(--color--stroke);
	font-size: 12px;
	font-weight: var(--font-weight--semi-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color--text);
}

.tnc-ad-stage-body {
	padding: clamp(20px, 4vw, var(--_size-variables---global-sizes--size-5xl));
}

.tnc-ad-code {
	display: flex;
	align-items: baseline;
	gap: var(--_size-variables---global-sizes--size-s);
	padding: 12px var(--_size-variables---global-sizes--size-l);
	border-top: 1px solid var(--color--stroke);
	background-color: var(--color--white);
	overflow-x: auto;
}

.tnc-ad-code-label {
	flex: none;
	font-size: 12px;
	font-weight: var(--font-weight--semi-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color--text);
}

.tnc-ad-code code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: 1.6;
	color: var(--color--black);
	white-space: nowrap;
}

/* Shortcode output: type */

.tnc-ad-stage [class*="dspdfvfw-"],
.tnc-ad-stage [class*="dspdfvfw-"] h2,
.tnc-ad-stage [class*="dspdfvfw-"] h4,
.tnc-ad-stage [class*="dspdfvfw-"] label,
.tnc-ad-stage [class*="dspdfvfw-"] input,
.tnc-ad-stage [class*="dspdfvfw-"] select {
	font-family: var(--font-family--paragraph);
}

/* Bookshelves: a touch more lift on hover */

.tnc-ad-stage .pdfviewer-fancy-book img {
	box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.25);
}

.tnc-ad-stage .pdfviewer-fancy-book:hover {
	transform: translateY(-6px);
}

/* Grid: sidebar */

.tnc-ad-stage .dspdfvfw-wrapper {
	padding-top: 0;
}

.tnc-ad-stage .dspdfvfw-cat-title h4 {
	padding: 12px 16px;
	background: var(--color--black);
	font-family: var(--font-family--heading);
	font-size: 18px;
	font-weight: var(--font-weight--semi-bold);
	line-height: 1.3;
	text-align: left;
	color: var(--color--white);
}

.tnc-ad-stage ul.dspdfvfw-cat-lists {
	margin: 0;
	border: 1px solid var(--color--stroke);
	border-top: 0;
	background-color: var(--color--white);
}

.tnc-ad-stage ul.dspdfvfw-cat-lists li,
.tnc-ad-stage ul.dspdfvfw-cat-lists li:hover {
	padding: 4px 16px;
	border-bottom-color: var(--color--stroke);
	transition: background-color 0.2s ease;
}

.tnc-ad-stage ul.dspdfvfw-cat-lists li:last-child {
	border-bottom: 0;
}

.tnc-ad-stage ul.dspdfvfw-cat-lists li:hover {
	background-color: var(--color--background-01);
}

.tnc-ad-stage .dspdfvfw-product-cat-item label,
.tnc-ad-stage ul.dspdfvfw-cat-lists li a {
	font-size: 15px;
	font-weight: var(--font-weight--medium);
	color: var(--color--black);
}

.tnc-ad-stage .dspdfvfw-product-cat-item [type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--color--black);
}

/* Grid: search and sort */

.tnc-ad-stage .dspdfvfw-ajax-search-form {
	height: 48px;
	border: 1px solid var(--color--stroke);
	border-radius: 0;
	background: var(--color--white);
}

.tnc-ad-stage .dspdfvfw-ajax-search-form:focus-within {
	border-color: var(--color--black);
}

.tnc-ad-stage .dspdfvfw-select-area,
.tnc-ad-stage .dspdfvfw-search-text {
	font-size: 15px;
	color: var(--color--black);
}

.tnc-ad-stage .dspdfvfw-sort-options {
	height: 48px;
	padding: 0 12px;
	border: 1px solid var(--color--stroke);
	border-radius: 0;
	background-color: var(--color--white);
	font-size: 15px;
	color: var(--color--black);
}

/* Grid: cards */

.tnc-ad-stage .dspdfvfw-grid-col {
	padding: 12px;
	border: 1px solid var(--color--stroke);
	background: var(--color--white);
	transition: border-color 0.25s ease;
}

.tnc-ad-stage .dspdfvfw-grid-col:hover {
	border-color: var(--color--black);
}

.tnc-ad-stage .dspdfvfw-content h2 {
	padding-top: 12px;
	font-family: var(--font-family--heading);
	font-size: 16px;
	font-weight: var(--font-weight--semi-bold);
	line-height: 1.4;
	color: var(--color--black);
}

/* List */

.tnc-ad-stage .dspdfvfw-list-col {
	align-items: center;
	margin-top: var(--_size-variables---global-sizes--size-s);
	padding: var(--_size-variables---global-sizes--size-l);
	border: 1px solid var(--color--stroke);
	background: var(--color--white);
	transition: border-color 0.25s ease;
}

.tnc-ad-stage .dspdfvfw-list-col:first-child {
	margin-top: 0;
}

.tnc-ad-stage .dspdfvfw-list-col:hover {
	border-color: var(--color--black);
}

.tnc-ad-stage .dspdfvfw-list-featured {
	max-width: 120px;
}

.tnc-ad-stage .dspdfvfw-list-titile h2,
.tnc-ad-stage .dspdfvfw-list-titile a h2 {
	margin: 0 0 var(--_size-variables---global-sizes--size-s);
	font-family: var(--font-family--heading);
	font-size: 22px;
	font-weight: var(--font-weight--semi-bold);
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--color--black);
}

.tnc-ad-stage .dspdfvfw-list-read a {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid var(--color--black);
	border-radius: 0;
	background: var(--color--black);
	font-size: 15px;
	font-weight: var(--font-weight--semi-bold);
	color: var(--color--white);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.tnc-ad-stage .dspdfvfw-list-read a:hover,
.tnc-ad-stage .dspdfvfw-list-read a:focus-visible {
	background: var(--color--primary);
	color: var(--color--black);
}

/* Pagination */

.tnc-ad-stage .dspdfvfw-main-pagination,
.tnc-ad-stage .dspdfvfw-ajax-pagination {
	gap: 8px;
	margin: var(--_size-variables---global-sizes--size-xxl) 0 0;
}

.tnc-ad-stage .dspdfvfw-main-pagination .page-numbers,
.tnc-ad-stage .dspdfvfw-ajax-pagination .page-numbers {
	margin: 0;
	padding: 10px 16px;
	border: 1px solid var(--color--stroke);
	border-radius: 0;
	background: var(--color--white);
	box-shadow: none;
	font-size: 15px;
	font-weight: var(--font-weight--semi-bold);
	line-height: 1.2;
	color: var(--color--black);
}

.tnc-ad-stage .dspdfvfw-main-pagination .page-numbers.current,
.tnc-ad-stage .dspdfvfw-ajax-pagination .page-numbers.current,
.tnc-ad-stage .dspdfvfw-main-pagination a.page-numbers:hover,
.tnc-ad-stage .dspdfvfw-ajax-pagination a.page-numbers:hover {
	border-color: var(--color--black);
	background: var(--color--black);
	color: var(--color--white);
}

@media screen and (max-width: 767px) {
	.tnc-ad-req .tnc-pd-step-body {
		padding: var(--_size-variables---global-sizes--size-xxl) var(--_size-variables---global-sizes--size-l);
	}

	.tnc-ad-jump {
		margin-bottom: var(--_size-variables---global-sizes--size-3xl);
	}

	.tnc-ad-demos {
		gap: var(--_size-variables---global-sizes--size-6xl);
	}

	.tnc-ad-stage .dspdfvfw-list-col {
		align-items: stretch;
	}

	.tnc-ad-stage .dspdfvfw-list-featured {
		max-width: 160px;
	}

	.tnc-ad-stage .dspdfvfw-list-content {
		padding-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tnc-ad-req-link,
	.tnc-ad-arrow,
	.tnc-ad-jump-link,
	.tnc-ad-stage .pdfviewer-fancy-book,
	.tnc-ad-stage .dspdfvfw-grid-col,
	.tnc-ad-stage .dspdfvfw-list-col,
	.tnc-ad-stage .dspdfvfw-list-read a {
		transition: none;
	}

	.tnc-ad-req-link:hover .tnc-ad-arrow,
	.tnc-ad-stage .pdfviewer-fancy-book:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * 32. Addon Sales template
 *
 * Features, how to use, video, pricing and the two-button help band. Built
 * from the same parts as section 30–31: hairline-stroked white cards on the
 * light page, black as the strong colour, orange as the single accent.
 * ---------------------------------------------------------------------- */

/* Step cards: one row of two to four on desktop. */
@media screen and (min-width: 992px) {
	.tnc-ad-req.is-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tnc-ad-req.is-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tnc-ad-req.is-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.tnc-ad-req.is-cols-4 .tnc-pd-step-body {
		padding: var(--_size-variables---global-sizes--size-xxl);
	}
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	.tnc-ad-req.is-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Features */

.tnc-ad-features-media {
	display: flex;
	justify-content: center;
	margin-bottom: var(--_size-variables---global-sizes--size-3xl);
}

.tnc-ad-features-img {
	width: auto;
	max-width: min(100%, 420px);
	height: auto;
}

.tnc-ad-features .tnc-pd-feature {
	flex-direction: row;
	align-items: center;
	gap: var(--_size-variables---global-sizes--size-m);
	padding: var(--_size-variables---global-sizes--size-xl);
}

.tnc-ad-features .tnc-pd-feature-icon {
	flex: none;
	margin-bottom: 0;
}

.tnc-ad-features .tnc-pd-feature:hover .tnc-pd-feature-icon {
	background-color: var(--color--primary);
}

.tnc-ad-features h3.tnc-pd-feature-title {
	font-size: 18px;
}

/* A feature with a description stacks again. */
.tnc-ad-features .tnc-pd-feature:has(.tnc-pd-feature-text) {
	flex-direction: column;
	align-items: flex-start;
}

/* Video */

.tnc-ad-video-section {
	background-color: var(--color--white);
	border-top: 1px solid var(--color--stroke);
	border-bottom: 1px solid var(--color--stroke);
}

.tnc-ad-video {
	max-width: 960px;
	margin: 0 auto;
}

/* Pricing */

.tnc-ad-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--_size-variables---global-sizes--size-l);
	max-width: 1080px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.tnc-ad-plans.is-cols-1 {
	max-width: 400px;
}

.tnc-ad-plan {
	display: flex;
	flex-direction: column;
	padding: var(--_size-variables---global-sizes--size-3xl) var(--_size-variables---global-sizes--size-xxl);
	border: 1px solid var(--color--stroke);
	background-color: var(--color--white);
	color: var(--color--black);
	transition: border-color 0.25s ease;
}

.tnc-ad-plan:hover {
	border-color: var(--color--black);
}

.tnc-ad-plan.is-featured {
	border-color: var(--color--black);
	background-color: var(--color--black);
	color: var(--color--white);
}

.tnc-ad-plan-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--_size-variables---global-sizes--size-xs);
}

h3.tnc-ad-plan-name {
	font-size: 18px;
	font-weight: var(--font-weight--semi-bold);
	line-height: var(--line-height--m);
	letter-spacing: -0.01em;
	color: inherit;
}

.tnc-ad-plan-badge {
	padding: 2px 10px;
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	background-color: var(--color--primary);
	font-size: 12px;
	font-weight: var(--font-weight--bold);
	letter-spacing: 0.04em;
	color: var(--color--black);
}

.tnc-ad-plan-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
	margin: var(--_size-variables---global-sizes--size-l) 0 0;
	padding-bottom: var(--_size-variables---global-sizes--size-xxl);
	border-bottom: 1px solid var(--color--stroke);
}

.tnc-ad-plan.is-featured .tnc-ad-plan-price {
	border-bottom-color: rgba(255, 255, 255, 0.16);
}

.tnc-ad-plan-amount {
	font-family: var(--font-family--heading);
	font-size: clamp(44px, 5vw, 56px);
	font-weight: var(--font-weight--bold);
	line-height: 1;
	letter-spacing: -0.04em;
}

.tnc-ad-plan-regular {
	font-family: var(--font-family--heading);
	font-size: 22px;
	font-weight: var(--font-weight--medium);
	color: var(--color--text);
}

.tnc-ad-plan.is-featured .tnc-ad-plan-regular,
.tnc-ad-plan.is-featured .tnc-ad-plan-period {
	color: rgba(255, 255, 255, 0.6);
}

.tnc-ad-plan-period {
	font-size: 15px;
	color: var(--color--text);
}

.tnc-ad-plan-list {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	margin: var(--_size-variables---global-sizes--size-xxl) 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
	line-height: 1.4;
}

.tnc-ad-plan-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.tnc-ad-check {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	padding: 2px;
	border-radius: 50%;
	background-color: var(--color--background-01);
	color: var(--color--black);
}

.tnc-ad-plan.is-featured .tnc-ad-check {
	background-color: var(--color--primary);
}

.tnc-ad-plan-btn {
	display: block;
	padding: 14px 20px;
	border: 1px solid var(--color--black);
	background-color: var(--color--black);
	font-size: 16px;
	font-weight: var(--font-weight--semi-bold);
	line-height: 1.2;
	text-align: center;
	color: var(--color--white);
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.tnc-ad-plan-btn:hover,
.tnc-ad-plan-btn:focus-visible {
	border-color: var(--color--primary);
	background-color: var(--color--primary);
	color: var(--color--black);
}

.tnc-ad-plan.is-featured .tnc-ad-plan-btn {
	border-color: var(--color--primary);
	background-color: var(--color--primary);
	color: var(--color--black);
}

.tnc-ad-plan.is-featured .tnc-ad-plan-btn:hover,
.tnc-ad-plan.is-featured .tnc-ad-plan-btn:focus-visible {
	border-color: var(--color--white);
	background-color: var(--color--white);
}

.tnc-ad-plans-note {
	margin: var(--_size-variables---global-sizes--size-l) 0 0;
	font-size: 15px;
	text-align: center;
	color: var(--color--text);
}

/* Help band: room for a second button */

.tnc-pd-help-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--_size-variables---global-sizes--size-s);
}

@media screen and (max-width: 767px) {
	.tnc-ad-plan {
		padding: var(--_size-variables---global-sizes--size-xxl) var(--_size-variables---global-sizes--size-l);
	}

	.tnc-ad-features .tnc-pd-feature {
		padding: var(--_size-variables---global-sizes--size-l);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tnc-ad-plan,
	.tnc-ad-plan-btn {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 33. Free Items template
 *
 * Two columns of white cards on the light page: the product image on a soft
 * panel, a type label and a "Free" pill, then the name, the description and
 * a black and an outlined button pinned to the bottom.
 * ---------------------------------------------------------------------- */

.tnc-fi-section .section-space {
	padding-top: 0;
}

.tnc-fi-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--_size-variables---global-sizes--size-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tnc-fi-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color--stroke);
	background-color: var(--color--white);
	transition: border-color 0.25s ease;
}

.tnc-fi-card:hover {
	border-color: var(--color--black);
}

.tnc-fi-media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	padding: var(--_size-variables---global-sizes--size-xl);
	overflow: hidden;
	border-bottom: 1px solid var(--color--stroke);
	background-color: var(--color--background-02);
}

.tnc-fi-img {
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	object-fit: contain;
	transition: transform 0.4s ease;
}

.tnc-fi-card:hover .tnc-fi-img {
	transform: scale(1.03);
}

.tnc-fi-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--_size-variables---global-sizes--size-3xl);
}

.tnc-fi-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--_size-variables---global-sizes--size-s);
}

.tnc-fi-tag {
	font-size: 12px;
	font-weight: var(--font-weight--semi-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color--text);
}

.tnc-fi-free {
	padding: 2px 10px;
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	background-color: var(--color--primary);
	font-size: 12px;
	font-weight: var(--font-weight--bold);
	letter-spacing: 0.04em;
	color: var(--color--black);
}

h2.tnc-fi-title {
	font-size: clamp(24px, 2.4vw, 30px);
	font-weight: var(--font-weight--bold);
	line-height: var(--line-height--xs);
	letter-spacing: -0.03em;
	color: var(--color--black);
}

.tnc-fi-text {
	margin: var(--_size-variables---global-sizes--size-s) 0 0;
	font-size: 16px;
	line-height: var(--line-height--xxl);
	color: var(--color--text);
}

.tnc-fi-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--_size-variables---global-sizes--size-xs);
	margin-top: auto;
	padding-top: var(--_size-variables---global-sizes--size-xxl);
}

.tnc-fi-btn {
	padding: 12px 20px;
	border: 1px solid var(--color--black);
	background-color: transparent;
	font-size: 15px;
	font-weight: var(--font-weight--semi-bold);
	line-height: 1.2;
	color: var(--color--black);
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.tnc-fi-btn:hover,
.tnc-fi-btn:focus-visible {
	background-color: var(--color--black);
	color: var(--color--white);
}

.tnc-fi-btn.is-primary {
	background-color: var(--color--black);
	color: var(--color--white);
}

.tnc-fi-btn.is-primary:hover,
.tnc-fi-btn.is-primary:focus-visible {
	border-color: var(--color--primary);
	background-color: var(--color--primary);
	color: var(--color--black);
}

@media screen and (max-width: 767px) {
	.tnc-fi-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.tnc-fi-body {
		padding: var(--_size-variables---global-sizes--size-xxl) var(--_size-variables---global-sizes--size-l);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tnc-fi-card,
	.tnc-fi-img,
	.tnc-fi-btn {
		transition: none;
	}

	.tnc-fi-card:hover .tnc-fi-img {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * 34. Viewer Demo template
 *
 * The live viewer in the Display addon's demo panel (section 31), kept flush
 * so the embed gets the full width, with the note and the "more demos" pills
 * centred underneath.
 * ---------------------------------------------------------------------- */

.tnc-vd-section .section-space {
	padding-top: 0;
}

.tnc-vd-stage {
	background-color: var(--color--white);
}

.tnc-ad-stage-body.tnc-vd-stage-body {
	padding: clamp(8px, 1.5vw, 16px);
}

.tnc-vd-stage-body iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
}

.tnc-vd-note {
	max-width: 720px;
	margin: var(--_size-variables---global-sizes--size-xxl) auto 0;
	font-size: 16px;
	text-align: center;
	color: var(--color--text);
}

.tnc-vd-note a {
	color: var(--color--black);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tnc-vd-more {
	margin-top: var(--_size-variables---global-sizes--size-5xl);
	text-align: center;
}

h2.tnc-vd-more-title {
	margin-bottom: var(--_size-variables---global-sizes--size-l);
	font-size: 22px;
	font-weight: var(--font-weight--semi-bold);
	line-height: var(--line-height--m);
	letter-spacing: -0.02em;
	color: var(--color--black);
}

.tnc-ad-jump.tnc-vd-more-links {
	margin: 0;
}

/* A tall embed would fill a phone screen; cap it below the fold. */
@media screen and (max-width: 767px) {
	.tnc-vd-stage-body iframe {
		height: min(75vh, 600px);
	}
}

/* -------------------------------------------------------------------------
 * 35. Addon Live Preview template
 *
 * Adds to the viewer demo (section 34): a heading above the viewer, a callout
 * box for demo login details, and a centred button row under the viewer.
 * The restriction types reuse the Product Preview tabs (section 30).
 * ---------------------------------------------------------------------- */

/* With its own heading the demo is a regular section, not a hero follow-on. */
.tnc-vd-section.has-head {
	border-top: 1px solid var(--color--stroke);
	background-color: var(--color--white);
}

.tnc-vd-section.has-head .section-space {
	padding-top: var(--global-variables--section-space);
}

.tnc-vd-callout {
	max-width: 560px;
	margin: 0 auto var(--_size-variables---global-sizes--size-3xl);
	padding: var(--_size-variables---global-sizes--size-xl) var(--_size-variables---global-sizes--size-xxl);
	border: 1px solid var(--color--black);
	border-left-width: 4px;
	background-color: var(--color--background-02);
	font-size: 16px;
	line-height: var(--line-height--xxl);
	text-align: center;
	color: var(--color--black);
}

.tnc-vd-callout p {
	margin: 0;
}

.tnc-vd-callout p + p {
	margin-top: var(--_size-variables---global-sizes--size-s);
}

.tnc-vd-callout a {
	font-weight: var(--font-weight--semi-bold);
	color: var(--color--black);
	text-decoration: underline;
	text-decoration-color: var(--color--primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.tnc-vd-callout strong {
	font-weight: var(--font-weight--semi-bold);
}

.tnc-vd-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--_size-variables---global-sizes--size-s);
	margin-top: var(--_size-variables---global-sizes--size-xxl);
}

@media screen and (max-width: 767px) {
	.tnc-vd-callout {
		padding: var(--_size-variables---global-sizes--size-l);
	}
}

/* -------------------------------------------------------------------------
 * 36. Product Profiles template
 *
 * One white block per product: name, blurb and button on the left, a grid of
 * link tiles on the right. Tiles carry a line icon, or a black letter badge
 * for brands the icon set does not draw, so every row reads the same.
 * ---------------------------------------------------------------------- */

.tnc-pf-section .section-space {
	padding-top: 0;
}

.tnc-pf-jump {
	margin-top: 0;
}

.tnc-pf-groups {
	display: flex;
	flex-direction: column;
	gap: var(--_size-variables---global-sizes--size-l);
}

.tnc-pf-group {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: var(--_size-variables---global-sizes--size-4xl);
	padding: var(--_size-variables---global-sizes--size-4xl);
	border: 1px solid var(--color--stroke);
	background-color: var(--color--white);
	scroll-margin-top: 120px;
}

.tnc-pf-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

h2.tnc-pf-title {
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: var(--font-weight--bold);
	line-height: var(--line-height--xs);
	letter-spacing: -0.03em;
	color: var(--color--black);
}

.tnc-pf-text {
	margin: var(--_size-variables---global-sizes--size-s) 0 0;
	font-size: 16px;
	line-height: var(--line-height--xxl);
	color: var(--color--text);
}

.tnc-pf-btn {
	margin-top: var(--_size-variables---global-sizes--size-xl);
}

.tnc-pf-links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	align-content: start;
	gap: var(--_size-variables---global-sizes--size-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tnc-pf-link {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 10px 14px 10px 10px;
	border: 1px solid var(--color--stroke);
	background-color: var(--color--white);
	font-size: 15px;
	font-weight: var(--font-weight--semi-bold);
	line-height: 1.3;
	color: var(--color--black);
	text-decoration: none;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.tnc-pf-link:hover,
.tnc-pf-link:focus-visible {
	border-color: var(--color--black);
	background-color: var(--color--background-02);
}

.tnc-pf-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background-color: var(--color--background-01);
	color: var(--color--black);
	transition: background-color 0.25s ease;
}

.tnc-pf-icon .tnc-pd-icon {
	width: 18px;
	height: 18px;
}

.tnc-pf-icon.is-letter {
	background-color: var(--color--black);
	font-family: var(--font-family--heading);
	font-size: 15px;
	font-weight: var(--font-weight--bold);
	color: var(--color--white);
}

.tnc-pf-link:hover .tnc-pf-icon:not(.is-letter) {
	background-color: var(--color--primary);
}

.tnc-pf-label {
	flex: 1;
	min-width: 0;
}

.tnc-pf-arrow {
	color: var(--color--text);
	opacity: 0;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.tnc-pf-link:hover .tnc-pf-arrow,
.tnc-pf-link:focus-visible .tnc-pf-arrow {
	opacity: 1;
	transform: translate(2px, -2px);
}

@media screen and (max-width: 991px) {
	.tnc-pf-group {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--_size-variables---global-sizes--size-xxl);
		padding: var(--_size-variables---global-sizes--size-3xl);
	}
}

@media screen and (max-width: 767px) {
	.tnc-pf-group {
		padding: var(--_size-variables---global-sizes--size-xxl) var(--_size-variables---global-sizes--size-l);
	}

	.tnc-pf-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Touch screens have no hover: keep the arrow visible. */
	.tnc-pf-arrow {
		opacity: 1;
	}
}

@media screen and (max-width: 420px) {
	.tnc-pf-links {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tnc-pf-link,
	.tnc-pf-icon,
	.tnc-pf-arrow {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 37. Product Landing: text-only steps (QuoteX)
 *
 * Steps without a picture are single sentences, so they sit four to a row as
 * compact numbered cards instead of three tall ones.
 * ---------------------------------------------------------------------- */

.tnc-pd-steps.is-text {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: var(--_size-variables---global-sizes--size-s);
}

.tnc-pd-steps.is-text .tnc-pd-step-body {
	padding: var(--_size-variables---global-sizes--size-xl);
}

.tnc-pd-steps.is-text h3.tnc-pd-step-title {
	font-size: 17px;
	font-weight: var(--font-weight--medium);
	line-height: 1.45;
	letter-spacing: -0.01em;
}

@media screen and (min-width: 992px) {
	.tnc-pd-steps.is-text {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * 38. Services template
 *
 * One row per service: a built-in drawing (template-parts/product/art) on a
 * soft panel beside the copy and a two-column checklist. Rows alternate
 * sides and are divided by a hairline.
 * ---------------------------------------------------------------------- */

.tnc-sv-section {
	border-top: 1px solid var(--color--stroke);
	background-color: var(--color--white);
}

.tnc-sv-list {
	display: flex;
	flex-direction: column;
}

.tnc-sv-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--_size-variables---global-sizes--size-6xl);
	align-items: center;
	padding: var(--_size-variables---global-sizes--size-6xl) 0;
}

.tnc-sv-row:first-child {
	padding-top: 0;
}

.tnc-sv-row:last-child {
	padding-bottom: 0;
}

.tnc-sv-row + .tnc-sv-row {
	border-top: 1px solid var(--color--stroke);
}

.tnc-sv-row.is-reversed .tnc-sv-media {
	order: 2;
}

.tnc-sv-row.is-text {
	grid-template-columns: minmax(0, 1fr);
}

.tnc-sv-media {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--_size-variables---global-sizes--size-xl);
	background-color: var(--color--background-02);
	border: 1px solid var(--color--stroke);
}

/* A soft orange glow behind the drawing, as on the product hero. */
.tnc-sv-media::before {
	content: "";
	position: absolute;
	inset: 10%;
	z-index: -1;
	background: radial-gradient(closest-side, rgba(255, 161, 111, 0.28), rgba(255, 161, 111, 0));
}

.tnc-sv-media .tnc-art {
	max-width: 520px;
}

.tnc-sv-img {
	display: block;
	width: 100%;
	height: auto;
}

.tnc-sv-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--_size-variables---global-sizes--size-s);
}

h2.tnc-sv-title {
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: var(--font-weight--bold);
	line-height: var(--line-height--xs);
	letter-spacing: -0.03em;
	color: var(--color--black);
}

.tnc-sv-text {
	margin: 0;
	font-size: 17px;
	color: var(--color--text);
}

.tnc-sv-items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px var(--_size-variables---global-sizes--size-l);
	width: 100%;
	margin: var(--_size-variables---global-sizes--size-s) 0 var(--_size-variables---global-sizes--size-l);
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: var(--font-weight--medium);
	line-height: 1.4;
	color: var(--color--black);
}

.tnc-sv-items li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.tnc-sv-items li:hover .tnc-ad-check {
	background-color: var(--color--primary);
}

@media screen and (max-width: 991px) {
	.tnc-sv-row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--_size-variables---global-sizes--size-3xl);
		padding: var(--_size-variables---global-sizes--size-5xl) 0;
	}

	/* Copy first, then the drawing, on every row. */
	.tnc-sv-row .tnc-sv-media,
	.tnc-sv-row.is-reversed .tnc-sv-media {
		order: 2;
	}
}

@media screen and (max-width: 479px) {
	.tnc-sv-items {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * 39. Viewer gallery (Product Live Preview)
 *
 * Image cards that open a viewer: the picture on a soft panel, then an
 * optional title and "Preview" label. Two to four to a row; hairline cards
 * that turn black-edged on hover, like the rest of the site.
 * ---------------------------------------------------------------------- */

.tnc-vg-section {
	border-top: 1px solid var(--color--stroke);
}

.tnc-vg-grid {
	display: grid;
	gap: var(--_size-variables---global-sizes--size-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tnc-vg-grid.is-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 960px;
	margin: 0 auto;
}

.tnc-vg-grid.is-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tnc-vg-grid.is-cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tnc-vg-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--color--stroke);
	background-color: var(--color--white);
	color: var(--color--black);
	text-decoration: none;
	transition: border-color 0.25s ease;
}

a.tnc-vg-card:hover,
a.tnc-vg-card:focus-visible {
	border-color: var(--color--black);
}

.tnc-vg-media {
	display: block;
	overflow: hidden;
	background-color: var(--color--background-02);
}

.tnc-vg-img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.4s ease;
}

a.tnc-vg-card:hover .tnc-vg-img {
	transform: scale(1.03);
}

.tnc-vg-body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px var(--_size-variables---global-sizes--size-s);
	padding: var(--_size-variables---global-sizes--size-l) var(--_size-variables---global-sizes--size-xl);
	border-top: 1px solid var(--color--stroke);
}

.tnc-vg-title {
	font-family: var(--font-family--heading);
	font-size: 20px;
	font-weight: var(--font-weight--semi-bold);
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.tnc-vg-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: var(--font-weight--semi-bold);
}

a.tnc-vg-card:hover .tnc-ad-arrow {
	transform: translate(2px, -2px);
}

@media screen and (max-width: 991px) {
	.tnc-vg-grid.is-cols-3,
	.tnc-vg-grid.is-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 479px) {
	.tnc-vg-grid.is-cols-2,
	.tnc-vg-grid.is-cols-3,
	.tnc-vg-grid.is-cols-4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tnc-vg-card,
	.tnc-vg-img {
		transition: none;
	}

	a.tnc-vg-card:hover .tnc-vg-img {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * 40. Product Live Preview page
 *
 * Scoped to body.tnc-pl-page, so the shared hero, viewer, gallery and feature
 * parts keep their look on other templates. A tighter hero with pill links to
 * each section, viewers framed like a browser window with a "live" dot, and
 * the long feature list as one hairline grid instead of 28 separate cards.
 * ---------------------------------------------------------------------- */

.tnc-pl-page .tnc-pd-hero {
	padding-bottom: var(--_size-variables---global-sizes--size-3xl);
}

.tnc-pl-page .tnc-pd-tagline {
	color: var(--color--text);
}

.tnc-pl-jump-wrap {
	padding-bottom: var(--_size-variables---global-sizes--size-5xl);
}

.tnc-pl-jump {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--_size-variables---global-sizes--size-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Section links land below the sticky header, not under it. */
.tnc-pl-page #bookshelf,
.tnc-pl-page #listen,
.tnc-pl-page #pdf-viewer,
.tnc-pl-page #features {
	scroll-margin-top: 96px;
}

/* Viewer: a browser-style frame with a soft lift. */
.tnc-pl-page .tnc-vd-stage {
	overflow: hidden;
	border-color: var(--color--stroke);
	box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.25);
}

.tnc-pl-page .tnc-vd-stage .tnc-ad-stage-label {
	display: flex;
	align-items: center;
	gap: 10px;
	background-color: var(--color--background-01);
	color: var(--color--black);
}

.tnc-pl-page .tnc-vd-stage .tnc-ad-stage-label::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--color--primary);
	box-shadow: 0 0 0 4px rgba(255, 161, 111, 0.25);
}

.tnc-pl-page .tnc-ad-stage-body.tnc-vd-stage-body {
	padding: 0;
}

/* Gallery cards: title and "Preview" on one quiet row. */
.tnc-pl-page .tnc-vg-body {
	padding: var(--_size-variables---global-sizes--size-m) var(--_size-variables---global-sizes--size-l);
}

.tnc-pl-page .tnc-vg-title {
	font-size: 17px;
}

.tnc-pl-page a.tnc-vg-card:hover .tnc-vg-label,
.tnc-pl-page a.tnc-vg-card:focus-visible .tnc-vg-label {
	color: var(--color--black);
	text-decoration: underline;
	text-decoration-color: var(--color--primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Features: one grid of hairline cells. The outer edge is drawn by the list
 * (top, left) and each cell (right, bottom), so a short last row stays clean. */
.tnc-pl-page .tnc-ad-features {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--color--stroke);
	border-left: 1px solid var(--color--stroke);
	background-color: var(--color--white);
}

.tnc-pl-page .tnc-ad-features .tnc-pd-feature,
.tnc-pl-page .tnc-ad-features .tnc-pd-feature:has(.tnc-pd-feature-text) {
	padding: var(--_size-variables---global-sizes--size-xxl);
	border: 0;
	border-right: 1px solid var(--color--stroke);
	border-bottom: 1px solid var(--color--stroke);
	transition: background-color 0.25s ease;
}

.tnc-pl-page .tnc-ad-features .tnc-pd-feature:hover {
	background-color: var(--color--background-02);
}

.tnc-pl-page .tnc-ad-features .tnc-pd-feature-icon {
	width: 40px;
	height: 40px;
	margin-bottom: var(--_size-variables---global-sizes--size-xs);
}

.tnc-pl-page .tnc-ad-features h3.tnc-pd-feature-title {
	font-size: 17px;
}

@media screen and (max-width: 991px) {
	.tnc-pl-page .tnc-ad-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 767px) {
	.tnc-pl-jump-wrap {
		padding-bottom: var(--_size-variables---global-sizes--size-3xl);
	}

	.tnc-pl-page .tnc-ad-features {
		grid-template-columns: minmax(0, 1fr);
	}

	.tnc-pl-page .tnc-ad-features .tnc-pd-feature,
	.tnc-pl-page .tnc-ad-features .tnc-pd-feature:has(.tnc-pd-feature-text) {
		padding: var(--_size-variables---global-sizes--size-l);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tnc-pl-page .tnc-ad-features .tnc-pd-feature {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 41. Product cards and feedback form (TNC FlipBook landing)
 *
 * product/cards: hairline cards in three styles. "media" puts a picture or
 * video on a soft panel over a line icon, title, text and an arrow link;
 * "logo" swaps the picture for a small addon logo; "tile" is an icon beside
 * a title. A section without cards is a centred text band. .is-alt tints a
 * section so long runs of neighbours stay distinct.
 *
 * product/feedback: heading on the left, a plain form on the right.
 * ---------------------------------------------------------------------- */

.tnc-fb-section {
	border-top: 1px solid var(--color--stroke);
}

.tnc-fb-section.is-alt {
	background-color: var(--color--white);
}

.tnc-fb-section.is-text .tnc-vd-actions {
	margin-top: var(--_size-variables---global-sizes--size-l);
}

.tnc-fb-grid {
	display: grid;
	gap: var(--_size-variables---global-sizes--size-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tnc-fb-grid.is-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tnc-fb-grid.is-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tnc-fb-grid.is-cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tnc-fb-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color--stroke);
	background-color: var(--color--white);
	transition: border-color 0.25s ease;
}

.tnc-fb-card:hover {
	border-color: var(--color--black);
}

.tnc-fb-section.is-alt .tnc-fb-card {
	background-color: var(--color--background-02);
}

.tnc-fb-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-bottom: 1px solid var(--color--stroke);
	background-color: var(--color--background-01);
}

.tnc-fb-media-img {
	display: block;
	width: 100%;
	height: 100%;
	padding: var(--_size-variables---global-sizes--size-m);
	object-fit: contain;
}

video.tnc-fb-media-img {
	padding: 0;
	object-fit: cover;
}

.tnc-fb-media iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.tnc-fb-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--_size-variables---global-sizes--size-xs);
	padding: var(--_size-variables---global-sizes--size-xl);
}

.tnc-pd-feature-icon.tnc-fb-icon {
	width: 40px;
	height: 40px;
	margin-bottom: var(--_size-variables---global-sizes--size-xs);
}

.tnc-fb-card:hover .tnc-fb-icon {
	background-color: var(--color--primary);
}

h3.tnc-fb-title {
	margin: 0;
	font-size: 18px;
	font-weight: var(--font-weight--semi-bold);
	line-height: var(--line-height--m);
	letter-spacing: -0.02em;
	color: var(--color--black);
}

.tnc-fb-text {
	margin: 0;
	font-size: 15px;
	line-height: var(--line-height--xxl);
	color: var(--color--text);
}

/* The link sits at the bottom, so links line up across a row. */
.tnc-fb-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: var(--_size-variables---global-sizes--size-s);
	font-size: 14px;
	font-weight: var(--font-weight--semi-bold);
	color: var(--color--black);
	text-decoration: none;
}

.tnc-fb-link:hover,
.tnc-fb-link:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--color--primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.tnc-fb-link:hover .tnc-ad-arrow {
	transform: translate(2px, -2px);
}

.tnc-fb-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--_size-variables---global-sizes--size-xs);
	border: 1px solid var(--color--stroke);
	background-color: var(--color--white);
}

.tnc-fb-logo-img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

/* Tiles: icon beside the title, one compact row. */
.tnc-fb-grid.is-tile .tnc-fb-body {
	flex-direction: row;
	align-items: center;
	gap: var(--_size-variables---global-sizes--size-m);
	padding: var(--_size-variables---global-sizes--size-l);
}

.tnc-fb-grid.is-tile .tnc-fb-logo {
	flex: none;
	width: 48px;
	height: 48px;
	margin: 0;
	border: 0;
	background-color: var(--color--background-01);
}

.tnc-fb-grid.is-tile .tnc-fb-logo-img {
	width: 28px;
	height: 28px;
}

.tnc-fb-grid.is-tile h3.tnc-fb-title {
	font-size: 16px;
}

/* Feedback form */

.tnc-fb-feedback {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--_size-variables---global-sizes--size-5xl);
	align-items: start;
}

.tnc-fb-form-wrap {
	padding: var(--_size-variables---global-sizes--size-xxl);
	border: 1px solid var(--color--stroke);
	background-color: var(--color--white);
}

.tnc-fb-form {
	display: flex;
	flex-direction: column;
	gap: var(--_size-variables---global-sizes--size-l);
	margin: 0;
}

.tnc-fb-form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--_size-variables---global-sizes--size-l);
}

.tnc-fb-field {
	display: flex;
	flex-direction: column;
	gap: var(--_size-variables---global-sizes--size-xs);
	margin: 0;
	font-weight: inherit;
}

.tnc-fb-label {
	font-size: 14px;
	font-weight: var(--font-weight--semi-bold);
	color: var(--color--black);
}

.tnc-fb-input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--color--stroke);
	border-radius: 0;
	background-color: var(--color--background-02);
	font: inherit;
	font-size: 15px;
	color: var(--color--black);
	transition: border-color 0.25s ease;
}

textarea.tnc-fb-input {
	min-height: 96px;
	resize: vertical;
}

.tnc-fb-input:focus {
	border-color: var(--color--black);
	outline: none;
}

.tnc-fb-submit {
	align-self: flex-start;
	padding: 14px 28px;
	border: 1px solid var(--color--black);
	background-color: var(--color--black);
	font-size: 15px;
	font-weight: var(--font-weight--semi-bold);
	color: var(--color--white);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.tnc-fb-submit:hover,
.tnc-fb-submit:focus-visible {
	background-color: var(--color--primary);
	color: var(--color--black);
}

#feedback-form {
	scroll-margin-top: 96px;
}

@media screen and (max-width: 991px) {
	.tnc-fb-grid.is-cols-3,
	.tnc-fb-grid.is-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tnc-fb-feedback {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--_size-variables---global-sizes--size-xxl);
	}
}

@media screen and (max-width: 767px) {
	.tnc-fb-grid.is-media,
	.tnc-fb-grid.is-logo {
		grid-template-columns: minmax(0, 1fr);
	}

	.tnc-fb-form-wrap {
		padding: var(--_size-variables---global-sizes--size-l);
	}

	.tnc-fb-form-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media screen and (max-width: 479px) {
	.tnc-fb-grid.is-tile {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tnc-fb-card,
	.tnc-fb-input,
	.tnc-fb-submit {
		transition: none;
	}

	.tnc-fb-link:hover .tnc-ad-arrow {
		transform: none;
	}
}

/* Logo strip (product/cards, style "logos"): muted until hovered. */
.tnc-fb-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--_size-variables---global-sizes--size-xxl) var(--_size-variables---global-sizes--size-5xl);
	margin: 0;
	padding: var(--_size-variables---global-sizes--size-xxl) 0 0;
	border-top: 1px solid var(--color--stroke);
	list-style: none;
}

.tnc-fb-logos-img {
	display: block;
	width: auto;
	max-width: 160px;
	height: 32px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

.tnc-fb-logos-img:hover {
	filter: none;
	opacity: 1;
}

.tnc-fb-section .tnc-fb-logos + .tnc-vd-actions {
	margin-top: var(--_size-variables---global-sizes--size-xxl);
}

@media screen and (max-width: 767px) {
	.tnc-fb-logos {
		gap: var(--_size-variables---global-sizes--size-l) var(--_size-variables---global-sizes--size-xxl);
	}

	.tnc-fb-logos-img {
		height: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tnc-fb-logos-img {
		transition: none;
	}
}

/* Six (or three) text-only steps split evenly three to a row instead of
 * leaving two orphans under a row of four. */
@media screen and (min-width: 992px) {
	.tnc-pd-steps.is-text:has(> :nth-child(6):last-child),
	.tnc-pd-steps.is-text:has(> :nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* A headless viewer demo stacked under one with a heading (e.g. the Preview
 * addon's "Full view" under its "Preview") shares that section's white. */
.tnc-vd-section.has-head + .tnc-vd-section:not(.has-head) {
	background-color: var(--color--white);
}

.tnc-vd-section.has-head:has(+ .tnc-vd-section:not(.has-head)) .section-space {
	padding-bottom: var(--_size-variables---global-sizes--size-3xl);
}

/* Shown to editors only, in place of a demo whose shortcode is still empty. */
.tnc-ad-demo-empty {
	margin: 0;
	padding: var(--_size-variables---global-sizes--size-l);
	border: 1px dashed var(--color--black);
	background-color: var(--color--background-02);
	font-size: 15px;
	text-align: center;
	color: var(--color--black);
}

/* -------------------------------------------------------------------------
 * 42. Schedule a Meeting template
 *
 * A soft wash behind a centred heading (pill label with a live dot, title,
 * intro), then the booking form in a white hairline card that lifts off the
 * page. The form itself is a plugin shortcode or the TidyCal embed.
 * ---------------------------------------------------------------------- */

.tnc-sm-section {
	padding: var(--global-variables--hero-space) 0 var(--global-variables--section-space);
	background-image: linear-gradient(180deg, rgba(255, 161, 111, 0.14) 0%, rgba(255, 161, 111, 0) 420px);
}

.tnc-sm-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 720px;
	margin: 0 auto var(--_size-variables---global-sizes--size-5xl);
	text-align: center;
}

.tnc-sm-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	border: 1px solid var(--color--stroke);
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	background-color: var(--color--white);
	font-size: 14px;
	font-weight: var(--font-weight--semi-bold);
	color: var(--color--black);
}

.tnc-sm-badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--color--primary);
	box-shadow: 0 0 0 4px rgba(255, 161, 111, 0.25);
}

h1.tnc-sm-title {
	margin-top: var(--_size-variables---global-sizes--size-xl);
}

.tnc-sm-text {
	max-width: 620px;
	margin: var(--_size-variables---global-sizes--size-l) 0 0;
	font-size: 18px;
	line-height: var(--line-height--xxl);
	color: var(--color--text);
}

.tnc-sm-card {
	max-width: 920px;
	min-height: 320px;
	margin: 0 auto;
	padding: clamp(16px, 3vw, var(--_size-variables---global-sizes--size-3xl));
	border: 1px solid var(--color--stroke);
	background-color: var(--color--white);
	box-shadow: 0 32px 80px -40px rgba(0, 0, 0, 0.25);
}

.tnc-sm-card .tidycal-embed,
.tnc-sm-card iframe {
	width: 100%;
	max-width: 100%;
	border: 0;
}

.tnc-sm-note {
	max-width: 620px;
	margin: var(--_size-variables---global-sizes--size-xxl) auto 0;
	font-size: 15px;
	text-align: center;
	color: var(--color--text);
}

.tnc-sm-note a {
	color: var(--color--black);
	text-decoration: underline;
	text-decoration-color: var(--color--primary);
	text-underline-offset: 3px;
}

@media screen and (max-width: 767px) {
	.tnc-sm-head {
		margin-bottom: var(--_size-variables---global-sizes--size-3xl);
	}

	.tnc-sm-text {
		font-size: 16px;
	}
}

/* -------------------------------------------------------------------------
 * 43. Documentation template
 *
 * A sticky contents menu beside the doc. The doc opens with its title and a
 * details card, then hairline-separated sections; numbered steps reuse the
 * product step badge. Rich text gets plain, readable defaults.
 * ---------------------------------------------------------------------- */

.tnc-doc-section {
	padding: var(--global-variables--hero-space) 0 var(--global-variables--section-space);
}

.tnc-doc {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--_size-variables---global-sizes--size-5xl);
	align-items: start;
}

.tnc-doc-nav {
	position: sticky;
	top: 110px;
	padding: var(--_size-variables---global-sizes--size-xl);
	border: 1px solid var(--color--stroke);
	background-color: var(--color--white);
}

.tnc-doc-nav-title {
	margin: 0 0 var(--_size-variables---global-sizes--size-s);
	font-size: 12px;
	font-weight: var(--font-weight--semi-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color--text);
}

.tnc-doc-nav-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tnc-doc-nav-list a {
	display: block;
	padding: 8px 0 8px 12px;
	border-left: 2px solid var(--color--stroke);
	font-size: 15px;
	font-weight: var(--font-weight--medium);
	color: var(--color--black);
	text-decoration: none;
	transition: border-color 0.25s ease;
}

.tnc-doc-nav-list a:hover,
.tnc-doc-nav-list a:focus-visible {
	border-left-color: var(--color--primary);
}

.tnc-doc-more {
	margin-top: var(--_size-variables---global-sizes--size-l);
	padding-top: 0;
}

.tnc-doc-body {
	max-width: 760px;
}

.tnc-doc-head,
.tnc-doc-part {
	scroll-margin-top: 110px;
}

h1.tnc-doc-title {
	margin-top: var(--_size-variables---global-sizes--size-s);
}

.tnc-doc-summary {
	max-width: none;
}

.tnc-doc-meta {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: var(--_size-variables---global-sizes--size-xxl) 0 0;
	border: 1px solid var(--color--stroke);
	background-color: var(--color--white);
}

.tnc-doc-meta > div {
	padding: var(--_size-variables---global-sizes--size-m) var(--_size-variables---global-sizes--size-l);
	border-right: 1px solid var(--color--stroke);
}

.tnc-doc-meta > div:last-child {
	border-right: 0;
}

.tnc-doc-meta dt {
	font-size: 12px;
	font-weight: var(--font-weight--semi-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color--text);
}

.tnc-doc-meta dd {
	margin: 4px 0 0;
	font-size: 15px;
	font-weight: var(--font-weight--medium);
	color: var(--color--black);
	overflow-wrap: anywhere;
}

.tnc-doc-meta a {
	color: var(--color--black);
}

.tnc-doc-part {
	margin-top: var(--_size-variables---global-sizes--size-5xl);
	padding-top: var(--_size-variables---global-sizes--size-5xl);
	border-top: 1px solid var(--color--stroke);
}

h2.tnc-doc-part-title {
	margin-bottom: var(--_size-variables---global-sizes--size-l);
	font-size: clamp(26px, 3vw, 34px);
	line-height: var(--line-height--xs);
	color: var(--color--black);
}

.tnc-doc-rich {
	font-size: 16px;
	line-height: var(--line-height--xxl);
	color: var(--color--text);
}

.tnc-doc-rich > :first-child {
	margin-top: 0;
}

.tnc-doc-rich p,
.tnc-doc-rich ul,
.tnc-doc-rich ol {
	margin: 0 0 var(--_size-variables---global-sizes--size-m);
}

.tnc-doc-rich h3 {
	margin: var(--_size-variables---global-sizes--size-xxl) 0 var(--_size-variables---global-sizes--size-s);
	font-size: 20px;
	font-weight: var(--font-weight--semi-bold);
	color: var(--color--black);
}

.tnc-doc-rich ul {
	padding-left: 1.2em;
}

.tnc-doc-rich li + li {
	margin-top: 6px;
}

.tnc-doc-rich a {
	color: var(--color--black);
	text-decoration: underline;
	text-decoration-color: var(--color--primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.tnc-doc-rich img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--color--stroke);
}

.tnc-doc-rich code {
	padding: 2px 6px;
	background-color: var(--color--background-01);
	font-size: 0.9em;
}

.tnc-doc-steps {
	display: flex;
	flex-direction: column;
	gap: var(--_size-variables---global-sizes--size-s);
	margin: var(--_size-variables---global-sizes--size-xl) 0 0;
	padding: 0;
	list-style: none;
}

.tnc-doc-step {
	display: flex;
	gap: var(--_size-variables---global-sizes--size-l);
	padding: var(--_size-variables---global-sizes--size-xl);
	border: 1px solid var(--color--stroke);
	background-color: var(--color--white);
}

.tnc-doc-step .tnc-pd-step-num {
	flex: none;
	align-self: flex-start;
}

h3.tnc-doc-step-title {
	margin: 0 0 var(--_size-variables---global-sizes--size-xs);
	font-size: 18px;
	font-weight: var(--font-weight--semi-bold);
	line-height: var(--line-height--m);
	color: var(--color--black);
}

.tnc-doc-step .tnc-doc-rich p:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 991px) {
	.tnc-doc {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--_size-variables---global-sizes--size-xxl);
	}

	.tnc-doc-nav {
		position: static;
	}

	.tnc-doc-meta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tnc-doc-meta > div:nth-child(2n) {
		border-right: 0;
	}

	.tnc-doc-meta > div:nth-child(-n + 2) {
		border-bottom: 1px solid var(--color--stroke);
	}
}

@media screen and (max-width: 479px) {
	.tnc-doc-meta {
		grid-template-columns: minmax(0, 1fr);
	}

	.tnc-doc-meta > div {
		border-right: 0;
		border-bottom: 1px solid var(--color--stroke);
	}

	.tnc-doc-meta > div:last-child {
		border-bottom: 0;
	}

	.tnc-doc-step {
		flex-direction: column;
		gap: var(--_size-variables---global-sizes--size-s);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tnc-doc-nav-list a {
		transition: none;
	}
}

/* A card grid holding a single card centres it at a readable width. */
.tnc-fb-grid:has(> :only-child) {
	grid-template-columns: minmax(0, 1fr);
	max-width: 560px;
	margin-inline: auto;
}

/* Item cards with a price (deals): the sale price in the badge's place, the
 * regular price struck through, and a coupon line with a dashed code chip. */
.tnc-fi-price {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--font-family--heading);
	font-weight: var(--font-weight--bold);
	color: var(--color--black);
}

.tnc-fi-price del {
	font-size: 14px;
	font-weight: var(--font-weight--medium);
	color: var(--color--text);
}

.tnc-fi-price-now {
	padding: 2px 10px;
	border-radius: var(--_size-variables---border-radius--radius-10xl);
	background-color: var(--color--primary);
	font-size: 15px;
}

.tnc-fi-coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin: 0;
	font-size: 14px;
	color: var(--color--text);
}

.tnc-fi-code {
	padding: 3px 10px;
	border: 1px dashed var(--color--black);
	background-color: var(--color--background-02);
	font-family: inherit;
	font-size: 13px;
	font-weight: var(--font-weight--bold);
	letter-spacing: 0.06em;
	color: var(--color--black);
	user-select: all;
}

/* -------------------------------------------------------------------------
 * 44. Section spacing
 *
 * Every section pads top and bottom with the same variable, so two stacked
 * sections leave twice the value between them: 360px on wide screens with the
 * export's 180px. These smaller steps (theme.css: 120 / 150 / 180, then 100 /
 * 80 / 60 going down) keep the rhythm but cap the gap between two sections at
 * 240px on the widest screens. theme.css sets the variable on body inside
 * its media queries, and a value on body beats one inherited from :root, so
 * these are set on body too; wp.css loads after theme.css, so they win.
 * ---------------------------------------------------------------------- */

:root,
body {
	--global-variables--section-space: 88px;
}

@media screen and (min-width: 1440px) {
	:root,
	body {
		--global-variables--section-space: 104px;
	}
}

@media screen and (min-width: 1920px) {
	:root,
	body {
		--global-variables--section-space: 120px;
	}
}

@media screen and (max-width: 991px) {
	:root,
	body {
		--global-variables--section-space: 72px;
	}
}

@media screen and (max-width: 767px) {
	:root,
	body {
		--global-variables--section-space: 56px;
	}
}

@media screen and (max-width: 479px) {
	:root,
	body {
		--global-variables--section-space: 48px;
	}
}

/* Icon-only media cards (e.g. Other Services): a larger brand-orange tile
 * stands in for the missing picture. */
.tnc-fb-card:not(:has(.tnc-fb-media)) .tnc-fb-icon {
	width: 56px;
	height: 56px;
	margin-bottom: var(--_size-variables---global-sizes--size-s);
	background-color: var(--color--primary);
}

.tnc-fb-card:not(:has(.tnc-fb-media)) .tnc-fb-icon .tnc-pd-icon {
	width: 26px;
	height: 26px;
}

.tnc-fb-card:not(:has(.tnc-fb-media)):hover .tnc-fb-icon {
	background-color: var(--color--black);
	color: var(--color--white);
}

/* Large logo tiles (product/cards logos with 'large'), e.g. Our Clients: the
 * images are framed 290×124 tiles, so they show near full size, in colour,
 * four to a row, and lift slightly on hover. */
.tnc-fb-logos.is-large {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--_size-variables---global-sizes--size-l);
	padding-top: 0;
	border-top: 0;
}

.tnc-fb-logos.is-large li {
	display: flex;
	justify-content: center;
}

.tnc-fb-logos.is-large .tnc-fb-logos-img {
	width: 100%;
	max-width: 290px;
	height: auto;
	filter: none;
	opacity: 1;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tnc-fb-logos.is-large .tnc-fb-logos-img:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 767px) {
	.tnc-fb-logos.is-large {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--_size-variables---global-sizes--size-s);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tnc-fb-logos.is-large .tnc-fb-logos-img {
		transition: none;
	}

	.tnc-fb-logos.is-large .tnc-fb-logos-img:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * 45. TNC BookShelf Popup demos
 *
 * The popup demos (Extraordinary, More, OnClick) are cards the template
 * builds with the plugin's trigger classes: three to a row, the thumbnail on
 * a soft panel, a caption under it. The OnClick demo is two text triggers, a
 * link and a button, either side of a hairline.
 *
 * Then a brand pass over the plugin's own grid and list output (bstnc-*),
 * matching what section 31 does for the Display addon: black instead of its
 * purple, hairline squares, the site's type, sensible title sizes. Scoped to
 * .tnc-ad-stage, so the plugin's own pages are untouched.
 * ---------------------------------------------------------------------- */

.tnc-ad-stage-body.tnc-bs-stage {
	padding: clamp(16px, 3vw, var(--_size-variables---global-sizes--size-3xl));
}

.tnc-bs-popups {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--_size-variables---global-sizes--size-xl);
}

.tnc-bs-card {
	display: flex;
	flex-direction: column;
	gap: var(--_size-variables---global-sizes--size-s);
	margin: 0;
}

.tnc-bs-card > a {
	display: block;
	overflow: hidden;
	border: 1px solid var(--color--stroke);
	background-color: var(--color--background-01);
	transition: border-color 0.25s ease;
}

.tnc-bs-card > a:hover,
.tnc-bs-card > a:focus-visible {
	border-color: var(--color--black);
}

/* The rest of a gallery: links the lightbox groups, never drawn. */
.tnc-bs-card > a[hidden] {
	display: none;
}

.tnc-bs-card img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.4s ease;
}

.tnc-bs-card > a:hover img {
	transform: scale(1.03);
}

.tnc-bs-caption {
	font-size: 15px;
	font-weight: var(--font-weight--semi-bold);
	text-align: center;
	color: var(--color--black);
}

/* OnClick: two text triggers, side by side. */
.tnc-bs-popups.is-triggers {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	max-width: 720px;
	margin: 0 auto;
}

.tnc-bs-trigger {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--_size-variables---global-sizes--size-m);
	padding: var(--_size-variables---global-sizes--size-xl);
	text-align: center;
}

.tnc-bs-trigger + .tnc-bs-trigger {
	border-left: 1px solid var(--color--stroke);
}

.tnc-bs-trigger-label {
	margin: 0;
	font-size: 14px;
	font-weight: var(--font-weight--semi-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color--text);
}

.tnc-bs-trigger.is-link a {
	font-family: var(--font-family--heading);
	font-size: 20px;
	font-weight: var(--font-weight--semi-bold);
	color: var(--color--black);
	text-decoration: underline;
	text-decoration-color: var(--color--primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.tnc-bs-trigger.is-button button {
	padding: 14px 28px;
	border: 1px solid var(--color--black);
	background-color: var(--color--black);
	font-size: 15px;
	font-weight: var(--font-weight--semi-bold);
	color: var(--color--white);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.tnc-bs-trigger.is-button button:hover,
.tnc-bs-trigger.is-button button:focus-visible {
	background-color: var(--color--primary);
	color: var(--color--black);
}

/* Custom-content popups: the plugin moves this into its lightbox. */
.tnc-bs-inline img {
	float: left;
	margin: 0 16px 8px 0;
	border-radius: 50%;
}

/* Plugin output: shared type */

.tnc-ad-stage [class*="bstnc-"],
.tnc-ad-stage [class*="bstnc-"] h2,
.tnc-ad-stage [class*="bstnc-"] input,
.tnc-ad-stage [class*="bstnc-"] select {
	font-family: var(--font-family--paragraph);
}

/* Grid: sidebar */

.tnc-ad-stage .bstnc-cat-title,
.tnc-ad-stage .bstnc-cat-title * {
	margin: 0;
	padding: 12px 16px;
	border-radius: 0;
	background: var(--color--black);
	font-family: var(--font-family--heading);
	font-size: 18px;
	font-weight: var(--font-weight--semi-bold);
	line-height: 1.3;
	text-align: left;
	color: var(--color--white);
}

.tnc-ad-stage .bstnc-cat-title * {
	padding: 0;
}

.tnc-ad-stage ul.bstnc-cat-lists {
	margin: 0;
	padding: 0;
	border: 1px solid var(--color--stroke);
	border-top: 0;
	background-color: var(--color--white);
}

.tnc-ad-stage ul.bstnc-cat-lists li {
	padding: 4px 16px;
	border-bottom: 1px solid var(--color--stroke);
	transition: background-color 0.2s ease;
}

.tnc-ad-stage ul.bstnc-cat-lists li:last-child {
	border-bottom: 0;
}

.tnc-ad-stage ul.bstnc-cat-lists li:hover {
	background-color: var(--color--background-01);
}

.tnc-ad-stage .bstnc-filter-items {
	font-size: 15px;
	font-weight: var(--font-weight--medium);
	color: var(--color--black);
	text-decoration: none;
}

/* Grid: search and sort */

.tnc-ad-stage .bstnc-search {
	border: 1px solid var(--color--stroke);
	border-radius: 0;
	background: var(--color--white);
}

.tnc-ad-stage .bstnc-search:focus-within {
	border-color: var(--color--black);
}

.tnc-ad-stage .bstnc-search-text {
	border: 0;
	border-radius: 0;
	font-size: 15px;
	color: var(--color--black);
}

.tnc-ad-stage .bstnc-sort-options {
	height: 48px;
	padding: 0 12px;
	border: 1px solid var(--color--stroke);
	border-radius: 0;
	background-color: var(--color--white);
	font-size: 15px;
	color: var(--color--black);
}

/* Grid: cards */

.tnc-ad-stage .bstnc-item-wrap {
	padding: 12px;
	border: 1px solid var(--color--stroke);
	border-radius: 0;
	background: var(--color--white);
	box-shadow: none;
	transition: border-color 0.25s ease;
}

.tnc-ad-stage .bstnc-item-wrap:hover {
	border-color: var(--color--black);
}

.tnc-ad-stage h2.bstnc-item_title {
	margin: 0;
	padding-top: 12px;
	font-family: var(--font-family--heading);
	font-size: 15px;
	font-weight: var(--font-weight--semi-bold);
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--color--black);
}

/* List */

.tnc-ad-stage .bstnc-list-col {
	align-items: center;
	margin-top: var(--_size-variables---global-sizes--size-s);
	padding: var(--_size-variables---global-sizes--size-l);
	border: 1px solid var(--color--stroke);
	border-radius: 0;
	background: var(--color--white);
	box-shadow: none;
	transition: border-color 0.25s ease;
}

.tnc-ad-stage .bstnc-list-col:first-child {
	margin-top: 0;
}

.tnc-ad-stage .bstnc-list-col:hover {
	border-color: var(--color--black);
}

.tnc-ad-stage .bstnc-list-titile,
.tnc-ad-stage .bstnc-list-titile * {
	margin: 0 0 var(--_size-variables---global-sizes--size-s);
	font-family: var(--font-family--heading);
	font-size: 22px;
	font-weight: var(--font-weight--semi-bold);
	line-height: 1.3;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--color--black);
}

.tnc-ad-stage .bstnc-list-titile * {
	margin: 0;
}

.tnc-ad-stage .bstnc-list-desc {
	font-size: 15px;
	line-height: var(--line-height--xxl);
	color: var(--color--text);
}

.tnc-ad-stage .bstnc-list-read a {
	display: inline-block;
	margin-top: var(--_size-variables---global-sizes--size-s);
	padding: 10px 20px;
	border: 1px solid var(--color--black);
	border-radius: 0;
	background: var(--color--black);
	font-size: 15px;
	font-weight: var(--font-weight--semi-bold);
	color: var(--color--white);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.tnc-ad-stage .bstnc-list-read a:hover,
.tnc-ad-stage .bstnc-list-read a:focus-visible {
	background: var(--color--primary);
	color: var(--color--black);
}

@media screen and (max-width: 991px) {
	.tnc-bs-popups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 479px) {
	.tnc-bs-popups,
	.tnc-bs-popups.is-triggers {
		grid-template-columns: minmax(0, 1fr);
	}

	.tnc-bs-trigger + .tnc-bs-trigger {
		border-top: 1px solid var(--color--stroke);
		border-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tnc-bs-card > a,
	.tnc-bs-card img,
	.tnc-bs-trigger.is-button button,
	.tnc-ad-stage .bstnc-item-wrap,
	.tnc-ad-stage .bstnc-list-col,
	.tnc-ad-stage .bstnc-list-read a {
		transition: none;
	}

	.tnc-bs-card > a:hover img {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * 46. Home statistics background
 *
 * The Webflow design layers a dark gradient over a photo, with different
 * gradient stops per breakpoint and a taller photo on phones. The export lost
 * the photo; the template now passes it (an ACF field, defaulting to the
 * design's image) as --tnc-count-bg / --tnc-count-bg-mobile. Gradient stops
 * match the design. Without the variables only the gradient shows, as before.
 * ---------------------------------------------------------------------- */

.count-section {
	background-image: linear-gradient(#0003, #000 50%), var(--tnc-count-bg, none);
}

@media screen and (min-width: 1920px) {
	.count-section {
		background-image: linear-gradient(#0003, #000 75%), var(--tnc-count-bg, none);
	}
}

@media screen and (max-width: 991px) {
	.count-section {
		background-image: linear-gradient(#0003, #000 40%), var(--tnc-count-bg, none);
	}
}

@media screen and (max-width: 767px) {
	.count-section {
		background-image: linear-gradient(180deg, var(--color--transparent), var(--color--black) 50%), var(--tnc-count-bg-mobile, var(--tnc-count-bg, none));
	}
}

@media screen and (max-width: 479px) {
	.count-section {
		background-image: linear-gradient(180deg, var(--color--transparent), var(--color--black) 35%), var(--tnc-count-bg-mobile, var(--tnc-count-bg, none));
	}
}