/* ---------------------------------------------------------------------------
 * Sanu case study — pixel-mirrored from Paper artboard
 * "Blinq — Case Study · Sanu (Dark)" (1440×11045)
 * ------------------------------------------------------------------------- */

body:has(.sanu-case-study) > .header { display: none; }

.sanu-case-study {
	--sanu-bg: #0A1525;
	--sanu-bg-raised: #0B1828;
	--sanu-crimson: #6B1F2C;
	--sanu-crimson-deep: #441019;
	--sanu-gold: #C9A36B;
	--sanu-paper: #F2EFE6;
	--sanu-paper-soft: #F2EFE6D1;
	--sanu-paper-muted: #F2EFE68C;
	--sanu-paper-faint: #F2EFE629;
	--sanu-ink-muted: #5A6E89;
	--sanu-line: #16263F;
	--sanu-map-line: #1F3552;
	--sanu-map-border: #243C5C;
	--sanu-dot: #0E1A2D;
	--sanu-teal: #7BD3D1;
	--sanu-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--sanu-font-display: "Inter Tight", system-ui, sans-serif;
	--sanu-font-mono: "Geist Mono", ui-monospace, monospace;
	--sanu-font-serif: "Canela Text", "Instrument Serif", Georgia, serif;
	--sanu-gutter: clamp(20px, 4.44vw, 64px);
	--sanu-max: 1312px;

	background: var(--sanu-bg);
	color: var(--sanu-paper);
	font-family: var(--sanu-font-display);
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

.sanu-case-study *,
.sanu-case-study *::before,
.sanu-case-study *::after { box-sizing: border-box; }

.sanu-cs__diamond {
	display: inline-block;
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	background: var(--sanu-gold);
}

.sanu-cs__eyebrow,
.sanu-cs__section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--sanu-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sanu-gold);
}

.sanu-cs__title-accent,
.sanu-cs__tagline-accent,
.sanu-cs__brief-accent {
	font-family: var(--sanu-font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--sanu-gold);
}

/* --- Nav ---------------------------------------------------------------- */

.sanu-cs__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88px;
	padding-inline: var(--sanu-gutter);
	border-bottom: 1px solid var(--sanu-line);
}

.sanu-cs__brand img {
	display: block;
	width: clamp(160px, 16vw, 231px);
	height: auto;
}

.sanu-cs__nav-links {
	display: flex;
	align-items: center;
	gap: 40px;
}

.sanu-cs__nav-links a {
	font-size: 14px;
	font-weight: 500;
	color: var(--sanu-paper);
	text-decoration: none;
	transition: color 180ms var(--sanu-ease-out);
}

.sanu-cs__nav-links a:hover,
.sanu-cs__nav-links a:focus-visible {
	color: var(--sanu-gold);
}

/* --- Hero --------------------------------------------------------------- */

.sanu-cs__hero {
	position: relative;
	padding: 64px var(--sanu-gutter) 96px;
	overflow: clip;
}

.sanu-cs__hero-grid {
	position: absolute;
	top: 0;
	right: 0;
	width: min(820px, 57vw);
	height: 560px;
	pointer-events: none;
	opacity: 0.85;
	background-image: url(/assets/blinq_dot.png);
	background-repeat: repeat;
	background-size: 16px 16px;
	background-position: 0 0;
	mask-image: linear-gradient(135deg, rgb(0 0 0) 0%, rgb(0 0 0 / 0.4) 55%, transparent 100%);
}

.sanu-cs__hero-inner {
	position: relative;
	max-width: var(--sanu-max);
	margin-inline: auto;
}

.sanu-cs__hero-meta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	padding-bottom: 32px;
}

.sanu-cs__hero-meta-left {
	max-width: 420px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sanu-cs__hero-lede {
	margin: 0;
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.45;
	color: var(--sanu-paper-soft);
	max-width: 380px;
}

.sanu-cs__hero-location {
	margin: 0;
	font-family: var(--sanu-font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sanu-ink-muted);
	white-space: nowrap;
}

.sanu-cs__hero-title h1 {
	margin: 0;
	font-size: clamp(96px, 27.2vw, 392px);
	font-weight: 900;
	line-height: 0.85;
	letter-spacing: -0.05em;
	color: var(--sanu-paper);
}

.sanu-cs__hero-tagline {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	padding-block: 32px;
	border-top: 1px solid var(--sanu-line);
}

.sanu-cs__tagline-copy p {
	margin: 0;
	font-size: clamp(28px, 3.2vw, 46px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.sanu-cs__hero-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sanu-cs__tag {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding-inline: 12px;
	border: 1px solid var(--sanu-paper-faint);
	border-radius: 999px;
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sanu-paper-muted);
}

/* --- Showcase / video --------------------------------------------------- */

.sanu-cs__showcase {
	margin-top: 48px;
}

.sanu-cs__showcase-caption-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
	font-family: var(--sanu-font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sanu-ink-muted);
}

.sanu-cs__showcase-film {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--sanu-gold);
}

.sanu-cs__showcase-frame {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 1312 / 720;
	background: #000;
}

.sanu-cs__showcase-poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sanu-cs__showcase-vignette {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 0%, transparent 55%, rgb(10 21 37 / 55%) 90%, rgb(10 21 37 / 85%) 100%);
	pointer-events: none;
}

.sanu-cs__showcase-frame.is-playing .sanu-cs__showcase-poster,
.sanu-cs__showcase-frame.is-playing .sanu-cs__play,
.sanu-cs__showcase-frame.is-playing .sanu-cs__showcase-vignette {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.sanu-cs__showcase-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sanu-cs__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--sanu-paper);
	transition: transform 150ms var(--sanu-ease-out);
}

.sanu-cs__play:hover,
.sanu-cs__play:focus-visible {
	transform: translate(-50%, -50%) scale(1.03);
}

.sanu-cs__play-rings {
	position: relative;
	width: 160px;
	height: 160px;
}

.sanu-cs__play-rings span {
	position: absolute;
	inset: 0;
	border: 1px solid var(--sanu-paper-faint);
	border-radius: 999px;
}

.sanu-cs__play-rings span:last-child {
	inset: 16px;
	border-color: rgb(201 163 107 / 35%);
}

.sanu-cs__play-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 104px;
	height: 104px;
	border-radius: 999px;
	background: var(--sanu-gold);
	box-shadow: 0 18px 48px rgb(201 163 107 / 45%), 0 0 0 1px var(--sanu-paper-faint);
}

.sanu-cs__play-icon::after {
	content: "";
	position: absolute;
	left: 54%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 18px 0 18px 28px;
	border-color: transparent transparent transparent var(--sanu-bg);
}

.sanu-cs__play-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border: 1px solid var(--sanu-paper-faint);
	border-radius: 999px;
	background: rgb(10 21 37 / 70%);
	font-family: var(--sanu-font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sanu-cs__play-label::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: var(--sanu-gold);
	animation: sanuPulse 2.4s ease-in-out infinite;
}

@keyframes sanuPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.55; transform: scale(0.85); }
}

.sanu-cs__showcase-footer {
	position: absolute;
	left: 32px;
	right: 32px;
	bottom: 28px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.sanu-cs__showcase-label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sanu-gold);
}

.sanu-cs__showcase-footer p {
	margin: 0;
	max-width: 420px;
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 700;
	line-height: 1.2;
}

.sanu-cs__showcase-meta {
	display: flex;
	gap: 28px;
}

.sanu-cs__showcase-meta span {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: right;
}

.sanu-cs__showcase-meta small {
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sanu-ink-muted);
}

.sanu-cs__showcase-meta strong {
	font-size: 14px;
	font-weight: 700;
}

/* --- Meta strip --------------------------------------------------------- */

.sanu-cs__meta-strip {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
	padding: 48px var(--sanu-gutter);
	background: var(--sanu-bg-raised);
	border-block: 1px solid var(--sanu-line);
}

.sanu-cs__meta-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-right: 24px;
}

.sanu-cs__meta-label {
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sanu-ink-muted);
}

.sanu-cs__meta-item strong {
	font-size: clamp(16px, 1.4vw, 20px);
	font-weight: 700;
	line-height: 1.2;
}

.sanu-cs__meta-item p {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--sanu-paper-muted);
	max-width: 202px;
}

/* --- Brief -------------------------------------------------------------- */

.sanu-cs__brief {
	display: flex;
	align-items: flex-start;
	gap: 64px;
	padding: clamp(80px, 9.7vw, 140px) var(--sanu-gutter) clamp(72px, 8.3vw, 120px);
	max-width: calc(var(--sanu-max) + var(--sanu-gutter) * 2);
	margin-inline: auto;
}

.sanu-cs__brief > .sanu-cs__section-eyebrow {
	flex: 0 0 240px;
}

.sanu-cs__brief-body {
	flex: 1;
	max-width: 1008px;
}

.sanu-cs__brief-intro h2 {
	margin: 0 0 20px;
	font-size: clamp(36px, 4.5vw, 56px);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -0.04em;
}

.sanu-cs__brief-intro .sanu-cs__brief-accent {
	margin: 0 0 48px;
	font-size: clamp(22px, 2.5vw, 32px);
	line-height: 1.2;
}

.sanu-cs__brief-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 64px;
}

.sanu-cs__brief-col h3 {
	margin: 0 0 16px;
	font-family: var(--sanu-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sanu-gold);
}

.sanu-cs__brief-col p {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--sanu-paper-soft);
}

.sanu-cs__brief-col p:last-child { margin-bottom: 0; }

/* --- Approach ----------------------------------------------------------- */

.sanu-cs__approach {
	padding: clamp(72px, 8.3vw, 120px) var(--sanu-gutter);
	border-top: 1px solid var(--sanu-line);
	max-width: calc(var(--sanu-max) + var(--sanu-gutter) * 2);
	margin-inline: auto;
}

.sanu-cs__approach-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 0;
}

.sanu-cs__approach-title-block h2 {
	margin: 24px 0 0;
	font-size: clamp(40px, 4.5vw, 64px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
}

.sanu-cs__approach-title-block h2 span {
	display: block;
}

.sanu-cs__approach-duration {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: right;
}

.sanu-cs__approach-duration span {
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sanu-ink-muted);
}

.sanu-cs__approach-duration strong {
	font-size: 20px;
	font-weight: 700;
}

.sanu-cs__approach-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin-top: 64px;
}

.sanu-cs__step {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px 32px 0 0;
	border-right: 1px solid var(--sanu-line);
	border-top: 1px solid var(--sanu-line);
}

.sanu-cs__step:last-child {
	border-right: 0;
	padding-right: 0;
}

.sanu-cs__step-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
}

.sanu-cs__step-num {
	font-family: var(--sanu-font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 80px;
	line-height: 1;
	color: var(--sanu-gold);
}

.sanu-cs__step-eyebrow {
	font-family: var(--sanu-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sanu-ink-muted);
}

.sanu-cs__step h3 {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--sanu-paper);
}

.sanu-cs__step-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sanu-cs__step-body > p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sanu-ink-muted);
}

.sanu-cs__step footer {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: auto;
	padding-top: 8px;
}

.sanu-cs__step footer span {
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sanu-ink-muted);
}

.sanu-cs__step footer p {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--sanu-paper-soft);
}

/* --- Features ----------------------------------------------------------- */

.sanu-cs__feature {
	border-top: 1px solid var(--sanu-line);
}

.sanu-cs__feature-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 48px;
	padding: clamp(72px, 8.3vw, 120px) var(--sanu-gutter) 48px;
	max-width: calc(var(--sanu-max) + var(--sanu-gutter) * 2);
	margin-inline: auto;
}

.sanu-cs__feature-copy {
	max-width: 520px;
}

.sanu-cs__feature-copy h2 {
	margin: 16px 0;
	font-size: clamp(32px, 3.5vw, 48px);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.sanu-cs__feature-copy p {
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--sanu-paper-soft);
}

.sanu-cs__feature-specs {
	max-width: 240px;
}

.sanu-cs__feature-specs span {
	display: block;
	margin-bottom: 8px;
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sanu-ink-muted);
}

.sanu-cs__feature-specs strong {
	display: block;
	margin-bottom: 12px;
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 700;
}

.sanu-cs__feature-specs p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--sanu-paper-muted);
}

.sanu-cs__feature-stage {
	position: relative;
	display: grid;
	grid-template-columns: 240px minmax(280px, 360px) 240px;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 4vw, 64px);
	min-height: 760px;
	padding: 48px var(--sanu-gutter) 96px;
	background: var(--sanu-crimson);
	overflow: clip;
}

.sanu-cs__feature--01 {
	background: var(--sanu-bg);
}

.sanu-cs__feature--02 {
	display: flex;
	align-items: stretch;
	background: var(--sanu-bg-raised);
}

.sanu-cs__feature--03 {
	padding: clamp(72px, 6.7vw, 96px) var(--sanu-gutter);
	background: var(--sanu-crimson);
	border-top-color: var(--sanu-crimson);
}

.sanu-cs__feature-grid,
.sanu-cs__map-grid {
	position: absolute;
	inset: 0;
	opacity: 0.55;
	pointer-events: none;
}

.sanu-cs__feature-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sanu-cs__map-grid {
	opacity: 0.7;
	background-image: url(/assets/blinq_dot.png);
	background-repeat: repeat;
	background-size: 20px 20px;
	background-position: 0 0;
}

.sanu-cs__feature-stage > .sanu-cs__feature-highlights,
.sanu-cs__feature-stage > .sanu-cs__phone-mock,
.sanu-cs__feature-stage > .sanu-cs__feature-stats {
	position: relative;
	z-index: 1;
}

.sanu-cs__feature-highlights {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sanu-cs__feature-highlights article {
	padding-bottom: 24px;
	border-bottom: 1px solid rgb(242 239 230 / 12%);
}

.sanu-cs__feature-highlights article:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.sanu-cs__feature-highlights span {
	display: block;
	margin-bottom: 8px;
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgb(242 239 230 / 55%);
}

.sanu-cs__feature-highlights h3 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
}

.sanu-cs__feature-highlights p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: rgb(242 239 230 / 72%);
}

.sanu-cs__phone-mock {
	margin: 0;
	border-radius: 48px;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 50%), 0 60px 120px rgb(0 0 0 / 45%);
}

.sanu-cs__phone-mock img {
	display: block;
	width: 100%;
	height: auto;
}

.sanu-cs__feature-stats {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.sanu-cs__feature-stats article {
	padding-bottom: 28px;
	border-bottom: 1px solid rgb(242 239 230 / 12%);
}

.sanu-cs__feature-stats article:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.sanu-cs__feature-stats span:first-child {
	display: block;
	margin-bottom: 8px;
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgb(242 239 230 / 55%);
}

.sanu-cs__feature-stats strong {
	font-size: clamp(40px, 4vw, 56px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.04em;
}

.sanu-cs__stat-unit {
	margin-left: 4px;
	font-size: 0.45em;
	font-weight: 700;
	vertical-align: super;
}

.sanu-cs__feature-stats p {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgb(242 239 230 / 72%);
}

/* Feature 02 map */
.sanu-cs__feature-map {
	position: relative;
	flex: 0 0 680px;
	min-height: 780px;
	padding: 64px;
	background: var(--sanu-bg-raised);
	border-right: 1px solid var(--sanu-line);
	overflow: clip;
}

@media (max-width: 1100px) {
	.sanu-cs__feature-map {
		flex: 1;
		min-height: 600px;
		border-right: 0;
		border-bottom: 1px solid var(--sanu-line);
	}
}

.sanu-cs__map-lines span {
	position: absolute;
	background: var(--sanu-map-line);
}

.sanu-cs__map-lines span:nth-child(1) { top: 200px; left: -20px; width: 520px; height: 1px; transform: rotate(-12deg); }
.sanu-cs__map-lines span:nth-child(2) { top: 380px; left: -40px; width: 560px; height: 1px; transform: rotate(8deg); }
.sanu-cs__map-lines span:nth-child(3) { top: 560px; left: 60px; width: 480px; height: 1px; transform: rotate(-4deg); }
.sanu-cs__map-lines span:nth-child(4) { top: 120px; left: 280px; width: 1px; height: 540px; transform: rotate(18deg); }
.sanu-cs__map-lines span:nth-child(5) { top: 80px; left: 520px; width: 1px; height: 600px; transform: rotate(-22deg); }

.sanu-cs__map-pin {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 14px;
	z-index: 2;
}

.sanu-cs__map-pin--vault {
	top: 304px;
	left: 240px;
}

/* Vault pin (gold, with concentric rings + square icon) */
.sanu-cs__map-pin--vault .sanu-cs__map-dot {
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: 0;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.sanu-cs__map-pin--vault .sanu-cs__map-dot::before,
.sanu-cs__map-pin--vault .sanu-cs__map-dot::after {
	content: "";
	position: absolute;
	border: 1px solid var(--sanu-gold);
	border-radius: 999px;
}

.sanu-cs__map-pin--vault .sanu-cs__map-dot::before { inset: 0; opacity: 0.25; }
.sanu-cs__map-pin--vault .sanu-cs__map-dot::after { inset: 18px; opacity: 0.5; }

.sanu-cs__map-pin--vault .sanu-cs__map-dot > span {
	position: relative;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: var(--sanu-gold);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sanu-cs__map-pin--vault .sanu-cs__map-dot > span::after {
	content: "";
	width: 14px;
	height: 14px;
	background: var(--sanu-bg-raised);
}

.sanu-cs__map-pin--vault > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 14px;
	border: 1px solid var(--sanu-map-border);
	border-radius: 8px;
	background: rgb(14 26 45 / 85%);
}

.sanu-cs__map-pin--vault > div > span:first-child {
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sanu-gold);
}

.sanu-cs__map-pin--vault strong {
	font-size: 14px;
	font-weight: 600;
	color: var(--sanu-paper);
	letter-spacing: -0.005em;
}

.sanu-cs__map-pin--vault small {
	font-size: 11px;
	font-weight: 400;
	color: var(--sanu-ink-muted);
	line-height: 1.3;
}

/* Branch pins (teal hollow dots) */
.sanu-cs__map-pin--branch {
	gap: 10px;
}

.sanu-cs__map-pin--branch .sanu-cs__map-dot {
	width: 14px;
	height: 14px;
	border-radius: 999px;
	background: var(--sanu-bg-raised);
	border: 2px solid var(--sanu-teal);
	flex-shrink: 0;
}

.sanu-cs__map-pin--branch > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sanu-cs__map-pin--branch .sanu-cs__map-branch-label {
	font-family: var(--sanu-font-mono);
	font-size: 9px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sanu-teal);
}

.sanu-cs__map-pin--branch .sanu-cs__map-branch-name {
	font-size: 12px;
	font-weight: 500;
	color: var(--sanu-paper);
}

.sanu-cs__map-header {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 2;
}

.sanu-cs__map-header span {
	font-family: var(--sanu-font-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sanu-ink-muted);
}

.sanu-cs__map-header strong {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--sanu-paper);
}

.sanu-cs__feature-copy-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 96px clamp(32px, 4vw, 64px);
}

.sanu-cs__feature-copy-col h2 {
	margin: 0;
	font-size: clamp(40px, 4.5vw, 64px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
}

.sanu-cs__feature-copy-col h2 span {
	display: block;
}

.sanu-cs__feature-copy-col > p {
	max-width: 480px;
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sanu-paper-soft);
}

.sanu-cs__option-cards {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 16px;
	border-top: 1px solid var(--sanu-line);
}

.sanu-cs__option {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr) auto;
	gap: 24px;
	align-items: flex-start;
	padding: 24px 0;
	border-bottom: 1px solid var(--sanu-line);
}

.sanu-cs__option > span:first-child {
	font-family: var(--sanu-font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 40px;
	line-height: 1;
	color: var(--sanu-gold);
}

.sanu-cs__option > div {
	max-width: 440px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sanu-cs__option h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--sanu-paper);
}

.sanu-cs__option p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sanu-ink-muted);
}

.sanu-cs__option-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	padding-top: 6px;
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sanu-ink-muted);
	white-space: nowrap;
}

.sanu-cs__option-meta strong {
	display: block;
	font-family: var(--sanu-font-display);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sanu-paper);
}

/* Feature 03 transfer */
.sanu-cs__feature03-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 48px;
	max-width: var(--sanu-max);
	margin: 0 auto 48px;
}

.sanu-cs__feature03-header .sanu-cs__feature-copy {
	max-width: 560px;
}

.sanu-cs__feature03-header h2 {
	margin: 16px 0 24px;
	font-size: clamp(40px, 4.5vw, 64px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
}

.sanu-cs__feature03-header h2 span { display: block; }

.sanu-cs__feature03-header p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--sanu-paper-soft);
}

.sanu-cs__transfer-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	text-align: right;
}

.sanu-cs__transfer-stat span {
	font-family: var(--sanu-font-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sanu-paper);
	font-weight: 500;
}

.sanu-cs__transfer-stat strong {
	font-size: 56px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.025em;
}

.sanu-cs__transfer-stat small {
	font-size: 13px;
	color: var(--sanu-paper-soft);
}

.sanu-cs__transfer-stage {
	position: relative;
	display: grid;
	grid-template-columns: minmax(200px, 283px) minmax(280px, 1fr) minmax(200px, 283px);
	align-items: center;
	gap: clamp(16px, 3vw, 48px);
	max-width: var(--sanu-max);
	margin-inline: auto;
}

.sanu-cs__phone-mock--sm {
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 40%), 0 40px 80px rgb(0 0 0 / 35%);
	border-radius: 38px;
}

.sanu-cs__phone-mock--sm img {
	border-radius: 38px;
}

.sanu-cs__transfer-flow {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	padding-inline: 16px;
}

.sanu-cs__flow-line {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgb(201 163 107 / 40%) 12%, rgb(201 163 107 / 55%) 50%, rgb(201 163 107 / 40%) 88%, transparent 100%);
	pointer-events: none;
}

.sanu-cs__flow-steps {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	width: 100%;
}

.sanu-cs__flow-steps > span {
	flex: 1;
	max-width: 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 18px;
	border-radius: 14px;
	border: 1px solid var(--sanu-crimson-deep);
	background: var(--sanu-crimson-deep);
	text-align: center;
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sanu-gold);
	transition: transform 260ms var(--sanu-ease-out);
}

.sanu-cs__flow-steps > span small {
	display: block;
	font-family: var(--sanu-font-display);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--sanu-paper);
}

.sanu-cs__flow-active,
.sanu-cs__transfer-stage.is-flowing .sanu-cs__flow-steps > span:nth-child(2) {
	transform: scale(1.04);
	box-shadow: 0 12px 28px rgb(0 0 0 / 30%);
}

.sanu-cs__transfer-flow > p {
	position: relative;
	margin: 16px 0 0;
	font-size: 13px;
	color: rgb(242 239 230 / 72%);
}

/* --- Architecture (Under the hood) -------------------------------------- */

.sanu-cs__architecture {
	--arch-card-bg: #0E1A2D;
	--arch-card-border: #1F324F;
	--arch-card-divider: rgb(31 50 79 / 70%);
	--arch-label-ink: #C8D2DF;
	padding: clamp(72px, 8.3vw, 120px) var(--sanu-gutter);
	background: var(--sanu-bg-raised);
	border-top: 1px solid var(--sanu-line);
}

.sanu-cs__arch-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
	gap: clamp(40px, 5vw, 72px);
	max-width: var(--sanu-max);
	margin-inline: auto;
}

.sanu-cs__arch-intro {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-top: 4px;
}

.sanu-cs__arch-intro h2 {
	margin: 0;
	font-size: clamp(40px, 4.4vw, 64px);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: var(--sanu-paper);
}

.sanu-cs__arch-intro h2 span { display: block; }

.sanu-cs__arch-intro h2 .sanu-cs__title-accent {
	font-weight: 400;
	font-size: clamp(40px, 4.4vw, 64px);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.sanu-cs__arch-intro p {
	margin: 0;
	max-width: 380px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sanu-paper-soft);
}

.sanu-cs__arch-rule {
	display: block;
	width: 56px;
	height: 1px;
	background: var(--sanu-gold);
	margin-top: 4px;
}

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

.sanu-cs__arch-stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	width: 100%;
	max-width: 808px;
	margin-inline: auto;
}

/* Card shell */
.sanu-cs__arch-card {
	position: relative;
	width: 100%;
	padding: 26px 28px 22px;
	border: 1px solid var(--arch-card-border);
	border-radius: 16px;
	background: var(--arch-card-bg);
	box-shadow: inset 0 1px 0 0 rgb(201 163 107 / 5%);
}

.sanu-cs__arch-card--customer { max-width: 560px; }
.sanu-cs__arch-card--ledger { max-width: 720px; }

/* Numbered badge + label sitting on the top border */
.sanu-cs__arch-card-head {
	position: absolute;
	top: -13px;
	left: 28px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-right: 10px;
	background: var(--sanu-bg-raised);
	z-index: 1;
}

.sanu-cs__arch-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--sanu-gold);
	border-radius: 999px;
	font-family: var(--sanu-font-mono);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	color: var(--sanu-gold);
}

.sanu-cs__arch-card-head > span:last-child {
	font-family: var(--sanu-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sanu-gold);
}

/* Card body row: icon + copy */
.sanu-cs__arch-card-body {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	padding-top: 6px;
}

.sanu-cs__arch-card-copy {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 4px;
}

.sanu-cs__arch-card-copy h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--sanu-paper);
}

.sanu-cs__arch-card-copy p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--sanu-paper-muted);
}

/* Phone schematic (Customer card) */
.sanu-cs__arch-phone {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 140px;
	padding: 10px 8px;
	border: 1px solid var(--sanu-gold);
	border-radius: 14px;
}

.sanu-cs__arch-phone-screen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 96px;
	border: 1px solid rgb(201 163 107 / 55%);
	border-radius: 8px;
	font-family: var(--sanu-font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 36px;
	line-height: 1;
	color: var(--sanu-gold);
}

/* Generic icon container (Ledger, Ops, Custody) */
.sanu-cs__arch-icon {
	flex-shrink: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 84px;
	padding-top: 6px;
	color: var(--sanu-gold);
}

.sanu-cs__arch-icon svg {
	display: block;
	width: 56px;
	height: 56px;
}

.sanu-cs__arch-card--ops .sanu-cs__arch-icon,
.sanu-cs__arch-card--custody .sanu-cs__arch-icon {
	width: 64px;
}

.sanu-cs__arch-card--ops .sanu-cs__arch-icon svg,
.sanu-cs__arch-card--custody .sanu-cs__arch-icon svg {
	width: 54px;
	height: 54px;
}

/* Action row inside Customer card */
.sanu-cs__arch-actions {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding-top: 14px;
	margin-top: 8px;
	border-top: 1px solid var(--arch-card-divider);
}

.sanu-cs__arch-actions > span {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-family: var(--sanu-font-display);
	font-weight: 500;
	font-size: 11px;
	line-height: 14px;
	color: var(--arch-label-ink);
}

.sanu-cs__arch-actions svg {
	display: block;
	width: 22px;
	height: 22px;
	color: var(--sanu-gold);
}

/* Category row inside Core Ledger */
.sanu-cs__arch-categories {
	display: flex;
	align-items: center;
	padding-top: 14px;
	margin-top: 8px;
	border-top: 1px solid var(--arch-card-divider);
}

.sanu-cs__arch-categories > span {
	flex: 1;
	min-width: 0;
	text-align: center;
	font-family: var(--sanu-font-mono);
	font-weight: 500;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--arch-label-ink);
}

.sanu-cs__arch-categories > span + span {
	border-left: 1px solid var(--arch-card-border);
}

/* Bottom row: Operations + Custody, side by side */
.sanu-cs__arch-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	width: 100%;
}

.sanu-cs__arch-row .sanu-cs__arch-card { max-width: none; }
.sanu-cs__arch-row .sanu-cs__arch-card-body { gap: 18px; }
.sanu-cs__arch-row .sanu-cs__arch-card-head > span:last-child {
	letter-spacing: 0.22em;
}

/* Feature grid inside bottom cards */
.sanu-cs__arch-features {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	padding-top: 14px;
	margin-top: 10px;
	border-top: 1px solid var(--arch-card-divider);
}

.sanu-cs__arch-features > span {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	font-family: var(--sanu-font-display);
	font-weight: 500;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.01em;
	color: var(--arch-label-ink);
	white-space: nowrap;
}

.sanu-cs__arch-features svg {
	display: block;
	width: 20px;
	height: 20px;
	color: var(--sanu-gold);
	flex-shrink: 0;
}

/* --- Connector traces --------------------------------------------------- */

.sanu-cs__arch-trace {
	position: relative;
	display: block;
	width: 100%;
	color: var(--sanu-gold);
	pointer-events: none;
}

/* Straight: vertical line between Card 1 and Card 2 */
.sanu-cs__arch-trace--straight {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 32px;
}

.sanu-cs__arch-trace--straight > span {
	width: 1px;
	height: 22px;
	background: linear-gradient(to bottom, rgb(201 163 107 / 55%), rgb(201 163 107 / 85%));
}

.sanu-cs__arch-trace--straight::before,
.sanu-cs__arch-trace--straight::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	transform: translateX(-50%);
}

.sanu-cs__arch-trace--straight::before { top: 0; }
.sanu-cs__arch-trace--straight::after { bottom: 0; }

/* Branch: T-shape connecting Card 2 to Cards 3 + 4 */
.sanu-cs__arch-trace--branch {
	height: 52px;
}

.sanu-cs__arch-trace--branch > span {
	position: absolute;
}

.sanu-cs__arch-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}

.sanu-cs__arch-line {
	background: currentColor;
	opacity: 0.85;
}

.sanu-cs__arch-line--htop { opacity: 0.7; height: 1px; }

.sanu-cs__arch-dot--branch-top {
	top: -2.5px;
	left: 50%;
	margin-left: -2.5px;
}

.sanu-cs__arch-line--vtop {
	top: 0;
	left: 50%;
	width: 1px;
	height: 26px;
	margin-left: -0.5px;
}

.sanu-cs__arch-line--htop {
	top: 26px;
	left: 25%;
	right: 25%;
}

.sanu-cs__arch-line--vleft {
	top: 26px;
	left: 25%;
	width: 1px;
	height: 26px;
	margin-left: -0.5px;
}

.sanu-cs__arch-line--vright {
	top: 26px;
	left: 75%;
	width: 1px;
	height: 26px;
	margin-left: -0.5px;
}

.sanu-cs__arch-dot--branch-left {
	bottom: -2.5px;
	left: 25%;
	margin-left: -2.5px;
}

.sanu-cs__arch-dot--branch-right {
	bottom: -2.5px;
	left: 75%;
	margin-left: -2.5px;
}

/* --- Built with strip --------------------------------------------------- */

.sanu-cs__arch-built {
	display: flex;
	align-items: center;
	margin: clamp(56px, 6vw, 80px) auto 0;
	max-width: var(--sanu-max);
	padding: 18px 28px;
	border: 1px solid var(--arch-card-border);
	border-radius: 14px;
	background: var(--arch-card-bg);
}

.sanu-cs__arch-built-label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	padding-right: 28px;
	border-right: 1px solid var(--arch-card-border);
}

.sanu-cs__arch-built-label svg {
	display: block;
	width: 22px;
	height: 22px;
	color: var(--sanu-gold);
}

.sanu-cs__arch-built-label > span {
	font-family: var(--sanu-font-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sanu-gold);
	white-space: nowrap;
}

.sanu-cs__arch-built ul {
	flex: 1;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0 0 0 8px;
	list-style: none;
}

.sanu-cs__arch-built li {
	position: relative;
	flex: 1;
	text-align: center;
	font-family: var(--sanu-font-display);
	font-weight: 500;
	font-size: 14px;
	line-height: 18px;
	color: var(--arch-label-ink);
	white-space: nowrap;
}

.sanu-cs__arch-built li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 18px;
	background: var(--arch-card-border);
	transform: translateY(-50%);
}

/* --- Results ------------------------------------------------------------ */

.sanu-cs__results {
	padding: clamp(80px, 9.7vw, 140px) var(--sanu-gutter) clamp(72px, 8.3vw, 120px);
	border-top: 1px solid var(--sanu-line);
	max-width: calc(var(--sanu-max) + var(--sanu-gutter) * 2);
	margin-inline: auto;
}

.sanu-cs__results-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 64px;
}

.sanu-cs__results-header h2 {
	margin: 24px 0 0;
	font-size: clamp(40px, 4.5vw, 64px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
}

.sanu-cs__results-header h2 span { display: block; }

.sanu-cs__results-window span {
	display: block;
	margin-bottom: 8px;
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sanu-ink-muted);
}

.sanu-cs__results-window strong {
	display: block;
	font-size: 18px;
	font-weight: 700;
}

.sanu-cs__results-window small {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	color: var(--sanu-paper-muted);
}

.sanu-cs__big-stats {
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
	gap: 48px;
	margin-top: 48px;
	margin-bottom: 48px;
}

.sanu-cs__big-stat > span:first-child {
	display: block;
	margin-bottom: 16px;
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sanu-ink-muted);
}

.sanu-cs__big-number {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	margin-bottom: 16px;
	font-size: clamp(72px, 10vw, 140px);
	font-weight: 900;
	line-height: 0.92;
	letter-spacing: -0.05em;
}

.sanu-cs__currency {
	font-size: 0.45em;
	line-height: 1.1;
	color: var(--sanu-gold);
}

.sanu-cs__stat-suffix {
	font-size: 0.55em;
	line-height: 1;
	color: var(--sanu-gold);
}

.sanu-cs__big-stat p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sanu-paper-muted);
	max-width: 520px;
}

.sanu-cs__small-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.sanu-cs__small-stats span:first-child {
	display: block;
	margin-bottom: 12px;
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sanu-ink-muted);
}

.sanu-cs__small-stats strong {
	display: block;
	margin-bottom: 8px;
	font-size: clamp(40px, 4vw, 56px);
	font-weight: 900;
	line-height: 1;
}

.sanu-cs__small-stats p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sanu-paper-muted);
}

/* --- Testimonial -------------------------------------------------------- */

.sanu-cs__testimonial {
	position: relative;
	min-height: 812px;
	padding: 120px var(--sanu-gutter) 96px;
	background: var(--sanu-bg-raised);
	border-top: 1px solid var(--sanu-line);
	overflow: clip;
}

.sanu-cs__quote-eyebrow {
	position: absolute;
	top: 120px;
	left: var(--sanu-gutter);
	width: 240px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sanu-cs__quote-eyebrow > span:last-child {
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sanu-ink-muted);
}

.sanu-cs__quote {
	position: relative;
	width: min(880px, calc(100vw - var(--sanu-gutter) * 2));
	min-height: 290px;
	margin: 0 auto;
	padding-top: 50px;
}

.sanu-cs__quote .sanu-cs__quote-mark {
	position: absolute;
	top: -20px;
	left: 205px;
	display: block;
	font-family: var(--sanu-font-serif);
	font-size: 76px;
	font-style: italic;
	line-height: 0.7;
	color: var(--sanu-gold);
}

.sanu-cs__quote h2 {
	width: 360px;
	max-width: 100%;
	margin: 0 auto;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.025em;
	text-align: center;
}

.sanu-cs__quote h2 span {
	display: block;
	color: var(--sanu-paper);
}

.sanu-cs__quote h2 .sanu-cs__title-accent {
	margin-top: 18px;
	font-size: 38px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--sanu-gold);
}

.sanu-cs__quote .sanu-cs__quote-mark--close {
	top: 150px;
	left: auto;
	right: 250px;
}

.sanu-cs__quote > p {
	display: none;
}

.sanu-cs__quote footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	width: 500px;
	max-width: 100%;
	margin-inline: auto;
	padding-top: 28px;
	border-top: 1px solid rgb(22 38 63 / 70%);
}

.sanu-cs__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--sanu-gold);
	color: var(--sanu-bg-raised);
	font-size: 13px;
	font-weight: 700;
	flex-shrink: 0;
}

.sanu-cs__quote footer div {
	flex: 1;
}

.sanu-cs__quote footer strong {
	display: block;
	font-size: 14px;
	font-weight: 700;
}

.sanu-cs__quote footer span {
	display: block;
	font-size: 12px;
	color: var(--sanu-paper-muted);
}

.sanu-cs__quote footer .sanu-cs__avatar {
	display: inline-flex;
	color: var(--sanu-bg-raised);
}

.sanu-cs__play-chip {
	padding: 8px 14px;
	border: 1px solid var(--sanu-line);
	border-radius: 999px;
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sanu-gold);
	white-space: nowrap;
}

/* --- Next / CTA --------------------------------------------------------- */

.sanu-cs__next {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid var(--sanu-line);
}

.sanu-cs__next-case,
.sanu-cs__next-cta {
	padding: clamp(64px, 6vw, 96px) clamp(32px, 4vw, 64px);
	text-decoration: none;
	color: inherit;
}

.sanu-cs__next-case {
	border-right: 1px solid var(--sanu-line);
	transition: background 220ms var(--sanu-ease-out);
}

.sanu-cs__next-case:hover,
.sanu-cs__next-case:focus-visible {
	background: rgb(11 24 40 / 55%);
}

.sanu-cs__next-case > span:first-child {
	display: block;
	margin-bottom: 24px;
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sanu-ink-muted);
}

.sanu-cs__next-case h2 {
	margin: 0 0 16px;
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 900;
	line-height: 1.02;
}

.sanu-cs__next-case h2 span { display: block; }

.sanu-cs__next-case > p {
	margin: 0 0 32px;
	max-width: 480px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sanu-paper-muted);
}

.sanu-cs__link-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sanu-gold);
}

.sanu-cs__next-cta {
	position: relative;
	overflow: clip;
}

.sanu-cs__cta-grid {
	position: absolute;
	inset: 0;
	opacity: 0.6;
	pointer-events: none;
	mask-image: linear-gradient(225deg, rgb(0 0 0) 0%, rgb(0 0 0 / 0.4) 60%, transparent 100%);
}

.sanu-cs__cta-grid img {
	width: 60%;
	height: 100%;
	object-fit: cover;
	margin-left: auto;
}

.sanu-cs__next-cta > :not(.sanu-cs__cta-grid) {
	position: relative;
	z-index: 1;
}

.sanu-cs__next-cta h2 {
	margin: 24px 0 32px;
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 900;
	line-height: 1.02;
}

.sanu-cs__next-cta h2 span { display: block; }

.sanu-cs__cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.sanu-cs__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	padding-inline: 20px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: transform 150ms var(--sanu-ease-out), background 180ms var(--sanu-ease-out);
}

.sanu-cs__btn:hover,
.sanu-cs__btn:focus-visible {
	transform: translateY(-1px);
}

.sanu-cs__btn--solid {
	background: var(--sanu-gold);
	color: var(--sanu-bg);
}

.sanu-cs__btn--solid span {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--sanu-bg);
}

.sanu-cs__btn--ghost {
	border: 1px solid var(--sanu-line);
	color: var(--sanu-paper);
}

/* --- Footer ------------------------------------------------------------- */

.sanu-cs__footer {
	padding: 80px var(--sanu-gutter) 48px;
	background: var(--sanu-bg);
	border-top: 1px solid var(--sanu-line);
}

.sanu-cs__footer-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 48px;
	max-width: var(--sanu-max);
	margin: 0 auto 48px;
}

.sanu-cs__footer-brand {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sanu-cs__footer-brand span {
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sanu-ink-muted);
}

.sanu-cs__footer-cols {
	display: flex;
	gap: 64px;
}

.sanu-cs__footer-cols div {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sanu-cs__footer-cols strong {
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sanu-ink-muted);
}

.sanu-cs__footer-cols a,
.sanu-cs__footer-cols span {
	font-size: 14px;
	color: var(--sanu-paper-soft);
	text-decoration: none;
}

.sanu-cs__footer-cols a:hover,
.sanu-cs__footer-cols a:focus-visible {
	color: var(--sanu-gold);
}

.sanu-cs__footer-baseline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: var(--sanu-max);
	margin-inline: auto;
	padding-top: 24px;
	border-top: 1px solid var(--sanu-line);
	font-family: var(--sanu-font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sanu-ink-muted);
}

.sanu-cs__footer-baseline nav {
	display: flex;
	gap: 24px;
}

.sanu-cs__footer-baseline a {
	color: inherit;
	text-decoration: none;
}

.sanu-cs__footer-baseline a:hover,
.sanu-cs__footer-baseline a:focus-visible {
	color: var(--sanu-gold);
}

/* --- Motion ------------------------------------------------------------- */

.sanu-cs__reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 520ms var(--sanu-ease-out),
		transform 520ms var(--sanu-ease-out);
	transition-delay: var(--sanu-reveal-delay, 0ms);
}

.sanu-cs__reveal.is-visible {
	opacity: 1;
	transform: none;
}

.sanu-cs__hero-title.sanu-cs__reveal {
	transform: translateY(40px);
}

.sanu-cs__hero-title.sanu-cs__reveal.is-visible {
	transition-duration: 680ms;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1100px) {
	.sanu-cs__meta-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
	.sanu-cs__approach-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sanu-cs__approach-steps .sanu-cs__step:nth-child(2) { border-right: 0; padding-right: 0; }
	.sanu-cs__feature--02 { flex-direction: column; }
	.sanu-cs__feature-stage { grid-template-columns: 1fr; justify-items: center; }
	.sanu-cs__feature-highlights,
	.sanu-cs__feature-stats { width: 100%; max-width: 420px; }
	.sanu-cs__arch-layout { grid-template-columns: 1fr; gap: 48px; }
	.sanu-cs__arch-intro p { max-width: none; }
	.sanu-cs__arch-built { flex-wrap: wrap; gap: 16px 24px; }
	.sanu-cs__arch-built-label {
		padding-right: 0;
		border-right: 0;
		width: 100%;
		padding-bottom: 14px;
		border-bottom: 1px solid var(--arch-card-border);
	}
	.sanu-cs__arch-built ul { padding-left: 0; flex-wrap: wrap; justify-content: flex-start; gap: 12px 28px; }
	.sanu-cs__arch-built li { flex: 0 0 auto; text-align: left; }
	.sanu-cs__arch-built li + li::before { display: none; }
	.sanu-cs__big-stats { grid-template-columns: 1fr; }
	.sanu-cs__next { grid-template-columns: 1fr; }
	.sanu-cs__next-case { border-right: 0; border-bottom: 1px solid var(--sanu-line); }
}

@media (max-width: 768px) {
	.sanu-cs__hero-meta,
	.sanu-cs__hero-tagline,
	.sanu-cs__brief,
	.sanu-cs__testimonial,
	.sanu-cs__arch-header,
	.sanu-cs__results-header,
	.sanu-cs__feature03-header,
	.sanu-cs__approach-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.sanu-cs__brief { gap: 32px; }
	.sanu-cs__brief > .sanu-cs__section-eyebrow { flex: none; }
	.sanu-cs__brief-columns { grid-template-columns: 1fr; gap: 32px; }
	.sanu-cs__approach-steps { grid-template-columns: 1fr; }
	.sanu-cs__feature-top { flex-direction: column; }
	.sanu-cs__transfer-stage { grid-template-columns: 1fr; }
	.sanu-cs__small-stats { grid-template-columns: 1fr; }

	.sanu-cs__arch-card { padding: 22px 20px 20px; }
	.sanu-cs__arch-card-head { left: 20px; }
	.sanu-cs__arch-card-body { gap: 16px; }
	.sanu-cs__arch-icon,
	.sanu-cs__arch-card--ops .sanu-cs__arch-icon,
	.sanu-cs__arch-card--custody .sanu-cs__arch-icon { width: 56px; }
	.sanu-cs__arch-icon svg { width: 44px; height: 44px; }
	.sanu-cs__arch-card--ops .sanu-cs__arch-icon svg,
	.sanu-cs__arch-card--custody .sanu-cs__arch-icon svg { width: 44px; height: 44px; }
	.sanu-cs__arch-phone { width: 64px; height: 110px; padding: 8px 6px; }
	.sanu-cs__arch-phone-screen { width: 44px; height: 76px; font-size: 28px; }
	.sanu-cs__arch-actions { gap: 8px; }
	.sanu-cs__arch-categories { flex-wrap: wrap; gap: 8px 0; }
	.sanu-cs__arch-categories > span { flex: 0 0 33.333%; }
	.sanu-cs__arch-categories > span + span { border-left: 0; }
	.sanu-cs__arch-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.sanu-cs__arch-row { grid-template-columns: 1fr; gap: 36px; }
	.sanu-cs__arch-trace--branch { height: 32px; }
	.sanu-cs__arch-trace--branch > span { display: none; }
	.sanu-cs__arch-trace--branch::before,
	.sanu-cs__arch-trace--branch::after {
		content: "";
		position: absolute;
		left: 50%;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: var(--sanu-gold);
		transform: translateX(-50%);
	}
	.sanu-cs__arch-trace--branch::before { top: 0; }
	.sanu-cs__arch-trace--branch::after { bottom: 0; }
	.sanu-cs__arch-trace--branch {
		background: linear-gradient(to bottom, transparent 0, transparent 4px, rgb(201 163 107 / 65%) 4px, rgb(201 163 107 / 65%) calc(100% - 4px), transparent calc(100% - 4px)) center/1px 100% no-repeat;
	}

	.sanu-cs__footer-top { flex-direction: column; }
	.sanu-cs__footer-cols { flex-wrap: wrap; gap: 32px; }
	.sanu-cs__footer-baseline { flex-direction: column; align-items: flex-start; }
	.sanu-cs__showcase-footer { flex-direction: column; align-items: flex-start; }
	.sanu-cs__showcase-meta { align-self: flex-start; }
	.sanu-cs__nav-links { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.sanu-cs__reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.sanu-cs__play-label::before,
	.sanu-cs__flow-steps span,
	.sanu-cs__step {
		animation: none;
		transition: none;
	}
}