/**
 * Launch polish — final consistency layer.
 * Loads last. Design tokens only. No new visual language.
 * Spacing scale: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96
 */

/* ==========================================================================
   Global rhythm tokens (aliases only)
   ========================================================================== */

:root {
	--control-h: 48px;
	--card-pad: 28px;
	--gutter: var(--space-5); /* 24 */
	--section-y: var(--space-9); /* 96 */
	--section-y-md: var(--space-8); /* 64 */
	--section-y-sm: var(--space-7); /* 48 */
}

/* ==========================================================================
   Containers — one left/right edge everywhere
   ========================================================================== */

.site-container,
.site-header .site-container,
.site-footer .site-container {
	max-width: var(--max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	box-sizing: border-box;
}

.section,
.section--alt,
.section--trending,
.section--explore-cat,
.section--feed,
.section--picks,
.section--discovery,
.section--brief {
	padding-top: var(--section-y);
	padding-bottom: var(--section-y);
}

.section-header {
	margin-bottom: var(--space-6);
}

.section-header--row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-5);
	margin-bottom: var(--space-6);
}

.section-lead,
.archive-header__lead,
.hero__lead {
	margin-top: 0;
	margin-bottom: var(--space-5);
	max-width: 42rem;
	line-height: 1.6;
}

.eyebrow {
	margin: 0 0 var(--space-4);
}

.archive-header {
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-5);
}

.breadcrumbs {
	margin: 0 0 var(--space-5);
}

.tech-hub-section {
	margin-top: var(--space-8);
}

/* ==========================================================================
   Header — shared 48px control baseline
   ========================================================================== */

.site-header {
	height: var(--header-h);
	min-height: var(--header-h);
}

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-h);
	min-height: var(--header-h);
	max-height: var(--header-h);
	padding: 0 !important;
	gap: var(--space-5);
	box-sizing: border-box;
}

.site-branding {
	display: flex;
	align-items: center;
	min-height: var(--control-h);
	flex-shrink: 0;
}

.site-branding__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	line-height: 1;
	min-height: var(--control-h);
}

.site-branding__logo {
	height: 36px;
	width: auto;
	max-width: min(180px, 42vw);
	object-fit: contain;
}

.site-branding__wordmark {
	line-height: 1;
	font-size: 1.625rem;
}

.site-branding__suffix {
	line-height: 1;
	position: relative;
	top: 0.1em;
}

.custom-logo-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--control-h);
}

.custom-logo-link img {
	max-height: 32px;
	width: auto;
	display: block;
}

.site-header__tools {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--control-h);
	flex-shrink: 0;
}

.header-search {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	height: var(--control-h);
	min-height: var(--control-h);
	position: relative;
}

.header-search__input {
	width: min(12rem, 34vw);
	height: var(--control-h) !important;
	min-height: var(--control-h) !important;
	max-height: var(--control-h);
	padding: 0 var(--space-4) !important;
	border-radius: var(--radius);
	font-size: 0.9375rem;
	line-height: 1;
	box-sizing: border-box;
}

.header-cta {
	display: none;
	align-items: center;
	justify-content: center;
	height: var(--control-h) !important;
	min-height: var(--control-h) !important;
	max-height: var(--control-h);
	padding: 0 var(--space-5) !important;
	border-radius: var(--radius);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	box-sizing: border-box;
	white-space: nowrap;
	transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.menu-toggle {
	width: var(--control-h);
	height: var(--control-h);
	min-width: var(--control-h);
	min-height: var(--control-h);
	border-radius: var(--radius);
	box-sizing: border-box;
}

@media (min-width: 1024px) {
	.site-header__bar {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		column-gap: var(--space-6);
	}

	.site-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: var(--control-h);
		justify-self: center;
	}

	.site-nav__menu {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		gap: var(--space-6) !important; /* 32 — equal rhythm */
		margin: 0;
		padding: 0;
	}

	.site-nav__menu > li {
		display: flex;
		align-items: center;
	}

	.site-nav__menu > li > a {
		display: inline-flex;
		align-items: center;
		height: var(--control-h);
		padding: 0;
		margin: 0;
		font-size: 1.0625rem;
		font-weight: 500;
		line-height: 1;
		border-radius: 0;
		background: transparent !important;
		border-bottom: 2px solid transparent;
		box-sizing: border-box;
	}

	.site-nav__menu > li > a:hover {
		background: transparent !important;
	}

	.site-nav__menu > li.current-menu-item > a,
	.site-nav__menu > li.current_page_item > a {
		background: transparent !important;
		border-bottom-color: var(--blue);
	}

	.header-search__input {
		width: 320px;
	}

	.header-cta {
		display: inline-flex;
	}

	.menu-toggle {
		display: none !important;
	}
}

/* Autocomplete — never overflow viewport */
.header-search .brel-ac,
.search-hero__form .brel-ac,
.hero__search .brel-ac {
	left: 0;
	right: auto;
	width: max(100%, 18rem);
	max-width: min(24rem, calc(100vw - 2 * var(--gutter)));
	box-sizing: border-box;
}

@media (max-width: 1023px) {
	.header-search .brel-ac {
		right: 0;
		width: auto;
		max-width: min(22rem, calc(100vw - 2 * var(--gutter)));
	}
}

/* ==========================================================================
   Buttons — one control language
   ========================================================================== */

.btn,
.btn--secondary,
.btn--sm,
.header-cta,
.mobile-search-bar__btn,
.empty-state__actions a,
.filter-chip-row__clear {
	font-family: var(--font-sans);
	transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.btn,
.btn--secondary {
	height: var(--control-h);
	min-height: var(--control-h);
	padding: 0 var(--space-5);
	border-radius: var(--radius);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	box-sizing: border-box;
}

.btn--sm {
	height: 40px;
	min-height: 40px;
	padding: 0 var(--space-4);
	font-size: 0.9375rem;
	border-radius: var(--radius);
}

.btn:hover,
.header-cta:hover {
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.btn:hover,
	.header-cta:hover,
	.card:hover,
	.sector-card:hover,
	.founder-card:hover,
	.trend-card:hover,
	.explore-tile:hover {
		transform: none;
	}
}

/* ==========================================================================
   Cards & grids — equal gutters, balanced heights
   ========================================================================== */

.card,
.sector-card,
.founder-card,
.trend-card,
.explore-tile,
.matters-featured .card {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	border: 1px solid var(--border);
	background: var(--card);
}

.card__link,
.card__link--insight,
.card--matter .card__link,
.sector-card,
.founder-card {
	padding: var(--card-pad);
	box-sizing: border-box;
}

.trend-card,
.explore-tile {
	padding: var(--space-5);
	box-sizing: border-box;
}

.matters-featured,
.sector-grid--home,
.founder-grid,
.insights-grid,
.insights-grid--home,
.sector-grid,
.home-section-grid,
.explore-tiles,
.picks-grid,
.discovery-grid {
	gap: var(--space-6);
}

.insights-grid,
.insights-grid--home,
.matters-featured,
.sector-grid--home,
.founder-grid,
.sector-grid,
.explorer-results[data-view="grid"] .insights-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), var(--card-max)));
	justify-content: start;
	align-items: stretch;
}

.insights-grid > *,
.matters-featured > *,
.sector-grid--home > *,
.founder-grid > *,
.explorer-company-grid > * {
	height: 100%;
}

.card,
.sector-card,
.founder-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	max-width: var(--card-max);
}

.card__link,
.card__link--insight,
.card--matter .card__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: 100%;
}

.badge,
.card__badge,
.company-row__badge,
.search-result-list__type,
.brel-ac__type {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==========================================================================
   Typography polish
   ========================================================================== */

.section-title,
.archive-header__title,
.hero__title {
	margin-top: 0;
	letter-spacing: -0.025em;
}

.product-subhead {
	margin: var(--space-6) 0 var(--space-4);
}

.card__title,
.trend-card__name,
.explore-tile__label {
	margin: var(--space-2) 0;
	line-height: 1.25;
}

.card__meta,
.card__excerpt,
.trend-card__meta,
.explore-tile__summary,
.search-result-list__meta {
	font-size: var(--text-meta);
	line-height: 1.5;
	color: var(--text-secondary);
}

/* ==========================================================================
   Search / Explorer / Compare shells
   ========================================================================== */

.search-shell,
.compare-shell,
.explorer-layout {
	align-items: start;
}

.search-hero__form {
	min-height: var(--control-h);
	padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
	box-sizing: border-box;
}

.search-hero__input {
	min-height: var(--control-h);
	height: var(--control-h);
}

.explorer-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
	min-height: var(--control-h);
}

.explorer-views__btn {
	min-height: 40px;
	padding: 0 var(--space-3);
	display: inline-flex;
	align-items: center;
}

.archive-filters input[type="search"],
.archive-filters input[type="text"],
.archive-filters select,
.compare-filters select {
	min-height: var(--control-h);
	height: var(--control-h);
	border-radius: var(--radius);
	box-sizing: border-box;
}

.compare-sticky-nav a {
	min-height: var(--control-h);
	display: inline-flex;
	align-items: center;
}

/* ==========================================================================
   Mobile — intentional, one-handed (homepage + product shells)
   ========================================================================== */

@media (max-width: 1023px) {
	body {
		font-size: 1rem;
		line-height: 1.55;
	}

	.site-container {
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}

	/* —— Hero: compact first viewport —— */
	.hero {
		padding: 1.25rem 0 1rem !important;
	}

	.hero__grid {
		display: flex !important;
		flex-direction: column;
		gap: 1rem !important;
	}

	.hero .eyebrow {
		margin-bottom: var(--space-2);
		font-size: 0.6875rem;
	}

	.hero__title {
		font-size: clamp(1.625rem, 6.8vw, 2.125rem) !important;
		line-height: 1.15 !important;
		letter-spacing: -0.02em;
		max-width: none !important;
		margin: 0 0 0.625rem !important;
	}

	.hero__lead {
		font-size: 0.9375rem !important;
		line-height: 1.45 !important;
		margin: 0 0 0.875rem !important;
		max-width: none !important;
		-webkit-line-clamp: 3;
	}

	.hero__search {
		margin: 0 0 0.875rem !important;
		max-width: none;
	}

	.hero__search-input {
		height: 48px !important;
		min-height: 48px !important;
		padding-left: 2.75rem;
		font-size: 1rem !important;
	}

	.hero__actions {
		display: grid !important;
		grid-template-columns: 1fr;
		gap: 0.625rem !important;
		margin: 0 0 0.875rem !important;
	}

	.hero__actions .btn,
	.hero__actions .btn--secondary {
		width: 100%;
		max-width: 100%;
		min-height: 48px;
		height: 48px;
	}

	.hero__stats,
	.hero__stats--dense {
		display: flex !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 0.625rem !important;
		margin: 0 calc(-1 * var(--space-4)) 0 !important;
		padding: 0 var(--space-4) 0.15rem !important;
		max-width: none !important;
		grid-template-columns: none !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.hero__stats::-webkit-scrollbar,
	.hero__stats--dense::-webkit-scrollbar {
		display: none;
	}

	.hero-stat {
		flex: 0 0 6.75rem !important;
		scroll-snap-align: start;
		padding: 0.625rem 0.75rem !important;
		min-height: 0 !important;
		gap: 0.2rem;
	}

	.hero-stat strong {
		font-size: 1.125rem !important;
	}

	.hero-stat span {
		font-size: 0.625rem;
		letter-spacing: 0.06em;
	}

	/* Intelligence panel — dense, no forced height */
	.hero__panel .intel-panel {
		border-radius: var(--radius-lg);
	}

	.hero__panel .intel-panel__header {
		padding: 0.75rem 1rem;
	}

	.hero__panel .intel-panel__pane {
		min-height: 0 !important;
	}

	.hero__panel .intel-panel__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding: 0.35rem 0.5rem 0;
		scrollbar-width: none;
	}

	.hero__panel .intel-row {
		padding: 0.7rem 0.9rem;
	}

	.hero__panel .intel-row:nth-child(n + 4) {
		display: none;
	}

	/* Sections */
	.section,
	.section--alt,
	.section--trending,
	.section--explore-cat,
	.section--feed,
	.section--picks,
	.section--discovery,
	.section--brief {
		padding-top: var(--space-7) !important; /* 48 */
		padding-bottom: var(--space-7) !important;
	}

	.section-header {
		margin-bottom: var(--space-5);
	}

	.section-header--row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
		margin-bottom: var(--space-5);
	}

	.section-title,
	.archive-header__title {
		font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
		line-height: 1.2;
		margin-bottom: var(--space-3);
	}

	.section-lead {
		font-size: 0.9375rem;
		margin-bottom: var(--space-4);
	}

	.product-subhead {
		margin: var(--space-5) 0 var(--space-3);
	}

	.header-search {
		flex: 1 1 auto;
		min-width: 0;
	}

	.header-search__input {
		width: 100%;
		max-width: none;
	}

	.site-header__tools {
		flex: 1 1 auto;
		justify-content: flex-end;
		min-width: 0;
		gap: var(--space-2);
	}

	.menu-toggle {
		flex-shrink: 0;
	}

	.mobile-search-bar__btn,
	.mobile-explore-fab {
		min-width: var(--control-h);
		min-height: var(--control-h);
	}

	.insights-grid,
	.insights-grid--home,
	.matters-featured,
	.sector-grid--home,
	.founder-grid,
	.explore-tiles,
	.picks-grid,
	.discovery-grid {
		grid-template-columns: 1fr !important;
		gap: var(--space-4) !important;
	}

	.card,
	.sector-card,
	.founder-card,
	.trend-card,
	.explore-tile {
		max-width: none;
		width: 100%;
		border-radius: var(--radius-lg);
	}

	.explore-tile {
		padding: var(--space-4);
		min-height: 0;
	}

	.trend-rail {
		display: flex !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-left: calc(-1 * var(--space-4));
		margin-right: calc(-1 * var(--space-4));
		padding-left: var(--space-4);
		padding-right: var(--space-4);
		gap: var(--space-3);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.trend-rail::-webkit-scrollbar {
		display: none;
	}

	.trend-card {
		flex: 0 0 min(72%, 16rem);
		scroll-snap-align: start;
		min-height: 0 !important;
		padding: var(--space-4);
	}

	.intel-feed__row {
		padding: var(--space-3) 0;
	}

	.compare-winner {
		grid-template-columns: 1fr;
	}

	.compare-matrix__head {
		display: none;
	}

	.compare-matrix__row {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-2);
		padding: var(--space-4);
	}

	.explorer-layout {
		gap: var(--space-5);
		grid-template-columns: 1fr !important;
	}

	.explorer-toolbar {
		flex-wrap: wrap;
	}

	.brief-block--premium {
		padding: var(--space-5) !important;
		grid-template-columns: 1fr !important;
	}

	.badge,
	.card__badge,
	.intel-feed__meta,
	.trend-card__meta {
		max-width: 100%;
	}
}

@media (max-width: 374px) {
	.site-branding__suffix {
		display: none;
	}

	.hero__title {
		font-size: 1.5rem !important;
	}

	.hero__actions .btn {
		font-size: 0.9375rem;
	}

	.header-search__input {
		font-size: 0.875rem;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.hero {
		padding: 2rem 0 1.5rem !important;
	}

	.hero__title {
		font-size: clamp(2rem, 4vw, 2.5rem) !important;
	}

	.hero__actions {
		grid-template-columns: 1fr 1fr !important;
	}

	.section,
	.section--alt,
	.section--trending,
	.section--explore-cat,
	.section--feed,
	.section--picks,
	.section--discovery,
	.section--brief {
		padding-top: var(--space-8) !important;
		padding-bottom: var(--space-8) !important;
	}

	.insights-grid,
	.matters-featured,
	.explore-tiles,
	.sector-grid--home {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: var(--space-5) !important;
	}

	.card,
	.sector-card,
	.founder-card {
		max-width: none;
	}
}

@media (min-width: 1440px) {
	.site-container {
		padding-left: var(--space-6);
		padding-right: var(--space-6);
	}
}

/* Desktop: kill leftover overlay-era hero top gap (header is in-flow) */
@media (min-width: 1024px) {
	.hero {
		padding-top: 2.5rem !important;
		padding-bottom: 4rem !important;
	}

	.site-main--front {
		padding: 0 !important;
	}
}

/* ==========================================================================
   Accessibility — focus + touch
   ========================================================================== */

:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

.btn:focus-visible,
.header-cta:focus-visible,
.header-search__input:focus-visible,
.menu-toggle:focus-visible,
.site-nav__menu a:focus-visible,
.mobile-explore-fab:focus-visible,
.mobile-search-bar__btn:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

.header-search__input:focus-visible {
	border-color: var(--blue);
	box-shadow: var(--focus-ring);
	outline: none;
}

a,
button,
.btn,
.header-cta,
.menu-toggle,
.explorer-views__btn,
.compare-sticky-nav a,
.search-jump a {
	-webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   Mobile emergency containment — prevents page-width blowout
   Root cause: desktop flex nav leaked into the drawer and expanded
   document width, clipping hero/buttons mid-word.
   ========================================================================== */

@media (max-width: 1023px) {
	html,
	body {
		overflow-x: clip;
		max-width: 100%;
	}

	.site-header,
	.site-header__bar,
	.site-main,
	.hero,
	.section,
	.site-footer,
	.site-container,
	.hero__grid,
	.hero__content,
	.hero__panel {
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	.site-container {
		width: 100%;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		/* Do NOT set overflow-x here — clip/hidden on this ancestor freezes
		   position:sticky children (report/model filter bars) while the page scrolls. */
		overflow-x: visible;
	}

	.header-search {
		display: none !important;
	}

	.site-header__bar {
		display: flex !important;
		grid-template-columns: none !important;
		padding: 0 !important;
		height: var(--header-h) !important;
		gap: 0.75rem;
	}

	.site-header__tools {
		margin-left: auto;
	}

	/* Drawer menu must be a vertical list — never horizontal flex */
	.site-nav {
		position: fixed !important;
		inset: 0 !important;
		width: 100% !important;
		max-width: 100vw !important;
		overflow: hidden !important;
		display: block !important;
		justify-self: auto !important;
	}

	.site-nav__drawer {
		width: min(20rem, 100%) !important;
		max-width: 100% !important;
		overflow-x: hidden !important;
	}

	.site-nav__menu {
		display: block !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.site-nav__menu > li {
		display: block !important;
		width: 100% !important;
	}

	.site-nav__menu > li > a,
	.site-nav__menu a {
		display: flex !important;
		width: 100% !important;
		height: auto !important;
		min-height: 52px !important;
		padding: 0.85rem 1.25rem !important;
		border-bottom: 1px solid var(--border) !important;
		background: transparent !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.hero__grid {
		display: flex !important;
		flex-direction: column !important;
		grid-template-columns: none !important;
		width: 100% !important;
		gap: 1rem !important;
	}

	.hero__title,
	.hero__lead,
	.hero__search,
	.hero__actions {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	.hero__title {
		white-space: normal !important;
		overflow-wrap: anywhere;
		word-break: normal;
	}

	.hero__lead {
		white-space: normal !important;
		display: block !important;
		-webkit-line-clamp: unset !important;
		overflow: visible !important;
	}

	.hero__actions .btn,
	.hero__actions .btn--secondary {
		width: 100% !important;
		max-width: 100% !important;
		white-space: normal !important;
		justify-content: center;
	}

	/* Edge carousels: scroll inside, never widen the page */
	.hero__stats,
	.hero__stats--dense,
	.trend-rail,
	.intel-panel__tabs {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		overflow-x: auto !important;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
	}

	.hero__panel,
	.intel-panel {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		overflow: hidden;
	}

	.explore-tiles,
	.insights-grid,
	.discovery-grid,
	.matters-featured {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}
}