/* Twinco Use Case Explorer — port of InspirationIntro.tsx + UseCaseExplorer.tsx */
.elementor-widget-twinco_use_case_explorer .elementor-widget-container { padding: 0; }
.twinco-uce-sec { position: relative; width: 100%; overflow: hidden; background-color: var(--twinco-surface); font-family: var(--twinco-font-sans); }
.twinco-uce-sec__frame { position: relative; margin-inline: auto; width: 100%; max-width: 1440px; padding: 90px 80px; }
.twinco-uce-sec .twinco-uce-sec__vector { pointer-events: none; position: absolute; left: -531px; top: 95px; height: 839.385px; width: 2391.671px; max-width: none; display: block; }
.twinco-uce-sec__content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 70px; }
.twinco-uce-sec__heading { width: 1280px; max-width: 100%; text-align: center; font-size: var(--twinco-text-h1); font-weight: 700; line-height: 1; color: var(--twinco-blue); }

.twinco-uce { display: flex; height: 825px; width: 1100px; max-width: 100%; align-items: flex-start; gap: 16px; overflow: clip; border-radius: var(--twinco-radius-card); padding: 16px; background-image: linear-gradient(154.9626906842122deg, rgb(255, 255, 255) 84.106%, rgb(85, 159, 255) 108.12%, rgb(20, 123, 254) 116.12%); }
.twinco-uce__sidebar { display: flex; height: 100%; width: 402px; max-width: 100%; flex-shrink: 0; flex-direction: column; align-items: flex-start; justify-content: space-between; border-radius: 16px; background: #fafafa; padding: 16px; }
/* Elementor paints button backgrounds (incl. :hover) with the site Accent (pink). The
   design keeps inactive tabs white and only turns the BORDER blue on hover — so force
   the background white + kill background-image at (0,2,1)/(0,3,0) + !important. */
.twinco-uce .twinco-uce__tab { display: flex; height: 50px; width: 100%; cursor: pointer; align-items: center; justify-content: space-between; border-radius: var(--twinco-radius-pill); padding: 10px 24px; transition: border-color 0.2s ease, background 0.2s ease; border: 1px solid #e1e1e1 !important; background-color: #fff !important; background-image: none !important; box-shadow: none !important; }
.twinco-uce .twinco-uce__tab:hover { border-color: var(--twinco-blue) !important; background-color: #fff !important; background-image: none !important; }
.twinco-uce .twinco-uce__tab.is-active,
.twinco-uce .twinco-uce__tab.is-active:hover { background-color: var(--twinco-blue) !important; background-image: none !important; border-color: transparent !important; }
.twinco-uce .twinco-uce__tab-label { white-space: nowrap; text-align: center; font-family: var(--twinco-font-sans); font-size: var(--twinco-text-button); font-weight: 600; line-height: 1; color: #5e5e5e; }
.twinco-uce__tab.is-active .twinco-uce__tab-label { color: #fff; }
.twinco-uce .twinco-uce__caret { width: 18px; height: 18px; flex-shrink: 0; display: block; }
.twinco-uce .twinco-uce__caret--on { display: none; }
.twinco-uce__tab.is-active .twinco-uce__caret--in { display: none; }
.twinco-uce__tab.is-active .twinco-uce__caret--on { display: block; }

.twinco-uce__mainwrap { display: flex; min-width: 1px; flex: 1; flex-direction: column; }
.twinco-uce__main { display: none; min-width: 1px; flex-direction: column; align-items: flex-start; gap: 16px; }
.twinco-uce__main.is-active { display: flex; }
.twinco-uce__top { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 8px; }
.twinco-uce__image { height: 288px; width: 100%; overflow: hidden; border-radius: 16px; }
.twinco-uce .twinco-uce__image img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.twinco-uce__title { width: 100%; font-size: 44px; line-height: 1.2; word-break: break-word; }
.twinco-uce__title1 { font-weight: 400; color: var(--twinco-navy); }
.twinco-uce__title2 { font-weight: 700; color: var(--twinco-blue); }
.twinco-uce__blocks { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 24px; }
.twinco-uce__block { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 12px; }
.twinco-uce__block-head { display: flex; align-items: center; gap: 8px; }
.twinco-uce .twinco-uce__sol-logo { height: 16px; width: 45.589px; flex-shrink: 0; display: block; }
.twinco-uce__label { white-space: nowrap; font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--twinco-jet); }
.twinco-uce__text { width: 100%; font-size: var(--twinco-text-label); font-weight: 400; line-height: 1.3; color: var(--twinco-slate); }
.twinco-uce__impact { position: relative; display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 12px; overflow: hidden; border-radius: 8px; padding: 16px; }
.twinco-uce .twinco-uce__impact-bg { pointer-events: none; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border-radius: 8px; object-fit: cover; display: block; }
.twinco-uce__impact-title { position: relative; white-space: nowrap; font-size: 20px; font-weight: 600; line-height: 1.2; color: #fff; }
.twinco-uce__impact-text { position: relative; width: 100%; font-size: var(--twinco-text-label); font-weight: 400; line-height: 1.3; color: #fff; }

@media (max-width: 1023.98px) {
	.twinco-uce { flex-direction: column; height: auto; }
	.twinco-uce__sidebar { width: 100%; height: auto; gap: 12px; min-width: 0; }
	/* Once the sidebar goes full-width the longest label ("Employee Wellbeing & Burnout
	   Prevention") no longer fits one line: nowrap sized every pill to it and pushed the
	   pills and their carets past the viewport edge. Let the label wrap and shrink so the
	   pill stays inside the card and grows in height instead. */
	.twinco-uce .twinco-uce__tab { height: auto; min-height: 50px; gap: 12px; padding: 12px 20px; }
	.twinco-uce .twinco-uce__tab-label { white-space: normal; text-align: left; line-height: 1.2; min-width: 0; }
}
@media (max-width: 767.98px) {
	.twinco-uce-sec__frame { padding: 48px 24px; }
	.twinco-uce__title { font-size: 28px; }
	.twinco-uce .twinco-uce__tab { padding: 12px 16px; }
	.twinco-uce .twinco-uce__tab-label { font-size: 16px; }
}