/* Importing Poppins and Inter */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

html {
	font-size: 16px !important;
	scroll-behavior: smooth;
}
body::before {
	content: "You’re viewing a simplified version of this page while the full site loads in on your connection";
	display: block;
	padding: 1rem;
	color: #000;
	font-weight: 500;
	background-color: #fbe6a6;
	text-align: left;
	font-size: 1rem;
}

html.js-loaded body::before {
	display: none;
}
body {
	font-family: "Inter", sans-serif !important;
	min-height: 100vh;
	opacity: 0;
	animation: bodyFadeIn 0.15s ease-in-out 2.5s forwards;
}

@keyframes bodyFadeIn {
	to {
		opacity: 1;
	}
}

.section-nav-container,
.breadcrumb-container,
.site-sidebar-search,
.custom-navbar,
.featured-content,
.featured-content-label {
	opacity: 0;
	transition: opacity 0.05s ease-in-out;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Poppins", sans-serif !important;
}
p {
	color: #333;
	line-height: 1.45em;
	font-size: 1rem;
	font-weight: 300;
}
a {
	color: #0054bc;
}
article p {
	color: #000000;
	line-height: 1.6em;
	font-size: 1rem;
	font-weight: 400;
}

/* The main title of a documentation piece */
article h2.title {
	color: #000;
	font-weight: 600;
	margin-bottom: 1rem !important;
	font-size: clamp(1.3rem, 6vw, 1.8rem);
	line-height: 1.55em;
}
article h3.title,
article h3.title a {
	color: #000;
	font-weight: 600;
	font-size: 1.3rem;
	line-height: 1.55em;
}
article h4.title {
	color: #000;
	font-weight: 600;
	font-size: 1.1rem;
	line-height: 1.55em;
}

.custom-navbar {
	background-color: #05224e;
	padding: 1rem;
	color: #fff;
	transition: max-height 0.5s ease-in-out;
	min-height: 63px;
	display: grid;
	align-content: center;
}

.custom-navbar-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.navbar-section {
	flex: 0 1 auto;
}
.site-body-row {
	display: flex;
	margin-right: unset;
	margin-left: unset;
	/* max-width: 100vw; */
	box-sizing: border-box;
	overflow: visible;
}
.site-content {
	margin-left: 0;
	width: 100%;
	padding: 0rem !important;
	box-sizing: border-box;
}
/* Documentation content wrapper - contains article and section nav */
.doc-content-wrapper {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
}
.doc-content-wrapper .site-content {
	flex: 1;
	max-width: 1000px;
	width: auto;
	padding-top: 0rem !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.doc-content-wrapper .section-nav-container {
	position: sticky !important;
	top: 0rem !important;
	padding-top: 5rem !important;
	right: unset !important;
	left: unset !important;
	max-height: 100vh;
	min-width: 200px;
	flex-shrink: 0;
}
span.guilabel {
	font-weight: 600;
}

/* Sidebar Content */
aside.site-sidebar {
	background-color: #fff;
	color: #000 !important;
	border-right: 1px solid #ccd1d4;
	top: 0;
	position: sticky;
	max-height: 100vh;
	transition: transform 0.3s ease, width 0.3s ease;
	overflow: visible;
	min-width: 250px;
	max-width: 315px !important;
	width: 35% !important;
	display: block;
}

/* Inner wrapper for sidebar content that handles scrolling */
aside.site-sidebar .sidebar-content-wrapper {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 100vh;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0.1s ease;
}

/* Sidebar Toggle Button */
.sidebar-toggle-btn {
	position: absolute;
	right: -31px;
	top: 2.6rem;
	transform: translateY(-50%);
	width: 30px;
	height: 40px;
	background-color: #e0eaf6;
	border: none;
	border-radius: 0 8px 8px 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000;
	z-index: 1000;
	transition: background-color 0.2s ease;
}

.sidebar-toggle-btn:hover {
	background-color: #0a3570;
	color: #fff;
}
.sidebar-toggle-btn:focus-visible {
	outline: 2px solid #0a3570;
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px rgba(10, 53, 112, 0.2);
}

.sidebar-toggle-btn .toggle-icon {
	transition: transform 0.3s ease;
	transform: rotate(180deg);
}

/* Collapsed sidebar state */
aside.site-sidebar.sidebar-collapsed {
	width: 0 !important;
	min-width: 0 !important;
	border-right: none;
}

/* Hide all sidebar content except the toggle button when collapsed */
aside.site-sidebar.sidebar-collapsed .sidebar-content-wrapper {
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
}

aside.site-sidebar.sidebar-collapsed .sidebar-toggle-btn {
	right: -30px;
}

aside.site-sidebar.sidebar-collapsed .toggle-icon {
	transform: rotate(0deg);
}
.nav-site-sidebar {
	margin-top: 0;
	margin-bottom: 2rem;
	overflow: hidden;
}
.nav-site-sidebar li {
	padding-top: 0.95rem;
	padding-bottom: 0.95rem;
	padding-left: 1rem;
	padding-right: 1rem;
	position: relative;
}
/* Add padding-bottom only to the last child to prevent double padding between adjacent items */
.nav-site-sidebar li:last-child {
	padding-bottom: 0.95rem;
}
/* Border between top-level sidebar items */
.nav-site-sidebar > li:not(:first-child) {
	border-top: 1px solid #d8dee4;
}

/* Hide gray border when top-level <li> is active or contains active item - blue border takes priority */
.nav-site-sidebar > li.active:not(:first-child),
.nav-site-sidebar > li:has(.active):not(:first-child) {
	border-top: none;
}
/* Hide gray border on the next item after active item since active item has blue bottom border */
.nav-site-sidebar > li.active + li,
.nav-site-sidebar > li:has(.active) + li {
	border-top: none;
}
.nav-site-sidebar li a {
	color: #000;
	margin: 0;
	font-size: 0.95rem !important;
	padding-right: 1rem !important;
}
.nav-site-sidebar .active > a {
	color: #000;
	font-weight: 600 !important;
}
/* Full-width background for active sidebar items - highlight entire top-level <li> */
/* Target top-level <li> that is active itself OR contains any active item at any nesting level */
.nav-site-sidebar > li.active::before,
.nav-site-sidebar > li:has(.active)::before {
	content: "";
	position: absolute;
	left: -5rem;
	right: -5rem;
	top: 0;
	bottom: 0;
	background-color: #f6faff;
	border-top: 1px solid #7fa2cd;
	border-bottom: 1px solid #7fa2cd;
	z-index: -1;
}
/* Ensure anchor tags have position relative for pseudo-element positioning */
.nav-site-sidebar li.active > a {
	color: #0054bc;
	position: relative;
}

/* Add margin to the first item in the sidebar when it's active to create space from the "Topics" title */
.nav-site-sidebar > li.active:first-child,
.nav-site-sidebar > li:has(.active):first-child {
	margin-top: 1rem;
}

.nav-site-sidebar ul a {
	color: #000;
	font-size: 1rem;
}
.nav-site-sidebar ul .active > a {
	color: #596171;
	font-weight: 600 !important;
}
.site-sidebar-header {
	display: none; /* This hides the logo from the top of the sidebar */
}
.search-field,
.portal-header .search-field {
	background-color: #fff;
	color: #000 !important;
	border-radius: 30px !important;
	padding: 0.5rem 1rem;
}
.search-field::placeholder {
	color: #6b6b6bdc !important;
	opacity: 1 !important;
}
.custom-navbar .search-field::placeholder {
	color: #ffffffdc !important;
	opacity: 1 !important;
}
.search-field:focus-visible,
.portal-header .search-field:focus-visible,
.site-sidebar-search .search-field:focus-visible {
	outline: 2px solid #0054bc;
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px rgba(0, 84, 188, 0.2);
}
ul.nav-site-sidebar li ul li {
	position: relative;
}
/*
ul.nav-site-sidebar li ul li::after {
	content: "";
	height: 1px;
	width: 80%;
	position: absolute;
	right: 50%;
	bottom: 0;
	background-color: #e5e5e5;
	transform: translateX(50%);
} */
ul.nav-site-sidebar li ul li ul li {
	border-bottom: none;
}
a.topic-link {
	padding: 0 !important;
	margin: 0 1rem;
}
a.topic-link.section {
	display: flex;
	font-size: 1rem;
}

/* Nested list indentation */
.nav-site-sidebar li ul li {
	padding-top: 0.95rem;
	padding-bottom: 0;
	padding-left: 1rem;
	padding-right: 0;
}
/* Add padding-bottom only to the last nested child to prevent double padding between adjacent items */
.nav-site-sidebar li ul li:last-child {
	padding-bottom: 0.6rem;
}
.nav-site-sidebar ul .active > a {
	color: #3d66b9;
	font-weight: 700 !important;
}
/*
.active.opened a {
	border-left: 4px solid #7cb8ff !important;
	padding-left: 0.5rem !important;
} */

/* Toolbar + Breadcrumbs */
.toolbar {
	-webkit-box-shadow: none;
	box-shadow: none;
	background-color: unset;
	padding: 0px;
	min-height: unset;
	margin-bottom: 1rem;
	position: relative !important;
}
.toolbar * {
	color: #000;
}
.breadcrumb-container {
	margin-left: 0 !important;
	padding-left: 0 !important;
	position: relative;
}
.breadcrumb-container::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100px;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), #fffffff5 50%);
	pointer-events: none;
}
ul.breadcrumb {
	font-size: 0.75rem;
	white-space: nowrap;
	overflow-x: auto;
	padding-bottom: 10px; /* So user can see there's a scrollbar */
}
ul.breadcrumb::-webkit-scrollbar {
	display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}
.breadcrumb .fa-house {
	color: #6d757d;
	font-size: 18px;
	width: 18px;
	height: 18px;
	display: inline-block;
	transform: translate(-1px, 1px);
}
/* Home icon clickable area - 24x24 */
ul.breadcrumb li:first-child a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 3px;
}
ul.breadcrumb li.breadcrumb-link:nth-child(2) a {
	padding: 0.25rem 0.75rem;
	border-radius: 30px;
	color: #000;
	margin-bottom: 0.5rem;
	display: inline-block;
	color: #000 !important;
	font-weight: 500 !important;
}
ul.breadcrumb li.breadcrumb-link:nth-child(2) a:focus-visible {
	outline: 2px solid #0054bc;
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px rgba(0, 84, 188, 0.2);
}
.breadcrumb-link a {
	color: #000 !important;
	font-weight: 400 !important;
}

ul.itemizedlist ::marker {
	color: #000;
}
.warning h3,
.note h3,
.important h3,
.caution h3,
.tip h3 {
	line-height: inherit !important;
}
.search-container h2 {
	font-size: 2rem;
	color: #000;
	font-weight: 600;
	margin-top: 0;
}
.searchresults h3 {
	color: #000;
	margin: 0 0 1rem 0;
	font-size: 1.4rem;
	font-weight: 500;
}
.search-highlight {
	background-color: #f9fb49 !important;
}

.navbar-left {
	display: flex;
	align-items: center;
	gap: 16px;
}
.navbar-logo-separator {
	display: inline-block;
	width: 1px;
	height: 28px;
	background-color: rgba(255, 255, 255, 0.3);
	flex-shrink: 0;
}
.custom-logo-product {
	max-width: clamp(200px, 25vw, 250px);
	height: auto;
}
.custom-logo:not(.custom-logo-product) {
	height: 32px;
	width: auto;
}
.custom-footer {
	background-color: #051837;
	color: #fff;
	padding: 3rem 1rem 2rem 1rem;
}
.custom-footer-content {
	max-width: 1350px;
	margin: 0 auto;
}
.custom-footer-grid {
	display: grid;
	grid-template-columns: 1fr 3fr;
	margin-bottom: 2rem;
	gap: 2rem;
}
.custom-footer-logo {
	max-width: 180px;
	margin-bottom: 1rem;
}
.custom-footer-socials a {
	color: #fff;
	margin-right: 0.5rem;
}
.custom-footer-socials a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.custom-footer-links {
	list-style: none;
	padding-left: 0;
}
.custom-footer-links-list {
	list-style: none;
	padding: 0;
	margin: 0;
	column-count: 4;
	column-gap: 2rem;
}
.custom-footer-links-list li {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin-bottom: 0.75rem;
	display: inline-block;
	width: 100%;
}
.custom-footer-links a {
	margin-bottom: 0.75rem;
}
.custom-footer-links a,
.custom-footer-links-list a {
	color: white;
	text-decoration: none;
	display: block;
	font-size: 0.8rem;
}
.custom-footer-links a:hover,
.custom-footer-links-list a:hover {
	text-decoration: underline;
}
.custom-footer-links a:focus-visible,
.custom-footer-links-list a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.custom-footer-copyright {
	color: #adb5be;
	font-size: 0.8rem;
}
.site-body-container {
	max-width: 100vw;
	padding-right: unset;
	padding-left: unset;
	margin-right: unset;
	margin-left: unset;
	display: grid;
	grid-template-rows: auto 1fr auto;
}
.site-body {
	display: grid;
	grid-template-rows: auto 1fr;
	height: 100vh;
}
.custom-topic-title {
	padding-left: 1rem;
	font-size: 1.05rem;
	font-weight: 600;
	font-family: "Poppins", sans-serif;
	margin-bottom: 0;
	margin-top: 1.5rem;
	color: #000;
}

.portal-header {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	text-align: left !important;
	height: unset;
	padding-top: clamp(2rem, 5vw, 5rem) !important;
	padding-right: 1.5rem !important;
	padding-left: 1.5rem !important;
	padding-bottom: clamp(5rem, 10vw, 8rem) !important;
	background-color: #071835;
}
.portal-header::after {
	background: unset;
}
.portal-header .inner {
	max-width: 1100px;
	margin: 0 auto;
}
.portal-search button {
	display: none !important;
}
/* Hides the paligo logo on the portal page before the javascript removes it all together */
.logo-link {
	display: none;
}
.portal-header h1 {
	font-weight: 600;
	font-size: clamp(1.5rem, 6vw, 2.7rem);
	margin-bottom: 1rem;
	margin-top: 0;
}
.portal-header .subline {
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.4em;
	margin: 0 0 1.5rem 0;
	max-width: 600px;
	color: #fff;
}
.portal-shadowbox {
	box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.1);
	padding: 2.5rem 3rem;
	position: relative;
	z-index: 10;
	background-color: #fff;
	margin-top: -50px;
}
.portal-shadowbox-grid {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 3rem;
}
.portal-shadowbox-left p {
	color: #000;
	font-size: 1rem;
	line-height: 1.7em;
}
.publication-contents {
	width: 100% !important;
}
.featured-content {
	margin-bottom: 0;
}
.featured-content .publication-contents {
	margin-bottom: 1.5rem;
}
.featured-content .publication-contents h4 {
	margin-bottom: 0;
	font-size: 0.95rem;
}
.featured-content .publication-contents h4 .toc-count {
	color: #0054bc;
	background-color: unset;
	display: grid;
	justify-content: center;
	align-content: center;
	font-size: 0.8rem;
}
.featured-content .publication-contents a {
	color: #000;
	font-weight: 400;
}
.featured-content .publication-contents a:hover {
	color: #0054bc;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.portal-content h2 {
	color: #000;
	font-size: clamp(1.3rem, 3vw, 1.45rem);
	font-weight: 600;
	margin: 0 0 1.5rem 0;
	text-align: left;
}
.portal-content h3 {
	color: #000;
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.5rem 0;
	text-align: left;
}
.search-container h2 {
	margin-bottom: 0.5rem;
}
a.video-library-link {
	color: #fff;
	margin-top: 1rem;
	display: block;
	font-size: 0.8rem;
	text-decoration: underline;
	font-weight: 600;
	text-underline-offset: 3px;
}
a.video-library-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.portal-publications .inner-row {
	justify-content: left;
}
.portal-single-publication {
	width: 33%;
}
.portal-single-publication a {
	border: 1px solid #dedede;
	padding: 1rem 1.5rem;
	-webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
	box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
	border-left: 3px solid #dfdfdf;
	transition: 0.2s;
	display: grid;
	align-content: center;
	position: relative;
}
.portal-single-publication a::before {
	content: "";
	position: absolute;
	top: 0;
	left: -3px;
	height: 100%;
	width: 0;
	background-color: #dedede;
	transition: 0.2s;
}
.portal-single-publication a:hover {
	-webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
	box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}
.portal-single-publication a:hover::before {
	background-color: #0054bc;
	width: 6px;
}
.portal-single-publication a:focus-visible {
	outline: 2px solid #0054bc;
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px rgba(0, 84, 188, 0.2);
}

.portal-single-publication a .publication-icon {
	display: none;
}
.portal-single-publication h3 {
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.35em;
	margin-bottom: 0;
}
.banner-tag {
	border-radius: 30px;
	padding: 0.25rem 0.75rem;
	color: #000;
	font-size: 0.75rem;
	margin-bottom: 0.5rem;
	display: inline-block;
	font-weight: 500;
}

/* Find Your Institution Section */
/* .find-your-institution portal block removed — replaced by landing page widget */

/* Resources for Developers Section */
.resources-for-developers {
	background: #f8f9fa;
	padding: 4rem 2rem;
	text-align: center;
}
.resources-for-developers > p {
	font-size: 1.15rem;
	color: #333;
	margin-top: -0.5rem;
	margin-bottom: 2rem;
}
.resources-for-developers-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	text-align: left;
	max-width: 1100px;
	margin: 0 auto;
	align-items: center;
}
.resources-for-developers-grid img {
	width: 50%;
	margin: 0 auto;
	display: block;
}

/* Support Banner Section */
.support-banner {
	background: linear-gradient(174deg, #e1ebf3 -28.97%, rgba(225, 235, 243, 0.44) 61.56%, rgba(253, 254, 254, 0) 134.77%);
	padding: 4rem 2rem;
	text-align: center;
}
.support-banner h2 {
	text-align: center;
}
.support-banner > p {
	font-size: 1.15rem;
	color: #333;
	margin-top: -0.5rem;
	margin-bottom: 2rem;
}

/* Extra Links Banner Section */
.extra-links-banner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding: 4rem 2rem;
	max-width: 1140px;
	margin: 0 auto;
	gap: 3rem;
}
.extra-links-column {
	display: flex;
	flex-direction: column;
	max-width: 300px;
}
.extra-links-icon {
	margin-bottom: 1.5rem;
	color: #0054bc;
	font-size: 1.7rem;
}
.extra-links-column p {
	color: #666;
	font-size: 0.9rem;
}
.extra-links-column a {
	font-weight: 600;
	color: #0054bc;
	text-decoration: none;
	font-size: 0.85rem;
	text-underline-offset: 3px;
	text-wrap: balance;
}
.extra-links-column a:hover {
	text-decoration: underline;
}
.extra-links-column a i {
	font-size: 80%;
	margin-left: 0.35rem;
}
.extra-links-column a:focus-visible {
	outline: 2px solid #0054bc;
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px rgba(0, 84, 188, 0.2);
}
.portal-rounded-button {
	border: 1px solid #0054bc;
	padding: 0.65rem 2rem;
	border-radius: 30px;
	color: #0054bc;
	font-weight: 600;
	display: inline-block;
	font-size: 0.9rem;
	transition: 0.2s;
}
.portal-rounded-button:hover {
	background-color: #0054bc;
	color: #fff;
}
.portal-rounded-button:focus-visible {
	outline: 2px solid #0054bc;
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px rgba(0, 84, 188, 0.2);
}
.show-all-categories {
	text-align: left;
	margin: 0 auto 3rem 0;
}
.portal-search-result {
	background-color: #fff;
	box-sizing: border-box;
	padding: unset;
	position: relative;
	max-height: 800px;
	overflow: scroll;
	margin-bottom: 4rem;
	border-bottom: 1px solid #d8d8d8;
}
article {
	margin-top: 0 !important;
	max-width: 1200px !important;
	padding-left: 0rem !important;
	padding-right: 0rem !important;
	float: unset !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100% !important;
}
.topic-content {
	max-width: 1000px !important;
}
article h1.title {
	color: #000;
	font-size: clamp(1.7rem, 6vw, 2.2rem);
	margin-bottom: 1rem !important;
	font-weight: 600;
}
.languages {
	float: unset !important;
	color: #fff;
	width: auto;
	padding-right: 0.5rem;
}
.languages button {
	background-color: unset !important;
	color: #fff !important;
	border: 0 !important;
	padding-left: 0.25rem !important;
}
.languages button:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: 2px !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}
.languages .caret {
	margin-left: 0.4rem !important;
	transform: rotate(180deg);
	transition: transform 0.3s ease;
}
.languages.open .caret {
	transform: rotate(360deg);
}
.languages .fa-globe {
	transform: translateY(1px);
}
.languages .dropdown-menu {
	top: auto !important;
	bottom: unset !important;
	margin-bottom: unset !important;
	right: 10px !important;
}
.portal-search-container {
	position: relative;
}
.portal-search-container .fa-magnifying-glass {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: #757575;
	z-index: 1;
}
.portal-search-container .portal-search-input-wrapper {
	position: relative;
	width: 100%;
	display: inline;
}
.portal-search-container .search-field {
	position: relative;
	width: 100%;
}
.portal-search-container .search-clear-btn {
	position: absolute;
	right: 0px;
	top: 11px;
	transform: translateY(-50%);
	color: #757575 !important;
	cursor: pointer;
	background: transparent;
	border: none;
	padding: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 2;
	width: auto;
	height: auto;
	background-color: unset !important;
}
.portal-search-container .search-clear-btn:hover {
	color: #333;
}
.portal-search-container .search-clear-btn:focus {
	outline: none;
}
.portal-search-container .search-clear-btn i {
	font-size: 0.875rem;
	display: block;
	color: inherit;
}
.portal-header .search-field {
	padding-left: 45px !important;
	padding-right: 45px !important;
}
.section-nav-container {
	top: 0rem !important;
	padding-top: 4rem !important;
	position: sticky !important;
	max-height: 100vh;
	min-width: 200px;
}

.navbar-right {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-right: unset !important;
}

.custom-navbar-links {
	display: flex;
	gap: 1.5rem;
}

.custom-navbar-links a {
	color: #fff;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	position: relative;
	transition: all 0.3s ease;
}

.custom-navbar-links a::after {
	content: "";
	position: absolute;
	bottom: -0.25rem;
	left: 50%;
	width: 0;
	height: 2px;
	background-color: #fff;
	transition: all 0.3s ease;
	transform: translateX(-50%);
}

.custom-navbar-links a:hover {
	text-decoration: none;
}

.custom-navbar-links a:hover::after {
	width: 100%;
}
.custom-navbar-links a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.doc-search-container {
	position: relative;
}
.doc-search-container .fa-magnifying-glass {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
}
.doc-search-container .search-clear-btn {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	display: none;
	z-index: 10;
}
.doc-search-container .search-clear-btn:hover {
	opacity: 0.8;
}
.site-sidebar-search .search-field {
	padding-left: 45px !important;
	padding-right: 45px !important;
	border-radius: 8px !important;
	background-color: #ffffff3b !important;
	border: 1px solid #ffffff26;
	color: #fff !important;
}
.site-sidebar-search .search-field:placeholder-shown {
	padding-right: 15px !important;
	width: clamp(240px, 24vw, 350px);
}
.search-result-breadcrumbs {
	color: #000000;
	font-weight: 500;
	font-size: 0.8rem;
}
li.searchresultitem {
	border-bottom: 1px solid #eee;
	padding: 10px 0 10px 0 !important;
	cursor: pointer;
}
li.searchresultitem:focus-visible {
	outline: 2px solid #0054bc;
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px rgba(0, 84, 188, 0.2);
}
h3.searchresulttitle {
	color: #000000;
	margin-top: 1rem;
	font-weight: 600;
}
.date-modified,
.publication-date {
	float: unset !important;
	margin-right: unset !important;
	font-weight: 500;
	font-size: 0.85rem;
	margin-bottom: 1.5rem;
	color: #6d757d;
}
article#search-result-wrapper {
	position: static;
	background-color: #ffffff;
	padding: 0 !important;
	max-width: 1200px !important;
}
article .search-container {
	padding: 2rem !important;
}
.theme1 .section-nav.nav li.active > a {
	color: #0054bc;
	opacity: 1 !important;
}
.site-content a {
	color: #0054bc !important;
	text-decoration: none;
	font-weight: 500;
	text-decoration: none;
}
.site-content a:hover {
	text-decoration: underline;
}
.site-content a:focus-visible {
	outline: 2px solid #0054bc;
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px rgba(0, 84, 188, 0.2);
}
div.feedback-panel .btn {
	border: 1px solid #0054bc;
}
div.feedback-panel .btn.active,
div.feedback-panel .btn:active {
	background-color: #0054bc;
}
div.feedback-panel .btn:focus-visible {
	outline: 2px solid #0054bc;
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px rgba(0, 84, 188, 0.2);
}
#bottom-pager {
	display: none !important;
}
.site-footer,
.portal-footer {
	display: none !important;
}
.publication-read-more-link {
	padding: 0;
	color: #0054bc;
	font-weight: 500;
	font-size: 0.8rem;
	box-shadow: unset;
	border: unset;
	text-align: left;
	display: block;
	margin-top: 0.75rem;
}
.publication-read-more-link .fa-solid {
	font-size: 70%;
	transition: 0.2s;
}
.publication-read-more-link:focus-visible {
	outline: 2px solid #0054bc;
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px rgba(0, 84, 188, 0.2);
}
.portal-single-publication a:hover .publication-read-more-link .fa-solid {
	transform: translateX(3px);
}
#email-feedback {
	opacity: 0;
	transition: 0.9s;
	margin-top: 0.5rem;
}
#email-feedback p a {
	font-weight: 400;
	margin-top: 1rem;
	display: block;
}
#email-feedback p a:focus-visible {
	outline: 2px solid #0054bc;
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px rgba(0, 84, 188, 0.2);
}
#email-feedback p a .fa-envelope {
	margin-right: 0.5rem;
}
.cc-banner,
.cc-message,
.cc-link,
.cc-btn {
	font-family: "Inter", sans-serif;
}
.cc-window {
	color: rgb(255, 255, 255) !important;
	background-color: #11223f !important;
}
.cc-link {
	color: #fff !important;
	opacity: 1 !important;
}
.cc-btn {
	background-color: #0054bc !important;
	color: #fff !important;
	text-decoration: none !important;
	transition: 0.2s;
}
.cc-btn:hover {
	background-color: #fff !important;
	color: #0054bc !important;
	text-decoration: none !important;
}
.cc-btn:focus-visible {
	outline: 2px solid #0054bc !important;
	outline-offset: 2px !important;
	box-shadow: inset 0 0 0 1px rgba(0, 84, 188, 0.2) !important;
}
.mediaobject.img-thumbnail img {
	max-width: 100%;
	max-height: 400px;
}
.mediaobject.img-thumbnail {
	cursor: pointer;
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
}
.mediaobject.img-thumbnail:focus-visible {
	outline: 2px solid #0054bc;
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px rgba(0, 84, 188, 0.2);
}
.page-toc main article {
	min-height: 0px;
}
.nav-site-sidebar li a:hover {
	background-color: unset;
	text-decoration: none;
}
.nav-site-sidebar li a:focus-visible {
	outline: 2px solid #0054bc;
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px rgba(0, 84, 188, 0.2);
}
.toc .glyphicon {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0.45rem 0 0 1rem !important;
	display: inline-block;
	font-family: "Glyphicons Halflings";
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	font-weight: 300;
	line-height: 1;
	font-size: 10px;
	padding: 0;
}

/* Make glyphicons keyboard accessible */
.nav-site-sidebar .glyphicon[tabindex="0"] {
	cursor: pointer;
	outline: none;
}

.nav-site-sidebar .glyphicon[tabindex="0"]:hover {
	opacity: 0.7;
}

.nav-site-sidebar .glyphicon[tabindex="0"]:focus-visible {
	outline: 2px solid #0054bc;
	outline-offset: 2px;
	border-radius: 2px;
	box-shadow: 0 0 0 2px rgba(0, 84, 188, 0.2);
}
div.skipnav a {
	background-color: #fff;
	padding: 0.25rem;
}
.theme1 .procedure > li::before {
	background-color: #525252;
}
a.header-link {
	color: gray !important;
	opacity: 1 !important;
}
.header-link:focus-visible {
	outline: 2px solid #0054bc;
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px rgba(0, 84, 188, 0.2);
}

article#content-wrapper {
	padding: 2rem 3rem !important;
}
.portal-support-button {
	border-radius: 30px;
	background-color: #0054bc;
	color: #fff;
	text-decoration: none;
	padding: 1rem 2rem;
	transition: 0.2s;
	margin-top: 0.5rem;
	display: inline-block;
	font-weight: 600;
	text-wrap: balance;
}
.portal-support-button:hover {
	background-color: #00387c;
	color: #fff;
}
.portal-developer-button {
	border-radius: 30px;
	border: 2px solid #0054bc;
	color: #0054bc;
	text-decoration: none;
	padding: 1rem 2rem;
	transition: 0.2s;
	margin-top: 0.5rem;
	display: inline-block;
	font-weight: 600;
	text-wrap: balance;
}
.portal-developer-button:hover {
	background-color: #0054bc;
	color: #fff;
}
.portal-content .languages {
	display: none;
}
.screen-reader,
[role="screen-reader"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important; /* prevent line breaks */
	border: 0 !important;
}
.releasedatesblock p {
	color: #6d757d;
	font-weight: 500;
	margin-bottom: 0;
	font-size: 90%;
}
.releasedatesblock p em {
	font-style: normal;
}
.releasedatesblock p:last-child {
	margin-bottom: 1rem;
}

/* Styling hubspot embed */
iframe .hsfc-Step .hsfc-Step__Content {
	padding: 0 !important;
}

/* Responsive video container */
.video-container {
	position: relative;
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
}
.videoobject {
	padding-top: unset;
	margin-top: unset;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 1150px) {
	.section-nav-container {
		display: none !important;
	}
}

@media (max-width: 830px) {
	.custom-navbar {
		max-height: 55px;
		min-height: unset;
		display: block;
	}
	.custom-navbar-content {
		display: grid;
		justify-content: space-between;
		grid-template-rows: 1fr;
		gap: 1.5rem;
	}
	.portal-content .navbar-center {
		display: none;
	}
	.navbar-right {
		display: grid;
		gap: 1rem;
	}
	.languages {
		padding-left: 0rem !important;
	}
	.custom-navbar-links {
		display: grid;
		gap: 1.5rem;
	}
	.mobile-navbar-toggle {
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;
		background-color: transparent;
		border: none;
		color: #fff;
		font-size: 1.5rem;
		cursor: pointer;
		z-index: 1000;
		padding: 0.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: opacity 0.2s ease;
	}
	.mobile-navbar-toggle:hover {
		opacity: 0.8;
	}
	.mobile-navbar-toggle:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
	}
	.custom-footer-grid {
		grid-template-columns: 1fr;
	}
	.custom-footer-links-list {
		column-count: 1;
	}
	article {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.doc-content-wrapper {
		padding: 0 1rem;
	}
	.site-content:not(.doc-content-wrapper .site-content) {
		padding: 0 1rem !important;
	}
	.site-body-row {
		overflow: hidden;
	}
	aside.site-sidebar {
		max-width: 350px !important;
		width: 95% !important;
		position: sticky;
		min-width: 90%;
	}
	.resources-for-developers-grid {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.resources-for-developers-grid h2 {
		text-align: center;
	}
	.resources-for-developers-grid img {
		width: 30%;
	}
	.mediaobject.img-thumbnail img {
		max-width: 100%;
	}
	article#content-wrapper {
		padding: 2rem !important;
	}
}

@media (max-width: 767px) {
	.portal-single-publication {
		width: 50%;
	}
}
@media (max-width: 650px) {
	.extra-links-banner {
		display: grid;
		grid-template-columns: 1fr;
	}
}
@media (max-width: 600px) {
	.portal-shadowbox {
		padding: 2rem;
	}
	.portal-shadowbox-grid {
		grid-template-columns: 1fr;
	}
	.doc-content-wrapper {
		display: block;
		max-width: 1200px;
		box-sizing: border-box;
		width: 100%;
	}
}
@media (max-width: 500px) {
	.portal-single-publication {
		width: 100%;
	}
}

@media (max-width: 500px) {
	article#content-wrapper {
		padding: 2rem 1rem !important;
	}
	ul.breadcrumb {
		margin-left: 1rem;
	}
}

/* Print styles - hide navigation and UI elements when printing */
@media print {
	.custom-navbar,
	.custom-footer,
	.site-sidebar,
	.sidebar-toggle-btn,
	.breadcrumb-container,
	.toolbar,
	.section-nav-container,
	.site-sidebar-search,
	.feedback-panel,
	body::before {
		display: none !important;
	}

	/* Ensure content takes full width when printing */
	.doc-content-wrapper {
		display: block;
		max-width: 100%;
	}

	.doc-content-wrapper .site-content {
		max-width: 100%;
		width: 100%;
	}

	article#content-wrapper {
		padding: 0 !important;
	}

	/* Remove any background colors/images for better print quality */
	body {
		background: white !important;
		animation: none !important;
		opacity: 1 !important;
	}
}
/*===LANDING PAGE TOPIC STYLES === */
/* ─────────────────────────────────────────────
   1. LANDING PAGE SCOPE + RESET
   Removes default topic padding/max-width so we
   can control layout section by section. Hides the right nav bar
───────────────────────────────────────────── */
section.topic.start-page {
  max-width: 100%;
  padding: 0;
}

article.landing-page > .title {
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 2rem 2rem 0.5rem;
  line-height: 1.2;
}

section.landing-page .abstract.subtitle p {
  font-size: 1.1rem;
  color: #555;
  margin: 0 2rem 2rem;
}

/* Landing page subtitle — the intro renders as a plain <p> immediately
   after the h1 titlepage (the .abstract.subtitle pattern above doesn't
   match the current markup, kept for other landing pages that may use it).
   Side margins 0 to align with the section cards below, which are reset
   to margin 0. Font size TBD in the heading/type sizing pass. */
section.landing-page > div.titlepage + p {
  color: #555555;
  margin: 0 0 2rem;
}

div.site-body-row:has(section.landing-page) aside.section-nav-container,
.doc-content-wrapper:has(section.landing-page) aside.section-nav-container {
  display: none !important;
}

/* Containment root for the landing page's responsive sections below.
   .topic-content is the panel whose rendered width actually reflects
   the available space next to the sidebar — narrower than the viewport
   whenever the sidebar is expanded. Section rules further down use
   @container content-panel (...) instead of @media (...) so they react
   to this panel's width, not the browser window's. */
div.site-body-row:has(section.landing-page) .topic-content {
  container-type: inline-size;
  container-name: content-panel;
}

/* Override theme1.css Bootstrap grid offsets on article when landing page is present */
div.site-body-row:has(section.landing-page) main article {
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
  float: none !important;
}

/* ─────────────────────────────────────────────
   2. GETTING STARTED SECTION
   Light blue tinted card container,
   4-column numbered step grid inside.
───────────────────────────────────────────── */
section.getting-started {
  background: #f5f8ff;
  border: 1px solid #dce6f5;
  border-radius: 4px;
  margin: 0 2rem 2rem;
  padding: 1.5rem 2rem 2rem;
}

section.getting-started > .title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 0.35rem;
}

section.getting-started > .title::before {
  content: "🚀 ";
  font-size: 1rem;
}

section.landing-page section.getting-started > div.titlepage .title::before {
  content: none;
}

section.getting-started p.section-intro {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 1.25rem;
}

/* The <procedure> becomes an <ol> — we turn it into a grid */
ol.procedure.step-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step-counter;
}

li.step.step-card {
  background: #fff;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  counter-increment: step-counter;
  position: relative;
}

/* Numbered badge */
li.step.step-card::before {
  content: counter(step-counter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #deeaf8;
  color: #1a5fa8;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

li.step.step-card p.step-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 0.35rem;
}

li.step.step-card p:not(.step-title) {
  font-size: 0.85rem;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 768px) {
  ol.procedure.step-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  ol.procedure.step-cards {
    grid-template-columns: 1fr;
  }
}


/* ─────────────────────────────────────────────
   3. TWO-COLUMN SECTIONS
   Used for: Popular Topics + Common Questions
             What's New + Resources
───────────────────────────────────────────── */
section.two-col-section {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1.5rem;
  margin: 0 2rem 2rem;
}

@media (max-width: 900px) {
  section.two-col-section {
    grid-template-columns: 1fr;
  }
}


/* ─────────────────────────────────────────────
   4. TOPIC LINK LISTS (base)
   Divider borders for link lists inside cards;
   scoped overrides live in FEATURED TOPICS below
───────────────────────────────────────────── */
ul.itemizedlist.topic-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.itemizedlist.topic-links li {
  padding: 0.4rem 0;
  border-bottom: 1px solid #f5f5f5;
}

ul.itemizedlist.topic-links li:last-child {
  border-bottom: none;
}

ul.itemizedlist.topic-links a {
  font-size: 0.875rem;
  color: #1a5fa8;
  text-decoration: none;
}

ul.itemizedlist.topic-links a:hover {
  text-decoration: underline;
}


/* ─────────────────────────────────────────────
   5. COMMON QUESTIONS
───────────────────────────────────────────── */
section.landing-page section.common-questions {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 260px;
  grid-template-rows: auto 1fr;
  align-items: start;
  row-gap: 0;
  column-gap: 1.5rem;
}

section.landing-page section.common-questions > div.titlepage {
  grid-column: 1;
  grid-row: 1;
}

section.landing-page section.common-questions > div.titlepage .title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 1rem;
}

section.landing-page section.common-questions > div.question-links {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

section.landing-page section.common-questions > section.common-questions-row,
section.landing-page section.common-questions > section.accessibility-card {
  grid-column: 2;
  grid-row: 1 / 3; /* spans heading + links rows so the card top aligns with the heading */
  align-self: stretch; /* overrides parent align-items: start so the card fills the full column height */
}

/* If the card is nested inside a wrapper row, make it fill that wrapper too */
section.landing-page section.common-questions-row > section.accessibility-card {
  height: 100%;
  box-sizing: border-box;
}

section.landing-page ul.itemizedlist.question-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

section.landing-page ul.itemizedlist.question-links li {
  padding: 0.6rem 0;
  border-bottom: 1px solid #eee;
}

section.landing-page ul.itemizedlist.question-links a {
  font-size: 16px;
  color: #444 !important;
  text-decoration: none;
}

section.landing-page ul.itemizedlist.question-links a:hover {
  color: #1a5fa8 !important;
  text-decoration: underline;
}


/* ── Accessibility card: universal-access icon ── */
section.landing-page section.accessibility-card::before {
  content: "\f29a";
  font-family: "FontAwesome";
  display: block;
  color: #1a5fa8;
  font-size: 2.5rem;
  flex-shrink: 0;
  margin-bottom: 0.75rem;
  line-height: 1;
}
section.landing-page section.accessibility-card {
  background: #f5f8ff;
  border: 1px solid #dce6f5;
  border-radius: 4px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

section.landing-page section.accessibility-card > div.titlepage .title,
section.landing-page section.accessibility-card > div.titlepage .title h3.title,
section.landing-page section.accessibility-card > div.titlepage .title h4.title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a2e;
  margin-top: 0 !important;
  margin-bottom: 0.5rem;
}

section.landing-page section.accessibility-card p {
  font-size: 0.875rem;
  color: #555555;
  margin: 0 0 0.75rem;
}

section.landing-page section.accessibility-card a {
  font-size: 0.875rem;
  font-weight: 500;
}

/* Accessibility Overview link arrow */
article section.landing-page section.accessibility-card a::after {
  content: " →" !important;
}


/* ─────────────────────────────────────────────
   6. FEATURED TOPICS
───────────────────────────────────────────── */

section.landing-page section.featured-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

section.landing-page section.featured-topics > div.titlepage {
  flex-basis: 100%;
  width: 100%;
}

section.landing-page section.featured-topics > div.titlepage .title,
section.landing-page section.featured-topics > div.titlepage .title h2.title {
  font-size: 24px !important;
  font-weight: 600;
  color: #1a1a2e;
  margin-top: 0 !important;
  margin-bottom: 1rem;
}

/* Section h2 size — 24px for Getting Started, Common Questions,
   Video Tutorials, and User Resources (Featured Topics set in its own rule above) */
section.landing-page section.getting-started > div.titlepage .title h2.title,
section.landing-page section.common-questions > div.titlepage .title h2.title,
section.landing-page section.video-tutorials > div.titlepage .title h2.title,
section.landing-page section.user-resources > div.titlepage .title h2.title {
  font-size: 24px !important;
}

section.landing-page section.topic-group {
  flex: 1;
  min-width: 0; /* no floor — organic wrap is now handled by the explicit
                   @container content-panel (max-width: 680px) breakpoint,
                   not by cards running out of room on their own */
  background: #fff;
  border: 1px solid #e0e6ed;
  border-radius: 4px;
  padding: 1.25rem;
}

section.landing-page section.topic-group > div.titlepage .title,
section.landing-page section.topic-group > div.titlepage .title h3.title,
section.landing-page section.topic-group > div.titlepage .title h4.title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a2e;
  margin-top: 0 !important;
  margin-bottom: 0.75rem;
}

section.landing-page div.itemizedlist.topic-links {
  margin: 0;
  padding: 0;
}

section.landing-page ul.itemizedlist.topic-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

section.landing-page ul.itemizedlist.topic-links li {
  padding: 0.35rem 0;
  list-style: none !important;
  display: flex !important;
  align-items: baseline;
  gap: 0.4rem;
}

section.landing-page ul.itemizedlist.topic-links li p {
  margin-bottom: 0;
}

section.landing-page ul.itemizedlist.topic-links li::before {
  content: "\f054";
  font-family: "FontAwesome";
  font-size: 0.6rem;
  color: #1a5fa8;
  flex-shrink: 0;
  margin-top: 1px;
}

section.landing-page ul.itemizedlist.topic-links a {
  font-size: 14px;
  color: #444 !important;
  text-decoration: none;
}

section.landing-page ul.itemizedlist.topic-links a:hover {
  color: #1a5fa8 !important;
  text-decoration: underline;
}

/* ─────────────────────────────────────────────
   7. WHAT'S NEW
───────────────────────────────────────────── */
/* No card container — standalone h2 + list, matching Featured Topics */
section.landing-page section.whats-new {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

section.landing-page section.whats-new > div.titlepage {
  margin-bottom: 1rem;
}

section.landing-page section.whats-new > div.titlepage .title,
section.landing-page section.whats-new > div.titlepage .title h2.title {
  font-size: 24px !important;
  font-weight: 600;
  color: #1a1a2e;
  margin-top: 0 !important;
  margin-bottom: 0;
}

section.landing-page ul.itemizedlist.release-list {
  list-style: none !important;
  padding: 0;
  margin: 0;
}

section.landing-page ul.itemizedlist.release-list li {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
}

section.landing-page ul.itemizedlist.release-list li > p {
  flex: 1;
  margin: 0;
  text-align: left;
  min-width: 0;
}

section.landing-page ul.itemizedlist.release-list li:last-child {
  border-bottom: none;
}

section.landing-page ul.itemizedlist.release-list a {
  font-size: 16px;
  color: #444 !important;
  text-decoration: none;
}

section.landing-page ul.itemizedlist.release-list a:hover {
  color: #1a5fa8 !important;
  text-decoration: underline;
}

section.landing-page li.listitem.new::after {
  content: "New";
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  background: #ede9fe;
  color: #5b21b6;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

section.landing-page li.listitem.updated::after {
  content: "Updated";
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  background: #e0f2fe;
  color: #0369a1;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────
   8. VIDEO TUTORIALS
───────────────────────────────────────────── */

/* Header row: title left, browse link right */
section.landing-page section.video-tutorials {
  margin: 40px 0 0;
  position: relative;
}

section.landing-page section.video-tutorials > div.titlepage .title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 1rem;
}

section.landing-page p.section-action {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  text-align: right;
}

section.landing-page p.section-action a {
  font-size: 0.85rem;
  color: #1a5fa8;
  text-decoration: none;
}

section.landing-page p.section-action a::after {
  content: " →";
}

section.landing-page p.section-action a:hover {
  color: #1a5fa8;
  text-decoration: underline;
}

ul.itemizedlist.video-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Video card — entire card is a link (stretched-link pattern) */
li.listitem.video-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
  border: 1px solid #e0e6ed;
  border-radius: 4px;
  padding: 0;
  overflow: hidden; /* clips the full-bleed thumbnail to the rounded corners */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

li.listitem.video-card:hover {
  border-color: #1a5fa8;
  box-shadow: 0 2px 8px rgba(26, 95, 168, 0.12);
}

/* Thumbnail — static image, full-bleed; card handles corner rounding */
li.listitem.video-card div.mediaobject {
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #1a1a2e;
}

/* Neutralize Bootstrap .img-thumbnail added by Paligo's inline script */
li.listitem.video-card div.mediaobject.img-thumbnail {
  padding: 0;
  border: none;
}

li.listitem.video-card div.mediaobject img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

p.video-title {
  margin: 0;
  padding: 0.75rem;
}

p.video-title a {
  font-size: 16px;
  font-weight: 500;
  color: #1a1a2e;
  text-decoration: none;
  line-height: 1.3;
}

/* Stretch the title link to cover the whole card */
li.listitem.video-card p.video-title a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* External-link icon after the title */
p.video-title a::after {
  content: "\f08e";
  font-family: "FontAwesome";
  margin-left: 0.4em;
  font-size: 0.8em;
  color: #1a5fa8;
}

p.video-title a:hover {
  color: #1a5fa8;
}

/* Responsive breakpoints for video-cards moved to the
   @container content-panel rule in section 12 (landing page
   mobile breakpoints) — see that section for the single
   680px breakpoint that replaces the old 768/480 pair. */


/* ─────────────────────────────────────────────
   9. REMAINING LANDING PAGE SECTIONS
───────────────────────────────────────────── */

/* Override display:block on video-cards ul */
section.landing-page ul.itemizedlist.video-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

section.landing-page li.listitem.video-card {
  display: flex !important;
  flex-direction: column;
}

/* Developer Resources — grid: [icon] [title stacked above tagline+button row] */
section.landing-page section.developer-resources {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: 2.5rem;
  background: #f7f8fa;
  border: 1px solid #e8eaef;
  border-radius: 4px;
  padding: 24px 32px;
}

/* Illustration: col 2, spans all rows */
section.landing-page section.developer-resources::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  width: 200px;
  height: 200px;
  background: url("https://help.anthology.com/custom-paligo-scripts-styles/assets/developer-docs-image.webp") no-repeat center / contain;
}

/* Title: col 1, row 1 */
section.landing-page section.developer-resources > div.titlepage {
  grid-column: 1;
  grid-row: 1;
}

section.landing-page section.developer-resources > div.titlepage .title,
section.landing-page section.developer-resources > div.titlepage .title h2.title {
  font-size: 24px !important;
  font-weight: 600;
  color: #1a1a2e;
  margin-top: 0 !important;
  margin-bottom: 0;
}

/* Tagline: col 1, row 2 */
section.landing-page section.developer-resources > p:not(.section-cta) {
  grid-column: 1;
  grid-row: 2;
  font-size: 14px;
  color: #555;
  margin: 0.75rem 0 1.5rem;
}

/* Button: col 1, row 3 */
section.landing-page section.developer-resources > p.section-cta {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  margin: 0;
}

section.landing-page section.developer-resources > p.section-cta a {
  display: inline-block;
  background: #fff;
  color: #1a1a2e !important;
  padding: 0.6rem 1.25rem;
  border-radius: 4px;
  border: 1px solid #ccd6e8;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

section.landing-page section.developer-resources > p.section-cta a::after {
  content: " →";
}

section.landing-page section.developer-resources > p.section-cta a:hover {
  background: #f5f8ff;
  border-color: #1a5fa8;
}

/* Hide illustration and tighten padding on narrow screens */
@media (max-width: 768px) {
  section.landing-page section.developer-resources {
    grid-template-columns: 1fr;
    padding: 1.75rem 1.5rem;
  }
  section.landing-page section.developer-resources::after {
    display: none;
  }
}

/* User Resources — three-column card row */
section.landing-page section.user-resources {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

section.landing-page section.user-resources > div.titlepage {
  flex-basis: 100%;
  width: 100%;
}

section.landing-page section.user-resources > div.titlepage .title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 1rem;
}

section.landing-page section.resource-card {
  flex: 1;
  min-width: 180px;
  display: flex !important;
  flex-direction: column;
  gap: 0.4rem;
}

section.landing-page section.resource-card > div.titlepage .title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0;
}

section.landing-page section.resource-card > p:not(.section-cta) {
  font-size: 14px;
  color: #555;
  margin: 0;
}

section.landing-page section.resource-card > p.section-cta a {
  font-size: 0.875rem;
  color: #1a5fa8;
  text-decoration: none;
  font-weight: 500;
}

section.landing-page section.resource-card > p.section-cta a::after {
  content: " →";
}

section.landing-page section.resource-card > p.section-cta a:hover {
  text-decoration: underline;
}

/* Neutralize support-section wrapper (makes contact-support and find-institution h3s) */
section.landing-page section.support-section {
  display: contents;
}

section.landing-page section.support-section > div.titlepage {
  display: none;
}

/* Contact Support — grid: [icon] [title / desc] [button] */
section.landing-page section.contact-support {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 1.25rem;
  row-gap: 0.15rem;
  background: #f5f8ff;
  border: 1px solid #dce6f5;
  border-radius: 4px;
  padding: 1.5rem 2rem;
  margin-top: 2.5rem;
}

/* Icon (::before) spans both rows in col 1 */

/* Title in col 2, row 1 */
section.landing-page section.contact-support > div.titlepage {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

section.landing-page section.contact-support > div.titlepage .title,
section.landing-page section.contact-support > div.titlepage .title h3.title {
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a2e;
  margin-top: 0 !important;
  margin-bottom: 0;
}

/* Description in col 2, row 2 */
section.landing-page section.contact-support > p:not(.section-cta) {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-size: 14px;
  color: #555;
  margin: 0;
}

/* Button in col 3, spanning both rows, vertically centered */
section.landing-page section.contact-support > p.section-cta {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  margin: 0;
}

section.landing-page section.contact-support > p.section-cta a {
  display: inline-block;
  background: #1a5fa8;
  color: #fff !important;
  padding: 0.6rem 1.25rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

section.landing-page section.contact-support > p.section-cta a::after {
  content: " →";
}

section.landing-page section.contact-support > p.section-cta a:hover {
  background: #144d8a;
}

/* Find Institution — grid: [icon] [title / desc / search widget] */
section.landing-page section.find-institution {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr); /* minmax(0,…) — plain 1fr = minmax(auto,1fr), lets the search row inflate the track and overflow the card */
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: 1.25rem;
  row-gap: 0.15rem;
  background: #f5f8ff;
  border: 1px solid #dce6f5;
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  margin-top: 20px;
}

/* Icon (::before) spans all rows in col 1 */

/* Title in col 2, row 1 */
section.landing-page section.find-institution > div.titlepage {
  grid-column: 2;
  grid-row: 1;
}

section.landing-page section.find-institution > div.titlepage .title,
section.landing-page section.find-institution > div.titlepage .title h3.title {
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a2e;
  margin-top: 0 !important;
  margin-bottom: 0;
}

/* Description in col 2, row 2 */
section.landing-page section.find-institution > p:not(.section-cta) {
  grid-column: 2;
  grid-row: 2;
  font-size: 14px;
  color: #555;
  margin: 0 0 0.75rem 0;
}

/* Search widget in col 2, row 3 */
section.landing-page section.find-institution > .fyi-landing-search-wrapper {
  grid-column: 2;
  grid-row: 3;
  position: relative;
  min-width: 0; /* allow shrinking below the input's intrinsic width */
}

#institution-search-input {
  font-size: 0.875rem;
  color: #333;
  padding: 0.5rem 1rem 0.5rem 2.75rem; /* left padding clears the Google icon */
  width: 100%;
  border: 1px solid #ccd6e8;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  outline: none;
}

#institution-search-input::placeholder {
  color: #aaa;
}

#institution-search-input:focus-visible {
  outline: 2px solid #0054bc;
  outline-offset: 2px;
}

/* Decorative Google icon shown inside the field, matching the legacy lookup */
.fyi-landing-search-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.fyi-landing-search-icon svg {
  display: block;
}


/* ─────────────────────────────────────────────
   10. GLOBAL SECTION SPACING ON LANDING PAGE
───────────────────────────────────────────── */

/* Zero out all Paligo base indent/padding on landing page sections */
section.landing-page section {
  margin: 0;
  padding: 0;
}

/* Add consistent vertical spacing between top-level sections */
section.landing-page > section + section {
  margin-top: 2.5rem;
}

/* Zero out titlepage wrapper margins/padding throughout */
section.landing-page div.titlepage {
  margin: 0;
  padding: 0;
}

section.landing-page div.titlepage div,
section.landing-page div.titlepage div div {
  margin: 0;
  padding: 0;
}

/* Suppress anchor link icons on landing page headings */
section.landing-page .title a,
section.landing-page .title a.anchor,
section.landing-page .title a[id],
section.landing-page h1 > a,
section.landing-page h2 > a,
section.landing-page h3 > a,
section.landing-page h4 > a {
  display: none !important;
}

/* Hide the default Paligo breadcrumb/topic chrome on landing page */
section.landing-page .topic-title-wrapper,
section.landing-page > .itemizedlist:first-child {
  display: none;
}
/* Suppress Paligo feedback widget on landing pages */
div.site-body-row:has(section.landing-page) .feedback-container,
div.site-body-row:has(section.landing-page) .topic-feedback,
div.site-body-row:has(section.landing-page) [class*="feedback"] {
  display: none !important;
}

/* ─────────────────────────────────────────────
   11. ICONS, FAQ ROWS, GETTING STARTED BUTTON,
       DATE STAMP, H1 SUPPRESSION
───────────────────────────────────────────── */

/* Suppress "Updated on" date stamp on landing pages */
div.site-body-row:has(section.landing-page) .updated-date,
div.site-body-row:has(section.landing-page) .topic-updated,
div.site-body-row:has(section.landing-page) .last-updated,
div.site-body-row:has(section.landing-page) p.updated,
div.site-body-row:has(section.landing-page) span.updated,
div.site-body-row:has(section.landing-page) .date-modified,
div.site-body-row:has(section.landing-page) .date-modified-text {
  display: none !important;
}

/* Page H1 retained — styled naturally by existing rules */

/* ── FAQ list: remove bullets, add document icon + chevron row ── */
section.landing-page div.question-links ul.itemizedlist.question-links {
  list-style: none !important;
  padding: 0;
  margin: 0;
}

section.landing-page ul.itemizedlist.question-links li.listitem {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.5rem;
  border-bottom: 1px solid #eee;
  list-style: none !important;
}

section.landing-page ul.itemizedlist.question-links li.listitem::before {
  content: "\f15c"; /* fa-file-text-o — original page/document icon */
  font-family: "FontAwesome";
  font-size: 0.9rem;
  color: #7b9fd4;
  flex-shrink: 0;
}

section.landing-page ul.itemizedlist.question-links li.listitem::after {
  content: "\f054";
  font-family: "FontAwesome";
  font-size: 0.75rem;
  color: #aaa;
  margin-left: auto;
  flex-shrink: 0;
}

section.landing-page ul.itemizedlist.question-links li.listitem p {
  margin: 0;
  flex: 1;
}

/* ── What's New list: same document icon + chevron treatment ── */
section.landing-page ul.itemizedlist.release-list li.listitem::before {
  content: "\f15c";
  font-family: "FontAwesome";
  font-size: 0.9rem;
  color: #7b9fd4;
  flex-shrink: 0;
}

/* ── Getting Started: rocket icon + styled CTA button ── */
/* Getting Started — grid: [icon] [title / intro] [button] */
section.landing-page section.getting-started {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0;
  padding: 24px 20px;
}

/* Icon: col 1, spans both rows */
section.landing-page section.getting-started::before {
  content: "\f135";
  font-family: "FontAwesome";
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  text-align: center;
  line-height: 56px;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  border-radius: 50% !important;
  background-color: #dce6f7 !important;
  color: #1a5fa8 !important;
  font-size: 1.5rem !important;
  box-sizing: border-box !important;
}

/* Title: col 2, row 1 */
section.landing-page section.getting-started > div.titlepage {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin-bottom: 0;
}

section.landing-page section.getting-started > div.titlepage .title,
section.landing-page section.getting-started > div.titlepage .title h2.title {
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
}

/* Intro: col 2, row 2 */
section.landing-page section.getting-started > p.section-intro {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-size: 0.875rem;
  color: #555;
  margin: 0;
}

/* Button: col 3, spans both rows */
section.landing-page section.getting-started > p.section-cta {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  margin: 0;
}

section.landing-page section.getting-started > p.section-cta a {
  display: inline-block;
  background: #1a5fa8;
  color: #fff !important;
  padding: 0.6rem 1.5rem;
  border-radius: 4px; /* standardized — matches developer-docs / contact-support / search buttons */
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

section.landing-page section.getting-started > p.section-cta a:hover {
  background: #144d8a;
}

/* Get Started button arrow (overrides injected arrow with our own) */
article section.landing-page section.getting-started > p.section-cta a::after {
  content: " →" !important;
}

/* ── Resources for Developers icon removed — replaced by illustration (see main block) ── */

/* ── Contact Support: question mark icon ── */
section.landing-page section.contact-support::before {
  content: "\f29c";
  font-family: "FontAwesome";
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #dce6f7;
  color: #1a5fa8;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ── User Resource card icons ── */
section.landing-page section.resource-card:nth-child(2)::before {
  content: "\f0e5";
  font-family: "FontAwesome";
}

section.landing-page section.resource-card:nth-child(3)::before {
  content: "\f19d";
  font-family: "FontAwesome";
}

section.landing-page section.resource-card:nth-child(4)::before {
  content: "\f0eb";
  font-family: "FontAwesome";
}

section.landing-page section.resource-card::before {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #eef2fb;
  color: #1a5fa8;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

/* === END LANDING PAGE === */
/* Find Institution icon */
section.landing-page section.find-institution::before {
  content: "\f002";
  font-family: "FontAwesome";
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #dce6f7;
  color: #1a5fa8;
  font-size: 1rem;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   12. LANDING PAGE MOBILE BREAKPOINTS
   Consolidated block, kept at the END of the file on purpose:
   these selectors match the highest-specificity desktop rules
   above (incl. the Section 9 video-cards override that was
   outranking the older 768/480 queries), so being last in
   source order is what makes them win. Add future landing-page
   mobile rules here, not next to their desktop counterparts.

   NOTE: Common Questions, Video Tutorials cards, and Featured
   Topics cards use @container content-panel (...) below instead
   of @media (...). The left sidebar eats into the panel's real
   width well before the viewport hits these old pixel breakpoints,
   so viewport media queries fired too late for these three
   sections. Container queries measure .topic-content itself. See
   landing-page-breakpoint-fixes.md for the full writeup.
───────────────────────────────────────────── */

/* ── Common Questions: single column ──
   Accessibility card flows below the question list; explicit
   desktop grid placements (col 2, row 1/3) must be reset.
   600px is a starting point — adjust after visual QA. */
@container content-panel (max-width: 600px) {
  section.landing-page section.common-questions {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  section.landing-page section.common-questions > div.question-links {
    grid-column: 1;
    grid-row: auto;
  }

  section.landing-page section.common-questions > section.common-questions-row,
  section.landing-page section.common-questions > section.accessibility-card {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
    margin-top: 1.25rem;
  }
}

/* ── Video Tutorials + Featured Topics: skip the 2-up step ──
   Both go straight from their full desktop layout to fully stacked
   at the same panel width, instead of passing through an awkward
   2-up/2+1 intermediate state. Selector matches the Section 9
   override's specificity so it reliably takes effect. */
@container content-panel (max-width: 680px) {
  section.landing-page ul.itemizedlist.video-cards {
    grid-template-columns: 1fr;
  }

  section.landing-page section.topic-group {
    flex-basis: 100%;
  }
}

@media (max-width: 768px) {

  /* "Browse all videos" link: static under the heading instead of
     absolute top-right, so it can't overlap a wrapped title */
  section.landing-page p.section-action {
    position: static;
    text-align: left;
    margin: -0.5rem 0 1rem;
  }

  /* ── Getting Started banner: stack title / intro / button ──
     Desktop grid is [56px icon | 1fr text | nowrap button], which
     overflows on narrow screens. Icon hidden, button moves below. */
  section.landing-page section.getting-started {
    grid-template-columns: 1fr;
    padding: 1.5rem 1.25rem;
  }

  section.landing-page section.getting-started::before {
    content: none;
  }

  section.landing-page section.getting-started > div.titlepage {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
  }

  section.landing-page section.getting-started > p.section-intro {
    grid-column: 1;
    grid-row: auto;
  }

  section.landing-page section.getting-started > p.section-cta {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 1rem;
  }

  /* ── Contact Support banner: same stacking treatment ── */
  section.landing-page section.contact-support {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }

  section.landing-page section.contact-support::before {
    content: none;
  }

  section.landing-page section.contact-support > div.titlepage {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
  }

  section.landing-page section.contact-support > p:not(.section-cta) {
    grid-column: 1;
    grid-row: auto;
  }

  section.landing-page section.contact-support > p.section-cta {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 1rem;
  }

  /* ── Find Institution: full-width, icon hidden ── */
  section.landing-page section.find-institution {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.25rem;
  }

  section.landing-page section.find-institution::before {
    content: none;
  }

  section.landing-page section.find-institution > div.titlepage {
    grid-column: 1;
  }

  section.landing-page section.find-institution > p:not(.section-cta) {
    grid-column: 1;
  }

  section.landing-page section.find-institution > .fyi-landing-search-wrapper {
    grid-column: 1;
  }
}

@media (max-width: 480px) {

  /* Video Tutorials and Featured Topics single-column/one-per-row
     behavior now lives in the @container content-panel (max-width: 680px)
     rule above, so both reflow together at the same panel width instead
     of at staggered viewport breakpoints. */

  /* User Resources: one card per row */
  section.landing-page section.resource-card {
    flex-basis: 100%;
  }
}