/** hostsnix/platform-choice — VPS OS + applications. */
.hsx-pc-panel {
	border: 1px solid hsl(var(--primary) / 0.15);
	border-radius: 2rem;
	background-image: linear-gradient(180deg, rgba(13, 148, 136, 0.07), rgba(13, 148, 136, 0.02));
	padding: 28px 16px;
}
@media (min-width: 640px) { .hsx-pc-panel { padding: 36px 28px; } }
@media (min-width: 768px) { .hsx-pc-panel { padding-inline: 36px; } }

.hsx-pc-head { text-align: center; margin-bottom: 28px; }
@media (min-width: 768px) { .hsx-pc-head { margin-bottom: 36px; } }

.hsx-pc-h2 {
	font-size: 24px; font-weight: 700; letter-spacing: -0.025em;
	line-height: 32px; color: hsl(var(--foreground));
}
@media (min-width: 640px) { .hsx-pc-h2 { font-size: 30px; line-height: 36px;} }
@media (min-width: 768px) { .hsx-pc-h2 { font-size: 2.1rem; } }

.hsx-pc-intro {
	margin-inline: auto; margin-top: 10px; max-width: 42rem;
	font-size: 14px; line-height: 20px; color: hsl(var(--muted-foreground));
}
@media (min-width: 640px) { .hsx-pc-intro { font-size: 16px; line-height: 24px;} }

/* The plus keeps its own column so both halves stay symmetrical. */
.hsx-pc-halves { display: grid; gap: 24px; }
@media (min-width: 1024px) {
	.hsx-pc-halves {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		gap: 16px; align-items: stretch;
	}
}

.hsx-pc-half { height: 100%; }

.hsx-pc-split { display: grid; height: 100%; gap: 16px; }
@media (min-width: 640px) {
	.hsx-pc-split { grid-template-columns: minmax(186px, 0.72fr) minmax(0, 1.28fr); align-items: stretch; }
}

.hsx-pc-card {
	display: flex; flex-direction: column; justify-content: center;
	border: 1px solid hsl(var(--border) / 0.5); border-radius: 16px;
	background-color: hsl(var(--card) / 0.7); padding: 16px;
}
.hsx-pc-card--apps {
	border-color: hsl(var(--primary) / 0.25);
	background-color: hsl(var(--primary) / 0.07);
}

.hsx-pc-h3 { font-size: 18px; font-weight: 700; line-height: 1.375; color: hsl(var(--foreground)); }
@media (min-width: 640px) { .hsx-pc-h3 { font-size: 20px; } }

.hsx-pc-text { margin-top: 8px; font-size: 13px; line-height: 1.625; color: hsl(var(--muted-foreground)); }

/* ── OS logos: 4 then 3, the second row inset ── */
.hsx-pc-os { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.hsx-pc-os-row { display: grid; gap: 10px; }
.hsx-pc-os-row--first { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hsx-pc-os-row--second { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { .hsx-pc-os-row--second { margin-inline: 12.5%; } }

.hsx-pc-os-item {
	display: flex; min-width: 0; flex-direction: column;
	align-items: center; justify-content: center; gap: 8px;
	border: 1px solid hsl(var(--border) / 0.5); border-radius: 12px;
	background-color: hsl(var(--card)); padding: 12px 4px;
	box-shadow: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
}
.hsx-pc-os-img { height: 36px; width: 36px; -o-object-fit: contain; object-fit: contain; }
.hsx-pc-os-label {
	width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	text-align: center; font-size: 11px; font-weight: 500; line-height: 1.15;
	color: hsl(var(--foreground) / 0.8);
}

/* ── Plus divider ── */
.hsx-pc-plus { display: flex; align-items: center; justify-content: center; }
@media (min-width: 1024px) { .hsx-pc-plus { flex-direction: column; align-self: center; } }

.hsx-pc-plus-rule { display: none; height: 56px; width: 1px; background-color: hsl(var(--primary) / 0.2); }
@media (min-width: 1024px) { .hsx-pc-plus-rule { display: block; } }

.hsx-pc-plus-badge {
	display: flex; height: 44px; width: 44px; flex-shrink: 0;
	align-items: center; justify-content: center; border-radius: 9999px;
	border: 1px solid hsl(var(--primary) / 0.25);
	background-color: hsl(var(--card)); color: hsl(var(--primary));
	box-shadow: 0 0 0 6px rgba(13, 148, 136, 0.08);
}
@media (min-width: 1024px) { .hsx-pc-plus-badge { margin-block: 8px; } }
.hsx-pc-plus-svg { height: 20px; width: 20px; }

/* ── Application tabs and chips ── */
.hsx-pc-apps { display: flex; flex-direction: column; justify-content: flex-start; }

.hsx-pc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.hsx-pc-tab {
	border: 1px solid hsl(var(--border) / 0.6); border-radius: 9999px;
	background-color: hsl(var(--card)); color: hsl(var(--foreground) / 0.7);
	padding: 4px 10px; font: inherit; font-size: 11px; font-weight: 500;
	cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.hsx-pc-tab:hover { border-color: hsl(var(--primary) / 0.4); }
.hsx-pc-tab.is-active {
	border-color: hsl(var(--primary)); background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}
.hsx-pc-tab:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

/* Auto-width chips: a fixed grid broke long names mid-word. */
.hsx-pc-chips { display: flex; min-height: 128px; flex-wrap: wrap; align-content: flex-start; gap: 8px; }

.hsx-pc-chip {
	display: inline-flex; align-items: center; gap: 6px;
	border: 1px solid hsl(var(--border) / 0.5); border-radius: 12px;
	background-color: hsl(var(--card)); padding: 8px 10px;
	box-shadow: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
}
/* Brand mark as a mask so it takes the brand's colour, not the SVG's own
   (most of these logos ship monochrome). --hsx-pc-mark-color is set per chip. */
.hsx-pc-chip-mark {
	display: block; height: 20px; width: 20px; flex-shrink: 0;
	background-color: var(--hsx-pc-mark-color, hsl(var(--foreground)));
	-webkit-mask-image: var(--hsx-pc-mark); mask-image: var(--hsx-pc-mark);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain; mask-size: contain;
}
.hsx-pc-chip-label { white-space: nowrap; font-size: 12px; font-weight: 500; color: hsl(var(--foreground) / 0.85); }

/* ── Proof strip ── */
.hsx-pc-proof {
	margin-top: 24px; display: grid; gap: 16px;
	border: 1px solid hsl(var(--border) / 0.5); border-radius: 16px;
	background-color: hsl(var(--card)); padding: 20px;
}
@media (min-width: 640px) { .hsx-pc-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1024px) { .hsx-pc-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.hsx-pc-proof-item { display: flex; align-items: flex-start; gap: 12px; }
@media (min-width: 640px) {
	.hsx-pc-proof-item { border-left: 1px solid hsl(var(--border) / 0.6); padding-left: 20px; }
	.hsx-pc-proof-item:first-child { border-left: 0; padding-left: 0; }
}

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

.hsx-pc-proof-title { font-size: 14px; font-weight: 700; line-height: 1.25; color: hsl(var(--foreground)); }
.hsx-pc-proof-detail { margin-top: 2px; font-size: 12px; line-height: 1.375; color: hsl(var(--muted-foreground)); }

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