/* The Partner Shop, version 3. Home page only. Loaded after site.css.
	 Nothing here hides content until a script runs: every block is visible as a still image. */

/* section rhythm: at most 112 px of padding between two sections */
main > .section, main > .cta { padding: 48px 0; }
@media (min-width: 1024px) { main > .section, main > .cta { padding: 56px 0; } }
/* the two bordered blocks carry their own inner padding */
main > .section--duo { padding-top: 32px; padding-bottom: 32px; }
@media (min-width: 1024px) { main > .section--duo { padding-top: 40px; padding-bottom: 40px; } }
.sec-head .label { color: var(--accent); }

/* hero */
.hero {
	position: relative;
	padding: calc(var(--nav-h) + 32px) 0 56px;
	background-image:
		linear-gradient(var(--grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: 64px 64px;
	border-bottom: 1px solid var(--border);
}

.hero__grid { display: grid; gap: 36px; }
.hero__eyebrow { color: var(--accent); margin-bottom: 20px; }

.line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.line__in { display: block; }

.hero__lead { margin-top: 24px; max-width: 26em; }
.hero__actions { margin-top: 28px; }

@keyframes rise {
	0% { opacity: 0; transform: translateY(0.4em); }
	100% { opacity: 1; transform: none; }
}

.js .line__in { animation: rise var(--dur-4) var(--ease-out) both; }
.js .line:nth-child(2) .line__in { animation-delay: 60ms; }
.js .line:nth-child(3) .line__in { animation-delay: 120ms; }

/* the partners, beside the headline */
.creds {
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	background: var(--surface-1);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.creds__h { padding: 12px 20px; border-bottom: 1px solid var(--border); color: var(--text-2); }
.cred { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 16px 20px; }
.cred + .cred { border-top: 1px solid var(--border); }
.cred img, .pp img { border-radius: 8px; object-fit: cover; filter: grayscale(1); }
.cred img { width: 56px; height: 56px; }
.cred__name { font-size: 17px; font-weight: 500; line-height: 1.3; }
.cred__role { margin-top: 3px; color: var(--accent); font-size: 11.5px; }
.cred__fact { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }

.nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--border-strong); }
.nums div { padding: 14px 12px 16px 20px; }
.nums div + div { border-left: 1px solid var(--border); padding-left: 16px; }
.nums dt { font-family: var(--font-display); font-weight: 380; font-size: 26px; line-height: 1.1; letter-spacing: -0.015em; white-space: nowrap; }
.nums dd { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-2); }
@media (max-width: 479px) {
	.nums { grid-template-columns: 1fr; }
	.nums div { display: grid; grid-template-columns: 116px 1fr; align-items: baseline; gap: 12px; padding: 12px 20px; }
	.nums div + div { border-left: 0; border-top: 1px solid var(--border); padding-left: 20px; }
	.nums dt { font-size: 22px; }
	.nums dd { margin: 0; }
}

@media (min-width: 1024px) {
	.hero { padding: calc(var(--nav-h) + 48px) 0 64px; }
	.hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end; }
}

/* From 1280 px the 76 px headline runs three lines. */
@media (min-width: 1280px) {
	.hero__grid { grid-template-columns: minmax(0, 13fr) minmax(0, 11fr); gap: 56px; }
}

/* the two states */
.ba { display: grid; gap: 12px; margin-top: 40px; }

.ba__panel {
	min-width: 0;
	padding: 14px 12px 12px;
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	background: var(--surface-1);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ba__panel--after {
	border-color: rgba(63, 193, 207, 0.55);
	background: linear-gradient(180deg, #13212A 0, var(--surface-1) 46%);
	box-shadow: inset 0 1px 0 rgba(127, 220, 230, 0.16), 0 0 0 1px rgba(63, 193, 207, 0.10), 0 32px 80px -48px rgba(63, 193, 207, 0.6);
}

.ba__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	padding: 2px 8px 12px;
	border-bottom: 1px solid var(--border);
}

.ba__tag { color: var(--text-2); }
.ba__panel--after .ba__tag { color: var(--accent); }

.ba__title {
	font-family: var(--font-display);
	font-weight: 380;
	font-size: 24px;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.ba__art { padding-top: 10px; }
.ba__svg { --dg-fs: 11px; }
.ba__svg--phone { --dg-fs: 11px; max-width: 420px; margin: 0 auto; }
@media (max-width: 639px) { .ba__panel { padding: 14px 8px 12px; } }
.ba__svg--phone text { letter-spacing: 0.03em; }
.ba__svg--wide { display: none; }

.ba__pts {
	display: grid;
	gap: 6px 16px;
	margin-top: 10px;
	padding: 12px 8px 2px;
	border-top: 1px solid var(--border);
	font-size: 14.5px;
	line-height: 1.35;
}

.ba__pts li { display: flex; align-items: center; gap: 10px; }
.ba__pts svg { flex: none; width: 24px; height: 24px; overflow: visible; }

.ba__arrow { justify-self: center; width: 28px; height: 28px; transform: rotate(90deg); }
.ba__arrow circle { fill: var(--surface-1); stroke: var(--accent); stroke-width: 1; }
.ba__arrow path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 640px) {
	.ba__svg--wide { display: block; }
	.ba__svg--phone { display: none; }
	.ba__panel { padding: 16px 16px 14px; }
	.ba__pts { grid-template-columns: repeat(3, auto); justify-content: space-between; }
	.ba__title { font-size: 26px; }
}

/* 900 to 1199 px: one panel per row, the drawing on the left and its three points beside it */
@media (min-width: 900px) and (max-width: 1199px) {
	.ba__panel {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 232px;
		grid-template-rows: auto 1fr;
		column-gap: 24px;
		padding: 20px;
	}

	.ba__art { grid-column: 1; grid-row: 1 / span 2; padding-top: 0; }
	.ba__head { grid-column: 2; display: block; padding: 4px 0 16px; }
	.ba__head .ba__tag { margin-bottom: 8px; }
	.ba__pts { grid-column: 2; grid-template-columns: 1fr; align-content: start; gap: 12px; margin-top: 0; padding: 16px 0 0; }
}

/* 1200 px and wider: the two states side by side */
@media (min-width: 1200px) {
	.ba { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 48px; }
	.ba__arrow { transform: none; }
}

/* drawing: state 1 */
.ba text { paint-order: stroke; stroke: var(--surface-1); stroke-width: 4px; stroke-linejoin: round; }
.field { fill: none; stroke: rgba(255, 255, 255, 0.10); stroke-width: 1.5; stroke-linecap: round; }
.sk { fill: var(--surface-2); stroke: var(--text-3); stroke-width: 1.5; }
.hand { fill: none; stroke: var(--border-control); stroke-width: 1.25; stroke-dasharray: 3 4; stroke-linecap: round; }
.hand--solid { stroke-dasharray: none; }
.who-bg { fill: var(--surface-3); stroke: var(--text-3); stroke-width: 1; }
.who-l { fill: none; stroke: var(--text-1); stroke-width: 1.5; stroke-linecap: round; }
.chip-b { fill: var(--node-lit); stroke: var(--accent); stroke-width: 1.25; }
.chip-t { fill: var(--accent-bright); font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; stroke: none; }
.chip-l { fill: none; stroke: var(--accent); stroke-width: 1.25; stroke-linecap: round; }
.ba__panel--before .srcs text { fill: var(--text-2); }

/* drawing: state 2 */
.halo { fill: rgba(63, 193, 207, 0.07); filter: blur(28px); }
.guide { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; stroke-dasharray: 1 5; }
.ln--src { stroke-width: 1; stroke-opacity: 0.75; }
.tick { fill: none; stroke: var(--accent-bright); stroke-width: 1.5; stroke-linecap: round; }
.ln--fb { stroke-dasharray: 2 4; stroke-width: 1.25; }
.ln--head { stroke-width: 1.5; }
.ba__panel--after .srcs { --mk-fill: var(--node-lit); }
.ba__panel--after .agents { --mk-fill: var(--node-lit); }
.ba__panel--after .gates, .ba__pts .gate { --lit: 1; }
.person { --lit: 1; }
.sig-t { fill: var(--signal); }
.sig-l { fill: none; stroke: var(--signal); stroke-width: 1.25; }
.layer-t { fill: var(--accent-bright); stroke: none !important; letter-spacing: 0.1em !important; }
.glow--res { fill: rgba(63, 193, 207, 0.22); }
/* two faint plates behind the shared layer, for depth */
.plate { fill: var(--surface-1); stroke: rgba(63, 193, 207, 0.22); stroke-width: 1; }
.plate--2 { stroke: rgba(63, 193, 207, 0.38); }
.ba .ln--layer { fill: #15333B; }
.void { fill: none; stroke: var(--text-3); stroke-width: 1.25; stroke-dasharray: 3 3; }
.void--sig { stroke: var(--signal); }

/* moving dots: slow, small, and absent when motion is reduced */
.dot {
	fill: none;
	stroke: var(--accent-bright);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: 0.01 200;
	opacity: 0;
}

.dot--src { animation: dot-src 12s linear infinite; animation-delay: calc(var(--i) * -1s); }
.dot--br { stroke-width: 5; filter: drop-shadow(0 0 4px rgba(127, 220, 230, 0.9)); animation: dot-br 14.4s linear infinite; animation-delay: calc(var(--i) * -4.8s); }
.dot--fb { animation: dot-fb 9.6s linear infinite; animation-delay: -2s; }
.dot--hand { stroke: var(--text-2); stroke-width: 3.5; animation: dot-hand 9s var(--ease-in-out) infinite alternate; animation-delay: calc(var(--i) * -2.3s); }

/* travel takes 2.4 s of the 12 s cycle */
@keyframes dot-src {
	0% { stroke-dashoffset: 0; opacity: 0; }
	3% { opacity: 0.95; }
	17% { opacity: 0.95; }
	20%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

/* travel takes 3.6 s of the 14.4 s cycle; the three lines take turns */
@keyframes dot-br {
	0% { stroke-dashoffset: 0; opacity: 0; }
	2% { opacity: 0.95; }
	23% { opacity: 0.95; }
	25%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

@keyframes dot-fb {
	0% { stroke-dashoffset: 0; opacity: 0; }
	4% { opacity: 0.9; }
	46% { opacity: 0.9; }
	50%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

@keyframes dot-hand {
	0% { stroke-dashoffset: -6; opacity: 0.8; }
	100% { stroke-dashoffset: -94; opacity: 0.8; }
}

/* paused while the figure is off-screen or the tab is hidden */
.is-off *, .tab-hidden [data-diagram] * { animation-play-state: paused !important; }

/* what most organizations are missing */
.pt { padding-top: 20px; border-top: 1px solid var(--border-strong); }
.pt__fig { width: 120px; height: 72px; margin-bottom: 14px; }
@media (min-width: 640px) { .pt__fig { width: 160px; height: 96px; } }
.pt__h { font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.pt p { margin-top: 8px; color: var(--text-2); font-size: 15.5px; }

.statg {
	display: grid;
	gap: 24px;
	margin-top: 40px;
	padding: 24px;
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	background: var(--bg);
}

.bars__h { margin-bottom: 10px; color: var(--text-2); }
.bars .stat__src { margin-top: 16px; }
.bar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 112px; align-items: center; gap: 12px; margin-top: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--text-2); }
.bar__t { display: block; height: 14px; border: 1px solid var(--border-strong); border-radius: 2px; }
.bar__t i { display: block; height: 100%; background: var(--accent); forced-color-adjust: none; }
.bars__words { margin-top: 8px; font-family: var(--font-mono); font-size: 20px; line-height: 1.3; color: var(--text-1); }
.bar__v { color: var(--text-1); }

@media (min-width: 900px) {
	.statg { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; padding: 28px 32px; }
}

/* what you get */
.steps { display: grid; gap: 36px 24px; }
.step { position: relative; min-width: 0; }
.step__fig { padding: 14px; }
.step__n { margin-top: 18px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.step__n span { margin-right: 8px; color: var(--accent); font-size: 14px; }
.step__n--sig span { color: var(--signal); }
.step__h { margin-top: 8px; font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.step > p:last-child { margin-top: 8px; color: var(--text-2); font-size: 15.5px; }

@media (min-width: 640px) { .steps { grid-template-columns: 1fr 1fr; } }

@media (min-width: 1024px) {
	.steps { grid-template-columns: repeat(4, 1fr); }
	/* a short line joins each figure to the next */
	.step:not(:last-child) .step__fig::after {
		content: '';
		position: absolute;
		left: 100%;
		top: 50%;
		width: 24px;
		border-top: 1.5px solid var(--accent);
	}
}

/* go-to-market and outbound agents */
.duo { display: grid; gap: 20px; }
.blk {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	background: var(--bg);
}

.blk__h { margin-top: 12px; font-family: var(--font-display); font-weight: 380; font-size: 28px; line-height: 1.12; letter-spacing: -0.015em; }
.blk__fig { margin: 24px 0 16px; }
.blk > p:not(.label):not(.blk__more) { margin-top: 18px; color: var(--text-2); }
.blk__more { margin-top: auto; padding-top: 14px; }
.blk__more .link-arrow { display: inline-block; padding: 9px 0; }
.blk__more .link-arrow__mark { display: inline-block; margin-left: 4px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; counter-reset: c; }
.chips li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border: 1px solid var(--border-strong);
	border-radius: 4px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-1);
}

.chips li::before { content: ''; width: 5px; height: 11px; border-left: 2px solid var(--signal); border-right: 2px solid var(--signal); }
.chips--n li { counter-increment: c; }
.chips--n li::before { content: counter(c, decimal-leading-zero); width: auto; height: auto; border: 0; color: var(--signal); }

@media (min-width: 900px) {
	.duo { grid-template-columns: 1fr 1fr; gap: 24px; }
	.blk { padding: 32px; }
	.blk__h { font-size: 32px; }
}

/* partners */
.pair-p { display: grid; gap: 16px; }
.pp { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-1); }
.pp img { width: 96px; height: 96px; }
.pp figcaption span { display: block; }
.pp__name { font-size: 20px; font-weight: 500; line-height: 1.25; }
.pp .label { margin-top: 4px; color: var(--accent); }
.pp__line { margin-top: 8px; color: var(--text-2); font-size: 15.5px; }

@media (min-width: 800px) { .pair-p { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 420px) { .pp { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; } .pp img { width: 72px; height: 72px; } }

/* Windows contrast themes: keep text knock-outs on the theme's own background */
@media (forced-colors: active) and (prefers-color-scheme: dark) {
	.ba text { stroke: Canvas; }
	.ba__panel--after { background: Canvas; }
}

@media (prefers-reduced-motion: reduce) {
	.js .line__in { opacity: 1; transform: none; }
}