/* =========================================================================
   Twinco Intro / Comparison — port of components/sections/Intro.tsx
   ========================================================================= */
.elementor-widget-twinco_intro .elementor-widget-container { padding: 0; }

.twinco-intro {
	width: 100%;
	background-color: var(--twinco-surface);
	font-family: var(--twinco-font-sans);
}
.twinco-intro__frame {
	margin-inline: auto;
	display: flex;
	width: 100%;
	max-width: 1440px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80px;
}
.twinco-intro__inner {
	display: flex;
	width: 1105px;
	max-width: 100%;
	flex-direction: column;
	align-items: center;
	gap: 60px;
}

/* ---- Heading ---- */
.twinco-intro__head {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	word-break: break-word;
}
.twinco-intro__heading {
	width: 100%;
	font-size: var(--twinco-text-h1);
	font-weight: 400;
	line-height: 1;
	color: var(--twinco-navy);
}
.twinco-intro__heading-bold { font-weight: 700; color: var(--twinco-blue); }
.twinco-intro__sub { width: 100%; font-size: var(--twinco-text-title); color: #000; }
.twinco-intro__sub-normal { font-weight: 400; line-height: 1.2; }
.twinco-intro__sub-bold { font-weight: 700; line-height: 1.2; color: var(--twinco-blue); }

/* ---- Cards ---- */
.twinco-intro__cards {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 24px;
}
.twinco-intro__card {
	display: flex;
	width: 420px;
	max-width: 100%;
	flex-shrink: 0;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	overflow: hidden;
	border-radius: var(--twinco-radius-card);
	border: 3px solid var(--twinco-sky);
	background: #fff;
	padding: 24px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	will-change: transform;
}
.twinco-intro__card:hover {
	transform: translateY(-6px) scale(1.02);
	box-shadow: 0 16px 36px rgba(2, 27, 121, 0.15);
}
.twinco-intro__cardwrap {
	position: relative;
	height: 487px;
	width: 420px;
	max-width: 100%;
	flex-shrink: 0;
}
.twinco-intro__card--b { position: absolute; left: 0; top: 0; width: 420px; max-width: 100%; }
.twinco-intro__ellipse { position: absolute; left: 0; top: 4px; height: 479px; width: 420px; }
.twinco-intro__ellipse-in { position: absolute; inset: -41.75% -47.62%; }
.twinco-intro .twinco-intro__ellipse-in img { display: block; width: 100%; height: 100%; max-width: none; }

.twinco-intro__card-head { display: flex; width: 100%; align-items: flex-start; gap: 8px; }
.twinco-intro__card-headtext {
	display: flex;
	width: 253px;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	line-height: 1.3;
	word-break: break-word;
}
.twinco-intro__card-title { width: 100%; font-size: var(--twinco-text-title); font-weight: 700; color: #000; }
.twinco-intro__card-sub { width: 100%; font-size: var(--twinco-text-body); font-weight: 400; color: var(--twinco-ash); }

.twinco-intro__media {
	position: relative;
	height: 295px;
	width: 328px;
	max-width: 100%;
	flex-shrink: 0;
	overflow: hidden;
}
.twinco-intro .twinco-intro__media-el {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Bullets ---- */
.twinco-intro__bullets--a { display: flex; width: 100%; align-items: center; gap: 36px; }
.twinco-intro__bcol--a1 { display: flex; width: 176px; flex-direction: column; align-items: flex-start; gap: 16px; }
.twinco-intro__bcol--a2 { display: flex; width: 114px; flex-direction: column; align-items: flex-end; gap: 16px; }
.twinco-intro__bullets--b { display: flex; width: 371px; max-width: 100%; align-items: center; justify-content: space-between; }
.twinco-intro__bcol--b1 { display: flex; width: 176px; flex-direction: column; align-items: flex-start; gap: 16px; }
.twinco-intro__bcol--b2 { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.twinco-intro__bullet { display: flex; align-items: flex-end; gap: 4px; }
.twinco-intro__bullet p {
	font-size: var(--twinco-text-label);
	font-weight: 400;
	line-height: 1.3;
	white-space: nowrap;
	color: #000;
	word-break: break-word;
}

/* ---- Fine print ---- */
.twinco-intro__fine {
	width: 670px;
	max-width: 100%;
	text-align: center;
	color: #000;
	word-break: break-word;
}
/* pre-wrap on the paragraphs (not the container) — the container would otherwise
   render the PHP indentation whitespace between <p> tags as blank lines. */
.twinco-intro__fine-normal { font-size: var(--twinco-text-label); font-weight: 400; line-height: 1.3; white-space: pre-wrap; }
.twinco-intro__fine-bold { font-size: var(--twinco-text-label); font-weight: 700; line-height: 1.3; white-space: pre-wrap; }

/* ---- Composed icons ---- */
.twinco-intro__ic32 { position: relative; width: 32px; height: 32px; flex-shrink: 0; }
.twinco-intro__ic32-in { position: absolute; inset: 9.38% 9.38% 9.37% 9.37%; }
.twinco-intro .twinco-intro__ic32-in img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.twinco-intro__ic20 { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.twinco-intro__x20-a { position: absolute; inset: 37.5%; }
.twinco-intro__x20-a-in { position: absolute; inset: -12.5%; }
.twinco-intro__x20-b { position: absolute; inset: 12.5%; }
.twinco-intro__x20-b-in { position: absolute; inset: -4.17%; }
.twinco-intro__ck20-a { position: absolute; inset: 40.63% 34.38% 37.5% 34.38%; }
.twinco-intro__ck20-a-in { position: absolute; inset: -14.29% -10%; }
.twinco-intro__ck20-b { position: absolute; inset: 12.5%; }
.twinco-intro__ck20-b-in { position: absolute; inset: -4.17%; }
.twinco-intro__caret { position: relative; width: 32px; height: 32px; flex-shrink: 0; }
.twinco-intro__caret-a { position: absolute; inset: 18.75% 31.25% 18.75% 37.5%; }
.twinco-intro__caret-a-in { position: absolute; inset: -7.5% -15%; }
.twinco-intro .twinco-intro__ic20 img,
.twinco-intro .twinco-intro__caret img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

/* ---- Responsive ---- */
@media (max-width: 1023.98px) {
	.twinco-intro__inner { width: 100%; }
	.twinco-intro__card { width: 100%; }
	.twinco-intro__cardwrap { height: auto; width: 100%; overflow: hidden; }
	.twinco-intro__card--b { position: static; width: 100%; }
}
@media (max-width: 767.98px) {
	.twinco-intro__frame { padding: 48px 24px; }
}
@media (max-width: 639.98px) {
	.twinco-intro__frame { padding-left: 16px; padding-right: 16px; }
	.twinco-intro__bullets--a { flex-direction: column; gap: 16px; }
	.twinco-intro__bullets--b { flex-direction: column; align-items: flex-start; gap: 16px; }
}