/*
 * HL2 UX-CARDS (chat 9, 2026-11-09): home "Learn" blog cards and the news block (rendered with the same cards).
 * Loaded after the legacy stylesheet.
 */

/* Grid of cards (desktop, swiper not running): rows touched each other. */
.learn .learn__slider:not(.swiper-initialized) > .swiper-wrapper { row-gap: 24px; }

/* Category badge: was a ribbon glued to the card edge, half over the image. Now a chip inside the image corner. */
.learn .learn__box .learn__category {
	left: 25px !important;
	top: 25px !important;
	z-index: 2;
	padding: 4px 10px !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.4 !important;
	box-shadow: 0 1px 2px rgba(14, 26, 43, .12);
}
@media (min-width: 1025px) {
	.learn .learn__box .learn__category { left: 32px !important; top: 30px !important; }
}

/*
 * News block (section-leaders in news mode, see template): same cards as the blog block, button under the cards.
 * The "READ NEWS" button of the heading block just above is hidden; the news block has its own "All news" button.
 */
.section.compatible:has(+ .section.hl2-news) { padding-bottom: 0 !important; }
.section.compatible:has(+ .section.hl2-news) .btn { display: none !important; }
.section.hl2-news { padding-top: 28px !important; }

/*
 * Logo strip ("topemail", Forbes … Cloudways): at 1024–1199px the 7 logos sat in one row inside a 616px column,
 * so the first and last were cut off at the screen edges. Two centred rows there.
 */
@media (min-width: 1024px) and (max-width: 1199px) {
	.topemail .topemail-row { flex-wrap: wrap; row-gap: 16px; }
	.topemail .topemail-row__col { flex: 0 0 25%; max-width: 25%; }
}

/* Desktop grid: cards in a row get the same height and the author/date line sits at the bottom of every card. */
.learn .learn__slider:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide { height: auto; display: flex; }
.learn .learn__slider:not(.swiper-initialized) .learn__box {
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto 1fr auto;
	align-items: start;
	column-gap: 12px;
}
.learn .learn__slider:not(.swiper-initialized) .learn__box > .learn__img,
.learn .learn__slider:not(.swiper-initialized) .learn__box > .learn__box-title,
.learn .learn__slider:not(.swiper-initialized) .learn__box > .learn__text { grid-column: 1 / -1; }
.learn .learn__slider:not(.swiper-initialized) .learn__box > .learn__name { grid-column: 1; align-self: end; width: auto; min-width: 0; }
.learn .learn__slider:not(.swiper-initialized) .learn__box > .learn__date { grid-column: 2; align-self: end; width: auto; text-align: right; white-space: nowrap; }

/* round 8: the legacy slide centred its card vertically, so a card with a 3-line title stood out above and below. */
.learn .learn__slider:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide { align-items: stretch; }
.section.hl2-news { padding-top: 0 !important; }
/* News chip, same shape as the category chips of the blog cards. */
.learn .learn__box .learn__category--news { background: #ffe1c7; color: #7a3a00; }

/* round 8 (VT): "Featured on" logos calm in grey, in colour on hover / keyboard focus. */
.topemail .topemail-item img { filter: grayscale(1); opacity: .65; transition: filter .2s ease, opacity .2s ease; }
.topemail .topemail-item:hover img, .topemail .topemail-item:focus-visible img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .topemail .topemail-item img { transition: none; } }

/*
 * UX-HELP (chat 9, VT variant B): "Need help?" — FAQ / Remove my info / Email us cards + the support quote.
 */
/* UX-HELP2 (chat 9 round 10): "bridge card" — the support card sits half on the page, half on the footer. */
.hl2-help-section { position: relative; z-index: 2; padding-bottom: 0 !important; }
.hl2-help-section + footer.hf { margin-top: -150px; padding-top: 150px; border-radius: 48px 48px 0 0; }
.hl2-bridge { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: #ffffff; border-radius: 24px; box-shadow: 0 24px 60px rgba(9, 20, 55, .22); overflow: hidden; color: #2c394b; }
.hl2-bridge__say { padding: 44px 48px; }
.hl2-bridge__who { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.35; color: #6b768c; }
.hl2-bridge__who b { display: block; font-weight: 600; font-size: 15px; color: #1d2a44; }
.hl2-bridge__av { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #7aa0ff, #2f5bd8); color: #ffffff; font: 700 16px/1 Archivo, sans-serif; }
.hl2-bridge__eb { margin: 22px 0 0; font-weight: 600; font-size: 14px; color: #2f5bd8; }
.hl2-bridge__title { margin: 6px 0 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 34px; line-height: 1.15; letter-spacing: -.5px; text-transform: none; color: #1d2a44; }
.hl2-bridge__lead { margin: 12px 0 0; font-size: 17px; line-height: 1.65; color: #3d4a60; }
.hl2-bridge__quote { margin: 22px 0 0; padding: 0; }
.hl2-bridge__quote blockquote { margin: 0; padding: 0; border: 0; background: none; font-style: italic; font-size: 15px; line-height: 1.6; color: #5b6780; }
.hl2-bridge__quote blockquote::before, .hl2-bridge__quote blockquote::after { content: none; display: none; }
.hl2-bridge__quote blockquote p { margin: 0; }
.hl2-bridge__quote figcaption { margin-top: 10px; font-size: 14px; color: #7b869c; }
.hl2-bridge__acts { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 28px 32px; background: #f6f8fd; }
.hl2-bridge__act { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid #e8ecf6; border-radius: 14px; background: #ffffff; color: #1d2a44; text-decoration: none !important; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.hl2-bridge__act:hover, .hl2-bridge__act:focus-visible { border-color: #c9d6f5; box-shadow: 0 6px 18px rgba(20, 40, 110, .08); transform: translateY(-1px); }
.hl2-bridge__ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: #e8efff; color: #2f5bd8; }
.hl2-bridge__txt { flex: 1 1 auto; min-width: 0; }
.hl2-bridge__txt b { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; }
.hl2-bridge__txt small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: #6b768c; overflow-wrap: anywhere; }
.hl2-bridge__chev { flex: none; color: #2f5bd8; }
@media (max-width: 991px) { .hl2-bridge { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
	.hl2-bridge__say { padding: 28px 22px; }
	.hl2-bridge__title { font-size: 27px; }
	.hl2-bridge__acts { padding: 18px 16px; }
	.hl2-help-section + footer.hf { margin-top: -110px; padding-top: 110px; border-radius: 28px 28px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .hl2-bridge__act { transition: none; } .hl2-bridge__act:hover { transform: none; } }

/*
 * UX-WHY (chat 9): first 4 reasons as tiles, the rest of the text under "Read more".
 */
.hl2-why .hl2-why__list { flex: 1 1 auto; min-width: 0; }
.hl2-why .hl2-why__list > p { margin: 0 0 14px; font-weight: 700; }
.hl2-why ul.hl2-why__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.hl2-why ul.hl2-why__tiles > li { position: relative; margin: 0 !important; padding: 16px 16px 16px 52px !important; border-radius: 14px; background: #ffffff; box-shadow: 0 4px 20px rgb(209, 217, 238); line-height: 1.5; }
.hl2-why ul.hl2-why__tiles > li::before {
	content: "" !important; position: absolute !important; left: 16px !important; top: 18px !important; width: 24px !important; height: 24px !important; margin: 0 !important; border-radius: 50% !important;
	background: #e8f1ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23006ad5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat !important;
}
.hl2-why__more { margin-top: 22px; }
.hl2-why__more > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid #b9cdf0; border-radius: 10px; color: #006ad5; font-weight: 600; cursor: pointer; list-style: none; }
.hl2-why__more > summary::-webkit-details-marker { display: none; }
.hl2-why__more[open] > summary .hf-chev { transform: rotate(180deg); }
.hl2-why__more > .should-footer { margin-top: 18px; }
.hl2-why .hl2-why__more { text-align: left; }
@media (max-width: 767px) {
	.hl2-why ul.hl2-why__tiles { grid-template-columns: minmax(0, 1fr); }
}
/* Number Data source line under plugin tables (F2) */
.table-source{margin:8px 0 0;font-size:12px;line-height:1.4;opacity:.75}
.table-source a{color:inherit;text-decoration:underline}
/* Number Data fact lines under result tables (D2) */
.number-facts{margin:16px 0 0;text-align:left}
.number-facts__list{margin:0;padding-left:18px}
.number-facts__item{margin:4px 0;line-height:1.45}
.number-facts__src{text-decoration:none;margin-left:2px}