/* =========================================================================
   SysIT blog — reference design
   Brand tokens live here. Change them, not the rules below.
   ====================================================================== */

:root {
	--sysit-bg: #ffffff;
	--sysit-bg-alt: #f7f8fb;
	--sysit-surface: #ffffff;

	--sysit-navy: #0f2246;
	--sysit-ink: #16223d;
	--sysit-ink-soft: #5b6577;
	--sysit-ink-faint: #8b93a3;

	--sysit-orange: #f26a21;
	--sysit-blue: #2563eb;
	--sysit-blue-soft: #eaf0fe;

	--sysit-line: #e6e9f0;
	--sysit-line-soft: #eef1f6;

	/* PAGE WIDTH — set this to match your header container exactly.
	   Inspect the header's outer container in DevTools, read its max-width,
	   and paste that number here. This is the only place to change it. */
	--sysit-shell: 1440px;
	--sysit-radius: 16px;

	--sysit-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.sysit-article,
.sysit-listing {
	background: var(--sysit-bg);
	color: var(--sysit-ink);
	font-family: var(--sysit-font);
	-webkit-font-smoothing: antialiased;
}

.sysit-shell {
	max-width: var(--sysit-shell);
	margin-inline: auto;
	padding-inline: 24px;
	box-sizing: border-box;
}

@media (min-width: 1024px) {
	.sysit-shell { padding-inline: 40px; }
}

.sysit-article a,
.sysit-listing a { text-decoration: none; }

/* ---- Shared bits ------------------------------------------------------- */

.sysit-kicker {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sysit-blue);
}

.sysit-viewall {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sysit-navy);
	white-space: nowrap;
}

.sysit-viewall::after { content: "→"; }
.sysit-viewall:hover { color: var(--sysit-blue); }

.sysit-section-title {
	margin: 0;
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 750;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: var(--sysit-navy);
}

/* ---- Breadcrumb -------------------------------------------------------- */

.sysit-crumbs {
	padding-block: 14px;
	font-size: 12.5px;
	color: var(--sysit-navy);
}

.sysit-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sysit-crumbs li + li::before { content: "/"; margin-right: 7px; color: #c3c9d4; }
.sysit-crumbs a { color: var(--sysit-blue); }
.sysit-crumbs a:hover { text-decoration: underline; }
.sysit-crumbs li:nth-last-child(2) a { color: var(--sysit-orange); }
.sysit-crumbs span[aria-current] { color: var(--sysit-navy); font-weight: 600; }

/* ---- Intro + pills ----------------------------------------------------- */

.sysit-intro {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding-block: 30px 8px;
	width: 100%;
}

.sysit-intro__text { flex: 1 1 auto; min-width: 0; }

.sysit-intro__title {
	display: block;
	margin: 0;
	max-width: none;
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 750;
	line-height: 1.28;
	letter-spacing: -0.02em;
	color: var(--sysit-navy);
}

.sysit-pillbar { padding-block: 18px 30px; }

.sysit-pills {
	display: flex;
	gap: 9px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.sysit-pills::-webkit-scrollbar { display: none; }

.sysit-pill {
	flex: 0 0 auto;
	padding: 9px 18px;
	border: 1px solid var(--sysit-line);
	border-radius: 999px;
	background: var(--sysit-surface);
	color: var(--sysit-ink-soft);
	font-size: 13px;
	font-weight: 600;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.sysit-pill:hover { border-color: var(--sysit-navy); color: var(--sysit-navy); }
.sysit-pill.is-active { background: var(--sysit-navy); border-color: var(--sysit-navy); color: #fff; }

/* ---- Article head ------------------------------------------------------ */

.sysit-article__head { padding-top: 8px; }

.sysit-article__banner {
	margin: 0 0 30px;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(15, 34, 70, .10);
}

.sysit-article__banner img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: initial;
}

.sysit-eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sysit-ink-faint);
}

.sysit-eyebrow a { color: var(--sysit-navy); font-weight: 700; }
.sysit-dot { color: #c3c9d4; }
.sysit-eyebrow time { text-transform: none; letter-spacing: .02em; }

.sysit-article__title {
	margin: 0 0 20px;
	max-width: none;
	width: 100%;
	font-size: 54px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--sysit-navy);
}

.sysit-article__accent {
	color: var(--sysit-orange);
	font-style: normal;
}

.sysit-article__deck {
	max-width: 80ch;
	margin: 0 0 28px;
	font-size: clamp(15.5px, 1.4vw, 17px);
	line-height: 1.65;
	color: var(--sysit-ink-soft);
}

.sysit-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-block: 18px;
	border-bottom: 1px solid var(--sysit-line);
	margin-bottom: 40px;
}

.sysit-byline__who { display: flex; align-items: center; gap: 12px; color: inherit; }
.sysit-byline__text strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--sysit-navy); }
.sysit-byline__text small { display: block; font-size: 12.5px; color: var(--sysit-ink-faint); margin-top: 2px; }

.sysit-avatar-wrap {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--sysit-navy);
	color: #fff;
	flex: 0 0 auto;
	overflow: hidden;
}

.sysit-initials {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 13px;
	font-weight: 700;
}

.sysit-avatar {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.sysit-actions { display: flex; flex-wrap: wrap; gap: 9px; }

.sysit-action {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--sysit-line);
	background: var(--sysit-surface);
	border-radius: 999px;
	padding: 9px 18px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--sysit-navy);
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.sysit-action:hover { border-color: var(--sysit-navy); box-shadow: 0 3px 10px rgba(15, 34, 70, .07); }
.sysit-action[aria-pressed="true"] { border-color: var(--sysit-orange); color: var(--sysit-orange); }
.sysit-action__icon { font-size: 12px; line-height: 1; }

/* ---- Layout ------------------------------------------------------------ */

.sysit-layout {
	display: grid;
	grid-template-columns: 270px minmax(0, 1fr) 300px;
	gap: 40px;
	align-items: start;
	padding-bottom: 70px;
}

.sysit-layout__left,
.sysit-layout__right {
	align-self: start;
	position: sticky;
	top: var(--sysit-sticky-top, 96px);
}

.sysit-sticky {
	display: grid;
	gap: 18px;
	max-height: calc(100vh - var(--sysit-sticky-top, 96px) - 24px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	padding-right: 4px;
}

.sysit-sticky::-webkit-scrollbar { width: 5px; }
.sysit-sticky::-webkit-scrollbar-thumb { background: #dfe3ea; border-radius: 5px; }
.sysit-sticky::-webkit-scrollbar-track { background: transparent; }

/* ---- Rail cards -------------------------------------------------------- */

.sysit-rail-card {
	background: var(--sysit-surface);
	border: 1px solid var(--sysit-line);
	border-radius: 18px;
	padding: 20px;
	box-shadow: 0 2px 14px rgba(15, 34, 70, .05);
}

/* Left rail gets a softer, more deliberate treatment than the right. */
.sysit-layout__left .sysit-rail-card {
	position: relative;
	background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
	border-color: #e9edf4;
	box-shadow: 0 4px 20px rgba(15, 34, 70, .06);
	overflow: hidden;
}

.sysit-layout__left .sysit-rail-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--sysit-blue), var(--sysit-orange));
	opacity: .9;
}

.sysit-layout__left .sysit-rail-kicker {
	padding-bottom: 12px;
	border-bottom: 1px solid var(--sysit-line-soft);
	margin-bottom: 12px;
}

.sysit-rail-kicker {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--sysit-navy);
}

.sysit-rail-kicker--light { color: rgba(255, 255, 255, .6); }

.sysit-numbadge {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 7px;
	background: var(--sysit-blue-soft);
	color: var(--sysit-blue);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0;
	flex: 0 0 auto;
}

/* Cards without a numbered badge get a small "+" marker instead. */
.sysit-rail-kicker--blue::before {
	content: "+";
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 7px;
	background: var(--sysit-blue-soft);
	color: var(--sysit-blue);
	font-size: 13px;
	font-weight: 700;
	flex: 0 0 auto;
}

.sysit-rail-kicker--blue:has(.sysit-numbadge)::before { display: none; }

/* ---- Table of contents ------------------------------------------------- */

.sysit-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 3px;
}

.sysit-toc__list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--sysit-ink-soft);
	transition: background .16s ease, color .16s ease;
}

.sysit-toc__num {
	display: grid;
	place-items: center;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: #eef1f6;
	color: var(--sysit-ink-faint);
	font-size: 11px;
	font-weight: 700;
	flex: 0 0 auto;
	transition: background .16s ease, color .16s ease;
}

.sysit-toc__list a:hover { background: var(--sysit-bg-alt); color: var(--sysit-navy); }

.sysit-toc__list a.is-current {
	background: var(--sysit-navy);
	color: #fff;
	font-weight: 600;
}

.sysit-toc__list a.is-current .sysit-toc__num { background: var(--sysit-orange); color: #fff; }

.sysit-catlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }

.sysit-catlist a {
	display: block;
	padding: 8px 12px;
	border-radius: 9px;
	font-size: 13px;
	color: var(--sysit-ink-soft);
}

.sysit-catlist a:hover { background: var(--sysit-bg-alt); color: var(--sysit-blue); }

/* ---- Prose ------------------------------------------------------------- */

.sysit-prose {
	font-size: 16.5px;
	line-height: 1.75;
	color: #3d4657;
	max-width: 72ch;
}

.sysit-prose > * + * { margin-top: 1.1em; }

/* Orange drop cap on the opening paragraph */
.sysit-prose > p:first-of-type::first-letter {
	float: left;
	margin: 6px 10px 0 0;
	font-size: 62px;
	line-height: .82;
	font-weight: 800;
	color: var(--sysit-orange);
}

.sysit-prose h2,
.sysit-prose .sysit-h2 {
	position: relative;
	margin-top: 2em;
	padding-left: 16px;
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 750;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--sysit-navy);
	scroll-margin-top: var(--sysit-sticky-top, 110px);
}

.sysit-prose h2::before,
.sysit-prose .sysit-h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: .22em;
	width: 4px;
	height: .82em;
	border-radius: 3px;
	background: var(--sysit-orange);
}

.sysit-prose h3 {
	margin-top: 1.7em;
	font-size: 19px;
	font-weight: 700;
	color: var(--sysit-navy);
	scroll-margin-top: var(--sysit-sticky-top, 110px);
}

.sysit-prose ul { list-style: none; padding-left: 0; }

.sysit-prose ul li {
	position: relative;
	padding-left: 20px;
}

.sysit-prose ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sysit-orange);
}

.sysit-prose ol { padding-left: 1.25em; }
.sysit-prose li + li { margin-top: .55em; }
.sysit-prose li strong { color: var(--sysit-navy); font-weight: 700; }

.sysit-prose a { color: var(--sysit-blue); }
.sysit-prose a:hover { text-decoration: underline; }
.sysit-prose strong { font-weight: 700; color: var(--sysit-navy); }
.sysit-prose img { max-width: 100%; height: auto; border-radius: var(--sysit-radius); }

.sysit-prose blockquote {
	margin-inline: 0;
	padding: 16px 20px;
	border-left: 4px solid var(--sysit-orange);
	background: var(--sysit-bg-alt);
	border-radius: 0 10px 10px 0;
	font-size: 16px;
}

.sysit-prose table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14.5px;
	line-height: 1.6;
	border: 1px solid var(--sysit-line);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(15, 34, 70, .05);
	display: table;
}

.sysit-prose thead th {
	background: linear-gradient(150deg, #10224a, #1b3566);
	color: #fff;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	border: 0;
}

.sysit-prose th,
.sysit-prose td {
	padding: 14px 18px;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--sysit-line-soft);
	vertical-align: top;
}

.sysit-prose tbody tr:last-child td { border-bottom: 0; }
.sysit-prose tbody tr:nth-child(even) { background: #fafbfd; }
.sysit-prose tbody tr:hover { background: var(--sysit-blue-soft); }
.sysit-prose td:first-child { font-weight: 600; color: var(--sysit-navy); }

/* Tables stay usable on narrow screens. */
@media (max-width: 700px) {
	.sysit-prose table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---- FAQ --------------------------------------------------------------- */

.sysit-faq { margin-top: 56px; max-width: 72ch; scroll-margin-top: var(--sysit-sticky-top, 110px); }

.sysit-faq > .sysit-h2 {
	position: relative;
	margin: 0 0 12px;
	padding-left: 16px;
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 750;
	color: var(--sysit-navy);
}

.sysit-faq > .sysit-h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: .22em;
	width: 4px;
	height: .82em;
	border-radius: 3px;
	background: var(--sysit-orange);
}

.sysit-faq__item { border-bottom: 1px solid var(--sysit-line); padding-block: 17px; }

.sysit-faq__item summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 15.5px;
	line-height: 1.45;
	color: var(--sysit-navy);
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.sysit-faq__item summary::-webkit-details-marker { display: none; }

.sysit-faq__item summary::after {
	content: "+";
	color: var(--sysit-ink-faint);
	font-weight: 400;
	font-size: 21px;
	line-height: 1;
}

.sysit-faq__item[open] summary::after { content: "–"; }

.sysit-faq__answer { padding-top: 9px; font-size: 15px; line-height: 1.7; color: var(--sysit-ink-soft); }
.sysit-faq__answer p { margin: 0 0 .8em; }
.sysit-faq__answer a { color: var(--sysit-blue); }

/* ---- Tags + share row -------------------------------------------------- */

.sysit-footrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid var(--sysit-line);
}

.sysit-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.sysit-tags a {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--sysit-blue);
	background: var(--sysit-blue-soft);
	border-radius: 999px;
	padding: 6px 14px;
}

.sysit-tags a:hover { background: #dde7fd; }

.sysit-share { display: flex; align-items: center; gap: 8px; }

.sysit-share__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--sysit-ink-faint);
	margin-right: 2px;
}

.sysit-share__link {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	border: 1px solid var(--sysit-line);
	background: var(--sysit-surface);
	border-radius: 9px;
	color: var(--sysit-navy);
	cursor: pointer;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.sysit-share__link:hover { background: var(--sysit-navy); border-color: var(--sysit-navy); color: #fff; }

/* ---- Author card (rail) ------------------------------------------------ */

.sysit-authorcard { border-left: 3px solid var(--sysit-orange); }
.sysit-authorcard__row { display: flex; align-items: center; gap: 12px; }
.sysit-authorcard__name { margin: 0 0 2px; font-size: 16px; font-weight: 750; color: var(--sysit-navy); }
.sysit-authorcard__name a { color: inherit; }
.sysit-authorcard__role { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--sysit-ink-faint); }
.sysit-authorcard .sysit-avatar-wrap { width: 46px; height: 46px; }

/* ---- eGuide ------------------------------------------------------------ */

.sysit-eguide__cover {
	display: block;
	margin: 0 0 14px;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(160deg, #eef3ff, #fdf1ea);
}

.sysit-eguide__cover img { display: block; width: 100%; height: auto; }

.sysit-rail-text { margin: 0 0 14px; font-size: 12.5px; line-height: 1.55; color: var(--sysit-ink-soft); }

.sysit-btn {
	display: block;
	text-align: center;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--sysit-navy);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	transition: opacity .18s ease;
}

.sysit-btn:hover { opacity: .9; }
.sysit-btn--orange { background: var(--sysit-orange); }

.sysit-rail-proof {
	margin: 11px 0 0;
	font-size: 11.5px;
	color: var(--sysit-ink-faint);
	text-align: center;
}

.sysit-rail-proof span { color: #16a34a; font-weight: 700; }

.sysit-rail-link {
	display: block;
	margin-top: 12px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--sysit-blue);
	text-align: center;
}

/* ---- Video thumb + score badge ---------------------------------------- */

.sysit-video__thumb {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	background: var(--sysit-navy);
	aspect-ratio: 3 / 4;
	cursor: pointer;
}

.sysit-video__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sysit-video__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
	transition: transform .18s ease;
}

.sysit-video__play::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-left: 15px solid var(--sysit-navy);
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	transform: translateX(2px);
}

.sysit-video__thumb:hover .sysit-video__play { transform: scale(1.08); }

.sysit-video__score {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(15, 34, 70, .82);
	border: 3px solid #c9f24a;
	color: #fff;
	line-height: 1;
}

.sysit-video__score-val { font-size: 19px; font-weight: 800; }
.sysit-video__score-out { font-size: 9.5px; opacity: .8; }

/* ---- Follow grid ------------------------------------------------------- */

.sysit-follow__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
}

.sysit-follow__grid a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px;
	border: 1px solid var(--sysit-line);
	border-radius: 10px;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.sysit-follow__grid a:hover { border-color: var(--sysit-navy); box-shadow: 0 3px 10px rgba(15, 34, 70, .06); }

.sysit-follow__icon {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	flex: 0 0 auto;
}

.sysit-follow__icon.is-linkedin { background: #0a66c2; }
.sysit-follow__icon.is-x { background: #14171a; }
.sysit-follow__icon.is-youtube { background: #ff0000; }
.sysit-follow__icon.is-instagram { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }

.sysit-follow__meta { display: grid; gap: 1px; min-width: 0; }
.sysit-follow__label { font-size: 12px; font-weight: 600; color: var(--sysit-navy); }
.sysit-follow__count { font-size: 11px; color: var(--sysit-ink-faint); }

/* ---- Sponsored --------------------------------------------------------- */

.sysit-sponsored {
	background: linear-gradient(150deg, #10224a, #1b3566);
	border-color: transparent;
	color: #fff;
}

.sysit-sponsored .sysit-rail-kicker--light::before { display: none; }

.sysit-sponsored,
.sysit-sponsored p,
.sysit-sponsored h3,
.sysit-sponsored span { color: #fff; }

.sysit-sponsored__title { margin: 0 0 10px; font-size: 19px; font-weight: 750; line-height: 1.25; color: #fff; }
.sysit-sponsored__text { margin: 0 0 16px; font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.sysit-sponsored .sysit-rail-kicker--light { color: rgba(255, 255, 255, .6); }
.sysit-sponsored .sysit-btn--orange { color: #fff; }

/* ---- Keep reading ------------------------------------------------------ */

.sysit-keep__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

.sysit-keep__list a {
	display: flex;
	gap: 10px;
	padding: 9px 0;
	align-items: flex-start;
}

.sysit-keep__icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	flex: 0 0 auto;
	color: #fff;
}

.sysit-keep__icon svg { width: 17px; height: 17px; display: block; }

.sysit-keep__icon.is-c1 { background: linear-gradient(145deg, #3b73f5, #1d47c4); }
.sysit-keep__icon.is-c2 { background: linear-gradient(145deg, #fb8b4a, #e8551a); }
.sysit-keep__icon.is-c3 { background: linear-gradient(145deg, #21b982, #0d7d57); }
.sysit-keep__icon.is-c4 { background: linear-gradient(145deg, #9260f7, #6a28d9); }

.sysit-keep__body { display: grid; gap: 3px; min-width: 0; }

.sysit-keep__cat {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.sysit-keep__cat.is-c1 { color: #2563eb; }
.sysit-keep__cat.is-c2 { color: #f26a21; }
.sysit-keep__cat.is-c3 { color: #129b6e; }
.sysit-keep__cat.is-c4 { color: #7c3aed; }

.sysit-keep__title { font-size: 12.5px; line-height: 1.4; color: var(--sysit-ink); font-weight: 500; }
.sysit-keep__list a:hover .sysit-keep__title { color: var(--sysit-blue); }

/* ---- Video popup ------------------------------------------------------- */

.sysit-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(9, 16, 32, .82);
	opacity: 0;
	transition: opacity .2s ease;
}

.sysit-modal.is-open { opacity: 1; }

.sysit-modal__inner {
	position: relative;
	width: min(960px, 100%);
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.sysit-modal__inner iframe { width: 100%; height: 100%; border: 0; display: block; }

.sysit-modal__close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
}

.sysit-modal__close:hover { background: rgba(255, 255, 255, .3); }

/* ---- Listing ----------------------------------------------------------- */

.sysit-feed { padding-bottom: 70px; }
.sysit-feed .sysit-section-title { margin-bottom: 26px; }

.sysit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 28px;
}

.sysit-card {
	background: var(--sysit-surface);
	border: 1px solid var(--sysit-line);
	border-radius: var(--sysit-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
}

.sysit-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(15, 34, 70, .1); }
.sysit-card__media { display: block; aspect-ratio: 16 / 9; background: var(--sysit-bg-alt); overflow: hidden; }
.sysit-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sysit-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(140deg, #1b2a4d, #3b2a6d); }
.sysit-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sysit-card__meta { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 11.5px; color: var(--sysit-ink-faint); }
.sysit-card__cat { color: var(--sysit-navy); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.sysit-card__title { margin: 0; font-size: 18px; line-height: 1.32; font-weight: 750; }
.sysit-card__title a { color: var(--sysit-navy); }
.sysit-card__title a:hover { color: var(--sysit-blue); }
.sysit-card__excerpt { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--sysit-ink-soft); }
.sysit-card__date { margin: auto 0 0; font-size: 12px; color: var(--sysit-ink-faint); }

.sysit-feed__foot { display: flex; justify-content: center; margin-top: 44px; }
.sysit-feed__foot .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.sysit-feed__foot .page-numbers {
	min-width: 42px;
	padding: 10px 15px;
	border: 1px solid var(--sysit-line);
	border-radius: 10px;
	background: var(--sysit-surface);
	color: var(--sysit-ink-soft);
	font-size: 13.5px;
	font-weight: 600;
	text-align: center;
}

.sysit-feed__foot .page-numbers:hover { border-color: var(--sysit-navy); color: var(--sysit-navy); }
.sysit-feed__foot .page-numbers.current { background: var(--sysit-navy); border-color: var(--sysit-navy); color: #fff; }
.sysit-feed__foot .page-numbers.dots { border-color: transparent; background: transparent; }

.sysit-feed__foot .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.sysit-empty { color: var(--sysit-ink-soft); }

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 1200px) {
	.sysit-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 34px; }
	.sysit-layout__right { grid-column: 1 / -1; }

	.sysit-layout__right .sysit-sticky {
		position: static;
		max-height: none;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		align-items: start;
	}

	.sysit-video__thumb { aspect-ratio: 16 / 9; }
}

@media (max-width: 880px) {
	.sysit-shell { padding-inline: 20px; }
	.sysit-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.sysit-layout__left .sysit-sticky { position: static; max-height: none; }
	.sysit-byline { align-items: flex-start; }
	.sysit-footrow { flex-direction: column; align-items: flex-start; }
	.sysit-prose > p:first-of-type::first-letter { font-size: 52px; }
	.sysit-article__title { font-size: 34px; }
}

@media (max-width: 1023px) and (min-width: 881px) {
	.sysit-article__title { font-size: 42px; }
}

@media (prefers-reduced-motion: reduce) {
	.sysit-card, .sysit-rcard, .sysit-video__play, .sysit-modal { transition: none; }
	.sysit-card:hover, .sysit-rcard:hover { transform: none; }
}

:where(.sysit-article, .sysit-listing) :focus-visible {
	outline: 2px solid var(--sysit-blue);
	outline-offset: 3px;
	border-radius: 6px;
}

/* =========================================================================
   THEME COMPATIBILITY
   Undo Hello Elementor's container limits and Elementor Global Kit
   typography, scoped to blog pages only via the .sysit-tpl body class.
   ====================================================================== */

.sysit-tpl .site-main,
.sysit-tpl main.site-main,
.sysit-tpl .page-content,
.sysit-tpl #content,
.sysit-tpl .site-content {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.sysit-tpl .site-main > article,
.sysit-tpl .site-main > .sysit-listing {
	max-width: none !important;
	width: 100% !important;
}

/* Hello Elementor adds a header/footer wrapper padding we don't want here. */
.sysit-tpl .site-main > * { margin-block: 0; }

/* Elementor Global Kit sets heading colours with high specificity. */
.sysit-tpl .sysit-article h1,
.sysit-tpl .sysit-article h2,
.sysit-tpl .sysit-article h3,
.sysit-tpl .sysit-listing h2,
.sysit-tpl .sysit-listing h3,
.sysit-tpl .sysit-prose h2,
.sysit-tpl .sysit-prose h3,
.sysit-tpl .sysit-prose .sysit-h2 {
	color: var(--sysit-navy);
	font-family: var(--sysit-font);
}

.sysit-tpl .sysit-article__accent { color: var(--sysit-orange); }
.sysit-tpl .sysit-sponsored__title,
.sysit-tpl .sysit-sponsored .sysit-rail-kicker--light { color: #fff; }

/* Keep our own link colours inside the article body. */
.sysit-tpl .sysit-prose a { color: var(--sysit-blue); }
.sysit-tpl .sysit-prose p { color: #3d4657; }

/* Some builders inject list styles globally. */
.sysit-tpl .sysit-prose ul { list-style: none !important; padding-left: 0 !important; }
.sysit-tpl .sysit-prose ul li::marker { content: none; }

/* Tables inside content (the "part of our series" callout) shouldn't look
   like a data table. */
.sysit-tpl .sysit-prose table:first-of-type th,
.sysit-tpl .sysit-prose table:first-of-type td {
	border: 0;
	background: var(--sysit-blue-soft);
	border-radius: 10px;
	font-size: 14px;
	color: var(--sysit-ink-soft);
}

.sysit-tpl .sysit-prose table:first-of-type { border: 0; }

/* -------------------------------------------------------------------------
   STICKY FIX
   position: sticky silently fails if ANY ancestor has overflow hidden/auto.
   Hello Elementor and several plugins set it, so clear it on blog pages.
   ---------------------------------------------------------------------- */

.sysit-tpl,
.sysit-tpl body,
.sysit-tpl #page,
.sysit-tpl .site,
.sysit-tpl .site-content,
.sysit-tpl #content,
.sysit-tpl .site-main,
.sysit-tpl .sysit-article,
.sysit-tpl .sysit-listing {
	overflow: visible !important;
}

.sysit-tpl .sysit-layout { overflow: visible !important; }

/* Width parity with the Elementor header container. */
.sysit-tpl .sysit-shell {
	max-width: var(--container-max-width, var(--sysit-shell));
}

/* Sponsored card sits on a dark background — keep every child white even if
   the theme or Elementor kit sets a global paragraph/heading colour. */
.sysit-tpl .sysit-sponsored,
.sysit-tpl .sysit-sponsored p,
.sysit-tpl .sysit-sponsored h3,
.sysit-tpl .sysit-sponsored a,
.sysit-tpl .sysit-sponsored span,
.sysit-tpl .sysit-sponsored__title,
.sysit-tpl .sysit-sponsored__text {
	color: #fff !important;
}

.sysit-tpl .sysit-sponsored .sysit-rail-kicker--light {
	color: rgba(255, 255, 255, .62) !important;
}

/* =========================================================================
   Services section (bottom)
   ====================================================================== */

.sysit-services {
	background: rgba(248, 250, 252, .7);
	border-top: 1px solid #f1f5f9;
	margin-top: 80px;
	padding-block: 64px;
}

.sysit-services__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 32px;
}

.sysit-services__head .sysit-kicker {
	font-size: 12px;
	letter-spacing: .22em;
	margin-bottom: 8px;
}

.sysit-services__head .sysit-section-title {
	font-size: clamp(28px, 3.2vw, 38px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.025em;
}

.sysit-services__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--sysit-navy);
	white-space: nowrap;
}

.sysit-services__all:hover { color: var(--sysit-blue); }

.sysit-services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.sysit-service {
	background: var(--sysit-surface);
	border: 1px solid var(--sysit-line);
	border-radius: 18px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .22s ease, box-shadow .22s ease;
}

.sysit-service:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(15, 34, 70, .12);
}

.sysit-service__media {
	display: block;
	height: 180px;
	overflow: hidden;
	background: #101f3f;
}

.sysit-service__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform .35s ease;
}

.sysit-service:hover .sysit-service__media img { transform: scale(1.04); }

.sysit-service__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }

.sysit-service__eyebrow {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #64748b;
}

.sysit-service__title {
	margin: 8px 0 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.02em;
}

.sysit-service__title a { color: var(--sysit-navy); }
.sysit-service__title a:hover { color: var(--sysit-blue); }

.sysit-service__text {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.65;
	color: #475569;
}

.sysit-service__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 20px;
	padding-top: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--sysit-navy);
	align-self: flex-start;
}

.sysit-service__more:hover { color: var(--sysit-blue); }

@media (max-width: 900px) {
	.sysit-services__grid { grid-template-columns: minmax(0, 1fr); }
	.sysit-services__all { display: none; }
	.sysit-services { margin-top: 56px; padding-block: 48px; }
}

/* Featured image shows in full — no cropping. Some themes and Elementor
   kits force object-fit: cover on post images, so this overrides them. */
.sysit-tpl .sysit-article__banner,
.sysit-tpl .sysit-article__banner img {
	object-fit: initial !important;
	height: auto !important;
	aspect-ratio: auto !important;
	max-height: none !important;
}

/* =========================================================================
   POLISH PASS
   ====================================================================== */

/* ---- H1 holds 54px on desktop regardless of theme typography ---------- */

@media (min-width: 1024px) {
	.sysit-tpl .sysit-article__title,
	.sysit-article .sysit-article__title {
		font-size: 54px !important;
		line-height: 1.08 !important;
	}
}

/* ---- Save / Share / Listen -------------------------------------------- */

.sysit-actions { gap: 10px; }

.sysit-action {
	position: relative;
	gap: 9px;
	padding: 10px 18px 10px 12px;
	border: 1px solid #e4e8f0;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffffff, #fbfcfe);
	font-size: 13px;
	font-weight: 650;
	color: var(--sysit-navy);
	box-shadow: 0 1px 2px rgba(15, 34, 70, .05);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.sysit-action__icon {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--sysit-blue-soft);
	color: var(--sysit-blue);
	flex: 0 0 auto;
	transition: background .18s ease, color .18s ease;
}

.sysit-action__icon svg { width: 14px; height: 14px; display: block; }

.sysit-action:hover {
	transform: translateY(-2px);
	border-color: #cfd8e8;
	box-shadow: 0 8px 20px rgba(15, 34, 70, .10);
}

.sysit-action:hover .sysit-action__icon { background: var(--sysit-navy); color: #fff; }
.sysit-action:active { transform: translateY(0); }

.sysit-action[aria-pressed="true"] {
	border-color: #f9d3bd;
	background: linear-gradient(180deg, #fff8f4, #fff1e9);
	color: var(--sysit-orange);
}

.sysit-action[aria-pressed="true"] .sysit-action__icon {
	background: var(--sysit-orange);
	color: #fff;
}

/* ---- Keep Reading card ------------------------------------------------- */

.sysit-keep__list { gap: 0; }

.sysit-keep__list li + li { border-top: 1px solid var(--sysit-line-soft); }

.sysit-keep__list a {
	position: relative;
	align-items: center;
	gap: 12px;
	padding: 13px 10px 13px 12px;
	margin-inline: -12px;
	border-radius: 12px;
	transition: background .18s ease;
}

.sysit-keep__list a:hover { background: #f6f8fc; }

.sysit-keep__icon {
	width: 36px;
	height: 36px;
	border-radius: 11px;
	box-shadow: 0 4px 12px rgba(15, 34, 70, .16);
	transition: transform .2s ease;
}

.sysit-keep__list a:hover .sysit-keep__icon { transform: scale(1.06) rotate(-3deg); }

.sysit-keep__title {
	font-size: 13px;
	font-weight: 600;
	color: var(--sysit-navy);
}

.sysit-keep__arrow {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	color: #b9c2d1;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .18s ease, transform .18s ease, color .18s ease;
}

.sysit-keep__arrow svg { width: 14px; height: 14px; }

.sysit-keep__list a:hover .sysit-keep__arrow {
	opacity: 1;
	transform: translateX(0);
	color: var(--sysit-blue);
}

/* ---- Overall refinement ------------------------------------------------ */

/* Pills feel less flat */
.sysit-pill {
	box-shadow: 0 1px 2px rgba(15, 34, 70, .04);
	transition: transform .16s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.sysit-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 34, 70, .08); }
.sysit-pill.is-active { box-shadow: 0 6px 16px rgba(15, 34, 70, .18); }

/* Byline sits on a soft surface rather than a bare rule */
.sysit-byline {
	padding: 16px 20px;
	border: 1px solid var(--sysit-line);
	border-radius: 16px;
	background: linear-gradient(180deg, #ffffff, #fafbfd);
	box-shadow: 0 2px 12px rgba(15, 34, 70, .04);
}

.sysit-avatar-wrap { box-shadow: 0 3px 10px rgba(15, 34, 70, .18); }

/* Banner gets a slightly warmer lift */
.sysit-article__banner {
	box-shadow: 0 22px 50px rgba(15, 34, 70, .13);
	border: 1px solid rgba(15, 34, 70, .05);
}

/* Right rail cards lift on hover so they read as interactive */
.sysit-layout__right .sysit-rail-card {
	transition: box-shadow .22s ease, transform .22s ease;
}

.sysit-layout__right .sysit-rail-card:hover {
	box-shadow: 0 10px 30px rgba(15, 34, 70, .10);
}

/* eGuide cover gets depth */
.sysit-eguide__cover img {
	transition: transform .3s ease;
	filter: drop-shadow(0 10px 20px rgba(15, 34, 70, .18));
}

.sysit-eguide__cover:hover img { transform: translateY(-3px) scale(1.02); }

/* Primary buttons */
.sysit-btn {
	box-shadow: 0 6px 18px rgba(15, 34, 70, .18);
	transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.sysit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 34, 70, .24); }
.sysit-btn--orange { box-shadow: 0 6px 18px rgba(242, 106, 33, .35); }
.sysit-btn--orange:hover { box-shadow: 0 10px 26px rgba(242, 106, 33, .45); }

/* TOC active row gets a touch of depth */
.sysit-toc__list a.is-current { box-shadow: 0 6px 16px rgba(15, 34, 70, .22); }

/* FAQ rows respond to hover */
.sysit-faq__item summary { transition: color .16s ease; }
.sysit-faq__item summary:hover { color: var(--sysit-blue); }
.sysit-faq__item[open] { background: #fbfcfe; border-radius: 12px; padding-inline: 16px; margin-inline: -16px; }

/* Tags */
.sysit-tags a { transition: transform .16s ease, background .16s ease; }
.sysit-tags a:hover { transform: translateY(-1px); }

/* Share buttons */
.sysit-share__link { transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease; }
.sysit-share__link:hover { transform: translateY(-2px); }

/* Video card */
.sysit-video__thumb { box-shadow: 0 10px 26px rgba(15, 34, 70, .18); }
.sysit-video__thumb img { transition: transform .35s ease; }
.sysit-video__thumb:hover img { transform: scale(1.04); }

/* Sponsored card depth */
.sysit-sponsored { box-shadow: 0 14px 34px rgba(15, 34, 70, .28); }

/* Slightly tighter vertical rhythm between the head and the columns */
.sysit-byline { margin-bottom: 44px; }
.sysit-layout { padding-bottom: 20px; }

@media (max-width: 880px) {
	.sysit-actions { width: 100%; }
	.sysit-action { flex: 1 1 auto; justify-content: center; }
	.sysit-byline { flex-direction: column; align-items: stretch; }
}

/* Breathing room between the site header and the breadcrumb. */
.sysit-article,
.sysit-listing {
	padding-top: 28px;
}

.sysit-article > .sysit-shell:first-child .sysit-crumbs,
.sysit-listing > .sysit-shell:first-child .sysit-crumbs {
	padding-top: 0;
}

@media (max-width: 880px) {
	.sysit-article,
	.sysit-listing { padding-top: 18px; }
}

/* =========================================================================
   Video popup — frosted glass
   Scoped and forced, because Elementor's lightbox styles otherwise tint
   the backdrop solid blue.
   ====================================================================== */

.sysit-modal {
	background: linear-gradient(
		160deg,
		rgba(13, 28, 62, .62),
		rgba(20, 42, 92, .58) 45%,
		rgba(9, 18, 40, .68)
	) !important;
	-webkit-backdrop-filter: blur(22px) saturate(150%);
	backdrop-filter: blur(22px) saturate(150%);
	padding: 32px 24px !important;
}

.sysit-modal__inner {
	background: rgba(255, 255, 255, .06) !important;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 18px;
	box-shadow:
		0 40px 90px rgba(4, 10, 26, .55),
		0 0 0 1px rgba(255, 255, 255, .06) inset;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	overflow: hidden;
}

.sysit-modal__inner iframe {
	border-radius: 17px;
	background: #000;
}

/* Close button sits inside the frame so it can never fall off-screen. */
.sysit-modal__close {
	top: 14px !important;
	right: 14px !important;
	z-index: 2;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	background: rgba(15, 28, 58, .55);
	border: 1px solid rgba(255, 255, 255, .22);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	transition: background .18s ease, transform .18s ease;
}

.sysit-modal__close:hover {
	background: rgba(242, 106, 33, .9);
	border-color: transparent;
	transform: scale(1.06);
}

/* Browsers without backdrop-filter get a darker solid instead of a blue haze. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.sysit-modal { background: rgba(9, 18, 40, .9) !important; }
}

/* Intro strip sits lower on the page. */
.sysit-intro {
	padding-top: 90px;
}

@media (max-width: 880px) {
	.sysit-intro { padding-top: 48px; }
}

/* =========================================================================
   TYPOGRAPHY + ICONS
   ====================================================================== */

/* Plus Jakarta Sans across the whole page, not just the blog blocks. */
.sysit-tpl,
.sysit-tpl body,
.sysit-tpl button,
.sysit-tpl input,
.sysit-tpl select,
.sysit-tpl textarea,
.sysit-tpl h1,
.sysit-tpl h2,
.sysit-tpl h3,
.sysit-tpl h4,
.sysit-tpl h5,
.sysit-tpl h6,
.sysit-tpl p,
.sysit-tpl a,
.sysit-tpl span,
.sysit-tpl li,
.sysit-tpl div {
	font-family: "Plus Jakarta Sans", sans-serif;
}

/* Pills need a little breathing room above. */
.sysit-pills { padding-top: 4px; }

/* Service card type, to spec. */
.sysit-service__title,
.sysit-tpl .sysit-service__title {
	font-size: 19px;
	line-height: 26px;
	font-weight: 700;
}

.sysit-service__text,
.sysit-tpl .sysit-service__text {
	font-size: 14px;
	line-height: 23px;
}

/* ---- Icon sizing ------------------------------------------------------- */

.sysit-share__link svg { width: 15px; height: 15px; display: block; }
.sysit-follow__icon svg { width: 14px; height: 14px; display: block; }

.sysit-viewall svg,
.sysit-services__all svg,
.sysit-service__more svg,
.sysit-rail-link svg,
.sysit-btn svg {
	width: 14px;
	height: 14px;
	display: inline-block;
	vertical-align: -2px;
	margin-left: 6px;
	transition: transform .18s ease;
}

.sysit-viewall::after,
.sysit-service__more::after,
.sysit-rcard__more::after { content: none; }

.sysit-viewall:hover svg,
.sysit-services__all:hover svg,
.sysit-service__more:hover svg,
.sysit-btn:hover svg { transform: translateX(3px); }

.sysit-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
}

/* Sparkle badge on rail card headings. */
.sysit-railicon {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 7px;
	background: var(--sysit-blue-soft);
	color: var(--sysit-blue);
	flex: 0 0 auto;
}

.sysit-railicon svg { width: 13px; height: 13px; display: block; }

/* The old CSS "+" pseudo badge is replaced by the sparkle. */
.sysit-rail-kicker--blue::before { display: none !important; }

.sysit-tick {
	display: inline-grid;
	place-items: center;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #16a34a;
	color: #fff;
	margin-right: 5px;
	vertical-align: -3px;
}

.sysit-tick svg { width: 9px; height: 9px; display: block; }

/* FAQ toggle becomes a chevron rather than +/−. */
.sysit-faq__item summary::after {
	content: "";
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	background-color: currentColor;
	color: var(--sysit-ink-faint);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / 18px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / 18px no-repeat;
	transition: transform .2s ease;
}

.sysit-faq__item[open] summary::after {
	content: "";
	transform: rotate(180deg);
	color: var(--sysit-orange);
}

/* =========================================================================
   TABLES — final treatment
   ====================================================================== */

.sysit-prose .sysit-tablewrap {
	margin-block: 1.6em;
	border: 1px solid var(--sysit-line);
	border-radius: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	background: var(--sysit-surface);
	box-shadow: 0 6px 24px rgba(15, 34, 70, .07);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.sysit-prose .sysit-tablewrap::-webkit-scrollbar { height: 10px; }
.sysit-prose .sysit-tablewrap::-webkit-scrollbar-track { background: #f1f4f9; border-radius: 0 0 16px 16px; }
.sysit-prose .sysit-tablewrap::-webkit-scrollbar-thumb { background: #c3ccdb; border-radius: 10px; border: 2px solid #f1f4f9; }
.sysit-prose .sysit-tablewrap::-webkit-scrollbar-thumb:hover { background: var(--sysit-navy); }

.sysit-prose .sysit-tablewrap table {
	width: 100%;
	min-width: 640px;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	border-collapse: collapse;
	display: table;
	white-space: normal;
	font-size: 14px;
	line-height: 22px;
}

/* Header row — works with or without <thead>. */
.sysit-prose thead th,
.sysit-prose tr.sysit-thead-row th,
.sysit-prose tr.sysit-thead-row td {
	background: linear-gradient(150deg, #10224a, #1c3768) !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 11.5px !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.45;
	padding: 15px 18px;
	border: 0;
	vertical-align: middle;
	text-align: left;
}

.sysit-prose thead th:first-child,
.sysit-prose tr.sysit-thead-row > *:first-child { border-radius: 0; }

.sysit-prose tbody td,
.sysit-prose td {
	padding: 15px 18px;
	border: 0;
	border-bottom: 1px solid var(--sysit-line-soft);
	vertical-align: top;
	color: #48536a;
}

.sysit-prose tbody tr:last-child td { border-bottom: 0; }
.sysit-prose tbody tr:nth-child(odd):not(.sysit-thead-row) { background: #fbfcfe; }
.sysit-prose tbody tr:not(.sysit-thead-row):hover { background: #f2f6fd; }

/* First column reads as the row label. */
.sysit-prose tbody tr:not(.sysit-thead-row) td:first-child {
	font-weight: 700;
	color: var(--sysit-navy);
	border-left: 3px solid transparent;
}

.sysit-prose tbody tr:not(.sysit-thead-row):hover td:first-child {
	border-left-color: var(--sysit-orange);
}

.sysit-prose td strong { color: var(--sysit-navy); font-weight: 700; }

/* The earlier mobile rule is superseded by the wrapper. */
@media (max-width: 700px) {
	.sysit-prose table { display: table; overflow: visible; white-space: normal; }
	.sysit-prose .sysit-tablewrap table { min-width: 560px; }
	.sysit-prose thead th,
	.sysit-prose tr.sysit-thead-row th,
	.sysit-prose tr.sysit-thead-row td,
	.sysit-prose tbody td { padding: 12px 14px; }
}

/* =========================================================================
   STICKY RAIL SCROLLBAR — grabbable
   ====================================================================== */

.sysit-sticky {
	padding-right: 10px;
	scrollbar-gutter: stable;
	overscroll-behavior: auto;
	scrollbar-width: auto;
	scrollbar-color: #c3ccdb transparent;
}

.sysit-sticky::-webkit-scrollbar { width: 10px; }

.sysit-sticky::-webkit-scrollbar-track {
	background: #f1f4f9;
	border-radius: 10px;
	margin-block: 4px;
}

.sysit-sticky::-webkit-scrollbar-thumb {
	background: #c3ccdb;
	border-radius: 10px;
	border: 2px solid #f1f4f9;
	min-height: 44px;
}

.sysit-sticky::-webkit-scrollbar-thumb:hover { background: #97a3b8; }
.sysit-sticky::-webkit-scrollbar-thumb:active { background: var(--sysit-navy); }

/* Nothing inside the rail should swallow the drag. */
.sysit-sticky > * { flex: none; }

/* On tablet and below the rails are static, so no inner scrollbar at all. */
@media (max-width: 1200px) {
	.sysit-layout__right .sysit-sticky {
		padding-right: 0;
		scrollbar-gutter: auto;
	}
}

@media (max-width: 880px) {
	.sysit-sticky { padding-right: 0; scrollbar-gutter: auto; overflow: visible; max-height: none; }
}

/* =========================================================================
   SIMPLE TABLE — plain ruled grid
   ====================================================================== */

.sysit-prose .sysit-tablewrap {
	border: 1px solid #d8dee8;
	border-radius: 8px;
	box-shadow: none;
	background: #fff;
}

.sysit-prose .sysit-tablewrap table {
	border-collapse: collapse;
	font-size: 14.5px;
	line-height: 23px;
}

/* Header row: light, ruled, no gradient. */
.sysit-prose thead th,
.sysit-prose tr.sysit-thead-row th,
.sysit-prose tr.sysit-thead-row td {
	background: #f6f8fb !important;
	color: var(--sysit-navy) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: .02em;
	text-transform: none;
	padding: 13px 16px;
	border: 1px solid #d8dee8;
	text-align: left;
	vertical-align: middle;
}

/* Every cell ruled on all sides. */
.sysit-prose .sysit-tablewrap th,
.sysit-prose .sysit-tablewrap td {
	border: 1px solid #d8dee8;
	padding: 13px 16px;
	vertical-align: top;
	color: #48536a;
	background: transparent;
}

/* Clear the decorative treatments from the previous version. */
.sysit-prose tbody tr:nth-child(odd):not(.sysit-thead-row) { background: transparent; }
.sysit-prose tbody tr:not(.sysit-thead-row):hover { background: transparent; }

.sysit-prose tbody tr:not(.sysit-thead-row) td:first-child {
	font-weight: 600;
	color: var(--sysit-navy);
	border-left: 1px solid #d8dee8;
}

.sysit-prose tbody tr:not(.sysit-thead-row):hover td:first-child {
	border-left-color: #d8dee8;
}

/* Outer edges are drawn by the wrapper, so drop the doubled border. */
.sysit-prose .sysit-tablewrap tr > *:first-child { border-left: 0; }
.sysit-prose .sysit-tablewrap tr > *:last-child { border-right: 0; }
.sysit-prose .sysit-tablewrap tr:first-child > * { border-top: 0; }
.sysit-prose .sysit-tablewrap tr:last-child > * { border-bottom: 0; }

/* =========================================================================
   H2 accent bar — sits lower and matches the headline height
   ====================================================================== */

.sysit-prose h2::before,
.sysit-prose .sysit-h2::before,
.sysit-faq > .sysit-h2::before {
	top: 0.24em;
	bottom: 0.14em;
	height: auto;
	width: 4px;
	border-radius: 3px;
}

/* =========================================================================
   PILLAR GUIDES (rail card)
   Driven by the _pillar_blog_ids meta box.
   ====================================================================== */

.sysit-pillars__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.sysit-pillar {
	position: relative;
	display: block;
	border: 1px solid var(--sysit-line);
	border-radius: 14px;
	overflow: hidden;
	background: var(--sysit-surface);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.sysit-pillar:hover {
	transform: translateY(-3px);
	border-color: #cfd8e8;
	box-shadow: 0 12px 28px rgba(15, 34, 70, .14);
}

.sysit-pillar__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #101f3f;
}

.sysit-pillar__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.sysit-pillar:hover .sysit-pillar__media img { transform: scale(1.06); }

.sysit-pillar__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(140deg, #1b2a4d, #3b2a6d);
}

/* Readability wash under the badge. */
.sysit-pillar__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(9, 18, 40, .45) 0%, rgba(9, 18, 40, 0) 55%);
	pointer-events: none;
}

.sysit-pillar__badge {
	position: absolute;
	top: 9px;
	left: 9px;
	z-index: 1;
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--sysit-orange);
	color: #fff;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	box-shadow: 0 4px 12px rgba(242, 106, 33, .45);
}

.sysit-pillar__body {
	display: block;
	padding: 12px 14px 13px;
}

.sysit-pillar__cat {
	display: block;
	margin-bottom: 4px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--sysit-blue);
}

.sysit-pillar__title {
	display: block;
	font-size: 13.5px;
	line-height: 19px;
	font-weight: 700;
	color: var(--sysit-navy);
	transition: color .18s ease;
}

.sysit-pillar:hover .sysit-pillar__title { color: var(--sysit-blue); }

.sysit-pillar__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 8px;
	padding-top: 9px;
	border-top: 1px solid var(--sysit-line-soft);
	font-size: 11px;
	font-weight: 600;
	color: var(--sysit-ink-faint);
}

.sysit-pillar__arrow {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--sysit-blue-soft);
	color: var(--sysit-blue);
	transition: background .18s ease, color .18s ease, transform .18s ease;
}

.sysit-pillar__arrow svg {
	width: 12px;
	height: 12px;
	margin: 0;
}

.sysit-pillar:hover .sysit-pillar__arrow {
	background: var(--sysit-navy);
	color: #fff;
	transform: translateX(2px);
}

/* When the rails go horizontal on tablet, pillars sit side by side. */
@media (max-width: 1200px) {
	.sysit-pillars__list {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}
}

/* =========================================================================
   QA FIXES + RESPONSIVE HARDENING  (v5.5)
   ====================================================================== */

/* ---- 0. Stop anything from pushing the page sideways -------------------
   overflow-x: clip hides overflow WITHOUT creating a scroll container,
   so it does not break the sticky rails the way overflow: hidden would. */
.sysit-tpl .sysit-article,
.sysit-tpl .sysit-listing {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

.sysit-article img,
.sysit-listing img { max-width: 100%; height: auto; }

.sysit-layout__main { min-width: 0; }

/* ---- Button reset: Elementor kit styles leak into every <button> ------- */
.sysit-tpl .sysit-action,
.sysit-tpl .sysit-share__link,
.sysit-tpl .sysit-video__thumb,
.sysit-tpl .sysit-modal__close {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	text-transform: none;
	text-decoration: none;
	letter-spacing: normal;
	min-height: 0;
	box-sizing: border-box;
}

/* ---- 1. "Learn more" pinned to the bottom of every service card -------- */
.sysit-services__grid { align-items: stretch; }
.sysit-service { height: 100%; }
.sysit-service__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.sysit-service__body > * { flex-shrink: 0; }

.sysit-service__more {
	margin-top: auto !important;
	padding-top: 20px;
}

/* ---- 2. Copy-link button lines up with the share links ----------------- */
.sysit-tpl .sysit-share { align-items: center; flex-wrap: wrap; }

.sysit-tpl .sysit-share__link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 34px !important;
	height: 34px !important;
	padding: 0 !important;
	line-height: 0 !important;
	border: 1px solid var(--sysit-line) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--sysit-navy) !important;
	vertical-align: middle;
	font-size: 0;
	box-shadow: none;
}

.sysit-tpl .sysit-share__link svg { width: 15px; height: 15px; }

.sysit-tpl .sysit-share__link:hover,
.sysit-tpl .sysit-share__link:focus-visible {
	background: var(--sysit-navy) !important;
	border-color: var(--sysit-navy) !important;
	color: #fff !important;
}

/* ---- 3. Save / Share / Listen text stays readable on hover ------------- */
.sysit-tpl .sysit-action {
	display: inline-flex !important;
	align-items: center;
	padding: 9px 18px 9px 10px !important;
	border: 1px solid #e4e8f0 !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--sysit-navy) !important;
	font-size: 13px !important;
	font-weight: 650 !important;
	line-height: 1.2 !important;
}

.sysit-tpl .sysit-action span { color: inherit !important; }

.sysit-tpl .sysit-action:hover,
.sysit-tpl .sysit-action:focus,
.sysit-tpl .sysit-action:focus-visible,
.sysit-tpl .sysit-action:active {
	background: #f4f7fd !important;
	border-color: #c9d4e8 !important;
	color: var(--sysit-navy) !important;
}

.sysit-tpl .sysit-action:hover .sysit-action__icon { background: var(--sysit-navy); color: #fff !important; }

.sysit-tpl .sysit-action[aria-pressed="true"] {
	background: #fff4ed !important;
	border-color: #f9d3bd !important;
	color: var(--sysit-orange) !important;
}

/* ---- 4. Breadcrumb: one tidy line on every device ----------------------
   Earlier items keep their size; the long post title shrinks with "..."
   instead of wrapping onto a second line that starts with "/". */
.sysit-crumbs ol {
	flex-wrap: nowrap;
	align-items: center;
	min-width: 0;
	overflow: hidden;
}

.sysit-crumbs li {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	white-space: nowrap;
	min-width: 0;
}

.sysit-crumbs li:last-child {
	flex: 1 1 auto;
	overflow: hidden;
}

.sysit-crumbs li:last-child span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- 5. 01 / 02 badges truly centred and level with the heading -------- */
.sysit-tpl .sysit-rail-kicker {
	align-items: center !important;
	line-height: 1.2;
}

.sysit-tpl .sysit-numbadge,
.sysit-tpl .sysit-railicon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 26px !important;
	height: 26px !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-indent: 0 !important;
	font-size: 11px !important;
	font-variant-numeric: tabular-nums;
	text-align: center;
	vertical-align: middle;
	flex: 0 0 26px;
	border-radius: 8px;
}

.sysit-tpl .sysit-toc__num {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	padding: 0 !important;
}

/* ---- 6 + 7. Category filter: never truncated ---------------------------
   Tablet and desktop: pills wrap onto more lines, every name fully shown.
   Phones: a single swipeable row that fades out softly at the edge, with
   room at the end so the last pill can scroll fully into view. */
.sysit-pills {
	flex-wrap: wrap;
	overflow: visible;
	row-gap: 10px;
}

.sysit-pill {
	white-space: nowrap;
	max-width: none;
	text-overflow: clip;
}

@media (max-width: 767px) {
	.sysit-pillbar { position: relative; }

	.sysit-pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		padding-right: 40px;
		-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent 100%);
		mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent 100%);
	}

	.sysit-pill { scroll-snap-align: start; }
}

/* ---- 8. Side rails: reliable scrolling on iPad and touch devices -------
   100vh on iPad Safari includes the hidden toolbar, so the bottom of the
   rail sat off-screen and the last items were unreachable. dvh fixes it. */
.sysit-sticky {
	max-height: calc(100vh - var(--sysit-sticky-top, 96px) - 24px);
	max-height: calc(100dvh - var(--sysit-sticky-top, 96px) - 24px);
}

@media (hover: none) and (pointer: coarse) {
	.sysit-sticky {
		-webkit-overflow-scrolling: touch;
		touch-action: pan-y;
		overscroll-behavior: contain;
	}
}

/* =========================================================================
   RESPONSIVE LAYOUT: one consistent set of breakpoints
     > 1200      desktop: TOC | article | rail, both rails sticky
     1025-1200   small laptop / iPad landscape: TOC | article, rail below
     768-1024    iPad portrait: single column
     < 768       phones
   ====================================================================== */

@media (max-width: 1200px) {
	.sysit-layout {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 32px;
	}

	.sysit-layout__right {
		grid-column: 1 / -1;
		position: static !important;
	}

	.sysit-layout__right .sysit-sticky {
		position: static;
		max-height: none !important;
		overflow: visible !important;
		padding-right: 0;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		align-items: start;
	}
}

@media (max-width: 1024px) {
	.sysit-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	/* A sticky TOC on a single column would cover the article. */
	.sysit-layout__left,
	.sysit-layout__right {
		position: static !important;
	}

	.sysit-layout__left .sysit-sticky {
		max-height: none !important;
		overflow: visible !important;
		padding-right: 0;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		align-items: start;
	}

	.sysit-article__title { font-size: 40px !important; }
	.sysit-intro { padding-top: 56px; }
}

@media (max-width: 767px) {
	.sysit-shell { padding-inline: 18px !important; }

	.sysit-intro { padding-top: 40px; flex-direction: column; align-items: flex-start; gap: 12px; }
	.sysit-intro__title { font-size: 22px; }

	.sysit-article__banner { border-radius: 14px; margin-bottom: 22px; }
	.sysit-article__title { font-size: 30px !important; line-height: 1.15 !important; }
	.sysit-article__deck { font-size: 15.5px; }

	.sysit-byline {
		flex-direction: column;
		align-items: stretch;
		padding: 14px;
		gap: 14px;
	}

	.sysit-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

	.sysit-tpl .sysit-action {
		justify-content: center;
		padding: 9px 8px !important;
		font-size: 12px !important;
	}

	.sysit-action__icon { width: 22px; height: 22px; }

	.sysit-layout__left .sysit-sticky,
	.sysit-layout__right .sysit-sticky { grid-template-columns: minmax(0, 1fr); }

	.sysit-prose { font-size: 16px; }
	.sysit-prose > p:first-of-type::first-letter { font-size: 48px; }
	.sysit-prose h2, .sysit-prose .sysit-h2 { font-size: 22px; }

	.sysit-footrow { flex-direction: column; align-items: flex-start; }

	.sysit-services { margin-top: 48px; padding-block: 44px; }
	.sysit-services__head { flex-direction: column; align-items: flex-start; }
	.sysit-services__all { display: inline-flex !important; }
	.sysit-services__grid { grid-template-columns: minmax(0, 1fr); }

	.sysit-follow__grid { grid-template-columns: 1fr 1fr; }

	.sysit-modal { padding: 16px !important; }
}

@media (max-width: 380px) {
	.sysit-article__title { font-size: 26px !important; }
	.sysit-actions { grid-template-columns: 1fr; }
	.sysit-follow__grid { grid-template-columns: 1fr; }
}

/* Two service cards across on tablets, three only when there is room. */
@media (max-width: 1100px) and (min-width: 768px) {
	.sysit-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =========================================================================
   v5.6 FIXES
   ====================================================================== */

/* Intro spacing, all screen sizes. */
.sysit-intro { padding-top: 40px; }

/* Breadcrumb always visible: if the site header floats over the page on a
   given device, push our content down by exactly the covered amount. */
.sysit-tpl .sysit-article,
.sysit-tpl .sysit-listing {
	padding-top: calc(28px + var(--sysit-header-offset, 0px)) !important;
}

.sysit-crumbs { position: relative; z-index: 1; }

/* ---- Mid-size screens (small laptops, iPad landscape) -----------------
   The left sidebar now owns the whole left column from top to bottom, and
   the right sidebar cards sit under the article in the right column.
   The two sidebars can no longer occupy the same space, so nothing
   overlaps while scrolling. */
@media (max-width: 1200px) and (min-width: 1025px) {
	.sysit-layout {
		grid-template-columns: 240px minmax(0, 1fr);
		grid-template-rows: auto auto;
	}

	.sysit-layout__left {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: stretch;
		position: relative !important;
	}

	/* Sticky moves to the inner box, which is confined to the left column. */
	.sysit-layout__left > .sysit-sticky {
		position: sticky;
		top: var(--sysit-sticky-top, 96px);
	}

	.sysit-layout__main {
		grid-column: 2;
		grid-row: 1;
	}

	.sysit-layout__right {
		grid-column: 2 !important;
		grid-row: 2;
		position: static !important;
	}

	.sysit-layout__right .sysit-sticky {
		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
		align-items: start;
	}
}

/* Any screen where the right sidebar sits below the article: its cards
   must never be sticky or scroll inside themselves. */
@media (max-width: 1200px) {
	.sysit-layout__right .sysit-sticky,
	.sysit-layout__right .sysit-rail-card {
		position: static !important;
		max-height: none !important;
		overflow: visible !important;
		transform: none !important;
	}

	.sysit-layout__right .sysit-rail-card { min-width: 0; }
}

/* =========================================================================
   v5.7 FIXES: right sidebar on tablets, video thumbnail, rail typography
   ====================================================================== */

/* ---- Right sidebar below the article: cards stack snugly --------------
   Masonry-style columns instead of rows, so a short card never leaves
   empty space beside a tall one. */
@media (max-width: 1200px) {
	.sysit-tpl .sysit-layout__right .sysit-sticky {
		display: block !important;
		column-count: 2;
		column-gap: 20px;
		max-height: none !important;
		overflow: visible !important;
		padding-right: 0 !important;
	}

	.sysit-tpl .sysit-layout__right .sysit-rail-card {
		display: block;
		width: 100%;
		margin: 0 0 20px !important;
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
	}
}

@media (max-width: 640px) {
	.sysit-tpl .sysit-layout__right .sysit-sticky { column-count: 1; }
}

/* ---- See It In Action: show the whole thumbnail ------------------------
   The thumbnail is a tall image; forcing it into a wide 16:9 frame cut off
   the heading and the presenter. Let it keep its own shape everywhere. */
.sysit-tpl .sysit-video__thumb {
	aspect-ratio: auto !important;
	height: auto !important;
	min-height: 160px;
	line-height: 0;
}

.sysit-tpl .sysit-video__thumb img {
	width: 100% !important;
	height: auto !important;
	object-fit: contain !important;
	display: block;
}

/* Keep the thumbnail a sensible size when a card is wide. */
@media (max-width: 1200px) {
	.sysit-tpl .sysit-video__thumb {
		max-width: 360px;
		margin-inline: auto;
	}
}

/* ---- Rail typography: stop the theme's big headings and wide line gaps */
.sysit-tpl .sysit-rail-card p { margin-top: 0; }

.sysit-tpl .sysit-rail-text {
	font-size: 13px !important;
	line-height: 1.6 !important;
	margin: 0 0 14px !important;
}

.sysit-tpl .sysit-rail-proof {
	font-size: 12px !important;
	line-height: 1.4 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.sysit-tpl .sysit-sponsored__title {
	font-size: 20px !important;
	line-height: 1.3 !important;
	font-weight: 750 !important;
	margin: 0 0 10px !important;
	letter-spacing: -0.01em;
}

.sysit-tpl .sysit-sponsored__text {
	font-size: 13px !important;
	line-height: 1.6 !important;
	margin: 0 0 16px !important;
}

.sysit-tpl .sysit-authorcard__name {
	font-size: 16px !important;
	line-height: 1.3 !important;
	margin: 0 0 2px !important;
}

.sysit-tpl .sysit-authorcard__role {
	font-size: 12.5px !important;
	line-height: 1.4 !important;
	margin: 0 !important;
}

.sysit-tpl .sysit-keep__title {
	font-size: 13px !important;
	line-height: 1.4 !important;
}

.sysit-tpl .sysit-follow__label { line-height: 1.2 !important; }
.sysit-tpl .sysit-follow__count { line-height: 1.2 !important; }

/* Green tick next to the download count: the check mark was missing. */
.sysit-tpl .sysit-tick {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin: 0;
	flex: 0 0 16px;
}

.sysit-tpl .sysit-tick svg {
	width: 10px !important;
	height: 10px !important;
	display: block;
}

.sysit-tpl .sysit-tick svg,
.sysit-tpl .sysit-tick svg path {
	fill: none !important;
	stroke: #fff !important;
	stroke-width: 3 !important;
}

/* Follow grid stays two-up inside a narrow card, one-up only when tiny. */
.sysit-tpl .sysit-follow__grid a { min-width: 0; }
.sysit-tpl .sysit-follow__meta { overflow: hidden; }
.sysit-tpl .sysit-follow__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =========================================================================
   v5.9.2: Categories box visible on every device
   ====================================================================== */

.sysit-layout__left .sysit-rail-card { display: block !important; }

/* iPad portrait: In This Article and Categories sit side by side. */
@media (max-width: 1024px) and (min-width: 768px) {
	.sysit-layout__left .sysit-sticky {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 18px;
		align-items: start;
	}
}

/* Phones: stacked, full width, with a little breathing room. */
@media (max-width: 767px) {
	.sysit-layout__left .sysit-sticky {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.sysit-catlist a { padding: 9px 12px; }
}