/* ==========================================================================
   Hosting & Management widget
   Built from an 881px-wide reference: every length is N * --u, where --u is
   1/881 of the widget width (capped so it never grows past 1600px of content).
   Below 760px the layout switches to a plain stacked mobile version.
   ========================================================================== */

.rhm {
	--rhm-accent: #3fe5fc;
	--rhm-ink: #041a20;
	--rhm-muted: #b9c6cc;
	--rhm-line: rgba(70, 200, 225, .16);
	position: relative;
	overflow: hidden;
	background-color: #01090c;
	color: #fff;
	font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	container: rhm / inline-size;
}

.rhm *, .rhm *::before, .rhm *::after { box-sizing: border-box; }

.rhm__c { --u: min(calc(100cqi / 881), calc(1600px / 881)); }

.rhm__sec { position: relative; }

.rhm__in {
	position: relative;
	width: calc(881 * var(--u));
	margin: 0 auto;
}

/* ---------------------------------------------------------------- shared */

.rhm .rhm__pill {
	display: inline-flex;
	align-items: center;
	gap: calc(5 * var(--u));
	height: calc(16 * var(--u));
	padding: 0 calc(9 * var(--u));
	border: 1px solid color-mix(in srgb, var(--rhm-accent) 45%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--rhm-accent) 12%, transparent);
	font-size: calc(7.4 * var(--u));
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	line-height: 1;
	color: color-mix(in srgb, var(--rhm-accent) 85%, #fff);
	white-space: nowrap;
}

.rhm .rhm__pill i {
	width: calc(4.5 * var(--u));
	height: calc(4.5 * var(--u));
	border-radius: 50%;
	border: calc(1.3 * var(--u)) solid var(--rhm-accent);
}

.rhm .rhm__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(7 * var(--u));
	height: calc(32 * var(--u));
	padding: 0 calc(20 * var(--u));
	border-radius: 999px;
	font-size: calc(10.4 * var(--u));
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.rhm .rhm__btn:hover { transform: translateY(-1px); }

.rhm .rhm__btn--solid {
	color: var(--rhm-ink);
	background: linear-gradient(180deg, color-mix(in srgb, var(--rhm-accent) 80%, #fff), var(--rhm-accent));
	box-shadow: 0 0 calc(18 * var(--u)) color-mix(in srgb, var(--rhm-accent) 40%, transparent);
}

.rhm .rhm__btn--solid:hover { color: var(--rhm-ink); }

.rhm .rhm__btn--ghost {
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .6);
	background: rgba(255, 255, 255, .02);
}

.rhm .rhm__btn--ghost:hover { color: #fff; border-color: var(--rhm-accent); }

.rhm .rhm__arw {
	width: calc(11 * var(--u));
	height: calc(11 * var(--u));
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.rhm .rhm__play { width: calc(13 * var(--u)); height: calc(13 * var(--u)); fill: currentColor; }

.rhm .rhm__i {
	width: 56%;
	height: 56%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.rhm .rhm__i--bolt { fill: currentColor; }

.rhm h2, .rhm h3, .rhm p, .rhm ul { margin: 0; }

.rhm .rhm__head { text-align: center; }

.rhm .rhm__h2 {
	font-size: calc(27.3 * var(--u));
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: #fff;
}

.rhm .rhm__h3 {
	font-size: calc(22.5 * var(--u));
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: #fff;
}

.rhm .rhm__sub, .rhm .rhm__body, .rhm .rhm__lead {
	font-size: calc(10.8 * var(--u));
	line-height: calc(14.3 * var(--u));
	color: var(--rhm-muted);
}

.rhm .rhm__body { color: #d3dde1; }

/* ---------------------------------------------------------------- 1. hero */

.rhm__hero {
	height: calc(346 * var(--u));
	background:
		radial-gradient(calc(300 * var(--u)) calc(210 * var(--u)) at calc(640 * var(--u)) calc(150 * var(--u)), rgba(0, 170, 200, .18), transparent 70%),
		radial-gradient(calc(260 * var(--u)) calc(90 * var(--u)) at calc(140 * var(--u)) calc(330 * var(--u)), rgba(0, 110, 130, .12), transparent 70%);
}

.rhm__hero .rhm__in { height: 100%; }

.rhm .rhm__hero-art {
	position: absolute;
	left: calc(394 * var(--u));
	top: calc(-28 * var(--u));
	width: calc(469 * var(--u));
	height: auto;
	max-width: none;
}

.rhm .rhm__hero-copy {
	position: absolute;
	left: calc(43 * var(--u));
	top: calc(24 * var(--u));
	width: calc(380 * var(--u));
}

.rhm .rhm__h1 {
	margin-top: calc(7 * var(--u));
	font-size: calc(36 * var(--u));
	font-weight: 700;
	line-height: calc(39 * var(--u));
	letter-spacing: -.025em;
	color: #fff;
}

.rhm .rhm__h1 span { display: block; color: var(--rhm-accent); }

.rhm .rhm__lead { margin-top: calc(9 * var(--u)); max-width: calc(284 * var(--u)); color: #d7e0e4; }

.rhm .rhm__btns { display: flex; gap: calc(14 * var(--u)); }

.rhm__hero .rhm__btns { margin-top: calc(14 * var(--u)); }

.rhm__hero .rhm__btn--solid { min-width: calc(118 * var(--u)); width: auto; padding-left: calc(12 * var(--u)); padding-right: calc(12 * var(--u)); white-space: nowrap; }
.rhm__hero .rhm__btn--ghost { min-width: calc(101 * var(--u)); width: auto; padding-left: calc(12 * var(--u)); padding-right: calc(12 * var(--u)); white-space: nowrap; }

.rhm .rhm__hl {
	display: grid;
	grid-template-columns: calc(139 * var(--u)) calc(116 * var(--u)) auto;
	margin-top: calc(25 * var(--u));
}

.rhm .rhm__hl-item { display: flex; align-items: center; gap: calc(6 * var(--u)); }

.rhm .rhm__hl-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: calc(30 * var(--u));
	height: calc(30 * var(--u));
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--rhm-accent) 25%, transparent);
	background: radial-gradient(circle at 50% 40%, rgba(0, 90, 110, .45), rgba(0, 25, 32, .8));
	color: var(--rhm-accent);
}

.rhm .rhm__hl-txt {
	font-size: calc(9.6 * var(--u));
	font-weight: 600;
	line-height: calc(12 * var(--u));
	color: #fff;
}

.rhm .rhm__hl-txt em { display: block; font-style: normal; color: var(--rhm-accent); }

/* ---------------------------------------------------------------- 2. solutions */

.rhm__sol {
	height: calc(392 * var(--u));
	border-top: 1px solid var(--rhm-line);
	background: linear-gradient(180deg, #001014, #000d11);
}

.rhm__sol .rhm__head { padding-top: calc(14 * var(--u)); }
.rhm__sol .rhm__h2 { margin-top: calc(8 * var(--u)); }
.rhm__sol .rhm__sub { margin-top: calc(6 * var(--u)); line-height: calc(15.5 * var(--u)); }

.rhm .rhm__cards {
	display: grid;
	grid-template-columns: repeat(4, calc(192 * var(--u)));
	grid-auto-rows: calc(111 * var(--u));
	gap: calc(11 * var(--u)) calc(14 * var(--u));
	margin: calc(15 * var(--u)) 0 0 calc(35 * var(--u));
}

.rhm .rhm__card {
	padding: calc(14 * var(--u)) calc(14 * var(--u)) 0 calc(18 * var(--u));
	border: 1px solid rgba(60, 170, 195, .2);
	border-radius: calc(8 * var(--u));
	background: linear-gradient(170deg, rgba(0, 40, 50, .38), rgba(0, 16, 22, .55));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.rhm .rhm__card-ico {
	display: grid;
	place-items: center;
	width: calc(34 * var(--u));
	height: calc(34 * var(--u));
	border-radius: 50%;
	background: radial-gradient(circle at 50% 30%, rgba(40, 200, 220, .75), rgba(0, 95, 110, .8));
	border: 1px solid color-mix(in srgb, var(--rhm-accent) 45%, transparent);
	box-shadow: 0 0 calc(12 * var(--u)) rgba(0, 210, 235, .25);
	color: #effdff;
}

.rhm .rhm__card h3 {
	margin-top: calc(3 * var(--u));
	font-size: calc(12.6 * var(--u));
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.rhm .rhm__card p {
	margin-top: calc(4 * var(--u));
	font-size: calc(9.6 * var(--u));
	line-height: calc(12.8 * var(--u));
	color: var(--rhm-muted);
}

/* ---------------------------------------------------------------- 3. control panels */

.rhm__ctrl {
	height: calc(384 * var(--u));
	border-top: 1px solid var(--rhm-line);
	background: radial-gradient(calc(340 * var(--u)) calc(240 * var(--u)) at calc(640 * var(--u)) calc(190 * var(--u)), rgba(0, 150, 180, .16), transparent 70%);
}

.rhm__ctrl .rhm__in { height: 100%; }

.rhm .rhm__ctrl-art {
	position: absolute;
	left: calc(364 * var(--u));
	top: calc(22 * var(--u));
	width: calc(514 * var(--u));
	height: auto;
	max-width: none;
}

.rhm .rhm__ctrl-copy {
	position: absolute;
	left: calc(43 * var(--u));
	top: calc(17 * var(--u));
	width: calc(380 * var(--u));
}

.rhm .rhm__h2--left { margin-top: calc(8 * var(--u)); font-size: calc(28.6 * var(--u)); line-height: calc(34 * var(--u)); }

.rhm__ctrl .rhm__body { margin-top: calc(10 * var(--u)); max-width: calc(308 * var(--u)); }

.rhm .rhm__checks {
	list-style: none;
	padding: 0;
	margin-top: calc(14 * var(--u));
	display: grid;
	gap: calc(11 * var(--u));
}

.rhm .rhm__checks li {
	display: flex;
	align-items: center;
	gap: calc(8 * var(--u));
	font-size: calc(10.6 * var(--u));
	line-height: calc(14 * var(--u));
	color: #e6edf0;
}

.rhm .rhm__checks svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); flex: none; }
.rhm .rhm__checks circle { fill: var(--rhm-accent); }
.rhm .rhm__checks path { fill: none; stroke: var(--rhm-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.rhm__ctrl .rhm__btns { margin-top: calc(21 * var(--u)); }
.rhm__ctrl .rhm__btn--solid { min-width: calc(119 * var(--u)); width: auto; padding-left: calc(12 * var(--u)); padding-right: calc(12 * var(--u)); white-space: nowrap; }
.rhm__ctrl .rhm__btn--ghost { min-width: calc(120 * var(--u)); width: auto; padding-left: calc(12 * var(--u)); padding-right: calc(12 * var(--u)); white-space: nowrap; }

/* ---------------------------------------------------------------- 4. infrastructure */

.rhm__infra {
	height: calc(131 * var(--u));
	border-top: 1px solid var(--rhm-line);
}

.rhm__infra .rhm__in { height: 100%; }

.rhm .rhm__infra-copy {
	position: absolute;
	left: calc(43 * var(--u));
	top: calc(5 * var(--u));
	width: calc(380 * var(--u));
}

.rhm__infra .rhm__h3 { margin-top: calc(8 * var(--u)); font-size: calc(24 * var(--u)); }
.rhm__infra .rhm__body { margin-top: calc(7 * var(--u)); max-width: calc(374 * var(--u)); }

.rhm .rhm__infra-items {
	position: absolute;
	left: calc(501 * var(--u));
	top: calc(34 * var(--u));
	display: grid;
	grid-template-columns: repeat(3, calc(114 * var(--u)));
}

.rhm .rhm__infra-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(7 * var(--u));
	text-align: center;
	font-size: calc(9.6 * var(--u));
	font-weight: 600;
	line-height: calc(12 * var(--u));
}

.rhm .rhm__infra-ico {
	display: grid;
	place-items: center;
	width: calc(43 * var(--u));
	height: calc(43 * var(--u));
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--rhm-accent) 30%, transparent);
	background: radial-gradient(circle at 50% 35%, rgba(0, 110, 130, .5), rgba(0, 30, 38, .85));
	box-shadow: 0 0 calc(14 * var(--u)) rgba(0, 200, 230, .18);
	color: var(--rhm-accent);
}

/* ---------------------------------------------------------------- 5. plans + 6. cta */

.rhm__plans-sec {
	padding: calc(3 * var(--u)) 0 calc(21 * var(--u));
	border-top: 1px solid rgba(70, 200, 225, .08);
	background:
		radial-gradient(calc(460 * var(--u)) calc(260 * var(--u)) at 50% calc(250 * var(--u)), rgba(0, 120, 140, .22), transparent 70%),
		radial-gradient(calc(380 * var(--u)) calc(120 * var(--u)) at 50% 100%, rgba(0, 150, 175, .18), transparent 70%),
		linear-gradient(180deg, #001419 0%, #00181e 60%, #001b22 100%);
}

.rhm__plans-sec::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(170 * var(--u));
	background-image:
		linear-gradient(rgba(60, 200, 225, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(60, 200, 225, .07) 1px, transparent 1px);
	background-size: calc(34 * var(--u)) calc(34 * var(--u));
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
	mask-image: linear-gradient(180deg, transparent, #000 70%);
	pointer-events: none;
}

.rhm__plans-sec .rhm__h3--center { margin-top: calc(9 * var(--u)); }
.rhm .rhm__sub--sm { margin-top: calc(4 * var(--u)); font-size: calc(9.4 * var(--u)); line-height: 1.3; }

.rhm .rhm__plans {
	display: grid;
	grid-template-columns: calc(196 * var(--u)) calc(199 * var(--u)) calc(197 * var(--u));
	justify-content: center;
	align-items: start;
	gap: calc(15 * var(--u));
	margin-top: calc(9 * var(--u));
}

.rhm .rhm__plan {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: calc(268 * var(--u));
	margin-top: calc(10 * var(--u));
	padding: calc(16 * var(--u)) calc(21 * var(--u)) calc(19 * var(--u));
	border: 1px solid rgba(80, 190, 210, .26);
	border-radius: calc(10 * var(--u));
	background: linear-gradient(170deg, rgba(12, 42, 52, .6), rgba(0, 16, 22, .72));
	box-shadow: 0 0 calc(16 * var(--u)) rgba(0, 180, 210, .08);
}

.rhm .rhm__plan.is-featured {
	min-height: calc(282 * var(--u));
	margin-top: 0;
	padding-top: calc(26 * var(--u));
	border: calc(1.5 * var(--u)) solid var(--rhm-accent);
	background: linear-gradient(170deg, rgba(10, 50, 60, .6), rgba(4, 22, 28, .8));
	box-shadow: 0 0 calc(22 * var(--u)) color-mix(in srgb, var(--rhm-accent) 30%, transparent);
}

.rhm .rhm__plan-badge {
	position: absolute;
	top: 0;
	right: 0;
	padding: calc(3.5 * var(--u)) calc(9 * var(--u));
	border-radius: 0 calc(9 * var(--u)) 0 calc(8 * var(--u));
	background: var(--rhm-accent);
	font-size: calc(6.6 * var(--u));
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rhm-ink);
}

.rhm .rhm__plan h3 { font-size: calc(14.2 * var(--u)); font-weight: 700; line-height: 1.2; color: #fff; }

.rhm .rhm__plan-desc {
	margin-top: calc(4 * var(--u));
	font-size: calc(9.2 * var(--u));
	line-height: calc(12 * var(--u));
	color: var(--rhm-muted);
}

.rhm .rhm__plan-price { display: flex; align-items: baseline; gap: calc(3 * var(--u)); margin-top: calc(12 * var(--u)); }
.rhm .rhm__plan-price strong { font-size: calc(21.5 * var(--u)); font-weight: 800; letter-spacing: -.01em; line-height: 1; color: #fff; }
.rhm .rhm__plan-price span { font-size: calc(8.2 * var(--u)); color: var(--rhm-muted); }

.rhm .rhm__plan ul {
	list-style: none;
	padding: 0;
	margin-top: calc(16 * var(--u));
	display: grid;
	gap: calc(6.4 * var(--u));
}

.rhm .rhm__plan li {
	display: flex;
	align-items: center;
	gap: calc(5 * var(--u));
	font-size: calc(9.2 * var(--u));
	line-height: calc(9.2 * var(--u));
	color: #dfe7ea;
}

.rhm .rhm__plan li svg { width: calc(9 * var(--u)); height: calc(9 * var(--u)); flex: none; fill: none; stroke: var(--rhm-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.rhm .rhm__plan .rhm__btn { margin-top: auto; height: calc(29 * var(--u)); width: 100%; font-size: calc(9.8 * var(--u)); }
.rhm .rhm__plan .rhm__btn--ghost { border-color: color-mix(in srgb, var(--rhm-accent) 50%, rgba(255,255,255,.4)); }

.rhm .rhm__cta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: calc(622 * var(--u));
	height: calc(85 * var(--u));
	margin: calc(16 * var(--u)) auto 0;
	padding: 0 calc(34 * var(--u)) 0 calc(24 * var(--u));
	border: 1px solid color-mix(in srgb, var(--rhm-accent) 45%, transparent);
	border-radius: calc(10 * var(--u));
	background: linear-gradient(170deg, rgba(10, 44, 54, .65), rgba(0, 18, 24, .8));
	box-shadow: 0 0 calc(22 * var(--u)) rgba(0, 200, 230, .22), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.rhm .rhm__cta h3 { font-size: calc(14.4 * var(--u)); font-weight: 700; line-height: 1.2; color: #fff; }
.rhm .rhm__cta p { margin-top: calc(8 * var(--u)); font-size: calc(9.8 * var(--u)); line-height: calc(12.8 * var(--u)); color: #d7e0e4; }
.rhm .rhm__cta .rhm__btn { min-width: calc(142 * var(--u)); width: auto; padding-left: calc(14 * var(--u)); padding-right: calc(14 * var(--u)); white-space: nowrap; border-color: color-mix(in srgb, var(--rhm-accent) 70%, transparent); }

/* ==========================================================================
   Mobile stack
   ========================================================================== */
@container rhm (max-width: 759.98px) {
	.rhm__c { --u: 1.55px; }
	.rhm__in { width: auto; padding: 0 20px; }
	.rhm__hero, .rhm__sol, .rhm__ctrl, .rhm__infra { height: auto; padding: 44px 0; }
	.rhm .rhm__hero-art, .rhm .rhm__ctrl-art { position: relative; left: auto; top: auto; width: 100%; margin-top: 28px; }
	.rhm__hero .rhm__in, .rhm__ctrl .rhm__in { display: flex; flex-direction: column-reverse; }
	.rhm .rhm__hero-copy, .rhm .rhm__ctrl-copy, .rhm .rhm__infra-copy, .rhm .rhm__infra-items { position: relative; left: auto; top: auto; width: auto; }
	.rhm .rhm__lead, .rhm__ctrl .rhm__body, .rhm__infra .rhm__body { max-width: none; }
	.rhm .rhm__btns { flex-wrap: wrap; }
	.rhm .rhm__hl { grid-template-columns: repeat(3, auto); gap: 14px; }
	.rhm .rhm__cards { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; margin-left: 0; }
	.rhm .rhm__card { padding-bottom: 16px; }
	.rhm .rhm__infra-items { margin-top: 26px; grid-template-columns: repeat(3, 1fr); }
	.rhm .rhm__plans { grid-template-columns: 1fr; }
	.rhm .rhm__plan, .rhm .rhm__plan.is-featured { min-height: 0; margin-top: 0; }
	.rhm .rhm__plan .rhm__btn { margin-top: 18px; }
	.rhm .rhm__cta { width: auto; height: auto; flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px; }
}

@container rhm (max-width: 480px) {
	.rhm__c { --u: 1.4px; }
	.rhm .rhm__cards { grid-template-columns: 1fr; }
	.rhm .rhm__hl { grid-template-columns: 1fr; }
}