/* single blog post: the page's own layout (shared menu/footer rules removed; faint greys darkened) */

		.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease }
		.js .reveal.visible { opacity: 1; transform: translateY(0) }
		.reveal-delay-1 { transition-delay: .08s }
		.reveal-delay-2 { transition-delay: .16s }
		#post-head { position: relative; background: #EDF4FA; padding: 152px 0 56px; overflow: hidden; isolation: isolate }
		#post-head::before { content: ""; position: absolute; inset: 0; z-index: -2;
			background:
				radial-gradient(ellipse 60% 50% at 20% 15%, rgba(255,255,255,.9) 0%, transparent 60%),
				radial-gradient(ellipse 55% 45% at 85% 80%, rgba(143,182,216,.22) 0%, transparent 62%),
				linear-gradient(180deg, #F4F9FD 0%, #E4EFF8 100%) }
		#post-head::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .8;
			background-image:
				linear-gradient(rgba(36,58,94,.045) 1px, transparent 1px),
				linear-gradient(90deg, rgba(36,58,94,.045) 1px, transparent 1px);
			background-size: 56px 56px;
			-webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 25%, transparent 100%);
			mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 25%, transparent 100%) }
		@media (max-width:991px) { #post-head { padding-top: 140px } }
		@media (max-width:600px) { #post-head { padding: 124px 0 42px } }

		.tw-wrap { max-width: 760px; margin: 0 auto }

		.tw-crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
			font-size: 12px; font-weight: 700; color: #46688A; margin-bottom: 20px }
		.tw-crumb a { color: #46688A; text-decoration: none; transition: color .2s ease }
		.tw-crumb a:hover { color: #243A5E; text-decoration: none }
		.tw-crumb i { font-size: 13px; opacity: .55 }
		.tw-crumb .tw-crumb-now { color: #243A5E; overflow: hidden; text-overflow: ellipsis;
			white-space: nowrap; max-width: 260px }

		#post-head h1 { color: #243A5E; font-weight: 900; letter-spacing: -1.4px; margin: 0 0 20px;
			font-size: clamp(30px, 4.2vw, 46px); line-height: 1.14 }
		.tw-post-meta { display: flex; align-items: center; gap: 9px 16px; flex-wrap: wrap;
			font-size: 13px; color: #5a6b81; font-weight: 600 }
		.tw-post-meta span { display: inline-flex; align-items: center; gap: 6px }
		.tw-post-meta i { color: #46688A; font-size: 15px }
		.tw-post-meta .tw-dot-sep { width: 3px; height: 3px; border-radius: 50%;
			background: #A9C0D6; flex: none }
		.tw-cover { max-width: 900px; margin: -34px auto 0; padding: 0 15px; position: relative; z-index: 2 }
		.tw-cover img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
			border-radius: 16px; border: 1px solid #CFE3F1;
			box-shadow: 0 22px 50px rgba(36,58,94,.14) }
		@media (max-width:600px) { .tw-cover { margin-top: -22px } .tw-cover img { border-radius: 12px } }
		#post-body { background: #fff; padding: 62px 0 84px }
		@media (max-width:767px) { #post-body { padding: 44px 0 60px } }

		.tw-article { font-size: 17.5px; line-height: 1.85; color: #3f4d61 }
		.tw-article > *:first-child { margin-top: 0 }
		.tw-article > *:last-child  { margin-bottom: 0 }

		.tw-article p { margin: 0 0 22px }
		.tw-article h2 { font-size: clamp(23px, 2.6vw, 29px); font-weight: 900; color: #243A5E;
			letter-spacing: -.7px; line-height: 1.25; margin: 46px 0 16px }
		.tw-article h3 { font-size: clamp(19px, 2.1vw, 22px); font-weight: 800; color: #243A5E;
			letter-spacing: -.4px; line-height: 1.35; margin: 36px 0 13px }
		.tw-article h4 { font-size: 17.5px; font-weight: 800; color: #243A5E; margin: 30px 0 11px }

		.tw-article a { color: #243A5E; font-weight: 600; text-decoration: underline;
			text-decoration-color: #8FB6D8; text-underline-offset: 3px;
			transition: text-decoration-color .2s ease }
		.tw-article a:hover { text-decoration-color: #243A5E }

		.tw-article ul, .tw-article ol { margin: 0 0 22px; padding-left: 0; list-style: none }
		.tw-article ol { counter-reset: tw-ol }
		.tw-article li { position: relative; padding-left: 30px; margin-bottom: 11px }
		.tw-article ul > li::before { content: ""; position: absolute; left: 6px; top: .68em;
			width: 7px; height: 7px; border-radius: 50%; background: #8FB6D8 }
		.tw-article ol > li { counter-increment: tw-ol }
		.tw-article ol > li::before { content: counter(tw-ol) "."; position: absolute; left: 0; top: 0;
			font-weight: 800; color: #46688A; font-size: 15px; line-height: 1.85 }

		.tw-article blockquote { margin: 32px 0; padding: 4px 0 4px 24px;
			border-left: 4px solid #8FB6D8; color: #243A5E; font-size: 19px;
			font-weight: 600; line-height: 1.7; font-style: normal }
		.tw-article blockquote p:last-child { margin-bottom: 0 }

		.tw-article img { max-width: 100%; height: auto; display: block; border-radius: 13px;
			border: 1px solid #E3EDF6; margin: 30px 0 }

		.tw-article code { background: #EDF4FA; border: 1px solid #DDE9F3; border-radius: 5px;
			padding: 2px 6px; font-size: .88em; color: #243A5E }
		.tw-article pre { background: #16263F; color: #E4EFF8; border-radius: 12px;
			padding: 20px 22px; overflow-x: auto; margin: 28px 0; font-size: 14px; line-height: 1.7 }
		.tw-article pre code { background: none; border: 0; padding: 0; color: inherit }

		.tw-article hr { border: 0; height: 1px; background: #E3EDF6; margin: 40px 0 }

		.tw-article table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 15.5px }
		.tw-article th { text-align: left; background: #EDF4FA; color: #243A5E; font-weight: 800;
			padding: 12px 14px; border: 1px solid #CFE3F1 }
		.tw-article td { padding: 12px 14px; border: 1px solid #E3EDF6 }
		.tw-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
			margin: 44px 0 0; padding-top: 28px; border-top: 1px solid #E3EDF6 }
		.tw-share-lbl { font-size: 11px; font-weight: 800; letter-spacing: 1.6px;
			text-transform: uppercase; color: #46688A; margin-right: 4px }
		.tw-share a, .tw-share button { display: inline-flex; align-items: center; justify-content: center;
			width: 40px; height: 40px; border-radius: 10px; background: #EDF4FA; color: #243A5E;
			border: 1px solid #CFE3F1; font-size: 19px; cursor: pointer; text-decoration: none;
			transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease }
		.tw-share a:hover, .tw-share button:hover { background: #243A5E; color: #fff;
			border-color: #243A5E; transform: translateY(-3px); text-decoration: none }
		.tw-share a:focus-visible, .tw-share button:focus-visible { outline: 3px solid #8FB6D8; outline-offset: 2px }
		#tw-copied { font-size: 12.5px; font-weight: 700; color: #1B7A50; opacity: 0;
			transition: opacity .25s ease }
		#tw-copied.show { opacity: 1 }
		.tw-post-cta { position: relative; margin: 46px 0 0; padding: 34px 32px 32px 36px;
			background: #243A5E; border-radius: 16px; color: #fff; overflow: hidden; text-align: center }
		.tw-post-cta::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
			width: 4px; background: linear-gradient(180deg, #8FB6D8 0%, #46688A 100%) }
		.tw-post-cta strong { display: block; font-size: 21px; font-weight: 900;
			letter-spacing: -.3px; margin-bottom: 10px }
		.tw-post-cta p { font-size: 15px; color: #C9DCEC; line-height: 1.6; margin: 0 auto 22px; max-width: 480px }
		.tw-post-cta a { display: inline-flex; align-items: center; gap: 9px; background: #fff;
			color: #243A5E !important; border-radius: 30px; padding: 13px 26px; font-size: 15px;
			font-weight: 800; text-decoration: none !important; position: relative; overflow: hidden;
			transform: translateZ(0);
			background-image: linear-gradient(90deg, #16263F 0%, #16263F 100%);
			background-repeat: no-repeat; background-size: 0% 100%; background-position: right center;
			transition: background-size .38s cubic-bezier(.4,0,.2,1), color .3s ease }
		.tw-post-cta a:hover { background-size: 100% 100%; background-position: left center;
			color: #fff !important }
		.tw-post-cta a:focus-visible { outline: 3px solid #1B7A50; outline-offset: 3px }
		@media (max-width:520px) { .tw-post-cta { padding: 28px 20px 26px } }
		#post-more { background: #EDF4FA; padding: 76px 0 84px }
		@media (max-width:767px) { #post-more { padding: 52px 0 60px } }
		#post-more .tw-more-head { text-align: center; margin-bottom: 38px }
		#post-more .tw-eyebrow2 { display: inline-block; font-size: 11px; font-weight: 800;
			letter-spacing: 2px; text-transform: uppercase; color: #46688A; margin-bottom: 10px }
		#post-more h2 { color: #243A5E; font-weight: 900; letter-spacing: -1px;
			font-size: clamp(26px, 3.2vw, 36px); margin: 0 }

		.tw-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
			max-width: 1080px; margin: 0 auto; align-items: stretch }

		@media (max-width:980px) { .tw-posts { grid-template-columns: 1fr 1fr } }

		@media (max-width:640px) { .tw-posts { grid-template-columns: 1fr; max-width: 440px } }

		.tw-post { position: relative; display: flex; flex-direction: column; background: #fff;
			border: 1px solid #CFE3F1; border-radius: 16px; overflow: hidden;
			text-decoration: none !important;
			transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .3s ease }
		.tw-post::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
			background: linear-gradient(90deg, #8FB6D8 0%, #1B7A50 100%);
			transform: scaleX(0); transform-origin: right center;
			transition: transform .4s cubic-bezier(.4,0,.2,1); z-index: 2 }
		.tw-post:hover { transform: translateY(-8px); border-color: #8FB6D8;
			box-shadow: 0 22px 44px rgba(36,58,94,.16) }
		.tw-post:hover::after { transform: scaleX(1); transform-origin: left center }
		.tw-post:focus-visible { outline: 3px solid #1B7A50; outline-offset: 3px }

		.tw-post-shot { position: relative; overflow: hidden; border-bottom: 1px solid #E3EDF6 }
		.tw-post-shot::after { content: ""; position: absolute; inset: 0;
			background: linear-gradient(180deg, transparent 45%, rgba(36,58,94,.28) 100%);
			opacity: 0; transition: opacity .35s ease }
		.tw-post:hover .tw-post-shot::after { opacity: 1 }
		.tw-post-img { aspect-ratio: 16/9; width: 100%; object-fit: cover; display: block;
			background: #EDF4FA; transition: transform .55s cubic-bezier(.2,.7,.3,1) }
		.tw-post:hover .tw-post-img { transform: scale(1.06) }
		.tw-post-noimg { aspect-ratio: 16/9; background: #EDF4FA; display: flex;
			align-items: center; justify-content: center }
		.tw-post-noimg i { font-size: 40px; color: #8FB6D8; transition: transform .4s ease }
		.tw-post:hover .tw-post-noimg i { transform: scale(1.14) }

		.tw-post-body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1 }
		.tw-post-date { font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase;
			color: #46688A; font-weight: 800; margin-bottom: 10px }
		.tw-post h3 { font-size: 17.5px; font-weight: 800; color: #243A5E; line-height: 1.42;
			letter-spacing: -.3px; margin: 0 0 10px }
		.tw-post p { font-size: 14px; color: #5b6882; line-height: 1.62; margin: 0 0 16px; flex: 1 }
		.tw-post-more { position: relative; display: inline-flex; align-items: center; gap: 8px;
			font-size: 13.5px; font-weight: 700; color: #243A5E; margin-top: auto;
			align-self: flex-start; padding-bottom: 4px }
		.tw-post-more::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
			background: #243A5E; transform: scaleX(0); transform-origin: right center;
			transition: transform .35s cubic-bezier(.4,0,.2,1) }
		.tw-post:hover .tw-post-more::after { transform: scaleX(1); transform-origin: left center }
		.tw-post-more i { transition: transform .3s ease }
		.tw-post:hover .tw-post-more i { transform: translateX(5px) }

		.tw-all-row { text-align: center; margin-top: 40px }
		.tw-all-row a { display: inline-flex; align-items: center; gap: 9px; background: #fff;
			border: 1px solid #CFE3F1; color: #243A5E !important; border-radius: 30px;
			padding: 13px 28px; font-size: 14.5px; font-weight: 700; text-decoration: none !important;
			transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease }
		.tw-all-row a:hover { border-color: #8FB6D8; transform: translateY(-3px);
			box-shadow: 0 12px 26px rgba(36,58,94,.12) }
		@media (max-width:767px) {
			#chat-widget-container, .chat-widget-container { bottom: 88px !important } }
		@media (prefers-reduced-motion: reduce) {
			.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important }
			.tw-post:hover, .tw-post:hover .tw-post-img, .tw-share a:hover { transform: none !important } }