/* ============================================================
   MAIN SITE STYLESHEET -- every preview-*.html page
   Colors are variables in :root below. The event palette colors
   (--childRed, --childOrange, --childPurple, --childGreen, --childBlue)
   come from /directory/colorschemes.php -- each page adds them in its
   <head>. Phone/tablet (@media) rules are in css/responsive2.css.
   ============================================================ */

:root {
	--hubInk:#0a1830;
	--hubInkLight:#12244a;
	--hubBlue:#043053;
	--hubBlueLight:#0a5c9e;
	/* Second blue pair -- the Contact section's gradient. */
	--hubBlueDeep:#0b1f4d;
	--hubBlueAccent:#1f7ae0;
	--hubPaper:#f7f9fb;
	--hubBorder:#e2e2e2;
	--hubTextMuted:#6b6b6b;
	--hubOnDark:#d7e3ee; /* body text on dark sections */
	--hubOnDarkAccent:#9fc4e8; /* eyebrows/labels on dark sections */
	--hubOnDarkMuted:#b6c6d6; /* secondary text on dark sections */
	--hubOnDarkFaint:#7f96ab; /* small/faint text on dark sections */
}
*{box-sizing:border-box;}
body {
	margin: 0;
	background: #ffffff;
	color: #1a1a1a;
	font-family: 'Hanken Grotesk',system-ui,sans-serif;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3 {
	font-family: 'Archivo',system-ui,sans-serif;
	margin: 0;
}
a {
	color: inherit;
	text-decoration: none;
}
img {
	max-width: 100%;
	display: block;
}
.noscript {
	padding: 20px;
	text-align: center;
}
.padding {
	padding-left: 24px;
	padding-right: 24px;
	max-width: 1180px;
	margin: 0 auto;
}
.eyebrow {
	font-family: 'JetBrains Mono',ui-monospace,monospace;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
}
/* Buttons: hover swaps the background and text colors. */
.btn {
	display: inline-block;
	padding: 14px 26px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	border: 1.5px solid transparent;
	transition: transform .15s ease,background-color .2s ease,color .2s ease,border-color .2s ease;
}
.btn:hover {
	transform: translateY(-1px);
}
.btnPrimary {
	background: #ffffff;
	color: var(--hubInk);
	border-color: #ffffff;
}
.btnPrimary:hover {
	background: transparent;
	color: #ffffff;
}
.btnGhost {
	background: transparent;
	border-color: rgba(255,255,255,.5);
	color: #ffffff;
}
.btnGhost:hover {
	background: #ffffff;
	color: var(--hubInk);
	border-color: #ffffff;
}
.btnDark {
	background: var(--hubInk);
	color: #ffffff;
	border-color: var(--hubInk);
}
.btnDark:hover {
	background: transparent;
	color: var(--hubInk);
}

/* ---------- REAL BUTTONS ----------
   Removes the browser's button look from the video boxes; :where() has zero specificity. */
:where(button.hubVideoFacade) {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	word-spacing: inherit;
	text-align: inherit;
	text-transform: inherit;
	text-indent: inherit;
	text-shadow: inherit;
	cursor: pointer;
	display: block;
	width: 100%;
}

/* ---------- NAV ---------- */
/* Scroll-progress bar under the sticky header. */
.hubProgress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0%;
	background: var(--hubBlueLight);
	z-index: 60;
	transition: width .1s linear;
}
header.hubHeader {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #ffffff;
	border-bottom: 1px solid var(--hubBorder);
	transition: box-shadow .25s ease;
}
/* Header shadow deepens once the page is scrolled. */
header.hubHeader.is-scrolled {
	box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.hubHeaderInner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	padding-bottom: 14px;
}
.hubLogo img {
	height: 38px;
	width: auto;
}
.hubNav {
	display: flex;
	align-items: center;
	gap: 28px;
}
/* Nav link underline on hover and for the current page (.active), except the Subscribe button. */
.hubNav a:not(.hubNavCta) {
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}
.hubNav a {
	font-size: 14px;
	font-weight: 600;
	color: #333333;
	transition: color .2s ease,border-color .2s ease;
}
.hubNav a:hover {
	color: var(--hubBlue);
	border-bottom-color: var(--hubBlueLight);
}
.hubNav a.active {
	color: var(--hubBlue);
	border-bottom-color: var(--hubBlueLight);
}
.hubNavCta {
	background: var(--hubInk);
	color: #fff !important;
	padding: 10px 20px;
	border-radius: 999px;
	font-weight: 700;
	border: 1.5px solid var(--hubInk);
	transition: background-color .2s ease,color .2s ease;
}
.hubNavCta:hover {
	background: transparent;
	color: var(--hubInk) !important;
}
.hubMenuToggle {
	display: none;
	background: none;
	border: 0;
	padding: 4px 0;
	color: #333333;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}
/* The inner span does the centering (Safari doesn't reliably center inside <button>). */
.hubMenuToggleInner {
	display: flex;
	align-items: center;
	gap: 8px;
}
.hubMenuToggleIcon {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 20px;
}
.hubMenuToggleIcon span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}
.hubMenuToggleLabel {
	display: block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .5px;
	line-height: 1;
	text-transform: uppercase;
}

/* Scroll reveal: hidden only once script.js adds the "js" class; :where() keeps hover effects working. */
:where(.js) .hubReveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease,transform .6s ease;
}
:where(.js) .hubReveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---------- HERO ---------- */
.hubHero {
	background: linear-gradient(160deg,var(--hubInk) 0%,var(--hubInkLight) 55%,var(--hubBlue) 100%);
	color: #ffffff;
	padding: 88px 0 0;
	position: relative;
	overflow: hidden;
}
.hubHero:before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% 15%,rgba(255,255,255,.10),transparent 45%);
}
.hubHeroInner {
	position: relative;
	text-align: center;
	padding-bottom: 44px;
}
.hubHero .eyebrow {
	color: var(--hubOnDarkAccent);
	margin-bottom: 18px;
}
.hubHero h1 {
	font-size: 56px;
	line-height: 1.08;
	font-weight: 800;
	max-width: 900px;
	margin: 0 auto 22px;
}
.hubHero .sub {
	font-size: 19px;
	color: var(--hubOnDark);
	max-width: 680px;
	margin: 0 auto 36px;
}
.hubHeroCtas {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 40px;
}
.hubStatWrap {
	border-top: 1px solid rgba(255,255,255,.15);
}
.hubStatLabel {
	text-align: center;
	font-family: 'JetBrains Mono',monospace;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hubOnDarkFaint);
	margin-bottom: 10px;
}
.hubStatBar {
	display: flex;
}
.hubStat {
	flex: 1;
	text-align: center;
	padding: 26px 12px;
	border-right: 1px solid rgba(255,255,255,.15);
}
.hubStat:last-child {
	border-right: none;
}
.hubStat .num {
	font-size: 34px;
	font-weight: 800;
	font-family: 'Archivo',sans-serif;
}
.hubStat .lbl {
	font-family: 'JetBrains Mono',monospace;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hubOnDarkMuted);
	margin-top: 4px;
}
.hubStatAccent {
	color: var(--hubBlueLight);
}

/* ---------- SECTIONS ---------- */
.hubSection {
	padding: 80px 0;
}
.hubSectionAlt {
	background: var(--hubPaper);
}
.hubSectionHead {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 48px;
}
.hubSectionHead .eyebrow {
	color: var(--hubBlue);
	margin-bottom: 12px;
}
.hubSectionHead h2 {
	font-size: 34px;
	margin-bottom: 14px;
}
.hubSectionHead p {
	color: var(--hubTextMuted);
	font-size: 16px;
}
/* Page header on the inner pages (left-aligned). */
.hubPageHero {
	background: linear-gradient(160deg,var(--hubInk) 0%,var(--hubInkLight) 55%,var(--hubBlue) 100%);
	color: #ffffff;
	padding: 64px 0;
}
.hubPageHero .eyebrow {
	color: var(--hubOnDarkAccent);
	margin-bottom: 14px;
}
.hubPageHero h1 {
	font-size: 40px;
	font-weight: 800;
	margin-bottom: 14px;
}
.hubPageHero p {
	font-size: 17px;
	color: var(--hubOnDark);
	max-width: 640px;
	margin: 0;
}
/* Solution Directory's intro is long, so it gets a wider text column. */
.hubPageHero p.hubPageHeroWide {
	max-width: none;
}
/* Sponsor page: "Job Titles Represented" sits beside the intro. */
.hubSponsorHero {
	display: flex;
	gap: 48px;
	align-items: flex-start;
}
.hubSponsorHeroText {
	flex: 1 1 auto;
	min-width: 0;
}
.hubSponsorHeroSide {
	flex: 0 0 400px;
}
.hubSponsorHeroTitles {
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 14px;
	padding: 24px 28px;
}
.hubSponsorHeroTitles h2 {
	font-family: 'JetBrains Mono',monospace;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hubOnDarkAccent);
	margin-bottom: 14px;
	font-weight: 700;
}
.hubSponsorHeroTitles ul {
	margin: 0;
	padding-left: 18px;
}
.hubSponsorHeroTitles li {
	color: var(--hubOnDark);
	font-size: 14px;
	margin-bottom: 10px;
}
.hubSponsorHeroTitles li:last-child {
	margin-bottom: 0;
}
.hubSponsorHeroBtn {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 20px;
	font-size: 17px;
	padding: 16px 26px;
}
/* Speakers page: large button beside the intro. */
.hubPageHeroSplit {
	display: flex;
	gap: 48px;
	align-items: center;
}
.hubPageHeroAction {
	flex: 0 0 auto;
}
.hubPageHeroAction .hubSponsorHeroBtn {
	margin-top: 0;
	white-space: nowrap;
}
.hubPageBody {
	padding: 64px 0;
}
.hubPageBody h2 {
	font-size: 24px;
	margin: 36px 0 14px;
	color: var(--hubInk);
}
.hubPageBody h2:first-child {
	margin-top: 0;
}
.hubPageBody p {
	margin: 0 0 16px;
	color: #333333;
	font-size: 15.5px;
}
.hubPageBody ul,
.hubPageBody ol {
	margin: 0 0 16px;
	padding-left: 22px;
	color: #333333;
	font-size: 15.5px;
}
.hubPageBody li {
	margin-bottom: 6px;
}
.hubPageBody a {
	color: var(--hubBlue);
	font-weight: 600;
}
.hubPageBody a:hover {
	text-decoration: underline;
}
.hubPageBody strong {
	color: var(--hubInk);
}

/* ---------- EVENT GRID (home) ---------- */
/* auto-fit: the number of event cards varies, so rows fill evenly. */
.hubEventGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
	gap: 22px;
}
.hubEventCard {
	border: 1px solid var(--hubBorder);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s ease,transform .2s ease;
}
.hubEventCard:hover {
	box-shadow: 0 18px 40px rgba(4,48,83,.12);
	transform: translateY(-3px);
}
.hubEventAccent {
	height: 6px;
}
.hubEventBody {
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.hubEventTag {
	font-family: 'JetBrains Mono',monospace;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 700;
}
.hubEventCard.spotlight {
	grid-row: span 1;
}
.hubEventCard.spotlight .hubEventBody {
	padding: 34px;
}
.hubEventCard.spotlight h3 {
	font-size: 26px;
}
.hubEventCard h3 {
	font-size: 19px;
	color: var(--hubInk);
}
.hubEventDate {
	font-size: 13px;
	color: var(--hubTextMuted);
	font-weight: 600;
}
.hubEventDesc {
	font-size: 14px;
	color: var(--hubTextMuted);
	flex: 1;
}
.hubEventLink {
	font-size: 14px;
	font-weight: 700;
	margin-top: auto;
}
/* Past event card: pale background (not faded) so its grey text keeps enough contrast. */
.hubEventCard.past {
	background: var(--hubPaper);
}
.hubEventStatus {
	display: inline-block;
	font-size: 11px;
	font-family: 'JetBrains Mono',monospace;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 4px 10px;
	border-radius: 999px;
	background: #eeeeee;
	color: #444444;
	width: fit-content;
}

/* ---------- VIDEOS (home, sponsor) ---------- */
.hubVideoGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}
.hubVideoFacade {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: 14px;
	border: 1px solid var(--hubBorder);
	box-sizing: border-box;
	overflow: hidden;
	cursor: pointer;
	background-color: #000;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.hubVideoPlayBtn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: rgba(10,92,158,.85);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s ease,background .2s ease;
}
.hubVideoFacade:hover .hubVideoPlayBtn {
	background: var(--hubBlueLight);
	transform: translate(-50%,-50%) scale(1.08);
}
.hubVideoPlayBtn svg {
	margin-left: 4px;
}
.hubVideoFrame {
	width: 100%;
	aspect-ratio: 16/9;
	border-radius: 14px;
	border: none;
	display: block;
}
.hubVideoCaption {
	margin-top: 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--hubInk);
	text-align: center;
}

/* ---------- WAYS TO ENGAGE (home) ---------- */
.hubEngageGrid {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 20px;
}
/* Sponsor page "The Series" tiles -- 3 columns (5 tiles). */
.hubFormatGrid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 20px;
}
.hubEngageCard {
	background: #fff;
	border: 1px solid var(--hubBorder);
	border-radius: 14px;
	padding: 26px;
	text-align: left;
	box-shadow: 0px 2px 6px rgba(0,0,0,.04);
	transition: box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.hubEngageCard:hover {
	box-shadow: 0px 10px 24px rgba(0,0,0,.12);
	transform: translateY(-4px);
	border-color: var(--hubBlueLight);
}
.hubEngageCard .ico {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--hubPaper);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	margin-bottom: 14px;
}
.hubEngageCard h3 {
	font-size: 16px;
	margin-bottom: 8px;
}
.hubEngageCard p {
	font-size: 13.5px;
	color: var(--hubTextMuted);
	margin: 0 0 14px;
}
.hubEngageCard a {
	font-size: 13px;
	font-weight: 700;
	color: var(--hubBlue);
}

/* ---------- LOGO CAROUSELS (Past Attendees / Past Sponsors) ----------
   Pages of --hubLogoCols x --hubLogoRows logos; dots/arrows/auto-advance: initLogoCarousels() in script.js. */
.hubLogoCarousel {
	margin-top: 36px;
}
.hubLogoPages {
	--hubLogoCols: 6;
	--hubLogoRows: 2;
	--hubLogoGap: 16px;
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--hubLogoRows), 72px);
	grid-auto-columns: calc((100% - (var(--hubLogoCols) - 1) * var(--hubLogoGap)) / var(--hubLogoCols));
	gap: var(--hubLogoGap);
	padding: 8px 0 12px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.hubLogoPages::-webkit-scrollbar {
	display: none;
}
.hubCarouselControls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 18px;
}
.hubLogoFiller {
	grid-row: 1 / -1;
}
html:not(.js) .hubCarouselControls,
.hubLogoCarousel.isSinglePage .hubCarouselControls {
	display: none;
}
.hubCarouselArrow {
	width: 36px;
	height: 36px;
	border: 1.5px solid var(--hubBorder);
	border-radius: 50%;
	background: #fff;
	color: var(--hubInk);
	font-size: 22px;
	line-height: 1;
	padding: 0 0 3px;
	cursor: pointer;
	transition: border-color .2s ease,background-color .2s ease,color .2s ease;
}
@media (hover:hover){
	.hubCarouselArrow:hover {
		background: var(--hubInk);
		border-color: var(--hubInk);
		color: #fff;
	}
}
.hubCarouselDots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
}
.hubCarouselCount {
	display: none;
	min-width: 64px;
	text-align: center;
	font-family: 'JetBrains Mono',monospace;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--hubInk);
}
.hubCarouselDot {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hubCarouselDot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hubBorder);
	transition: background-color .2s ease,width .2s ease;
}
.hubCarouselDot[aria-current="true"]::before {
	width: 20px;
	border-radius: 999px;
	background: var(--hubInk);
}
.hubLogoTile {
	scroll-snap-align: start;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	padding: 12px;
	border: 1px solid var(--hubBorder);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0px 2px 6px rgba(0,0,0,.04);
	transition: box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.hubLogoTile:hover {
	box-shadow: 0px 10px 24px rgba(0,0,0,.12);
	transform: translateY(-4px);
	border-color: var(--hubBlueLight);
}
.hubLogoTile img {
	max-height: 40px;
	max-width: 116px;
	width: auto;
	height: auto;
	filter: grayscale(100%);
	opacity: .65;
	transition: opacity .2s ease,filter .2s ease;
}
.hubLogoTile:hover img {
	filter: none;
	opacity: 1;
}

/* ---------- ARCHIVE STRIP (home) ---------- */
.hubArchive {
	background: var(--hubInk);
	color: #fff;
	text-align: center;
	padding: 56px 0;
}
.hubArchive h2 {
	font-size: 26px;
	margin-bottom: 10px;
}
.hubArchive p {
	color: var(--hubOnDarkMuted);
	max-width: 520px;
	margin: 0 auto 24px;
	font-size: 15px;
}
.hubYearGrid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 32px;
	max-width: 900px;
	margin: 0 auto 32px;
	text-align: left;
}
.hubYearSplit {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.hubYearGrid h3 {
	font-family: 'Archivo',sans-serif;
	font-size: 32px;
	font-weight: 800;
	margin-bottom: 14px;
	color: #fff;
}
.hubYearGrid ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hubYearGrid li {
	border-top: 1px solid rgba(255,255,255,.12);
}
.hubYearGrid li:last-child {
	border-bottom: 1px solid rgba(255,255,255,.12);
}
.hubYearGrid li a {
	display: block;
	padding: 10px 0;
	font-size: 13.5px;
	color: var(--hubOnDark);
}
.hubYearGrid li a:hover {
	color: #fff;
}
.hubYearGrid li a:hover .hubYearDate {
	color: #fff;
}
.hubYearDate {
	display: block;
	font-family: 'JetBrains Mono',monospace;
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hubOnDarkFaint);
	margin-bottom: 3px;
}

/* ---------- CTA BANDS (home newsletter, speakers, solution directory) ---------- */
.hubCtaBand {
	background: linear-gradient(135deg,var(--hubBlue) 0%,var(--hubBlueLight) 100%);
	color: #fff;
	text-align: center;
	padding: 64px 0;
}
.hubCtaBand h2 {
	font-size: 28px;
	margin-bottom: 10px;
}
.hubCtaBand p {
	color: var(--hubOnDark);
	max-width: 520px;
	margin: 0 auto 26px;
}
.hubContact {
	background: linear-gradient(135deg,var(--hubBlueDeep) 0%,var(--hubBlueAccent) 100%);
	color: #fff;
	text-align: center;
	padding: 64px 0;
}
.hubContact h2 {
	font-size: 28px;
	margin-bottom: 10px;
}
.hubContact p {
	color: var(--hubOnDark);
	max-width: 520px;
	margin: 0 auto 26px;
}

/* ---------- CONTACT CARDS (preview-contact.html) ---------- */
.hubContactGrid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 24px;
}
.hubContactCard {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--hubBorder);
	border-radius: 14px;
	padding: 30px 28px;
	box-shadow: 0 2px 6px rgba(0,0,0,.04);
	transition: box-shadow .2s ease,transform .2s ease;
}
.hubContactCard:hover {
	box-shadow: 0 18px 40px rgba(4,48,83,.12);
	transform: translateY(-3px);
}
.hubContactIcon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(31,122,224,.1);
	color: var(--hubBlue);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.hubContactCard h2 {
	font-size: 20px;
	color: var(--hubInk);
	margin-bottom: 8px;
}
.hubContactCard p {
	font-size: 15px;
	color: var(--hubTextMuted);
	margin: 0 0 18px;
	flex: 1;
}
.hubContactCard a {
	font-weight: 700;
	font-size: 15px;
	color: var(--hubBlue);
	word-break: break-word;
}
.hubContactCard a:hover {
	text-decoration: underline;
}

/* ---------- SOLUTION DIRECTORY (preview-sales30-solution-directory.html) ---------- */
.hubSolutionTabs {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.hubSolutionTab {
	background: #fff;
	border: 1.5px solid var(--hubBorder);
	border-radius: 999px;
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 700;
	font-family: 'JetBrains Mono',monospace;
	letter-spacing: .02em;
	color: var(--hubInk);
	cursor: pointer;
}
.hubSolutionTab.active {
	background: var(--hubInk);
	border-color: var(--hubInk);
	color: #fff;
}
.hubSolutionPanel {
	display: none;
}
.hubSolutionPanel.active {
	display: block;
}
.hubSolutionGrid {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 20px;
	margin-top: 32px;
}
.hubSolutionCard {
	border: 1px solid var(--hubBorder);
	border-radius: 14px;
	padding: 22px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: 0px 2px 6px rgba(0,0,0,.04);
	transition: box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.hubSolutionCard:hover {
	box-shadow: 0px 10px 24px rgba(0,0,0,.12);
	transform: translateY(-4px);
	border-color: var(--hubBlueLight);
}
.hubSolutionCard img {
	max-height: 60px;
	max-width: 160px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.hubSolutionNoLogo {
	font-family: 'Archivo',sans-serif;
	font-weight: 800;
	font-size: 17px;
	color: var(--hubInk);
}
.hubSolutionCard p {
	font-size: 13.5px;
	color: var(--hubTextMuted);
	margin: 0;
	flex: 1;
}
.hubSolutionCard a.more {
	font-size: 13px;
	font-weight: 700;
	color: var(--hubBlue);
}

/* ---------- SPEAKERS (preview-speakers.html) ---------- */
.hubSpeakerGrid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 24px;
	margin-top: 32px;
}
.hubSpeakerCard {
	border: 1px solid var(--hubBorder);
	border-radius: 10px;
	padding: 30px 22px 26px 22px;
	background: #fff;
	text-align: center;
	box-shadow: 0px 2px 6px rgba(0,0,0,.04);
	transition: box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.hubSpeakerCard:hover {
	box-shadow: 0px 10px 24px rgba(0,0,0,.12);
	transform: translateY(-4px);
	border-color: var(--hubBlueLight);
}
.hubSpeakerImg {
	display: block;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	object-fit: cover;
	object-position: top center;
	background: var(--hubPaper);
	margin: 0 auto 18px auto;
}
.hubSpeakerName {
	font-family: 'Archivo',sans-serif;
	font-weight: 800;
	font-size: 18px;
	color: var(--hubInk);
	line-height: 1.3;
	margin-bottom: 4px;
}
.hubSpeakerTitle {
	font-size: 14px;
	color: var(--hubTextMuted);
	line-height: 1.4;
}
.hubSpeakerSocial {
	display: flex;
	gap: 10px;
	margin-top: 16px;
	justify-content: center;
}
.hubSpeakerSocial a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #0077b5;
	transition: background-color .2s ease;
}
.hubSpeakerSocial svg {
	fill: #fff;
	width: 14px;
	height: 14px;
}
.hubSpeakerSocial a:hover {
	background: var(--hubBlueLight);
}

/* ---------- SPEAKER NOMINATION (preview-speaker-nomination.html) ---------- */
.hubNomEmailNote {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--hubOnDarkMuted);
	text-align: center;
}
.hubPageHero p.hubNomEmailNote {
	font-size: 14px;
	color: var(--hubOnDarkMuted);
}
.hubNomEmailNote a {
	color: #ffffff;
	text-decoration: underline;
}
.hubNomGrid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 24px;
}
.hubNomGrid4 {
	grid-template-columns: repeat(4,1fr);
}
.hubNomCard {
	background: #fff;
	border: 1px solid var(--hubBorder);
	border-radius: 14px;
	padding: 28px;
	box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.hubNomCard h3 {
	font-size: 19px;
	color: var(--hubInk);
	margin-bottom: 8px;
}
.hubNomCard p {
	font-size: 15px;
	color: var(--hubTextMuted);
	margin: 0;
}
/* What to Include: Required (checks) beside Helpful Extras (pluses). */
.hubNomLists {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 24px;
	max-width: 980px;
	margin: 0 auto;
	align-items: start;
}
.hubNomList h3 {
	font-family: 'JetBrains Mono',monospace;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hubBlueLight);
	margin-bottom: 10px;
}
.hubNomList ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hubNomList li {
	position: relative;
	padding: 12px 0 12px 36px;
	border-top: 1px solid var(--hubBorder);
	font-size: 15px;
	color: var(--hubInk);
}
.hubNomList li:first-child {
	border-top: 0;
}
.hubNomList li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--hubBlueAccent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.hubNomListOptional li::before {
	background: rgba(31,122,224,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f7ae0' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 12px no-repeat;
}
/* How It Works: numbered steps. */
.hubNomSteps {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: hubNomStep;
}
.hubNomStep::before {
	counter-increment: hubNomStep;
	content: counter(hubNomStep);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg,var(--hubBlue) 0%,var(--hubBlueAccent) 100%);
	color: #ffffff;
	font-family: 'Archivo',sans-serif;
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 18px;
}
/* ---------- TESTIMONIALS (preview-testimonials.html) ---------- */
.hubTestimonialGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.hubTestimonialCard {
	background: #fff;
	border: 1px solid var(--hubBorder);
	border-radius: 14px;
	padding: 24px;
	font-size: 14.5px;
	color: #333333;
}
.hubTestimonialCard:before {
	content: '\201C';
	font-family: 'Archivo',sans-serif;
	font-size: 40px;
	color: var(--hubBorder);
	display: block;
	line-height: .6;
	margin-bottom: 8px;
}

/* ---------- FORMS (contact, sponsor, unsubscribe) ---------- */
.hubForm {
	background: #fff;
	border: 1px solid var(--hubBorder);
	border-radius: 14px;
	padding: 32px;
	max-width: 600px;
}
.hubFormRow {
	margin-bottom: 16px;
}
.hubFormRow label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--hubInk);
	margin-bottom: 6px;
}
.hubFormRow input,
.hubFormRow textarea,
.hubFormRow select {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--hubBorder);
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
	color: var(--hubInk);
	transition: border-color .2s ease,box-shadow .2s ease;
}
/* Lead form card and its fields. */
.hubLeadForm {
	max-width: 720px;
	margin: 0 auto;
	box-shadow: 0 20px 50px rgba(4,48,83,.08);
}
.hubFormGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
}
.hubFormRowWide {
	grid-column: 1 / -1;
}
.hubFormRow input:focus,
.hubFormRow textarea:focus,
.hubFormRow select:focus {
	outline: none;
	border-color: var(--hubBlueAccent);
	box-shadow: 0 0 0 3px rgba(31,122,224,.15);
}
.hubFormRow select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1830' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
	padding-right: 40px;
	cursor: pointer;
}
.hubFormRow textarea {
	resize: vertical;
	min-height: 110px;
}
.hubFormReq {
	color: #cc0000;
	margin-left: 2px;
}
.hubFormConsent {
	margin: 4px 0 12px;
}
.hubFormCheck {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.5;
	color: #333333;
	margin-bottom: 10px;
	cursor: pointer;
}
.hubFormCheck input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 3px 0 0;
	accent-color: var(--hubBlue);
	cursor: pointer;
}
.hubFormActions {
	margin-top: 8px;
}
.hubFormActions .btn {
	width: 100%;
	font-family: inherit;
	cursor: pointer;
}
.hubFormFine {
	font-size: 12.5px;
	color: var(--hubTextMuted);
	margin-top: 12px;
	line-height: 1.5;
	text-align: center;
}
.hubFormPrivacy a {
	text-decoration: underline;
}
.hubFormThanks {
	text-align: center;
}
.hubFormThanks h2,
.hubFormThanks h3 {
	font-size: 24px;
	margin-bottom: 10px;
	color: var(--hubInk);
}
.hubFormThanks p {
	margin: 0 0 10px;
}
.hubFormThanks a {
	color: var(--hubBlueLight);
	text-decoration: underline;
}
.hubFormLabel {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--hubInk);
	margin-bottom: 6px;
}
.hubFormEvents {
	display: grid;
	gap: 10px;
}
.hubFormEventOption {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--hubBorder);
	border-radius: 8px;
	background: #fff;
	transition: border-color .2s ease,background-color .2s ease;
}
.hubFormEventOption:hover {
	border-color: var(--hubBlueAccent);
}
.hubFormEventOption:has(input:checked) {
	border-color: var(--hubBlueAccent);
	background: rgba(31,122,224,.06);
}
.hubFormRow .hubFormCheck {
	display: flex;
	font-size: 14px;
	font-weight: 400;
	color: #333333;
	margin-bottom: 0;
}
.hubFormRow .hubFormCheck input {
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
}
.hubFormThanksLinks {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}
.hubFormThanksLinks li {
	margin-bottom: 8px;
}
.hubFormThanksLinks a {
	font-weight: 700;
}
/* Unsubscribe form: one field, so a narrower card. */
.hubUnsubscribeForm {
	max-width: 520px;
}
.hubUnsubscribeIntro {
	max-width: 520px;
	margin: 0 auto 24px;
	color: var(--hubTextMuted);
	font-size: 16px;
	text-align: center;
}

/* ---------- FOOTER ---------- */
footer.hubFooter {
	background: #f2f2f2;
	padding: 56px 0 28px;
}
.hubFooterTop {
	display: flex;
	justify-content: start;
	align-items: flex-start;
	gap: 40px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}
.hubFooterBrand {
	max-width: 260px;
	flex: 0 1 260px;
}
.hubFooterCols {
	display: flex;
	gap: 60px;
	flex-wrap: wrap;
}
/* Footer column headings (h2 for heading order); #5f5f5f passes contrast on #f2f2f2. */
.hubFooterCols h2 {
	font-family: 'JetBrains Mono',monospace;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #5f5f5f;
	margin: 1.33em 0 14px;
}
.hubFooterCols a {
	display: block;
	font-size: 14px;
	color: #333333;
	margin-bottom: 10px;
	text-decoration: none;
	text-underline-offset: 3px;
}
/* Footer link underline on hover and for the current page (.active). */
.hubFooterCols a:hover {
	color: var(--hubBlue);
	text-decoration: underline;
	text-decoration-color: var(--hubBlueLight);
}
.hubFooterCols a.active {
	text-decoration: underline;
	text-decoration-color: var(--hubBlueLight);
}
.hubFooterDeepInsight {
	max-width: 360px;
	flex: 0 1 360px;
	margin-left: auto;
}
/* Deep Insight block heading -- styled as a featured callout. */
.hubFooterDeepInsight h2 {
	font-family: 'Archivo',sans-serif;
	font-size: 19px;
	font-weight: 800;
	color: var(--hubInk);
	margin: 1.33em 0 10px;
}
.hubFooterDeepInsight p {
	font-size: 13px;
	color: var(--hubTextMuted);
	margin: 0 0 12px;
}
.hubFooterDeepInsight .btn {
	font-size: 13px;
	padding: 10px 18px;
	margin-top: 4px;
}
.hubFooterSocial {
	display: flex;
	gap: 14px;
	margin-top: 16px;
}
.hubFooterSocial a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--hubBorder);
}
.hubFooterSocial a:hover {
	background: var(--hubBlue);
}
.hubFooterSocial svg {
	fill: #333333;
}
.hubFooterSocial a:hover svg {
	fill: #ffffff;
}
.hubFooterBottom {
	border-top: 1px solid #dddddd;
	padding-top: 22px;
	font-size: 13px;
	color: var(--hubTextMuted);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}
.hubFooterBottom a:hover {
	color: var(--hubBlue);
}

/* ============================================================
   PHONE AND TABLET (@media rules; must stay at the end of this file)
   ============================================================ */

@media (max-width:900px){
	.hubNomGrid4 {
		grid-template-columns: repeat(2,1fr);
	}
	.hubEventGrid {
		grid-template-columns: 1fr;
	}
	.hubEngageGrid {
		grid-template-columns: repeat(2,1fr);
	}
	.hubFormatGrid {
		grid-template-columns: repeat(2,1fr);
	}
	.hubSpeakerGrid {
		grid-template-columns: repeat(2,1fr);
	}
	.hubLogoPages {
		--hubLogoCols: 4;
	}
}

@media (max-width:860px){
	.hubNavLinks {
		display: none;
	}
	.hubMenuToggle {
		display: block;
	}
	.hubNavLinks.isOpen {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 66px;
		left: 0;
		right: 0;
		background: #fff;
		padding: 16px 24px;
		gap: 16px;
		border-bottom: 1px solid var(--hubBorder);
	}
}

@media (max-width:760px){
	.hubHero h1 {
		font-size: 36px;
	}
	.hubStatBar {
		flex-wrap: wrap;
	}
	.hubStat {
		flex: 1 1 50%;
		border-right: none;
		border-bottom: 1px solid rgba(255,255,255,.15);
	}
	.hubContactGrid {
		grid-template-columns: 1fr;
	}
	.hubVideoGrid {
		grid-template-columns: 1fr;
	}
	.hubPageHero h1 {
		font-size: 30px;
	}
	.hubSponsorHero {
		flex-direction: column;
	}
	.hubSponsorHeroSide {
		flex-basis: auto;
		width: 100%;
	}
	.hubPageHeroSplit {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}
	.hubNomGrid,
	.hubNomLists,
	.hubNomSteps {
		grid-template-columns: 1fr;
	}
	/* Footer stacks into one column; Deep Insight block stays left. */
	.hubFooterTop {
		flex-direction: column;
	}
	.hubFooterBrand,
	.hubFooterDeepInsight {
		max-width: 100%;
		flex: 1 1 100%;
		margin-left: 0;
	}
}

@media (max-width:700px){
	.hubYearGrid {
		grid-template-columns: 1fr;
	}
	.hubSolutionGrid {
		grid-template-columns: 1fr;
	}
	.hubTestimonialGrid {
		grid-template-columns: 1fr;
	}
}

@media (max-width:600px){
	.hubFooterCols {
		gap: 32px;
	}
}

@media (max-width:520px){
	.hubNomGrid4 {
		grid-template-columns: 1fr;
	}
	.hubEngageGrid {
		grid-template-columns: 1fr;
	}
	.hubFormatGrid {
		grid-template-columns: 1fr;
	}
	.hubFormGrid {
		grid-template-columns: 1fr;
	}
	.hubForm {
		padding: 24px;
	}
	.hubSpeakerGrid {
		grid-template-columns: 1fr;
	}
	.hubYearSplit {
		grid-template-columns: 1fr;
	}
	.hubLogoPages {
		--hubLogoCols: 2;
		--hubLogoRows: 3;
	}
	.hubCarouselDots {
		display: none;
	}
	.hubCarouselCount {
		display: block;
	}
	.hubCarouselArrow {
		width: 44px;
		height: 44px;
	}
}