/* ==========================================================================
   Homepage concept (/new) — standalone, internal review only
   ==========================================================================
   Loaded on this page alone (see includes/scripts-and-styles.php), so nothing
   here reaches the live homepage or the global bundle. No Tailwind, so it
   needs no build step.
   ========================================================================== */

.tcwn {
	/* Colour --------------------------------------------------------------- */
	--n-ink: #0f2544;
	--n-ink-2: #47597a;
	--n-ink-3: #7d8ca6;
	--n-blue: #1f57d6;
	--n-blue-2: #1743ad;
	--n-blue-soft: #eaf1ff;
	--n-line: rgba(15, 37, 68, 0.10);
	--n-paper: #fbfafa;
	--n-sky: #eaf2fd;
	--n-navy: #071b38;
	--n-navy-2: #0c2748;
	--n-green: #1eb980;

	/* Shape ---------------------------------------------------------------- */
	--n-content: 1200px;
	--n-pad: 24px;
	--n-r: 14px;

	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Lato", Helvetica, Arial, sans-serif;
	color: var(--n-ink);
	-webkit-font-smoothing: antialiased;
}

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

.tcwn-shell {
	position: relative;
	width: 100%;
	max-width: calc(var(--n-content) + (var(--n-pad) * 2));
	margin-inline: auto;
	padding-inline: var(--n-pad);
}

.tcwn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 30px;
	border: 0;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.tcwn-btn--primary { background: var(--n-blue); color: #fff; }
.tcwn-btn--primary:hover { background: var(--n-blue-2); color: #fff; transform: translateY(-1px); }

/* ==========================================================================
   Hero — a brief on the drafting table
   ========================================================================== */

.tcwn-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, var(--n-paper) 55%, #f4f6fa 100%);
	padding: clamp(74px, 10.6vw, 162px) 0 clamp(84px, 10.4vw, 156px);
}

/* Blueprint paper: a faint engineering grid, heavier every fifth line. */
.tcwn-hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(31, 87, 214, 0.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(31, 87, 214, 0.04) 1px, transparent 1px),
		linear-gradient(to right, rgba(31, 87, 214, 0.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(31, 87, 214, 0.07) 1px, transparent 1px);
	background-size: 26px 26px, 26px 26px, 130px 130px, 130px 130px;
	pointer-events: none;
}

/* Drafting furniture ------------------------------------------------------ */

.tcwn-sheet { position: absolute; inset: 0; pointer-events: none; color: rgba(31, 87, 214, 0.30); }

@media (max-width: 899px) { .tcwn-sheet { display: none; } }

.tcwn-sheet__mark { position: absolute; left: var(--x); top: var(--y); width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.tcwn-sheet__mark::before,
.tcwn-sheet__mark::after { content: ""; position: absolute; background: currentColor; opacity: 0.55; }
.tcwn-sheet__mark::before { left: 0; right: 0; top: 50%; height: 1px; }
.tcwn-sheet__mark::after { top: 0; bottom: 0; left: 50%; width: 1px; }

.tcwn-sheet__note {
	position: absolute;
	left: var(--x);
	top: var(--y);
	margin: 0;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
	color: rgba(31, 87, 214, 0.34);
	white-space: nowrap;
}
.tcwn-sheet__note b { display: block; font-weight: 600; color: rgba(31, 87, 214, 0.55); }
.tcwn-sheet__note--r { transform: translateX(-100%); text-align: right; }
.tcwn-sheet__note--wide b { letter-spacing: 0.2em; }

/* The rule down the left margin, ticked like a scale. */
.tcwn-sheet__rule {
	position: absolute;
	left: 3.4%;
	top: 30%;
	bottom: 26%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0;
	padding: 0 0 0 22px;
	border-left: 1px solid rgba(31, 87, 214, 0.18);
	list-style: none;
}
.tcwn-sheet__rule li { position: relative; }
.tcwn-sheet__rule li::before { content: ""; position: absolute; left: -22px; top: 50%; width: 9px; height: 1px; background: rgba(31, 87, 214, 0.32); }
.tcwn-sheet__rule i { font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; color: rgba(31, 87, 214, 0.34); }

/* Copy -------------------------------------------------------------------- */

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

@media (min-width: 1000px) {
	.tcwn-hero__inner { grid-template-columns: 74px minmax(0, 0.92fr) minmax(0, 1.06fr); }
}

.tcwn-pill {
	display: inline-block;
	margin: 0;
	padding: 9px 20px;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(31, 87, 214, 0.45);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--n-blue);
}

.tcwn-hero__title {
	margin: clamp(20px, 2.4vw, 30px) 0 0;
	font-size: clamp(29px, 2.9vw, 40px);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.16;
	color: var(--n-ink);
	max-width: 26ch;
}

.tcwn-hero__lede {
	margin: clamp(16px, 1.8vw, 22px) 0 0;
	font-size: clamp(15px, 1.15vw, 16.5px);
	line-height: 1.7;
	color: var(--n-ink-2);
	max-width: 48ch;
}

.tcwn-hero__copy .tcwn-btn { margin-top: clamp(24px, 2.8vw, 34px); gap: 12px; }
.tcwn-btn svg { transition: transform .2s ease; }
.tcwn-btn:hover svg { transform: translateX(3px); }

.tcwn-hero__proof { margin: clamp(20px, 2.2vw, 28px) 0 0; font-size: 15px; font-weight: 500; color: var(--n-ink-2); }
.tcwn-hero__proof b { font-weight: 700; color: var(--n-blue); }
.tcwn-hero__proof i { font-style: normal; margin: 0 4px; color: var(--n-ink-3); }

/* The brief ---------------------------------------------------------------- */

.tcwn-hero__visual { position: relative; display: flex; justify-content: center; }

.tcwn-brief {
	position: relative;
	width: min(100%, 560px);
	padding: 40px 38px 42px;
	background:
		linear-gradient(115deg, #ffffff 0%, #fbfaf7 46%, #f2f1ec 100%);
	box-shadow:
		0 2px 3px rgba(15, 37, 68, 0.05),
		0 22px 44px rgba(15, 37, 68, 0.13),
		0 48px 90px rgba(15, 37, 68, 0.09);
	transform: rotate(2.1deg);
}

.tcwn-brief__clip {
	position: absolute;
	top: -26px;
	left: 46px;
	width: 26px;
	height: 82px;
	border: 3.5px solid var(--n-blue);
	border-radius: 13px;
	transform: rotate(-4deg);
}
.tcwn-brief__clip::after {
	content: "";
	position: absolute;
	inset: 8px 6px 18px;
	border: 3.5px solid var(--n-blue);
	border-radius: 9px;
	opacity: 0.85;
}

.tcwn-brief__title { margin: 0 0 0 76px; font-size: 27px; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; color: #1b2c45; }
.tcwn-brief__subtitle { margin: 5px 0 0 76px; font-size: 15px; font-weight: 500; color: var(--n-blue); }

.tcwn-brief__rows { margin: 26px 0 0; padding: 0; list-style: none; }
.tcwn-brief__rows li {
	display: grid;
	grid-template-columns: 34px 96px minmax(0, 1fr) 26px;
	gap: 14px;
	align-items: center;
	padding: 15px 0;
	border-top: 1px solid rgba(15, 37, 68, 0.11);
}

.tcwn-brief__icon { display: flex; color: var(--n-blue); }
.tcwn-brief__rows b { font-size: 15.5px; font-weight: 600; color: #24364f; }

/* The notes are handwritten, on a ruled line, the way someone fills in a form. */
.tcwn-brief__rows i {
	font-style: normal;
	font-family: "Caveat", "Segoe Script", cursive;
	font-size: 17.5px;
	line-height: 1.35;
	color: #46586f;
	border-bottom: 1px solid rgba(15, 37, 68, 0.16);
	padding-bottom: 2px;
}

.tcwn-brief__sketch { border-bottom: 0 !important; padding-bottom: 0 !important; color: #5b6b81; }
.tcwn-brief__sketch svg { display: block; width: 100%; height: auto; max-width: 210px; }

.tcwn-brief__check {
	position: relative;
	width: 21px;
	height: 21px;
	border: 1.6px solid #7e8ca0;
	border-radius: 2px;
	justify-self: end;
}
.tcwn-brief__check::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 0;
	width: 8px;
	height: 14px;
	border: solid #2f4468;
	border-width: 0 2.4px 2.4px 0;
	transform: rotate(42deg);
}
.tcwn-brief__check--live { border-color: var(--n-green); }
.tcwn-brief__check--live::after { border-color: var(--n-green); }

/* The pen ------------------------------------------------------------------ */

/* Positioned against the sheet so the nib always meets the stroke it just drew. */
.tcwn-pen {
	position: absolute;
	left: 88%;
	top: 88%;
	width: 52%;
	max-width: 300px;
	transform: rotate(24deg);
	transform-origin: 0 50%;
	filter: drop-shadow(0 14px 22px rgba(15, 37, 68, 0.26));
	z-index: 2;
}
.tcwn-pen svg { display: block; width: 100%; height: auto; }

/* On a handset the sheet is decoration the reader has to scroll past to reach the page, so the
   whole drawing goes: brief, pen and the stroke between them. The copy stands on its own. */
@media (max-width: 899px) {
	.tcwn-hero__visual,
	.tcwn-pen,
	.tcwn-thread--hero { display: none; }
}

/* Scroll cue --------------------------------------------------------------- */

.tcwn-scroll {
	position: absolute;
	left: 50%;
	bottom: clamp(18px, 2.4vw, 34px);
	transform: translateX(-50%);
	color: var(--n-blue);
	opacity: 0.75;
	animation: tcwn-nudge 2.4s ease-in-out infinite;
}

@keyframes tcwn-nudge {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 6px); }
}

@media (prefers-reduced-motion: reduce) { .tcwn-scroll { animation: none; } }

/* ==========================================================================
   Architecture — the workflow becomes the system
   ========================================================================== */

.tcwn-arch {
	position: relative;
	background: var(--n-sky);
	background-image:
		linear-gradient(to right, rgba(31, 87, 214, 0.045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(31, 87, 214, 0.045) 1px, transparent 1px);
	background-size: 140px 140px, 140px 140px;
	padding: clamp(46px, 5.4vw, 84px) 0 clamp(50px, 6vw, 92px);
}

.tcwn-arch__inner { display: grid; gap: clamp(20px, 2.6vw, 40px); grid-template-columns: 1fr; }

@media (min-width: 1000px) { .tcwn-arch__inner { grid-template-columns: 74px minmax(0, 1fr); } }

/* Delivery rail ----------------------------------------------------------- */

.tcwn-rail {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1000px) {
	.tcwn-rail { display: grid; gap: clamp(28px, 4vw, 58px); align-content: start; padding-top: 8px; }
}

.tcwn-rail__step { position: relative; padding-left: 14px; color: var(--n-ink-3); }
.tcwn-rail__step::before { content: ""; position: absolute; left: 0; top: 2px; bottom: -6px; width: 2px; border-radius: 2px; background: rgba(15, 37, 68, 0.10); }
.tcwn-rail__step:last-child::before { bottom: 6px; }
.tcwn-rail__step.is-on { color: var(--n-blue); }
.tcwn-rail__step.is-on::before { background: var(--n-blue); }

.tcwn-rail__no { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.tcwn-rail__step.is-on .tcwn-rail__no { font-size: 21px; }
.tcwn-rail__label { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; }
.tcwn-rail__icon { display: block; margin-top: 10px; opacity: 0.75; }

.tcwn-arch__title {
	margin: 0;
	font-size: clamp(22px, 2vw, 27px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.22;
	color: var(--n-ink);
	max-width: 15ch;
}

/* Diagram ----------------------------------------------------------------- */

/* One fixed-aspect stage with percentage-placed nodes: the diagram keeps its
   composition at every width, and the type scales with it through cqw. */
.tcwn-stage {
	position: relative;
	container-type: inline-size;
	margin-top: clamp(-4px, 0.4vw, 6px);
	aspect-ratio: 1000 / 560;
	width: 100%;
}

/* Below the pair breakpoint the diagram cannot shrink without becoming unreadable, so it keeps its
   size and scrolls sideways instead. */
@media (max-width: 999px) {
	.tcwn-arch__body { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
	.tcwn-stage { min-width: 860px; }
}

.tcwn-stage__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tcwn-wire path { fill: none; stroke-linecap: round; }
.tcwn-wire--dash path { stroke: rgba(15, 37, 68, 0.22); stroke-width: 1.4; stroke-dasharray: 4 5; }
.tcwn-wire--blue path { stroke: #2f6ae0; stroke-width: 1.6; }
.tcwn-wire--green path { stroke: #1eb980; stroke-width: 1.6; }

.tcwn-node {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--w);
	box-sizing: border-box;
}

.tcwn-node--card,
.tcwn-node--pill,
.tcwn-node--vendor,
.tcwn-node--brief {
	background: #fff;
	border: 1px solid rgba(15, 37, 68, 0.07);
	border-radius: 1cqw;
	box-shadow: 0 1cqw 2.4cqw rgba(15, 37, 68, 0.07);
}

.tcwn-node--brief { background: #f3f2ef; padding: 1.5cqw 1.4cqw; box-shadow: 0 0.8cqw 2cqw rgba(15, 37, 68, 0.06); }
.tcwn-node--brief ul { display: grid; gap: 1.15cqw; margin: 0; padding: 0; list-style: none; }
.tcwn-node--brief li { position: relative; padding-left: 2.1cqw; font-size: 1.12cqw; color: #4c5f7d; }
.tcwn-node--brief li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15cqw;
	width: 1.15cqw;
	height: 1.15cqw;
	border: 0.13cqw solid #9fb0c6;
	border-radius: 0.2cqw;
}
.tcwn-node--brief li:not(:first-child)::after {
	content: "";
	position: absolute;
	left: 0.2cqw;
	top: 0.2cqw;
	width: 0.45cqw;
	height: 0.85cqw;
	border: solid #2f4468;
	border-width: 0 0.16cqw 0.16cqw 0;
	transform: rotate(42deg);
}

.tcwn-node--card { padding: 1.25cqw 1.3cqw 1.4cqw; }
.tcwn-node__head { display: flex; align-items: center; gap: 0.7cqw; font-size: 1.16cqw; font-weight: 600; color: #24364f; }
.tcwn-node__dot { width: 1.5cqw; height: 1.5cqw; border-radius: 0.35cqw; background: #e7eefb; flex: none; }
.tcwn-node__lines { display: grid; gap: 0.55cqw; margin-top: 1cqw; }
.tcwn-node__lines i { display: block; height: 0.5cqw; border-radius: 0.5cqw; background: #eef1f6; }
.tcwn-node__lines i:last-child { width: 62%; }

.tcwn-node--pill {
	display: flex;
	align-items: center;
	gap: 0.8cqw;
	padding: 1.15cqw 1.2cqw;
	font-size: 1.16cqw;
	font-weight: 600;
	color: #24364f;
}
.tcwn-node__glyph { display: flex; color: var(--n-blue); flex: none; }
.tcwn-node__glyph svg { width: 1.4cqw; height: 1.4cqw; }

.tcwn-node--db { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* A database drawn the way the diagram draws it: a cylinder, not a pill. */
.tcwn-node__cyl {
	position: relative;
	width: 100%;
	height: 5.4cqw;
	background: #fff;
	border: 1px solid rgba(15, 37, 68, 0.09);
	border-radius: 0.9cqw / 0.55cqw;
	box-shadow: 0 1cqw 2.4cqw rgba(15, 37, 68, 0.08);
}
.tcwn-node__cyl::before,
.tcwn-node__cyl::after {
	content: "";
	position: absolute;
	left: -1px;
	right: -1px;
	height: 1.5cqw;
	border: 1px solid rgba(15, 37, 68, 0.09);
	border-radius: 50%;
	background: #fff;
}
.tcwn-node__cyl::before { top: -0.75cqw; }
.tcwn-node__cyl::after { bottom: -0.75cqw; border-top-color: transparent; }
.tcwn-node--db b { margin-top: 0.7cqw; font-size: 1.16cqw; font-weight: 600; color: #24364f; }
.tcwn-node--db i { font-style: normal; font-size: 0.95cqw; color: var(--n-ink-3); }

.tcwn-node--vendor { display: flex; flex-direction: column; gap: 0.5cqw; padding: 1.1cqw 1.2cqw 1.2cqw; }
.tcwn-node--vendor i { font-style: normal; font-size: 0.92cqw; color: var(--n-ink-3); }
.tcwn-node--vendor b { font-size: 1.5cqw; font-weight: 700; letter-spacing: -0.02em; color: #24364f; }
.tcwn-node__mark { color: #4a5d7a; }
.tcwn-node__mark svg { width: 2.6cqw; height: auto; }
.tcwn-node__sap { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; padding: 0.25cqw 0.7cqw; background: #0a6ed1; border-radius: 0.3cqw; color: #fff !important; font-size: 1.15cqw; }

/* ==========================================================================
   Operating system — the built thing, running
   ========================================================================== */

.tcwn-ops {
	position: relative;
	background: linear-gradient(180deg, #05152c 0%, #071b38 42%, #04101f 100%);
	color: #fff;
	padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 4.6vw, 66px);
	overflow: hidden;
}

.tcwn-ops__inner { display: grid; gap: clamp(28px, 3.4vw, 52px); grid-template-columns: 1fr; align-items: start; }

/* The phone overhangs the dashboard, so the column is the positioning context and the unit base. */
.tcwn-ops__visual { position: relative; container-type: inline-size; }

@media (min-width: 1060px) { .tcwn-ops__inner { grid-template-columns: 74px minmax(0, 0.38fr) minmax(0, 1fr); } }

.tcwn-ops__title {
	margin: 0;
	font-size: clamp(28px, 2.9vw, 40px);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.12;
	color: #fff;
}

.tcwn-ops__lede { margin: 18px 0 0; font-size: 14.5px; line-height: 1.65; color: rgba(226, 236, 250, 0.66); max-width: 34ch; }

.tcwn-chips { display: grid; gap: 10px; margin: clamp(22px, 2.6vw, 32px) 0 0; padding: 0; list-style: none; }
.tcwn-chips li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 11px;
	font-size: 13.5px;
	font-weight: 500;
	color: #e8effa;
}
.tcwn-chips span { display: flex; color: #4f9dff; flex: none; }

/* Dashboard --------------------------------------------------------------- */

.tcwn-dash {
	position: relative;
	container-type: inline-size;
	display: grid;
	grid-template-columns: 15% minmax(0, 1fr);
	background: #0a1c33;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

.tcwn-dash__side { padding: 1.6cqw 1.2cqw; background: #081627; border-right: 1px solid rgba(255, 255, 255, 0.06); }
.tcwn-dash__brand { display: flex; align-items: baseline; gap: 0.5cqw; margin: 0 0 1.6cqw; }
.tcwn-dash__brand b { font-size: 1.5cqw; font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.tcwn-dash__brand i { font-style: normal; font-size: 0.75cqw; letter-spacing: 0.14em; color: rgba(226, 236, 250, 0.45); }
.tcwn-dash__side ul { display: grid; gap: 0.5cqw; margin: 0; padding: 0; list-style: none; }
.tcwn-dash__side li { padding: 0.62cqw 0.7cqw; border-radius: 0.5cqw; font-size: 0.92cqw; color: rgba(226, 236, 250, 0.55); }
.tcwn-dash__side li.is-on { background: #1c4fd8; color: #fff; font-weight: 600; }

.tcwn-dash__main { padding: 1.5cqw 1.6cqw 1.7cqw; }
.tcwn-dash__bar { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; }
.tcwn-dash__bar h3 { margin: 0; font-size: 1.45cqw; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.tcwn-dash__range { padding: 0.42cqw 0.8cqw; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.45cqw; font-size: 0.8cqw; color: rgba(226, 236, 250, 0.6); }

.tcwn-dash__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9cqw; margin-top: 1.3cqw; }
.tcwn-dash__stats div { padding: 0.95cqw 1cqw; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 0.6cqw; }
.tcwn-dash__stats i { display: block; font-style: normal; font-size: 0.78cqw; color: rgba(226, 236, 250, 0.5); }
.tcwn-dash__stats b { display: block; margin-top: 0.3cqw; font-size: 1.5cqw; font-weight: 700; letter-spacing: -0.03em; color: #fff; }
.tcwn-dash__stats u { display: block; margin-top: 0.2cqw; font-size: 0.75cqw; text-decoration: none; color: #22c07d; }

.tcwn-dash__row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0.9cqw; margin-top: 0.9cqw; }

.tcwn-panel { position: relative; padding: 1cqw 1.1cqw 1.1cqw; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 0.6cqw; }
.tcwn-panel__title { margin: 0 0 0.7cqw; font-size: 0.88cqw; font-weight: 600; color: rgba(226, 236, 250, 0.75); }

.tcwn-panel--chart svg { display: block; width: 100%; height: 9cqw; overflow: visible; }
.tcwn-chart__line { fill: none; stroke: #46b8ff; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.tcwn-chart__dot { fill: #46b8ff; stroke: #0a1c33; stroke-width: 2; }
.tcwn-chart__tip {
	position: absolute;
	right: 13%;
	top: 46%;
	display: grid;
	padding: 0.5cqw 0.7cqw;
	background: #12294a;
	border-radius: 0.4cqw;
	font-size: 0.72cqw;
	line-height: 1.35;
	color: rgba(226, 236, 250, 0.7);
}
.tcwn-chart__tip b { font-size: 0.95cqw; color: #fff; }
.tcwn-chart__tip u { text-decoration: none; color: #22c07d; }

.tcwn-donut { position: relative; display: flex; justify-content: center; margin: 0.3cqw 0 0.9cqw; }
.tcwn-donut svg { width: 8.4cqw; height: 8.4cqw; transform: rotate(-90deg); }
.tcwn-donut circle { fill: none; stroke-width: 4.6; }
.tcwn-donut__ring { stroke: rgba(255, 255, 255, 0.06); }
.tcwn-donut__seg--a { stroke: #17b87e; }
.tcwn-donut__seg--b { stroke: #3d8bff; }
.tcwn-donut__seg--c { stroke: #f2a33c; }
.tcwn-donut__seg--d { stroke: #e2564a; }
.tcwn-donut__mid { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; }
.tcwn-donut__mid b { font-size: 1.25cqw; font-weight: 700; color: #fff; }
.tcwn-donut__mid i { font-style: normal; font-size: 0.72cqw; color: rgba(226, 236, 250, 0.5); }

.tcwn-legend { display: grid; gap: 0.45cqw; margin: 0; padding: 0; list-style: none; }
.tcwn-legend li { display: flex; align-items: center; gap: 0.5cqw; font-size: 0.78cqw; color: rgba(226, 236, 250, 0.7); }
.tcwn-legend span { margin-left: auto; color: rgba(226, 236, 250, 0.45); }
.tcwn-legend em { width: 0.55cqw; height: 0.55cqw; border-radius: 50%; flex: none; }
.tcwn-legend .is-a { background: #17b87e; }
.tcwn-legend .is-b { background: #3d8bff; }
.tcwn-legend .is-c { background: #f2a33c; }
.tcwn-legend .is-d { background: #e2564a; }

.tcwn-panel--table { margin-top: 0.9cqw; }
.tcwn-panel--table table { width: 100%; border-collapse: collapse; font-size: 0.82cqw; }
.tcwn-panel--table th { padding: 0 0 0.6cqw; text-align: left; font-weight: 500; color: rgba(226, 236, 250, 0.4); }
.tcwn-panel--table td { padding: 0.55cqw 0; border-top: 1px solid rgba(255, 255, 255, 0.05); color: rgba(226, 236, 250, 0.8); }
.tcwn-tag { display: inline-block; padding: 0.2cqw 0.55cqw; border-radius: 0.3cqw; font-size: 0.72cqw; }
.tcwn-tag.is-a { background: rgba(23, 184, 126, 0.16); color: #3ad39b; }
.tcwn-tag.is-b { background: rgba(61, 139, 255, 0.16); color: #77b0ff; }
.tcwn-tag.is-c { background: rgba(242, 163, 60, 0.16); color: #f4b96a; }

/* Phone ------------------------------------------------------------------- */

/* The phone is its own container, so its interface scales with the handset rather than with the
   column it overhangs. */
.tcwn-phone {
	position: absolute;
	right: 1cqw;
	top: 29cqw;
	width: 21cqw;
	container-type: inline-size;
	padding: 6px;
	background: #0b1220;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 24px;
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
}
.tcwn-phone__screen { padding: 5.6cqw 4.6cqw; background: #0c1f38; border-radius: 18px; }
.tcwn-phone__title { margin: 0 0 3.4cqw; font-size: 8cqw; font-weight: 700; color: #fff; }
.tcwn-phone__search { display: block; padding: 2.8cqw 3.4cqw; background: rgba(255, 255, 255, 0.05); border-radius: 2.6cqw; font-size: 5cqw; color: rgba(226, 236, 250, 0.4); }
.tcwn-phone__tabs { display: flex; gap: 1.8cqw; margin: 3.4cqw 0; }
.tcwn-phone__tabs i { font-style: normal; padding: 1.4cqw 2.4cqw; border-radius: 1.8cqw; font-size: 4.2cqw; color: rgba(226, 236, 250, 0.5); background: rgba(255, 255, 255, 0.04); }
.tcwn-phone__tabs i.is-on { background: #1c4fd8; color: #fff; }
.tcwn-phone__list { display: grid; gap: 2.4cqw; margin: 0; padding: 0; list-style: none; }
.tcwn-phone__list li { display: grid; grid-template-columns: 1fr auto; gap: 0.6cqw 2cqw; padding: 3cqw 3.2cqw; background: rgba(255, 255, 255, 0.04); border-radius: 2.6cqw; }
.tcwn-phone__list b { font-size: 5cqw; color: #fff; }
.tcwn-phone__list span { font-size: 5cqw; color: #fff; text-align: right; }
.tcwn-phone__list i { font-style: normal; font-size: 4.4cqw; color: rgba(226, 236, 250, 0.45); }
.tcwn-phone__list em { font-style: normal; font-size: 4.2cqw; text-align: right; }
.tcwn-phone__list .is-a { color: #3ad39b; }
.tcwn-phone__list .is-b { color: #77b0ff; }
.tcwn-phone__list .is-c { color: #f4b96a; }

/* Wired-up integrations and the closing figures ---------------------------- */

.tcwn-wired { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: clamp(60px, 8vw, 104px) 0 0; padding: 0; list-style: none; }

@media (min-width: 760px) { .tcwn-wired { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tcwn-wired li { padding: 14px 16px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; }
.tcwn-wired i { display: block; font-style: normal; font-size: 11px; color: rgba(226, 236, 250, 0.45); }
.tcwn-wired b { display: block; margin-top: 4px; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.tcwn-wired span { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: #22c07d; }
.tcwn-wired span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #22c07d; }

.tcwn-figures {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: clamp(30px, 3.4vw, 46px) 0 0;
	padding: clamp(22px, 2.6vw, 32px) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	list-style: none;
	text-align: center;
}
.tcwn-figures b { display: block; font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; letter-spacing: -0.035em; color: #4f9dff; }
.tcwn-figures span { display: block; margin-top: 6px; font-size: 13px; color: rgba(226, 236, 250, 0.6); }

/* ==========================================================================
   The thread — one animated line from the written brief to the running system
   ==========================================================================
   Each section draws its own segment, but they hand over at the same x on the
   boundary, so the three read as one line. Each segment draws itself when its
   section arrives (see home-new.js), then a short spark keeps travelling along
   it. pathLength="100" lets every path share the same dash arithmetic whatever
   its real length.
   ========================================================================== */

.tcwn-thread {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 0;
}

.tcwn-thread path { fill: none; stroke-width: 2; stroke-linecap: round; }

/* The written stroke sits on the paper; every other segment runs behind the content. */
.tcwn-thread--hero { z-index: 3; }

.tcwn-thread__draw {
	stroke: #2f6ae0;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	transition: stroke-dashoffset 1.5s cubic-bezier(0.32, 0.7, 0.3, 1);
}

.tcwn-thread--ops .tcwn-thread__draw { stroke: #1eb980; }
.tcwn-thread--arch .tcwn-thread__draw { stroke: url(#tcwn-grad); stroke: #2f6ae0; }

.is-threaded .tcwn-thread__draw { stroke-dashoffset: 0; }

/* The spark: a short bright dash running the same path, lit by a drop shadow. */
.tcwn-thread__spark {
	stroke: #7fd0ff;
	stroke-width: 3.2;
	stroke-dasharray: 3 97;
	stroke-dashoffset: 100;
	opacity: 0;
	filter: drop-shadow(0 0 6px rgba(90, 170, 255, 0.95)) drop-shadow(0 0 14px rgba(90, 170, 255, 0.55));
}

.tcwn-thread--ops .tcwn-thread__spark { stroke: #6ff0bd; filter: drop-shadow(0 0 6px rgba(60, 230, 160, 0.95)) drop-shadow(0 0 16px rgba(60, 230, 160, 0.5)); }

.is-threaded .tcwn-thread__spark { opacity: 1; animation: tcwn-spark 3.4s linear 1.2s infinite; }

@keyframes tcwn-spark {
	0%   { stroke-dashoffset: 100; }
	100% { stroke-dashoffset: 0; }
}

.tcwn-thread__end {
	fill: #1eb980;
	opacity: 0;
	transform-origin: 1332px 694px;
	transition: opacity .5s ease 1.2s;
}

.is-threaded .tcwn-thread__end { opacity: 1; animation: tcwn-pulse 2.6s ease-in-out 1.6s infinite; }

@keyframes tcwn-pulse {
	0%, 100% { filter: drop-shadow(0 0 3px rgba(30, 185, 128, 0.7)); }
	50%      { filter: drop-shadow(0 0 12px rgba(30, 185, 128, 1)); }
}

/* Nothing moves for a visitor who asked for that. The line still draws, at once. */
@media (prefers-reduced-motion: reduce) {
	.tcwn-thread__draw { transition: none; stroke-dashoffset: 0; }
	.tcwn-thread__spark { display: none; }
	.is-threaded .tcwn-thread__end { animation: none; }
	.tcwn-thread__end { opacity: 1; transition: none; }
}

/* Without JavaScript the line is simply already drawn. */
.no-js .tcwn-thread__draw { stroke-dashoffset: 0; }

/* The copy and the artwork sit over it. */
.tcwn-hero__inner,
.tcwn-arch__inner,
.tcwn-ops__inner { position: relative; z-index: 1; }

/* ==========================================================================
   Section seams — the bands blend rather than butt against each other
   ========================================================================== */

.tcwn-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: clamp(70px, 8vw, 130px);
	pointer-events: none;
	z-index: 0;
}

.tcwn-hero::after { background: linear-gradient(180deg, rgba(234, 242, 253, 0) 0%, #eaf2fd 100%); }

/* ==========================================================================
   Stage markers — the same spine mark in every section
   ========================================================================== */

.tcwn-stage-mark { position: relative; align-self: start; padding-left: 14px; margin-top: 6px; color: var(--n-ink-3); }
.tcwn-stage-mark::before { content: ""; position: absolute; left: 0; top: 2px; height: 46px; width: 2px; border-radius: 2px; background: var(--n-blue); }
.tcwn-stage-mark__no { display: block; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--n-blue); }
.tcwn-stage-mark__label { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--n-blue); }
.tcwn-stage-mark__icon { display: block; margin-top: 10px; opacity: 0.6; }

.tcwn-stage-mark--invert { color: rgba(226, 236, 250, 0.6); }
.tcwn-stage-mark--invert::before { background: #4f9dff; }
.tcwn-stage-mark--invert .tcwn-stage-mark__no,
.tcwn-stage-mark--invert .tcwn-stage-mark__label { color: #4f9dff; }