/**
 * The site header and footer, rendered by PHP.
 *
 * Ported from src/components/Header.tsx, AnnouncementBar.tsx and Footer.tsx.
 * Values measured from the live header at 1440px unless noted.
 *
 * The dropdowns open on :hover and :focus-within, so they work with no
 * JavaScript at all; chrome.js only adds hover intent (a close delay), the
 * mobile drawer and the scrolled state.
 */

/* ─────────── Header shell ─────────── */
.hsx-hdr {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 50;
}

/* ── Announcement bar ── */
.hsx-hdr-promo {
	position: relative;
	z-index: 1;
	background-image: linear-gradient(to right, #14947c, #0f766e, #134e4a);
	color: #fff;
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.hsx-hdr-promo-inner {
	width: 100%;
	max-width: 80rem;
	margin-inline: auto;
	padding: 10px 16px;
	text-align: center;
}
@media (min-width: 640px)  { .hsx-hdr-promo-inner { padding-inline: 24px; } }
@media (min-width: 1024px) { .hsx-hdr-promo-inner { padding-inline: 32px; } }

.hsx-hdr-promo-text {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 8px;
	margin-inline: auto;
	font-size: 12px;
	line-height: 1.375;
	font-weight: 500;
}
@media (min-width: 640px) { .hsx-hdr-promo-text { font-size: 14px; line-height: 20px; } }
.hsx-hdr-promo-text span { font-weight: 700; color: #fff; }

.hsx-hdr-promo-icon { display: none; width: 14px; height: 14px; flex-shrink: 0; color: #fcd34d; }
@media (min-width: 640px) { .hsx-hdr-promo-icon { display: inline-block; } }

/* ── Nav bar ── */
/*
 * Positioned, because the dropdown panels resolve against it: the bar is the
 * viewport-wide box that ends where the header ends, which is exactly where
 * React's portalled, viewport-centred panels sat. Nothing between the bar and
 * a panel may be positioned, or the panel would anchor to its own trigger.
 */
.hsx-hdr-bar {
	--hsx-bar-border: 1px;
	position: relative;
	background-color: hsl(var(--background) / 0.95);
	backdrop-filter: blur(4px);
	border-bottom: var(--hsx-bar-border) solid hsl(var(--border) / 0.3);
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/*
 * React's `solidHeader` is true when the announcement bar is showing, when the
 * page has scrolled, or on a workspace hub — so with a promo bar up the header
 * is opaque from the start, which is what the live site does.
 */
.hsx-hdr.has-promo .hsx-hdr-bar,
.hsx-hdr.is-scrolled .hsx-hdr-bar {
	background-color: hsl(var(--background));
	border-bottom-color: hsl(var(--border) / 0.4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.hsx-hdr-inner {
	width: 100%;
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: 16px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
@media (min-width: 640px)  { .hsx-hdr-inner { padding-inline: 24px; } }
@media (min-width: 1024px) { .hsx-hdr-inner { padding-inline: 32px; } }

.hsx-hdr-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.hsx-hdr-logo img { height: 40px; width: auto; object-fit: contain; }

/* ── The centred pill of nav items ── */
.hsx-hdr-nav { display: none; }
@media (min-width: 1024px) {
	.hsx-hdr-nav {
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 4px 6px;
		border: 1px solid hsl(var(--border) / 0.5);
		border-radius: 9999px;
		background-color: hsl(var(--muted) / 0.3);
		overflow: visible;
	}
}

.hsx-hdr-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 9999px;
	font-size: 15px;
	line-height: 1.5;
	font-weight: 500;
	color: hsl(var(--foreground) / 0.8);
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}
.hsx-hdr-link:hover { color: hsl(var(--foreground)); background-color: hsl(var(--muted) / 0.6); }

/*
 * Colour only. React asks for `bg-primary/8`, but 8 is not a step in Tailwind's
 * opacity scale, so that utility is never generated and the live active link
 * has no background — matched here rather than "corrected".
 *
 * Two classes so the current page cannot lose to the hover rule.
 */
.hsx-hdr-link.hsx-hdr-link--on { color: hsl(var(--primary)); }
.hsx-hdr-link.hsx-hdr-link--on:hover { background-color: transparent; }

/* Only the items that drop a panel have a caret to space away from the label. */
.hsx-hdr-item--menu > .hsx-hdr-link { gap: 4px; }
.hsx-hdr-caret { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.2s ease; }
.hsx-hdr-item--menu:hover > .hsx-hdr-link .hsx-hdr-caret,
.hsx-hdr-item--menu:focus-within > .hsx-hdr-link .hsx-hdr-caret,
.hsx-hdr-item--menu.is-open > .hsx-hdr-link .hsx-hdr-caret { transform: rotate(180deg); }

/* ── Sign in / Get started ── */
.hsx-hdr-cta { display: none; }
@media (min-width: 1024px) { .hsx-hdr-cta { display: flex; align-items: center; gap: 8px; } }

.hsx-hdr-signin {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 9999px;
	font-size: 14px;
	line-height: 1.5;
	font-weight: 600;
	color: hsl(var(--foreground));
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.hsx-hdr-signin:hover { background-color: hsl(var(--muted) / 0.6); }

.hsx-hdr-start {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding-inline: 20px;
	border-radius: 9999px;
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	font-size: 13px;
	line-height: 1.5;
	font-weight: 500;
	text-decoration: none;
	box-shadow: 0 10px 15px -3px hsl(var(--primary) / 0.2), 0 4px 6px -4px hsl(var(--primary) / 0.2);
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.hsx-hdr-start:hover {
	background-color: hsl(var(--primary) / 0.9);
	box-shadow: 0 10px 15px -3px hsl(var(--primary) / 0.3), 0 4px 6px -4px hsl(var(--primary) / 0.3);
}
/* React sets `ml-1` on this chevron on top of the button's own gap. */
.hsx-hdr-start-icon { width: 16px; height: 16px; margin-left: 4px; }

/* ── Hamburger ── */
.hsx-hdr-mobile { position: static; }
@media (min-width: 1024px) { .hsx-hdr-mobile { display: none; } }

.hsx-hdr-burger {
	list-style: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: hsl(var(--foreground));
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.hsx-hdr-burger::-webkit-details-marker { display: none; }
.hsx-hdr-burger::marker { content: ""; }
.hsx-hdr-burger:hover { background-color: hsl(var(--muted)); }

.hsx-hdr-burger-icon { width: 20px; height: 20px; }
.hsx-hdr-burger-close { display: none; }
.hsx-hdr-mobile[open] .hsx-hdr-burger-open { display: none; }
.hsx-hdr-mobile[open] .hsx-hdr-burger-close { display: inline-block; }

/* ─────────── Dropdown panels ─────────── */
/*
 * React portals every panel to the body and centres it on the viewport, so a
 * menu is never anchored under its own trigger. Absolute against .hsx-hdr-bar
 * gets to the same place: the bar spans the viewport and ends where the header
 * ends, so `top: 100%; left: 50%` is the same box. Fixed would not work —
 * backdrop-filter on the bar makes it the containing block for fixed
 * descendants, the same trap the mobile drawer fell into.
 */
/*
 * `top: 100%` lands on the bar's padding box, which stops above its bottom
 * border — the panel would sit 1px high. Adding the border width back puts it
 * where React's `top: var(--site-header-height)` put it, and the two stay in
 * step because both read the same custom property.
 */
.hsx-hdr-panel {
	position: absolute;
	top: calc(100% + var(--hsx-bar-border, 1px));
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Each menu is pinned to the width its React component asked for. */
.hsx-hdr-panel--product    { width: min(820px, calc(100vw - 2rem)); }
.hsx-hdr-panel--mega       { width: min(760px, calc(100vw - 2rem)); }
.hsx-hdr-panel--workspaces { width: min(880px, calc(100vw - 2rem)); }

/*
 * Hover and focus open a panel with no script at all. chrome.js adds .is-open
 * with a close delay and then sets .js-menus, which retires the plain :hover
 * rule — without that the panel would blink shut for a frame as the pointer
 * crosses the bar between the trigger and the panel below it.
 */
.hsx-hdr:not(.js-menus) .hsx-hdr-item--menu:hover > .hsx-hdr-panel,
.hsx-hdr-item--menu:focus-within > .hsx-hdr-panel,
.hsx-hdr-item--menu.is-open > .hsx-hdr-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.hsx-nav-shell {
	overflow: hidden;
	max-height: calc(100vh - var(--site-header-height, 109px));
	overflow-y: auto;
	border: 1px solid hsl(var(--border) / 0.4);
	border-top: 0;
	border-radius: 0 0 16px 16px;
	background-color: hsl(var(--background));
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

/* ── Shared: group captions and the gradient footer button ── */
.hsx-nav-cap {
	margin: 0 0 8px;
	padding-inline: 4px;
	font-size: 11px;
	line-height: 1.5;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: hsl(var(--muted-foreground));
}

.hsx-nav-bar {
	border-top: 1px solid hsl(var(--border) / 0.4);
	background-color: hsl(var(--muted) / 0.3);
	padding: 10px 20px;
}

.hsx-nav-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 8px 16px;
	border-radius: 12px;
	background-image: linear-gradient(to bottom right, #0f766e, #134e4a, #0f172a);
	color: #fff;
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.hsx-nav-cta:hover { opacity: 0.9; color: #fff; }
.hsx-nav-cta-icon { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.15s ease; }
.hsx-nav-cta:hover .hsx-nav-cta-icon { transform: translateX(2px); }

/* ── Product ── caption, feature card, two columns of features ── */
.hsx-nav-stack { display: grid; gap: 20px; padding: 20px; }
.hsx-nav-block { min-width: 0; }

.hsx-nav-feature {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid hsl(var(--primary) / 0.15);
	border-radius: 12px;
	background-color: hsl(var(--primary) / 0.045);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.hsx-nav-feature:hover { border-color: hsl(var(--primary) / 0.3); background-color: hsl(var(--primary) / 0.08); }

.hsx-nav-feature-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px; height: 44px;
	border-radius: 12px;
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	box-shadow: 0 1px 2px 0 hsl(var(--primary) / 0.2);
}
.hsx-nav-feature-icon { width: 20px; height: 20px; }

.hsx-nav-feature-copy { flex: 1 1 0%; min-width: 0; }
.hsx-nav-feature-title { display: block; font-size: 14px; line-height: 20px; font-weight: 700; color: hsl(var(--foreground)); }
.hsx-nav-feature:hover .hsx-nav-feature-title { color: hsl(var(--primary)); }
.hsx-nav-feature-text { display: block; margin-top: 2px; font-size: 12px; line-height: 1.625; color: hsl(var(--muted-foreground)); }
.hsx-nav-feature-chev { width: 16px; height: 16px; flex-shrink: 0; color: hsl(var(--primary)); transition: transform 0.15s ease; }
.hsx-nav-feature:hover .hsx-nav-feature-chev { transform: translateX(2px); }

.hsx-nav-grid { display: grid; column-gap: 12px; row-gap: 4px; }
.hsx-nav-grid--tight { row-gap: 2px; }
.hsx-nav-grid--1 { grid-template-columns: minmax(0, 1fr); }
.hsx-nav-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hsx-nav-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.hsx-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 12px;
	color: hsl(var(--foreground));
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.hsx-nav-item:hover { background-color: hsl(var(--muted) / 0.6); color: hsl(var(--primary)); }

.hsx-nav-item-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px; height: 28px;
	border: 1px solid hsl(var(--border));
	border-radius: 12px;
	background-color: hsl(var(--muted) / 0.4);
	color: hsl(var(--primary));
	transition: border-color 0.15s ease;
}
.hsx-nav-item:hover .hsx-nav-item-tile { border-color: hsl(var(--primary) / 0.2); }
.hsx-nav-item-icon { width: 14px; height: 14px; }
.hsx-nav-item-label { font-size: 13px; line-height: 1.375; font-weight: 600; }

/* ── Mega ── Hosting, Resources, Company: one flex column per group ── */
.hsx-nav-cols { display: flex; flex-direction: column; gap: 20px; padding: 20px; }
@media (min-width: 1024px) { .hsx-nav-cols { flex-direction: row; align-items: flex-start; gap: 24px; } }
.hsx-nav-col { min-width: 0; flex: 1 1 0%; }

.hsx-nav-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 12px;
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.hsx-nav-row:hover { background-color: hsl(var(--muted) / 0.6); }

.hsx-nav-row-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px; height: 32px;
	border: 1px solid hsl(var(--border));
	border-radius: 12px;
	background-color: hsl(var(--muted) / 0.5);
	color: hsl(var(--primary));
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.hsx-nav-row:hover .hsx-nav-row-tile { border-color: hsl(var(--primary) / 0.2); background-color: hsl(var(--primary) / 0.05); }
.hsx-nav-row-icon { width: 16px; height: 16px; }

.hsx-nav-row-name {
	min-width: 0;
	flex: 1 1 0%;
	font-size: 14px;
	line-height: 1.375;
	font-weight: 600;
	color: hsl(var(--foreground));
	transition: color 0.15s ease;
}
.hsx-nav-row:hover .hsx-nav-row-name { color: hsl(var(--primary)); }

/* ── Workspaces ── the Tools menu: a rail of workspaces beside its tool grid ── */
.hsx-nav-ws { display: flex; }

.hsx-nav-rail {
	width: 232px;
	flex-shrink: 0;
	border-right: 1px solid hsl(var(--border) / 0.6);
	padding: 12px;
}

.hsx-nav-tab {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 12px;
	border: 0;
	border-radius: 12px;
	background-color: transparent;
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.hsx-nav-tab:hover { background-color: hsl(var(--muted) / 0.6); }
.hsx-nav-tab.is-on { background-color: hsl(var(--primary) / 0.07); }

.hsx-nav-tab-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
	width: 36px; height: 36px;
	border-radius: 12px;
	background-color: hsl(var(--primary) / 0.1);
	color: hsl(var(--primary));
}
.hsx-nav-tab.is-on .hsx-nav-tab-tile {
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}
.hsx-nav-tab-icon { width: 18px; height: 18px; }

.hsx-nav-tab-copy { min-width: 0; }
.hsx-nav-tab-label { display: block; font-size: 15px; line-height: 1.25; font-weight: 700; color: hsl(var(--foreground)); }
.hsx-nav-tab.is-on .hsx-nav-tab-label { color: hsl(var(--primary)); }
.hsx-nav-tab-blurb { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.375; color: hsl(var(--muted-foreground)); }

.hsx-nav-panes { min-width: 0; flex: 1 1 0%; }
.hsx-nav-pane { display: none; padding: 16px; }
@media (min-width: 640px) { .hsx-nav-pane { padding: 20px; } }
.hsx-nav-pane.is-on { display: block; }

.hsx-nav-pane-title { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 700; color: hsl(var(--foreground)); }
.hsx-nav-pane-blurb { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: hsl(var(--muted-foreground)); }

.hsx-nav-tools { margin-top: 16px; display: grid; gap: 8px; }
@media (min-width: 640px) { .hsx-nav-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.hsx-nav-tool {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid hsl(var(--border) / 0.6);
	border-radius: 12px;
	background-color: hsl(var(--card));
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.hsx-nav-tool:hover { border-color: hsl(var(--primary) / 0.35); background-color: hsl(var(--primary) / 0.04); }

.hsx-nav-tool-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px; height: 28px;
	border-radius: 12px;
	background-color: hsl(var(--primary) / 0.1);
	color: hsl(var(--primary));
}
.hsx-nav-tool-icon { width: 15px; height: 15px; }

.hsx-nav-tool-name {
	min-width: 0;
	flex: 1 1 0%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 600;
	color: hsl(var(--foreground));
}

.hsx-nav-tool-badge {
	flex-shrink: 0;
	font-size: 10px;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: hsl(var(--primary));
}

.hsx-nav-pane-foot {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid hsl(var(--border) / 0.6);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
@media (min-width: 640px) {
	.hsx-nav-pane-foot { flex-direction: row; align-items: center; justify-content: space-between; }
}
.hsx-nav-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: hsl(var(--muted-foreground)); }

/* ─────────── Mobile drawer ─────────── */
/*
 * Absolute, not fixed. `backdrop-filter` on .hsx-hdr-bar makes it a containing
 * block for fixed descendants, so a fixed drawer resolved against the 64px bar
 * instead of the viewport and collapsed to a sliver. `top: 100%` puts it
 * directly under the bar, which is where it belongs anyway.
 */
.hsx-hdr-drawer {
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	z-index: 50;
	max-height: calc(100vh - var(--site-header-height, 124px));
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: hsl(var(--background));
	border-top: 1px solid hsl(var(--border) / 0.5);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.hsx-hdr-drawer-inner {
	width: 100%;
	max-width: 80rem;
	margin-inline: auto;
	padding: 12px 20px 32px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hsx-hdr-drawer-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: hsl(var(--foreground));
	text-decoration: none;
}
.hsx-hdr-drawer-link:hover { background-color: hsl(var(--muted) / 0.6); }
.hsx-hdr-drawer-link--sub { padding-left: 22px; font-weight: 400; color: hsl(var(--muted-foreground)); }
.hsx-hdr-drawer-icon { width: 16px; height: 16px; flex-shrink: 0; color: hsl(var(--primary)); }

.hsx-hdr-drawer-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: hsl(var(--foreground));
	cursor: pointer;
	list-style: none;
}
.hsx-hdr-drawer-summary::-webkit-details-marker { display: none; }
.hsx-hdr-drawer-summary::marker { content: ""; }
.hsx-hdr-drawer-group[open] > .hsx-hdr-drawer-summary .hsx-hdr-caret { transform: rotate(180deg); }

.hsx-hdr-drawer-title {
	margin: 10px 0 4px 12px;
	font-size: 11px;
	line-height: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: hsl(var(--muted-foreground));
}

.hsx-hdr-drawer-cta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid hsl(var(--border) / 0.5);
}
.hsx-hdr-drawer-cta .hsx-hdr-signin,
.hsx-hdr-drawer-cta .hsx-hdr-start { flex: 1 1 0%; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
	.hsx-hdr-bar, .hsx-hdr-link, .hsx-hdr-panel, .hsx-hdr-caret,
	.hsx-nav-item, .hsx-nav-row, .hsx-nav-tool, .hsx-nav-tab,
	.hsx-nav-feature, .hsx-nav-cta, .hsx-hdr-start { transition: none; }
}

/* ═══════════════════════ Footer ═══════════════════════
   Measured from the live footer at 1440px: 435px tall, the main band 390px
   with 32px/24px padding and a hairline top, the legal bar 45px. */

.hsx-ftr { background-color: #f0fdfa; }

.hsx-ftr-main {
	padding: 32px 24px;
	border-top: 1px solid hsl(var(--border) / 0.6);
}

.hsx-ftr-inner { width: 100%; max-width: 72rem; margin-inline: auto; }

.hsx-ftr-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 640px)  { .hsx-ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Five equal columns: brand, Platform, Hosting, Support, Contact Us. */
@media (min-width: 1024px) { .hsx-ftr-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* lg:pr-4 on the brand column, which is what narrows the tagline's measure. */
@media (min-width: 1024px) { .hsx-ftr-brand { padding-right: 16px; } }

/* Block, not inline-block: an inline image sits on the text baseline and the
   descender space under it added 6px to the column. React marks it `block`. */
.hsx-ftr-logo { display: block; margin-bottom: 12px; }
.hsx-ftr-logo img { display: block; height: 48px; width: auto; object-fit: contain; }

.hsx-ftr-tagline {
	margin-bottom: 16px;
	font-size: 14px;
	line-height: 1.625;
	color: hsl(var(--muted-foreground));
}

/* SocialLinks size="sm": 36px buttons, 16px marks. */
.hsx-ftr-social { display: flex; align-items: center; gap: 8px; }

.hsx-ftr-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border: 1px solid hsl(var(--border) / 0.6);
	border-radius: 9999px;
	color: hsl(var(--muted-foreground));
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.hsx-ftr-social-link:hover,
.hsx-ftr-social-link:focus-visible {
	color: hsl(var(--primary));
	background-color: hsl(var(--primary) / 0.1);
	border-color: hsl(var(--primary) / 0.3);
}
.hsx-ftr-social-icon { width: 16px; height: 16px; }

.hsx-ftr-col-title {
	margin-bottom: 16px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	text-transform: uppercase;
	color: hsl(var(--foreground));
}

.hsx-ftr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.hsx-ftr-link {
	font-size: 14px;
	line-height: 20px;
	color: hsl(var(--muted-foreground));
	text-decoration: none;
	transition: color 0.15s ease;
}
.hsx-ftr-link:hover { color: hsl(var(--primary)); }
/* Two classes so the current page cannot lose to the hover rule. */
.hsx-ftr-link.hsx-ftr-link--on { color: hsl(var(--primary)); }

.hsx-ftr-contact-text {
	margin-bottom: 12px;
	font-size: 14px;
	line-height: 1.625;
	color: hsl(var(--muted-foreground));
}

.hsx-ftr-mail {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
	font-size: 14px;
	line-height: 20px;
	color: hsl(var(--muted-foreground));
	text-decoration: none;
	transition: color 0.15s ease;
}
.hsx-ftr-mail:hover { color: hsl(var(--primary)); }
.hsx-ftr-mail-icon { width: 16px; height: 16px; }

.hsx-ftr-touch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 20px;
	border-radius: 9999px;
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	text-decoration: none;
	box-shadow: 0 4px 6px -1px hsl(var(--primary) / 0.2);
	transition: background-color 0.15s ease;
}
.hsx-ftr-touch:hover { background-color: hsl(var(--primary) / 0.9); }
.hsx-ftr-touch-icon { width: 16px; height: 16px; }

/* ── Open-source strip ── */
.hsx-ftr-stack { margin-top: 24px; padding-top: 20px; border-top: 1px solid hsl(var(--border) / 0.5); }

.hsx-ftr-stack-label {
	margin-bottom: 12px;
	text-align: center;
	font-size: 11px;
	line-height: 16px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: hsl(var(--muted-foreground) / 0.7);
}

.hsx-ftr-stack-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; }

.hsx-ftr-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: 1px solid hsl(var(--border) / 0.4);
	border-radius: 9999px;
	background-color: rgba(255, 255, 255, 0.6);
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	color: hsl(var(--muted-foreground) / 0.8);
}
.hsx-ftr-chip-dot { width: 6px; height: 6px; border-radius: 9999px; background-color: hsl(var(--primary) / 0.6); }

/* ── Legal bar ── */
.hsx-ftr-legal {
	border-top: 1px solid hsl(var(--border) / 0.6);
	background-color: rgba(255, 255, 255, 0.4);
}

.hsx-ftr-legal-inner {
	width: 100%;
	max-width: 72rem;
	margin-inline: auto;
	padding: 14px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
@media (min-width: 640px) { .hsx-ftr-legal-inner { flex-direction: row; } }

.hsx-ftr-legal-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
	font-size: 12px;
	line-height: 16px;
	color: hsl(var(--muted-foreground));
}
.hsx-ftr-legal-links a { color: inherit; text-decoration: none; transition: color 0.15s ease; }
.hsx-ftr-legal-links a:hover { color: hsl(var(--primary)); }

.hsx-ftr-legal-dot { display: none; width: 4px; height: 4px; border-radius: 9999px; background-color: hsl(var(--muted-foreground) / 0.4); }
@media (min-width: 640px) { .hsx-ftr-legal-dot { display: inline-block; } }

.hsx-ftr-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	line-height: 16px;
	color: hsl(var(--muted-foreground));
}
.hsx-ftr-status-dot { width: 6px; height: 6px; border-radius: 9999px; background-color: #22c55e; }

@media (prefers-reduced-motion: reduce) {
	.hsx-ftr-link, .hsx-ftr-mail, .hsx-ftr-touch { transition: none; }
}

/* A CTA card that overlaps the footer's top edge needs room above the columns,
   the way React's <Footer overlapTop /> did. */
.hsx-ftr--overlap .hsx-ftr-main { padding-top: 112px; }

/* ─────────── Cookie notice ─────────── */
/*
 * Ported from App's CookieBanner. Values measured from the live banner at
 * 1440px: 320×59 at 16,925 on a 1000px viewport.
 */
.hsx-cookie {
	position: fixed;
	bottom: 16px;
	left: 16px;
	z-index: 9999;
	max-width: 20rem;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(24px);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.hsx-cookie-text {
	margin: 0;
	font-size: 12px;
	line-height: 1.375;
	color: hsl(var(--foreground) / 0.8);
}

.hsx-cookie-link { color: hsl(var(--primary)); font-weight: 500; text-decoration: none; }
.hsx-cookie-link:hover { text-decoration: underline; }

.hsx-cookie-ok {
	flex-shrink: 0;
	margin: 0;
	padding: 6px 16px;
	border: 0;
	border-radius: 9999px;
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	font-family: inherit;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.hsx-cookie-ok:hover { background-color: hsl(var(--primary) / 0.9); }

@media (prefers-reduced-motion: reduce) {
	.hsx-cookie-ok { transition: none; }
}

/* ── Google "add as a preferred source" card ──
   Styled to match the docs rail's own call-to-action box (.docs-toc-cta): the
   same primary-tinted gradient, border and radius, so it reads as part of the
   theme rather than a bolted-on widget.

   Horizontal padding is deliberately smaller than the CTA's 20px. Google's
   label needs exactly 158px and the docs rail is only 240px wide, so the card
   can spend at most 10px a side before the label clips to
   "Add to Preferred Sou…" — measured, not guessed: 12px already truncates. */
.hsx-prefsrc {
	margin-top: 2rem;
	padding: 1rem 10px;
	border-radius: 0.75rem;
	border: 1px solid hsl(var(--primary) / 0.2);
	background: linear-gradient(135deg, hsl(var(--primary) / 0.08), hsl(var(--primary) / 0.03));
}

.hsx-prefsrc-copy {
	margin: 0 0 0.625rem;
	font-size: 0.8125rem;
	line-height: 1.3;
	font-weight: 700;
	color: hsl(var(--foreground));
}

/* Google sizes its own button; keep it from spilling out of a narrow rail. The
   button arrives asynchronously into a container that is otherwise zero
   height, so reserve the 40px it measures. */
.hsx-prefsrc [google-add-preferred-source-btn] {
	min-height: 40px;
	max-width: 100%;
	overflow: hidden;
}

/* ── Which of the two placements shows ──
   The rail is desktop-only on both templates, so the card after the article
   covers every width below that. Exactly one is ever visible, and both are in
   the initial HTML so Google initialises both on its first pass. */
.hsx-prefsrc--rail { display: none; }
.hsx-prefsrc--foot { display: block; }

/* Docs rail appears at 1280px, the blog rail at 1024px. */
@media (min-width: 1280px) {
	.docs-page .hsx-prefsrc--rail { display: block; }
	.docs-page .hsx-prefsrc--foot { display: none; }
}

@media (min-width: 1024px) {
	.hsx-post .hsx-prefsrc--rail { display: block; }
	.hsx-post .hsx-prefsrc--foot { display: none; }
}

/* After the article the card is full width, so centre it and cap it rather
   than letting it run the whole measure. */
.hsx-prefsrc--foot {
	max-width: 22rem;
}