/* ==========================================================================
   Partnerships
   ==========================================================================
   Plain CSS, loaded on this page (includes/scripts-and-styles.php) and inside
   the block editor, so the editor preview matches the site. Outside the
   Tailwind bundle for the same reason as the homepage: this is one long
   bespoke composition, and keeping it here means editing it needs no build.

   It borrows the homepage's ground, ink and cobalt, and adds one accent of its
   own, a cyan that marks partnership routes and active states. Everything is
   scoped to .tcwpn.

   Contents
     1. Tokens and primitives
     2. Motion
     3. Progress rail
     4. Hero and the partnership board
     5. Technology partner explorer
     6. Implementation partnership
     7. Matcher
     8. Referral programme
     9. Product implementation
    10. Design to engineering
    11. Open partnership
    12. Application
   ========================================================================== */

/* ==========================================================================
   1. Tokens and primitives
   ========================================================================== */

.tcwpn {
	--p-ink: #0f2544;
	--p-ink-2: #47597a;
	--p-ink-3: #5f6d86;
	--p-invert: #ffffff;
	--p-invert-2: #a9c1de;
	--p-invert-3: #7793b6;

	/*
	 * One blue, taken from the logo, stepped by lightness. --p-cobalt is for the pale grounds;
	 * on the navy bands it would sit almost on top of the ground, so --p-cobalt-lift stands in
	 * for it there. --p-cobalt-deep fills controls on the white cards.
	 */
	--p-cobalt: #46659b;
	--p-cobalt-2: #38517d;
	--p-cobalt-deep: #2d4164;
	--p-cobalt-lift: #7994c3;
	--p-cobalt-on-dark: #a9bad8;
	--p-cyan: #22c9e0;
	--p-cyan-soft: #d8f6fb;
	--p-cyan-ink: #087688;
	--p-blue-soft: #e5eaf3;

	--p-paper: #fbfcfe;
	--p-ice: #eef4fd;
	--p-navy: #071b38;
	--p-navy-2: #0c2748;
	--p-navy-3: #123059;

	--p-line: rgba(15, 37, 68, 0.10);
	--p-line-strong: rgba(15, 37, 68, 0.17);
	--p-line-invert: rgba(146, 190, 236, 0.20);
	--p-line-invert-strong: rgba(146, 190, 236, 0.38);

	--p-shadow: 0 1px 2px rgba(15, 37, 68, 0.05), 0 10px 26px -14px rgba(15, 37, 68, 0.22);
	--p-r: 12px;
	--p-r-lg: 16px;
	/* The site shell (assets/css/site-shell.css): one measure for every page. */
	--p-content: var(--tcw-content, 1280px);
	--p-pad: var(--tcw-gutter, 24px);
	--p-section: clamp(52px, 5.6vw, 84px);

	--p-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Lato", Helvetica, Arial, sans-serif;
	--p-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--p-t: 240ms;
	--p-t-view: 340ms;
	--p-t-reveal: 640ms;
	--p-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	position: relative;
	font-family: var(--p-font);
	color: var(--p-ink);
	-webkit-font-smoothing: antialiased;
}

.tcwpn *,
.tcwpn *::before,
.tcwpn *::after {
	box-sizing: border-box;
}

.tcwpn-band {
	position: relative;
	padding-block: var(--p-section);
	overflow: hidden;
}

.tcwpn-band--paper { background: var(--p-paper); }
.tcwpn-band--white { background: #fff; }
.tcwpn-band--ice { background: var(--p-ice); }

.tcwpn-band--navy {
	background: var(--p-navy);
	color: var(--p-invert);
}

/* Anything the rail or an in-page link jumps to has to clear the fixed header, and the rail itself
   where that is a bar across the top. */
.tcwpn-band[id],
.tcwpn-hero[id] {
	scroll-margin-top: calc(var(--hd-h, 62px) + 62px);
}

@media (min-width: 1620px) {

	.tcwpn-band[id],
	.tcwpn-hero[id] {
		scroll-margin-top: calc(var(--hd-h, 72px) + 18px);
	}
}

.tcwpn-shell {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: calc(var(--p-content) + (var(--p-pad) * 2));
	margin-inline: auto;
	padding-inline: var(--p-pad);
}

/* The drafting grid the homepage uses, so the two pages read as one site. */
.tcwpn-grid-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(70, 101, 155, 0.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(70, 101, 155, 0.04) 1px, transparent 1px),
		linear-gradient(to right, rgba(70, 101, 155, 0.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(70, 101, 155, 0.07) 1px, transparent 1px);
	background-size: 26px 26px, 26px 26px, 130px 130px, 130px 130px;
}

.tcwpn-grid-bg--invert {
	background-image:
		linear-gradient(to right, rgba(146, 190, 236, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(146, 190, 236, 0.05) 1px, transparent 1px),
		linear-gradient(to right, rgba(146, 190, 236, 0.08) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(146, 190, 236, 0.08) 1px, transparent 1px);
}

/* Type ---------------------------------------------------------------------- */

.tcwpn-eyebrow {
	margin: 0 0 12px;
	font-family: var(--p-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--p-cobalt);
}

.tcwpn-eyebrow--invert { color: #7fc9e8; }

.tcwpn-h1 {
	margin: 0;
	font-size: clamp(32px, 3.7vw, 50px);
	font-weight: 700;
	letter-spacing: -0.036em;
	line-height: 1.08;
	color: var(--p-ink);
	text-wrap: balance;
}

.tcwpn-h1 em {
	font-style: normal;
	color: var(--p-cobalt);
}

.tcwpn-h2 {
	margin: 0;
	font-size: clamp(24px, 2.6vw, 35px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.16;
	text-wrap: balance;
}

.tcwpn-h3 {
	margin: 0;
	font-size: clamp(18px, 1.5vw, 22px);
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.25;
}

.tcwpn-lede {
	margin: 14px 0 0;
	font-size: clamp(15px, 1.05vw, 16.5px);
	line-height: 1.68;
	color: var(--p-ink-2);
	max-width: 62ch;
}

.tcwpn-lede--invert { color: var(--p-invert-2); }

.tcwpn-head { max-width: 68ch; }
.tcwpn-head--spaced { margin-bottom: clamp(24px, 3vw, 36px); }

/* Ordinary small print. */
.tcwpn-body {
	margin: 12px 0 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--p-ink-2);
	max-width: 62ch;
}

.tcwpn-stack { margin-top: 20px; }

/* Buttons and links ---------------------------------------------------------- */

.tcwpn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 46px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--p-t) var(--p-ease), border-color var(--p-t) var(--p-ease),
		color var(--p-t) var(--p-ease), transform var(--p-t) var(--p-ease), box-shadow var(--p-t) var(--p-ease);
}

.tcwpn-btn svg { flex: none; transition: transform var(--p-t) var(--p-ease); }
.tcwpn-btn:hover svg,
.tcwpn-btn:focus-visible svg { transform: translateX(3px); }

.tcwpn-btn--primary {
	background: var(--p-cobalt);
	color: #fff;
}

/* Same reason as the homepage: a mid-tone blue on navy is not a button. */
.tcwpn-band--navy .tcwpn-btn--primary {
	background: var(--p-cobalt-on-dark);
	color: var(--p-navy);
}

.tcwpn-band--navy .tcwpn-btn--primary:hover,
.tcwpn-band--navy .tcwpn-btn--primary:focus-visible {
	background: #c3cfe4;
	color: var(--p-navy);
}

.tcwpn-btn--primary:hover,
.tcwpn-btn--primary:focus-visible {
	background: var(--p-cobalt-2);
	color: #fff;
	transform: translateY(-1px);
}

.tcwpn-btn--deep {
	background: var(--p-cobalt-deep);
	color: #fff;
}

.tcwpn-btn--deep:hover,
.tcwpn-btn--deep:focus-visible {
	background: #22314c;
	color: #fff;
	transform: translateY(-1px);
}

.tcwpn-btn--cyan {
	background: var(--p-cyan);
	color: #04283a;
}

.tcwpn-btn--cyan:hover,
.tcwpn-btn--cyan:focus-visible {
	background: #45d8ec;
	color: #04283a;
	transform: translateY(-1px);
}

.tcwpn-btn--ghost {
	background: #fff;
	border-color: var(--p-line-strong);
	color: var(--p-ink);
}

.tcwpn-btn--ghost:hover,
.tcwpn-btn--ghost:focus-visible {
	border-color: var(--p-cobalt);
	color: var(--p-cobalt);
	transform: translateY(-1px);
}

.tcwpn-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: clamp(22px, 2.6vw, 30px);
}

.tcwpn-actions--tight { margin-top: 18px; }
.tcwpn-actions--spaced { margin-top: clamp(26px, 3vw, 36px); }

/* Focus is visible on every ground the page uses. */
.tcwpn a:focus-visible,
.tcwpn button:focus-visible,
.tcwpn input:focus-visible,
.tcwpn select:focus-visible,
.tcwpn textarea:focus-visible {
	outline: 2px solid var(--p-cobalt);
	outline-offset: 3px;
	border-radius: 6px;
}

.tcwpn-band--navy a:focus-visible,
.tcwpn-band--navy button:focus-visible,
.tcwpn-band--navy input:focus-visible,
.tcwpn-band--navy select:focus-visible,
.tcwpn-band--navy textarea:focus-visible {
	outline-color: var(--p-cyan);
}

/* Cards ---------------------------------------------------------------------- */

.tcwpn-card {
	background: #fff;
	border: 1px solid var(--p-line);
	border-radius: var(--p-r-lg);
	box-shadow: var(--p-shadow);
}

/* ==========================================================================
   2. Motion
   ==========================================================================
   Enhancement only. The pre-animation state is applied under html.js, which the
   document sets synchronously in the head, so nothing flashes and the page is
   complete with scripting off and inside the block editor.
   ========================================================================== */

html.js .tcwpn [data-reveal] {
	opacity: 0;
	transform: translateY(14px);
}

.tcwpn [data-reveal] {
	transition: opacity var(--p-t-reveal) var(--p-ease), transform var(--p-t-reveal) var(--p-ease);
	transition-delay: calc(var(--i, 0) * 70ms);
}

html.js .tcwpn [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* An SVG route that draws itself once. pathLength is normalised to 1, and the
   offset is scaled by the same dash, so an undrawn path shows nothing at all. */
.tcwpn-draw {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.6;
}

html.js .tcwpn-draw {
	stroke-dasharray: 1.002;
	stroke-dashoffset: 1.002;
	transition: stroke-dashoffset 760ms var(--p-ease);
	transition-delay: calc(var(--i, 0) * 90ms);
}

html.js .is-in .tcwpn-draw,
html.js .tcwpn-draw.is-in {
	stroke-dashoffset: 0;
}

/* Two or more views of one thing, stacked in a single grid cell so that switching between them
   cannot change the height of the section or move anything below it. With scripting off they are
   laid out one after another instead, because then nothing can switch. */
.tcwpn-swap { display: grid; }
.tcwpn-swap__item { grid-area: 1 / 1; }

html.js .tcwpn-swap__item {
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity var(--p-t-view) var(--p-ease), transform var(--p-t-view) var(--p-ease);
}

html.js .tcwpn-swap__item.is-on {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

html.no-js .tcwpn-swap { display: block; }
html.no-js .tcwpn-swap__item + .tcwpn-swap__item { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {

	html.js .tcwpn [data-reveal] {
		opacity: 1;
		transform: none;
	}

	html.js .tcwpn-draw {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
	}

	.tcwpn *,
	.tcwpn *::before,
	.tcwpn *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		transition-delay: 0ms !important;
	}
}

/* ==========================================================================
   3. Progress rail
   ==========================================================================
   A slim marker of where the reader is in the page. On a handset it becomes a
   row along the bottom, which is reachable and never sits over the content.
   ========================================================================== */

.tcwpn-rail {
	position: fixed;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 60;
	display: none;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: auto;
}

/* The rail only floats beside the page where there is genuinely room for it: the content is 1328px
   wide with its padding, so anything narrower than this would put the rail over the content. */
@media (min-width: 1620px) {
	.tcwpn-rail { display: flex; }
}

@media (max-width: 1619px) {

	.tcwpn-rail {
		display: flex;
		position: sticky;
		top: var(--hd-h, 62px);
		right: auto;
		z-index: 40;
		flex-direction: row;
		gap: 4px;
		transform: none;
		padding: 6px 16px;
		background: rgba(255, 255, 255, 0.94);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border-bottom: 1px solid var(--p-line);
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.tcwpn-rail::-webkit-scrollbar { display: none; }

	.tcwpn-rail__link {
		min-height: 44px;
		padding: 0 12px;
		white-space: nowrap;
	}

	.tcwpn-rail__link.is-current { color: var(--p-cobalt); }
}

.tcwpn-rail__link {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--p-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--p-ink-3);
	text-decoration: none;
	transition: color var(--p-t) var(--p-ease);
}

.tcwpn-rail__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1.6px solid currentColor;
	transition: background var(--p-t) var(--p-ease), transform var(--p-t) var(--p-ease);
}

.tcwpn-rail__link:hover,
.tcwpn-rail__link:focus-visible { color: var(--p-cobalt); }

.tcwpn-rail__link.is-current { color: var(--p-cobalt); }

.tcwpn-rail__link.is-current .tcwpn-rail__dot {
	background: var(--p-cyan);
	border-color: var(--p-cyan);
	transform: scale(1.25);
}

/* Over a navy band the rail flips to light. */
.tcwpn-rail.is-on-dark .tcwpn-rail__link { color: var(--p-invert-3); }
.tcwpn-rail.is-on-dark .tcwpn-rail__link.is-current { color: #fff; }

/* ==========================================================================
   4. Hero and the partnership board
   ========================================================================== */

.tcwpn-hero {
	background: linear-gradient(180deg, #ffffff 0%, var(--p-paper) 55%, #eef4fd 100%);
	padding-block: clamp(44px, 5vw, 74px) clamp(30px, 3.4vw, 48px);
}

.tcwpn-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(30px, 4vw, 52px);
	align-items: center;
}

@media (min-width: 1040px) {
	.tcwpn-hero__inner {
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
	}
}

/* The board ------------------------------------------------------------------ */

.tcwpn-board {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

@media (min-width: 720px) {
	.tcwpn-board {
		grid-template-columns: 128px minmax(0, 1fr);
		align-items: center;
	}
}

.tcwpn-board__title {
	grid-column: 1 / -1;
	justify-self: center;
	margin: 0 0 2px;
	padding: 5px 16px;
	border: 1px solid var(--p-line-strong);
	border-radius: 999px;
	background: #fff;
	font-family: var(--p-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--p-ink-2);
}

/* The core node everything routes through. */
.tcwpn-board__core {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 84px;
	padding: 14px 10px;
	background: linear-gradient(160deg, #46659b 0%, #2d4164 100%);
	border: 1px solid rgba(34, 201, 224, 0.5);
	border-radius: var(--p-r);
	box-shadow: 0 0 0 4px rgba(34, 201, 224, 0.08);
	color: #fff;
	text-align: center;
}

.tcwpn-board__core b {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.35;
}

.tcwpn-board__core span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: rgba(34, 201, 224, 0.16);
	color: var(--p-cyan);
}

.tcwpn-board__routes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

@media (min-width: 720px) {
	.tcwpn-board__routes {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.95fr);
		align-items: stretch;
	}
}

.tcwpn-route {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--p-line);
	border-radius: var(--p-r);
	text-align: left;
	font: inherit;
	cursor: pointer;
	transition: border-color var(--p-t) var(--p-ease), box-shadow var(--p-t) var(--p-ease),
		transform var(--p-t) var(--p-ease), background var(--p-t) var(--p-ease);
}

.tcwpn-route--open {
	/* Opaque, so the wire behind the board passes behind this card too rather than through it. */
	background: #f2fbfd;
	border-style: dashed;
	border-color: rgba(34, 201, 224, 0.55);
}

.tcwpn-route:hover,
.tcwpn-route:focus-visible {
	border-color: var(--p-cyan);
	box-shadow: 0 0 0 3px rgba(34, 201, 224, 0.14);
	transform: translateY(-2px);
}

/* The route the page opens on. Static: it says which pathway the section below starts with, and
   the label beside it says the same thing in words, so the state is never colour alone. */
.tcwpn-route.is-on {
	border-color: var(--p-cyan);
	box-shadow: 0 0 0 3px rgba(34, 201, 224, 0.18);
}

.tcwpn-route.is-on .tcwpn-route__label { color: var(--p-cyan-ink); }

.tcwpn-route__label {
	margin: 0 0 9px;
	font-family: var(--p-mono);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--p-ink-3);
}

.tcwpn-route__items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcwpn-route__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	flex: 1 1 64px;
	min-width: 58px;
	padding: 10px 6px;
	border: 1px solid var(--p-line);
	border-radius: 9px;
	background: var(--p-paper);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
	color: var(--p-ink);
}

.tcwpn-route__item svg { color: var(--p-cobalt); }

/* A partner's own mark in place of an icon. Height rather than width, so a square mark and a wide
   wordmark carry the same visual weight in the row. */
.tcwpn-route__logo {
	display: block;
	width: 100%;
	height: 26px;
	object-fit: contain;
	object-position: center;
}

.tcwpn-route--open .tcwpn-route__item {
	flex-basis: 100%;
	flex-direction: row;
	justify-content: flex-start;
	gap: 8px;
	padding: 6px 9px;
	background: transparent;
	border: 0;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	color: var(--p-ink-2);
}

.tcwpn-route--open .tcwpn-route__item::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--p-cyan);
	flex: none;
}

/* What a route is responsible for, shown on hover or focus and always readable. */
.tcwpn-route__says {
	margin: 9px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--p-ink-2);
}

.tcwpn-board__foot {
	grid-column: 1 / -1;
	justify-self: center;
	margin: 2px 0 0;
	padding: 5px 14px;
	border: 1px solid var(--p-line);
	border-radius: 999px;
	background: #fff;
	font-family: var(--p-mono);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--p-ink-3);
}

/* The routes the line takes across the board. */
/* An absolutely positioned <svg> takes its intrinsic size when width and height are left to
   themselves, whatever top and bottom say, so both are given here. */
.tcwpn-board__wires {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}

/* The line is meant to pass behind the cards and show only in the gaps between them. Without this
   the cards are static and the line is positioned, so the line paints on top of the text. */
.tcwpn-board__title,
.tcwpn-board__core,
.tcwpn-board__routes,
.tcwpn-board__foot {
	position: relative;
	z-index: 1;
}

.tcwpn-board__wires path {
	stroke: var(--p-cyan);
	stroke-opacity: 0.5;
}

/* Stacked, the routes are no longer strung along one line, so the line would cut across them. */
@media (max-width: 719px) {
	.tcwpn-board__wires { display: none; }
}

/* Trust strip ---------------------------------------------------------------- */

.tcwpn-strip {
	border-block: 1px solid var(--p-line);
	background: #fff;
	padding-block: 16px;
}

.tcwpn-strip__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 26px;
}

.tcwpn-strip__lead {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: clamp(14px, 1.1vw, 16px);
	font-weight: 600;
	color: var(--p-ink);
}

.tcwpn-strip__points {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcwpn-strip__points li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--p-ink-2);
}

.tcwpn-strip__points svg { color: #12b886; flex: none; }

/* ==========================================================================
   5. Technology partner explorer
   ========================================================================== */

.tcwpn-explorer__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px 32px;
	margin-bottom: clamp(24px, 3vw, 36px);
}

.tcwpn-explorer__aside {
	max-width: 34ch;
	padding-left: 18px;
	border-left: 2px solid var(--p-line-invert-strong);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--p-invert-2);
}

.tcwpn-explorer__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

@media (min-width: 940px) {
	.tcwpn-explorer__body {
		grid-template-columns: minmax(240px, 0.34fr) minmax(0, 1fr);
		align-items: start;
	}
}

/* The rail of partners ------------------------------------------------------- */

.tcwpn-picks {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcwpn-pick {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 14px;
	background: rgba(146, 190, 236, 0.06);
	border: 1px solid var(--p-line-invert);
	border-radius: var(--p-r);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background var(--p-t) var(--p-ease), border-color var(--p-t) var(--p-ease),
		transform var(--p-t) var(--p-ease);
}

.tcwpn-pick:hover { background: rgba(146, 190, 236, 0.1); transform: translateY(-1px); }

.tcwpn-pick.is-on {
	background: rgba(34, 201, 224, 0.09);
	border-color: var(--p-cyan);
}

.tcwpn-pick__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: rgba(34, 201, 224, 0.14);
	color: var(--p-cyan);
}

/*
 * A brand mark is drawn for a white page: dark type, dark strokes, sometimes a coloured ground of
 * its own. On the navy bands it would half-disappear and no amount of tinting would fix it without
 * altering somebody else's logo, so every mark sits on a white tile instead. It is also the only
 * treatment that still works for a mark nobody has seen yet.
 */
.tcwpn-pick__mark--logo {
	width: 52px;
	height: 38px;
	padding: 5px 7px;
	background: #fff;
	border-radius: 8px;
}

.tcwpn-pick__mark img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tcwpn-pick__text { flex: 1; min-width: 0; }

.tcwpn-pick__name {
	display: block;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
}

.tcwpn-pick__what {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--p-invert-3);
}

.tcwpn-pick__state {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	font-size: 11px;
	font-weight: 600;
	color: #4fd6a0;
}

.tcwpn-pick__state::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

/* The panel ------------------------------------------------------------------ */

.tcwpn-panels { display: grid; }

.tcwpn-panel {
	grid-area: 1 / 1;
	padding: clamp(18px, 2vw, 26px);
	background: rgba(146, 190, 236, 0.05);
	border: 1px solid var(--p-line-invert);
	border-radius: var(--p-r-lg);
	transition: opacity var(--p-t-view) var(--p-ease), transform var(--p-t-view) var(--p-ease);
}

html.js .tcwpn-panel {
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}

html.js .tcwpn-panel.is-on {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

html.no-js .tcwpn-panel + .tcwpn-panel { margin-top: 16px; }
html.no-js .tcwpn-panels { display: block; }

.tcwpn-panel__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-bottom: 14px;
}

.tcwpn-brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	height: 40px;
	min-width: 56px;
	padding: 6px 10px;
	background: #fff;
	border-radius: 9px;
}

.tcwpn-brand img {
	display: block;
	width: auto;
	height: 100%;
	max-width: 92px;
	object-fit: contain;
}

.tcwpn-tag {
	padding: 4px 10px;
	border: 1px solid rgba(34, 201, 224, 0.45);
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--p-cyan);
}

.tcwpn-panel__summary {
	margin: 0 0 16px;
	max-width: 74ch;
	font-size: 15px;
	line-height: 1.65;
	color: var(--p-invert-2);
}

.tcwpn-panel__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

@media (min-width: 780px) {
	.tcwpn-panel__grid {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
	}
}

/* The ecosystem: satellites around one platform. -------------------------------- */

.tcwpn-eco {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 12px 18px;
	align-items: center;
}

.tcwpn-eco__hub {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 108px;
	min-height: 78px;
	padding: 14px 12px;
	background: linear-gradient(160deg, #4b6ca5 0%, #3c5a8e 100%);
	border: 1px solid rgba(34, 201, 224, 0.5);
	border-radius: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.35;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
}

.tcwpn-eco__node {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 11px;
	background: rgba(146, 190, 236, 0.07);
	border: 1px solid var(--p-line-invert);
	border-radius: 9px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--p-invert-2);
	transition: border-color var(--p-t) var(--p-ease), background var(--p-t) var(--p-ease);
}

.tcwpn-eco__node svg { flex: none; color: var(--p-cyan); }

/* The connector to the platform, drawn rather than positioned. */
.tcwpn-eco__node::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 18px;
	height: 1px;
	background: rgba(34, 201, 224, 0.5);
}

.tcwpn-eco__node:nth-child(odd)::after { right: -18px; }
.tcwpn-eco__node:nth-child(even)::after { left: -18px; }

@media (max-width: 559px) {

	.tcwpn-eco {
		grid-template-columns: minmax(0, 1fr);
	}

	.tcwpn-eco__hub {
		grid-column: 1;
		grid-row: auto;
		order: -1;
	}

	.tcwpn-eco__node::after { display: none; }
}

.tcwpn-about__title {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}

.tcwpn-about__text {
	margin: 0 0 12px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--p-invert-3);
}

.tcwpn-ticks {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcwpn-ticks li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--p-invert-2);
}

.tcwpn-ticks svg { flex: none; margin-top: 1px; color: #4fd6a0; }

/* The same list on a white card. */
.tcwpn-ticks--ink li { color: var(--p-ink-2); }
.tcwpn-ticks--ink svg { color: #12b886; }

/* The shared discipline rail --------------------------------------------------- */

.tcwpn-disc {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: 14px 22px;
	align-items: center;
	margin-top: clamp(22px, 2.6vw, 32px);
	padding-top: clamp(18px, 2.2vw, 26px);
	border-top: 1px solid var(--p-line-invert);
}

.tcwpn-disc__label {
	margin: 0;
	max-width: 9ch;
}

.tcwpn-disc__list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcwpn-disc__list::before {
	content: "";
	position: absolute;
	left: 6%;
	right: 4%;
	top: 6px;
	height: 1px;
	background: linear-gradient(90deg, var(--p-cobalt), var(--p-cyan));
	opacity: 0.55;
}

.tcwpn-disc__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	text-align: center;
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--p-invert-2);
}

.tcwpn-disc__item::before {
	content: "";
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--p-navy);
	border: 2px solid var(--p-cyan);
	transition: transform var(--p-t) var(--p-ease), box-shadow var(--p-t) var(--p-ease);
}

.tcwpn-disc__item.is-lit::before {
	box-shadow: 0 0 0 4px rgba(34, 201, 224, 0.2);
	transform: scale(1.15);
}

@media (max-width: 719px) {

	.tcwpn-disc { grid-template-columns: minmax(0, 1fr); }
	.tcwpn-disc__list::before { display: none; }

	.tcwpn-disc__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tcwpn-disc__item {
		flex-direction: row;
		text-align: left;
	}
}

/* ==========================================================================
   6. Implementation partnership
   ========================================================================== */

.tcwpn-mdware {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(22px, 3vw, 40px);
	align-items: start;
	padding: clamp(20px, 2.4vw, 32px);
}

@media (min-width: 940px) {
	.tcwpn-mdware {
		grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr) minmax(150px, 0.2fr);
	}
}

.tcwpn-mdware__name {
	margin: 0;
	font-size: clamp(26px, 2.6vw, 34px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--p-ink);
}

/* The mark stands in for the words, so it is sized like a heading rather than like an icon. On a
   light card it needs no tile: it is shown exactly as its owner drew it. */
.tcwpn-mdware__logo {
	display: block;
	width: auto;
	height: clamp(38px, 3.4vw, 47px);
	max-width: 100%;
	object-fit: contain;
}

.tcwpn-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--p-ink-2);
}

.tcwpn-status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--p-cyan);
}

/* Segmented control, used here and by the design section. ---------------------- */

.tcwpn-seg {
	display: inline-flex;
	gap: 3px;
	padding: 3px;
	background: var(--p-ice);
	border: 1px solid var(--p-line);
	border-radius: 9px;
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}

.tcwpn-seg::-webkit-scrollbar { display: none; }

.tcwpn-seg__btn {
	min-height: 38px;
	padding: 0 14px;
	background: transparent;
	border: 0;
	border-radius: 7px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--p-ink-2);
	cursor: pointer;
	transition: background var(--p-t) var(--p-ease), color var(--p-t) var(--p-ease);
}

/* A comfortable target where a finger is doing the pointing. */
@media (max-width: 719px) {
	.tcwpn-seg__btn { min-height: 44px; }
}

.tcwpn-seg__btn:hover { color: var(--p-ink); }

.tcwpn-seg__btn.is-on {
	background: var(--p-cobalt-deep);
	color: #fff;
}

.tcwpn-seg__label {
	margin: 0 10px 0 0;
	align-self: start;
	font-family: var(--p-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--p-ink-3);
}

.tcwpn-segbar .tcwpn-seg__label { align-self: center; }

.tcwpn-segbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

/* A left-to-right flow of steps, used by several sections. ---------------------- */

.tcwpn-flow {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcwpn-flow__step {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 150px;
	min-width: 0;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--p-line);
	border-radius: 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--p-ink-2);
}

.tcwpn-flow__step svg { flex: none; color: var(--p-cobalt); }

.tcwpn-flow__step--owned {
	background: var(--p-cobalt-deep);
	border-color: var(--p-cobalt-deep);
	color: #fff;
}

.tcwpn-flow__step--owned svg { color: var(--p-cyan); }

.tcwpn-flow__arrow {
	display: flex;
	align-items: center;
	color: var(--p-ink-3);
	flex: none;
}

@media (max-width: 719px) {

	.tcwpn-flow { flex-direction: column; }
	.tcwpn-flow__arrow { transform: rotate(90deg); align-self: center; }
}

/* A row of cards with one line running behind them, so a set reads as connected without implying
   an order. The cards are opaque, so the line is only ever seen in the gaps. */
.tcwpn-linked { position: relative; }

.tcwpn-linked::before {
	content: "";
	position: absolute;
	left: 12%;
	right: 12%;
	top: 50%;
	height: 1px;
	background: linear-gradient(90deg, var(--p-cobalt), var(--p-cyan));
	opacity: 0.45;
}

@media (max-width: 719px) {
	.tcwpn-linked::before { display: none; }
}

.tcwpn-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.tcwpn-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid var(--p-line);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: var(--p-ink-2);
}

.tcwpn-chip svg { color: var(--p-cobalt); flex: none; }

.tcwpn-chip--quiet {
	background: transparent;
	border-color: var(--p-line-strong);
	color: var(--p-ink-3);
	font-weight: 500;
}

.tcwpn-chips--tight { margin-top: 8px; }

/* Six years, as a duration rather than a story of events. ----------------------- */

.tcwpn-years__label {
	margin: 0 0 10px;
}

.tcwpn-years .tcwpn-h3 { margin: 0 0 14px; }

.tcwpn-years__track {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
}

.tcwpn-years__track::before {
	content: "";
	position: absolute;
	left: 4px;
	right: 4px;
	top: 50%;
	height: 2px;
	background: linear-gradient(90deg, rgba(70, 101, 155, 0.35), var(--p-cyan));
}

.tcwpn-years__dot {
	position: relative;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--p-cobalt);
}

.tcwpn-years__dot:last-child {
	width: 13px;
	height: 13px;
	border-color: var(--p-cyan);
	background: var(--p-cyan);
}

.tcwpn-years__scale {
	display: flex;
	justify-content: space-between;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--p-mono);
	font-size: 10px;
	color: var(--p-ink-3);
}

/* ==========================================================================
   7. Matcher
   ========================================================================== */

.tcwpn-matcher {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(20px, 2.6vw, 32px);
	align-items: start;
}

@media (min-width: 980px) {
	.tcwpn-matcher {
		grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
	}
}

.tcwpn-choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcwpn-choice {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	min-height: 130px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--p-line);
	border-radius: var(--p-r);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	color: var(--p-ink);
	cursor: pointer;
	transition: border-color var(--p-t) var(--p-ease), box-shadow var(--p-t) var(--p-ease),
		transform var(--p-t) var(--p-ease), background var(--p-t) var(--p-ease);
}

.tcwpn-choice:hover { transform: translateY(-2px); border-color: var(--p-line-strong); }

.tcwpn-choice.is-on {
	background: #f2fbfd;
	border-color: var(--p-cyan);
	box-shadow: 0 0 0 3px rgba(34, 201, 224, 0.16);
}

.tcwpn-choice__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.tcwpn-choice__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--p-blue-soft);
	color: var(--p-cobalt);
	flex: none;
}

.tcwpn-choice.is-on .tcwpn-choice__icon {
	background: rgba(34, 201, 224, 0.16);
	color: #0d9cb4;
}

.tcwpn-choice__mark {
	display: none;
	color: var(--p-cyan);
	flex: none;
}

.tcwpn-choice.is-on .tcwpn-choice__mark { display: block; }

/* The recommendation ---------------------------------------------------------- */

.tcwpn-rec {
	padding: clamp(18px, 2vw, 24px);
	background: var(--p-ice);
	border: 1px solid rgba(70, 101, 155, 0.16);
	border-radius: var(--p-r-lg);
}

.tcwpn-rec__name {
	margin: 4px 0 14px;
	font-size: clamp(20px, 1.8vw, 25px);
	font-weight: 700;
	letter-spacing: -0.024em;
	color: var(--p-ink);
}

.tcwpn-rec__rows {
	margin: 0 0 16px;
	border: 1px solid var(--p-line);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.tcwpn-rec__row {
	display: grid;
	grid-template-columns: minmax(96px, 0.42fr) minmax(0, 1fr);
	gap: 10px;
	padding: 10px 12px;
	font-size: 12.5px;
	line-height: 1.45;
}

.tcwpn-rec__row + .tcwpn-rec__row { border-top: 1px solid var(--p-line); }

.tcwpn-rec__row dt { margin: 0; color: var(--p-ink-3); }
.tcwpn-rec__row dd { margin: 0; font-weight: 600; color: var(--p-ink); }

.tcwpn-rec__cta { width: 100%; }

/* ==========================================================================
   8. Referral programme
   ========================================================================== */

.tcwpn-programme {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(22px, 3vw, 40px);
	align-items: start;
	padding: clamp(20px, 2.4vw, 34px);
}

@media (min-width: 980px) {
	.tcwpn-programme--referral {
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
	}
}

.tcwpn-share {
	margin-top: 18px;
	padding: 16px 18px;
	background: var(--p-ice);
	border: 1px solid rgba(70, 101, 155, 0.16);
	border-radius: var(--p-r);
}

.tcwpn-share__label {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--p-ink-2);
}

.tcwpn-share__value {
	display: block;
	font-size: clamp(26px, 2.6vw, 34px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--p-cobalt);
}

.tcwpn-share__note {
	margin: 6px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--p-ink-3);
}

/* The journey ----------------------------------------------------------------- */

/* The fill is a sibling of the list rather than a child of it, because a list may only contain
   list items. The wrapper has the list's own box, so both ends of the track still line up. */
.tcwpn-journey-wrap { position: relative; }

.tcwpn-journey {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	counter-reset: tcwpn-stage;
}

.tcwpn-journey::before {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	top: 13px;
	height: 2px;
	background: var(--p-line-strong);
}

.tcwpn-journey__fill {
	position: absolute;
	left: 8%;
	top: 13px;
	height: 2px;
	width: 0;
	background: linear-gradient(90deg, var(--p-cobalt), var(--p-cyan));
	transition: width 760ms var(--p-ease);
}

.tcwpn-journey-wrap.is-in .tcwpn-journey__fill { width: var(--fill, 60%); }

.tcwpn-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	font-size: 11px;
	line-height: 1.35;
	color: var(--p-ink-2);
}

.tcwpn-stage__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--p-line-strong);
	font-size: 11px;
	font-weight: 700;
	color: var(--p-ink-3);
}

.tcwpn-stage--done .tcwpn-stage__dot {
	background: var(--p-cobalt);
	border-color: var(--p-cobalt);
	color: #fff;
}

.tcwpn-stage--active .tcwpn-stage__dot {
	background: var(--p-cyan);
	border-color: var(--p-cyan);
	color: #04283a;
	box-shadow: 0 0 0 4px rgba(34, 201, 224, 0.2);
}

.tcwpn-stage--active { color: var(--p-ink); font-weight: 600; }

@media (max-width: 719px) {

	.tcwpn-journey {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.tcwpn-journey::before,
	.tcwpn-journey__fill { display: none; }

	.tcwpn-stage {
		flex-direction: row;
		gap: 12px;
		text-align: left;
		padding: 9px 0;
		border-bottom: 1px solid var(--p-line);
	}
}

/* Invoice milestones ----------------------------------------------------------- */

.tcwpn-invoices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcwpn-invoice {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	background: #fff;
	border: 1px solid var(--p-line);
	border-radius: 10px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--p-ink-2);
}

.tcwpn-invoice b { display: block; color: var(--p-ink); font-size: 12.5px; }
.tcwpn-invoice svg { flex: none; }
.tcwpn-invoice--cleared svg { color: #12b886; }
.tcwpn-invoice--pending { background: var(--p-paper); color: var(--p-ink-3); }
.tcwpn-invoice--pending svg { color: var(--p-ink-3); }

.tcwpn-caption {
	margin: 10px 0 0;
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--p-ink-3);
}

/* ==========================================================================
   9. Product implementation and 10. Design to engineering
   ========================================================================== */

.tcwpn-two {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

@media (min-width: 1000px) {
	.tcwpn-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tcwpn-prog {
	display: flex;
	flex-direction: column;
	padding: clamp(18px, 2vw, 26px);
}

.tcwpn-owners {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin: 16px 0 0;
}

@media (min-width: 520px) {
	.tcwpn-owners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tcwpn-owner {
	padding: 13px 14px;
	background: var(--p-paper);
	border: 1px solid var(--p-line);
	border-radius: 10px;
}

.tcwpn-owner--ours {
	background: #f2fbfd;
	border-color: rgba(34, 201, 224, 0.4);
}

.tcwpn-owner__title {
	margin: 0 0 8px;
	font-family: var(--p-mono);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--p-ink-3);
}

.tcwpn-owner__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--p-ink-2);
}

.tcwpn-owner__list li {
	display: flex;
	align-items: flex-start;
	gap: 7px;
}

.tcwpn-owner__list li::before {
	content: "";
	margin-top: 7px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--p-cyan);
	flex: none;
}

.tcwpn-terms {
	margin: 16px 0 0;
	padding: 11px 13px;
	background: var(--p-ice);
	border-radius: 9px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--p-ink-2);
}

.tcwpn-prog__cta { margin-top: auto; padding-top: 18px; }
.tcwpn-prog__cta .tcwpn-btn { width: 100%; }

/* The product mark ------------------------------------------------------------- */

.tcwpn-product {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: var(--p-paper);
	border: 1px solid var(--p-line);
	border-radius: 10px;
	min-width: 0;
}

.tcwpn-product img {
	display: block;
	width: auto;
	height: 22px;
	max-width: 120px;
	object-fit: contain;
}

.tcwpn-product b {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--p-ink);
}

.tcwpn-product__what {
	margin: 0;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--p-ink-3);
}

/* The design to production transformation --------------------------------------- */

.tcwpn-stages {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcwpn-stagecard {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 12px;
	background: var(--p-paper);
	border: 1px solid var(--p-line);
	border-radius: 10px;
	transition: border-color var(--p-t) var(--p-ease), background var(--p-t) var(--p-ease),
		box-shadow var(--p-t) var(--p-ease);
}

.tcwpn-stagecard.is-lit {
	background: #fff;
	border-color: var(--p-cyan);
	box-shadow: 0 0 0 3px rgba(34, 201, 224, 0.14);
}

.tcwpn-stagecard__name {
	font-family: var(--p-mono);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--p-ink-3);
}

.tcwpn-stagecard.is-lit .tcwpn-stagecard__name { color: var(--p-cyan-ink); }

/* A drawn frame standing in for an interface: structure, never content. */
.tcwpn-frame {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
	min-height: 62px;
	background: #fff;
	border: 1px solid var(--p-line);
	border-radius: 6px;
}

.tcwpn-frame i {
	display: block;
	height: 5px;
	border-radius: 3px;
	background: #dfe5ef;
}

.tcwpn-frame i:first-child { width: 55%; background: #ccd6e8; }
.tcwpn-frame__row { display: flex; gap: 5px; flex: 1; }
.tcwpn-frame__row i { flex: 1; height: auto; min-height: 20px; }
.tcwpn-stagecard.is-lit .tcwpn-frame i:first-child { background: var(--p-cyan); }

/* ==========================================================================
   11. Open partnership
   ========================================================================== */

.tcwpn-open {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	padding: clamp(20px, 2.4vw, 30px);
	background: linear-gradient(120deg, #f2fbfd 0%, #eef4fd 100%);
	border: 1px solid rgba(34, 201, 224, 0.35);
	border-radius: var(--p-r-lg);
}

@media (min-width: 900px) {
	.tcwpn-open {
		grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 0.9fr);
	}
}

.tcwpn-open__plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1.6px dashed var(--p-cyan);
	color: #0d9cb4;
	justify-self: center;
}

.tcwpn-open__ask {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.tcwpn-open__ask input {
	flex: 1 1 190px;
	min-width: 0;
	min-height: 46px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid var(--p-line-strong);
	border-radius: 8px;
	font: inherit;
	font-size: 13.5px;
	color: var(--p-ink);
}

.tcwpn-open__ask input::placeholder { color: var(--p-ink-3); }

/* Nothing can carry the note into the form without scripting, so the field is not offered; the
   button beside it goes to the same form either way. */
html.no-js .tcwpn-open__ask input { display: none; }

/* ==========================================================================
   12. Application
   ========================================================================== */

.tcwpn-apply {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(22px, 3vw, 40px);
	align-items: start;
}

@media (min-width: 980px) {
	.tcwpn-apply {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	}
}

.tcwpn-types {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.tcwpn-type {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	min-height: 88px;
	padding: 14px 10px;
	background: rgba(146, 190, 236, 0.06);
	border: 1px solid var(--p-line-invert);
	border-radius: var(--p-r);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	color: var(--p-invert-2);
	cursor: pointer;
	transition: background var(--p-t) var(--p-ease), border-color var(--p-t) var(--p-ease),
		color var(--p-t) var(--p-ease), transform var(--p-t) var(--p-ease);
}

.tcwpn-type:hover { transform: translateY(-2px); }

.tcwpn-type.is-on {
	background: rgba(34, 201, 224, 0.12);
	border-color: var(--p-cyan);
	color: #fff;
}

.tcwpn-type svg { color: var(--p-cyan); }

.tcwpn-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.tcwpn-fieldset[hidden] { display: none; }

.tcwpn-form {
	padding: clamp(18px, 2.2vw, 26px);
	background: rgba(146, 190, 236, 0.06);
	border: 1px solid var(--p-line-invert);
	border-radius: var(--p-r-lg);
}

.tcwpn-form__legend {
	margin: 0 0 14px;
	padding: 0;
	font-family: var(--p-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--p-invert-3);
}

.tcwpn-fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

@media (min-width: 620px) {
	.tcwpn-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tcwpn-field--wide { grid-column: 1 / -1; }
}

.tcwpn-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.tcwpn-field > label {
	font-size: 12px;
	font-weight: 600;
	color: var(--p-invert-2);
}

.tcwpn-field__opt {
	font-weight: 400;
	color: var(--p-invert-3);
}

.tcwpn-field input,
.tcwpn-field select,
.tcwpn-field textarea {
	width: 100%;
	min-height: 46px;
	padding: 11px 13px;
	background: rgba(7, 27, 56, 0.55);
	border: 1px solid var(--p-line-invert);
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
	color: #fff;
	transition: border-color var(--p-t) var(--p-ease);
}

.tcwpn-field textarea { min-height: 92px; resize: vertical; }

.tcwpn-field input::placeholder,
.tcwpn-field textarea::placeholder { color: var(--p-invert-3); }

.tcwpn-field input:hover,
.tcwpn-field select:hover,
.tcwpn-field textarea:hover { border-color: var(--p-line-invert-strong); }

.tcwpn-field[data-invalid="true"] input,
.tcwpn-field[data-invalid="true"] select,
.tcwpn-field[data-invalid="true"] textarea { border-color: #ff8b8b; }

.tcwpn-field__error {
	display: none;
	font-size: 11.5px;
	color: #ffb4b4;
}

.tcwpn-field[data-invalid="true"] .tcwpn-field__error { display: block; }

.tcwpn-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
}

.tcwpn-form__note {
	margin: 0;
	flex: 1 1 220px;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--p-invert-3);
}

.tcwpn-form__status {
	margin: 12px 0 0;
	padding: 11px 13px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.55;
	background: rgba(34, 201, 224, 0.12);
	border: 1px solid rgba(34, 201, 224, 0.4);
	color: #d7f7fd;
}

.tcwpn-form__status[hidden] { display: none; }