/*
 * W3Colleges child-theme interface.
 * The header is site-wide; homepage rules are scoped to .w3c-home/body.home.
 */

:root {
	--w3c-brand: #14532d;
	--w3c-brand-dark: #0e3d21;
	--w3c-brand-soft: #edf4ee;
	--w3c-secondary: #0e544a;
	--w3c-secondary-dark: #0a3f38;
	--w3c-secondary-soft: #e9f3f1;
	--w3c-accent: #b8862b;
	--w3c-accent-dark: #96691c;
	--w3c-accent-soft: #faf3e3;
	--w3c-ink: #1c2620;
	--w3c-text: #2c3a32;
	--w3c-muted: #64716a;
	--w3c-border: #e5e9e4;
	--w3c-border-strong: #c9d2ca;
	--w3c-line: #edf0ec;
	--w3c-surface: #ffffff;
	--w3c-surface-soft: #fafaf7;
	--w3c-paper: #f6f7f2;
	--w3c-focus: #14532d;
	--w3c-footer-link-hover: #14532d;
	--w3c-glass: rgba(255, 255, 255, 0.96);
	--w3c-glass-strong: rgba(255, 255, 255, 0.98);
	--w3c-glass-border: #e5e9e4;
	--w3c-glass-shadow: 0 1px 4px rgba(28, 38, 32, 0.06);
	--w3c-brand-shadow: rgba(20, 83, 45, 0.16);
	--w3c-brand-ring: rgba(20, 83, 45, 0.2);
	--w3c-header-height: 95px;
	--w3c-header-total-height: 95px;
	--w3c-header-main-height: 51px;
	--w3c-font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--w3c-font-body: "Literata", Georgia, "Times New Roman", serif;
	--w3c-font-display: "Literata", Georgia, "Times New Roman", serif;
	--w3c-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--w3c-navy: #1c2620;
	--w3c-navy-soft: #2c3a32;
	--w3c-card-shadow: 0 1px 2px rgba(28, 38, 32, 0.04);
	--w3c-card-shadow-hover: 0 2px 4px rgba(28, 38, 32, 0.05), 0 12px 28px rgba(28, 38, 32, 0.08);
	--w3c-green: #14532d;
	--w3c-green-dark: #0e3d21;
	--w3c-green-soft: #edf4ee;
	--w3c-green-soft-2: #e2ede4;
	--w3c-green-line: #cfdfd3;
	--w3c-green-ring: rgba(20, 83, 45, 0.2);
	--gfg-lavender: #14532d;
	--gfg-lavender-dark: #0e3d21;
}

.w3c-site-header,
.w3c-site-header *,
.w3c-home,
.w3c-home * {
	box-sizing: border-box;
}

.w3c-site-header a,
.w3c-home a {
	text-decoration: none;
}

.w3c-icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	vertical-align: middle;
}

.w3c-site-header a:focus-visible,
.w3c-site-header button:focus-visible,
.w3c-site-header summary:focus-visible,
.w3c-home a:focus-visible {
	outline: 3px solid var(--w3c-focus);
	outline-offset: 3px;
}

/* Sticky two-tier header. */
.w3c-site-header.site-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 9990;
	width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	background: rgba(255, 255, 255, 0.82);
	color: var(--w3c-ink);
	-webkit-backdrop-filter: blur(18px) saturate(145%);
	backdrop-filter: blur(18px) saturate(145%);
	font-family: var(--w3c-font-ui);
	text-align: left;
	transition: box-shadow 160ms ease;
}

.admin-bar .w3c-site-header.site-header {
	top: 32px;
}

.w3c-site-header.is-scrolled {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.w3c-header-main {
	position: relative;
	border-bottom: 1px solid var(--w3c-border);
	background: rgba(255, 255, 255, 0.72);
}

.w3c-header-inner {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
	align-items: center;
	width: min(100% - 32px, 1760px);
	height: 50px;
	margin: 0 auto;
}

.w3c-header-start {
	display: flex;
	align-items: center;
	justify-self: start;
	min-width: 0;
	gap: 7px;
}

.w3c-brand {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	height: 46px;
	color: var(--w3c-ink);
	font-size: 19px;
	font-weight: 750;
	letter-spacing: -0.02em;
}

.w3c-brand:hover {
	color: var(--w3c-ink);
	text-decoration: none;
}

.w3c-brand-logo {
	display: block;
	width: auto;
	max-width: 96px;
	height: 42px;
	margin: 0;
	object-fit: contain;
}

.w3c-brand-mark {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-right: 9px;
	border-radius: 50%;
	background: var(--w3c-brand);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.05em;
}

.w3c-primary-nav {
	justify-self: center;
}

.w3c-primary-menu,
.w3c-primary-menu ul,
.w3c-topic-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.w3c-primary-menu {
	display: flex;
	align-items: center;
	gap: 32px;
}

.w3c-primary-menu > li {
	position: relative;
	display: flex;
	align-items: center;
}

.w3c-primary-menu > li > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0 0 2px;
	color: var(--w3c-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.w3c-primary-menu > li:hover > a,
.w3c-primary-menu > li:focus-within > a,
.w3c-primary-menu > li.is-submenu-open > a {
	color: var(--w3c-brand);
}

.w3c-primary-menu .sub-menu {
	position: absolute;
	display: block;
	top: calc(100% - 2px);
	left: 50%;
	z-index: 20;
	visibility: hidden;
	width: 250px;
	max-width: calc(100vw - 24px);
	max-height: none;
	padding: 7px 9px 9px;
	border: 1px solid var(--w3c-border);
	border-top: 4px solid var(--w3c-brand);
	border-radius: 0 0 8px 8px;
	background: var(--w3c-glass-strong);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	box-shadow: var(--w3c-glass-shadow);
	opacity: 0;
	overflow: visible;
	transform: translate(-50%, 8px);
	transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}

.w3c-primary-menu .sub-menu > li {
	position: relative;
}

.w3c-primary-menu .sub-menu .sub-menu {
	top: -4px;
	left: calc(100% - 4px);
	z-index: 30;
	max-height: min(620px, calc(100vh - 112px));
	overflow-y: auto;
	transform: translate(8px, 0);
}

@media screen and (min-width: 901px) {
	/* Keep the fourth-level C++ Misc branch inside its flyout. */
	.w3c-primary-menu .sub-menu .sub-menu .sub-menu {
		position: static;
		display: none;
		visibility: visible;
		width: auto;
		min-width: 0;
		max-width: none;
		max-height: none;
		margin: 2px 7px 7px;
		padding: 3px 0 3px 10px;
		border: 0;
		border-left: 2px solid rgba(51, 70, 184, 0.22);
		border-radius: 0;
		background: var(--w3c-surface-soft);
		box-shadow: none;
		opacity: 1;
		overflow: visible;
		transform: none;
		transition: none;
	}

	.w3c-primary-menu .sub-menu .sub-menu > .menu-item-has-children:not(.is-escape-closed):hover > .sub-menu,
	.no-js .w3c-primary-menu .sub-menu .sub-menu > .menu-item-has-children:focus-within > .sub-menu,
	.w3c-primary-menu .sub-menu .sub-menu > .menu-item-has-children.is-submenu-open > .sub-menu {
		display: block;
		visibility: visible;
		opacity: 1;
		transform: none;
	}

	.w3c-primary-menu .sub-menu .sub-menu > li.is-escape-closed > .sub-menu {
		display: none;
		visibility: hidden;
	}

	.w3c-primary-menu .sub-menu .sub-menu .sub-menu a {
		min-height: 36px;
		padding: 7px 10px;
		font-size: 13px;
	}

	.w3c-primary-menu .sub-menu .sub-menu > .menu-item-has-children > .w3c-submenu-toggle::before {
		margin-top: -4px;
		transform: rotate(45deg);
	}

	.w3c-primary-menu .sub-menu .sub-menu > .menu-item-has-children > .w3c-submenu-toggle[aria-expanded="true"]::before {
		margin-top: 2px;
		transform: rotate(225deg);
	}
}

.w3c-primary-menu .menu-item-has-children:hover > .sub-menu,
.no-js .w3c-primary-menu .menu-item-has-children:focus-within > .sub-menu,
.w3c-primary-menu .menu-item-has-children.is-submenu-open > .sub-menu {
	visibility: visible;
	opacity: 1;
}

.w3c-primary-menu > .menu-item-has-children:hover > .sub-menu,
.no-js .w3c-primary-menu > .menu-item-has-children:focus-within > .sub-menu,
.w3c-primary-menu > .menu-item-has-children.is-submenu-open > .sub-menu {
	transform: translate(-50%, 0);
}

.w3c-primary-menu .sub-menu > .menu-item-has-children:hover > .sub-menu,
.no-js .w3c-primary-menu .sub-menu > .menu-item-has-children:focus-within > .sub-menu,
.w3c-primary-menu .sub-menu > .menu-item-has-children.is-submenu-open > .sub-menu {
	transform: translate(0, 0);
}

.w3c-primary-menu .sub-menu a {
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 12px;
	border-radius: 7px;
	color: var(--w3c-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.w3c-primary-menu .sub-menu a:hover,
.w3c-primary-menu .sub-menu a:focus {
	background: var(--w3c-brand-soft);
	color: var(--w3c-brand-dark);
}

.w3c-primary-menu .sub-menu > .menu-item-has-children > a {
	padding-right: 46px;
}

.w3c-primary-menu > li.is-escape-closed > .sub-menu {
	visibility: hidden;
	opacity: 0;
	transform: translate(-50%, 8px);
}

.w3c-primary-menu .sub-menu > li.is-escape-closed > .sub-menu {
	visibility: hidden;
	opacity: 0;
	transform: translate(8px, 0);
}

.w3c-submenu-toggle {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 25px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--w3c-ink);
	cursor: pointer;
}

.w3c-primary-menu > li:hover > .w3c-submenu-toggle,
.w3c-primary-menu > li:focus-within > .w3c-submenu-toggle,
.w3c-primary-menu .sub-menu > li:hover > .w3c-submenu-toggle,
.w3c-primary-menu .sub-menu > li:focus-within > .w3c-submenu-toggle,
.w3c-submenu-toggle[aria-expanded="true"] {
	color: var(--w3c-brand);
}

.w3c-primary-menu .sub-menu > .menu-item-has-children > .w3c-submenu-toggle {
	position: absolute;
	top: 0;
	right: 4px;
	z-index: 1;
	width: 40px;
	height: 40px;
}

.w3c-submenu-toggle::before {
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	content: "";
	transform: rotate(45deg);
	transition: transform 160ms ease;
}

.w3c-submenu-toggle[aria-expanded="true"]::before {
	margin-top: 2px;
	transform: rotate(225deg);
}

.w3c-primary-menu .sub-menu > .menu-item-has-children > .w3c-submenu-toggle::before {
	margin-top: 0;
	transform: rotate(-45deg);
}

.w3c-primary-menu .sub-menu > .menu-item-has-children > .w3c-submenu-toggle[aria-expanded="true"]::before {
	margin-top: 0;
	transform: rotate(-45deg);
}

.w3c-header-actions {
	display: flex;
	align-items: center;
	justify-self: end;
	gap: 8px;
}

.w3c-header-search {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
}

.w3c-header-social {
	position: relative;
}

.w3c-search-toggle,
.w3c-header-social summary {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	color: var(--w3c-ink);
	cursor: pointer;
	list-style: none;
	background: transparent;
	padding: 0;
}

.w3c-header-social summary::-webkit-details-marker {
	display: none;
}

.w3c-search-toggle:hover,
.w3c-search-toggle[aria-expanded="true"],
.w3c-header-social summary:hover,
.w3c-header-social[open] summary {
	border-color: var(--w3c-border);
	background: var(--w3c-surface-soft);
}

.w3c-search-toggle {
	background: var(--w3c-surface-soft);
}

.w3c-header-search svg,
.w3c-header-social svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 1.8;
}

.w3c-search-panel {
	position: static;
	display: flex;
	align-items: center;
	gap: 6px;
	width: 250px;
	height: 38px;
	margin: 0;
	padding: 0 7px 0 10px;
	border: 1px solid var(--w3c-border-strong);
	border-radius: 999px;
	background: var(--w3c-surface);
	box-shadow: none;
	z-index: 50;
}

.w3c-search-panel[hidden] {
	display: none;
}

.w3c-header-search.is-open .w3c-search-toggle {
	display: none;
}

.w3c-search-panel:focus-within {
	border-color: var(--w3c-brand);
	box-shadow: 0 0 0 2px var(--w3c-brand-ring);
}

.no-js .w3c-search-toggle {
	display: none;
}

.w3c-search-fallback {
	display: flex;
	width: min(240px, calc(100vw - 110px));
}

.w3c-search-fallback input[type="search"] {
	min-width: 0;
	height: 38px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid #cfd5dd;
	border-right: 0;
	border-radius: 7px 0 0 7px;
	background: #fff;
	color: var(--w3c-ink);
}

.w3c-search-fallback button {
	height: 38px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--w3c-brand);
	border-radius: 0 7px 7px 0;
	background: var(--w3c-brand);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.w3c-social-panel {
	position: absolute;
	top: calc(100% + 7px);
	right: 0;
	z-index: 40;
	width: 270px;
	padding: 13px;
	border: 1px solid var(--w3c-border);
	border-radius: 10px;
	background: var(--w3c-glass-strong);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	box-shadow: var(--w3c-glass-shadow);
}

.w3c-social-panel > p {
	margin: 0 0 8px;
	color: var(--w3c-muted);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.w3c-social-panel > div {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 5px;
}

.w3c-social-panel a {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 38px;
	padding: 0 9px;
	border-radius: 7px;
	color: var(--w3c-text);
	font-size: 12px;
	font-weight: 650;
}

.w3c-social-panel a:hover {
	background: var(--w3c-brand-soft);
	color: var(--w3c-brand-dark);
}

.w3c-social-panel .w3c-icon {
	width: 18px;
	height: 18px;
	color: var(--w3c-brand);
}

.w3c-search-panel .w3c-search-panel__icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: #667085;
}

.w3c-search-panel input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--w3c-ink);
	font-size: 14px;
	box-shadow: none;
}

.w3c-search-panel input[type="search"]:focus {
	outline: 0;
	box-shadow: none;
}

.w3c-search-panel input[type="search"]::-webkit-search-cancel-button {
	display: none;
}

.w3c-search-panel .w3c-search-close {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #344054;
	cursor: pointer;
}

.w3c-search-panel .w3c-search-close:hover {
	background: var(--w3c-surface-soft);
	color: var(--w3c-ink);
}

.w3c-nav-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--w3c-border);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
}

.w3c-nav-toggle > span[aria-hidden="true"] {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: var(--w3c-ink);
	transition: transform 160ms ease, opacity 160ms ease;
}

.w3c-nav-toggle[aria-expanded="true"] > span[aria-hidden="true"]:nth-of-type(2) {
	transform: translateY(7px) rotate(45deg);
}

.w3c-nav-toggle[aria-expanded="true"] > span[aria-hidden="true"]:nth-of-type(3) {
	opacity: 0;
}

.w3c-nav-toggle[aria-expanded="true"] > span[aria-hidden="true"]:nth-of-type(4) {
	transform: translateY(-7px) rotate(-45deg);
}

.w3c-topic-bar {
	border-bottom: 1px solid var(--w3c-border);
	background: rgba(255, 255, 255, 0.76);
}

.w3c-topic-nav {
	width: min(100%, 1180px);
	height: 43px;
	margin: 0 auto;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
}

.w3c-topic-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	width: max-content;
	min-width: 100%;
	height: 43px;
	white-space: nowrap;
}

.w3c-topic-menu li {
	flex: 0 0 auto;
}

.w3c-topic-menu a {
	display: inline-flex;
	align-items: center;
	height: 43px;
	padding: 0 13px;
	border-bottom: 2px solid transparent;
	color: var(--w3c-text);
	font-size: 13px;
	font-weight: 600;
}

.w3c-topic-menu a:hover,
.w3c-topic-menu a:focus,
.w3c-topic-menu .current-menu-item > a {
	border-bottom-color: var(--w3c-green);
	color: var(--w3c-green-dark);
}

/* Full-width homepage canvas while preserving legacy inner-page layout. */
body.w3c-full-canvas {
	background: var(--w3c-surface-soft);
}

body.w3c-full-canvas #page.site {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: visible;
	background: var(--w3c-surface-soft);
}

body.w3c-full-canvas #main.wrapper {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.w3c-home {
	width: 100%;
	background: var(--w3c-surface-soft);
	color: var(--w3c-text);
	font-family: var(--w3c-font-ui);
	font-size: 16px;
	line-height: 1.6;
}

.w3c-home section[id] {
	scroll-margin-top: calc(var(--w3c-header-height) + 20px);
}

.w3c-service-card[id] {
	scroll-margin-top: calc(var(--w3c-header-height) + 20px);
}

.w3c-container {
	width: min(100% - 48px, 1080px);
	margin: 0 auto;
}

.w3c-home-hero {
	display: grid;
	place-items: center;
	min-height: 0;
	padding: 46px 24px 40px;
	background:
		radial-gradient(ellipse at 50% -30%, rgba(11, 107, 46, 0.2), transparent 60%),
		linear-gradient(180deg, var(--w3c-green-soft) 0%, var(--w3c-surface-soft) 100%);
	text-align: center;
}

.w3c-home-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.w3c-home-hero h1 {
	clear: none;
	margin: 0;
	max-width: 880px;
	color: #101828;
	font-size: clamp(30px, 4vw, 42px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

.w3c-home-hero__lede {
	max-width: 640px;
	margin: 14px 0 0;
	color: var(--w3c-text);
	font-size: 16px;
	line-height: 1.6;
}

.w3c-home-hero__search {
	display: flex;
	align-items: center;
	gap: 8px;
	width: min(100%, 620px);
	height: 54px;
	margin: 24px 0 0;
	padding: 0 6px 0 16px;
	border: 1px solid var(--w3c-border-strong);
	border-radius: 999px;
	background: var(--w3c-surface);
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.w3c-home-hero__search:focus-within {
	border-color: var(--w3c-green);
	box-shadow: 0 0 0 4px var(--w3c-green-ring);
}

.w3c-home-hero__search > .w3c-icon {
	width: 20px;
	height: 20px;
	color: var(--w3c-muted);
}

.w3c-home-hero__search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--w3c-ink);
	font-size: 15px;
	box-shadow: none;
}

.w3c-home-hero__search input[type="search"]:focus {
	outline: 0;
	box-shadow: none;
}

.w3c-home-hero__search button {
	flex: 0 0 auto;
	height: 42px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: var(--w3c-green);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 150ms ease;
}

.w3c-home-hero__search button:hover {
	background: var(--w3c-green-dark);
}

.w3c-home-hero__search button:focus-visible {
	outline: 3px solid var(--w3c-focus);
	outline-offset: 2px;
}

.w3c-home-hero__proof {
	margin: 12px 0 0;
	color: var(--w3c-muted);
	font-size: 13px;
}

.w3c-home-hero__proof strong {
	color: var(--w3c-green-dark);
}

.w3c-home-hero__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 24px;
	margin-top: 22px;
}

.w3c-home-hero__links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 4px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--w3c-brand-dark);
	font-size: 14px;
	font-weight: 650;
	line-height: 1;
	box-shadow: none;
}

.w3c-home-hero__links a:hover {
	color: var(--w3c-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.w3c-home-hero__links a.is-primary {
	padding: 0 20px;
	background: var(--w3c-green);
	color: #fff;
	box-shadow: 0 8px 18px var(--w3c-green-ring);
}

.w3c-home-hero__links a.is-primary:hover {
	background: var(--w3c-green-dark);
	color: #fff;
	text-decoration: none;
}

.w3c-home-section {
	padding: 50px 24px 70px;
}

.w3c-home-hero,
.w3c-home-courses {
	border: 0;
	box-shadow: none;
}

.w3c-home-courses {
	padding-top: 0;
	background: transparent;
}

.w3c-home-courses > .w3c-container {
	max-width: 1042px;
}

.w3c-home-courses .w3c-section-heading {
	align-items: center;
	margin-bottom: 20px;
}

.w3c-home-courses .w3c-section-heading p {
	display: none;
}

.w3c-home-courses .w3c-section-heading h2 {
	color: var(--w3c-ink);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 36px;
}

.w3c-home-courses .w3c-section-heading > a {
	min-height: 32px;
	padding: 0 12px;
	border-color: var(--w3c-border-strong);
	font-size: 14px;
	font-weight: 400;
	line-height: 30px;
}

.w3c-home-catalog {
	border-top: 1px solid var(--w3c-border);
	border-bottom: 1px solid var(--w3c-border);
	background: var(--w3c-surface);
}

.w3c-home-catalog > .w3c-container {
	max-width: 1042px;
}

.w3c-home-learn > .w3c-container {
	max-width: 1042px;
}

.w3c-home-catalog .w3c-section-heading {
	align-items: center;
	margin-bottom: 20px;
}

.w3c-home-catalog .w3c-section-heading h2 {
	color: var(--w3c-ink);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 36px;
}

.w3c-home-catalog .w3c-section-heading > a {
	min-height: 32px;
	padding: 0 12px;
	border-color: var(--w3c-border-strong);
	font-size: 14px;
	font-weight: 400;
	line-height: 30px;
}

.w3c-home-catalog .w3c-course-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	justify-content: stretch;
	gap: 16px;
}

.w3c-home-catalog .w3c-course-card {
	flex-direction: row;
	align-items: stretch;
	min-height: 0;
}

.w3c-home-catalog .w3c-course-card__visual {
	flex: 0 0 132px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: auto;
	padding: 18px 12px;
	border-bottom: 0;
	border-right: 1px solid var(--w3c-tone-line, var(--w3c-border));
}

.w3c-home-catalog .w3c-course-card__visual::before,
.w3c-home-catalog .w3c-course-card__visual::after,
.w3c-home-catalog .w3c-course-card__code {
	display: none;
}

.w3c-home-catalog .w3c-course-card__icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
}

.w3c-home-catalog .w3c-course-card__icon .w3c-icon {
	width: 26px;
	height: 26px;
}

.w3c-home-catalog .w3c-course-card__badge {
	position: static;
	order: 2;
	max-width: 100%;
	line-height: 1.3;
	text-align: center;
}

.w3c-home-catalog .w3c-course-card__body {
	padding: 16px 18px 14px;
}

.w3c-home-catalog .w3c-course-card h3 {
	min-height: 0;
	font-size: 17px;
}

.w3c-home-catalog .w3c-course-card__meta {
	margin-top: 8px;
}

.w3c-home-catalog .w3c-course-card__footer {
	padding-top: 14px;
}

.w3c-section-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 26px;
}

.w3c-section-heading p {
	margin: 0 0 3px;
	color: var(--w3c-brand);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.w3c-section-heading h2 {
	clear: none;
	margin: 0;
	color: var(--w3c-ink);
	font-size: clamp(24px, 3vw, 28px);
	font-weight: 750;
	letter-spacing: -0.025em;
	line-height: 1.25;
}

.w3c-section-heading > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 38px;
	padding: 0 15px;
	border: 1px solid var(--w3c-border-strong);
	border-radius: 999px;
	background: var(--w3c-surface);
	color: var(--w3c-ink);
	font-size: 13px;
	font-weight: 700;
}

.w3c-section-heading > a:hover {
	border-color: var(--w3c-brand);
	background: var(--w3c-brand-soft);
	color: var(--w3c-brand-dark);
}

.w3c-course-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 292px));
	justify-content: space-between;
	gap: 42px 24px;
}

.w3c-course-card {
	display: flex;
	flex-direction: column;
	min-height: 354px;
	overflow: hidden;
	border: 1px solid var(--w3c-border);
	border-radius: 11px;
	background: var(--w3c-surface);
	color: var(--w3c-ink);
	box-shadow: var(--w3c-card-shadow);
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.w3c-course-card:hover,
.w3c-course-card:focus-visible {
	border-color: rgba(11, 107, 46, 0.5);
	color: var(--w3c-ink);
	text-decoration: none;
	transform: translateY(-3px);
	box-shadow: var(--w3c-card-shadow-hover);
}

.w3c-course-card__visual {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	height: 164px;
	overflow: hidden;
	padding: 17px;
	border-bottom: 1px solid var(--w3c-tone-line, var(--w3c-border));
	background: linear-gradient(135deg, var(--w3c-tone-soft, var(--w3c-brand-soft)), var(--w3c-tone-tint, var(--w3c-green-soft-2)));
	color: var(--w3c-tone-ink, var(--w3c-brand-dark));
}

.w3c-course-card__visual::before {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 84% 78%, rgba(255, 255, 255, 0.7), transparent 46%);
	content: "";
}

.w3c-course-card__visual::after {
	position: absolute;
	right: -34px;
	bottom: -82px;
	width: 220px;
	height: 220px;
	border: 0;
	border-radius: 50%;
	background: var(--w3c-tone-line, var(--w3c-green-line));
	box-shadow: none;
	opacity: 0.4;
	content: "";
}

/*
* Shared tone palette. Each tone is a single hue: a light surface, a slightly
* deeper tint, a border line, and a deep ink that keeps text readable on it.
* Course visuals, next-step tiles, and explore-topic tiles all consume it.
*/
.w3c-tone-indigo,
.w3c-must-explore__item--indigo,
.w3c-explore-topic--indigo {
	--w3c-tone-soft: var(--w3c-green-soft);
	--w3c-tone-tint: var(--w3c-green-soft-2);
	--w3c-tone-line: var(--w3c-green-line);
	--w3c-tone-ink: #3730a3;
}

.w3c-tone-blue,
.w3c-must-explore__item--blue,
.w3c-explore-topic--blue {
	--w3c-tone-soft: #eff6ff;
	--w3c-tone-tint: #dbeafe;
	--w3c-tone-line: #bfdbfe;
	--w3c-tone-ink: #1e40af;
}

.w3c-tone-teal,
.w3c-must-explore__item--teal,
.w3c-explore-topic--teal {
	--w3c-tone-soft: #f0fdfa;
	--w3c-tone-tint: #ccfbf1;
	--w3c-tone-line: #99f6e4;
	--w3c-tone-ink: #115e59;
}

.w3c-tone-cyan,
.w3c-must-explore__item--cyan,
.w3c-explore-topic--cyan {
	--w3c-tone-soft: #ecfeff;
	--w3c-tone-tint: #cffafe;
	--w3c-tone-line: #a5f3fc;
	--w3c-tone-ink: #155e75;
}

.w3c-tone-violet,
.w3c-must-explore__item--violet,
.w3c-explore-topic--violet {
	--w3c-tone-soft: #f5f3ff;
	--w3c-tone-tint: #ede9fe;
	--w3c-tone-line: #ddd6fe;
	--w3c-tone-ink: #5b21b6;
}

.w3c-tone-amber,
.w3c-must-explore__item--amber,
.w3c-explore-topic--amber {
	--w3c-tone-soft: #fffbeb;
	--w3c-tone-tint: #fef3c7;
	--w3c-tone-line: #fde68a;
	--w3c-tone-ink: #92400e;
}

.w3c-tone-rose,
.w3c-must-explore__item--rose,
.w3c-explore-topic--rose {
	--w3c-tone-soft: #fff1f2;
	--w3c-tone-tint: #ffe4e6;
	--w3c-tone-line: #fecdd3;
	--w3c-tone-ink: #9f1239;
}

.w3c-tone-green,
.w3c-must-explore__item--green,
.w3c-explore-topic--green {
	--w3c-tone-soft: #f0fdf4;
	--w3c-tone-tint: #dcfce7;
	--w3c-tone-line: #bbf7d0;
	--w3c-tone-ink: #166534;
}

.w3c-tone-plum,
.w3c-must-explore__item--plum,
.w3c-explore-topic--plum {
	--w3c-tone-soft: #fdf4ff;
	--w3c-tone-tint: #fae8ff;
	--w3c-tone-line: #f5d0fe;
	--w3c-tone-ink: #86198f;
}

.w3c-tone-olive,
.w3c-must-explore__item--olive,
.w3c-explore-topic--olive {
	--w3c-tone-soft: #f8fafc;
	--w3c-tone-tint: #e2e8f0;
	--w3c-tone-line: #cbd5e1;
	--w3c-tone-ink: #334155;
}

.w3c-course-card__badge {
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 2;
	padding: 5px 8px;
	border: 1px solid var(--w3c-tone-line, var(--w3c-border));
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--w3c-tone-ink, var(--w3c-brand-dark));
	box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.07em;
	line-height: 1;
	text-transform: uppercase;
}

.w3c-course-card__icon {
	position: relative;
	z-index: 2;
	display: inline-grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border: 1px solid var(--w3c-tone-line, var(--w3c-border));
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.88);
	color: var(--w3c-tone-ink, var(--w3c-brand-dark));
	box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08);
}

.w3c-course-card__icon .w3c-icon {
	width: 32px;
	height: 32px;
}

.w3c-course-card__code {
	position: relative;
	z-index: 2;
	padding: 5px 9px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.6);
	color: var(--w3c-tone-ink, var(--w3c-brand-dark));
	font-family: var(--w3c-font-mono);
	font-size: 13px;
	font-weight: 750;
	letter-spacing: 0.04em;
	line-height: 1;
}

.w3c-course-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 18px 16px 15px;
}

.w3c-course-card h3 {
	clear: none;
	min-height: 52px;
	margin: 0;
	color: var(--w3c-ink);
	font-size: 19px;
	font-weight: 730;
	letter-spacing: -0.018em;
	line-height: 1.35;
}

.w3c-course-card__meta {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 14px 0 0;
	color: var(--w3c-muted);
	font-size: 13px;
}

.w3c-course-card__meta .w3c-icon {
	width: 16px;
	height: 16px;
	color: #98a2b3;
}

.w3c-course-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 18px;
	color: var(--w3c-muted);
	font-size: 11px;
}

.w3c-course-card__footer strong {
	color: var(--w3c-green-dark);
	font-size: 12px;
	white-space: nowrap;
}

/* Homepage promotional and discovery banners. */
.w3c-practice-banner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(330px, 2fr);
	align-items: center;
	min-height: 220px;
	margin-top: 44px;
	padding: 30px 36px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 13px;
	background:
		radial-gradient(circle at 88% 12%, rgba(34, 211, 238, 0.22), transparent 38%),
		radial-gradient(circle at 6% 96%, rgba(129, 140, 248, 0.32), transparent 42%),
		linear-gradient(135deg, var(--w3c-navy) 0%, var(--w3c-navy-soft) 58%, var(--w3c-brand-dark) 100%);
	color: var(--w3c-green-soft-2);
	box-shadow: 0 22px 48px rgba(30, 27, 75, 0.28);
	isolation: isolate;
}

.w3c-practice-banner::before {
	display: none;
}

.w3c-practice-banner__copy,
.w3c-practice-banner__visual {
	position: relative;
	z-index: 1;
}

.w3c-practice-banner__copy {
	max-width: 560px;
}

.w3c-practice-banner__copy > p {
	margin: 0 0 5px;
	color: #a9dcb9;
	font-size: 12px;
	font-weight: 820;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.w3c-practice-banner__copy h3 {
	clear: none;
	max-width: 520px;
	margin: 0;
	color: #fff;
	font-size: clamp(28px, 2.2vw, 31px);
	font-weight: 780;
	letter-spacing: -0.035em;
	line-height: 1.12;
}

.w3c-practice-banner__copy > span {
	display: block;
	max-width: 540px;
	margin-top: 13px;
	color: var(--w3c-green-line);
	font-size: 15px;
	line-height: 1.55;
}

.w3c-practice-banner__copy > a,
.w3c-help-banner__copy > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	margin-top: 22px;
	padding: 0 18px;
	border-radius: 8px;
	background: var(--w3c-green);
	color: #fff;
	font-size: 13px;
	font-weight: 780;
	box-shadow: 0 8px 18px var(--w3c-green-ring);
}

.w3c-practice-banner__copy > a:hover,
.w3c-help-banner__copy > a:hover {
	background: var(--w3c-green-dark);
	color: #fff;
}

/* On the dark banner the button inverts so it stays the brightest element. */
.w3c-practice-banner__copy > a {
	background: #fff;
	color: var(--w3c-brand-dark);
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.28);
}

.w3c-practice-banner__copy > a:hover {
	background: var(--w3c-green-soft);
	color: var(--w3c-navy-soft);
}

.w3c-practice-banner a:focus-visible {
	outline-color: #fff;
}

.w3c-practice-banner__visual {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 0;
}

.w3c-practice-banner__window {
	width: min(100%, 330px);
	min-height: 160px;
	padding: 18px 20px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.07);
	color: #fff;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 16px 34px rgba(15, 23, 42, 0.28), inset 0 1px rgba(255, 255, 255, 0.12);
}

.w3c-practice-banner__dots {
	display: flex;
	gap: 6px;
	margin-bottom: 22px;
}

.w3c-practice-banner__dots span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fb7185;
}

.w3c-practice-banner__dots span:nth-child(2) {
	background: #fbbf24;
}

.w3c-practice-banner__dots span:nth-child(3) {
	background: #22d3ee;
}

.w3c-practice-banner__window small,
.w3c-practice-banner__window strong {
	display: block;
}

.w3c-practice-banner__window small {
	color: #67e8f9;
	font-family: var(--w3c-font-mono);
	font-size: 12px;
}

.w3c-practice-banner__window strong {
	margin-top: 4px;
	font-size: 21px;
	letter-spacing: -0.025em;
}

.w3c-practice-banner__languages {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

.w3c-practice-banner__languages span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 0 9px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--w3c-green-soft-2);
	font-family: var(--w3c-font-mono);
	font-size: 11px;
	font-weight: 800;
}

.w3c-must-explore {
	margin-top: 46px;
}

.w3c-must-explore > h3 {
	clear: none;
	margin: 0 0 20px;
	color: var(--w3c-ink);
	font-size: 24px;
	font-weight: 750;
	letter-spacing: -0.025em;
	line-height: 1.25;
}

.w3c-must-explore__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.w3c-must-explore__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
	min-height: 64px;
	padding: 14px 16px;
	overflow: hidden;
	border: 1px solid var(--w3c-tone-line, var(--w3c-border));
	border-radius: 12px;
	background: linear-gradient(135deg, var(--w3c-surface), var(--w3c-tone-soft, var(--w3c-brand-soft)));
	color: var(--w3c-tone-ink, var(--w3c-brand-dark));
	box-shadow: var(--w3c-card-shadow);
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.w3c-must-explore__item::after {
	display: none;
}

.w3c-must-explore__item strong,
.w3c-must-explore__item > span {
	position: relative;
	z-index: 1;
}

.w3c-must-explore__item strong {
	font-size: 15px;
	font-weight: 740;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.w3c-must-explore__item > span {
	font-size: 20px;
	line-height: 1;
}

.w3c-must-explore__item:hover,
.w3c-must-explore__item:focus-visible {
	color: var(--w3c-tone-ink, var(--w3c-brand-dark));
	text-decoration: none;
	transform: translateY(-3px);
	box-shadow: var(--w3c-card-shadow-hover);
}

.w3c-home-discover {
	padding: 64px 24px 74px;
	border-top: 1px solid var(--w3c-border);
	border-bottom: 1px solid var(--w3c-border);
	background: var(--w3c-surface);
}

.w3c-home-discover > .w3c-container {
	max-width: 1042px;
}

.w3c-help-banner {
	padding: 31px;
	overflow: hidden;
	border: 1px solid var(--w3c-green-line);
	border-radius: 16px;
	background:
		radial-gradient(circle at 88% 18%, rgba(207, 250, 254, 0.55), transparent 34%),
		linear-gradient(135deg, var(--w3c-green-soft) 0%, var(--w3c-surface) 62%);
	box-shadow: var(--w3c-card-shadow);
}

.w3c-help-banner__main {
	display: grid;
	grid-template-columns: minmax(0, 47%) minmax(0, 53%);
	align-items: center;
	gap: 18px;
}

.w3c-help-banner__copy {
	padding: 8px 0 22px;
}

.w3c-help-banner__copy > p,
.w3c-explore-topics > header p {
	margin: 0 0 6px;
	color: var(--w3c-brand);
	font-size: 12px;
	font-weight: 820;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.w3c-help-banner__copy h2 {
	clear: none;
	max-width: 460px;
	margin: 0;
	color: #101828;
	font-size: clamp(32px, 3.5vw, 42px);
	font-weight: 780;
	letter-spacing: -0.04em;
	line-height: 1.13;
}

.w3c-help-banner__copy > span {
	display: block;
	max-width: 470px;
	margin-top: 16px;
	color: #475467;
	font-size: 15px;
	line-height: 1.65;
}

.w3c-help-banner__visual {
	position: relative;
	min-height: 268px;
	background-image: radial-gradient(#dbe4f8 1px, transparent 1px);
	background-size: 16px 16px;
}

.w3c-help-banner__node {
	position: absolute;
	display: grid;
	place-items: center;
	border: 5px solid #fff;
	border-radius: 50%;
	color: var(--w3c-node-ink, var(--w3c-green-dark));
	font-family: var(--w3c-font-mono);
	font-size: 18px;
	font-weight: 850;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12), 0 0 0 2px var(--w3c-node-line, var(--w3c-green-line));
}

.w3c-help-banner__node--api {
	--w3c-node-ink: #164e63;
	--w3c-node-line: #a5f3fc;
	top: 28px;
	left: 43%;
	width: 96px;
	height: 96px;
	background: linear-gradient(135deg, #ecfeff, #cffafe);
}

.w3c-help-banner__node--ai {
	--w3c-node-ink: #581c87;
	--w3c-node-line: #ddd6fe;
	right: 15%;
	bottom: 24px;
	width: 104px;
	height: 104px;
	background: linear-gradient(135deg, #faf5ff, #ede9fe);
}

.w3c-help-banner__node--db {
	--w3c-node-ink: #1e3a8a;
	--w3c-node-line: #bfdbfe;
	left: 21%;
	bottom: 25px;
	width: 70px;
	height: 70px;
	background: linear-gradient(135deg, #eff6ff, var(--w3c-green-soft-2));
	font-size: 15px;
}

.w3c-help-banner__bubble {
	position: absolute;
	z-index: 2;
	max-width: 158px;
	padding: 10px 12px;
	border: 1px solid var(--w3c-border);
	border-radius: 12px;
	background: var(--w3c-surface);
	color: var(--w3c-muted);
	font-size: 11px;
	line-height: 1.45;
	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.w3c-help-banner__bubble--one {
	top: 6px;
	left: 7%;
}

.w3c-help-banner__bubble--two {
	top: 119px;
	right: 0;
}

.w3c-help-banner__features {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin-top: 12px;
}

.w3c-help-banner__feature {
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: 58px;
	gap: 10px;
	padding: 9px 11px;
	border: 1px solid var(--w3c-border);
	border-radius: 10px;
	background: var(--w3c-surface);
}

.w3c-help-banner__feature > span {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	min-width: 36px;
	height: 36px;
	padding: 0 6px;
	border-radius: 8px;
	background: var(--w3c-brand-soft);
	color: var(--w3c-brand-dark);
	font-family: var(--w3c-font-mono);
	font-size: 10px;
	font-weight: 850;
}

.w3c-help-banner__feature:nth-child(2) > span {
	background: #eff6ff;
	color: #1d4ed8;
}

.w3c-help-banner__feature:nth-child(3) > span {
	background: #f5f3ff;
	color: #6d28d9;
}

.w3c-help-banner__feature:nth-child(4) > span {
	background: #fff7ed;
	color: #c2410c;
}

.w3c-help-banner__feature strong {
	min-width: 0;
	color: #344054;
	font-size: 12px;
	font-weight: 690;
	line-height: 1.35;
}

.w3c-explore-topics {
	margin-top: 54px;
}

.w3c-explore-topics > header {
	margin-bottom: 24px;
}

.w3c-explore-topics > header h2 {
	clear: none;
	margin: 0;
	color: var(--w3c-ink);
	font-size: clamp(24px, 3vw, 28px);
	font-weight: 750;
	letter-spacing: -0.025em;
	line-height: 1.25;
}

.w3c-explore-topics__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.w3c-explore-topic {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-direction: column;
	min-height: 128px;
	gap: 14px;
	padding: 18px 18px 16px;
	overflow: hidden;
	border: 1px solid var(--w3c-tone-line, var(--w3c-border));
	border-radius: 12px;
	background: linear-gradient(160deg, var(--w3c-tone-soft, var(--w3c-brand-soft)), var(--w3c-tone-tint, var(--w3c-green-soft-2)));
	color: var(--w3c-tone-ink, var(--w3c-brand-dark));
	text-align: left;
	box-shadow: var(--w3c-card-shadow);
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.w3c-explore-topic::before,
.w3c-explore-topic::after {
	display: none;
}

.w3c-explore-topic::before {
	top: -115px;
	right: -58px;
	width: 260px;
	height: 260px;
}

.w3c-explore-topic::after {
	right: 29px;
	bottom: -105px;
	width: 210px;
	height: 210px;
}

.w3c-explore-topic strong,
.w3c-explore-topic > span {
	position: relative;
	z-index: 1;
}

.w3c-explore-topic strong {
	font-size: 18px;
	font-weight: 720;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.w3c-explore-topic > span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 700;
}

.w3c-explore-topic:hover,
.w3c-explore-topic:focus-visible {
	color: var(--w3c-tone-ink, var(--w3c-brand-dark));
	text-decoration: none;
	transform: translateY(-3px);
	box-shadow: var(--w3c-card-shadow-hover);
}

.w3c-home-learn {
	background: transparent;
}

.w3c-tutorial-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.w3c-tutorial-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--w3c-border);
	border-radius: 11px;
	background: var(--w3c-surface);
	box-shadow: var(--w3c-card-shadow);
	transition: box-shadow 180ms ease, border-color 180ms ease;
}

.w3c-tutorial-card:hover,
.w3c-tutorial-card:focus-within {
	border-color: rgba(11, 107, 46, 0.5);
	box-shadow: var(--w3c-card-shadow-hover);
}

.w3c-tutorial-card__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	padding: 12px 18px;
	overflow: hidden;
	border-bottom: 1px solid var(--w3c-green-line);
	background: linear-gradient(135deg, var(--w3c-green-soft), #e0f2fe);
	color: var(--w3c-brand-dark);
}

.w3c-tutorial-card__visual::after {
	display: none;
}

.w3c-tutorial-card__visual > .w3c-icon {
	width: 22px;
	height: 22px;
}

.w3c-tutorial-card__visual small {
	position: relative;
	z-index: 1;
	max-width: 58%;
	font-size: 11px;
	font-weight: 750;
	letter-spacing: 0.05em;
	line-height: 1.2;
	text-align: right;
	text-transform: uppercase;
}

.w3c-tutorial-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 18px;
}


.w3c-tutorial-card h3 {
	clear: none;
	margin: 0;
	font-size: 18px;
	font-weight: 720;
	letter-spacing: -0.015em;
	line-height: 1.35;
}

.w3c-tutorial-card h3 a {
	color: var(--w3c-ink);
}

.w3c-tutorial-card h3 a:hover {
	color: var(--w3c-brand-dark);
}

.w3c-tutorial-card__body > p {
	margin: 11px 0 0;
	color: var(--w3c-muted);
	font-size: 14px;
	line-height: 1.55;
}

.w3c-tutorial-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 18px;
	font-size: 12px;
}

.w3c-tutorial-card__footer time {
	color: var(--w3c-muted);
}

.w3c-tutorial-card__footer a {
	color: var(--w3c-green-dark);
	font-weight: 750;
}

.w3c-pagination {
	margin-top: 30px;
}

.w3c-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.w3c-pagination ul.page-numbers li {
	margin: 0;
}

.w3c-pagination a,
.w3c-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	padding: 0 11px;
	border: 1px solid var(--w3c-border);
	border-radius: 7px;
	background: #fff;
	color: var(--w3c-text);
	font-size: 13px;
	font-weight: 700;
}

.w3c-pagination a:hover,
.w3c-pagination .current {
	border-color: var(--w3c-brand);
	background: var(--w3c-brand);
	color: #fff;
}

.w3c-home-services {
	position: relative;
	padding: 50px 24px 70px;
	background: transparent;
	color: var(--w3c-text);
}

.w3c-home-services::before,
.w3c-home-services::after {
	display: none;
}

.w3c-home-services::before {
	top: 56px;
	left: -130px;
	width: 320px;
	height: 320px;
	background: var(--w3c-brand-ring);
}

.w3c-home-services::after {
	right: -160px;
	bottom: -190px;
	width: 420px;
	height: 420px;
	background: rgba(99, 102, 241, 0.1);
}

.w3c-home-services__mesh {
	display: none;
}

.w3c-home-services > .w3c-container {
	max-width: 1042px;
}

.w3c-services-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px;
	margin-bottom: 26px;
}

.w3c-services-intro__copy {
	max-width: 620px;
}

.w3c-services-intro__eyebrow,
.w3c-services-cta__eyebrow {
	display: block;
	margin: 0 0 3px;
	color: var(--w3c-brand);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.w3c-services-intro__copy h2 {
	clear: none;
	margin: 0;
	color: var(--w3c-ink);
	font-size: clamp(24px, 3vw, 28px);
	font-weight: 750;
	letter-spacing: -0.025em;
	line-height: 1.25;
}

.w3c-services-intro__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 38px;
	padding: 0 9px 0 15px;
	border: 1px solid var(--w3c-border-strong);
	border-radius: 999px;
	background: var(--w3c-surface);
	color: var(--w3c-ink);
	font-size: 13px;
	font-weight: 700;
	box-shadow: none;
	transition: border-color 180ms ease, color 180ms ease;
}

.w3c-services-intro__action > span:last-child {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--w3c-secondary-soft);
	color: var(--w3c-secondary-dark);
	font-size: 14px;
}

.w3c-services-bento {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 20px;
}

.w3c-service-card {
	--w3c-card-accent: #0e7490;
	--w3c-card-tint: rgba(14, 116, 144, 0.11);
	--w3c-card-line: rgba(14, 116, 144, 0.2);
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	grid-column: span 4;
	min-height: 222px;
	padding: 22px;
	overflow: hidden;
	border: 1px solid var(--w3c-border);
	border-radius: 11px;
	background:
		radial-gradient(circle at 100% 0%, var(--w3c-card-tint), transparent 42%),
		var(--w3c-surface);
	color: var(--w3c-text);
	text-decoration: none;
	box-shadow: var(--w3c-card-shadow);
	transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.w3c-service-card:focus-visible {
	border-color: var(--w3c-card-accent);
	outline: 3px solid var(--w3c-card-tint);
	outline-offset: 3px;
	color: var(--w3c-text);
	text-decoration: none;
	box-shadow: var(--w3c-card-shadow-hover);
}

.w3c-service-card--ai {
	--w3c-card-accent: #6d28d9;
	--w3c-card-tint: rgba(139, 92, 246, 0.13);
	--w3c-card-line: rgba(124, 58, 237, 0.16);
}

.w3c-service-card--agents {
	--w3c-card-accent: #a21caf;
	--w3c-card-tint: rgba(217, 70, 239, 0.11);
	--w3c-card-line: rgba(192, 38, 211, 0.18);
}

.w3c-service-card--architecture {
	--w3c-card-accent: #0369a1;
	--w3c-card-tint: rgba(14, 165, 233, 0.13);
	--w3c-card-line: rgba(2, 132, 199, 0.16);
}

.w3c-service-card--security {
	--w3c-card-accent: #be123c;
	--w3c-card-tint: rgba(244, 63, 94, 0.1);
	--w3c-card-line: rgba(225, 29, 72, 0.17);
}

.w3c-service-card--consulting {
	--w3c-card-accent: #b45309;
	--w3c-card-tint: rgba(245, 158, 11, 0.12);
	--w3c-card-line: rgba(217, 119, 6, 0.18);
	grid-column: span 4;
	min-height: 222px;
}

.w3c-service-card::before {
	display: none;
}

.w3c-service-card__header {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 14px;
}

.w3c-service-card__icon {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	min-width: 48px;
	height: 48px;
	padding: 0 10px;
	border: 1px solid var(--w3c-card-line);
	border-radius: 10px;
	background: var(--w3c-card-tint);
	color: var(--w3c-card-accent);
	font-family: var(--w3c-font-mono);
	font-size: 12px;
	font-weight: 850;
	box-shadow: none;
}

.w3c-service-card__index {
	display: block;
	margin-bottom: 4px;
	color: var(--w3c-card-accent);
	font-family: var(--w3c-font-mono);
	font-size: 10px;
	font-weight: 750;
	letter-spacing: 0.12em;
}

.w3c-service-card h3 {
	clear: none;
	margin: 0;
	color: var(--w3c-ink);
	font-size: 20px;
	font-weight: 720;
	letter-spacing: -0.025em;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.w3c-service-card > p {
	position: relative;
	z-index: 1;
	max-width: 560px;
	margin: 16px 0 0;
	color: var(--w3c-muted);
	font-size: 14px;
	line-height: 1.62;
}

.w3c-service-card__tags {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: auto 0 0;
	padding: 19px 0 0;
	list-style: none;
}

.w3c-service-card__tags li {
	margin: 0;
	padding: 5px 9px;
	border: 1px solid var(--w3c-card-line);
	border-radius: 999px;
	background: var(--w3c-card-tint);
	color: var(--w3c-card-accent);
	font-size: 11px;
	font-weight: 680;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.w3c-services-cta {
	position: relative;
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	min-height: 104px;
	gap: 30px;
	margin: 0;
	padding: 22px 24px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	background:
		radial-gradient(circle at 92% 12%, rgba(34, 211, 238, 0.22), transparent 34%),
		linear-gradient(135deg, var(--w3c-navy) 0%, var(--w3c-navy-soft) 58%, var(--w3c-brand-dark) 100%);
	color: var(--w3c-green-line);
	box-shadow: 0 22px 48px rgba(30, 27, 75, 0.28);
}

.w3c-services-cta::before {
	display: none;
}

.w3c-services-cta__copy,
.w3c-services-cta > a {
	position: relative;
	z-index: 1;
}

.w3c-services-cta__eyebrow {
	margin-bottom: 5px;
	color: #a9dcb9;
}

.w3c-services-cta__copy h3 {
	clear: none;
	margin: 0;
	color: #fff;
	font-size: 20px;
	font-weight: 740;
	letter-spacing: -0.02em;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.w3c-services-cta__description {
	margin: 7px 0 0;
	color: var(--w3c-green-line);
	font-size: 14px;
}

.w3c-services-cta > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 13px;
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 10px 0 18px;
	border: 1px solid #fff;
	border-radius: 999px;
	background: #fff;
	color: var(--w3c-brand-dark);
	font-size: 13px;
	font-weight: 820;
	box-shadow: none;
	transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.w3c-services-cta > a > span:last-child {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--w3c-brand-soft);
	font-size: 16px;
}

.w3c-services-intro__action:focus-visible {
	outline: 3px solid var(--w3c-brand);
	outline-offset: 3px;
	box-shadow: 0 0 0 4px var(--w3c-brand-ring);
}

.w3c-services-cta > a:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}

@media (hover: hover) and (pointer: fine) {
	.w3c-services-intro__action:hover {
		border-color: var(--w3c-brand);
		background: rgba(255, 255, 255, 0.9);
		color: var(--w3c-brand-dark);
	}

	.w3c-service-card:hover {
		border-color: var(--w3c-card-accent);
		color: var(--w3c-text);
		text-decoration: none;
		box-shadow: var(--w3c-card-shadow-hover);
		transform: translateY(-3px);
	}

	.w3c-services-cta > a:hover {
		border-color: var(--w3c-green-soft);
		background: var(--w3c-green-soft);
		color: var(--w3c-navy-soft);
	}
}

@media (forced-colors: active) {
	.w3c-home-services {
		background: Canvas;
		color: CanvasText;
	}

	.w3c-home-services::before,
	.w3c-home-services::after,
	.w3c-home-services__mesh,
	.w3c-service-card::before,
	.w3c-services-cta::before {
		display: none;
	}

	.w3c-service-card,
	.w3c-services-intro__action,
	.w3c-services-cta {
		border: 1px solid CanvasText;
		background: Canvas;
		box-shadow: none;
		color: CanvasText;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.w3c-services-intro__copy h2,
	.w3c-service-card h3,
	.w3c-service-card > p,
	.w3c-service-card__tags li,
	.w3c-services-cta__copy h3,
	.w3c-services-cta__description {
		color: CanvasText;
	}

	.w3c-services-intro__action,
	.w3c-services-cta > a {
		background: ButtonFace;
		color: ButtonText;
	}
}

/* Editable full-width canvas for the Engineering Service Pages. */
.w3c-service-page {
	box-sizing: border-box;
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 50px 24px 70px;
	background: #fff;
}

.w3c-service-page__content {
	width: min(100%, 1042px);
	margin: 0 auto;
}

.w3c-service-page__article {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.w3c-service-page__header {
	padding-bottom: 20px;
	border-bottom: 1px solid var(--w3c-border);
}

.w3c-service-page__eyebrow {
	margin: 0 0 4px;
	color: var(--w3c-brand);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.w3c-service-page__header h1 {
	clear: none;
	margin: 0;
	color: var(--w3c-ink);
	font-size: clamp(30px, 4vw, 42px);
	font-weight: 760;
	letter-spacing: -0.035em;
	line-height: 1.18;
}

.w3c-service-page .entry-content {
	margin-top: 28px;
}

@media screen and (max-width: 767px) {
	.w3c-service-page {
		padding: 44px 16px 54px;
	}
}

/* Full-width directory footer inspired by the supplied reference. */
#iop-footer.w3c-footer-widgets,
#iop-footer.w3c-footer-widgets *,
#colophon.w3c-site-footer,
#colophon.w3c-site-footer * {
	box-sizing: border-box;
}

#iop-footer.w3c-footer-widgets {
	float: none;
	clear: both;
	width: 100%;
	margin: 0;
	padding: 34px 24px;
	border-top: 1px solid var(--w3c-border);
	background: var(--w3c-surface-soft);
}

.w3c-footer-widgets__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 28px;
	width: min(100%, 1180px);
	margin: 0 auto;
}

#iop-footer.w3c-footer-widgets .footer-widget {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

#colophon.w3c-site-footer {
	float: none;
	clear: both;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--w3c-border);
	background:
		radial-gradient(circle at 8% 0%, rgba(224, 231, 255, 0.62), transparent 26%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 255, 0.94));
	color: var(--w3c-text);
	font-family: var(--w3c-font-ui);
	text-align: left;
}

body:not(.w3c-full-canvas) #page.site {
	overflow: visible;
}

body:not(.w3c-full-canvas) #iop-footer.w3c-footer-widgets,
body:not(.w3c-full-canvas) #colophon.w3c-site-footer {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

.w3c-site-footer a {
	text-decoration: none;
}

.w3c-site-footer a:focus-visible,
.w3c-site-footer button:focus-visible {
	outline: 3px solid var(--w3c-brand);
	outline-offset: 3px;
}

.w3c-footer-directory {
	display: grid;
	grid-template-columns: minmax(270px, 1.35fr) minmax(0, 4.65fr);
	gap: clamp(42px, 4vw, 72px);
	width: min(calc(100% - 48px), 1700px);
	margin: 0 auto;
	padding: 40px 0 34px;
}

.w3c-footer-brand {
	min-width: 0;
}

.w3c-footer-brand__link {
	display: inline-flex;
	align-items: center;
	min-height: 54px;
	color: var(--w3c-ink);
	font-size: 22px;
	font-weight: 780;
	letter-spacing: -0.025em;
}

.w3c-footer-brand__link img {
	display: block;
	width: auto;
	max-width: 230px;
	height: 62px;
	margin: 0;
	object-fit: contain;
	object-position: left center;
}

.w3c-footer-brand__mark {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-right: 10px;
	border-radius: 50%;
	background: var(--w3c-brand);
	color: #fff;
	font-size: 16px;
	font-weight: 850;
	letter-spacing: -0.05em;
}

.w3c-footer-brand > p {
	max-width: 320px;
	margin: 13px 0 0;
	color: #475467;
	font-size: 14px;
	line-height: 1.6;
}

.w3c-footer-contact {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	margin-top: 9px;
	color: var(--w3c-brand-dark);
	font-size: 14px;
	font-weight: 720;
	transition: color 150ms ease;
}

#colophon.w3c-site-footer .w3c-footer-contact:hover,
#colophon.w3c-site-footer .w3c-footer-contact:focus {
	color: var(--w3c-footer-link-hover);
	text-decoration: none;
}

.w3c-footer-contact svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.w3c-footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 15px;
}

.w3c-footer-social a {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--w3c-glass-border);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
	color: var(--w3c-brand-dark);
	font-size: 18px;
	box-shadow: 0 7px 18px rgba(0, 0, 0, 0.08);
	transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.w3c-footer-social a:hover {
	background: var(--w3c-brand);
	color: #fff;
	transform: translateY(-2px);
}

.w3c-footer-social .w3c-icon {
	width: 18px;
	height: 18px;
}

.w3c-footer-social a:focus-visible {
	outline-color: var(--w3c-focus);
}

.w3c-footer-navigation {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 52px);
	min-width: 0;
}

.w3c-footer-group {
	min-width: 0;
}

.w3c-footer-group h2 {
	clear: none;
	margin: 5px 0 8px;
	color: var(--w3c-brand);
	font-size: 14px;
	font-weight: 780;
	letter-spacing: 0.01em;
	line-height: 1.4;
}

.w3c-footer-toggle {
	display: none;
}

.w3c-footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.w3c-footer-menu li {
	margin: 0;
}

.w3c-footer-menu a {
	display: inline-flex;
	align-items: center;
	min-height: 27px;
	padding: 2px 0;
	color: #5b6470;
	font-size: 13.5px;
	font-weight: 450;
	line-height: 1.45;
	text-decoration: none;
	transition: color 150ms ease;
}

#colophon.w3c-site-footer .w3c-footer-menu a:hover,
#colophon.w3c-site-footer .w3c-footer-menu a:focus {
	color: var(--w3c-footer-link-hover);
	text-decoration: none;
}

.w3c-footer-panel[hidden] {
	display: none;
}

.w3c-footer-bottom {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	width: min(calc(100% - 48px), 1700px);
	margin: 0 auto;
	padding: 14px 0 16px;
	border-top: 1px solid var(--w3c-border);
	color: #667085;
	font-size: 13px;
	line-height: 1.55;
}

.w3c-footer-copyright,
.w3c-footer-theme-credit {
	flex: 0 0 auto;
	margin: 0;
}

.w3c-footer-utility {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0 5px;
	text-align: right;
}

.w3c-footer-utility a,
.w3c-footer-theme-credit a {
	color: #52606d;
	text-decoration: none;
	transition: color 150ms ease;
}

#colophon.w3c-site-footer .w3c-footer-utility a:hover,
#colophon.w3c-site-footer .w3c-footer-utility a:focus,
#colophon.w3c-site-footer .w3c-footer-theme-credit a:hover,
#colophon.w3c-site-footer .w3c-footer-theme-credit a:focus {
	color: var(--w3c-footer-link-hover);
	text-decoration: none;
}

@media screen and (max-width: 1100px) {
	.w3c-header-inner {
		grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
		width: min(100% - 36px, 1040px);
	}

	.w3c-search-panel {
		width: 210px;
	}



	.w3c-site-header.is-search-open .w3c-header-search {
		position: absolute;
		top: 6px;
		right: 14px;
		left: 14px;
		z-index: 60;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: auto;
		min-height: 40px;
		background: #fff;
	}

	.w3c-site-header.is-search-open .w3c-search-panel {
		width: 100%;
		max-width: 420px;
	}

	.w3c-site-header.is-search-open .w3c-primary-nav,
	.w3c-site-header.is-search-open .w3c-header-social,
	.w3c-site-header.is-search-open .w3c-nav-toggle {
		visibility: hidden;
		pointer-events: none;
	}

	.w3c-primary-menu {
		gap: 24px;
	}

	.w3c-footer-directory {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.w3c-footer-brand > p {
		max-width: 520px;
	}
}

@media screen and (max-width: 959px) {
	.w3c-course-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: stretch;
		gap: 22px;
	}

	.w3c-practice-banner {
		grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
		min-height: 220px;
		margin-top: 40px;
		padding: 30px;
	}

	.w3c-practice-banner__copy h3 {
		font-size: clamp(27px, 4vw, 32px);
	}

	.w3c-practice-banner__window {
		min-height: 160px;
	}

	.w3c-must-explore__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.w3c-help-banner__main {
		grid-template-columns: minmax(0, 1fr);
	}

	.w3c-help-banner__copy {
		padding-right: 24px;
	}

	.w3c-help-banner__visual {
		min-height: 240px;
	}

	.w3c-help-banner__features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.w3c-explore-topics__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.w3c-tutorial-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.w3c-home-catalog .w3c-course-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.w3c-home-services {
		padding-top: 50px;
		padding-bottom: 64px;
	}

	.w3c-services-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
		gap: 18px;
	}

	.w3c-service-card,
	.w3c-service-card--consulting {
		grid-column: auto;
		grid-row: auto;
		min-height: 222px;
	}

	.w3c-services-cta {
		grid-column: 1 / -1;
	}

	.w3c-services-cta {
		grid-row: auto;
		min-height: 104px;
	}

	.w3c-footer-navigation {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px 40px;
	}
}

@media screen and (max-width: 900px) {
	:root {
		--w3c-header-height: 96px;
		--w3c-header-total-height: 96px;
		--w3c-header-main-height: 54px;
	}

	.w3c-header-inner {
		grid-template-columns: auto 1fr auto;
		height: 53px;
	}

	.w3c-header-start {
		grid-column: 1;
	}

	.w3c-search-fallback {
		width: 160px;
	}

	.w3c-primary-nav {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 70;
		width: 100%;
		max-height: calc(100vh - var(--w3c-header-height));
		overflow-y: auto;
		border-top: 1px solid var(--w3c-border);
		border-bottom: 1px solid var(--w3c-border);
		background: #fff;
		box-shadow: 0 18px 30px rgba(15, 23, 42, 0.13);
	}

	.js .w3c-primary-nav {
		display: none;
	}

	.js .w3c-primary-nav.is-open {
		display: block;
	}

	.w3c-primary-menu {
		display: block;
		width: min(100% - 32px, 720px);
		margin: 0 auto;
		padding: 8px 0;
	}

	.w3c-primary-menu > li {
		display: block;
	}

	.w3c-primary-menu > li > a {
		display: flex;
		min-height: 48px;
		padding: 0 52px 0 8px;
		border-bottom: 1px solid #eef1f4;
		font-size: 15px;
	}

	.w3c-primary-menu > li:last-child > a {
		border-bottom: 0;
	}

	.w3c-primary-menu > li.menu-item-has-children > a::after {
		display: none;
	}

	.w3c-primary-menu .sub-menu {
		position: static;
		visibility: visible;
		width: 100%;
		min-width: 0;
		max-width: none;
		max-height: none;
		padding: 4px 8px 9px 24px;
		border: 0;
		border-radius: 0;
		background: var(--w3c-surface-soft);
		box-shadow: none;
		opacity: 1;
		overflow: visible;
		transform: none;
	}

	.w3c-primary-menu .sub-menu .sub-menu {
		position: static;
		visibility: visible;
		width: 100%;
		max-width: none;
		max-height: none;
		padding: 4px 8px 9px 16px;
		border: 0;
		border-left: 2px solid rgba(51, 70, 184, 0.22);
		border-radius: 0;
		background: #fff;
		box-shadow: none;
		opacity: 1;
		overflow: visible;
		transform: none;
	}

	.js .w3c-primary-menu .sub-menu {
		display: none;
	}

	.js .w3c-primary-menu .menu-item-has-children.is-submenu-open > .sub-menu {
		display: block;
		visibility: visible;
		opacity: 1;
		transform: none;
	}

	.w3c-primary-menu .sub-menu a {
		padding: 10px 12px;
	}

	.w3c-primary-menu .sub-menu > .menu-item-has-children > a {
		padding-right: 52px;
		font-weight: 700;
	}

	.w3c-primary-menu .sub-menu .sub-menu a {
		min-height: 40px;
		padding-left: 16px;
		font-size: 13px;
	}

	.js .w3c-submenu-toggle {
		position: absolute;
		top: 4px;
		right: 0;
		display: inline-grid;
		place-items: center;
		width: 40px;
		height: 40px;
		margin: 0;
		padding: 0;
		border: 1px solid transparent;
		border-radius: 7px;
		background: transparent;
		color: var(--w3c-ink);
		cursor: pointer;
	}

	.w3c-submenu-toggle::before {
		width: 8px;
		height: 8px;
		margin-top: 0;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		content: "";
		transform: translateY(-2px) rotate(45deg);
		transition: transform 160ms ease;
	}

	.w3c-submenu-toggle[aria-expanded="true"]::before {
		margin-top: 0;
		transform: translateY(2px) rotate(225deg);
	}

	.w3c-primary-menu .sub-menu > .menu-item-has-children > .w3c-submenu-toggle {
		top: 4px;
		right: 0;
	}

	.w3c-primary-menu .sub-menu > .menu-item-has-children > .w3c-submenu-toggle::before {
		margin-top: 0;
		transform: translateY(-2px) rotate(45deg);
	}

	.w3c-primary-menu .sub-menu > .menu-item-has-children > .w3c-submenu-toggle[aria-expanded="true"]::before {
		margin-top: 0;
		transform: translateY(2px) rotate(225deg);
	}

	.w3c-header-actions {
		grid-column: 3;
	}

	.js .w3c-nav-toggle {
		display: inline-flex;
	}

	.no-js .w3c-header-inner {
		grid-template-rows: 53px auto;
		height: auto;
	}

	.no-js .w3c-primary-nav {
		position: static;
		grid-column: 1 / -1;
		grid-row: 2;
		display: block;
		max-height: none;
		border-bottom: 0;
		box-shadow: none;
	}

	.no-js .w3c-primary-menu {
		display: block;
		width: 100%;
		padding: 0 0 8px;
	}

	.no-js .w3c-primary-menu > li > a {
		padding-right: 8px;
	}

	.w3c-topic-nav,
	.w3c-topic-menu {
		height: 41px;
	}

	.w3c-topic-menu {
		justify-content: flex-start;
		min-width: 0;
		padding: 0 12px;
	}

	.w3c-topic-menu a {
		height: 41px;
		padding: 0 12px;
	}
}

@media screen and (min-width: 601px) and (max-width: 782px) {
	.admin-bar .w3c-site-header.site-header {
		top: 46px;
	}
}

@media screen and (max-width: 767px) {
	.w3c-site-header.is-search-open .w3c-header-search {
		right: 10px;
		left: 10px;
	}

	.w3c-header-inner {
		width: calc(100% - 28px);
	}

	.w3c-brand-logo {
		max-width: 82px;
		height: 40px;
	}

	.w3c-home-hero {
		padding: 34px 16px 30px;
	}

	.w3c-home-section {
		padding: 44px 16px 52px;
	}

	.w3c-home-courses {
		padding-top: 0;
	}

	.w3c-home-services {
		padding: 44px 16px 52px;
	}

	.w3c-practice-banner {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		min-height: 0;
		margin-top: 42px;
		padding: 26px 22px;
	}

	.w3c-practice-banner::before {
		top: auto;
		left: 0;
		width: 100%;
		height: 44%;
		clip-path: polygon(0 24%, 100% 0, 100% 100%, 0 100%);
	}

	.w3c-practice-banner__copy h3 {
		font-size: clamp(26px, 7vw, 31px);
	}

	.w3c-practice-banner__visual {
		justify-content: center;
		min-height: 160px;
	}

	.w3c-practice-banner__window {
		width: min(100%, 350px);
	}

	.w3c-must-explore {
		margin-top: 42px;
	}

	.w3c-must-explore__grid {
		gap: 14px;
	}

	.w3c-home-discover {
		padding: 44px 16px 54px;
	}

	.w3c-help-banner {
		padding: 23px;
	}

	.w3c-help-banner__copy {
		padding: 3px 0 18px;
	}

	.w3c-help-banner__copy h2 {
		font-size: clamp(29px, 8vw, 36px);
	}

	.w3c-help-banner__visual {
		min-height: 205px;
	}

	.w3c-explore-topics {
		margin-top: 48px;
	}

	.w3c-explore-topics__grid {
		gap: 12px;
	}

	.w3c-explore-topic {
		min-height: 112px;
		gap: 12px;
		padding: 16px;
	}

	.w3c-container {
		width: min(100%, 640px);
	}

	.w3c-section-heading {
		align-items: center;
		margin-bottom: 22px;
	}

	.w3c-services-intro {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 18px;
		margin-bottom: 24px;
	}

	.w3c-services-intro__action {
		justify-self: start;
	}

	.w3c-services-cta {
		align-items: start;
		flex-direction: column;
		gap: 22px;
	}

	.w3c-services-cta > a {
		justify-self: start;
	}

	.w3c-footer-directory {
		display: block;
		width: calc(100% - 32px);
		padding: 34px 0 24px;
	}

	.w3c-footer-brand__link img {
		max-width: 205px;
		height: 56px;
	}

	.w3c-footer-brand > p {
		max-width: 500px;
	}

	.w3c-footer-navigation {
		display: block;
		margin-top: 25px;
		border-top: 1px solid var(--w3c-border);
	}

	.w3c-footer-group {
		border-bottom: 1px solid var(--w3c-border);
	}

	.w3c-footer-group h2 {
		margin: 0;
	}

	.w3c-footer-group__label {
		display: none;
	}

	.js .w3c-footer-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		width: 100%;
		min-height: 50px;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--w3c-brand-dark);
		font-size: 14px;
		font-weight: 780;
		text-align: left;
		cursor: pointer;
	}

	.w3c-footer-toggle__icon {
		width: 8px;
		height: 8px;
		margin-right: 4px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 160ms ease;
	}

	.w3c-footer-toggle[aria-expanded="true"] .w3c-footer-toggle__icon {
		transform: translateY(2px) rotate(225deg);
	}

	.w3c-footer-panel {
		padding: 0 0 12px;
	}

	.w3c-footer-menu a {
		display: flex;
		min-height: 42px;
		padding: 7px 0;
		font-size: 14px;
	}

	.no-js .w3c-footer-group__label {
		display: block;
		padding: 15px 0 7px;
	}

	.no-js .w3c-footer-toggle {
		display: none;
	}

	.w3c-footer-bottom {
		align-items: flex-start;
		flex-direction: column;
		width: calc(100% - 32px);
		padding: 17px 0 20px;
	}

	.w3c-footer-utility {
		justify-content: flex-start;
		text-align: left;
	}
}

@media screen and (max-width: 639px) {
	.w3c-practice-banner {
		display: block;
		min-height: 0;
	}

	.w3c-practice-banner::before {
		left: auto;
		width: 57%;
		height: 47%;
		clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%);
	}

	.w3c-practice-banner__copy {
		padding-bottom: 0;
	}

	.w3c-practice-banner__copy > span {
		font-size: 14px;
	}

	.w3c-practice-banner__visual {
		position: static;
		width: 100%;
		min-height: 0;
		margin-top: 22px;
	}

	.w3c-practice-banner__window {
		width: 100%;
		min-height: 0;
		padding: 16px;
		transform: none;
	}

	.w3c-practice-banner__dots {
		margin-bottom: 13px;
	}

	.w3c-practice-banner__window strong {
		font-size: 18px;
	}

	.w3c-practice-banner__languages {
		gap: 5px;
		margin-top: 14px;
	}

	.w3c-practice-banner__languages span {
		min-height: 26px;
		padding: 0 8px;
		font-size: 10px;
	}

	.w3c-course-grid,
	.w3c-tutorial-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.w3c-services-bento {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.w3c-course-card,
	.w3c-tutorial-card,
	.w3c-practice-banner,
	.w3c-practice-banner__window,
	.w3c-must-explore__item,
	.w3c-help-banner,
	.w3c-help-banner__bubble,
	.w3c-help-banner__feature,
	.w3c-explore-topic,
	.w3c-service-card,
	.w3c-services-intro__action,
	.w3c-services-cta {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.w3c-service-card,
	.w3c-service-card--consulting,
	.w3c-services-cta {
		grid-column: auto;
		grid-row: auto;
		min-height: 0;
	}

	.w3c-course-card {
		min-height: 340px;
	}

	.w3c-course-card__visual {
		height: 156px;
	}

	.w3c-home-catalog .w3c-course-card {
		min-height: 0;
	}

	.w3c-home-catalog .w3c-course-card__visual {
		height: auto;
	}
}

@media screen and (max-width: 600px) {
	.admin-bar .w3c-site-header.site-header {
		top: 0;
	}
}

@media screen and (max-width: 480px) {
	.w3c-header-actions {
		gap: 6px;
	}

	.w3c-brand-logo {
		max-width: 68px;
	}

	.w3c-brand-name {
		display: none;
	}

	.w3c-header-social {
		position: static;
	}

	.w3c-social-panel {
		right: 14px;
		width: calc(100vw - 28px);
	}

	.w3c-section-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}

	.w3c-home-courses .w3c-section-heading {
		align-items: center;
		flex-direction: row;
		gap: 16px;
	}

	.w3c-home-hero h1 {
		font-size: 26px;
		letter-spacing: -0.02em;
		line-height: 1.25;
	}

	.w3c-home-hero__lede {
		font-size: 15px;
	}

	.w3c-home-hero__search {
		height: 50px;
		padding-left: 14px;
	}

	.w3c-home-hero__search button {
		height: 38px;
		padding: 0 14px;
	}

	.w3c-home-hero__links {
		gap: 4px 20px;
	}

	.w3c-home-hero__links a.is-primary {
		flex: 1 0 100%;
		margin-bottom: 4px;
	}

	.w3c-home-catalog .w3c-course-card__visual {
		flex-basis: 104px;
		padding: 14px 8px;
	}

	.w3c-course-card__footer {
		align-items: flex-start;
		flex-direction: column;
		gap: 5px;
	}

	.w3c-practice-banner__copy > a,
	.w3c-help-banner__copy > a {
		width: 100%;
	}

	.w3c-home-services {
		padding-top: 48px;
		padding-bottom: 54px;
	}

	.w3c-services-intro__copy h2 {
		font-size: clamp(24px, 8vw, 28px);
	}

	.w3c-services-intro__action,
	.w3c-services-cta > a {
		justify-self: stretch;
		width: 100%;
	}

	.w3c-service-card {
		padding: 22px;
		border-radius: 11px;
	}

	.w3c-services-cta {
		padding: 22px;
		border-radius: 12px;
	}

	.w3c-help-banner__node--api {
		left: 37%;
		width: 82px;
		height: 82px;
	}

	.w3c-help-banner__node--ai {
		right: 5%;
		width: 88px;
		height: 88px;
	}

	.w3c-help-banner__node--db {
		left: 8%;
	}

	.w3c-help-banner__bubble--one {
		left: 0;
	}

	.w3c-help-banner__bubble--two {
		right: 0;
		max-width: 122px;
	}

}

@media (prefers-reduced-motion: reduce) {
	.w3c-site-header,
	.w3c-site-header *,
	.w3c-home *,
	.w3c-site-footer * {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.w3c-services-intro__action,
	.w3c-service-card,
	.w3c-services-cta > a {
		transform: none !important;
	}
}

/*
 * Legacy content styles migrated from Appearance > Customize > Additional CSS.
 * Keeping these in the child theme makes the typography and classic templates
 * independent of the Customizer record while leaving the rebuilt W3C sections
 * free to use their more specific component typography.
 */
body {
	font-family: var(--w3c-font-ui);
	font-size: 15px;
}

.site-content article.sticky,
.entry-content table {
	font-family: inherit;
	font-size: 15px;
}

.widget-area .widget a {
	font-size: 14px;
}

.entry-content pre,
.comment-content pre {
	width: 90%;
	margin: 24px 0;
	padding: 14px;
	overflow: auto;
	border: 1px solid #ededed;
	border-radius: 10px;
	background: #efefef;
	color: #666;
	font-family: Consolas, Monaco, "Lucida Console", monospace;
	font-size: 14px;
	line-height: 1.514285714;
}

#jp-relatedposts {
	display: none !important;
}

.themonic-nav ul.nav-menu,
.themonic-nav div.nav-menu ul {
	background: linear-gradient(135deg, var(--w3c-brand-soft), var(--w3c-secondary-soft));
}

.widget-area .widget-title {
	background: linear-gradient(135deg, var(--w3c-brand-soft), var(--w3c-secondary-soft));
	color: var(--w3c-brand-dark);
}

.below-title-meta {
	display: none;
}

.entry-content p,
.entry-summary p,
.comment-content p {
	font-size: 15px;
}

.themonic-nav li a {
	color: var(--w3c-brand-dark);
	font-size: 15px;
	font-weight: bold;
	text-transform: none;
}

@media screen and (min-width: 767px) {
	.themonic-nav li ul li a {
		background: linear-gradient(135deg, var(--w3c-brand-soft), var(--w3c-secondary-soft));
		color: var(--w3c-brand-dark);
		font-size: 14px;
		font-weight: bold;
	}
}

/* -------------------------------------------------------------------------
* Hub pages (Learn, Courses) and the course-interest form.
* ---------------------------------------------------------------------- */
.w3c-home-hero__eyebrow {
	margin: 0 0 8px;
	color: var(--w3c-brand);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.w3c-hub .w3c-home-hero__lede p {
	margin: 0;
}

.w3c-hub .w3c-home-hero__lede p + p {
	margin-top: 10px;
}

.w3c-topic-chips {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}

.w3c-topic-chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 52px;
	padding: 10px 14px;
	border: 1px solid var(--w3c-border);
	border-radius: 10px;
	background: var(--w3c-surface-soft);
	color: var(--w3c-ink);
	font-size: 14px;
	font-weight: 650;
	transition: border-color 150ms ease, background-color 150ms ease;
}

.w3c-topic-chip span {
	flex: 0 0 auto;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--w3c-surface);
	color: var(--w3c-muted);
	font-size: 12px;
	font-weight: 700;
}

.w3c-topic-chip:hover,
.w3c-topic-chip:focus-visible {
	border-color: var(--w3c-brand);
	background: var(--w3c-brand-soft);
	color: var(--w3c-brand-dark);
}

.w3c-explore-topics--flush {
	margin-top: 0;
}

.w3c-notify {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: 20px 32px;
	margin-top: 28px;
	padding: 26px 28px;
	border: 1px solid var(--w3c-green-line);
	border-radius: 14px;
	background: linear-gradient(135deg, var(--w3c-green-soft) 0%, var(--w3c-surface) 62%);
	box-shadow: var(--w3c-card-shadow);
}

.w3c-notify__eyebrow {
	margin: 0 0 4px;
	color: var(--w3c-brand);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.w3c-notify__copy h3 {
	clear: none;
	margin: 0;
	color: var(--w3c-ink);
	font-size: 22px;
	font-weight: 740;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

.w3c-notify__copy > p:last-child {
	margin: 6px 0 0;
	color: var(--w3c-muted);
	font-size: 14px;
}

.w3c-notify__form {
	display: flex;
	gap: 8px;
	margin: 0;
}

.w3c-notify__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.w3c-notify__form input[type="email"] {
	flex: 1;
	min-width: 0;
	height: 46px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--w3c-border-strong);
	border-radius: 10px;
	background: var(--w3c-surface);
	color: var(--w3c-ink);
	font-size: 15px;
	box-shadow: none;
}

.w3c-notify__form input[type="email"]:focus {
	outline: 0;
	border-color: var(--w3c-green);
	box-shadow: 0 0 0 4px var(--w3c-green-ring);
}

.w3c-notify__form button {
	flex: 0 0 auto;
	height: 46px;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: 10px;
	background: var(--w3c-green);
	color: #fff;
	font-size: 14px;
	font-weight: 750;
	line-height: 1;
	cursor: pointer;
	transition: background-color 150ms ease;
}

.w3c-notify__form button:hover {
	background: var(--w3c-green-dark);
}

.w3c-notify__form button:focus-visible {
	outline: 3px solid var(--w3c-focus);
	outline-offset: 2px;
}

.w3c-notify__status {
	grid-column: 1 / -1;
	margin: 0;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
}

.w3c-notify__status--ok {
	background: var(--w3c-green-soft);
	color: var(--w3c-green-dark);
}

.w3c-notify__status--error {
	background: #fff1f2;
	color: #9f1239;
}

@media screen and (max-width: 767px) {
	.w3c-notify {
		grid-template-columns: minmax(0, 1fr);
		padding: 22px;
	}
}

@media screen and (max-width: 480px) {
	.w3c-notify__form {
		flex-direction: column;
	}

	.w3c-topic-chips {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
* Classic two-column pages (posts, archives, search, standard pages).
* Layout, typography and components are restyled here so the parent theme's
* hooks, ads, related posts, sidebar widgets and comments keep working.
* ---------------------------------------------------------------------- */
body.w3c-classic {
	background: var(--w3c-surface-soft);
	color: var(--w3c-text);
}

body.w3c-classic #page.site {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	overflow: visible;
	border: 0;
	background: transparent;
	box-shadow: none;
}

body.w3c-classic #main.wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	align-items: start;
	gap: 28px;
	margin: 28px auto 48px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

body.w3c-classic #main.wrapper > .clear {
	display: none;
}

/* Explicit placement: plugins may print extra wrappers inside #main. */
body.w3c-classic #primary.site-content {
	grid-column: 1;
	grid-row: 1;
}

body.w3c-classic #secondary.widget-area {
	grid-column: 2;
	grid-row: 1;
}

body.w3c-classic #main.wrapper > :not(#primary):not(#secondary) {
	grid-column: 1 / -1;
}

body.w3c-classic #primary.site-content {
	float: none;
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 32px 36px 36px;
	border: 1px solid var(--w3c-border);
	border-radius: 14px;
	background: var(--w3c-surface);
	box-shadow: var(--w3c-card-shadow);
	font-size: 16px;
	line-height: 1.7;
}

body.w3c-classic #secondary.widget-area {
	float: none;
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

body.w3c-classic .themonic-breadcrumb,
body.w3c-classic #breadcrumbs {
	margin: 0 0 14px;
	color: var(--w3c-muted);
	font-size: 13px;
}

body.w3c-classic .themonic-breadcrumb a,
body.w3c-classic #breadcrumbs a {
	color: var(--w3c-brand-dark);
	text-decoration: none;
}

body.w3c-classic .site-content article {
	margin: 0 0 28px;
	padding: 0 0 28px;
	border: 0;
	border-bottom: 1px solid var(--w3c-border);
}

body.w3c-classic .site-content article:last-of-type {
	border-bottom: 0;
}

body.w3c-classic .entry-header {
	margin-bottom: 18px;
}

body.w3c-classic .entry-title,
body.w3c-classic .archive-title,
body.w3c-classic .page-title {
	clear: none;
	margin: 0;
	color: var(--w3c-ink);
	font-weight: 750;
	letter-spacing: -0.02em;
	line-height: 1.25;
	text-transform: none;
}

body.w3c-classic h1.entry-title,
body.w3c-classic .archive-title,
body.w3c-classic .page-title {
	font-size: clamp(26px, 3.4vw, 34px);
}

body.w3c-classic .archive-header,
body.w3c-classic .page-header {
	margin: 0 0 24px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--w3c-border);
}

body.w3c-classic .archive-title span,
body.w3c-classic .page-title span {
	color: var(--w3c-brand-dark);
}

body.w3c-classic h2.entry-title {
	font-size: 22px;
}

body.w3c-classic h2.entry-title a {
	color: var(--w3c-ink);
	text-decoration: none;
}

body.w3c-classic h2.entry-title a:hover {
	color: var(--w3c-brand-dark);
}

body.w3c-classic .entry-content,
body.w3c-classic .entry-summary {
	color: var(--w3c-text);
}

body.w3c-classic .entry-content p,
body.w3c-classic .entry-summary p,
body.w3c-classic .entry-content li,
body.w3c-classic .comment-content p {
	font-size: 16px;
	line-height: 1.7;
}

body.w3c-classic .entry-content p {
	margin: 0 0 18px;
}

body.w3c-classic .entry-content h2,
body.w3c-classic .entry-content h3,
body.w3c-classic .entry-content h4 {
	margin: 32px 0 12px;
	color: var(--w3c-ink);
	font-weight: 720;
	letter-spacing: -0.015em;
	line-height: 1.3;
}

body.w3c-classic .entry-content h2 {
	font-size: 24px;
}

body.w3c-classic .entry-content h3 {
	font-size: 20px;
}

body.w3c-classic .entry-content h4 {
	font-size: 17px;
}

body.w3c-classic .entry-content a,
body.w3c-classic .entry-summary a {
	color: var(--w3c-brand-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

body.w3c-classic .entry-content a:hover,
body.w3c-classic .entry-summary a:hover {
	color: var(--w3c-brand);
}

body.w3c-classic .entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

body.w3c-classic .entry-content blockquote {
	margin: 20px 0;
	padding: 12px 18px;
	border-left: 4px solid var(--w3c-brand);
	border-radius: 0 8px 8px 0;
	background: var(--w3c-brand-soft);
	color: var(--w3c-text);
}

body.w3c-classic .entry-content code,
body.w3c-classic .comment-content code {
	padding: 1px 6px;
	border: 1px solid var(--w3c-border);
	border-radius: 5px;
	background: var(--w3c-surface-soft);
	color: var(--w3c-ink);
	font-family: var(--w3c-font-mono);
	font-size: 0.92em;
}

body.w3c-classic .entry-content pre,
body.w3c-classic .comment-content pre {
	box-sizing: border-box;
	width: 100%;
	margin: 20px 0 24px;
	padding: 18px 20px;
	overflow: auto;
	border: 0;
	border-radius: 10px;
	background: var(--w3c-navy);
	color: #e2e8f0;
	font-family: var(--w3c-font-mono);
	font-size: 14px;
	line-height: 1.6;
	tab-size: 4;
}

body.w3c-classic .entry-content pre code {
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: inherit;
}

body.w3c-classic .entry-content table {
	display: table;
	width: 100%;
	max-width: 100%;
	margin: 0 0 24px;
	border: 0;
	border-collapse: collapse;
	color: var(--w3c-text);
	font-size: 15px;
	line-height: 1.5;
}

body.w3c-classic .entry-content table th,
body.w3c-classic .entry-content table td {
	padding: 10px 12px;
	border: 1px solid var(--w3c-border);
	text-align: left;
	vertical-align: top;
}

body.w3c-classic .entry-content table th {
	background: var(--w3c-surface-soft);
	color: var(--w3c-ink);
	font-weight: 700;
}

body.w3c-classic .entry-content table tr:nth-child(even) td {
	background: #fbfcfe;
}

body.w3c-classic .excerpt-thumb:empty {
	display: none;
}

body.w3c-classic .read-more a {
	color: var(--w3c-green-dark);
	font-weight: 700;
	text-decoration: none;
}

body.w3c-classic .entry-meta {
	margin-top: 6px;
}

body.w3c-classic .entry-meta .categories,
body.w3c-classic .entry-meta .tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 8px;
}

body.w3c-classic .entry-meta .categories a,
body.w3c-classic .entry-meta .tags a {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 4px 10px;
	border: 1px solid var(--w3c-green-line);
	border-radius: 999px;
	background: var(--w3c-brand-soft);
	color: var(--w3c-brand-dark);
	font-size: 12px;
	font-weight: 650;
	line-height: 1.3;
	text-decoration: none;
	text-shadow: none;
}

body.w3c-classic .entry-meta .tags a {
	border-color: var(--w3c-border);
	background: var(--w3c-surface-soft);
	color: var(--w3c-text);
}

body.w3c-classic .entry-meta .categories a:hover,
body.w3c-classic .entry-meta .tags a:hover {
	border-color: var(--w3c-brand);
	color: var(--w3c-brand-dark);
}

body.w3c-classic .author-info {
	display: flex;
	gap: 14px;
	margin-top: 24px;
	padding: 16px 18px;
	border: 1px solid var(--w3c-border);
	border-radius: 12px;
	background: var(--w3c-surface-soft);
}

body.w3c-classic .author-info .author-avatar img {
	border-radius: 50%;
}

body.w3c-classic .author-description {
	font-size: 14px;
	line-height: 1.6;
}

body.w3c-classic .author-description p {
	margin: 4px 0 0;
}

body.w3c-classic .relatedposts {
	margin: 32px 0 0;
	padding: 20px 22px;
	border: 1px solid var(--w3c-border);
	border-radius: 12px;
	background: var(--w3c-surface-soft);
}

body.w3c-classic .relatedposts > p {
	margin: 0 0 12px;
	color: var(--w3c-brand);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.w3c-classic .relatedposts ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.w3c-classic .relatedposts li {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

body.w3c-classic .relatedcontent a {
	color: var(--w3c-ink);
	font-size: 15px;
	font-weight: 650;
	line-height: 1.4;
	text-decoration: none;
}

body.w3c-classic .relatedcontent a:hover {
	color: var(--w3c-brand-dark);
}

body.w3c-classic .nav-single,
body.w3c-classic .navigation {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 28px 0;
	padding: 16px 0;
	border-top: 1px solid var(--w3c-border);
	border-bottom: 1px solid var(--w3c-border);
}

body.w3c-classic .nav-single a,
body.w3c-classic .navigation a {
	color: var(--w3c-brand-dark);
	font-size: 14px;
	font-weight: 650;
	text-decoration: none;
}

body.w3c-classic .nav-single .nav-next {
	text-align: right;
}

body.w3c-classic .themonic-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 7px;
	margin: 24px 0 0;
}

body.w3c-classic .themonic-pagination a,
body.w3c-classic .themonic-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	margin: 0;
	padding: 0 11px;
	border: 1px solid var(--w3c-border);
	border-radius: 7px;
	background: var(--w3c-surface);
	color: var(--w3c-text);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

body.w3c-classic .themonic-pagination a:hover,
body.w3c-classic .themonic-pagination .current {
	border-color: var(--w3c-brand);
	background: var(--w3c-brand);
	color: #fff;
}

body.w3c-classic #comments {
	margin-top: 32px;
}

body.w3c-classic #secondary .widget {
	margin: 0 0 20px;
	padding: 18px 20px;
	border: 1px solid var(--w3c-border);
	border-radius: 12px;
	background: var(--w3c-surface);
	box-shadow: var(--w3c-card-shadow);
}

body.w3c-classic #secondary .widget-title {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--w3c-ink);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

body.w3c-classic #secondary .widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.w3c-classic #secondary .widget li {
	margin: 0;
	padding: 7px 0;
	border-bottom: 1px solid var(--w3c-border);
	font-size: 14px;
	line-height: 1.45;
}

body.w3c-classic #secondary .widget li:last-child {
	border-bottom: 0;
}

body.w3c-classic #secondary .widget a {
	color: var(--w3c-text);
	text-decoration: none;
}

body.w3c-classic #secondary .widget a:hover {
	color: var(--w3c-brand-dark);
}

body.w3c-classic #secondary .widget_categories ul {
	max-height: 420px;
	overflow: auto;
	scrollbar-width: thin;
}

body.w3c-classic #secondary .widget_search .searchform > div {
	display: flex;
	gap: 6px;
}

body.w3c-classic #secondary .widget_search #s {
	flex: 1;
	min-width: 0;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--w3c-border-strong);
	border-radius: 8px;
	background: var(--w3c-surface);
	color: var(--w3c-ink);
	font-size: 14px;
	box-shadow: none;
}

body.w3c-classic #secondary .widget_search #s:focus {
	outline: 0;
	border-color: var(--w3c-green);
	box-shadow: 0 0 0 3px var(--w3c-green-ring);
}

body.w3c-classic #secondary .widget_search #searchsubmit {
	height: 40px;
	margin: 0;
	padding: 0 14px;
	border: 0;
	border-radius: 8px;
	background: var(--w3c-green);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

body.w3c-classic #secondary .widget_search #searchsubmit:hover {
	background: var(--w3c-green-dark);
}

@media screen and (max-width: 900px) {
	/* Narrow screens: let wide tables scroll inside their own box. */
	body.w3c-classic .entry-content table {
		display: block;
		overflow-x: auto;
	}
}

@media screen and (max-width: 960px) {
	body.w3c-classic #main.wrapper {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
		margin: 20px auto 40px;
	}

	body.w3c-classic #secondary.widget-area {
		grid-column: 1;
		grid-row: 2;
	}

	body.w3c-classic #primary.site-content {
		padding: 24px 22px 26px;
	}
}

@media screen and (max-width: 600px) {
	body.w3c-classic #page.site {
		padding: 0 12px;
	}

	body.w3c-classic #primary.site-content {
		padding: 20px 16px 22px;
		border-radius: 10px;
	}

	body.w3c-classic .relatedposts ul {
		grid-template-columns: minmax(0, 1fr);
	}

	body.w3c-classic .nav-single {
		flex-direction: column;
	}

	body.w3c-classic .nav-single .nav-next {
		text-align: left;
	}
}

/* -------------------------------------------------------------------------
 * Article layout (single posts and default pages), modelled on the
 * GeeksforGeeks reader: accordion tutorial bar | article | widget column.
 * Fonts are self-hosted variable fonts (OFL): Literata for reading, IBM Plex Sans
 * for the interface.
 * ---------------------------------------------------------------------- */
@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
	src: url("../../fonts/ibm-plex-sans-variable.woff2") format("woff2");
}

@font-face {
	font-family: "Literata";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../../fonts/literata-variable.woff2") format("woff2");
}

@font-face {
	font-family: "Literata";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url("../../fonts/literata-italic-variable.woff2") format("woff2");
}

@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("../../fonts/jetbrains-mono-variable.woff2") format("woff2");
}

body.w3c-article-page {
	--gfg-green: var(--w3c-green);
	--gfg-green-dark: var(--w3c-green-dark);
	--gfg-green-link: var(--w3c-green);
	--gfg-author: var(--w3c-green);
	--gfg-text: var(--w3c-text);
	--gfg-muted: var(--w3c-muted);
	--gfg-heading: var(--w3c-ink);
	--gfg-line: var(--w3c-line);
	--gfg-grey-bg: var(--w3c-surface-soft);
	--gfg-lb-bg: var(--w3c-surface-soft);
	--gfg-lb-open: var(--w3c-surface-soft);
	--gfg-tag-bg: var(--w3c-green-soft);
	--gfg-tag-text: var(--w3c-green-dark);
	--gfg-outline: var(--w3c-muted);
	--gfg-cta-bg: #b0fbdd;
	--gfg-cta-pill: #1e70bf;
	--gfg-card-line: var(--w3c-border);
	--gfg-font-ui: var(--w3c-font-ui);
	--gfg-font-body: var(--w3c-font-body);
	background: #fff;
	color: var(--gfg-text);
	font-family: var(--gfg-font-ui);
}

body.w3c-article-page #page.site {
	max-width: none;
	padding: 0;
	overflow: visible;
}

body.w3c-article-page #main.wrapper {
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: visible;
}

.w3c-article-layout {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
}

.w3c-article-layout > * {
	box-sizing: border-box;
	min-width: 0;
}

/* Left bar ------------------------------------------------------------ */
.w3c-lb {
	position: sticky;
	top: var(--w3c-header-height);
	flex: 0 0 18%;
	align-self: flex-start;
	min-width: 18%;
	max-width: 18%;
	min-height: calc(100vh - var(--w3c-header-height));
	max-height: calc(100vh - var(--w3c-header-height));
	background: var(--gfg-lb-bg);
	font-family: var(--gfg-font-ui);
	transition: top 300ms ease;
}

.w3c-lb > .w3c-lb__toggle {
	display: none;
}

.w3c-lb > .w3c-lb__toggle::-webkit-details-marker {
	display: none;
}

.w3c-lb__sticky {
	position: static;
}

.w3c-lb__scroll {
	max-height: calc(100vh - var(--w3c-header-height));
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #b6b6b6 var(--gfg-lb-bg);
	scrollbar-gutter: stable;
}

.w3c-lb__root {
	display: block;
	padding: 12px 15px;
	border-bottom: 1px solid var(--gfg-line);
	background: var(--w3c-surface-soft);
	color: var(--gfg-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.w3c-lb__group {
	border-bottom: 1px solid var(--gfg-line);
}

.w3c-lb__group > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 15px;
	color: var(--gfg-text);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	list-style: none;
	cursor: pointer;
}

.w3c-lb__group > summary::-webkit-details-marker {
	display: none;
}

.w3c-lb__group > summary .w3c-icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	transition: transform 300ms ease;
}

.w3c-lb__group[open] > summary .w3c-icon {
	transform: rotate(180deg);
}

.w3c-lb__group[open] {
	background: var(--gfg-lb-open);
}

.w3c-lb__group[open] > summary,
.w3c-lb__group.is-active > summary {
	font-weight: 700;
}

.w3c-lb__group ul {
	margin: 0 0 0 7px;
	padding: 0 0 6px;
	list-style: none;
}

.w3c-lb__group li {
	margin: 5px 0 0;
	font-size: 16px;
	line-height: 1.5;
}

.w3c-lb__group li a,
.w3c-lb__link {
	display: block;
	margin-left: 10px;
	padding: 2px 15px;
	border-left: 4px solid transparent;
	color: var(--gfg-text);
	text-decoration: none;
}

.w3c-lb__link {
	margin: 0;
	padding: 10px 15px;
	border-bottom: 1px solid var(--gfg-line);
	font-size: 16px;
	line-height: 1.5;
}

.w3c-lb__group li a:hover,
.w3c-lb__link:hover {
	font-weight: 700;
}

.w3c-lb__group li.is-active a,
.w3c-lb__link.is-active {
	border-left-color: var(--gfg-green);
	color: var(--gfg-green);
	font-weight: 700;
}

.w3c-lb__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 15px;
	background: var(--gfg-cta-bg);
	color: var(--gfg-heading);
	text-decoration: none;
}

.w3c-lb__cta span {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}

.w3c-lb__cta em {
	flex: 0 0 auto;
	padding: 2px 8px;
	border-radius: 10px;
	background: var(--gfg-cta-pill);
	color: #fff;
	font-size: 14px;
	font-style: normal;
	line-height: 1.4;
}

/* Article column ------------------------------------------------------ */
.w3c-article,
body.w3c-article-page #primary.w3c-article {
	flex-basis: calc(80.5% - 320px);
	min-width: calc(80.5% - 320px);
	max-width: calc(80.5% - 320px);
	float: none;
	width: auto;
	margin: 0;
	padding: 10px 20px 55px;
	border: 0;
	font-family: var(--gfg-font-ui);
}

.w3c-article__header {
	padding-bottom: 8px;
	border-bottom: 1px solid var(--gfg-line);
}

.w3c-article__header h1.entry-title {
	margin: 22px 0 0;
	color: var(--gfg-text);
	font-family: var(--gfg-font-ui);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 35px;
	overflow-wrap: break-word;
}

.w3c-article__subtitle {
	margin: 6px 0 0;
	color: var(--gfg-muted);
	font-size: 18px;
}

.w3c-article__updated {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	margin-top: 3px;
	color: var(--gfg-muted);
	font-size: 16px;
	line-height: 30px;
}

.w3c-article__updated-date {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.w3c-article__actions {
	position: relative;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 6px;
}

.w3c-article__action {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: var(--gfg-text);
	list-style: none;
	cursor: pointer;
}

.w3c-article__action::-webkit-details-marker {
	display: none;
}

.w3c-article__action .w3c-icon {
	width: 20px;
	height: 20px;
}

.w3c-article__action:hover {
	background: var(--gfg-lb-open);
	color: var(--gfg-green);
}

.w3c-menu {
	position: relative;
}

.w3c-menu__panel {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 30;
	display: grid;
	gap: 2px;
	width: 200px;
	padding: 6px;
	border: 1px solid var(--gfg-card-line);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	line-height: 1.4;
}

.w3c-menu__panel a,
.w3c-menu__panel button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 8px 10px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--gfg-text);
	font: inherit;
	font-size: 14px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.w3c-menu__panel a:hover,
.w3c-menu__panel button:hover {
	background: var(--gfg-lb-open);
}

.w3c-article__featured {
	margin: 16px 0 0;
}

.w3c-article__featured img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* Article text (Inter 17px) -------------------------------- */
body.w3c-article-page .w3c-article__content {
	margin-top: 10px;
	color: var(--gfg-text);
	font-family: var(--gfg-font-body);
	font-size: 18px;
	letter-spacing: 0.131625px;
	line-height: 1.6;
}

body.w3c-article-page .w3c-article__content p,
body.w3c-article-page .w3c-article__content li {
	color: var(--gfg-text);
	font-size: 18px;
	line-height: 1.6;
}

body.w3c-article-page .w3c-article__content p {
	margin: 0 0 10px;
}

body.w3c-article-page .w3c-article__content h2,
body.w3c-article-page .w3c-article__content h3,
body.w3c-article-page .w3c-article__content h4 {
	clear: both;
	margin: 22px 0 10px;
	color: var(--gfg-text);
	font-family: var(--gfg-font-body);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 28px;
	scroll-margin-top: calc(var(--w3c-header-height) + 12px);
}

body.w3c-article-page .w3c-article__content h2 {
	font-size: 24px;
}

body.w3c-article-page .w3c-article__content h3 {
	font-size: 20px;
}

body.w3c-article-page .w3c-article__content h4 {
	font-size: 18px;
}

body.w3c-article-page .w3c-article__content a {
	color: var(--gfg-green-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	word-break: break-word;
}

body.w3c-article-page .w3c-article__content a:hover {
	color: var(--gfg-green-dark);
}

body.w3c-article-page .w3c-article__content ul {
	margin: 0 0 24px;
	padding: 0;
	list-style: disc outside;
}

body.w3c-article-page .w3c-article__content ol {
	margin: 0 0 24px;
	padding: 0;
	list-style: decimal outside;
}

body.w3c-article-page .w3c-article__content li {
	margin: 0 0 0 24px;
	line-height: 1.58;
}

body.w3c-article-page .w3c-article__content ul ul,
body.w3c-article-page .w3c-article__content ol ol {
	margin: 5px 0 5px 26px;
	list-style: circle;
}

body.w3c-article-page .w3c-article__content img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto 15px;
	border-radius: 0;
	background: #fff;
	object-fit: contain;
}

body.w3c-article-page .w3c-article__content figure {
	margin: 0 0 15px;
}

body.w3c-article-page .w3c-article__content figcaption,
body.w3c-article-page .w3c-article__content .wp-caption-text {
	color: var(--gfg-muted);
	font-size: 15px;
	text-align: center;
}

body.w3c-article-page .w3c-article__content blockquote {
	margin: 10px 0 24px;
	padding: 10px 24px;
	border: 0;
	border-radius: 14px;
	background: var(--gfg-grey-bg);
	color: var(--gfg-text);
	font-style: italic;
	line-height: 1.4;
	word-break: break-word;
}

body.w3c-article-page .w3c-article__content blockquote p {
	margin: 0;
}

body.w3c-article-page .w3c-article__content code {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-family: var(--w3c-font-mono);
	font-size: 11pt;
}

body.w3c-article-page .w3c-article__content pre {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 10px 0 20px;
	padding: 12px 15px;
	overflow: auto;
	border: 1px solid #d5d5d5;
	border-radius: 0;
	background: #fff;
	color: rgba(0, 0, 0, 0.9);
	font-family: var(--w3c-font-mono);
	font-size: 12pt;
	line-height: 1.5;
	white-space: pre;
	tab-size: 4;
}

body.w3c-article-page .w3c-article__content pre.has-copy {
	padding-right: 52px;
}

body.w3c-article-page .w3c-article__content pre code {
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: inherit;
}

.w3c-code-copy {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--w3c-surface-soft);
	color: #444;
	cursor: pointer;
}

.w3c-code-copy svg {
	width: 16px;
	height: 16px;
}

.w3c-code-copy:hover {
	background: #dcdce0;
	color: #000;
}

.w3c-code-copy.is-done {
	background: var(--gfg-tag-bg);
	color: var(--gfg-green);
}

body.w3c-article-page .w3c-article__content table {
	display: block;
	width: calc(100% - 25px);
	max-width: 100%;
	margin: 25px auto;
	overflow-x: auto;
	border: 0.3px solid var(--w3c-border);
	border-collapse: collapse;
	border-spacing: 0;
	color: var(--gfg-text);
	font-size: 12.5pt;
	scrollbar-width: thin;
}

body.w3c-article-page .w3c-article__content table th,
body.w3c-article-page .w3c-article__content table td {
	border: 0.3px solid var(--w3c-border);
	vertical-align: middle;
}

body.w3c-article-page .w3c-article__content table th {
	padding: 10px;
	background: var(--gfg-grey-bg);
	font-size: 14pt;
	font-weight: 700;
	text-align: left;
}

body.w3c-article-page .w3c-article__content table td {
	padding: 14px 10px;
	background: #fff;
}

body.w3c-article-page .w3c-article__content table tbody tr:nth-child(even) td {
	background: #fff;
}

body.w3c-article-page .w3c-article__content .page-links {
	margin: 16px 0;
}

/* Table of contents (GfG-style box) */
.w3c-toc {
	width: 100%;
	box-sizing: border-box;
	margin: 12px 0 20px;
	border: 1px solid #444;
	border-radius: 8px;
	background: var(--gfg-tag-bg);
	line-height: 18px;
}

.w3c-toc > p {
	margin: 15px !important;
	color: var(--gfg-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.w3c-toc ul,
body.w3c-article-page .w3c-article__content .w3c-toc ul {
	margin: 15px !important;
	padding: 0 0 0 22px;
	list-style: disc outside;
}

.w3c-toc li,
body.w3c-article-page .w3c-article__content .w3c-toc li {
	margin-left: 0;
}

.w3c-toc a,
body.w3c-article-page .w3c-article__content .w3c-toc a {
	text-decoration: none;
}

.w3c-toc a:hover,
body.w3c-article-page .w3c-article__content .w3c-toc a:hover {
	text-decoration: underline;
}

.w3c-toc ul ul,
body.w3c-article-page .w3c-article__content .w3c-toc ul ul {
	margin: 4px 0 4px 4px !important;
	padding-left: 22px;
	list-style: circle;
}

.w3c-toc li {
	margin: 0 0 6px 0 !important;
	font-size: 16px;
	line-height: 1.5;
}

/* Section lists on hub pages */
.w3c-section-list {
	margin: 24px 0 0;
}

.w3c-section-list h2 {
	margin: 22px 0 10px;
}

/* Bottom row ---------------------------------------------------------- */
.w3c-article__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-top: 20px;
}

.w3c-article__bottom-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.w3c-btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: max-content;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--gfg-outline);
	border-radius: 8px;
	background: transparent;
	color: var(--gfg-text);
	font-family: var(--gfg-font-ui);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.w3c-btn-outline .w3c-icon {
	width: 18px;
	height: 18px;
	transition: transform 200ms ease;
}

.w3c-btn-outline.is-open .w3c-icon {
	transform: rotate(180deg);
}

.w3c-btn-outline:hover {
	border-color: var(--gfg-green);
	color: var(--gfg-green);
}

.w3c-article__next {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	max-width: 46%;
	text-align: right;
}

.w3c-article__next > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--gfg-outline);
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
}

.w3c-article__next > span .w3c-icon {
	width: 22px;
	height: 22px;
}

.w3c-article__next > a {
	color: var(--gfg-text);
	font-size: 16px;
	font-weight: 500;
	line-height: 28px;
	text-decoration: none;
}

.w3c-article__next > a:hover {
	color: var(--gfg-green);
}

.w3c-moreinfo {
	margin-top: 16px;
	padding: 16px;
	border: 1px solid var(--gfg-card-line);
	border-radius: 10px;
	background: var(--w3c-surface-soft);
}

.w3c-moreinfo[hidden] {
	display: none;
}

.w3c-moreinfo__author {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.w3c-moreinfo__author img {
	flex: 0 0 auto;
	width: 35px;
	height: 35px;
	border-radius: 50%;
}

.w3c-moreinfo__name {
	display: block;
	color: var(--gfg-author);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.w3c-moreinfo__meta {
	display: block;
	color: var(--gfg-muted);
	font-size: 14px;
}

.w3c-moreinfo__author p {
	margin: 8px 0 0;
	color: var(--gfg-text);
	font-size: 15px;
	line-height: 1.5;
}

.w3c-moreinfo__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.w3c-moreinfo__tags > span {
	color: var(--gfg-heading);
	font-size: 16px;
	font-weight: 600;
}

.w3c-moreinfo__tags ul {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.w3c-moreinfo__tags li {
	margin: 0;
}

.w3c-moreinfo__tags a {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: 25px;
	background: var(--gfg-tag-bg);
	color: var(--gfg-tag-text);
	font-size: 16px;
	line-height: 19px;
	white-space: nowrap;
	text-decoration: none;
}

.w3c-moreinfo__tags a:hover {
	background: #e3f2ea;
}

.w3c-moreinfo__edit {
	margin: 10px 0 0;
	font-size: 14px;
}

/* Similar reads ------------------------------------------------------- */
.w3c-similar {
	margin-top: 30px;
}

.w3c-similar h2 {
	clear: none;
	margin: 0 0 4px;
	color: var(--gfg-heading);
	font-family: var(--gfg-font-ui);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
}

.w3c-similar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.w3c-similar li {
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--gfg-line);
}

.w3c-similar li > a {
	color: var(--gfg-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 25px;
	text-decoration: none;
}

.w3c-similar li > a:hover {
	color: var(--gfg-green);
}

.w3c-similar li p {
	margin: 4px 0 0;
	color: var(--gfg-muted);
	font-size: 16px;
	line-height: 1.5;
}

.w3c-similar li small {
	display: block;
	margin-top: 6px;
	color: var(--gfg-heading);
	font-size: 14px;
}

.w3c-article #comments {
	margin-top: 30px;
}

/* Right column ---------------------------------------------------------- */
body.w3c-article-page #secondary.widget-area {
	flex: 0 0 320px;
	box-sizing: border-box;
	width: 320px;
	min-width: 320px;
	margin: 24px 0;
	padding: 0 20px 0 25px;
	grid-column: auto;
	grid-row: auto;
	font-family: var(--gfg-font-ui);
}

body.w3c-article-page #secondary .widget {
	margin: 0 0 15px;
	padding: 15px;
	border: 1px solid var(--gfg-card-line);
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
}

body.w3c-article-page #secondary .widget-title {
	margin: 0 0 10px;
	padding: 0;
	color: var(--gfg-heading);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

body.w3c-article-page #secondary .widget li {
	padding: 7px 0;
	border-bottom: 1px solid var(--gfg-line);
	font-size: 15px;
	line-height: 1.4;
}

body.w3c-article-page #secondary .widget li:last-child {
	border-bottom: 0;
}

body.w3c-article-page #secondary .widget a {
	color: var(--w3c-green);
	font-weight: 600;
	text-decoration: none;
}

body.w3c-article-page #secondary .widget a:hover {
	text-decoration: underline;
}

body.w3c-article-page #secondary .widget_search .searchform,
body.w3c-article-page #secondary .widget_search form {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

body.w3c-article-page #secondary .widget_search #s {
	border-radius: 6px;
}

body.w3c-article-page #secondary .widget_search #searchsubmit {
	border-radius: 6px;
	background: var(--gfg-green);
}

body.w3c-article-page #secondary .widget_search #searchsubmit:hover {
	background: var(--gfg-green-dark);
}

/* Responsive ------------------------------------------------------------ */
@media screen and (min-width: 1700px) {
	.w3c-lb {
		flex-basis: 300px;
		min-width: 300px;
		max-width: 300px;
	}

	.w3c-article,
	body.w3c-article-page #primary.w3c-article {
		flex-basis: 1047px;
		min-width: 1047px;
		max-width: 1047px;
	}
}

@media screen and (max-width: 1200px) {
	.w3c-article,
	body.w3c-article-page #primary.w3c-article {
		padding: 20px 40px 30px;
	}
}

@media screen and (max-width: 1199px) {
	.w3c-article-layout {
		flex-wrap: wrap;
	}

	.w3c-article,
	body.w3c-article-page #primary.w3c-article {
		flex-basis: 82%;
		min-width: 82%;
		max-width: 82%;
	}

	body.w3c-article-page #secondary.widget-area {
		display: grid;
		flex: 1 1 100%;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 15px;
		width: 100%;
		min-width: 0;
		margin: 0 0 30px;
		padding: 0 20px;
	}

	body.w3c-article-page #secondary .widget {
		margin: 0;
	}
}

@media screen and (max-width: 991px) {
	.w3c-lb {
		position: static;
		flex: 1 1 100%;
		align-self: auto;
		min-width: 100%;
		max-width: 100%;
		min-height: 0;
		max-height: none;
		border-bottom: 1px solid var(--gfg-line);
	}

	.w3c-lb > .w3c-lb__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 46px;
		padding: 0 16px;
		color: var(--gfg-text);
		font-size: 16px;
		font-weight: 700;
		list-style: none;
		cursor: pointer;
	}

	.w3c-lb > .w3c-lb__toggle .w3c-icon {
		width: 22px;
		height: 22px;
		transition: transform 200ms ease;
	}

	.w3c-lb[open] > .w3c-lb__toggle .w3c-icon {
		transform: rotate(180deg);
	}

	.w3c-lb__sticky {
		position: static;
	}

	.w3c-lb__scroll {
		max-height: 360px;
		border-top: 1px solid var(--gfg-line);
	}

	.w3c-lb__root {
		display: none;
	}

	.w3c-article,
	body.w3c-article-page #primary.w3c-article {
		flex-basis: auto;
		min-width: 0;
		max-width: none;
		width: 100%;
		margin: 15px 30px 30px;
		padding: 0 30px;
	}

	body.w3c-article-page #secondary.widget-area {
		grid-template-columns: minmax(0, 1fr);
		padding: 0 16px;
	}

	.w3c-article__next {
		max-width: 100%;
		align-items: flex-start;
		text-align: left;
	}
}

@media screen and (max-width: 576px) {
	.w3c-article,
	body.w3c-article-page #primary.w3c-article {
		margin: 20px 10px;
		padding: 0 20px;
	}

	.w3c-article__header h1.entry-title {
		margin-top: 16px;
		font-size: 20px;
		line-height: 28px;
	}

	.w3c-article__updated {
		font-size: 15px;
	}

	body.w3c-article-page .w3c-article__content,
	body.w3c-article-page .w3c-article__content p,
	body.w3c-article-page .w3c-article__content li {
		font-size: 17px;
	}

	body.w3c-article-page .w3c-article__content table {
		width: 100%;
	}
}

/* Author preview under the article (always visible) */
.w3c-author-strip {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding: 12px 0;
	border-top: 1px solid var(--gfg-line);
}

.w3c-author-strip img {
	flex: 0 0 auto;
	width: 35px;
	height: 35px;
	border-radius: 50%;
}

.w3c-author-strip__name {
	display: block;
	color: var(--gfg-author);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.w3c-author-strip__meta {
	display: block;
	color: var(--gfg-muted);
	font-size: 14px;
}

.w3c-moreinfo__bio {
	margin: 0;
	color: var(--gfg-text);
	font-size: 15px;
	line-height: 1.5;
}

.w3c-moreinfo__bio + .w3c-moreinfo__tags {
	margin-top: 12px;
}

/* Condensed header: the whole header slides up by the top-bar height on scroll
 * down, so the topic bar (with its search box) stays visible. A transform keeps
 * the document layout unchanged, which avoids scroll-anchoring feedback loops. */
.w3c-site-header.site-header {
	transition: transform 250ms ease, box-shadow 160ms ease;
	will-change: transform;
}

.w3c-site-header.is-condensed {
	transform: translateY(calc(-1 * var(--w3c-header-main-height)));
}

body.w3c-header-condensed {
	--w3c-header-height: calc(var(--w3c-header-total-height) - var(--w3c-header-main-height));
}

.w3c-topic-bar {
	position: relative;
}

/* Out of the flow, so the topic links never move when the bar condenses. */
.w3c-topic-search {
	position: absolute;
	top: 50%;
	right: 96px;
	z-index: 5;
	display: none;
	align-items: center;
	gap: 6px;
	width: 240px;
	height: 32px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--w3c-border-strong);
	border-radius: 999px;
	background: var(--w3c-surface);
	transform: translateY(-50%);
	transition: width 150ms ease;
}

.w3c-site-header.is-condensed .w3c-topic-search {
	display: flex;
}

.w3c-topic-search svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: var(--w3c-muted);
	stroke-linecap: round;
	stroke-width: 1.8;
	pointer-events: none;
}

.w3c-topic-search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-ui);
	font-size: 14px;
	box-shadow: none;
}

.w3c-topic-search input[type="search"]:focus {
	outline: 0;
	box-shadow: none;
}

.w3c-topic-search:focus-within {
	border-color: var(--w3c-green);
	box-shadow: 0 0 0 3px var(--w3c-green-ring);
}

/* Narrower screens: an icon that expands on focus, so it never overlaps the links. */
@media screen and (max-width: 1300px) {
	.w3c-topic-search {
		right: 12px;
		width: 34px;
		height: 34px;
		padding: 0;
		justify-content: center;
	}

	.w3c-topic-search input[type="search"] {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		cursor: pointer;
	}

	.w3c-topic-search:focus-within {
		width: 220px;
		padding: 0 10px;
		justify-content: flex-start;
	}

	.w3c-topic-search:focus-within input[type="search"] {
		position: static;
		width: auto;
		height: 30px;
		opacity: 1;
		cursor: text;
	}
}

/* The topic menu scrolls edge-to-edge on small screens; no room for the search there. */
@media screen and (max-width: 900px) {
	.w3c-site-header.is-condensed .w3c-topic-search {
		display: none;
	}
}

/* Header search lives in the right cluster: a visible field on desktop,
 * an icon that expands to a full-width overlay on small screens. */
.w3c-header-search {
	order: -1;
}

@media screen and (min-width: 901px) {
	.w3c-search-toggle,
	.w3c-search-panel .w3c-search-close {
		display: none;
	}

	.w3c-search-panel[hidden] {
		display: flex;
	}

	.w3c-search-panel {
		width: 240px;
		margin-right: 4px;
		padding-right: 12px;
	}
}

/* =========================================================================
 * GeeksforGeeks visual layer: header, home page, hub pages, footer, sidebar.
 * Values measured from geeksforgeeks.org on 2026-08-31.
 * ======================================================================= */

/* Header ------------------------------------------------------------------ */
.w3c-site-header.site-header {
	background: #fff;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.w3c-header-main {
	border-bottom-color: var(--w3c-line);
	background: #fff;
}

.w3c-primary-menu > li > a {
	color: var(--w3c-text);
	font-family: var(--w3c-font-ui);
	font-size: 16px;
	font-weight: 600;
}

.w3c-primary-menu > li:hover > a,
.w3c-primary-menu > li:focus-within > a,
.w3c-primary-menu > li.is-submenu-open > a,
.w3c-primary-menu > li:hover > .w3c-submenu-toggle,
.w3c-submenu-toggle[aria-expanded="true"] {
	color: var(--w3c-green);
}

.w3c-primary-menu .sub-menu {
	border-top-color: var(--w3c-green);
}

.w3c-primary-menu .sub-menu a {
	font-family: var(--w3c-font-ui);
	font-size: 15px;
	font-weight: 500;
}

.w3c-primary-menu .sub-menu a:hover,
.w3c-primary-menu .sub-menu a:focus {
	background: var(--w3c-green-soft);
	color: var(--w3c-green-dark);
}

.w3c-signin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 37px;
	padding: 0 16px;
	border-radius: 8px;
	background: var(--w3c-text);
	color: #fff;
	font-family: var(--w3c-font-ui);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
}

.w3c-signin:hover,
.w3c-signin:focus-visible {
	background: var(--w3c-ink);
	color: #fff;
	text-decoration: none;
}

.w3c-topic-bar {
	border-top: 1px solid var(--w3c-line);
	border-bottom-color: var(--w3c-line);
	background: #fff;
}

.w3c-topic-menu a {
	color: var(--w3c-text);
	font-family: var(--w3c-font-ui);
	font-size: 14.6667px;
	font-weight: 400;
}

.w3c-topic-menu a:hover,
.w3c-topic-menu a:focus,
.w3c-topic-menu .current-menu-item > a {
	border-bottom-color: var(--w3c-green);
	color: var(--w3c-green);
}

/* Home page: single header, no collapsing */
body.home .w3c-topic-bar {
	display: none;
}

body.home {
	--w3c-header-height: 51px;
	--w3c-header-total-height: 51px;
}

/* Home canvas ---------------------------------------------------------------- */
body.w3c-full-canvas,
body.w3c-full-canvas #page.site,
.w3c-home {
	background: #fff;
}

.w3c-home {
	font-family: var(--w3c-font-ui);
	color: var(--w3c-text);
}

.w3c-home-catalog,
.w3c-home-discover {
	border: 0;
	background: #fff;
}

.w3c-home-hero {
	padding: 54px 24px 46px;
	background: linear-gradient(180deg, #e8faf3 0%, #f4fdf9 60%, #fff 100%);
}

.w3c-home-hero h1 {
	color: var(--w3c-ink);
	font-family: var(--w3c-font-ui);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
}

.w3c-home-hero__lede {
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 17px;
}

.w3c-home-hero__eyebrow {
	color: var(--w3c-green);
}

.w3c-home-hero__search {
	border-color: var(--w3c-border-strong);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.w3c-home-hero__proof {
	font-family: var(--w3c-font-body);
}

.w3c-home-hero__links a {
	min-height: 34px;
	padding: 0 14px;
	border: 1px solid var(--w3c-text);
	border-radius: 6px;
	background: #fff;
	color: var(--w3c-text);
	font-size: 14px;
	font-weight: 400;
}

.w3c-home-hero__links a:hover {
	border-color: var(--w3c-green);
	color: var(--w3c-green);
	text-decoration: none;
}

.w3c-home-hero__links a.is-primary {
	border-color: var(--w3c-green);
	background: var(--w3c-green);
	color: #fff;
	box-shadow: none;
}

.w3c-home-hero__links a.is-primary:hover {
	border-color: var(--w3c-green-dark);
	background: var(--w3c-green-dark);
}

/* Section headings: 24px display + outlined "View All" pill */
.w3c-section-heading p,
.w3c-explore-topics > header p,
.w3c-services-intro__eyebrow {
	display: none;
}

.w3c-home-courses .w3c-section-heading h2,
.w3c-home-catalog .w3c-section-heading h2,
.w3c-section-heading h2,
.w3c-must-explore > h3,
.w3c-explore-topics > header h2,
.w3c-services-intro__copy h2 {
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
}

.w3c-section-heading > a,
.w3c-home-courses .w3c-section-heading > a,
.w3c-home-catalog .w3c-section-heading > a,
.w3c-services-intro__action {
	min-height: 32px;
	padding: 0 14px;
	border: 1px solid var(--w3c-text);
	border-radius: 999px;
	background: #fff;
	color: var(--w3c-text);
	font-family: var(--w3c-font-ui);
	font-size: 14px;
	font-weight: 400;
	box-shadow: none;
}

.w3c-section-heading > a:hover,
.w3c-services-intro__action:hover {
	border-color: var(--w3c-green);
	background: #fff;
	color: var(--w3c-green);
}

.w3c-services-intro__action > span:last-child {
	background: var(--w3c-green-soft);
	color: var(--w3c-green-dark);
}

/* Cards */
.w3c-course-card,
.w3c-tutorial-card,
.w3c-service-card {
	border: 1px solid var(--w3c-border);
	border-radius: 10px;
	box-shadow: none;
}

.w3c-course-card:hover,
.w3c-course-card:focus-visible,
.w3c-tutorial-card:hover,
.w3c-tutorial-card:focus-within {
	border-color: var(--w3c-border);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.w3c-course-card h3,
.w3c-tutorial-card h3,
.w3c-service-card h3 {
	color: var(--w3c-ink);
	font-family: var(--w3c-font-body);
	font-weight: 600;
}

.w3c-course-card__meta,
.w3c-course-card__footer,
.w3c-tutorial-card__body > p,
.w3c-tutorial-card__footer time,
.w3c-service-card > p {
	font-family: var(--w3c-font-body);
}

.w3c-course-card__footer strong,
.w3c-tutorial-card__footer a {
	color: var(--w3c-green);
	font-family: var(--w3c-font-body);
	font-size: 14px;
	font-weight: 600;
}

.w3c-tutorial-card__visual {
	border-bottom-color: var(--w3c-green-line);
	background: var(--w3c-green-soft);
	color: var(--w3c-green-dark);
}

/* Practice banner: white card, like GfG's "Need help" block */
.w3c-practice-banner {
	border: 1px solid var(--w3c-border);
	border-radius: 14px;
	background: #fff;
	color: var(--w3c-text);
	box-shadow: none;
}

.w3c-practice-banner__copy > p {
	color: var(--w3c-green);
}

.w3c-practice-banner__copy h3 {
	color: var(--w3c-ink);
	font-family: var(--w3c-font-ui);
	font-size: clamp(30px, 3vw, 40px);
	font-weight: 600;
	letter-spacing: 0;
}

.w3c-practice-banner__copy > span {
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 17px;
}

.w3c-practice-banner__copy > a,
.w3c-help-banner__copy > a,
.w3c-services-cta > a,
.w3c-notify__form button,
.w3c-home-hero__search button {
	border: 0;
	border-radius: 6px;
	background: var(--w3c-green);
	color: #fff;
	font-family: var(--w3c-font-ui);
	font-size: 15px;
	font-weight: 600;
	box-shadow: none;
}

.w3c-practice-banner__copy > a:hover,
.w3c-help-banner__copy > a:hover,
.w3c-services-cta > a:hover,
.w3c-notify__form button:hover,
.w3c-home-hero__search button:hover {
	background: var(--w3c-green-dark);
	color: #fff;
}

.w3c-practice-banner a:focus-visible {
	outline-color: var(--w3c-green);
}

.w3c-practice-banner__window {
	border: 1px solid var(--w3c-border);
	background: var(--w3c-surface-soft);
	color: var(--w3c-ink);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.w3c-practice-banner__window small {
	color: var(--w3c-green-dark);
}

.w3c-practice-banner__languages span {
	border-color: var(--w3c-green-line);
	background: var(--w3c-green-soft);
	color: var(--w3c-green-dark);
}

/* Must Explore: lavender tiles */
.w3c-must-explore__grid {
	gap: 24px;
}

.w3c-must-explore__item,
.w3c-must-explore__item--violet,
.w3c-must-explore__item--blue,
.w3c-must-explore__item--rose,
.w3c-must-explore__item--green {
	align-items: flex-start;
	flex-direction: column;
	justify-content: space-between;
	min-height: 104px;
	padding: 16px 18px;
	border: 0;
	border-radius: 8px;
	background: var(--gfg-lavender);
	color: #fff;
	box-shadow: none;
}

.w3c-must-explore__item strong {
	font-family: var(--w3c-font-ui);
	font-size: 22px;
	font-weight: 500;
}

.w3c-must-explore__item > span {
	align-self: flex-end;
	font-size: 24px;
	line-height: 1;
}

.w3c-must-explore__item:hover,
.w3c-must-explore__item:focus-visible {
	background: var(--gfg-lavender-dark);
	color: #fff;
	transform: none;
	box-shadow: none;
}

/* Help banner: white card with dark 40px heading and green button */
.w3c-help-banner {
	border: 1px solid var(--w3c-border);
	border-radius: 14px;
	background: #fff;
	box-shadow: none;
}

.w3c-help-banner__copy > p {
	color: var(--w3c-green);
}

.w3c-help-banner__copy h2 {
	color: var(--w3c-ink);
	font-family: var(--w3c-font-ui);
	font-size: clamp(32px, 3.5vw, 40px);
	font-weight: 600;
	letter-spacing: 0;
}

.w3c-help-banner__copy > span {
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 17px;
}

.w3c-help-banner__feature {
	border-color: var(--w3c-border);
	border-radius: 8px;
	background: #fff;
}

.w3c-help-banner__feature strong {
	color: var(--w3c-ink);
	font-family: var(--w3c-font-ui);
	font-size: 14px;
	font-weight: 500;
}

/* Explore: two-column gradient tiles with a white "View more" pill */
.w3c-explore-topics__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 42px;
}

.w3c-explore-topic {
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-height: 200px;
	padding: 28px;
	border: 0;
	border-radius: 12px;
	color: #fff;
	text-align: center;
	box-shadow: none;
}

.w3c-explore-topic strong {
	color: #fff;
	font-family: var(--w3c-font-ui);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: 0;
}

.w3c-explore-topic > span {
	min-height: 42px;
	padding: 0 18px;
	border: 1px solid #fff;
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-family: var(--w3c-font-ui);
	font-size: 17px;
	font-weight: 400;
}

.w3c-explore-topic:hover,
.w3c-explore-topic:focus-visible {
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.w3c-explore-topic--blue { background: linear-gradient(135deg, #5d7fd0, #8fabe8); }
.w3c-explore-topic--rose { background: linear-gradient(135deg, #c46d6d, #e8a6a6); }
.w3c-explore-topic--green { background: linear-gradient(135deg, #5f9f79, #98d1aa); }
.w3c-explore-topic--violet { background: linear-gradient(135deg, #8d6fbf, #bda9e5); }
.w3c-explore-topic--amber { background: linear-gradient(135deg, #d5924e, #f2bb86); }
.w3c-explore-topic--plum { background: linear-gradient(135deg, #c26a92, #eaa9c5); }
.w3c-explore-topic--cyan { background: linear-gradient(135deg, #58b1ae, #99d9d6); }
.w3c-explore-topic--indigo { background: linear-gradient(135deg, #6e79c9, #9eaaec); }
.w3c-explore-topic--teal { background: linear-gradient(135deg, #4fa39a, #8fd0c8); }
.w3c-explore-topic--olive { background: linear-gradient(135deg, #b5ae5e, #ddd697); }

/* Services */
.w3c-home-services {
	background: #fff;
}

.w3c-service-card {
	background: #fff;
}

.w3c-service-card__index {
	font-family: var(--w3c-font-ui);
}

.w3c-services-cta {
	border: 1px solid var(--w3c-border);
	border-radius: 14px;
	background: #fff;
	color: var(--w3c-text);
	box-shadow: none;
}

.w3c-services-cta__eyebrow {
	color: var(--w3c-green);
}

.w3c-services-cta__copy h3 {
	color: var(--w3c-ink);
	font-family: var(--w3c-font-ui);
	font-size: 24px;
	font-weight: 600;
}

.w3c-services-cta__description {
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
}

.w3c-services-cta > a > span:last-child {
	background: rgba(255, 255, 255, 0.2);
}

.w3c-services-cta > a:focus-visible {
	outline-color: var(--w3c-green);
	box-shadow: 0 0 0 4px var(--w3c-green-ring);
}

/* Notify card */
.w3c-notify {
	border-color: var(--w3c-border);
	border-radius: 14px;
	background: #fff;
	box-shadow: none;
}

.w3c-notify__eyebrow {
	color: var(--w3c-green);
}

.w3c-notify__copy h3 {
	color: var(--w3c-ink);
	font-family: var(--w3c-font-ui);
	font-weight: 600;
}

/* Topic chips (hub pages) */
.w3c-topic-chip {
	border-color: var(--w3c-border);
	background: #fff;
	color: var(--w3c-text);
	font-family: var(--w3c-font-ui);
}

.w3c-topic-chip:hover,
.w3c-topic-chip:focus-visible {
	border-color: var(--w3c-green);
	background: var(--w3c-green-soft);
	color: var(--w3c-green-dark);
}

/* Pagination */
.w3c-pagination a:hover,
.w3c-pagination .current {
	border-color: var(--w3c-green);
	background: var(--w3c-green);
}

/* Footer -------------------------------------------------------------------- */
#colophon.w3c-site-footer {
	border-top: 1px solid var(--w3c-border);
	background: #fff;
	color: var(--w3c-text);
	font-family: var(--w3c-font-ui);
}

.w3c-footer-brand > p {
	color: var(--w3c-text);
	font-size: 16px;
}

.w3c-footer-contact {
	color: var(--w3c-green-dark);
	font-weight: 600;
}

.w3c-footer-social a {
	border: 0;
	background: var(--w3c-ink);
	color: #fff;
	box-shadow: none;
}

.w3c-footer-social a:hover {
	background: var(--w3c-green);
	color: #fff;
	transform: none;
}

.w3c-footer-group h2,
.js .w3c-footer-toggle {
	color: var(--w3c-green);
	font-size: 16px;
	font-weight: 600;
}

.w3c-footer-menu a {
	color: var(--w3c-muted);
	font-size: 16px;
	font-weight: 400;
}

#colophon.w3c-site-footer .w3c-footer-menu a:hover,
#colophon.w3c-site-footer .w3c-footer-menu a:focus {
	color: var(--w3c-green);
}

.w3c-footer-bottom {
	border-top-color: var(--w3c-border);
	color: var(--w3c-muted);
	font-size: 16px;
}

.w3c-footer-utility a,
.w3c-footer-theme-credit a {
	color: var(--w3c-muted);
}

#iop-footer.w3c-footer-widgets {
	border-top-color: var(--w3c-border);
	background: #fff;
}

/* Article sidebar cards ------------------------------------------------------ */
body.w3c-article-page #secondary .widget,
body.w3c-article-page #secondary .w3c-side-card {
	padding: 16px;
	border: 0;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

body.w3c-article-page #secondary .widget-title,
.w3c-side-card__head h3 {
	margin: 0;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-ui);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

body.w3c-article-page #secondary .widget-title {
	margin-bottom: 10px;
}

.w3c-side-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.w3c-side-card__badge {
	flex: 0 0 auto;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--w3c-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.w3c-side-card ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.w3c-side-card li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 0;
	border-bottom: 1px solid var(--w3c-line);
}

.w3c-side-card li:last-child {
	border-bottom: 0;
}

.w3c-side-card li a {
	color: var(--w3c-green);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.w3c-side-card li a:hover {
	text-decoration: underline;
}

.w3c-side-card li small {
	color: var(--w3c-muted);
	font-size: 12px;
	line-height: 1.4;
}

.w3c-side-card li em {
	color: var(--w3c-text);
	font-size: 12px;
	font-style: normal;
}

.w3c-side-card li em::before {
	margin-right: 5px;
	color: var(--w3c-green);
	content: "\25CF";
	font-size: 8px;
	vertical-align: middle;
}

.w3c-side-card__more {
	display: block;
	margin-top: 8px;
	color: var(--w3c-green-dark);
	font-size: 14px;
	text-align: right;
	text-decoration: none;
}

.w3c-side-card__more:hover {
	text-decoration: underline;
}

body.w3c-article-page #secondary .widget li {
	border-bottom-color: var(--w3c-line);
}

body.w3c-article-page #secondary .widget a {
	color: var(--w3c-green);
}

@media screen and (max-width: 900px) {
	.w3c-signin {
		min-height: 34px;
		padding: 0 12px;
		font-size: 13px;
	}
}

@media screen and (max-width: 480px) {
	.w3c-explore-topics__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.w3c-explore-topic {
		min-height: 150px;
	}

	.w3c-explore-topic strong {
		font-size: 24px;
	}

	.w3c-must-explore__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Footer social discs (GfG: dark-grey circles, white brand glyphs, LinkedIn first) */
.w3c-footer-social {
	gap: 6px;
	margin-top: 16px;
}

.w3c-footer-social a {
	width: 40px;
	height: 40px;
	background: var(--w3c-ink);
	color: #fff;
}

.w3c-footer-social .w3c-icon,
.w3c-footer-social .w3c-icon--fill {
	width: 20px;
	height: 20px;
}

.w3c-icon--fill {
	fill: currentColor;
	stroke: none;
}

.w3c-social-panel .w3c-icon--fill {
	width: 18px;
	height: 18px;
	color: var(--w3c-ink);
}

#colophon.w3c-site-footer .w3c-footer-social a {
	color: #fff;
}

#colophon.w3c-site-footer .w3c-footer-social a:hover,
#colophon.w3c-site-footer .w3c-footer-social a:focus-visible {
	background: var(--w3c-green);
	color: #fff;
}

/* =========================================================================
 * Listing pages (category, tag, author, date, search), GeeksforGeeks-style.
 * ======================================================================= */
body.w3c-listing-page .w3c-topic-bar {
	display: none;
}

body.w3c-listing-page {
	--w3c-header-height: 51px;
	--w3c-header-total-height: 51px;
}

.w3c-listing-layout {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 22px;
	width: min(100% - 40px, 1400px);
	margin: 0 auto;
	padding: 64px 0 60px;
	font-family: var(--w3c-font-ui);
}

.w3c-listing-layout > * {
	box-sizing: border-box;
	min-width: 0;
}

.w3c-similar-topics {
	position: sticky;
	top: calc(var(--w3c-header-height) + 20px);
	flex: 0 0 285px;
	padding: 22px 16px 10px;
	border: 1px solid var(--w3c-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.w3c-similar-topics h2 {
	clear: none;
	margin: 0 0 14px;
	color: var(--w3c-ink);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.w3c-similar-topics ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.w3c-similar-topics li {
	margin: 0;
}

.w3c-similar-topics a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	color: var(--w3c-text);
	font-size: 17px;
	text-decoration: none;
}

.w3c-similar-topics__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.w3c-similar-topics__count {
	flex: 0 0 auto;
	color: var(--w3c-muted);
	font-size: 12px;
}

.w3c-similar-topics a:hover .w3c-similar-topics__name {
	color: var(--w3c-green);
}

.w3c-listing {
	flex: 0 1 743px;
}

.w3c-listing__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 24px;
}

.w3c-listing__head h1 {
	clear: none;
	margin: 0;
	color: var(--w3c-ink);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
}

.w3c-listing__head strong {
	flex: 0 0 auto;
	color: var(--w3c-ink);
	font-size: 18px;
	font-weight: 600;
}

.w3c-listing__description {
	margin: -10px 0 20px;
	color: var(--w3c-muted);
	font-family: var(--w3c-font-body);
	font-size: 16px;
	line-height: 1.6;
}

.w3c-listing__description p {
	margin: 0;
}

.w3c-listing__tab {
	display: inline-flex;
	align-items: center;
	height: 36px;
	margin: 0 0 20px;
	padding: 0 34px;
	border: 1px solid var(--w3c-green-line);
	border-radius: 999px;
	background: var(--w3c-green-soft-2);
	color: var(--w3c-green);
	font-size: 15px;
	font-weight: 600;
}

.w3c-listing__cards {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.w3c-listing-card {
	margin: 0;
	padding: 20px 20px 18px;
	border: 1px solid var(--w3c-border);
	border-radius: 8px;
	background: #fff;
}

.w3c-listing-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.w3c-listing-card__head h2,
.w3c-listing-card--empty h2 {
	clear: none;
	margin: 0;
	color: var(--w3c-ink);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
}

.w3c-listing-card__head h2 a {
	color: var(--w3c-ink);
	text-decoration: none;
}

.w3c-listing-card__head h2 a:hover {
	color: var(--w3c-green);
}

.w3c-listing-card__head time {
	flex: 0 0 auto;
	padding-top: 3px;
	color: var(--w3c-muted);
	font-size: 13px;
	white-space: nowrap;
}

.w3c-listing-card > p {
	margin: 14px 0 0;
	color: var(--w3c-muted);
	font-family: var(--w3c-font-body);
	font-size: 16px;
	line-height: 1.6;
}

.w3c-listing-card__more {
	color: var(--w3c-ink);
	font-weight: 600;
	text-decoration: none;
}

.w3c-listing-card__more:hover {
	color: var(--w3c-green);
}

.w3c-listing-card__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
}

.w3c-listing-card__tagicon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	color: var(--w3c-green);
}

.w3c-listing-card__tagicon svg {
	width: 100%;
	height: 100%;
}

.w3c-listing-card__tags a {
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--w3c-green-soft);
	color: var(--w3c-green);
	font-size: 14px;
	line-height: 1.3;
	text-decoration: none;
}

.w3c-listing-card__tags a:hover {
	background: var(--w3c-green-soft-2);
}

.w3c-listing-card--empty h2 {
	margin-bottom: 8px;
}

.w3c-listing-card--empty p {
	margin: 0 0 14px;
	color: var(--w3c-muted);
}

.w3c-listing .w3c-pagination {
	margin-top: 26px;
}

.w3c-author-card {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin: 0 0 24px;
	padding: 22px;
	border: 1px solid var(--w3c-border);
	border-radius: 10px;
	background: #fff;
}

.w3c-author-card > img {
	flex: 0 0 auto;
	width: 88px;
	height: 88px;
	border-radius: 50%;
}

.w3c-author-card h1 {
	clear: none;
	margin: 0 0 6px;
	color: var(--w3c-ink);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
}

.w3c-author-card p {
	margin: 0;
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 16px;
	line-height: 1.6;
}

.w3c-author-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.w3c-author-card__links a {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--w3c-ink);
	color: #fff;
}

.w3c-author-card__links a:hover {
	background: var(--w3c-green);
	color: #fff;
}

.w3c-author-card__links .w3c-icon {
	width: 18px;
	height: 18px;
}

body.w3c-listing-page #secondary.widget-area {
	flex: 0 0 304px;
	width: 304px;
	min-width: 304px;
	margin: 0;
	padding: 0;
}

@media screen and (max-width: 1199px) {
	.w3c-listing-layout {
		flex-wrap: wrap;
	}

	.w3c-listing {
		flex: 1 1 auto;
	}

	body.w3c-listing-page #secondary.widget-area {
		display: grid;
		flex: 1 1 100%;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 15px;
		width: 100%;
		min-width: 0;
		padding: 0;
	}
}

@media screen and (max-width: 991px) {
	.w3c-similar-topics {
		display: none;
	}

	.w3c-listing-layout {
		width: min(100% - 32px, 760px);
		padding-top: 28px;
	}

	body.w3c-listing-page #secondary.widget-area {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media screen and (max-width: 576px) {
	.w3c-listing__head,
	.w3c-listing-card__head,
	.w3c-author-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
}

body.w3c-article-page #secondary .widget-title,
body.w3c-listing-page #secondary .widget-title {
	padding: 0;
	border: 0;
	background: none;
}

/* Account menu (logged-in) ------------------------------------------------- */
.w3c-account {
	position: relative;
}

.w3c-account > summary {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--w3c-border);
	border-radius: 50%;
	list-style: none;
	cursor: pointer;
	overflow: hidden;
}

.w3c-account > summary::-webkit-details-marker {
	display: none;
}

.w3c-account > summary img {
	display: block;
	width: 34px;
	height: 34px;
	border-radius: 50%;
}

.w3c-account[open] > summary,
.w3c-account > summary:hover {
	border-color: var(--w3c-green);
}

.w3c-account__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 60;
	width: 220px;
	padding: 8px;
	border: 1px solid var(--w3c-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.w3c-account__name {
	margin: 4px 10px 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--w3c-line);
	color: var(--w3c-ink);
	font-family: var(--w3c-font-ui);
	font-size: 15px;
	font-weight: 600;
}

.w3c-account__panel a {
	display: block;
	padding: 8px 10px;
	border-radius: 6px;
	color: var(--w3c-text);
	font-family: var(--w3c-font-ui);
	font-size: 14px;
	text-decoration: none;
}

.w3c-account__panel a:hover {
	background: var(--w3c-green-soft);
	color: var(--w3c-green-dark);
}

/* Sign-in modal (readers) -------------------------------------------------- */
.w3c-login-modal {
	width: min(100% - 32px, 420px);
	margin: auto;
	padding: 28px 28px 22px;
	border: 0;
	border-radius: 16px;
	background: #fff;
	color: var(--w3c-text);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	font-family: var(--w3c-font-ui);
}

.w3c-login-modal::backdrop {
	background: rgba(17, 24, 28, 0.55);
}

.w3c-login-modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--w3c-muted);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.w3c-login-modal__close:hover {
	background: var(--w3c-green-soft);
	color: var(--w3c-ink);
}

.w3c-login-modal h2 {
	clear: none;
	margin: 0 0 4px;
	color: var(--w3c-ink);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
}

.w3c-login-modal__lede {
	margin: 0 0 18px;
	color: var(--w3c-muted);
	font-size: 14px;
	line-height: 1.5;
}

.w3c-login-modal form p {
	margin: 0 0 14px;
}

.w3c-login-modal label {
	display: block;
	margin-bottom: 6px;
	color: var(--w3c-text);
	font-size: 14px;
	font-weight: 600;
}

.w3c-login-modal .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
}

.w3c-login-modal input[type="text"],
.w3c-login-modal input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--w3c-border-strong);
	border-radius: 8px;
	background: #fff;
	color: var(--w3c-ink);
	font-size: 16px;
	box-shadow: none;
}

.w3c-login-modal input[type="text"]:focus,
.w3c-login-modal input[type="password"]:focus {
	outline: 0;
	border-color: var(--w3c-green);
	box-shadow: 0 0 0 3px rgba(11, 107, 46, 0.2);
}

.w3c-login-modal .login-submit {
	margin: 4px 0 0;
}

.w3c-login-modal input[type="submit"] {
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: var(--w3c-green);
	color: #fff;
	font-family: var(--w3c-font-ui);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.w3c-login-modal input[type="submit"]:hover {
	background: var(--w3c-green-dark);
}

.w3c-login-modal__links {
	margin: 16px 0 0;
	color: var(--w3c-muted);
	font-size: 14px;
	text-align: center;
}

.w3c-login-modal__links a {
	color: var(--w3c-green-dark);
	text-decoration: none;
}

.w3c-login-modal__links a:hover {
	text-decoration: underline;
}

.w3c-login-modal__links span {
	margin: 0 8px;
}

/* =========================================================================
 * W3Colleges premium identity: a light, book-like reading brand.
 * Literata (display + reading), IBM Plex Sans (UI), JetBrains Mono (code).
 * Deep pine green from the logo, gilt gold accent, warm paper canvas,
 * hairline borders and feather-light shadows.
 * ======================================================================= */
body,
.w3c-site-header,
.w3c-site-footer,
.w3c-listing-layout {
	font-family: var(--w3c-font-ui);
}

.w3c-home {
	font-family: var(--w3c-font-ui);
	background: var(--w3c-surface-soft);
}

body.w3c-full-canvas,
body.w3c-full-canvas #page.site {
	background: var(--w3c-surface-soft);
}

body.w3c-article-page,
body.w3c-listing-page {
	background: var(--w3c-surface-soft);
}

.w3c-site-header.site-header {
	border-bottom: 1px solid var(--w3c-line);
}

/* Serif display for every title; a slim gilt rule as the brand mark */
.w3c-section-heading h2,
.w3c-must-explore > h3,
.w3c-explore-topics > header h2,
.w3c-services-intro__copy h2,
.w3c-similar h2,
.w3c-section-list h2,
.w3c-listing__head h1,
.w3c-author-card h1,
.w3c-notify__copy h3,
.w3c-services-cta__copy h3,
.w3c-practice-banner__copy h3,
.w3c-help-banner__copy h2 {
	position: relative;
	padding-bottom: 12px;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.w3c-section-heading h2::after,
.w3c-must-explore > h3::after,
.w3c-explore-topics > header h2::after,
.w3c-services-intro__copy h2::after,
.w3c-similar h2::after,
.w3c-section-list h2::after,
.w3c-listing__head h1::after {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 2px;
	border-radius: 1px;
	background: var(--w3c-accent);
	content: "";
}

.w3c-notify__copy h3,
.w3c-services-cta__copy h3,
.w3c-practice-banner__copy h3,
.w3c-help-banner__copy h2,
.w3c-author-card h1 {
	padding-bottom: 0;
}

/* Cards: hairline borders, almost no shadow, calm hover */
.w3c-course-card,
.w3c-tutorial-card,
.w3c-service-card,
.w3c-listing-card,
.w3c-help-banner,
.w3c-practice-banner,
.w3c-services-cta,
.w3c-notify,
.w3c-author-card,
.w3c-similar-topics,
body.w3c-article-page #secondary .widget,
body.w3c-article-page #secondary .w3c-side-card {
	border: 1px solid var(--w3c-border);
	border-radius: 12px;
	background: var(--w3c-surface);
	box-shadow: var(--w3c-card-shadow);
}

.w3c-course-card:hover,
.w3c-course-card:focus-visible,
.w3c-tutorial-card:hover,
.w3c-tutorial-card:focus-within,
.w3c-listing-card:hover {
	border-color: var(--w3c-border-strong);
	box-shadow: var(--w3c-card-shadow-hover);
	transform: translateY(-2px);
}

.w3c-listing-card {
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.w3c-course-card h3,
.w3c-tutorial-card h3,
.w3c-service-card h3,
.w3c-listing-card__head h2,
.w3c-similar li > a {
	font-family: var(--w3c-font-display);
	font-weight: 600;
	letter-spacing: -0.005em;
}

/* Hero: warm paper, serif headline, gilt keyline */
.w3c-home-hero {
	background: linear-gradient(180deg, #f4f6f0 0%, var(--w3c-surface-soft) 100%);
	border-bottom: 1px solid var(--w3c-line);
}

.w3c-home-hero h1 {
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-size: clamp(34px, 4vw, 50px);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.18;
}

.w3c-home-hero__lede {
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 18px;
	line-height: 1.65;
}

.w3c-home-hero__proof {
	font-family: var(--w3c-font-ui);
}

.w3c-home-hero__proof strong {
	color: var(--w3c-accent-dark);
}

.w3c-home-hero__search {
	border-color: var(--w3c-border-strong);
	box-shadow: 0 1px 3px rgba(28, 38, 32, 0.06);
}

/* Buttons: pine green, quiet outlines */
.w3c-home-hero__links a,
.w3c-home-hero__links a.is-primary,
.w3c-practice-banner__copy > a,
.w3c-help-banner__copy > a,
.w3c-services-cta > a,
.w3c-notify__form button,
.w3c-home-hero__search button,
.w3c-signin,
.w3c-login-modal input[type="submit"] {
	border-radius: 8px;
	font-family: var(--w3c-font-ui);
}

.w3c-signin {
	background: var(--w3c-ink);
	font-weight: 600;
}

/* Next-step tiles: deep pine panels with a gilt arrow */
.w3c-must-explore__item,
.w3c-must-explore__item--violet,
.w3c-must-explore__item--blue,
.w3c-must-explore__item--rose,
.w3c-must-explore__item--green {
	border-radius: 12px;
	background: var(--w3c-brand);
}

.w3c-must-explore__item:hover,
.w3c-must-explore__item:focus-visible {
	background: var(--w3c-brand-dark);
}

.w3c-must-explore__item strong {
	font-family: var(--w3c-font-display);
	font-weight: 600;
}

.w3c-must-explore__item > span {
	color: #e9c778;
}

/* Explore tiles: muted deep tones, serif titles */
.w3c-explore-topic {
	border-radius: 12px;
	box-shadow: none;
}

.w3c-explore-topic strong {
	font-family: var(--w3c-font-display);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.w3c-explore-topic > span {
	border-radius: 8px;
	font-family: var(--w3c-font-ui);
}

.w3c-explore-topic--blue { background: #33506e; }
.w3c-explore-topic--rose { background: #8d3f56; }
.w3c-explore-topic--green { background: #14532d; }
.w3c-explore-topic--violet { background: #4d3d7a; }
.w3c-explore-topic--amber { background: #96691c; }
.w3c-explore-topic--plum { background: #6f3a63; }
.w3c-explore-topic--cyan { background: #14606a; }
.w3c-explore-topic--indigo { background: #3a4480; }
.w3c-explore-topic--teal { background: #0e544a; }
.w3c-explore-topic--olive { background: #5f5c26; }

.w3c-explore-topic:hover,
.w3c-explore-topic:focus-visible {
	box-shadow: var(--w3c-card-shadow-hover);
}

/* Tutorial bar: paper tint */
body.w3c-article-page {
	--gfg-lb-bg: var(--w3c-paper);
	--gfg-lb-open: #eef1e9;
}

.w3c-lb__root {
	background: #eaeee3;
}

.w3c-topic-menu a:hover,
.w3c-topic-menu a:focus,
.w3c-topic-menu .current-menu-item > a {
	border-bottom-width: 2px;
}

/* Article reading: a book page */
.w3c-article__header h1.entry-title {
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

body.w3c-article-page .w3c-article__content,
body.w3c-article-page .w3c-article__content p,
body.w3c-article-page .w3c-article__content li {
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 17px;
	letter-spacing: 0;
	line-height: 1.75;
}

body.w3c-article-page .w3c-article__content p {
	margin: 0 0 16px;
}

body.w3c-article-page .w3c-article__content li {
	margin-bottom: 6px;
}

body.w3c-article-page .w3c-article__content h2,
body.w3c-article-page .w3c-article__content h3,
body.w3c-article-page .w3c-article__content h4 {
	margin: 30px 0 12px;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-weight: 600;
	letter-spacing: -0.008em;
	line-height: 1.3;
}

body.w3c-article-page .w3c-article__content h2 {
	font-size: 25px;
}

body.w3c-article-page .w3c-article__content h3 {
	font-size: 21px;
}

body.w3c-article-page .w3c-article__content h4 {
	font-size: 18px;
}

body.w3c-article-page .w3c-article__content blockquote {
	border-left: 3px solid var(--w3c-accent);
	border-radius: 0 10px 10px 0;
	background: var(--w3c-accent-soft);
	font-style: italic;
	line-height: 1.6;
}

body.w3c-article-page .w3c-article__content pre {
	border: 1px solid var(--w3c-border);
	border-left: 3px solid var(--w3c-green-line);
	border-radius: 10px;
	background: var(--w3c-paper);
	font-size: 13.5px;
	line-height: 1.6;
}

.w3c-toc {
	border: 1px solid var(--w3c-border);
	border-radius: 12px;
	background: var(--w3c-paper);
}

.w3c-toc > p {
	font-family: var(--w3c-font-display);
	font-weight: 600;
}

.w3c-toc li,
body.w3c-article-page .w3c-article__content .w3c-toc li {
	font-family: var(--w3c-font-ui);
	font-size: 14.5px;
	line-height: 1.55;
	margin-bottom: 4px;
}

/* Listing pages read like an index of a book */
.w3c-listing-card > p {
	font-family: var(--w3c-font-body);
	font-size: 15.5px;
	line-height: 1.65;
}

.w3c-listing__tab {
	border-color: var(--w3c-green-line);
	background: var(--w3c-green-soft);
	font-family: var(--w3c-font-ui);
	font-weight: 600;
}

.w3c-listing-card__tags a,
.w3c-moreinfo__tags a {
	border: 1px solid var(--w3c-green-line);
}

.w3c-similar li p,
.w3c-tutorial-card__body > p,
.w3c-course-card__meta,
.w3c-help-banner__copy > span,
.w3c-practice-banner__copy > span,
.w3c-author-card p {
	font-family: var(--w3c-font-body);
}

/* Sidebar cards */
.w3c-side-card__badge {
	background: var(--w3c-accent);
	color: #fff;
}

.w3c-side-card__head h3,
body.w3c-article-page #secondary .widget-title {
	font-family: var(--w3c-font-display);
	font-weight: 600;
}

/* Footer: quiet paper */
#colophon.w3c-site-footer {
	border-top: 1px solid var(--w3c-line);
	background: var(--w3c-paper);
}

#colophon.w3c-site-footer .w3c-footer-social a {
	background: var(--w3c-ink);
}

#colophon.w3c-site-footer .w3c-footer-social a:hover,
#colophon.w3c-site-footer .w3c-footer-social a:focus-visible {
	background: var(--w3c-brand);
}

.w3c-footer-group h2,
.js .w3c-footer-toggle {
	color: var(--w3c-brand);
	font-weight: 600;
}

.w3c-footer-brand > p {
	font-family: var(--w3c-font-body);
	font-size: 15px;
}

/* Sign-in modal */
.w3c-login-modal {
	border-radius: 14px;
}

.w3c-login-modal h2 {
	font-family: var(--w3c-font-display);
	font-weight: 600;
}

/* Sidebar course card: one-line header, no hyphenation, single-line meta */
.w3c-side-card,
body.w3c-article-page #secondary .widget {
	-webkit-hyphens: manual;
	hyphens: manual;
	overflow-wrap: normal;
	word-break: normal;
}

.w3c-side-card__head {
	flex-wrap: nowrap;
	margin-bottom: 6px;
}

.w3c-side-card__head h3 {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-size: 16px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.w3c-side-card__badge {
	flex: 0 0 auto;
	padding: 3px 8px;
	font-size: 11px;
	line-height: 1.3;
}

.w3c-side-card li a {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 15px;
	line-height: 1.35;
}

.w3c-side-card li small {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.w3c-side-card li em {
	font-size: 12px;
}

/* Ad slots: collapse unfilled AdSense units (Google-documented technique) so
 * empty placements never leave blank bands; filled ads keep their space. */
ins.adsbygoogle[data-ad-status="unfilled"] {
	display: none !important;
}

.w3col-entity-placement:has(> ins.adsbygoogle[data-ad-status="filled"]) {
	margin: 18px 0;
}

ins.adsbygoogle.w3c-ad-empty {
	display: none !important;
}

/* Tutorial bar: groups start collapsed; the active one is marked with a green edge */
.w3c-lb__group.is-active > summary {
	padding-left: 12px;
	border-left: 3px solid var(--w3c-green);
	color: var(--w3c-green-dark);
}

.w3c-lb__group.is-active:not([open]) {
	background: var(--gfg-lb-open);
}

/* =========================================================================
 * Listing pages share the article grid exactly: same columns, same gutters,
 * with the Similar Topics rail styled like the article tutorial rail.
 * ======================================================================= */
.w3c-listing-layout {
	gap: 0;
	width: 100%;
	padding: 0;
}

.w3c-similar-topics {
	position: sticky;
	top: var(--w3c-header-height);
	flex: 0 0 18%;
	align-self: flex-start;
	min-width: 18%;
	max-width: 18%;
	min-height: calc(100vh - var(--w3c-header-height));
	max-height: calc(100vh - var(--w3c-header-height));
	margin: 0;
	padding: 0 0 10px;
	overflow-y: auto;
	border: 0;
	border-radius: 0;
	background: var(--w3c-paper);
	box-shadow: none;
	scrollbar-width: thin;
	scrollbar-color: #b6b6b6 var(--w3c-paper);
	transition: top 300ms ease;
}

.w3c-similar-topics h2 {
	margin: 0 0 6px;
	padding: 12px 16px;
	background: #eaeee3;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.w3c-similar-topics h2::after {
	display: none;
}

.w3c-similar-topics a {
	padding: 8px 16px;
	font-size: 14px;
}

.w3c-similar-topics__count {
	font-size: 11.5px;
}

.w3c-listing,
body.w3c-listing-page #primary.w3c-listing {
	box-sizing: border-box;
	flex-basis: calc(80.5% - 320px);
	min-width: calc(80.5% - 320px);
	max-width: calc(80.5% - 320px);
	padding: 24px 20px 55px;
}

body.w3c-listing-page #secondary.widget-area {
	flex: 0 0 320px;
	width: 320px;
	min-width: 320px;
	margin: 24px 0;
	padding: 0 20px 0 25px;
}

.w3c-listing__head h1 {
	font-size: 26px;
}

@media screen and (min-width: 1700px) {
	.w3c-similar-topics {
		flex-basis: 300px;
		min-width: 300px;
		max-width: 300px;
	}

	.w3c-listing,
	body.w3c-listing-page #primary.w3c-listing {
		flex-basis: 1047px;
		min-width: 1047px;
		max-width: 1047px;
	}
}

@media screen and (max-width: 1199px) {
	.w3c-listing-layout {
		flex-wrap: wrap;
	}

	.w3c-listing,
	body.w3c-listing-page #primary.w3c-listing {
		flex-basis: 82%;
		min-width: 82%;
		max-width: 82%;
	}

	body.w3c-listing-page #secondary.widget-area {
		display: grid;
		flex: 1 1 100%;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 15px;
		width: 100%;
		min-width: 0;
		margin: 0 0 30px;
		padding: 0 20px;
	}
}

@media screen and (max-width: 991px) {
	.w3c-similar-topics {
		display: none;
	}

	.w3c-listing-layout {
		width: 100%;
	}

	.w3c-listing,
	body.w3c-listing-page #primary.w3c-listing {
		flex-basis: auto;
		min-width: 0;
		max-width: none;
		width: 100%;
		margin: 15px 30px 30px;
		padding: 0 30px;
	}

	body.w3c-listing-page #secondary.widget-area {
		grid-template-columns: minmax(0, 1fr);
		padding: 0 30px;
	}
}

@media screen and (max-width: 576px) {
	.w3c-listing,
	body.w3c-listing-page #primary.w3c-listing {
		margin: 20px 10px;
		padding: 0 20px;
	}

	body.w3c-listing-page #secondary.widget-area {
		padding: 0 20px;
	}
}

/* =========================================================================
 * Offerings: course landing pages and service pages.
 * ======================================================================= */
.w3c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--w3c-border-strong);
	border-radius: 8px;
	background: var(--w3c-surface);
	color: var(--w3c-ink);
	font-family: var(--w3c-font-ui);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.w3c-btn:hover {
	border-color: var(--w3c-green);
	color: var(--w3c-green-dark);
}

.w3c-btn--primary {
	border-color: var(--w3c-green);
	background: var(--w3c-green);
	color: #fff;
}

.w3c-btn--primary:hover {
	border-color: var(--w3c-green-dark);
	background: var(--w3c-green-dark);
	color: #fff;
}

.w3c-btn--block {
	width: 100%;
}

.w3c-course-hero {
	padding: 56px 24px 48px;
	border-bottom: 1px solid var(--w3c-line);
	background: linear-gradient(180deg, #f4f6f0 0%, var(--w3c-surface-soft) 100%);
}

.w3c-course-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.8fr);
	align-items: start;
	gap: 40px;
}

.w3c-course-hero h1 {
	clear: none;
	margin: 6px 0 0;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-size: clamp(32px, 3.6vw, 46px);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.15;
}

.w3c-course-hero__tagline {
	margin: 16px 0 0;
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 19px;
	line-height: 1.55;
}

.w3c-course-hero__intro,
.w3c-course-hero__intro p {
	margin: 14px 0 0;
	color: var(--w3c-muted);
	font-family: var(--w3c-font-body);
	font-size: 16.5px;
	line-height: 1.7;
}

.w3c-course-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

.w3c-course-hero__level {
	margin: 14px 0 0;
	color: var(--w3c-muted);
	font-size: 14px;
}

.w3c-course-hero__card {
	padding: 22px 22px 20px;
	border: 1px solid var(--w3c-border);
	border-radius: 14px;
	background: var(--w3c-surface);
	box-shadow: var(--w3c-card-shadow);
}

.w3c-course-hero__card-title {
	margin: 0 0 10px;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-size: 18px;
	font-weight: 600;
}

.w3c-course-hero__card ul,
.w3c-process-mini {
	margin: 0;
	padding: 0 0 0 20px;
	color: var(--w3c-text);
	font-size: 15px;
	line-height: 1.5;
}

.w3c-course-hero__card li,
.w3c-process-mini li {
	margin: 0 0 8px;
}

.w3c-course-hero__price {
	margin: 14px 0 12px;
	padding-top: 12px;
	border-top: 1px solid var(--w3c-line);
	color: var(--w3c-accent-dark);
	font-size: 14px;
	font-weight: 600;
}

.w3c-course-section {
	padding: 44px 24px;
}

.w3c-course-section--alt {
	background: var(--w3c-paper);
}

.w3c-course-section .w3c-section-heading {
	margin-bottom: 22px;
}

.w3c-course-count {
	color: var(--w3c-muted);
	font-size: 14px;
}

.w3c-course-outcomes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.w3c-course-outcomes li {
	position: relative;
	margin: 0;
	padding: 4px 0 4px 30px;
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 16.5px;
	line-height: 1.55;
}

.w3c-course-outcomes li::before {
	position: absolute;
	left: 0;
	top: 6px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--w3c-green-soft);
	color: var(--w3c-green);
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	content: "\2713";
}

.w3c-course-project {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.w3c-course-project__item {
	display: flex;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid var(--w3c-border);
	border-radius: 12px;
	background: var(--w3c-surface);
}

.w3c-course-project__item span {
	flex: 0 0 auto;
	color: var(--w3c-accent-dark);
	font-family: var(--w3c-font-mono);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.9;
}

.w3c-course-project__item p {
	margin: 0;
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 15.5px;
	line-height: 1.55;
}

.w3c-curriculum {
	display: grid;
	gap: 10px;
}

.w3c-curriculum__module {
	border: 1px solid var(--w3c-border);
	border-radius: 12px;
	background: var(--w3c-surface);
}

.w3c-curriculum__module > summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	list-style: none;
	cursor: pointer;
}

.w3c-curriculum__module > summary::-webkit-details-marker {
	display: none;
}

.w3c-curriculum__num {
	flex: 0 0 auto;
	color: var(--w3c-accent-dark);
	font-family: var(--w3c-font-mono);
	font-size: 12px;
	font-weight: 700;
}

.w3c-curriculum__title {
	flex: 1 1 auto;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-size: 18px;
	font-weight: 600;
}

.w3c-curriculum__meta {
	flex: 0 0 auto;
	color: var(--w3c-muted);
	font-size: 13px;
}

.w3c-curriculum__module[open] > summary {
	border-bottom: 1px solid var(--w3c-line);
}

.w3c-curriculum__module ol {
	margin: 0;
	padding: 12px 18px 16px 52px;
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 15.5px;
	line-height: 1.6;
}

.w3c-curriculum__module li {
	margin: 0 0 6px;
}

.w3c-course-two-col {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
}

.w3c-course-two-col h2 {
	margin: 0 0 12px;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-size: 22px;
	font-weight: 600;
}

.w3c-course-list {
	margin: 0;
	padding: 0 0 0 20px;
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 16px;
	line-height: 1.6;
}

.w3c-course-list li {
	margin: 0 0 6px;
}

.w3c-stack-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.w3c-stack-tags li {
	margin: 0;
	padding: 6px 12px;
	border: 1px solid var(--w3c-green-line);
	border-radius: 999px;
	background: var(--w3c-green-soft);
	color: var(--w3c-green-dark);
	font-size: 13.5px;
	font-weight: 600;
}

.w3c-instructor {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	padding: 26px;
	border: 1px solid var(--w3c-border);
	border-radius: 14px;
	background: var(--w3c-surface);
}

.w3c-instructor > img {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	border-radius: 50%;
}

.w3c-instructor h2 {
	clear: none;
	margin: 4px 0 2px;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-size: 24px;
	font-weight: 600;
}

.w3c-instructor__title {
	margin: 0 0 10px;
	color: var(--w3c-muted);
	font-size: 14px;
}

.w3c-instructor p {
	margin: 0 0 10px;
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 16px;
	line-height: 1.65;
}

.w3c-instructor a,
.w3c-course-service a {
	color: var(--w3c-green-dark);
	font-weight: 600;
	text-decoration: none;
}

.w3c-faq {
	display: grid;
	gap: 8px;
}

.w3c-faq__item {
	border: 1px solid var(--w3c-border);
	border-radius: 10px;
	background: var(--w3c-surface);
}

.w3c-faq__item > summary {
	padding: 14px 18px;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-size: 16.5px;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

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

.w3c-faq__item p {
	margin: 0;
	padding: 0 18px 16px;
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 15.5px;
	line-height: 1.65;
}

.w3c-course-service {
	margin: 18px 0 0;
	color: var(--w3c-muted);
	font-size: 15px;
	text-align: center;
}

/* Services */
.w3c-service-index {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.w3c-service-index__card {
	--w3c-card-accent: var(--w3c-green);
	--w3c-card-tint: var(--w3c-green-soft);
	--w3c-card-line: var(--w3c-green-line);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	border: 1px solid var(--w3c-border);
	border-radius: 12px;
	background: var(--w3c-surface);
	color: var(--w3c-text);
	text-decoration: none;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.w3c-service-index__card:hover {
	border-color: var(--w3c-border-strong);
	box-shadow: var(--w3c-card-shadow-hover);
	transform: translateY(-2px);
}

.w3c-service-index__card h3 {
	clear: none;
	margin: 0;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-size: 19px;
	font-weight: 600;
}

.w3c-service-index__card p {
	margin: 0;
	color: var(--w3c-muted);
	font-family: var(--w3c-font-body);
	font-size: 15px;
	line-height: 1.6;
}

.w3c-service-index__more {
	margin-top: auto;
	color: var(--w3c-green-dark);
	font-size: 14px;
	font-weight: 600;
}

.w3c-service-card--testing { --w3c-card-accent: #0e544a; --w3c-card-tint: #e9f3f1; --w3c-card-line: #bfdad4; }
.w3c-service-card--wordpress { --w3c-card-accent: #2f4d7a; --w3c-card-tint: #eaf0f8; --w3c-card-line: #c3d1e6; }
.w3c-service-card--redesign { --w3c-card-accent: #96691c; --w3c-card-tint: #faf3e3; --w3c-card-line: #e8d5a8; }

.w3c-process {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.w3c-process li {
	margin: 0;
	padding: 18px 20px;
	border: 1px solid var(--w3c-border);
	border-radius: 12px;
	background: var(--w3c-surface);
}

.w3c-process li span {
	display: block;
	color: var(--w3c-accent-dark);
	font-family: var(--w3c-font-mono);
	font-size: 12px;
	font-weight: 700;
}

.w3c-process li strong {
	display: block;
	margin: 6px 0 6px;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-size: 18px;
	font-weight: 600;
}

.w3c-process li p {
	margin: 0;
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 15px;
	line-height: 1.55;
}

.w3c-models {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.w3c-models__item {
	padding: 20px;
	border: 1px solid var(--w3c-border);
	border-radius: 12px;
	background: var(--w3c-surface);
}

.w3c-models__item h3 {
	clear: none;
	margin: 0 0 8px;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-size: 18px;
	font-weight: 600;
}

.w3c-models__item p {
	margin: 0;
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 15px;
	line-height: 1.55;
}

.w3c-casestudy {
	margin-top: 24px;
	padding: 24px 26px;
	border: 1px solid var(--w3c-green-line);
	border-radius: 14px;
	background: var(--w3c-surface);
}

.w3c-casestudy h3 {
	clear: none;
	margin: 2px 0 8px;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-size: 22px;
	font-weight: 600;
}

.w3c-casestudy p:last-child {
	margin: 0;
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 16px;
	line-height: 1.65;
}

/* Inquiry form */
.w3c-inquiry {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 32px;
	padding: 30px;
	border: 1px solid var(--w3c-border);
	border-radius: 14px;
	background: var(--w3c-surface);
	box-shadow: var(--w3c-card-shadow);
}

.w3c-inquiry__eyebrow {
	margin: 0 0 6px;
	color: var(--w3c-green);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.w3c-inquiry__copy h2 {
	clear: none;
	margin: 0 0 10px;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.25;
}

.w3c-inquiry__copy p {
	margin: 0;
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 16px;
	line-height: 1.65;
}

.w3c-inquiry__book {
	display: inline-block;
	margin-top: 14px;
	color: var(--w3c-green-dark);
	font-weight: 600;
	text-decoration: none;
}

.w3c-inquiry__form {
	display: grid;
	gap: 14px;
	margin: 0;
}

.w3c-inquiry__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.w3c-inquiry__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.w3c-inquiry__form label {
	display: grid;
	gap: 6px;
	color: var(--w3c-text);
	font-size: 13.5px;
	font-weight: 600;
}

.w3c-inquiry__form input,
.w3c-inquiry__form select,
.w3c-inquiry__form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 42px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--w3c-border-strong);
	border-radius: 8px;
	background: var(--w3c-surface);
	color: var(--w3c-ink);
	font-family: var(--w3c-font-ui);
	font-size: 15px;
	box-shadow: none;
}

.w3c-inquiry__form textarea {
	min-height: 120px;
	resize: vertical;
}

.w3c-inquiry__form input:focus,
.w3c-inquiry__form select:focus,
.w3c-inquiry__form textarea:focus {
	outline: 0;
	border-color: var(--w3c-green);
	box-shadow: 0 0 0 3px var(--w3c-green-ring);
}

.w3c-inquiry__form button {
	justify-self: start;
	min-height: 46px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: 8px;
	background: var(--w3c-green);
	color: #fff;
	font-family: var(--w3c-font-ui);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.w3c-inquiry__form button:hover {
	background: var(--w3c-green-dark);
}

.w3c-inquiry__status {
	margin: 0;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
}

.w3c-inquiry__status--ok {
	background: var(--w3c-green-soft);
	color: var(--w3c-green-dark);
}

.w3c-inquiry__status--error {
	background: #fdf1f1;
	color: #9f2f4d;
}

@media screen and (max-width: 959px) {
	.w3c-course-hero__inner,
	.w3c-course-two-col,
	.w3c-inquiry {
		grid-template-columns: minmax(0, 1fr);
	}

	.w3c-service-index,
	.w3c-process,
	.w3c-models {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 639px) {
	.w3c-course-hero {
		padding: 36px 16px 32px;
	}

	.w3c-course-section {
		padding: 34px 16px;
	}

	.w3c-course-outcomes,
	.w3c-course-project,
	.w3c-service-index,
	.w3c-process,
	.w3c-models,
	.w3c-inquiry__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.w3c-instructor {
		flex-direction: column;
	}

	.w3c-inquiry {
		padding: 22px;
	}
}

/* Services index cards must ignore the home-page bento spans */
.w3c-service-index .w3c-service-index__card {
	grid-column: auto;
	grid-row: auto;
	min-height: 0;
}

.w3c-service-index .w3c-service-card__icon {
	align-self: flex-start;
}


/* -------------------------------------------------------------------------
 * Advertising: fixed placements only (see inc/w3colleges-ads.php)
 * ---------------------------------------------------------------------- */
.w3c-ad {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 28px 0;
	overflow: hidden;
}

.w3c-ad__label {
	font: 600 10px/1 var(--w3c-font-ui);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--w3c-muted);
}

.w3c-ad ins.adsbygoogle {
	max-width: 100%;
	background: transparent;
}

.w3c-ad--sidebar,
.w3c-ad--sidebar_tower,
.w3c-ad--listing {
	margin: 0 0 20px;
	padding: 14px 10px 12px;
	border: 1px solid var(--w3c-border);
	border-radius: 14px;
	background: var(--w3c-surface);
	box-shadow: var(--w3c-card-shadow);
}

.w3c-ad--listing {
	margin: 0;
	padding: 16px;
}

.w3c-ad--in_article {
	clear: both;
}

.w3c-ad--after_content {
	margin: 4px 0 28px;
}

/* Unfilled units collapse together with their frame and label. */
.w3c-ad:has(> ins.adsbygoogle[data-ad-status="unfilled"]),
.w3c-ad:has(> ins.adsbygoogle.w3c-ad-empty) {
	display: none;
}

/* The tower stays in view while reading: the column stretches to the article height. */
body.w3c-classic #secondary.widget-area:has(.w3c-sidebar-sticky) {
	align-self: stretch;
}

.w3c-sidebar-sticky {
	position: sticky;
	top: calc(var(--w3c-header-height) + 20px);
}

@media (max-width: 991px) {
	.w3c-ad--sidebar_tower,
	.w3c-sidebar-sticky {
		display: none;
	}
}

/* Advanced Ads in-content placements get the same quiet frame as theme ads. */
.w3c-article__content .w3col-entity-placement {
	clear: both;
	margin: 28px 0;
	text-align: center;
}

.w3c-article__content .w3col-entity-placement:has(> ins.adsbygoogle[data-ad-status="filled"])::before {
	content: "Advertisement";
	display: block;
	margin-bottom: 6px;
	font: 600 10px/1 var(--w3c-font-ui);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--w3c-muted);
}

.w3c-article__content .w3col-entity-placement:not(:has(> ins.adsbygoogle[data-ad-status="filled"])) {
	margin: 0;
}