.nt-hosting-ranking-cards-wrap,
.nt-hosting-ranking-cards-wrap * {
	box-sizing: border-box;
}

.nt-hosting-ranking-cards-wrap {
	--nt-hrc-text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
	--nt-hrc-brand: #1263ff;
	--nt-hrc-brand-2: #4f95ff;
	--nt-hrc-brand-soft: #eaf2ff;
	--nt-hrc-card: #f7f9fe;
	--nt-hrc-track: #e8edf6;
	--nt-hrc-border: #dfe6f1;
	--nt-hrc-text: #071a33;
	--nt-hrc-muted: #536987;
	--nt-hrc-faint: #a7b6c9;
	--nt-hrc-green: #20c24b;
	--nt-hrc-green-2: #129537;
	--nt-hrc-price-green: #08723f;
	--nt-hrc-red: #c93636;
	--nt-hrc-rank-red: #ee8c8c;
	--nt-hrc-rank-red-soft: #fff0f0;
	--nt-hrc-shadow-sm: 0 3px 10px rgb(22 42 75 / 7%);
	--nt-hrc-shadow-md: 0 10px 26px rgb(18 99 255 / 12%);
	width: min(1500px, 100%);
	margin: 40px auto 2rem;
}

.nt-hosting-ranking-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 15px;
	direction: ltr;
}

.nt-hrc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	min-width: 0;
	padding: 3.25rem clamp(1rem, 2vw, 1.5rem) 1.5rem;
	border: 1.5px solid var(--nt-hrc-border);
	border-radius: 1.5rem;
	background: var(--nt-hrc-card);
	box-shadow: var(--nt-hrc-shadow-sm);
	color: var(--nt-hrc-text);
	direction: rtl;
	line-height: 1.7;
}

.nt-hrc-card--1 {
	grid-column: 2;
	grid-row: 1;
}

.nt-hrc-card--2 {
	grid-column: 1;
	grid-row: 1;
}

.nt-hrc-card--3 {
	grid-column: 3;
	grid-row: 1;
}

.nt-hrc-card.is-featured {
	border-color: var(--nt-hrc-rank-red);
	box-shadow: 0 0 0 3px var(--nt-hrc-rank-red-soft), var(--nt-hrc-shadow-md);
}

.nt-hrc-rank-badge {
	position: absolute;
	top: -1px;
	right: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 58px;
	padding: 0 0.75rem;
	border: 1.5px solid var(--nt-hrc-border);
	border-top-color: var(--nt-hrc-card);
	border-radius: 0 0 16px 16px;
	background: var(--nt-hrc-card);
	box-shadow: none;
	color: #dfe5ec;
	font-size: 42px;
	font-weight: 900;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	transform: translateX(50%);
}

.nt-hrc-card.is-featured .nt-hrc-rank-badge {
	border-color: var(--nt-hrc-rank-red);
	border-top-color: var(--nt-hrc-card);
	box-shadow: 0 10px 18px rgb(201 54 54 / 9%);
	color: #ef999ad6;
}

.nt-hrc-top {
	display: grid;
	grid-template-columns: minmax(0, 1.24fr) 1px minmax(28px, 0.82fr);
	align-items: start;
	gap: 1rem;
	padding-top: 1.25rem;
}

.nt-hrc-top::before {
	content: "";
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	width: 1px;
	height: 54px;
	background: linear-gradient(180deg, transparent, #d8e1ee 18%, #d8e1ee 82%, transparent);
}

.nt-hrc-company {
	grid-column: 1;
	display: grid;
	gap: 0.25rem;
	padding-top: 0.4rem;
	min-width: 0;
	text-align: right;
}

.nt-hrc-company-name {
	margin: 0 !important;
	color: var(--nt-hrc-text);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}

.nt-hrc-company-subtitle {
	margin: 0;
	color: var(--nt-hrc-muted);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.nt-hrc-score {
	grid-column: 3;
	min-width: 0;
	text-align: center;
	direction: ltr;
}

.nt-hrc-score-label {
	margin-bottom: 0.15rem;
	color: var(--nt-hrc-faint);
	font-size: 10px;
	font-weight: 300;
	text-align: center;
}

.nt-hrc-score-value {
	color: var(--nt-hrc-brand);
	font-size: var(--nt-hrc-text-2xl);
	font-weight: 700;
	line-height: 0.95;
}

.nt-hrc-metrics {
	display: grid;
	gap: 0.75rem;
	margin-top: 0.2rem;
	margin-bottom: 0.25rem;
}

.nt-hrc-metric {
	display: grid;
	gap: 0.25rem;
}

.nt-hrc-metric-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	color: var(--nt-hrc-muted);
	font-size: 11px;
	font-weight: 200;
}

.nt-hrc-metric-name {
	text-align: right;
}

.nt-hrc-metric-value {
	color: #3f5f88;
	text-align: left;
	direction: ltr;
	white-space: nowrap;
}

.nt-hrc-track {
	height: 9px;
	overflow: hidden;
	border-radius: 9999px;
	background: linear-gradient(90deg, #eef3fb, #dfe8f6);
	box-shadow: inset 0 1px 3px rgb(7 26 51 / 10%);
	direction: rtl;
}

.nt-hrc-fill {
	display: block;
	width: var(--nt-hrc-value);
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--nt-hrc-brand-2), var(--nt-hrc-brand));
	box-shadow: 0 0 12px rgb(18 99 255 / 20%);
	transition: width 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.nt-hrc-price-box {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 1.45rem;
	padding-top: 0.45rem;
	text-align: center;
	direction: ltr;
	min-width: 0;
}

.nt-hrc-price-before,
.nt-hrc-price-current {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 0.08rem;
	min-width: 0;
	flex: 1 1 0;
	white-space: nowrap;
}

.nt-hrc-price-current {
	color: var(--nt-hrc-price-green);
}

.nt-hrc-price-before {
	color: #8797aa;
	line-height: 1.1;
}

.nt-hrc-before-label,
.nt-hrc-price-kicker {
	color: #b0bed1;
	font-size: 10px;
	font-weight: 300;
	line-height: 1.15;
}

.nt-hrc-amount {
	color: var(--nt-hrc-price-green);
	font-size: clamp(1.75rem, 1.35rem + 1.25vw, 2.35rem);
	font-weight: 900;
	line-height: 0.98;
	direction: ltr;
}

.nt-hrc-old-price {
	position: relative;
	color: #ff828d;
	font-size: clamp(1.45rem, 1.1rem + 0.95vw, 2rem);
	font-weight: 900;
	line-height: 0.98;
	direction: ltr;
}

.nt-hrc-old-price::after {
	content: "";
	position: absolute;
	right: -4px;
	left: -4px;
	top: 51%;
	height: 1.5px;
	background: #909baa;
	opacity: 0.85;
	transform: rotate(-8deg);
	transform-origin: center;
}

.nt-hrc-period {
	color: #b0bed1;
	font-size: 10px;
	font-weight: 300;
	line-height: 1.15;
}

.nt-hrc-price-divider {
	display: block;
	flex: 0 0 auto;
	align-self: center;
	width: 1px;
	min-height: 88px;
	background: linear-gradient(180deg, transparent, #d8e1ee 14%, #d8e1ee 86%, transparent);
}

.nt-hrc-actions {
	display: flex;
	gap: 9px;
	margin-top: -0.35rem;
	direction: rtl;
}

.nt-hrc-actions.has-one-button {
	display: grid;
}

.nt-hrc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-height: 35px;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none !important;
	transition: background 0.2s ease, border-color 0.2s ease, filter 0.2s ease, transform 0.15s ease;
}

.nt-hrc-button--visit {
	border: 0;
	background: linear-gradient(180deg, var(--nt-hrc-green) 0%, var(--nt-hrc-green-2) 100%);
	color: #ffffff !important;
}

.nt-hrc-button--visit:hover,
.nt-hrc-button--visit:focus {
	background: linear-gradient(160deg, var(--nt-hrc-brand) 0%, var(--nt-hrc-brand-2) 100%);
	color: #ffffff !important;
	filter: saturate(1.04);
}

.nt-hrc-button--review {
	border: 1px solid rgba(170, 214, 242, 0.38);
	background: #ffffff;
	color: var(--nt-hrc-brand) !important;
}

.nt-hrc-button--review:hover,
.nt-hrc-button--review:focus {
	border-color: rgba(30, 136, 229, 0.5);
	background: #e9f8ff;
	color: var(--nt-hrc-brand) !important;
}

.nt-hrc-button:active {
	transform: translateY(1px);
}

.nt-hrc-button:focus-visible {
	outline: 3px solid rgba(11, 98, 196, 0.22);
	outline-offset: 3px;
}

@media (max-width: 980px) {
	.nt-hosting-ranking-cards {
		grid-template-columns: 1fr;
		gap: 13px;
		max-width: 520px;
		margin-inline: auto;
	}

	.nt-hrc-card,
	.nt-hrc-card--1,
	.nt-hrc-card--2,
	.nt-hrc-card--3 {
		grid-column: auto;
		grid-row: auto;
	}
}

@media (max-width: 700px) {
	.nt-hrc-actions {
		display: flex;
		flex-direction: column;
	}

	.nt-hrc-actions.has-two-buttons .nt-hrc-button--review {
		order: 1;
	}

	.nt-hrc-actions.has-two-buttons .nt-hrc-button--visit {
		order: 2;
	}

	.nt-hrc-button {
		width: 100%;
	}
}

@media (max-width: 520px) {
	.nt-hosting-ranking-cards-wrap {
		margin-block: 1.5rem;
	}

	.nt-hrc-card {
		min-height: auto;
		padding: 3.15rem clamp(0.9rem, 4vw, 1.25rem) 1.25rem;
	}

	.nt-hrc-top {
		grid-template-columns: 1fr;
		gap: 0.35rem;
	}

	.nt-hrc-top::before {
		display: none;
	}

	.nt-hrc-company {
		grid-column: 1;
		text-align: center;
	}

	.nt-hrc-score {
		grid-column: 1;
		min-width: 0;
		text-align: center;
		margin-top: 20px;
	}

	.nt-hrc-score-label,
	.nt-hrc-score-value {
		text-align: center;
	}

	.nt-hrc-score-label {
		font-weight: 300;
	}

	.nt-hrc-score-value {
		font-size: clamp(2.6rem, 13vw, 3.4rem);
		font-weight: 700;
	}

	.nt-hrc-price-box {
		gap: 0.75rem;
	}
}

@media (max-width: 360px) {
	.nt-hrc-card {
		gap: 0.9rem;
		padding-inline: 0.75rem;
	}

	.nt-hrc-rank-badge {
		width: 82px;
		font-size: 38px;
	}

	.nt-hrc-price-box {
		gap: 0.45rem;
	}

	.nt-hrc-price-divider {
		min-height: 76px;
	}

	.nt-hrc-amount,
	.nt-hrc-old-price {
		font-size: 1.55rem;
	}
}