/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   TechPulse Matte — component stylesheet for techpulsecloud.com
   The Quantum Matte palette of the QuantumOps app (docs/design/quantum-matte in the app repo): matte
   neutrals, one mint accent (#00D898, the logo), no gradient washes, glows or blur on surfaces.
   Dark is the default; the app's light ramp (wwwroot/css/qops-tokens.css) is applied by the OS setting
   (prefers-color-scheme) or by the header toggle, which sets html[data-theme] (see assets/js/theme.js).

   Page content is plain core blocks; these classes (set in each block's "Additional CSS class") give
   them the design. Naming: tp-<component>[--modifier], tp-ui-* for product-UI illustrations.
   Scale: 1440 desktop artboard = 1200 content + 120 gutters; 390 phone = 20 gutters.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
	--tp-bg: #0a0c11;
	--tp-surface: #111419;
	--tp-surface-2: #1a1e25;
	--tp-surface-3: #2b2f37;
	--tp-line: #2b2f37;
	--tp-line-soft: rgba(43, 47, 55, 0.6);
	--tp-line-strong: #444953;
	--tp-fg-strong: #f5f7f9;
	--tp-fg: #dde0e4;
	--tp-fg-2: #999fa9;
	--tp-fg-3: #8b919b;
	--tp-accent: #00d898;
	--tp-accent-text: #19e0a3;
	--tp-accent-ink: #0a1a15;
	--tp-accent-hover: #4ddda4;
	--tp-accent-soft: rgba(0, 216, 152, 0.14);
	--tp-accent-line: rgba(0, 216, 152, 0.45);
	--tp-danger: #ef4444;
	--tp-warning: #fbbf24;
	--tp-info: #0ea5e9;
	--tp-violet: #a78bfa;
	--tp-header-bg: rgba(10, 12, 17, 0.96);
	--tp-tag-bg: rgba(26, 30, 37, 0.55);
	--tp-accent-ring: rgba(0, 216, 152, 0.2);
	--tp-selection: rgba(0, 216, 152, 0.32);
	--tp-info-soft: rgba(14, 165, 233, 0.12);
	--tp-pill-danger-bg: rgba(239, 68, 68, 0.15);
	--tp-pill-danger-fg: #fca5a5;
	--tp-pill-warn-bg: rgba(245, 158, 11, 0.15);
	--tp-pill-warn-fg: #fcd34d;
	--tp-pill-info-bg: rgba(59, 130, 246, 0.15);
	--tp-pill-info-fg: #93c5fd;
	--tp-pill-violet-bg: rgba(168, 85, 247, 0.15);
	--tp-pill-violet-fg: #d8b4fe;
	--tp-badge-addon-line: rgba(251, 191, 36, 0.4);
	--tp-badge-addon-fg: #fcd34d;
	--tp-badge-addon-bg: rgba(245, 158, 11, 0.08);
	--tp-logo-filter: none;
	--tp-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(43, 47, 55, 0.6);
	--tp-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--tp-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--tp-content: 1200px;
	--tp-gutter: 20px;
	--tp-pad-inline: max(var(--tp-gutter), calc((100% - var(--tp-content)) / 2));
	--tp-section-y: 64px;
	--tp-section-gap: 32px;
	--tp-r-sm: 6px;
	--tp-r-md: 10px;
	--tp-r-lg: 14px;
	color-scheme: dark;
}
@media (min-width: 781px) {
	:root { --tp-gutter: 40px; --tp-section-y: 88px; --tp-section-gap: 48px; }
}

/* Light: the app's light ramp (wwwroot/css/qops-tokens.css, docs/design/quantum-matte/README.md): the deep
   brand green fill with white text, darker status text. The same block twice: once for the OS setting
   (unless the visitor chose dark with the toggle), once for an explicit choice. Keep the two in step. */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--tp-bg: #fcfefd;
		--tp-surface: #f7faf9;
		--tp-surface-2: #ebf0ef;
		--tp-surface-3: #d6dcdb;
		--tp-line: #d6dcdb;
		--tp-line-soft: rgba(214, 220, 219, 0.7);
		--tp-line-strong: #b8bfbe;
		--tp-fg-strong: #111817;
		--tp-fg: #28302e;
		--tp-fg-2: #4a5250;
		--tp-fg-3: #5d6564;
		--tp-accent: #007d55;
		--tp-accent-text: #006d49;
		--tp-accent-ink: #ffffff;
		--tp-accent-hover: #006a46;
		--tp-accent-soft: rgba(0, 168, 120, 0.12);
		--tp-accent-line: rgba(0, 125, 85, 0.4);
		--tp-danger: #dc2626;
		--tp-warning: #b45309;
		--tp-info: #0369a1;
		--tp-violet: #7c3aed;
		--tp-header-bg: rgba(252, 254, 253, 0.96);
		--tp-tag-bg: rgba(247, 250, 249, 0.85);
		--tp-accent-ring: rgba(0, 125, 85, 0.22);
		--tp-selection: rgba(0, 168, 120, 0.28);
		--tp-info-soft: rgba(3, 105, 161, 0.1);
		--tp-pill-danger-bg: rgba(220, 38, 38, 0.1);
		--tp-pill-danger-fg: #b91c1c;
		--tp-pill-warn-bg: rgba(217, 119, 6, 0.12);
		--tp-pill-warn-fg: #92400e;
		--tp-pill-info-bg: rgba(37, 99, 235, 0.1);
		--tp-pill-info-fg: #1d4ed8;
		--tp-pill-violet-bg: rgba(124, 58, 237, 0.1);
		--tp-pill-violet-fg: #6d28d9;
		--tp-badge-addon-line: rgba(180, 83, 9, 0.4);
		--tp-badge-addon-fg: #92400e;
		--tp-badge-addon-bg: rgba(217, 119, 6, 0.08);
		--tp-logo-filter: none;
		--tp-shadow: 0 20px 40px -12px rgba(17, 24, 22, 0.18), 0 0 0 1px #d6dcdb;
		color-scheme: light;
	}
}
:root[data-theme="light"] {
	--tp-bg: #fcfefd;
	--tp-surface: #f7faf9;
	--tp-surface-2: #ebf0ef;
	--tp-surface-3: #d6dcdb;
	--tp-line: #d6dcdb;
	--tp-line-soft: rgba(214, 220, 219, 0.7);
	--tp-line-strong: #b8bfbe;
	--tp-fg-strong: #111817;
	--tp-fg: #28302e;
	--tp-fg-2: #4a5250;
	--tp-fg-3: #5d6564;
	--tp-accent: #007d55;
	--tp-accent-text: #006d49;
	--tp-accent-ink: #ffffff;
	--tp-accent-hover: #006a46;
	--tp-accent-soft: rgba(0, 168, 120, 0.12);
	--tp-accent-line: rgba(0, 125, 85, 0.4);
	--tp-danger: #dc2626;
	--tp-warning: #b45309;
	--tp-info: #0369a1;
	--tp-violet: #7c3aed;
	--tp-header-bg: rgba(252, 254, 253, 0.96);
	--tp-tag-bg: rgba(247, 250, 249, 0.85);
	--tp-accent-ring: rgba(0, 125, 85, 0.22);
	--tp-selection: rgba(0, 168, 120, 0.28);
	--tp-info-soft: rgba(3, 105, 161, 0.1);
	--tp-pill-danger-bg: rgba(220, 38, 38, 0.1);
	--tp-pill-danger-fg: #b91c1c;
	--tp-pill-warn-bg: rgba(217, 119, 6, 0.12);
	--tp-pill-warn-fg: #92400e;
	--tp-pill-info-bg: rgba(37, 99, 235, 0.1);
	--tp-pill-info-fg: #1d4ed8;
	--tp-pill-violet-bg: rgba(124, 58, 237, 0.1);
	--tp-pill-violet-fg: #6d28d9;
	--tp-badge-addon-line: rgba(180, 83, 9, 0.4);
	--tp-badge-addon-fg: #92400e;
	--tp-badge-addon-bg: rgba(217, 119, 6, 0.08);
	--tp-logo-filter: none;
	--tp-shadow: 0 20px 40px -12px rgba(17, 24, 22, 0.18), 0 0 0 1px #d6dcdb;
	color-scheme: light;
}

/* ═══ Base ═════════════════════════════════════════════════════════════════════════════════════════ */
html { background: var(--tp-bg); scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--tp-bg);
	color: var(--tp-fg);
	font-family: var(--tp-sans);
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
::selection { background: var(--tp-selection); color: var(--tp-fg-strong); }
:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }
code, kbd, samp, pre { font-family: var(--tp-mono); }
img { max-width: 100%; height: auto; }
a { color: var(--tp-accent-text); text-underline-offset: 3px; }
a:hover { color: var(--tp-fg-strong); }
strong { color: var(--tp-fg-strong); font-weight: 600; }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
/* Flow layout gaps from core are replaced by each component's own spacing. */
:where(.tp-page, .tp-page *) > * { margin-block-start: 0; margin-block-end: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.tp-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 14px; border-radius: var(--tp-r-sm); background: var(--tp-accent); color: var(--tp-accent-ink); font-weight: 600; }
.tp-skip:focus { left: 8px; }

/* ═══ Header ═══════════════════════════════════════════════════════════════════════════════════════ */
.tp-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 48px;
	height: 72px;
	box-sizing: border-box;
	padding: 0 var(--tp-pad-inline);
	background: var(--tp-header-bg);
	border-bottom: 1px solid var(--tp-line-soft);
}
body.admin-bar .tp-header { top: 32px; }
.tp-header .tp-logo { display: flex; flex-shrink: 0; margin: 0; }
.tp-header .tp-logo img, .tp-footer__brand img { filter: var(--tp-logo-filter); }
.tp-header .tp-logo img { width: 153px; height: 34px; display: block; }
.tp-header .tp-nav { flex-grow: 1; }
.tp-header .tp-nav .wp-block-navigation__container { gap: 32px; }
.tp-header .tp-nav .wp-block-navigation-item__content { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tp-fg-2); text-decoration: none; }
.tp-header .tp-nav .wp-block-navigation-item__content:hover,
.tp-header .tp-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--tp-fg-strong); }
.tp-header .tp-nav .wp-block-navigation__submenu-container {
	min-width: 280px !important;
	padding: 8px !important;
	background: var(--tp-surface) !important;
	border: 1px solid var(--tp-line) !important;
	border-radius: var(--tp-r-md);
	box-shadow: var(--tp-shadow);
	gap: 2px;
}
.tp-header .tp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 9px 12px !important;
	border-radius: var(--tp-r-sm);
	color: var(--tp-fg);
}
.tp-header .tp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--tp-surface-2); }
.tp-header .tp-nav .wp-block-navigation__submenu-icon { color: var(--tp-fg-3); margin-left: 6px; }
.tp-header .tp-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Light/dark toggle: shows the icon of the theme you would switch to (sun while dark, moon while light). */
.tp-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--tp-line);
	border-radius: 8px;
	background: transparent;
	color: var(--tp-fg-2);
	cursor: pointer;
}
.tp-theme-toggle[hidden] { display: none; }
.tp-theme-toggle:hover { background: var(--tp-surface-2); color: var(--tp-fg-strong); border-color: var(--tp-line-strong); }
.tp-theme-toggle svg { display: block; }
.tp-theme-toggle__moon { display: none !important; }
:root[data-theme="light"] .tp-theme-toggle__sun { display: none !important; }
:root[data-theme="light"] .tp-theme-toggle__moon { display: block !important; }
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) .tp-theme-toggle__sun { display: none !important; }
	:root:not([data-theme="dark"]) .tp-theme-toggle__moon { display: block !important; }
}
/* Mobile overlay menu (core/navigation "overlayMenu": "mobile"). */
.tp-header .wp-block-navigation__responsive-container-open { color: var(--tp-fg); }
.tp-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--tp-bg) !important;
	color: var(--tp-fg) !important;
	padding: 20px !important;
}
.tp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 4px; }
.tp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 20px; line-height: 28px; color: var(--tp-fg-strong); padding: 6px 0; }
.tp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; border: 0 !important; box-shadow: none; padding: 0 0 0 12px !important; }
.tp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 16px; color: var(--tp-fg-2); padding: 4px 0 !important; }
@media (max-width: 1100px) {
	.tp-header { gap: 24px; }
	.tp-header .tp-nav .wp-block-navigation__container { gap: 20px; }
}
@media (max-width: 780px) {
	.tp-header { height: 64px; gap: 12px; }
	.tp-header .tp-logo img { width: 126px; height: 28px; }
	.tp-header .tp-nav { order: 3; flex-grow: 0; }
	.tp-header .tp-header__actions { margin-left: auto; }
	.tp-header .tp-header__actions .tp-hide-phone { display: none; }
}

/* ═══ Sections ═════════════════════════════════════════════════════════════════════════════════════ */
.tp-section {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--tp-section-gap);
	margin: 0 !important;
	padding: var(--tp-section-y) var(--tp-pad-inline);
	background: var(--tp-bg);
	border-top: 1px solid var(--tp-line-soft);
	max-width: none !important;
	scroll-margin-top: 72px;
}
.tp-section--surface { background: var(--tp-surface); }
.tp-section--hero { border-top: 0; padding-top: 72px; padding-bottom: 88px; gap: 0; }
.tp-section--tight { padding-top: 56px; padding-bottom: 56px; }
.tp-section--center { align-items: center; text-align: center; }
@media (max-width: 780px) {
	.tp-section--hero { padding-top: 40px; padding-bottom: 56px; }
}

/* Section header stack: eyebrow, title, lead */
.tp-head { display: flex; flex-direction: column; gap: 20px; }
.tp-head > .tp-h2 { max-width: 900px; }
.tp-head--wide > .tp-h2 { max-width: none; }
.tp-head--split { max-width: none; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; }
.tp-head--split > .tp-head { gap: 20px; }
@media (max-width: 900px) { .tp-head--split { flex-direction: column; align-items: flex-start; gap: 24px; } }

.tp-eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 20px;
	margin: 0;
	font-family: var(--tp-mono);
	font-size: 13px;
	line-height: 20px;
	color: var(--tp-fg-3);
	white-space: nowrap;
}
.tp-eyebrow::after { content: ""; flex-grow: 1; min-width: 24px; height: 1px; background: var(--tp-line); }
@media (max-width: 600px) { .tp-eyebrow { white-space: normal; } }
.tp-eyebrow--plain::after { display: none; }

/* ═══ Type ═════════════════════════════════════════════════════════════════════════════════════════ */
.tp-display {
	margin: 28px 0 0;
	font-size: clamp(48px, 6.67vw, 96px);
	line-height: 1;
	font-weight: 600;
	letter-spacing: -0.024em;
	color: var(--tp-fg-strong);
	text-wrap: balance;
}
.tp-display--md { font-size: clamp(44px, 5.4vw, 78px); line-height: 1.02; }
.tp-h2 {
	margin: 0;
	font-size: clamp(34px, 3.6vw, 52px);
	line-height: 1.08;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--tp-fg-strong);
	text-wrap: balance;
}
.tp-h3 { margin: 0; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.015em; color: var(--tp-fg-strong); text-wrap: balance; }
.tp-lead { margin: 0; max-width: 640px; font-size: 20px; line-height: 30px; color: var(--tp-fg-2); text-wrap: pretty; }
.tp-sub { margin: 0; max-width: 680px; font-size: 18px; line-height: 28px; color: var(--tp-fg-2); text-wrap: pretty; }
.tp-body { margin: 0; font-size: 16px; line-height: 26px; color: var(--tp-fg-2); text-wrap: pretty; }
.tp-small { margin: 0; font-size: 14px; line-height: 22px; color: var(--tp-fg-3); }
.tp-kicker { margin: 0; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tp-fg-3); }
.tp-kicker--accent { color: var(--tp-accent-text); }
.tp-mono { font-family: var(--tp-mono); }
.tp-meta {
	display: block;
	margin: 28px 0 0;
	font-family: var(--tp-mono);
	font-size: 13px;
	line-height: 22px;
	color: var(--tp-fg-3);
	text-wrap: pretty;
}
.tp-meta span[aria-hidden] { margin: 0 10px; }
.tp-meta strong { color: var(--tp-fg); font-weight: 500; }
@media (max-width: 780px) {
	.tp-display { margin-top: 20px; line-height: 1.04; }
	.tp-lead { font-size: 17px; line-height: 26px; }
	.tp-sub { font-size: 16px; line-height: 26px; }
	.tp-h3 { font-size: 21px; line-height: 27px; }
}

/* Hero: title, then the lead and buttons side by side, then the proof line, then the visual */
.tp-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin: 36px 0 0; }
.tp-hero-row > .tp-lead { flex: 1 1 auto; }
.tp-hero-row > .tp-buttons { flex-shrink: 0; }
.tp-hero-visual { margin: 56px 0 0 !important; }
.tp-display + .tp-lead { margin-top: 28px; }
.tp-contact-hero .tp-split.wp-block-columns { margin-top: 32px; }
@media (max-width: 780px) { .tp-display + .tp-lead { margin-top: 20px; } .tp-contact-hero .tp-split.wp-block-columns { margin-top: 24px; } }
@media (max-width: 900px) {
	.tp-hero-row { flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 24px; }
	.tp-hero-visual { margin-top: 40px !important; }
}

/* ═══ Buttons (core/button; styles Default = primary, Tonal, Ghost) ═════════════════════════════════ */
.tp-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.tp-buttons--center { justify-content: center; }
.wp-block-button { margin: 0; }
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	height: 40px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--tp-accent);
	color: var(--tp-accent-ink);
	font-family: var(--tp-sans);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.005em;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.wp-block-button__link:hover { background: var(--tp-accent-hover); color: var(--tp-accent-ink); }
.wp-block-button.is-style-tonal .wp-block-button__link { background: var(--tp-surface-3); color: var(--tp-fg); }
.wp-block-button.is-style-tonal .wp-block-button__link:hover { background: color-mix(in oklab, var(--tp-surface-3) 84%, var(--tp-fg)); color: var(--tp-fg-strong); }
.wp-block-button.is-style-ghost .wp-block-button__link { background: transparent; color: var(--tp-fg-2); border-color: color-mix(in oklab, var(--tp-line) 70%, transparent); }
.wp-block-button.is-style-ghost .wp-block-button__link:hover { background: var(--tp-surface-2); color: var(--tp-fg-strong); border-color: var(--tp-line-strong); }
.wp-block-button.tp-btn-sm .wp-block-button__link { height: 34px; padding: 0 14px; font-size: 13.5px; border-radius: 6px; }
.wp-block-button.tp-arrow .wp-block-button__link::after {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--tp-i-arrow-right) center / contain no-repeat;
	mask: var(--tp-i-arrow-right) center / contain no-repeat;
}
.wp-block-button__link:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }

/* Inline text link with an arrow */
.tp-link { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; }
.tp-link a { color: var(--tp-accent-text); text-decoration: none; }
.tp-link a::after { content: " →"; }
.tp-link a:hover { color: var(--tp-fg-strong); }

/* ═══ Grids and columns ════════════════════════════════════════════════════════════════════════════ */
.tp-grid { display: grid; gap: 24px; margin: 0; }
.tp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tp-grid--gap-sm { gap: 16px; }
@media (max-width: 1100px) {
	.tp-grid--3, .tp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
	.tp-grid--2, .tp-grid--3, .tp-grid--4 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
.tp-split.wp-block-columns { gap: 64px; margin: 0; align-items: center; }
.tp-split--top.wp-block-columns { align-items: flex-start; }
.tp-split .wp-block-column { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 900px) {
	.tp-split.wp-block-columns { flex-wrap: wrap !important; gap: 40px; }
	.tp-split.wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
	.tp-split--reverse.wp-block-columns { flex-direction: column-reverse; }
}

/* ═══ Cards ════════════════════════════════════════════════════════════════════════════════════════ */
.tp-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
	margin: 0;
	padding: 24px;
	background: var(--tp-surface);
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-r-lg);
}
.tp-section--surface .tp-card { background: var(--tp-surface-2); }
.tp-card--lg { padding: 32px; }
.tp-card--accent { border-color: var(--tp-accent-line); }
.tp-card > .tp-kicker + * { margin-top: 12px; }
.tp-card > h3,
.tp-card .tp-card__title { margin: 16px 0 0; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.005em; word-spacing: 0.05em; color: var(--tp-fg-strong); text-wrap: balance; }
.tp-card > h3:first-child, .tp-card > .tp-card__title:first-child { margin-top: 0; }
.tp-card--lg > h3 { font-size: 24px; line-height: 30px; letter-spacing: -0.015em; }
.tp-card > p:not([class]) { margin: 8px 0 0; font-size: 15px; line-height: 24px; color: var(--tp-fg-2); text-wrap: pretty; }
.tp-card > .tp-kicker { margin: 0; }
.tp-card .tp-checks { margin-top: 20px; }
.tp-card .tp-tags { margin-top: 20px; }
.tp-card .tp-buttons, .tp-card .tp-link { margin-top: auto; padding-top: 24px; }
.tp-card .tp-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding-top: 24px;
}
.tp-card .tp-card__foot p { margin: 0; font-size: 15px; color: var(--tp-fg-2); white-space: nowrap; }
.tp-card .tp-card__foot .tp-buttons { margin-top: 0; padding-top: 0; }
@media (max-width: 480px) { .tp-card .tp-card__foot { flex-direction: column; align-items: flex-start; } }
/* Tags closing a card sit on the card's bottom edge, so a row of cards lines up */
.tp-grid > .tp-card > .tp-tags:last-child { margin-top: auto; padding-top: 20px; }
/* Card with an icon tile: add tp-ico and one tp-i-<name> class to the card group */
.tp-ico::before {
	content: "";
	display: block;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--tp-r-md);
	background-color: var(--tp-surface-3);
	background-image: none;
	-webkit-mask: none;
	mask: none;
}
.tp-ico { --tp-icon-color: var(--tp-fg-2); }
.tp-ico::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	margin: 11px;
	background: var(--tp-icon-color);
	-webkit-mask: var(--tp-icon) center / contain no-repeat;
	mask: var(--tp-icon) center / contain no-repeat;
}
.tp-card.tp-ico { position: relative; }
.tp-card.tp-ico > :first-child:not(.tp-badge),
.tp-card.tp-ico > .tp-badge:first-child + * { margin-top: 16px; }
.tp-card.tp-ico::after { top: 24px; left: 24px; margin: 11px; }
.tp-card--lg.tp-ico::after { top: 32px; left: 32px; }
.tp-ico--accent { --tp-icon-color: var(--tp-accent-text); }
.tp-ico--accent::before { background-color: var(--tp-accent-soft); }

/* Product card (home: the two products) */
.tp-product-logo { margin: 0; }
.tp-product-logo img { height: 40px; width: auto; display: block; }

/* ═══ Feature list (rows with icon, title, text) ═══════════════════════════════════════════════════ */
.tp-rows { display: flex; flex-direction: column; margin: 0; }
.tp-row {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 14px 0 14px 34px;
	border-bottom: 1px solid var(--tp-line);
}
.tp-row:last-child { border-bottom: 0; }
.tp-row > :first-child { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--tp-fg-strong); }
.tp-row > p:not(:first-child) { margin: 0; font-size: 14px; line-height: 21px; color: var(--tp-fg-2); }
.tp-row.tp-ico::before { display: none; }
.tp-row.tp-ico::after { top: 15px; left: 0; width: 18px; height: 18px; margin: 0; --tp-icon-color: var(--tp-fg-3); }

/* ═══ Lists ════════════════════════════════════════════════════════════════════════════════════════ */
.tp-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tp-checks li { position: relative; margin: 0; padding-left: 28px; font-size: 15px; line-height: 24px; color: var(--tp-fg); }
.tp-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 14px;
	height: 14px;
	background: var(--tp-fg-3);
	-webkit-mask: var(--tp-i-check) center / contain no-repeat;
	mask: var(--tp-i-check) center / contain no-repeat;
}
.tp-checks--accent li::before { background: var(--tp-accent-text); }
.tp-checks--lg li { font-size: 16px; line-height: 26px; }
.tp-checks--lg li::before { top: 6px; }
.tp-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tp-tags li {
	display: inline-flex;
	align-items: center;
	height: 28px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-r-sm);
	background: var(--tp-tag-bg);
	font-size: 13px;
	line-height: 1;
	color: var(--tp-fg);
	white-space: nowrap;
}
.tp-tags--sm li { height: 24px; padding: 0 8px; font-size: 12px; color: var(--tp-fg-2); }
.tp-tags--accent li { border-color: var(--tp-accent-line); color: var(--tp-accent-text); background: var(--tp-accent-soft); }
.tp-steps-list { margin: 0; padding-left: 20px; color: var(--tp-fg); font-size: 15px; line-height: 24px; }
.tp-steps-list li + li { margin-top: 8px; }

/* ═══ Numbered steps ═══════════════════════════════════════════════════════════════════════════════ */
.tp-step { counter-increment: tp-step; }
.tp-steps { counter-reset: tp-step; }
.tp-step > .tp-step__num,
.tp-step .tp-kicker.tp-step__num { font-family: var(--tp-mono); font-size: 13px; letter-spacing: 0; color: var(--tp-accent-text); }

/* ═══ Stats ════════════════════════════════════════════════════════════════════════════════════════ */
.tp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; }
.tp-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tp-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tp-stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 22px;
	background: var(--tp-surface);
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-r-lg);
}
.tp-section--surface .tp-stat { background: var(--tp-surface-2); }
.tp-stat__value { margin: 0; font-size: clamp(36px, 3.9vw, 56px); line-height: 1; font-weight: 600; letter-spacing: -0.02em; color: var(--tp-fg-strong); }
.tp-stat__value--sm { font-size: clamp(28px, 2.6vw, 36px); }
.tp-stat__label { margin: 0; font-size: 13px; line-height: 18px; color: var(--tp-fg-3); text-wrap: balance; }
@media (max-width: 900px) { .tp-stats, .tp-stats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ═══ Screenshots ══════════════════════════════════════════════════════════════════════════════════ */
.tp-shot { margin: 0 !important; }
.tp-shot img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-r-lg);
	background: var(--tp-surface);
	box-shadow: var(--tp-shadow);
}
.tp-shot figcaption,
.tp-shot .wp-element-caption { margin: 14px 0 0; font-size: 13px; line-height: 20px; color: var(--tp-fg-3); text-align: left; }
.tp-shot--panel img { max-width: 380px; margin-inline: auto; }
.tp-window:has(.tp-shot--panel) { width: 100%; max-width: 382px; margin-inline: auto; }
.tp-window .tp-shot--panel img { max-width: none; }
.tp-shot--flat img { box-shadow: none; }
/* Window frame: a group with a title bar paragraph above the image */
.tp-window {
	margin: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--tp-bg);
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-r-lg);
	box-shadow: var(--tp-shadow);
}
.tp-window__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	box-sizing: border-box;
	margin: 0;
	padding: 0 16px;
	border-bottom: 1px solid var(--tp-line-soft);
	font-size: 13px;
	font-weight: 600;
	color: var(--tp-fg-strong);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tp-window__bar::before {
	content: "";
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--tp-accent);
	box-shadow: 0 0 0 3px var(--tp-accent-ring);
}
.tp-window .tp-shot img { border: 0; border-radius: 0; box-shadow: none; }
.tp-window .tp-shot figcaption { padding: 0 16px 14px; }
/* Two screenshots side by side, the second overlapping (panel next to board) */
.tp-duo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 24px; align-items: start; margin: 0; }
@media (max-width: 900px) { .tp-duo { grid-template-columns: minmax(0, 1fr); } }

/* ═══ FAQ (core/details) ═══════════════════════════════════════════════════════════════════════════ */
.tp-faq-list { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--tp-line); }
.tp-faq.wp-block-details { margin: 0; border-bottom: 1px solid var(--tp-line); }
.tp-faq summary {
	position: relative;
	display: block;
	padding: 20px 56px 20px 0;
	cursor: pointer;
	list-style: none;
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
	color: var(--tp-fg-strong);
}
.tp-faq summary::-webkit-details-marker { display: none; }
.tp-faq summary::marker { content: ""; }
.tp-faq summary::after {
	content: "";
	position: absolute;
	right: 0;
	top: 16px;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--tp-surface-2) center / 12px 12px no-repeat;
	background-image: var(--tp-i-plus-fg);
	transition: transform 0.16s ease;
}
.tp-faq[open] summary::after { transform: rotate(45deg); }
.tp-faq > :not(summary) { margin: 0; padding: 0 56px 24px 0; font-size: 16px; line-height: 26px; color: var(--tp-fg-2); text-wrap: pretty; }
.tp-faq > :not(summary) + :not(summary) { margin-top: -12px; }
.tp-faq-wrap.wp-block-columns { gap: 64px; margin: 0; }
@media (max-width: 900px) { .tp-faq-wrap.wp-block-columns { flex-wrap: wrap !important; gap: 24px; } .tp-faq-wrap > .wp-block-column { flex-basis: 100% !important; } }
@media (max-width: 780px) { .tp-faq summary { font-size: 16px; } .tp-faq > :not(summary) { padding-right: 0; font-size: 15px; } }

/* ═══ Pricing ══════════════════════════════════════════════════════════════════════════════════════ */
.tp-price-card { gap: 0; }
.tp-price-card .tp-kicker { margin-bottom: 6px; }
.tp-price-card > h3 { margin-top: 0; font-size: 24px; line-height: 30px; }
.tp-price-table { margin: 24px 0 0 !important; }
.tp-price-table table { width: 100%; border-collapse: collapse; border: 0; }
.tp-price-table td {
	height: 48px;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--tp-line);
	font-size: 15px;
	color: var(--tp-fg);
	vertical-align: middle;
}
.tp-price-table td:last-child { text-align: right; font-weight: 600; color: var(--tp-fg-strong); white-space: nowrap; }
.tp-price-table td:last-child small, .tp-price-table td small { font-weight: 400; font-size: 13px; color: var(--tp-fg-3); }
.tp-price-table tr:last-child td { border-bottom: 1px solid var(--tp-line); }
.tp-price-big { margin: 20px 0 0; font-size: 64px; line-height: 1; font-weight: 600; letter-spacing: -0.025em; color: var(--tp-fg-strong); }
.tp-price-big small { font-size: 18px; font-weight: 500; color: var(--tp-fg-3); letter-spacing: 0; }
.tp-price-note { margin: 16px 0 0 !important; font-size: 13px !important; line-height: 20px !important; color: var(--tp-fg-3) !important; }
.tp-placeholder { color: var(--tp-warning) !important; font-family: var(--tp-mono); font-size: 0.9em; }

/* ═══ Timeline ═════════════════════════════════════════════════════════════════════════════════════ */
.tp-timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; }
.tp-tl { position: relative; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--tp-line-strong); }
.tp-tl::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 999px; background: var(--tp-line-strong); }
.tp-tl:last-child::before { background: var(--tp-accent); }
.tp-tl > :first-child { margin: 0; font-family: var(--tp-mono); font-size: 13px; color: var(--tp-fg-3); }
.tp-tl:last-child > :first-child { color: var(--tp-accent-text); }
.tp-tl > h3 { margin: 10px 0 0; font-size: 17px; line-height: 22px; font-weight: 600; word-spacing: 0.05em; color: var(--tp-fg-strong); text-wrap: balance; }
.tp-tl p:not(:first-child) { margin: 6px 0 0; font-size: 14px; line-height: 22px; color: var(--tp-fg-2); text-wrap: pretty; }
@media (max-width: 1100px) { .tp-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } }
@media (max-width: 780px) { .tp-timeline { grid-template-columns: minmax(0, 1fr); } }

/* ═══ Callouts, notes, quote ═══════════════════════════════════════════════════════════════════════ */
.tp-note {
	margin: 0;
	padding: 14px 16px;
	border-radius: var(--tp-r-md);
	background: var(--tp-surface-2);
	border: 1px solid var(--tp-line);
	font-size: 14px;
	line-height: 22px;
	color: var(--tp-fg-2);
}
.tp-note strong { color: var(--tp-fg-strong); }
.tp-note--accent { border-color: var(--tp-accent-line); background: var(--tp-accent-soft); color: var(--tp-fg); }
.tp-person { display: flex; align-items: center; gap: 14px; margin: 0; }
.tp-avatar { margin: 0; width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--tp-surface-3); font-size: 14px; font-weight: 600; color: var(--tp-fg-strong); }

/* ═══ CTA band ═════════════════════════════════════════════════════════════════════════════════════ */
.tp-section.tp-cta { gap: 0; }
.tp-cta .tp-display { margin-top: 28px; font-size: clamp(44px, 5.6vw, 80px); }
@media (max-width: 780px) { .tp-cta .tp-display { margin-top: 20px; } }
.tp-cta .tp-contact { display: block; margin: 24px 0 0; font-family: var(--tp-mono); font-size: 13px; color: var(--tp-fg-3); }
.tp-cta .tp-contact a { color: var(--tp-fg-2); text-decoration: none; }
.tp-cta .tp-contact span[aria-hidden] { margin: 0 10px; }
.tp-cta .tp-contact a:hover { color: var(--tp-fg-strong); }

/* ═══ Integrations hub ═════════════════════════════════════════════════════════════════════════════ */
.tp-hub { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; margin: 0; }
.tp-hub__center { justify-content: center; }
.tp-hub__center h3 { font-size: 32px !important; line-height: 38px !important; }
@media (max-width: 900px) { .tp-hub { grid-template-columns: minmax(0, 1fr); } }

/* ═══ Legal template ═══════════════════════════════════════════════════════════════════════════════ */
.tp-legal.wp-block-columns { gap: 64px; margin: 0; align-items: flex-start; }
.tp-legal-nav { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 14px; }
.tp-legal-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tp-legal-nav li a { display: block; padding: 8px 12px; border-radius: var(--tp-r-sm); font-size: 14px; color: var(--tp-fg-2); text-decoration: none; }
.tp-legal-nav li a:hover { background: var(--tp-surface-2); color: var(--tp-fg-strong); }
.tp-legal-body { max-width: 760px; }
.tp-legal-body h1, .tp-legal-body .wp-block-post-title { margin: 20px 0 0; font-size: clamp(40px, 4.4vw, 64px); line-height: 1.05; font-weight: 600; letter-spacing: -0.022em; color: var(--tp-fg-strong); }
.tp-legal-body h2 { margin: 48px 0 0; font-size: 24px; line-height: 30px; letter-spacing: -0.015em; }
.tp-legal-body h3 { margin: 32px 0 0; font-size: 18px; line-height: 24px; }
.tp-legal-body p:not([class]), .tp-legal-body li { font-size: 16px; line-height: 27px; color: var(--tp-fg-2); }
.tp-legal-body p:not([class]) { margin: 16px 0 0; }
.tp-legal-body .tp-small { margin: 12px 0 0; }
.tp-legal-body .tp-note { margin-top: 48px; }
.tp-legal-body h1, .tp-legal-body h2, .tp-legal-body h3 { text-wrap: balance; }
.tp-legal-num { margin-right: 10px; font-family: var(--tp-mono); font-size: 0.7em; font-weight: 400; letter-spacing: 0; color: var(--tp-accent-text); }
.tp-legal-nav li a[aria-current="page"] { background: var(--tp-surface-2); color: var(--tp-fg-strong); }
@media (min-width: 901px) { .tp-legal-nav ul { margin-left: -12px; } }
.tp-legal-body ul, .tp-legal-body ol { margin: 16px 0 0; padding-left: 22px; }
@media (max-width: 900px) {
	.tp-legal.wp-block-columns { flex-wrap: wrap !important; gap: 32px; }
	.tp-legal > .wp-block-column { flex-basis: 100% !important; }
	.tp-legal-nav { position: static; }
	/* phone: the legal pages become a row of chips you can swipe, so the title stays on the first screen */
	.tp-legal-nav ul { flex-direction: row; overflow-x: auto; gap: 8px; margin: 0 calc(-1 * var(--tp-gutter)); padding: 0 var(--tp-gutter) 2px; scrollbar-width: none; }
	.tp-legal-nav li a { white-space: nowrap; padding: 8px 14px; border: 1px solid var(--tp-line); border-radius: 999px; }
}

/* ═══ Contact form (styles for the demo form; see README for wiring it to a form plugin) ═══════════ */
.tp-form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.tp-form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: var(--tp-fg); }
.tp-form label span.tp-opt { font-weight: 400; color: var(--tp-fg-3); }
.tp-form input, .tp-form select, .tp-form textarea {
	box-sizing: border-box;
	width: 100%;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--tp-line);
	border-radius: 8px;
	background: var(--tp-bg);
	color: var(--tp-fg-strong);
	font-family: var(--tp-sans);
	font-size: 15px;
}
.tp-form textarea { height: 112px; padding: 10px 12px; resize: vertical; }
.tp-form input:focus, .tp-form select:focus, .tp-form textarea:focus { outline: none; border-color: var(--tp-accent); box-shadow: 0 0 0 3px var(--tp-accent-ring); }
.tp-form .tp-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tp-form fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; }
.tp-form legend { margin-bottom: 10px; padding: 0; font-size: 13px; font-weight: 600; color: var(--tp-fg); }
.tp-form input::placeholder { text-overflow: ellipsis; }
.tp-card > .tp-form { margin-top: 24px; }
.tp-card > .tp-form + .tp-small { margin-top: 16px; }
.tp-form .tp-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-form .tp-choice label { flex-direction: row; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--tp-line); border-radius: 8px; font-weight: 500; color: var(--tp-fg-2); cursor: pointer; }
.tp-form .tp-choice input { width: auto; height: auto; accent-color: var(--tp-accent); }
.tp-form button {
	align-self: flex-start;
	height: 42px;
	padding: 0 20px;
	border: 0;
	border-radius: 8px;
	background: var(--tp-accent);
	color: var(--tp-accent-ink);
	font-family: var(--tp-sans);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
@media (max-width: 780px) { .tp-form .tp-form__row { grid-template-columns: minmax(0, 1fr); } }

/* ═══ Footer ═══════════════════════════════════════════════════════════════════════════════════════ */
.tp-footer {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 48px;
	margin: 0 !important;
	padding: 64px var(--tp-pad-inline) 40px;
	background: var(--tp-bg);
	border-top: 1px solid var(--tp-line-soft);
}
.tp-footer__grid { display: grid; grid-template-columns: 3fr 2fr 2fr 2fr 3fr; gap: 24px; margin: 0; }
.tp-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.tp-footer__brand img { width: 153px; height: 34px; display: block; }
.tp-footer__brand p { margin: 0; max-width: 300px; font-size: 14px; line-height: 22px; color: var(--tp-fg-2); }
.tp-footer__brand p + p { font-size: 13px; line-height: 20px; color: var(--tp-fg-3); }
.tp-footer__col { display: flex; flex-direction: column; gap: 14px; }
.tp-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tp-footer a { font-size: 14px; line-height: 20px; color: var(--tp-fg-2); text-decoration: none; }
.tp-footer a:hover { color: var(--tp-fg-strong); }
.tp-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 0; padding-top: 24px; border-top: 1px solid var(--tp-line); }
.tp-footer__bottom p { margin: 0; font-size: 13px; line-height: 20px; color: var(--tp-fg-3); text-wrap: balance; }
.tp-footer__bottom ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
@media (max-width: 600px) {
	.tp-footer__bottom ul { column-gap: 14px; }
	.tp-footer__bottom ul a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
}
.tp-footer__bottom a { font-size: 13px; }
@media (max-width: 1100px) { .tp-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; } .tp-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 600px) { .tp-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tp-footer__col:last-child { grid-column: 1 / -1; } }
.tp-footer a { overflow-wrap: anywhere; }

/* ═══ Product-UI illustrations (Custom HTML blocks, tp-ui-*) ═══════════════════════════════════════
   Small, honest recreations of QuantumOps screens built from the app's own visual language. They carry
   fictional data only (Acme Corp, Ada Lovelace, Sam Technician — the same tenant the extension
   screenshots use). */
.tp-ui { box-sizing: border-box; margin: 0; background: var(--tp-bg); border: 1px solid var(--tp-line); border-radius: var(--tp-r-lg); overflow: hidden; font-size: 14px; color: var(--tp-fg); text-align: left; }
.tp-ui * { box-sizing: border-box; }
.tp-ui-bar { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 20px; border-bottom: 1px solid var(--tp-line-soft); }
.tp-ui-bar b { font-size: 14px; font-weight: 600; color: var(--tp-fg-strong); }
.tp-ui-bar .tp-ui-spacer { flex-grow: 1; }
.tp-ui-bar img { width: 22px; height: 22px; display: block; }
.tp-ui-live { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--tp-fg-2); }
.tp-ui-live::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--tp-accent); box-shadow: 0 0 0 3px var(--tp-accent-ring); }
.tp-ui-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; padding: 20px; background: var(--tp-surface); }
.tp-ui-body--one { grid-template-columns: minmax(0, 1fr); }
.tp-ui-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tp-ui-label { display: flex; align-items: center; gap: 10px; height: 24px; padding: 0 14px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tp-fg-3); }
.tp-ui-row { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 14px; border-radius: 8px; border-bottom: 1px solid var(--tp-line-soft); }
.tp-ui-row--on { background: var(--tp-accent-soft); border-bottom-color: transparent; }
.tp-ui-row .tp-ui-id { width: 52px; flex-shrink: 0; font-family: var(--tp-mono); font-size: 12px; color: var(--tp-fg-3); }
.tp-ui-row--on .tp-ui-id { color: var(--tp-accent-text); }
.tp-ui-row .tp-ui-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex-grow: 1; }
.tp-ui-row .tp-ui-main b { font-size: 14px; font-weight: 500; color: var(--tp-fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-ui-row .tp-ui-main span { font-size: 12px; color: var(--tp-fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-ui-row .tp-ui-num { width: 40px; flex-shrink: 0; text-align: right; font-family: var(--tp-mono); font-size: 12px; color: var(--tp-fg-2); }
.tp-ui-pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0; line-height: 1; white-space: nowrap; background: var(--tp-surface-3); color: var(--tp-fg-2); flex-shrink: 0; }
.tp-ui-pill--on { background: var(--tp-accent-soft); color: var(--tp-accent-text); }
.tp-ui-pill--danger { background: var(--tp-pill-danger-bg); color: var(--tp-pill-danger-fg); }
.tp-ui-pill--warn { background: var(--tp-pill-warn-bg); color: var(--tp-pill-warn-fg); }
.tp-ui-pill--info { background: var(--tp-pill-info-bg); color: var(--tp-pill-info-fg); }
.tp-ui-pill--violet { background: var(--tp-pill-violet-bg); color: var(--tp-pill-violet-fg); }
.tp-ui-card { display: flex; flex-direction: column; gap: 0; padding: 20px; background: var(--tp-surface-2); border: 1px solid var(--tp-line); border-radius: var(--tp-r-md); min-width: 0; }
.tp-ui-card h4 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--tp-fg-strong); }
.tp-ui-card .tp-ui-sub { margin: 4px 0 0; font-size: 13px; color: var(--tp-fg-3); }
.tp-ui-card .tp-ui-title { margin: 14px 0 0; font-size: 15px; font-weight: 600; color: var(--tp-fg-strong); }
.tp-ui-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 14px 0 0; font-size: 13px; }
.tp-ui-kv dt { color: var(--tp-fg-3); }
.tp-ui-kv dd { margin: 0; color: var(--tp-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-ui-meter { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; font-size: 13px; color: var(--tp-fg-3); }
.tp-ui-meter > i { flex-grow: 1; height: 4px; border-radius: 999px; background: var(--tp-surface-3); overflow: hidden; }
.tp-ui-meter > i > i { display: block; height: 100%; border-radius: inherit; background: var(--tp-accent); }
.tp-ui-meter > span:last-child { font-family: var(--tp-mono); font-size: 12px; color: var(--tp-fg); }
.tp-ui-actions { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; }
.tp-ui-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 6px; font-size: 13px; font-weight: 500; background: var(--tp-surface-3); color: var(--tp-fg); }
.tp-ui-btn--primary { background: var(--tp-accent); color: var(--tp-accent-ink); }
/* A message is ordinary flowing text (so <b> and links stay inline); its meta line, code and actions are blocks */
.tp-ui-msg { display: block; padding: 12px 14px; border-radius: var(--tp-r-md); background: var(--tp-surface-2); border: 1px solid var(--tp-line); font-size: 14px; line-height: 21px; color: var(--tp-fg); }
.tp-ui-msg--me { align-self: flex-end; max-width: 80%; background: var(--tp-surface-3); border-color: transparent; }
.tp-ui-msg small { display: block; margin-bottom: 6px; font-size: 12px; color: var(--tp-fg-3); }
.tp-ui-msg > .tp-ui-code, .tp-ui-msg > .tp-ui-actions { margin-top: 8px; }
.tp-ui-approval { border-left: 3px solid var(--tp-violet); }
.tp-ui-code { font-family: var(--tp-mono); font-size: 12px; color: var(--tp-fg-2); background: var(--tp-bg); border-radius: 6px; padding: 8px 10px; overflow-wrap: anywhere; }
.tp-ui-code code { font: inherit; color: inherit; background: none; padding: 0; }
@media (max-width: 900px) {
	.tp-ui-body { grid-template-columns: minmax(0, 1fr); }
	.tp-ui-hide-sm { display: none !important; }
}
@media (max-width: 600px) {
	.tp-ui-row .tp-ui-pill:not(.tp-ui-keep) { display: none; }
}

/* ═══ Editor tweaks ════════════════════════════════════════════════════════════════════════════════ */
.editor-styles-wrapper { background: var(--tp-bg); color: var(--tp-fg); font-family: var(--tp-sans); }
.editor-styles-wrapper .tp-header { position: static; }
.tp-header > .screen-reader-text-wrap { position: absolute; margin: 0; }

/* ═══ Badges ═══════════════════════════════════════════════════════════════════════════════════════
   tp-badge: a small pill paragraph (e.g. "Add-on" on a card or next to a section title). */
.tp-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	height: 22px;
	margin: 0;
	padding: 0 9px;
	border-radius: 999px;
	border: 1px solid var(--tp-line-strong);
	font-size: 12px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--tp-fg-2);
	white-space: nowrap;
}
.tp-badge--new { border-color: var(--tp-accent-line); color: var(--tp-accent-text); background: var(--tp-accent-soft); }
.tp-badge--addon { border-color: var(--tp-badge-addon-line); color: var(--tp-badge-addon-fg); background: var(--tp-badge-addon-bg); }
.tp-card > .tp-badge { margin-bottom: 14px; }
.tp-card.tp-ico > .tp-badge { position: absolute; top: 33px; right: 24px; margin: 0; }
.tp-head > .tp-badge { margin-top: -4px; }
.tp-ui-why { margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 11px; color: var(--tp-info); background: var(--tp-info-soft); }
/* Utility: hide on phones (e.g. the 2nd and 3rd of three panel screenshots) */
@media (max-width: 780px) { .tp-hide-phone { display: none !important; } }
.tp-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; align-items: start; }
.tp-panels .tp-window { max-width: none; }
@media (max-width: 780px) { .tp-panels { grid-template-columns: minmax(0, 1fr); } .tp-panels .tp-window { max-width: 382px; margin-inline: auto; } }
.tp-caption { margin: 16px 0 0 !important; font-size: 13px; line-height: 20px; color: var(--tp-fg-3); }

/* Utility: keep a phrase on one line (product names, "AES-256") */
.tp-nowrap { white-space: nowrap; }
/* Phone tap targets: the menu toggle and the inline arrow links */
.tp-header .wp-block-navigation__responsive-container-open { padding: 10px; margin: -10px; }
@media (max-width: 780px) { .tp-link a, .tp-cta .tp-contact a { display: inline-block; padding-block: 12px; margin-block: -12px; } }
@media (max-width: 420px) { .tp-buttons .wp-block-button__link { padding: 0 14px; } }
/* Contact hero: title and contact rows share the left column with the form beside them */
.tp-contact-hero .tp-split .tp-display { margin-top: 0; font-size: clamp(48px, 5vw, 72px); }
.tp-contact-hero .tp-split .tp-rows { margin-top: 12px; }
.tp-row a { text-decoration: none; }
.tp-row a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Phones: each item of a hero proof line on its own line (the · separators become breaks) */
@media (max-width: 780px) { .tp-meta span[aria-hidden] { display: block; height: 4px; overflow: hidden; color: transparent; } }
/* A stand-alone kicker labels the grid right after it */
.tp-section > .tp-kicker + .tp-grid { margin-top: calc(14px - var(--tp-section-gap)); }
/* Two side-panel shots side by side */
.tp-panels--2 { grid-template-columns: repeat(2, minmax(0, 382px)); justify-content: center; gap: 48px; }
@media (max-width: 780px) { .tp-panels--2 { grid-template-columns: minmax(0, 1fr); } }
/* Illustration rows wrap their detail line on phones instead of cutting it off */
@media (max-width: 600px) { .tp-ui-row .tp-ui-main span { white-space: normal; } .tp-ui-row .tp-ui-id { width: auto; min-width: 24px; } .tp-ui-row { gap: 10px; } }
/* Utility: show only on phones (the pair of .tp-hide-phone) */
.tp-only-phone { display: none !important; }
@media (max-width: 780px) { .tp-only-phone { display: block !important; } }
.tp-ui-actions { flex-wrap: wrap; }
@media (max-width: 600px) { .tp-footer__bottom .tp-sep { display: none; } .tp-footer__bottom .tp-sep + span { display: block; } }
/* Splits: WordPress core forces .wp-block-columns { align-items: normal !important }, so centre each column's content
   from inside the column instead (columns are flex columns that stretch to the row height) */
.tp-split:not(.tp-split--top) > .wp-block-column { justify-content: center; }
/* A single side-panel window in a split sits on the page gutter, like everything else */
@media (min-width: 901px) {
	.tp-split > .wp-block-column:last-child > .tp-window:has(.tp-shot--panel) { margin-inline: auto 0; }
	.tp-split > .wp-block-column:first-child > .tp-window:has(.tp-shot--panel) { margin-inline: 0 auto; }
}
/* Phones: side-panel shots show their top 620px and fade out, instead of a full phone screen each */
@media (max-width: 780px) {
	.tp-window .tp-shot--panel img { max-height: 620px; object-fit: cover; object-position: top; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }
}
/* Phones: full app screens pan at a readable size instead of shrinking to texture */
@media (max-width: 780px) {
	.tp-shot:has(img[src*="/shots/app-"]) { overflow-x: auto; scrollbar-width: thin; max-width: 100%; }
	.tp-window:has(img[src*="/shots/app-"]) { max-width: 100%; min-width: 0; }
	.tp-shot img[src*="/shots/app-"] { width: 780px; max-width: none; }
}
/* Code inside card copy reads as a quiet chip */
.tp-card > p code { font-size: 13px; padding: 1px 6px; border-radius: 4px; background: var(--tp-surface-3); color: var(--tp-fg); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tp-ui-msg .tp-ui-code { display: block; margin-top: 8px; }
/* A panel capture inside an illustration fades out rather than ending on a hard cut */
.tp-ui-body .tp-ui-col > img { -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent); mask-image: linear-gradient(to bottom, #000 86%, transparent); }
/* Extension page: the Chat and Approvals panels in one row share the Chat capture's height */
@media (min-width: 781px) { #chat .tp-grid .tp-shot--panel img { aspect-ratio: 760 / 1666; object-fit: cover; object-position: top; } }
.tp-card--lg.tp-ico > .tp-badge { top: 41px; right: 32px; }
.tp-checks li, .tp-row > p { text-wrap: pretty; }
.tp-faq summary { word-spacing: 0.05em; }
.tp-badge { word-spacing: 0.12em; }
.tp-ui-body > .tp-ui-card { align-self: start; }
.tp-split--top.wp-block-columns > .wp-block-column > .tp-card:only-child { flex: 1 1 auto; }
@media (max-width: 780px) { .tp-card__foot a { display: inline-block; padding-block: 12px; margin-block: -12px; } }
/* Price rows: subtitles take the same height so the tier tables line up; side cards match the price-card titles */
@media (min-width: 1101px) { .tp-grid--3 > .tp-price-card > h3 + p:not([class]) { min-height: 48px; } }
.tp-grid:has(> .tp-price-card) > .tp-card:not(.tp-price-card) > .tp-kicker { margin-bottom: 6px; }
.tp-grid:has(> .tp-price-card) > .tp-card:not(.tp-price-card) > h3 { font-size: 24px; line-height: 30px; letter-spacing: -0.015em; word-spacing: 0; }
/* Hero panel crops fade out at the bottom instead of ending on a hard cut */
.tp-panels .tp-shot { position: relative; }
.tp-panels .tp-shot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(to bottom, transparent, var(--tp-bg)); pointer-events: none; }
/* Header: the page you are on */
.tp-header .wp-block-navigation-item__content[aria-current="page"] { color: var(--tp-fg-strong); }
/* Message mocks: the bold line right after the meta line is the message title */
.tp-ui-msg > small + b { display: block; margin-bottom: 2px; }
/* Instrument Sans' word space is narrow at 12px: give the · separators in mock meta lines room */
.tp-ui-row .tp-ui-main span, .tp-ui-live, .tp-ui-sub, .tp-ui-msg small { word-spacing: 0.14em; }
.tp-ui-code { text-wrap: pretty; }
.tp-duo { align-items: center; }
.tp-badge { letter-spacing: 0; }
/* Utility: balance a phrase inside a heading line */
.tp-balance { display: inline-block; text-wrap: balance; }
@media (max-width: 420px) { .tp-section--hero .tp-display { font-size: 44px; } }
/* Phones page: cap the tall Call-tab panel on desktop so it doesn't dwarf the rows beside it */
@media (min-width: 901px) { #call-taking .tp-split .tp-window .tp-shot--panel img { max-height: 740px; object-fit: cover; object-position: top; -webkit-mask-image: linear-gradient(#000 90%, transparent); mask-image: linear-gradient(#000 90%, transparent); } }
/* Phones: these two app screens crop to their subject instead of panning from the sidebar */
@media (max-width: 780px) {
	.tp-shot:has(img[src*="/shots/app-call-recordings"]), .tp-shot:has(img[src*="/shots/app-identity-verification"]) { overflow-x: hidden; }
	.tp-shot img[src*="/shots/app-call-recordings"], .tp-shot img[src*="/shots/app-identity-verification"] { width: 100%; max-width: 100%; height: 440px; object-fit: cover; }
	.tp-shot img[src*="/shots/app-call-recordings"] { object-position: 50% 20%; }
	.tp-shot img[src*="/shots/app-identity-verification"] { object-position: 55% 60%; }
}
/* Stacked splits (phones): a column never grows past the page, even in the column-reverse variant */
@media (max-width: 900px) { .tp-split.wp-block-columns > .wp-block-column { width: 100%; max-width: 100%; } }
/* Integrations hub: HaloPSA as a short band on top, the eight categories in two rows of four below */
@media (min-width: 1101px) {
	.tp-hub { grid-template-columns: minmax(0, 1fr); }
	.tp-hub > .tp-grid--2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tp-hub__center { justify-content: flex-start; }
.tp-hub__center > p { max-width: 720px; }
.tp-hub .tp-card > .tp-tags:last-child { margin-top: 12px; padding-top: 0; }

/* ═══ 2026-10 updates ══════════════════════════════════════════════════════════════════════════════ */
/* TechPulse Cloud Concepts logo: white artwork on dark, the colour original on light (no filter) */
.tp-logo { display: flex; align-items: center; flex-shrink: 0; margin: 0; line-height: 0; }
.tp-logo img { display: block; width: auto !important; height: 40px !important; max-width: none; filter: none !important; }
.tp-logo img.tp-on-light { display: none !important; }
:root[data-theme="light"] .tp-logo img.tp-on-dark { display: none !important; }
:root[data-theme="light"] .tp-logo img.tp-on-light { display: block !important; }
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) .tp-logo img.tp-on-dark { display: none !important; }
	:root:not([data-theme="dark"]) .tp-logo img.tp-on-light { display: block !important; }
}
.tp-footer__brand .tp-logo img { height: 40px !important; }
@media (max-width: 780px) { .tp-header .tp-logo img { height: 32px !important; } }
/* Header: the full menu needs about 1200px; below that the menu button opens the overlay (WordPress core switches at 600px) */
@media (max-width: 1199px) {
	.tp-header { gap: 16px; }
	.tp-header .tp-nav { order: 3; flex-grow: 0; }
	.tp-header .tp-header__actions { margin-left: auto; }
	.tp-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
	.tp-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
}
/* SOC 2 band on the home page security section */
.tp-soc2.tp-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: center; padding: 28px 32px; background: var(--tp-accent-soft); }
.tp-soc2 > * { grid-column: 1; }
.tp-soc2 > .tp-kicker + * { margin-top: 10px; }
.tp-soc2 > h3 { margin-top: 10px; font-size: 24px; line-height: 30px; letter-spacing: -0.015em; }
.tp-soc2 > p:not([class]) { max-width: 680px; color: var(--tp-fg); }
.tp-card.tp-soc2 > .tp-buttons { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding: 0; }
@media (max-width: 780px) { .tp-soc2.tp-card { display: flex; padding: 24px; } .tp-card.tp-soc2 > .tp-buttons { padding-top: 20px; } }
/* Contact: the HaloPSA ticket form embed (agent.techpulse.com) picks up the tp-form look */
.tp-halo-form { margin-top: 24px; }
.tp-halo-form #halo-form { display: flex; flex-direction: column; gap: 18px; }
.tp-halo-form button, .tp-halo-form input[type="submit"] { align-self: flex-start; height: 42px; padding: 0 20px; border: 0; border-radius: 8px; background: var(--tp-accent); color: var(--tp-accent-ink); font: 600 15px var(--tp-sans); cursor: pointer; }
.tp-halo-form button:hover, .tp-halo-form input[type="submit"]:hover { background: var(--tp-accent-hover); }