/* Scoped patent showcase section — selectors limited to `.susin-ps`. */

.susin-ps,
.susin-ps * {
	box-sizing: border-box;
}

.susin-ps {
	/* Design tokens */
	--susin-ps-ref-viewport-w: 1770px;
	--susin-ps-clr-page: #f8f9fa;
	--susin-ps-clr-primary: #e07020;
	--susin-ps-clr-title: #0d0d0d;
	--susin-ps-clr-muted: #555555;
	--susin-ps-clr-muted-deep: #555555;
	--susin-ps-clr-rule: #e1e6ed;
	--susin-ps-clr-diamond: #ffffff;
	--susin-ps-clr-diamond-stroke: rgba(0, 0, 0, 0.05);
	--susin-ps-diamond-opacity: 0.88;

	--susin-ps-font-en: 'Inter', system-ui, sans-serif;
	--susin-ps-font-kr: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

	--susin-ps-pad-x: 70px;
	--susin-ps-pad-top: 52px;
	--susin-ps-pad-bottom: 52px;
	--susin-ps-col-gap: 56px;

	--susin-ps-font-eyebrow: 700 1rem / 1.42 var(--susin-ps-font-en);
	--susin-ps-font-title: 800 2.3rem / 1.2 var(--susin-ps-font-kr);
	--susin-ps-font-sub: 700 21px / 1.42 var(--susin-ps-font-kr);
	--susin-ps-font-body: 400 15px / 1.72 var(--susin-ps-font-kr);
	--susin-ps-font-feature-title: 700 17px / 1.44 var(--susin-ps-font-kr);
	--susin-ps-font-feature-body: 400 14px / 1.66 var(--susin-ps-font-kr);
	--susin-ps-font-cta: 700 16px / 1 var(--susin-ps-font-kr);

	--susin-ps-space-after-eyebrow: 14px;
	--susin-ps-space-after-title: 14px;
	--susin-ps-space-after-sub: 14px;
	--susin-ps-rule-margin-y: 30px;
	--susin-ps-space-after-feature: 28px;

	--susin-ps-radius-card: 30px;
	--susin-ps-hero-shadow: 0 14px 38px rgba(12, 22, 42, 0.07),
		0 4px 11px rgba(12, 22, 42, 0.038);

	--susin-ps-diamond-size: 472px;
	--susin-ps-diamond-radius: 56px;
	--susin-ps-diamond-rotate: -45deg;
	--susin-ps-diamond-left: 12%;
	--susin-ps-diamond-top: 52%;

	--susin-ps-feature-icon-img: 78px;
	--susin-ps-feature-gap: 20px;

	--susin-ps-cta-plus: 38px;
	--susin-ps-cta-gap: 10px;

	--susin-ps-reveal-shift: 18px;
	--susin-ps-reveal-duration: 0.62s;
	--susin-ps-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--susin-ps-reveal-stagger-step: 88ms;

	--susin-ps-cta-plus-shadow-hover: 0 5px 16px rgba(224, 112, 32, 0.38);

	margin: 0;
	background: var(--susin-ps-clr-page);
	color: var(--susin-ps-clr-title);
	font-family: var(--susin-ps-font-kr);
	-webkit-font-smoothing: antialiased;
	min-height: 814px;
	display: flex;
	align-items: center;
}

.susin-ps img {
	max-width: 100%;
	height: auto;
	display: block;
}

.susin-ps a {
	text-decoration: none;
	color: inherit;
}

.susin-ps h1.susin-ps__heading,
.susin-ps h2.susin-ps__subtitle,
.susin-ps h3.susin-ps__feature-title {
	margin: 0;
	font-weight: inherit;
}

.susin-ps .susin-ps__inner {
	position: relative;
	width: 100%;
	max-width: var(--susin-ps-ref-viewport-w);
	margin: 0 auto;
	padding: var(--susin-ps-pad-top) var(--susin-ps-pad-x) var(--susin-ps-pad-bottom);
}

.susin-ps .susin-ps__diamond {
	position: absolute;
	width: var(--susin-ps-diamond-size);
	height: var(--susin-ps-diamond-size);
	left: var(--susin-ps-diamond-left);
	top: var(--susin-ps-diamond-top);
	border-radius: var(--susin-ps-diamond-radius);
	background: var(--susin-ps-clr-diamond);
	border: 1px solid var(--susin-ps-clr-diamond-stroke);
	opacity: var(--susin-ps-diamond-opacity);
	transform: translate(-50%, -50%) rotate(var(--susin-ps-diamond-rotate));
	transform-origin: center center;
	z-index: 0;
	pointer-events: none;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}

.susin-ps .susin-ps__cols {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
	column-gap: var(--susin-ps-col-gap);
	align-items: center;
}

.susin-ps .susin-ps__copy {
	min-width: 0;
}

.susin-ps .susin-ps__intro {
	margin: 0;
	padding: 0;
}

.susin-ps .susin-ps__eyebrow {
	margin: 0 0 var(--susin-ps-space-after-eyebrow);
	padding: 0;
	font: var(--susin-ps-font-eyebrow);
	letter-spacing: 0.082em;
	text-transform: uppercase;
	color: var(--susin-ps-clr-primary);
}

.susin-ps h1.susin-ps__heading {
	margin: 0 0 var(--susin-ps-space-after-title);
	font: var(--susin-ps-font-title);
	color: var(--susin-ps-clr-title);
	letter-spacing: -0.02em;
}

.susin-ps .susin-ps__subtitle {
	margin: 0 0 var(--susin-ps-space-after-sub);
	font: var(--susin-ps-font-sub);
	color: var(--susin-ps-clr-title);
	letter-spacing: -0.01em;
}

.susin-ps .susin-ps__lede {
	margin: 0;
	font: var(--susin-ps-font-body);
	color: var(--susin-ps-clr-muted);
	max-width: 38rem;
}

.susin-ps .susin-ps__rule {
	height: 1px;
	background: var(--susin-ps-clr-rule);
	margin: var(--susin-ps-rule-margin-y) 0;
}

.susin-ps .susin-ps__feature {
	display: flex;
	align-items: center;
	gap: var(--susin-ps-feature-gap);
	margin-bottom: var(--susin-ps-space-after-feature);
}

.susin-ps .susin-ps__icon-wrap {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.susin-ps .susin-ps__icon-img {
	width: var(--susin-ps-feature-icon-img);
	height: var(--susin-ps-feature-icon-img);
	display: block;
}

.susin-ps .susin-ps__feature-text {
	min-width: 0;
}

.susin-ps .susin-ps__feature-title {
	margin: 0 0 8px;
	font: var(--susin-ps-font-feature-title);
	color: var(--susin-ps-clr-title);
}

.susin-ps .susin-ps__feature-desc {
	margin: 0;
	font: var(--susin-ps-font-feature-body);
	color: var(--susin-ps-clr-muted-deep);
}

.susin-ps .susin-ps__cta.susin-ps__link--cta {
	display: inline-flex;
	align-items: center;
	gap: var(--susin-ps-cta-gap);
	color: var(--susin-ps-clr-title);
}

.susin-ps .susin-ps__cta-label {
	font: var(--susin-ps-font-cta);
	color: var(--susin-ps-clr-title);
	transition: color 0.22s var(--susin-ps-reveal-ease);
}

.susin-ps .susin-ps__cta-plus {
	width: var(--susin-ps-cta-plus);
	height: var(--susin-ps-cta-plus);
	border-radius: 50%;
	background: var(--susin-ps-clr-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		transform 0.22s var(--susin-ps-reveal-ease),
		box-shadow 0.22s var(--susin-ps-reveal-ease);
}

.susin-ps .susin-ps__cta-plus svg {
	display: block;
}

/* Scroll-in reveal (IntersectionObserver adds .susin-ps--in-view on section root) */

.susin-ps .susin-ps__reveal {
	opacity: 0;
	transform: translateY(var(--susin-ps-reveal-shift));
	transition:
		opacity var(--susin-ps-reveal-duration) var(--susin-ps-reveal-ease),
		transform var(--susin-ps-reveal-duration) var(--susin-ps-reveal-ease);
	transition-delay: var(--susin-ps-reveal-delay, 0ms);
}

.susin-ps .susin-ps__reveal.susin-ps__reveal--from-end {
	opacity: 0;
	transform: translate(min(24px, 3.5vw), var(--susin-ps-reveal-shift));
}

.susin-ps .susin-ps__intro.susin-ps__reveal {
	--susin-ps-reveal-delay: 0ms;
}

.susin-ps .susin-ps__rule.susin-ps__reveal {
	--susin-ps-reveal-delay: var(--susin-ps-reveal-stagger-step);
}

.susin-ps .susin-ps__feature.susin-ps__reveal {
	--susin-ps-reveal-delay: calc(var(--susin-ps-reveal-stagger-step) * 2);
}

.susin-ps .susin-ps__cta.susin-ps__reveal {
	--susin-ps-reveal-delay: calc(var(--susin-ps-reveal-stagger-step) * 3);
}

.susin-ps .susin-ps__figure.susin-ps__figure--hero.susin-ps__reveal.susin-ps__reveal--from-end {
	--susin-ps-reveal-delay: calc(var(--susin-ps-reveal-stagger-step) * 4);
}

.susin-ps.susin-ps--in-view .susin-ps__reveal {
	opacity: 1;
	transform: translateY(0);
}

.susin-ps.susin-ps--in-view .susin-ps__reveal.susin-ps__reveal--from-end {
	opacity: 1;
	transform: translate(0, 0);
}

@media (hover: hover) and (pointer: fine) {
	.susin-ps .susin-ps__cta.susin-ps__link--cta:hover .susin-ps__cta-label {
		color: var(--susin-ps-clr-primary);
	}

	.susin-ps .susin-ps__cta.susin-ps__link--cta:hover .susin-ps__cta-plus {
		transform: scale(1.06);
		box-shadow: var(--susin-ps-cta-plus-shadow-hover);
	}

	.susin-ps .susin-ps__cta.susin-ps__link--cta:active .susin-ps__cta-plus {
		transform: scale(0.98);
	}
}

.susin-ps .susin-ps__cta.susin-ps__link--cta:focus-visible {
	outline: 2px solid var(--susin-ps-clr-primary);
	outline-offset: 4px;
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.susin-ps .susin-ps__reveal,
	.susin-ps .susin-ps__reveal.susin-ps__reveal--from-end {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.susin-ps.susin-ps--in-view .susin-ps__reveal,
	.susin-ps.susin-ps--in-view .susin-ps__reveal.susin-ps__reveal--from-end {
		opacity: 1;
		transform: none;
	}

	.susin-ps .susin-ps__cta-plus,
	.susin-ps .susin-ps__cta-label {
		transition: none;
	}

	@media (hover: hover) and (pointer: fine) {
		.susin-ps .susin-ps__cta.susin-ps__link--cta:hover .susin-ps__cta-plus,
		.susin-ps .susin-ps__cta.susin-ps__link--cta:active .susin-ps__cta-plus {
			transform: none;
			box-shadow: none;
		}
	}
}

.susin-ps .susin-ps__figure {
	margin: 0;
	padding: 0;
	display: block;
}

.susin-ps .susin-ps__hero-img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--susin-ps-radius-card);
	box-shadow: var(--susin-ps-hero-shadow);
}

@media (max-width: 992px) {
	.susin-ps {
		--susin-ps-pad-x: 44px;
		--susin-ps-pad-top: 40px;
		--susin-ps-pad-bottom: 44px;
		--susin-ps-col-gap: 0px;
		--susin-ps-diamond-size: 360px;
		--susin-ps-diamond-left: 10%;
		--susin-ps-diamond-top: 44%;
		--susin-ps-diamond-opacity: 0.78;

		min-height: unset;
		display: block;
		align-items: unset;
	}

	.susin-ps .susin-ps__cols {
		grid-template-columns: 1fr;
		row-gap: 36px;
		column-gap: 0;
		align-items: stretch;
	}

	.susin-ps .susin-ps__lede {
		max-width: none;
	}
}

@media (max-width: 576px) {
	.susin-ps {
		--susin-ps-pad-x: 18px;
		--susin-ps-pad-top: 28px;
		--susin-ps-pad-bottom: 32px;
		--susin-ps-radius-card: 22px;
		--susin-ps-diamond-size: 240px;
		--susin-ps-diamond-left: 50%;
		--susin-ps-diamond-top: 160px;
		--susin-ps-diamond-radius: 40px;
		--susin-ps-diamond-opacity: 0.55;
		--susin-ps-space-after-feature: 22px;
		--susin-ps-rule-margin-y: 24px;
		--susin-ps-cta-plus: 44px;
		--susin-ps-feature-icon-img: 68px;
		--susin-ps-hero-shadow: 0 10px 28px rgba(12, 22, 42, 0.07),
			0 3px 8px rgba(12, 22, 42, 0.04);

		--susin-ps-font-sub: 700 18px / 1.42 var(--susin-ps-font-kr);
		--susin-ps-font-body: 400 14px / 1.72 var(--susin-ps-font-kr);
		--susin-ps-font-feature-title: 700 16px / 1.45 var(--susin-ps-font-kr);
		--susin-ps-font-feature-body: 400 13px / 1.62 var(--susin-ps-font-kr);
	}

	.susin-ps .susin-ps__cols {
		row-gap: 28px;
	}

	.susin-ps .susin-ps__diamond {
		transform: translate(-50%, -50%) rotate(var(--susin-ps-diamond-rotate));
	}

	.susin-ps .susin-ps__feature {
		align-items: flex-start;
	}

	.susin-ps .susin-ps__patent-tail {
		white-space: nowrap;
	}

	.susin-ps h1.susin-ps__heading {
		word-break: keep-all;
		overflow-wrap: break-word;
	}

	@supports (text-wrap: balance) {
		.susin-ps h1.susin-ps__heading {
			text-wrap: balance;
		}
	}
}