:root {
	--color-paper: #ffffff;
	--color-paper-soft: #f5f8f5;
	--color-ink: #172d29;
	--color-ink-soft: #536660;
	--color-rule: #d9e5dd;
	--color-green: #087e68;
	--color-deep: #103f36;
	--color-pink: #e64b79;
	--color-focus: #efae26;
	--font-display: 'Trebuchet MS', 'Segoe UI Variable Display', 'Segoe UI', sans-serif;
	--font-body: 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
	--font-utility: 'Consolas', 'Courier New', monospace;
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2rem;
	--space-xl: 3rem;
	--space-2xl: 4.5rem;
	--space-3xl: 7rem;
	--text-base: 1rem;
	--text-2xs: calc(var(--text-base) * 0.6875);
	--text-xs: calc(var(--text-base) * 0.75);
	--text-sm: calc(var(--text-base) * 0.875);
	--text-md: calc(var(--text-base) * 1.125);
	--text-lg: calc(var(--text-base) * 1.25);
	--text-xl: calc(var(--text-base) * 1.5);
	--text-2xl: calc(var(--text-base) * 1.75);
	--text-3xl: calc(var(--text-base) * 2.25);
	--text-4xl: calc(var(--text-base) * 2.75);
	--text-5xl: calc(var(--text-base) * 3.75);
	--text-6xl: calc(var(--text-base) * 4.25);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-short: 220ms;
	--radius-card: 12px;
	--radius-pill: 999px;
	--radius-input: 8px;
}
/* Hallmark · genre: modern editorial · macrostructure: split directory / open detail / directed pair · design-system: design.md · designed-as-app
 * pre-emit critique: P4 H4 E4 S4 R4 V4 */
* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
	overflow-x: clip;
}
body {
	margin: 0;
	background: var(--color-paper);
	color: var(--color-ink);
	font: var(--text-base)/1.6 var(--font-body);
	overflow-x: clip;
}
a {
	color: inherit;
}
img {
	max-width: 100%;
}
[hidden] {
	display: none !important;
}
.skip-link,
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}
.skip-link:focus {
	clip: auto;
	width: auto;
	height: auto;
	z-index: 100;
	padding: var(--space-sm);
	background: var(--color-paper);
}
:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 3px;
}
.integration-site {
	overflow: hidden;
}
.site-container,
.wide-band__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 24px;
}
.site-container {
	padding-bottom: var(--space-3xl);
}
.breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 24px 0;
	color: var(--color-ink-soft);
	font-size: var(--text-xs);
}
.breadcrumbs a {
	text-decoration: none;
}
.breadcrumbs a:hover {
	text-decoration: underline;
}
.breadcrumbs [aria-current] {
	color: var(--color-ink);
}
.eyebrow {
	margin: 0 0 10px;
	color: var(--color-green);
	font: 700 var(--text-2xs)/1.4 var(--font-utility);
	text-transform: uppercase;
	letter-spacing: 0.13em;
}
h1,
h2,
h3 {
	font-family: var(--font-display);
	color: var(--color-ink);
	line-height: 1.13;
	overflow-wrap: anywhere;
	min-width: 0;
}
h1 {
	letter-spacing: -0.055em;
}
h2 {
	letter-spacing: -0.04em;
}
p {
	max-width: 75ch;
}
.button-primary,
.button-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 11px 21px;
	text-decoration: none;
	font-size: var(--text-sm);
	font-weight: 700;
	white-space: nowrap;
	transition:
		background var(--dur-short) var(--ease-out),
		transform var(--dur-short) var(--ease-out);
}
.button-primary {
	background: var(--color-deep);
	color: #fff;
	border: 1px solid var(--color-deep);
	border-radius: var(--radius-input);
}
.button-primary:hover {
	background: var(--color-green);
	transform: translateY(-2px);
}
.button-secondary {
	color: var(--color-deep);
	border-bottom: 1px solid currentColor;
	padding-inline: 4px;
}
.button-secondary:hover {
	color: var(--color-green);
}
.card-arrow {
	margin-left: auto;
	color: var(--color-green);
	font-size: var(--text-md);
	line-height: 1;
}
.initial {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	background: var(--color-green);
	color: #fff;
	border-radius: 8px;
	font: 700 var(--text-xl)/1 var(--font-display);
}
.icon-stack {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: var(--icon-size);
	height: var(--icon-size);
}
.icon-stack > .initial {
	width: 100%;
	height: 100%;
}
.icon-stack > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
	opacity: 0;
}
.icon-stack.is-loaded > img {
	opacity: 1;
}

/* Shell */
.site-header {
	background: var(--color-deep);
	color: #fff;
	border-bottom: 1px solid #ffffff24;
}
.site-header__inner {
	max-width: 1248px;
	min-height: 76px;
	margin: auto;
	padding: 12px 24px;
	display: flex;
	align-items: center;
	gap: 22px;
}
.site-logo {
	display: inline-flex;
	align-items: center;
	flex: none;
}
.site-logo img {
	display: block;
	width: 164px;
	height: auto;
}
.desktop-nav {
	margin-left: auto;
}
.desktop-nav > ul {
	display: flex;
	align-items: center;
	gap: 3px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.site-header a,
.site-header summary {
	font-size: var(--text-sm);
	font-weight: 650;
	text-decoration: none;
	color: #fff;
}
.desktop-nav > ul > li > a,
.desktop-nav > ul > li > details > summary {
	padding: 10px 11px;
}
.desktop-nav a:hover,
.desktop-nav summary:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}
.desktop-nav a[aria-current] {
	text-decoration: underline;
	text-decoration-color: var(--color-pink);
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
}
.nav-dropdown {
	position: relative;
}
.nav-dropdown summary {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	list-style: none;
}
.nav-dropdown summary::-webkit-details-marker {
	display: none;
}
.nav-dropdown summary::after {
	content: '';
	display: block;
	flex: none;
	width: 5px;
	height: 5px;
	margin: -3px 0 0 1px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}
.nav-dropdown[open] > summary::after {
	margin-top: 3px;
	transform: rotate(225deg);
}
.nav-dropdown > ul {
	position: absolute;
	z-index: 30;
	left: 0;
	top: 100%;
	min-width: 194px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--color-paper);
	border: 1px solid var(--color-rule);
	box-shadow: 0 18px 35px #08291f24;
	border-radius: 8px;
}
.nav-dropdown > ul a {
	display: block;
	color: var(--color-ink);
	padding: 8px 10px;
	white-space: nowrap;
}
.nav-dropdown > ul a:hover {
	background: var(--color-paper-soft);
	text-decoration: none;
}
.dashboard-link {
	flex: none;
	border: 1px solid #ffffff75;
	padding: 9px 15px;
	border-radius: 6px;
}
.dashboard-link,
.site-header nav a,
.site-header summary {
	white-space: nowrap;
}
.dashboard-link:hover {
	background: #ffffff16;
	text-decoration: none !important;
}
.mobile-nav {
	display: none;
}
.site-footer {
	background: var(--color-deep);
	color: #fff;
}
.site-footer__inner {
	max-width: 1248px;
	margin: auto;
	padding: 72px 24px 26px;
}
.footer-columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-xl);
}
.site-footer h2 {
	color: #fff;
	font: 700 var(--text-md)/1.3 var(--font-display);
	margin: 0 0 18px;
}
.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-footer li {
	margin: 0 0 11px;
}
.site-footer a {
	color: #deeee6;
	text-decoration: none;
	font-size: var(--text-sm);
}
.site-footer a:hover {
	text-decoration: underline;
}
.footer-legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: var(--space-2xl);
	padding-top: 22px;
	border-top: 1px solid #ffffff36;
	font-size: var(--text-xs);
	color: #c6e0d3;
}
.footer-legal nav ul {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}
.footer-legal nav li {
	margin: 0;
}
.footer-legal nav a {
	font-size: var(--text-xs);
}
.footer-legal nav a {
	white-space: nowrap;
}

/* Directory introduction and connected controls */
.hub-page {
	padding-bottom: var(--space-3xl);
}
.hub-hero {
	padding: 27px 0 24px;
	border-bottom: 1px solid var(--color-rule);
}
.hub-hero__copy {
	max-width: 880px;
}
.hub-hero__copy h1 {
	font-size: clamp(var(--text-4xl), 4.4vw, var(--text-5xl));
	line-height: 1.04;
	margin: 8px 0 14px;
	max-width: 14ch;
}
.hub-hero__copy h1 em {
	font-style: normal;
	color: var(--color-green);
}
.hub-hero__copy > p:not(.eyebrow) {
	max-width: 57ch;
	margin: 0;
	color: var(--color-ink-soft);
	font-size: var(--text-md);
	line-height: 1.55;
}
.hub-hero__proof {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	color: var(--color-ink-soft);
	font-size: var(--text-xs);
}
.hub-hero__proof strong {
	color: var(--color-ink);
}
.trust-line__mark {
	display: inline-grid;
	place-items: center;
	width: 25px;
	height: 25px;
	color: var(--color-pink);
	font-size: var(--text-xl);
	line-height: 1;
}
.directory-browser {
	margin-top: 22px;
}
.directory-controls {
	display: grid;
	grid-template-columns: minmax(220px, 0.65fr) minmax(0, 1fr);
	align-items: end;
	column-gap: 34px;
	padding: 18px 26px 12px;
	background: var(--color-paper-soft);
	border-top: 4px solid var(--color-green);
}
.directory-controls__heading h2 {
	font-size: var(--text-xl);
	margin: 0;
}
.directory-controls__heading .eyebrow {
	margin-bottom: 4px;
}
.search-box {
	display: flex;
	align-items: center;
	width: 100%;
	background: #fff;
	border: 1px solid #b8cfc2;
	border-radius: var(--radius-input);
	padding: 0 13px;
}
.search-box:focus-within {
	outline: 3px solid var(--color-focus);
}
.search-box input {
	width: 100%;
	border: 0;
	background: transparent;
	outline: 0;
	padding: 13px 0;
	font: inherit;
	color: var(--color-ink);
}
.search-box > span:last-child {
	font-size: var(--text-xl);
	color: var(--color-green);
}
.hub-tabs {
	grid-column: 1/-1;
	display: flex;
	flex-wrap: wrap;
	gap: 23px;
	margin-top: 18px;
	border-bottom: 1px solid var(--color-rule);
}
.hub-tabs button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 -1px;
	padding: 0 0 10px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	cursor: pointer;
	color: var(--color-ink-soft);
	font: 650 var(--text-sm)/1.3 var(--font-body);
	white-space: nowrap;
}
.hub-tabs button:hover {
	color: var(--color-green);
}
.hub-tabs button[aria-pressed='true'] {
	color: var(--color-green);
	border-bottom-color: var(--color-green);
}
.hub-tabs button span {
	font: 600 var(--text-xs) var(--font-utility);
}
.results-status {
	grid-column: 1/-1;
	margin: 11px 0 0;
	color: var(--color-ink-soft);
	font-size: var(--text-xs);
}
.directory-group {
	margin-top: 18px;
}
.directory-group + .directory-group {
	margin-top: var(--space-2xl);
}
.directory-group .section-heading {
	margin-bottom: 16px;
}
.directory-group .section-heading h2 {
	font-size: clamp(var(--text-2xl), 3.2vw, var(--text-4xl));
}
.section-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 24px;
}
.section-heading h2,
.content-section > h2 {
	font-size: var(--text-2xl);
	margin: 0;
}
.section-heading > p {
	max-width: 360px;
	margin: 0;
	color: var(--color-ink-soft);
	font-size: var(--text-sm);
}
.addon-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--color-rule);
	border-left: 1px solid var(--color-rule);
}
.addon-card {
	position: relative;
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) 14px;
	gap: 14px;
	min-height: 144px;
	padding: 22px;
	border-right: 1px solid var(--color-rule);
	border-bottom: 1px solid var(--color-rule);
	text-decoration: none;
	background: #fff;
	transition: background var(--dur-short) var(--ease-out);
}
.addon-card:hover {
	background: var(--color-paper-soft);
}
.addon-card__icon {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	background: #fff;
	border: 1px solid var(--color-rule);
	border-radius: 8px;
	padding: 6px;
}
.addon-card__icon img {
	width: 38px;
	height: 38px;
	object-fit: contain;
}
.addon-card__icon .initial {
	width: 38px;
	height: 38px;
	font-size: var(--text-lg);
}
.addon-card strong,
.addon-card small,
.addon-card__description {
	display: block;
}
.addon-card strong {
	font: 700 var(--text-md)/1.2 var(--font-display);
}
.addon-card small {
	margin: 5px 0 7px;
	color: var(--color-green);
	font: 700 var(--text-2xs)/1.3 var(--font-utility);
	text-transform: uppercase;
}
.addon-card__description {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: var(--color-ink-soft);
	font-size: var(--text-xs);
	line-height: 1.42;
}
.empty-message {
	padding: 28px 0;
	font-size: var(--text-base);
	color: var(--color-ink-soft);
}

/* Open detail mastheads */
.integration-page > .site-container:first-child {
	padding-bottom: 0;
}
.detail-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
	align-items: center;
	gap: clamp(35px, 6vw, 92px);
	padding: clamp(35px, 5vw, 72px) 0 clamp(50px, 6vw, 80px);
}
.hero-badges {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.hero-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 11px;
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-pill);
	color: var(--color-deep);
	font: 700 var(--text-2xs)/1.2 var(--font-utility);
	text-transform: uppercase;
	letter-spacing: 0.07em;
}
.hero-badge--category {
	border-color: color-mix(in srgb, var(--addon-color) 38%, var(--color-rule));
	background: color-mix(in srgb, var(--addon-color) 8%, white);
}
.hero-badge--access {
	background: var(--color-paper-soft);
}
.detail-hero h1 {
	font-size: clamp(var(--text-3xl), 4.9vw, var(--text-6xl));
	margin: 18px 0 22px;
	max-width: 770px;
}
.detail-hero__copy > p:not(.hero-support) {
	font-size: var(--text-md);
	line-height: 1.55;
	color: var(--color-ink-soft);
	margin: 0;
	max-width: 35em;
}
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-top: 32px;
}
.hero-support {
	margin: 18px 0 0;
	font-size: var(--text-xs);
	color: var(--color-ink-soft);
}
.hero-support a {
	color: var(--color-green);
	text-underline-offset: 3px;
}
.pair-icons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 13px;
	min-height: 285px;
	padding: 28px 18px;
	background: linear-gradient(115deg, color-mix(in srgb, var(--addon-color) 9%, white), color-mix(in srgb, var(--target-color) 9%, white));
	border: 1px solid var(--color-rule);
}
.pair-icons > span {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 44%;
	min-width: 0;
	min-height: 162px;
	padding: 16px 10px;
	background: #fff;
	border: 1px solid var(--color-rule);
	text-align: center;
}
.pair-icons__source {
	border-top: 4px solid var(--addon-color) !important;
}
.pair-icons__target {
	border-top: 4px solid var(--target-color) !important;
}
.pair-icons--single {
	--target-color: var(--color-green);
}
.pair-icons img {
	width: 64px;
	height: 64px;
	object-fit: contain;
}
.pair-icons .initial {
	width: 64px;
	height: 64px;
	font-size: var(--text-2xl);
}
.pair-icons strong {
	max-width: 100%;
	overflow-wrap: anywhere;
	font: 700 var(--text-xs)/1.2 var(--font-display);
}
.pair-icons b {
	color: var(--color-green);
	font-size: var(--text-xl);
}
.trust-line {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px 0;
	border-block: 1px solid var(--color-rule);
	font-size: var(--text-xs);
	color: var(--color-ink-soft);
}
.trust-line strong {
	color: var(--color-ink);
}
.trust-line > a {
	margin-left: auto;
	color: var(--color-green);
	text-decoration: none;
	font-weight: 650;
}
.trust-line > a:hover {
	text-decoration: underline;
}

/* Content and capabilities */
.integration-page .content-section {
	margin-top: var(--space-2xl);
}
.content-section > p,
.content-section li {
	max-width: 78ch;
}
.content-section p {
	color: var(--color-ink-soft);
}
.content-section p a {
	color: var(--color-green);
	text-underline-offset: 3px;
}
.section-heading {
	margin-bottom: 22px;
}
.feature-grid,
.collection-grid,
.workflow-examples,
.path-grid,
.related-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}
.feature-card,
.collection-card,
.path-grid article,
.workflow-example {
	padding: 23px;
	border: 1px solid var(--color-rule);
	background: #fff;
}
.feature-card {
	padding: 20px;
	text-align: left;
	background: color-mix(in srgb, var(--addon-color) 9%, #fff);
	border-color: color-mix(in srgb, var(--addon-color) 16%, #fff);
}
.feature-card h3,
.collection-card h3,
.path-grid h3,
.workflow-example h3 {
	font-size: var(--text-lg);
	margin: 0 0 10px;
}
.feature-card p,
.collection-card p,
.path-grid p,
.workflow-example p {
	font-size: var(--text-sm);
	line-height: 1.55;
	margin: 0;
	color: var(--color-ink-soft);
}
.collection-grid--details {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.collection-card details {
	margin-top: 14px;
}
.collection-card > ul {
	margin-top: 14px;
}
.collection-card summary {
	cursor: pointer;
	color: var(--color-green);
	font-weight: 700;
}
.collection-card h4 {
	margin: 14px 0 4px;
}
.collection-card ul {
	margin: 0;
	padding-left: 21px;
	font-size: var(--text-sm);
	color: var(--color-ink-soft);
}
.path-grid article span {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--color-rule);
	border-radius: 50%;
	color: var(--color-green);
	font: 700 var(--text-xs) var(--font-utility);
}
.path-grid h3 {
	margin-top: 16px;
}
.field-note {
	margin-top: var(--space-xl);
	padding: 20px 24px;
	border-left: 4px solid var(--addon-color, var(--color-green));
	background: var(--color-paper-soft);
}
.field-note h2 {
	margin: 0 0 6px;
	font-size: var(--text-xl);
}
.field-note p {
	margin: 0;
}
.workflow-grid {
	display: grid;
	grid-template-columns: 1fr 36px 1fr;
	align-items: stretch;
	gap: 16px;
}
.workflow-grid article {
	padding: 26px;
	border-top: 4px solid var(--addon-color);
	background: var(--color-paper-soft);
}
.workflow-grid article:last-child {
	border-top-color: var(--target-color);
}
.workflow-grid h3 {
	font-size: var(--text-lg);
	margin: 8px 0;
}
.workflow-grid p {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-ink-soft);
}
.workflow-arrow {
	display: grid;
	place-items: center;
	color: var(--color-green);
	font-size: var(--text-xl);
}
.step-label {
	font: 700 var(--text-2xs) var(--font-utility);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-green);
}
.example-section {
	max-width: 880px;
	padding: 0 0 0 24px;
	border-left: 3px solid var(--color-pink);
}
.example-section h2 {
	font-size: var(--text-xl);
	margin: 0 0 15px;
}
.answer-section {
	max-width: 850px;
}
.answer-section h3 {
	font-size: var(--text-lg);
	margin: 24px 0 6px;
}
.answer-section p {
	margin: 0 0 12px;
}
.choice-note {
	margin: 16px 0 0;
	color: var(--color-ink-soft);
}
.inputs-section > p {
	margin: 0 0 17px;
}
.inputs-section ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.inputs-section li {
	padding: 17px;
	border: 1px solid var(--color-rule);
	font-size: var(--text-sm);
}
.inputs-section li::before {
	content: '✓';
	color: var(--color-green);
	font-weight: 800;
	margin-right: 9px;
}
.setup-section {
	padding: 32px 36px;
	background: var(--color-paper-soft);
	border-left: 4px solid var(--color-green);
}
.setup-section ol {
	margin: 0;
	padding-left: 20px;
}
.setup-section li {
	padding: 5px 0;
}
.setup-section p:last-child {
	margin-bottom: 0;
}
.workflow-examples {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.workflow-example h3 a {
	text-decoration: none;
}
.workflow-example h3 a:hover {
	text-decoration: underline;
}
.workflow-example p {
	margin-bottom: 10px;
}
.workflow-example > a {
	color: var(--color-green);
	font-size: var(--text-sm);
	font-weight: 700;
	text-decoration: none;
}
.pair-examples .workflow-examples {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
.pair-examples .workflow-example {
	border: 1px solid var(--color-rule);
	padding: 22px;
}
.pair-examples .workflow-example h3 {
	margin: 0 0 16px;
}
.pair-examples .workflow-example ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 11px;
}
.pair-examples .workflow-example li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--color-ink-soft);
	font-size: var(--text-sm);
}
.pair-examples .workflow-example li img {
	width: 25px;
	height: 25px;
	object-fit: contain;
	flex: none;
}
.pair-examples .workflow-example p {
	margin: 14px 0 0;
}
.workflow-example > a:hover {
	text-decoration: underline;
}
.related-grid a {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 18px 20px;
	border: 1px solid var(--color-rule);
	text-decoration: none;
	font-weight: 700;
}
.related-grid a:hover {
	border-color: var(--color-green);
	background: var(--color-paper-soft);
}

/* Installation and discovery */
.getting-started {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(285px, 0.8fr);
	gap: clamp(24px, 4vw, 55px);
	align-items: center;
	margin-top: var(--space-2xl);
	padding: 34px;
	background: var(--color-paper-soft);
	border-top: 4px solid var(--color-green);
}
.getting-started h2 {
	font-size: var(--text-2xl);
	margin: 0 0 14px;
}
.getting-started p {
	margin: 0 0 11px;
	color: var(--color-ink-soft);
}
.getting-started p a {
	color: var(--color-green);
}
.getting-started strong {
	color: var(--color-ink);
}
.detail-installation ol {
	margin: 15px 0 20px;
	padding-left: 22px;
}
.detail-installation li {
	padding: 5px 0;
}
.installation-video lite-youtube {
	display: grid;
	place-items: center;
	position: relative;
	aspect-ratio: 16/9;
	overflow: hidden;
	background: var(--color-deep) url('https://i.ytimg.com/vi/BTLjA_qyFuE/hqdefault.jpg') center/cover no-repeat;
}
.installation-video lite-youtube::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #0005;
}
.installation-video .lty-playbtn {
	position: relative;
	z-index: 1;
	width: 68px;
	height: 48px;
	border: 0;
	border-radius: 10px;
	background: #e6213b;
	color: #fff;
	cursor: pointer;
	font-size: var(--text-lg);
}
.installation-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.installation-video > p {
	font-size: var(--text-xs);
	text-align: right;
	margin: 7px 0 0;
}
.wide-band {
	margin-top: var(--space-3xl);
	padding: var(--space-2xl) 0;
	background: var(--color-paper-soft);
	border-block: 1px solid var(--color-rule);
}
.wide-band.wordpress-destinations,
.wide-band.external-services {
	margin-top: 0;
	background: #fff;
}
.wide-band.related-pair-band {
	background: var(--color-paper-soft);
}
.wide-band .section-heading h2 {
	max-width: 880px;
}
.addon-link-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
.addon-link-card {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 78px;
	min-width: 0;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--color-rule);
	text-decoration: none;
	font-weight: 700;
	font-size: var(--text-sm);
	line-height: 1.25;
}
.addon-link-card:hover {
	border-color: var(--color-green);
	background: #fafeff;
}
.addon-link-card__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
}
.addon-link-card__icon img {
	width: 38px;
	height: 38px;
	object-fit: contain;
}
.addon-link-card__icon .initial {
	width: 38px;
	height: 38px;
	font-size: var(--text-md);
}
.addon-link-card .card-arrow {
	font-size: var(--text-sm);
}
.related-pair-band p {
	margin: 21px 0 0;
	color: var(--color-ink-soft);
}
.related-pair-band p a {
	color: var(--color-green);
}
.about-addon {
	max-width: 840px;
	margin-top: var(--space-2xl);
	padding-top: 25px;
	border-top: 1px solid var(--color-rule);
}
.about-addon .section-heading {
	margin-bottom: 10px;
}
.about-addon h2 {
	font-size: var(--text-xl);
}
.about-addon p {
	margin: 0 0 9px;
}
.about-addon a {
	color: var(--color-green);
	font-weight: 700;
}
.final-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	flex-wrap: wrap;
	margin-top: var(--space-2xl);
	padding: 34px 0;
	border-top: 2px solid var(--color-green);
}
.final-cta h2 {
	font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
	margin: 0 0 7px;
	max-width: 20em;
}
.final-cta p {
	margin: 0;
	color: var(--color-ink-soft);
}
.final-cta .button-primary {
	margin-left: auto;
}

@media (max-width: 1060px) {
	.desktop-nav > ul > li > a,
	.desktop-nav > ul > li > details > summary {
		padding-inline: 7px;
	}
	.addon-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.addon-link-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 900px) {
	.desktop-nav {
		display: none;
	}
	.dashboard-link {
		margin-left: auto;
	}
	.mobile-nav {
		display: block;
		position: relative;
	}
	.mobile-nav > summary {
		cursor: pointer;
		list-style: none;
		border: 1px solid #ffffff75;
		padding: 8px 12px;
		border-radius: 6px;
	}
	.mobile-nav > summary::-webkit-details-marker {
		display: none;
	}
	.mobile-nav > nav {
		position: absolute;
		z-index: 40;
		right: 0;
		top: calc(100% + 12px);
		width: min(350px, calc(100vw - 26px));
		padding: 18px;
		background: var(--color-deep);
		border: 1px solid #ffffff35;
		box-shadow: 0 16px 30px #06241d55;
	}
	.mobile-nav nav ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.mobile-nav nav > ul > li {
		padding: 8px 0;
		border-bottom: 1px solid #ffffff25;
	}
	.mobile-nav .nav-dropdown > ul {
		position: static;
		box-shadow: none;
		margin-top: 8px;
	}
	.detail-hero {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.pair-icons {
		max-width: 600px;
		width: 100%;
		min-height: 280px;
	}
}
@media (max-width: 700px) {
	.site-container,
	.wide-band__inner {
		padding-inline: 17px;
	}
	.site-container {
		padding-bottom: var(--space-2xl);
	}
	.site-header__inner {
		padding-inline: 17px;
		min-height: 68px;
	}
	.site-logo img {
		width: 142px;
	}
	.dashboard-link {
		font-size: var(--text-xs) !important;
		padding: 7px 9px;
	}
	.hub-hero {
		padding: 27px 0 28px;
	}
	.hub-hero__copy h1 {
		font-size: clamp(var(--text-3xl), 9vw, var(--text-5xl));
	}
	.hub-hero__copy > p:not(.eyebrow) {
		font-size: var(--text-base);
	}
	.directory-browser {
		margin-top: 15px;
	}
	.directory-controls {
		grid-template-columns: 1fr;
		gap: 13px;
		padding: 18px 17px 14px;
	}
	.hub-tabs {
		gap: 12px 19px;
		margin-top: 3px;
	}
	.results-status {
		margin-top: 0;
	}
	.section-heading {
		display: block;
	}
	.section-heading > p {
		margin-top: 10px;
	}
	.directory-group {
		margin-top: var(--space-xl);
	}
	.addon-grid,
	.feature-grid,
	.collection-grid,
	.collection-grid--details,
	.path-grid,
	.inputs-section ul,
	.workflow-examples,
	.related-grid,
	.pair-examples .workflow-examples {
		grid-template-columns: 1fr;
	}
	.addon-card {
		min-height: 110px;
	}
	.detail-hero {
		padding: 35px 0 45px;
	}
	.detail-hero h1 {
		font-size: clamp(var(--text-3xl), 9vw, var(--text-5xl));
	}
	.pair-icons {
		min-height: 230px;
	}
	.integration-page .content-section {
		margin-top: var(--space-xl);
	}
	.workflow-grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.workflow-arrow {
		height: 29px;
		transform: rotate(90deg);
	}
	.getting-started {
		grid-template-columns: 1fr;
		padding: 25px 20px;
	}
	.wide-band {
		margin-top: var(--space-2xl);
		padding: var(--space-xl) 0;
	}
	.addon-link-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.trust-line {
		flex-wrap: wrap;
	}
	.trust-line > a {
		margin-left: 35px;
	}
	.footer-columns {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}
	.site-footer__inner {
		padding: 50px 18px 25px;
	}
	.footer-legal {
		margin-top: var(--space-xl);
	}
}
@media (max-width: 480px) {
	.addon-link-grid {
		grid-template-columns: 1fr;
	}
	.pair-icons {
		gap: 5px;
		padding: 15px 8px;
	}
	.pair-icons > span {
		min-height: 135px;
	}
	.pair-icons img,
	.pair-icons .initial {
		width: 52px;
		height: 52px;
	}
	.pair-icons b {
		font-size: var(--text-lg);
	}
	.final-cta .button-primary {
		margin-left: 0;
	}
	.site-header__inner {
		gap: 8px;
	}
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.addon-card,
	.button-primary {
		transition: none;
		transform: none !important;
	}
}