/* ============================================================
   TP Outcome Prototype — staging only
   Everything is scoped under .tp-outcome-prototype.
   The only exception is the minimal host-container reset below,
   which is gated on the page-level body class so it cannot leak.
   ============================================================ */

/* --- Host container reset (this page only) ------------------ */
body.tp-outcome-prototype-page #main,
body.tp-outcome-prototype-page #content,
body.tp-outcome-prototype-page .wf-wrap,
body.tp-outcome-prototype-page .wf-container-main,
body.tp-outcome-prototype-page .content-main,
body.tp-outcome-prototype-page .entry-content {
	max-width: none;
	width: auto;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

body.tp-outcome-prototype-page #main {
	padding-top: 0;
	padding-bottom: 0;
}

body.tp-outcome-prototype-page .page-title,
body.tp-outcome-prototype-page .entry-title,
body.tp-outcome-prototype-page #fancy-header,
body.tp-outcome-prototype-page .breadcrumbs {
	display: none;
}

body.tp-outcome-prototype-page {
	overflow-x: hidden;
}

/* ============================================================
   COLOR SYSTEM — palette, then explicit roles.
   Components pull from the ROLE tokens, never the raw palette,
   so teal / cyan never get mixed inside one component.

     NAVY  structural dark surfaces: hero, approach, quote, CTA
     TEAL  buttons, primary interactive controls, light-surface
           accents: metric values, Explore links, inline emphasis,
           accent rules, link hover + focus
     CYAN  eyebrows, dark-section icons, connectors, quote mark,
           decorative accents (dark surfaces only)

   The electric blue that previously carried the light-surface accent
   role has been removed entirely — it read as generic SaaS chrome
   against the navy/teal brand. Light-surface accents are now teal,
   with a darker teal for hover and focus so both still clear contrast
   requirements. Do not reintroduce a third accent hue here.
   ============================================================ */
.tp-outcome-prototype {
	/* palette */
	--tp-navy: #03162C;
	--tp-navy-secondary: #071B34;
	--tp-teal: #1F7A8C;
	--tp-teal-deep: #196575;   /* hover / focus / high-contrast teal */
	--tp-cyan: #35C2DA;
	--tp-bg-light: #F4F7FA;
	--tp-border: #DDE5EC;
	--tp-text: #07172D;
	--tp-text-secondary: #425466;
	--tp-white: #FFFFFF;

	/* roles — dark surfaces */
	--tp-surface-dark: var(--tp-navy);
	--tp-on-dark: var(--tp-white);
	--tp-on-dark-muted: #BACADB;      /* raised from #A9BCD0 for small-text contrast */
	--tp-on-dark-faint: #93A8BE;
	--tp-accent-dark: var(--tp-cyan);  /* eyebrows, icons, connectors, quote mark */
	--tp-hairline-dark: rgba(255, 255, 255, 0.16);

	/* roles — light surfaces */
	--tp-surface-light: var(--tp-bg-light);
	--tp-surface-card: var(--tp-white);
	--tp-on-light: var(--tp-text);
	--tp-on-light-muted: var(--tp-text-secondary);
	--tp-on-light-strong: #36475A;   /* body copy: stronger than #425466 */
	--tp-accent-light: var(--tp-teal);       /* metric values, Explore links, emphasis */
	--tp-accent-light-hover: var(--tp-teal-deep);
	--tp-control: var(--tp-teal);            /* buttons + interactive controls */
	--tp-control-hover: var(--tp-teal-deep);
	--tp-focus: var(--tp-teal-deep);

	/* legacy aliases retained so existing rules keep resolving */
	--tpop-navy: var(--tp-navy);
	--tpop-navy-deep: var(--tp-navy-secondary);
	--tpop-teal: var(--tp-teal);
	--tpop-cyan: var(--tp-cyan);
	/* Retained so any straggling rule keeps resolving — now teal, not blue. */
	--tpop-blue: var(--tp-accent-light);
	--tpop-bg: var(--tp-bg-light);
	--tpop-border: var(--tp-border);
	--tpop-ink: var(--tp-text);
	--tpop-ink-2: var(--tp-text-secondary);

	/* Authoritative site grid, read from Elementor kit 7
	   (container_width = 1300px) and confirmed against the computed
	   width of .e-con-boxed > .e-con-inner on standard pages, the
	   header inner and the footer inner. Do not hardcode anything else. */
	--tp-site-content-width: 1300px;
	--tp-site-gutter: 40px;

	--tpop-wrap: var(--tp-site-content-width);
	--tpop-editorial: 760px;

	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
	color: var(--tpop-ink);
	font-family: inherit;
	line-height: 1.6;
	text-align: left;
}

.tp-outcome-prototype *,
.tp-outcome-prototype *::before,
.tp-outcome-prototype *::after {
	box-sizing: border-box;
}

.tp-outcome-prototype p {
	margin: 0;
}

.tp-outcome-prototype ul,
.tp-outcome-prototype ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tp-outcome-prototype h1,
.tp-outcome-prototype h2,
.tp-outcome-prototype h3 {
	margin: 0;
	color: inherit;
	font-family: inherit;
	letter-spacing: -0.01em;
}

.tp-outcome-prototype img,
.tp-outcome-prototype svg {
	max-width: 100%;
}

/* Elementor renders .e-con (full width, padded) > .e-con-inner (capped at
   --container-max-width). Reproducing both boxes on one element: the outer
   max-width is content + both gutters, so the content edge matches the
   header/footer inner edge at every viewport. */
.tp-outcome-prototype .tpop-wrap {
	width: 100%;
	max-width: calc(var(--tp-site-content-width) + (2 * var(--tp-site-gutter)));
	margin: 0 auto;
	padding-inline: var(--tp-site-gutter);
}

.tp-outcome-prototype .tpop-center {
	text-align: center;
}

.tp-outcome-prototype .tpop-h2 {
	font-size: clamp(25px, 2.1vw, 31px);
	font-weight: 700;
	line-height: 1.22;
	color: var(--tpop-ink);
}

.tp-outcome-prototype .tpop-situation .tpop-h2 {
	font-size: clamp(27px, 2.5vw, 36px);
}

.tp-outcome-prototype .tpop-h2--invert {
	color: #fff;
}

.tp-outcome-prototype .tpop-rule {
	display: block;
	width: 44px;
	height: 3px;
	border-radius: 3px;
	background: var(--tp-accent-light);
}

.tp-outcome-prototype .tpop-rule--cyan {
	background: var(--tpop-cyan);
	margin: 0 auto 22px;
	width: 56px;
}

.tp-outcome-prototype .tpop-arrow {
	display: inline-block;
	transform: translateY(-1px);
}

.tp-outcome-prototype .tpop-svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* --- 1. Hero ------------------------------------------------ */
.tp-outcome-prototype .tpop-hero {
	position: relative;
	isolation: isolate;
	min-height: 580px;
	display: flex;
	align-items: center;
	background-color: var(--tpop-navy);
	background-size: cover;
	background-position: center 46%;
	background-repeat: no-repeat;
	/* Top padding clears the transparent header that overlays the hero. */
	padding: 106px 0 50px;
	overflow: hidden;
}

.tp-outcome-prototype .tpop-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(3, 22, 44, 0.9) 0%, rgba(3, 22, 44, 0.72) 30%, rgba(3, 22, 44, 0.26) 58%, rgba(3, 22, 44, 0.14) 100%),
		linear-gradient(180deg, rgba(3, 22, 44, 0.42) 0%, rgba(3, 22, 44, 0) 34%, rgba(3, 22, 44, 0.3) 100%);
}

.tp-outcome-prototype .tpop-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 56px;
	align-items: center;
}

.tp-outcome-prototype .tpop-eyebrow {
	color: var(--tpop-cyan);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.tp-outcome-prototype .tpop-hero__title {
	color: #fff;
	font-size: clamp(42px, 5vw, 68px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.02em;
	max-width: 9ch;
}

.tp-outcome-prototype .tpop-hero__lede {
	color: #E3EDF7;
	font-size: 16.5px;
	line-height: 1.7;
	max-width: 580px;
	margin-top: 24px;
}

.tp-outcome-prototype .tpop-hero__meta {
	color: #9DB1C6;
	font-size: 14px;
	margin-top: 24px;
}

.tp-outcome-prototype .tpop-hero__meta span {
	padding: 0 6px;
	color: #6C8299;
}

/* Result panel. Was a glassy floating card (blur + a 60px drop shadow)
   which read as a product dashboard pasted onto the photo. Now a solid
   navy surface with a hairline edge: it still separates cleanly from the
   image, without the gloss. */
.tp-outcome-prototype .tpop-panel {
	background: rgba(4, 20, 40, 0.94);
	border: 1px solid rgba(53, 194, 218, 0.18);
	border-radius: 4px;
	padding: 32px 30px 34px;
	box-shadow: none;
}

.tp-outcome-prototype .tpop-panel__label {
	color: var(--tpop-cyan);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.tp-outcome-prototype .tpop-panel__figure {
	color: #fff;
	font-size: 46px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	margin-top: 14px;
}

.tp-outcome-prototype .tpop-panel__caption {
	color: var(--tp-on-dark-muted);
	font-size: 14px;
	margin-top: 10px;
}

.tp-outcome-prototype .tpop-panel__rule {
	height: 1px;
	background: rgba(255, 255, 255, 0.16);
	margin: 22px 0;
}

.tp-outcome-prototype .tpop-panel__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 22px;
}

.tp-outcome-prototype .tpop-panel__grid li:nth-child(2) {
	padding-left: 22px;
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.tp-outcome-prototype .tpop-panel__span {
	grid-column: 1 / -1;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.tp-outcome-prototype .tpop-panel__v {
	display: block;
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
}

.tp-outcome-prototype .tpop-panel__k {
	display: block;
	font-size: 12.5px;
	margin-top: 4px;
}

/* All three sub-metric labels share one role colour (was: first one cyan,
   siblings grey — a mixed-accent set inside a single component). */
.tp-outcome-prototype .tpop-panel__k {
	color: var(--tp-on-dark-faint);
}

/* --- 2. Metric band ----------------------------------------- */
.tp-outcome-prototype .tpop-band {
	background: #F7FAFC;
	border-bottom: 1px solid var(--tpop-border);
	padding: 34px 0;
}

.tp-outcome-prototype .tpop-band__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

/* Editorial proof strip: aligned columns separated by hairlines, not cards.
   The separator sits on the item so it never appears before the first
   column or after the last. */
.tp-outcome-prototype .tpop-band__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
	padding: 2px 30px;
}

.tp-outcome-prototype .tpop-band__item + .tpop-band__item {
	border-left: 1px solid var(--tpop-border);
}

.tp-outcome-prototype .tpop-band__item:first-child {
	padding-left: 0;
}

.tp-outcome-prototype .tpop-band__item:last-child {
	padding-right: 0;
}

/* Icon plate, de-plated. The circular container was the single biggest
   source of the "generated" feel: four pale discs marching across the
   band. The span is kept (the PHP still emits it) but reduced to a bare
   optically-aligned icon slot. */
.tp-outcome-prototype .tpop-plate {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	margin-top: 2px;
	border-radius: 0;
	background: none;
	color: var(--tp-control);
}

.tp-outcome-prototype .tpop-band__text {
	min-width: 0;
}

.tp-outcome-prototype .tpop-band__v {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--tpop-ink);
}

.tp-outcome-prototype .tpop-band__k {
	display: block;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--tp-on-light-strong);
	margin-top: 4px;
}

/* --- 3. Original situation ---------------------------------- */
.tp-outcome-prototype .tpop-situation {
	background: #fff;
	padding: 60px 0 64px;
}

.tp-outcome-prototype .tpop-situation__grid {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

.tp-outcome-prototype .tpop-situation__head .tpop-rule {
	margin-bottom: 20px;
}

.tp-outcome-prototype .tpop-situation__kicker {
	color: var(--tp-accent-light);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	margin-top: 16px;
	max-width: 22ch;
}

.tp-outcome-prototype .tpop-situation__body {
	max-width: 760px;
}

.tp-outcome-prototype .tpop-situation__body p {
	color: var(--tp-on-light-strong);
	font-size: 17px;
	line-height: 1.7;
}

.tp-outcome-prototype .tpop-situation__body p + p {
	margin-top: 22px;
}

/* --- 4. Transformation approach ----------------------------- */
.tp-outcome-prototype .tpop-approach {
	background: var(--tpop-navy);
	padding: 48px 0 54px;
}

.tp-outcome-prototype .tpop-approach__lede {
	color: var(--tp-on-dark-muted);
	font-size: 16.5px;
	line-height: 1.7;
	text-align: center;
	max-width: var(--tpop-editorial);
	margin: 16px auto 0;
}

.tp-outcome-prototype .tpop-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 44px;
	margin-top: 36px;
}

.tp-outcome-prototype .tpop-step {
	position: relative;
	min-width: 0;
}

/* Per-step connector.
   DESKTOP: hidden — the horizontal connector is drawn once as a single
   continuous line on .tpop-steps::before (see the min-width:1025px block
   below). The previous per-step 34px stub in each gutter read as four
   disconnected fragments.
   MOBILE (<=767px): this same element is re-enabled as the vertical spine
   (position:absolute is retained here so that rule keeps resolving). */
.tp-outcome-prototype .tpop-step__connector {
	display: none;
	position: absolute;
	top: 10px;
	left: -44px;
	width: 34px;
	height: 1px;
	background: rgba(53, 194, 218, 0.32);
}

/* De-circled. The outlined discs read as a template; a bare cyan line
   icon sitting on the same baseline as the step number is quieter and
   lets the step title carry the hierarchy. */
.tp-outcome-prototype .tpop-step__icon {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: var(--tpop-cyan);
}

/* ------------------------------------------------------------------
   DESKTOP (>=1025px): single continuous horizontal connector.
   Drawn once behind the four icons instead of as per-step fragments.
   Icons are left-aligned in four equal columns (gap 44px), so their
   centres are NOT the column centres — the line is anchored to the
   real icon centres: first icon centre = 10px, last = 75% + 33px
   (derived from the 4-col / 44px-gap grid), so it runs cleanly from
   icon 1 to icon 4. Each icon gets a small navy (#03162C) mask via
   symmetric padding + a compensating negative margin, so the line is
   hidden immediately behind each glyph without any circle or badge.
   ------------------------------------------------------------------ */
@media (min-width: 1025px) {
	.tp-outcome-prototype .tpop-steps {
		position: relative;
	}
	.tp-outcome-prototype .tpop-steps::before {
		content: "";
		position: absolute;
		top: 10px;                    /* vertical centre of the 20px icon row */
		left: 10px;                   /* centre of the first icon */
		width: calc(75% + 33px);      /* out to the centre of the fourth icon */
		height: 1px;
		background: rgba(53, 194, 218, 0.25);
		z-index: 0;
	}
	.tp-outcome-prototype .tpop-step {
		z-index: 1;                   /* icons + content above the line */
	}
	.tp-outcome-prototype .tpop-step__icon {
		position: relative;
		z-index: 1;
		box-sizing: content-box;      /* keep the 20px glyph, add mask via padding */
		padding: 0 7px;
		margin-left: -7px;            /* keep the glyph on the column's left edge */
		background: #03162C;          /* masks the line right behind the glyph */
	}
}

.tp-outcome-prototype .tpop-step__num {
	display: block;
	color: var(--tpop-cyan);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-top: 14px;
}

.tp-outcome-prototype .tpop-step__title {
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	margin-top: 8px;
}

.tp-outcome-prototype .tpop-step__body {
	color: var(--tp-on-dark-muted);
	font-size: 15px;
	line-height: 1.6;
	margin-top: 12px;
}

/* --- 5. Business outcomes ----------------------------------- */
.tp-outcome-prototype .tpop-outcomes {
	background: var(--tpop-bg);
	padding: 48px 0 48px;
}

.tp-outcome-prototype .tpop-outcomes__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	gap: 44px;
	align-items: start;
}

.tp-outcome-prototype .tpop-outcomes__lede {
	color: var(--tp-on-light-strong);
	font-size: 16.5px;
	line-height: 1.7;
	margin-top: 18px;
}

.tp-outcome-prototype .tpop-outcomes__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

/* Flat editorial panels, not floating cards. The white box + border on a
   grey section was the generic-SaaS tell; a 2px teal top rule gives each
   outcome equal weight and lets the metric do the work. */
.tp-outcome-prototype .tpop-ocard {
	background: none;
	border: 0;
	border-top: 2px solid var(--tp-accent-light);
	border-radius: 0;
	padding: 20px 22px 4px 0;
	min-width: 0;
}

.tp-outcome-prototype .tpop-ocard__v {
	display: block;
	color: var(--tp-accent-light);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

/* Text headline (Remote-first operating model) sits where a numeral would;
   smaller so it wraps to two lines and keeps the three cards balanced. */
.tp-outcome-prototype .tpop-ocard__v--text {
	font-size: 17.5px;
	line-height: 1.25;
	letter-spacing: -0.005em;
}

/* Muted grey: teal is the only accent in an outcome card, so this
   label cannot introduce a second accent colour alongside the headline. */
.tp-outcome-prototype .tpop-ocard__eyebrow {
	display: block;
	color: #66788C;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.tp-outcome-prototype .tpop-ocard__k {
	display: block;
	color: var(--tp-on-light-strong);
	font-size: 15px;
	line-height: 1.6;
	margin-top: 12px;
}

/* Quote */
.tp-outcome-prototype .tpop-quote {
	position: relative;
	margin: 30px 0 0;
	background: var(--tpop-navy);
	border-radius: 4px;
	padding: 28px 38px 30px 74px;
}

.tp-outcome-prototype .tpop-quote__mark {
	position: absolute;
	top: 21px;
	left: 34px;
	color: var(--tpop-cyan);
	font-size: 44px;
	line-height: 1;
	font-weight: 700;
}

/* The7 forces a light background + border on blockquote via a higher-specificity
   rule; these overrides are required for the quote to be legible. */
.tp-outcome-prototype .tpop-quote__text,
.tp-outcome-prototype blockquote.tpop-quote__text {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	font-style: normal;
	quotes: none;
}

.tp-outcome-prototype .tpop-quote__text::before,
.tp-outcome-prototype .tpop-quote__text::after {
	content: none;
}

.tp-outcome-prototype .tpop-quote__text p {
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
}

.tp-outcome-prototype .tpop-quote__attr {
	margin-top: 14px;
}

.tp-outcome-prototype .tpop-quote__attr-primary {
	display: block;
	color: var(--tp-accent-dark);
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.tp-outcome-prototype .tpop-quote__attr-secondary {
	display: block;
	color: var(--tp-on-dark-faint);
	font-size: 13.5px;
	margin-top: 3px;
}

/* --- 6. Related capabilities -------------------------------- */
.tp-outcome-prototype .tpop-capabilities {
	background: var(--tpop-bg);
	padding: 4px 0 56px;
}

.tp-outcome-prototype .tpop-caps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-top: 24px;
}

.tp-outcome-prototype .tpop-cap {
	min-width: 0;
}

/* Whole card is one anchor: clickable and keyboard-reachable by default. */
/* Capability index, not a card deck. A teal top rule replaces the boxed
   white card; the shadow and the 3px lift are gone, so the four entries
   sit in the page rather than hovering above it. */
.tp-outcome-prototype .tpop-cap__link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	min-height: 250px;
	background: var(--tp-surface-card);
	border: 1px solid var(--tp-border);
	border-top: 2px solid var(--tp-accent-light);
	border-radius: 4px;
	padding: 24px 24px 24px;
	text-decoration: none;
	color: inherit;
	box-shadow: none;
	transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

/* Restrained hover: a background tint and a 1px lift. */
.tp-outcome-prototype .tpop-cap__link:hover,
.tp-outcome-prototype .tpop-cap__link:focus-visible {
	border-color: var(--tp-accent-light);
	background-color: #FBFDFE;
	transform: translateY(-1px);
}

.tp-outcome-prototype .tpop-cap__link:focus-visible {
	outline: 2px solid var(--tp-focus);
	outline-offset: 3px;
}

/* Small line icon, no plate — matches the proof strip and the steps. */
.tp-outcome-prototype .tpop-cap__link .tpop-plate {
	width: 20px;
	height: 20px;
	padding: 0;
	margin-bottom: 16px;
}

/* Muted dark gray (6.87:1 on the white card). Cyan measures 2.13:1 here,
   so it is not usable for this label. */
.tp-outcome-prototype .tpop-cap__eyebrow {
	display: block;
	color: #4A5C70;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	margin-bottom: 9px;
}

.tp-outcome-prototype .tpop-cap__title {
	min-width: 0;
	color: var(--tp-on-light);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.tp-outcome-prototype .tpop-cap__desc {
	color: var(--tp-on-light-strong);
	font-size: 15px;
	line-height: 1.6;
	margin-top: 10px;
}

/* Pushed to the bottom so the link sits on one line across all four cards. */
.tp-outcome-prototype .tpop-cap__more {
	margin-top: auto;
	padding-top: 20px;
	color: var(--tp-accent-light);
	font-size: 14.5px;
	font-weight: 600;
}

.tp-outcome-prototype .tpop-cap__link:hover .tpop-arrow {
	transform: translate(3px, -1px);
}

.tp-outcome-prototype .tpop-cap__more .tpop-arrow {
	transition: transform 0.18s ease;
}

/* --- 7. Final CTA ------------------------------------------- */
.tp-outcome-prototype .tpop-cta {
	position: relative;
	isolation: isolate;
	background: var(--tpop-navy);
	padding: 46px 0 50px;
	overflow: hidden;
}

/* The repeating polygon-and-node lattice read as stock "AI/network"
   wallpaper and fought the copy. Replaced with a quiet navy field: a
   single soft cyan light from the upper left and a subtle vertical
   gradient. No repeated motif, no nodes, no glow. */
.tp-outcome-prototype .tpop-cta__pattern {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 1;
	background-image:
		radial-gradient(120% 90% at 8% 0%, rgba(53, 194, 218, 0.10) 0, transparent 58%),
		linear-gradient(180deg, rgba(7, 27, 52, 0.55) 0%, rgba(3, 22, 44, 0) 60%);
	background-repeat: no-repeat, no-repeat;
}

.tp-outcome-prototype .tpop-cta__inner {
	text-align: center;
}

.tp-outcome-prototype .tpop-eyebrow--center {
	margin-bottom: 12px;
}

.tp-outcome-prototype .tpop-cta__lede {
	color: var(--tp-on-dark-muted);
	font-size: 16.5px;
	line-height: 1.7;
	max-width: var(--tpop-editorial);
	margin: 14px auto 0;
}

.tp-outcome-prototype .tpop-btn {
	display: inline-block;
	margin-top: 26px;
	background: var(--tpop-teal);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	padding: 15px 30px;
	border-radius: 4px;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.tp-outcome-prototype .tpop-btn:hover,
.tp-outcome-prototype .tpop-btn:focus-visible {
	background: #196575;
	color: #fff;
	transform: translateY(-1px);
}

.tp-outcome-prototype .tpop-btn:focus-visible {
	outline: 2px solid var(--tpop-cyan);
	outline-offset: 3px;
}

.tp-outcome-prototype .tpop-btn .tpop-arrow {
	margin-left: 6px;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1280px) {
	.tp-outcome-prototype .tpop-hero__inner {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 40px;
	}
	.tp-outcome-prototype .tpop-situation__grid {
		grid-template-columns: 280px minmax(0, 1fr);
		gap: 44px;
	}
	/* Below ~1238px the leading connector would sit outside the content box. */
	.tp-outcome-prototype .tpop-step:first-child .tpop-step__connector {
		display: none;
	}
}

@media (max-width: 1024px) {
	.tp-outcome-prototype {
		--tp-site-gutter: 40px;
	}
	.tp-outcome-prototype .tpop-hero {
		min-height: 0;
		padding: 96px 0 58px;
	}
	.tp-outcome-prototype .tpop-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}
	.tp-outcome-prototype .tpop-hero__scrim {
		background:
			linear-gradient(180deg, rgba(3, 22, 44, 0.86) 0%, rgba(3, 22, 44, 0.8) 45%, rgba(3, 22, 44, 0.92) 100%);
	}
	.tp-outcome-prototype .tpop-hero__title {
		max-width: none;
	}
	.tp-outcome-prototype .tpop-panel {
		max-width: 460px;
	}
	/* Two columns: the divider belongs only to the right-hand column, and
	   rows need their own spacing back. */
	.tp-outcome-prototype .tpop-band__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 0;
	}
	.tp-outcome-prototype .tpop-band__item,
	.tp-outcome-prototype .tpop-band__item:first-child,
	.tp-outcome-prototype .tpop-band__item:last-child {
		padding: 2px 24px;
	}
	.tp-outcome-prototype .tpop-band__item + .tpop-band__item {
		border-left: 0;
	}
	.tp-outcome-prototype .tpop-band__item:nth-child(odd) {
		padding-left: 0;
	}
	.tp-outcome-prototype .tpop-band__item:nth-child(even) {
		padding-right: 0;
		border-left: 1px solid var(--tpop-border);
	}
	.tp-outcome-prototype .tpop-situation__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}
	.tp-outcome-prototype .tpop-situation__kicker {
		max-width: none;
	}
	.tp-outcome-prototype .tpop-steps {
		grid-template-columns: repeat(2, 1fr);
		gap: 38px 44px;
	}
	.tp-outcome-prototype .tpop-step:nth-child(odd) .tpop-step__connector {
		display: none;
	}
	.tp-outcome-prototype .tpop-outcomes__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}
	.tp-outcome-prototype .tpop-caps {
		grid-template-columns: repeat(2, 1fr);
	}
	.tp-outcome-prototype .tpop-cap__link {
		min-height: 262px;
	}
}

@media (max-width: 767px) {
	.tp-outcome-prototype {
		--tp-site-gutter: 20px;
	}
	.tp-outcome-prototype .tpop-hero {
		padding: 86px 0 46px;
	}
	.tp-outcome-prototype .tpop-hero__title {
		font-size: clamp(34px, 10vw, 46px);
	}
	.tp-outcome-prototype .tpop-hero__lede,
	.tp-outcome-prototype .tpop-approach__lede,
	.tp-outcome-prototype .tpop-cta__lede {
		font-size: 16px;
	}
	.tp-outcome-prototype .tpop-situation__body p,
	.tp-outcome-prototype .tpop-outcomes__lede {
		font-size: 16px;
	}
	.tp-outcome-prototype .tpop-ocard__v--text {
		font-size: 18px;
	}
	/* Keep every body-copy run at or above ~15px on small screens. */
	.tp-outcome-prototype .tpop-step__body,
	.tp-outcome-prototype .tpop-ocard__k,
	.tp-outcome-prototype .tpop-outcomes__lede,
	.tp-outcome-prototype .tpop-band__k {
		font-size: 15px;
	}
	.tp-outcome-prototype .tpop-panel {
		max-width: none;
		padding: 26px 22px 28px;
	}
	.tp-outcome-prototype .tpop-panel__figure {
		font-size: 40px;
	}

	.tp-outcome-prototype .tpop-band {
		padding: 28px 0;
	}
	/* Single column: no vertical rules, full-bleed to the gutter. */
	.tp-outcome-prototype .tpop-band__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
	.tp-outcome-prototype .tpop-band__item,
	.tp-outcome-prototype .tpop-band__item:first-child,
	.tp-outcome-prototype .tpop-band__item:last-child,
	.tp-outcome-prototype .tpop-band__item:nth-child(odd),
	.tp-outcome-prototype .tpop-band__item:nth-child(even) {
		padding: 0;
		border-left: 0;
	}

	.tp-outcome-prototype .tpop-situation,
	.tp-outcome-prototype .tpop-approach,
	.tp-outcome-prototype .tpop-outcomes,
	.tp-outcome-prototype .tpop-cta {
		padding-top: 52px;
		padding-bottom: 56px;
	}
	.tp-outcome-prototype .tpop-capabilities {
		padding: 4px 0 54px;
	}

	/* Vertical connected timeline */
	.tp-outcome-prototype .tpop-steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		margin-top: 38px;
	}
	.tp-outcome-prototype .tpop-step {
		padding: 0 0 32px 40px;
		min-height: 20px;
	}
	.tp-outcome-prototype .tpop-step:last-child {
		padding-bottom: 0;
	}
	.tp-outcome-prototype .tpop-step__icon {
		position: absolute;
		top: 0;
		left: 0;
	}
	/* Vertical spine: re-enable the connectors hidden by the 2-column rules above. */
	.tp-outcome-prototype .tpop-step .tpop-step__connector,
	.tp-outcome-prototype .tpop-step:nth-child(odd) .tpop-step__connector,
	.tp-outcome-prototype .tpop-step:first-child .tpop-step__connector {
		display: block;
		top: 28px;
		left: 9px;
		width: 1px;
		height: calc(100% - 28px);
		background: rgba(53, 194, 218, 0.32);
	}
	.tp-outcome-prototype .tpop-step:last-child .tpop-step__connector {
		display: none;
	}
	.tp-outcome-prototype .tpop-step__num {
		margin-top: 2px;
	}

	.tp-outcome-prototype .tpop-outcomes__cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}
	.tp-outcome-prototype .tpop-ocard {
		padding: 18px 0 0;
	}
	.tp-outcome-prototype .tpop-quote {
		margin-top: 34px;
		padding: 28px 24px 30px 24px;
	}
	.tp-outcome-prototype .tpop-quote__mark {
		position: static;
		display: block;
		margin-bottom: 4px;
		font-size: 38px;
	}
	.tp-outcome-prototype .tpop-quote__text p {
		font-size: 17.5px;
	}

	.tp-outcome-prototype .tpop-caps {
		grid-template-columns: minmax(0, 1fr);
	}
	.tp-outcome-prototype .tpop-cap__link {
		min-height: 0;
		padding: 24px 22px;
	}
	.tp-outcome-prototype .tpop-cap__more {
		padding-top: 16px;
	}
}

@media (max-width: 380px) {
	.tp-outcome-prototype .tpop-panel__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.tp-outcome-prototype .tpop-cap__link {
		padding: 22px 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tp-outcome-prototype * {
		transition: none !important;
	}
}