/*
 * UptimeHawk theme layer.
 * Loaded after the platform base stylesheet (style.ltr.css / style.rtl.css), which still styles the
 * control panel widgets the platform injects. Rules here are scoped with IDs where needed to win
 * over the base rules without !important.
 */

/*=== Tokens ===*/
:root{
	--uh-ink: #0b1324;
	--uh-navy: #111c36;
	--uh-navy-2: #1a2750;
	--uh-indigo: #3f4c7c;
	--uh-cyan: #10b0ce;
	--uh-cyan-soft: #3cc7e0;
	--uh-cyan-ink: #04202a;
	--uh-link: #0b7488;
	--uh-text: #1e293b;
	--uh-muted: #5f6b85;
	--uh-line: #e2e8f0;
	--uh-line-2: #cbd5e1;
	--uh-bg: #f4f7fb;
	--uh-card: #ffffff;
	--uh-up: #15803d;
	--uh-down: #b91c1c;
	--uh-radius: 12px;
	--uh-radius-sm: 8px;
	--uh-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
	--uh-shadow-lg: 0 24px 60px rgba(4, 9, 17, .35);
	--uh-max: 1140px;
	--uh-chrome: 108px;
	--uh-ease: cubic-bezier(.2, .7, .2, 1);
	--uh-gutter: 24px;
	--uh-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/*=== Base ===*/
html{
	-webkit-text-size-adjust: 100%;
}
body,
body.wrapper{
	background: var(--uh-bg);
	color: var(--uh-text);
	float: none;
	font: 15px/1.6 var(--uh-font);
	min-width: 0;
	width: auto;
	-webkit-font-smoothing: antialiased;
}
a{
	color: var(--uh-link);
}
a:hover{
	color: var(--uh-navy-2);
}
:focus-visible{
	outline: 3px solid var(--uh-cyan);
	outline-offset: 2px;
}
h2, h3, h4{
	color: var(--uh-ink);
	font-family: var(--uh-font);
	letter-spacing: -0.02em;
}
h2{
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 1.4em 0 .6em;
}
h3{
	color: var(--uh-text);
	font-size: 1.25rem;
	font-weight: 650;
	line-height: 1.3;
}
p{
	line-height: 1.65;
	padding: 0 0 1em;
}
img{
	max-width: 100%;
	height: auto;
}
input, select, textarea{
	background: #fff;
	border: 1px solid var(--uh-line-2);
	border-radius: var(--uh-radius-sm);
	box-sizing: border-box;
	color: var(--uh-text);
	font: 14px/1.4 var(--uh-font);
	min-height: 38px;
	padding: 8px 12px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus{
	border-color: var(--uh-cyan);
	box-shadow: 0 0 0 3px rgba(16, 176, 206, .25);
	outline: none;
}
input[type="radio"], input[type="checkbox"]{
	accent-color: var(--uh-link);
	min-height: 0;
	box-shadow: none;
}
input[type="image"]{
	border: 0;
	min-height: 0;
	padding: 0;
}
::placeholder{
	color: #8a94a8;
}

/*=== Sheernox network bar ===*/
.network-bar{
	background-color: #040911;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	font: 12px/1 var(--uh-font);
	height: 34px;
	position: relative;
	width: 100%;
	z-index: 60;
}
.network-bar-inner{
	align-items: center;
	box-sizing: border-box;
	display: flex;
	height: 100%;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1240px;
	padding: 0 var(--uh-gutter);
}
.network-tabs{
	align-items: stretch;
	display: flex;
	height: 100%;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.network-tabs::-webkit-scrollbar{
	display: none;
}
.network-bar .network-tab{
	align-items: center;
	border-right: 1px solid rgba(255, 255, 255, .07);
	color: #94a3b8;
	display: inline-flex;
	flex-shrink: 0;
	font-size: 11.8px;
	font-weight: 500;
	height: 100%;
	padding: 0 14px;
	text-decoration: none;
	transition: color .15s ease, background-color .15s ease;
	white-space: nowrap;
}
.network-bar .network-tab:hover{
	background-color: rgba(255, 255, 255, .05);
	color: #fff;
	text-decoration: none;
}
.network-bar .network-tab.active{
	background: linear-gradient(135deg, #0b7f96 0%, #0a6b7f 100%);
	border-right-color: rgba(16, 176, 206, .5);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2);
	color: #fff;
	font-weight: 600;
}
/* The tabs sit in a scroll container that clips an outline drawn outside the link. */
.network-bar .network-tab:focus-visible{
	outline: 2px solid var(--uh-cyan);
	outline-offset: -3px;
}
.network-bar .network-tab.active:focus-visible{
	outline-color: #fff;
}
.network-brand-badge{
	flex-shrink: 0;
	white-space: nowrap;
}
.network-entity{
	color: #94a3b8;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .01em;
}

/*=== Header ===*/
#page-top,
#statement-page-top{
	background: var(--uh-ink);
	height: auto;
	position: relative;
	z-index: 50;
}
#page-top #header,
#statement-page-top #header{
	background: #1b2950;
	border-bottom: 1px solid rgba(143, 180, 217, .22);
	box-shadow: 0 10px 30px rgba(2, 6, 14, .45);
	height: auto;
	position: relative;
	width: auto;
}
.uh-header-inner{
	align-items: center;
	box-sizing: border-box;
	display: flex;
	gap: 8px 28px;
	margin: 0 auto;
	max-width: var(--uh-max);
	min-height: 72px;
	padding: 0 var(--uh-gutter);
}
#header #logo{
	flex-shrink: 0;
	height: auto;
}
#header #logo h1{
	float: none;
	margin: 0;
	min-width: 0;
}
#header #logo h1 a{
	align-items: center;
	color: #fff;
	display: flex;
	font-size: 22px;
	font-weight: 700;
	height: 72px;
	line-height: 1;
	text-align: left;
}
#header #logo h1 a::after{
	content: none;
}
#header #logo h1 a img{
	display: block;
	height: auto;
	max-height: 44px;
	width: auto;
}
/* Statement and checkout pages only carry the logo. */
#statement-page-top .uh-header-inner,
.uh-header-minimal .uh-header-inner{
	justify-content: space-between;
}

/*- Main nav -*/
#header #nav1{
	background: none;
	float: none;
	height: auto;
	margin-left: auto;
	width: auto;
	z-index: 100;
}
#header #nav1 > ul{
	align-items: center;
	display: flex;
	float: none;
	gap: 2px;
	right: auto;
	text-align: left;
}
#header #nav1 li{
	float: none;
	left: auto;
	position: relative;
}
#header #nav1 li a{
	background: none;
	border: 0;
	border-radius: 8px;
	color: #c3cde0;
	float: none;
	font: 500 14.5px/1 var(--uh-font);
	padding: 10px 14px;
	text-shadow: none;
	white-space: nowrap;
	transition: color .15s ease, background-color .15s ease;
}
#header #nav1 li a:hover,
#header #nav1 li:hover > a,
#header #nav1 li:focus-within > a{
	background: rgba(255, 255, 255, .07);
	color: #fff;
	text-decoration: none;
}
#header #nav1 li.active > a{
	background: none;
	border: 0;
	box-shadow: inset 0 -2px 0 var(--uh-cyan);
	border-radius: 8px 8px 2px 2px;
	color: #fff;
}
/* Items with a submenu get a caret. */
#header #nav1 > ul > li:has(> ul) > a::after{
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	content: "";
	display: inline-block;
	height: 5px;
	margin: 0 0 3px 8px;
	opacity: .7;
	transform: rotate(45deg);
	width: 5px;
}

/* Control panel header: every item has a menu, so no carets, and it carries more links than the public
 * header, so it runs wider with tighter spacing before collapsing to the Menu button. */
#header.uh-header-cp #nav1 > ul > li > a::after{
	content: none;
}
#header.uh-header-cp .uh-header-inner{
	gap: 8px 18px;
	max-width: 1360px;
}
#header.uh-header-cp #nav1 li a{
	padding: 10px 11px;
}
#header.uh-header-cp #logo h1 a img{
	max-height: 38px;
}

/*- Nav dropdown -*/
#header #nav1 li ul{
	background: #fff;
	border: 1px solid var(--uh-line);
	border-radius: var(--uh-radius);
	box-shadow: var(--uh-shadow-lg);
	display: block;
	left: 0;
	min-width: 230px;
	opacity: 0;
	padding: 8px;
	position: absolute;
	top: calc(100% + 8px);
	transform: translateY(-4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	visibility: hidden;
}
/* Invisible bridge so the pointer can cross the gap into the menu. */
#header #nav1 li ul::before{
	content: "";
	height: 10px;
	left: 0;
	position: absolute;
	right: 0;
	top: -10px;
}
#header #nav1 li:hover > ul,
#header #nav1 li:focus-within > ul{
	opacity: 1;
	transform: none;
	visibility: visible;
}
#header #nav1 li li{
	background: none;
	display: block;
	padding: 0;
	right: auto;
}
#header #nav1 li li a{
	background: none;
	border-radius: 6px;
	color: var(--uh-text);
	display: block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	padding: 9px 12px;
	white-space: nowrap;
	width: auto;
}
#header #nav1 li li a:hover,
#header #nav1 li li a:focus-visible{
	background: #eef8fb;
	color: var(--uh-link);
}
#header #nav1 li li.active a{
	background: #eef8fb;
	box-shadow: none;
	color: var(--uh-link);
}

/*- Utility links (Contact, FAQ, Login / Logout) -*/
#header .uh-utility{
	align-items: center;
	display: flex;
	flex-shrink: 0;
	gap: 12px;
}
#header #nav-top{
	font-size: 14px;
	height: auto;
	letter-spacing: 0;
	overflow: visible;
	padding: 0;
	text-align: left;
}
#header #nav-top ul{
	align-items: center;
	display: flex;
	gap: 4px;
}
#header #nav-top li{
	background: none;
	display: block;
	padding: 0;
}
#header #nav-top li a{
	border-radius: 8px;
	color: #c3cde0;
	display: block;
	white-space: nowrap;
	font-weight: 500;
	padding: 8px 10px;
}
#header #nav-top li a:hover{
	color: #fff;
	text-decoration: none;
}
/* The platform marks Login (public) or Logout (control panel) as active. */
#header #nav-top li.active a{
	background: var(--uh-cyan);
	color: var(--uh-cyan-ink);
	font-weight: 600;
	padding: 9px 16px;
}
#header #nav-top li.active a:hover{
	background: var(--uh-cyan-soft);
}
#header #top-hide-box.hide{
	display: none;
}
#header .referral-btn{
	margin: 0;
	width: auto !important; /* system.js sets an inline pixel width sized for the old image button */
}
#header .referral-btn-left,
#header .referral-btn-right{
	display: none;
}
#header .referral-btn-mid{
	background: none;
	float: none;
	height: auto;
	padding: 0;
}
#header .referral-btn-mid a{
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	color: #c3cde0;
	display: block;
	font-size: 12.5px;
	padding: 6px 12px;
	white-space: nowrap;
}
#header .referral-btn-mid a:hover{
	border-color: var(--uh-cyan);
	color: #fff;
	text-decoration: none;
}

/*- Mobile menu toggle -*/
.uh-nav-toggle{
	align-items: center;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	display: none;
	font: 600 14px/1 var(--uh-font);
	gap: 8px;
	margin-left: auto;
	min-height: 40px;
	padding: 0 14px;
}
.uh-nav-toggle-bars,
.uh-nav-toggle-bars::before,
.uh-nav-toggle-bars::after{
	background: currentColor;
	border-radius: 2px;
	display: block;
	height: 2px;
	position: relative;
	transition: transform .2s ease, background-color .2s ease;
	width: 18px;
}
.uh-nav-toggle-bars::before,
.uh-nav-toggle-bars::after{
	content: "";
	position: absolute;
}
.uh-nav-toggle-bars::before{ top: -6px; }
.uh-nav-toggle-bars::after{ top: 6px; }
.uh-nav-open .uh-nav-toggle-bars{ background: transparent; }
.uh-nav-open .uh-nav-toggle-bars::before{ transform: translateY(6px) rotate(45deg); }
.uh-nav-open .uh-nav-toggle-bars::after{ transform: translateY(-6px) rotate(-45deg); }

/*=== Page shell ===*/
#page{
	background: transparent;
	min-width: 0;
}
.main-column,
.headline,
#columns,
.features-content,
.main-feature-content,
.main-feature-content-top,
.notices-column{
	box-sizing: border-box;
	max-width: var(--uh-max);
	padding-left: var(--uh-gutter);
	padding-right: var(--uh-gutter);
	width: auto;
}
.main-column{
	padding-bottom: 48px;
	padding-top: 8px;
}
.main-column > h2:first-child,
.main-column > .box-information:first-child + h2{
	margin-top: 1.2em;
}

/*- Sticky footer -*/
/* system.js sizes #page from the old theme's 140px header and 130px footer, leaving a gap under the
 * shorter footer on short pages. A flex column fills the viewport instead. Public pages nest the
 * footer inside the schema.org wrappers, so those join the column too. */
body.wrapper{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}
body.wrapper > *{
	flex-shrink: 0;
}
body.wrapper > [itemscope],
body.wrapper > [itemscope] > [itemprop="brand"]{
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
}
body.wrapper > #page,
body.wrapper > [itemscope] > [itemprop="brand"] > #page{
	flex: 1 0 auto;
	min-height: 0 !important; /* overrides the inline height system.js sets */
}

/*=== Hero (homepage) ===*/
#main-feature{
	background:
		radial-gradient(900px 420px at 85% 10%, rgba(16, 176, 206, .22), transparent 60%),
		radial-gradient(700px 400px at 0% 100%, rgba(63, 76, 124, .55), transparent 60%),
		linear-gradient(180deg, #060b16 0%, var(--uh-ink) 55%, var(--uh-navy) 100%);
	border-bottom: 0;
	color: #c3cde0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100vh - var(--uh-chrome));
	min-height: calc(100svh - var(--uh-chrome));
	overflow: hidden;
	padding: 0;
	position: relative;
}
/* Response-time chart along the bottom edge, with one short incident in red. */
#main-feature::before{
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='140' viewBox='0 0 1200 140'%3E%3Crect x='0' y='103' width='6' height='37' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='10' y='91' width='6' height='49' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='20' y='93' width='6' height='47' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='30' y='84' width='6' height='56' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='40' y='80' width='6' height='60' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='50' y='95' width='6' height='45' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='60' y='94' width='6' height='46' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='70' y='67' width='6' height='73' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='80' y='83' width='6' height='57' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='90' y='82' width='6' height='58' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='100' y='58' width='6' height='82' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='110' y='72' width='6' height='68' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='120' y='61' width='6' height='79' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='130' y='71' width='6' height='69' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='140' y='66' width='6' height='74' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='150' y='81' width='6' height='59' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='160' y='66' width='6' height='74' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='170' y='60' width='6' height='80' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='180' y='72' width='6' height='68' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='190' y='66' width='6' height='74' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='200' y='70' width='6' height='70' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='210' y='90' width='6' height='50' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='220' y='71' width='6' height='69' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='230' y='78' width='6' height='62' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='240' y='90' width='6' height='50' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='250' y='100' width='6' height='40' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='260' y='78' width='6' height='62' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='270' y='92' width='6' height='48' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='280' y='88' width='6' height='52' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='290' y='86' width='6' height='54' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='300' y='93' width='6' height='47' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='310' y='90' width='6' height='50' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='320' y='108' width='6' height='32' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='330' y='99' width='6' height='41' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='340' y='112' width='6' height='28' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='350' y='99' width='6' height='41' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='360' y='103' width='6' height='37' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='370' y='128' width='6' height='12' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='380' y='128' width='6' height='12' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='390' y='127' width='6' height='13' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='400' y='105' width='6' height='35' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='410' y='122' width='6' height='18' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='420' y='116' width='6' height='24' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='430' y='126' width='6' height='14' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='440' y='119' width='6' height='21' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='450' y='122' width='6' height='18' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='460' y='123' width='6' height='17' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='470' y='114' width='6' height='26' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='480' y='113' width='6' height='27' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='490' y='101' width='6' height='39' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='500' y='106' width='6' height='34' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='510' y='97' width='6' height='43' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='520' y='96' width='6' height='44' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='530' y='90' width='6' height='50' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='540' y='97' width='6' height='43' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='550' y='109' width='6' height='31' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='560' y='86' width='6' height='54' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='570' y='80' width='6' height='60' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='580' y='79' width='6' height='61' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='590' y='86' width='6' height='54' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='600' y='79' width='6' height='61' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='610' y='92' width='6' height='48' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='620' y='71' width='6' height='69' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='630' y='76' width='6' height='64' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='640' y='83' width='6' height='57' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='650' y='88' width='6' height='52' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='660' y='63' width='6' height='77' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='670' y='57' width='6' height='83' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='680' y='83' width='6' height='57' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='690' y='61' width='6' height='79' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='700' y='73' width='6' height='67' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='710' y='80' width='6' height='60' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='720' y='76' width='6' height='64' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='730' y='63' width='6' height='77' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='740' y='60' width='6' height='80' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='750' y='86' width='6' height='54' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='760' y='71' width='6' height='69' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='770' y='12' width='6' height='128' rx='1.5' fill='%23f87171' fill-opacity='0.55'/%3E%3Crect x='780' y='12' width='6' height='128' rx='1.5' fill='%23f87171' fill-opacity='0.55'/%3E%3Crect x='790' y='85' width='6' height='55' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='800' y='71' width='6' height='69' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='810' y='70' width='6' height='70' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='820' y='87' width='6' height='53' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='830' y='75' width='6' height='65' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='840' y='98' width='6' height='42' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='850' y='108' width='6' height='32' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='860' y='95' width='6' height='45' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='870' y='115' width='6' height='25' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='880' y='113' width='6' height='27' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='890' y='109' width='6' height='31' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='900' y='105' width='6' height='35' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='910' y='121' width='6' height='19' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='920' y='127' width='6' height='13' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='930' y='104' width='6' height='36' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='940' y='122' width='6' height='18' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='950' y='104' width='6' height='36' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='960' y='107' width='6' height='33' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='970' y='123' width='6' height='17' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='980' y='121' width='6' height='19' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='990' y='119' width='6' height='21' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='1000' y='116' width='6' height='24' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='1010' y='116' width='6' height='24' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='1020' y='117' width='6' height='23' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='1030' y='114' width='6' height='26' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='1040' y='103' width='6' height='37' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='1050' y='114' width='6' height='26' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='1060' y='115' width='6' height='25' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='1070' y='104' width='6' height='36' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='1080' y='116' width='6' height='24' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='1090' y='112' width='6' height='28' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='1100' y='89' width='6' height='51' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='1110' y='100' width='6' height='40' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='1120' y='97' width='6' height='43' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='1130' y='110' width='6' height='30' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='1140' y='95' width='6' height='45' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='1150' y='87' width='6' height='53' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='1160' y='101' width='6' height='39' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='1170' y='81' width='6' height='59' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='1180' y='78' width='6' height='62' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3Crect x='1190' y='93' width='6' height='47' rx='1.5' fill='%2310b0ce' fill-opacity='0.28'/%3E%3C/svg%3E") 0 100% / 1200px 140px repeat-x;
	bottom: 0;
	content: "";
	height: 140px;
	left: 0;
	-webkit-mask-image: linear-gradient(0deg, #000 30%, transparent);
	mask-image: linear-gradient(0deg, #000 30%, transparent);
	pointer-events: none;
	position: absolute;
	right: 0;
}
#main-feature .main-feature-content-top{
	align-items: center;
	box-sizing: border-box;
	display: grid;
	gap: 48px;
	grid-template-columns: minmax(0, 1fr) 480px;
	margin: 0 auto;
	/* Bottom padding keeps the buttons clear of the bar chart. */
	padding-bottom: 128px;
	padding-top: 56px;
	position: relative;
	width: 100%;
	z-index: 1;
}
#main-feature .main-feature-content-top::before,
#main-feature .main-feature-content-top::after{
	content: none;
}
.uh-eyebrow{
	align-items: center;
	background: rgba(16, 176, 206, .12);
	border: 1px solid rgba(16, 176, 206, .35);
	border-radius: 999px;
	color: #7fdcef;
	display: inline-flex;
	font-size: 13px;
	font-weight: 600;
	gap: 8px;
	margin: 0 0 22px;
	padding: 6px 14px 6px 10px;
}
.uh-pulse{
	background: #22c55e;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
	height: 8px;
	width: 8px;
	animation: uh-pulse 2s infinite;
}
@keyframes uh-pulse{
	0%{ box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
	70%{ box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
	100%{ box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
#main-feature .list-features-column{
	float: none;
	margin: 0;
	width: auto;
}
#main-feature .list-features-column h3{
	color: #fff;
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.08;
	margin: 0 0 22px;
}
.list-features-slider{
	padding: 0 0 28px;
}
#main-feature .list-features-slider ul{
	float: none;
	padding: 0;
	white-space: normal;
}
#main-feature .list-features-slider li{
	background: none;
	color: #c3cde0;
	font-size: 16.5px;
	margin: 0 0 12px;
	padding: 0 0 0 32px;
	position: relative;
}
#main-feature .list-features-slider li::before{
	background: rgba(16, 176, 206, .15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2310b0ce' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
	border-radius: 50%;
	content: "";
	height: 22px;
	left: 0;
	position: absolute;
	top: 1px;
	width: 22px;
}
#main-feature .btn-link-wrap,
#main-feature .btn-link-center{
	float: none;
	left: auto;
}
#main-feature .btn-link-center{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
#main-feature .btn-link-center::after{
	content: none;
}
.btn-link-features{
	float: none;
	height: auto;
}
.btn-link-features a{
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 10px;
	box-shadow: none;
	box-sizing: border-box;
	color: #fff;
	float: none;
	font: 600 15px/1 var(--uh-font);
	height: auto;
	margin: 0;
	padding: 15px 22px;
	text-shadow: none;
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-link-features a:hover{
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}
.btn-link-features.active a{
	background: var(--uh-cyan);
	border-color: var(--uh-cyan);
	color: var(--uh-cyan-ink);
	text-shadow: none;
}
.btn-link-features.active a:hover{
	background: var(--uh-cyan-soft);
	border-color: var(--uh-cyan-soft);
	color: var(--uh-cyan-ink);
}

/*- Slider -*/
.slider-column{
	float: none;
	justify-self: end;
	width: 480px;
}
#slider{
	background: var(--uh-navy-2);
	border: 10px solid rgba(255, 255, 255, .06);
	border-radius: 18px;
	box-shadow: var(--uh-shadow-lg), 0 0 0 1px rgba(255, 255, 255, .08);
	height: 270px;
	width: 460px;
}
#slider-content{
	height: 270px;
	position: relative;
}
/* Clip per slide: the cycle plugin injects the pager inside #slider-content, below the slides. */
#slider-content li{
	border-radius: 10px;
	color: #e2e8f0;
	overflow: hidden;
}
.slide-pic img{
	display: block;
}
.slide-text h2{
	color: #fff;
	font: 800 22px/1.2 var(--uh-font);
	letter-spacing: .02em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
#slide-list-features h2{
	background: none;
	color: #334155;
	text-shadow: none;
}
#slide-list-features h2 em{
	background: none;
	padding: 0;
}
#slide-list-features .errors{
	color: #334155;
}
#slide-list-features .errors h5{
	font-size: 13px;
}
#slide-alert-icons .alertby{
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 12px;
	font: 600 17px/63px var(--uh-font);
	width: 150px;
}
#slide-report-graph h3{
	/* Sits above the chart drawn in the lower third of slide3.png. */
	padding-top: 56px;
	color: #fff;
	font: 700 18px/1.2 var(--uh-font);
	letter-spacing: .04em;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
#slide-nav{
	bottom: -36px;
	display: flex;
	gap: 8px;
	height: auto;
	left: 50%;
	transform: translateX(-50%);
}
#slide-nav a{
	background: rgba(255, 255, 255, .25);
	border-radius: 999px;
	height: 8px;
	margin: 0;
	transition: width .2s ease, background-color .2s ease;
	width: 8px;
}
#slide-nav a:hover,
#slide-nav a.activeSlide{
	background: var(--uh-cyan);
	width: 22px;
}

/*=== Signup band / plans wrapper ===*/
#features{
	background: var(--uh-card);
	border-bottom: 1px solid var(--uh-line);
}
#features-bot{
	display: none;
}
.features-content{
	padding-bottom: 56px;
	padding-top: 56px;
}
.features-content h2{
	background: none;
	color: var(--uh-ink);
	height: auto;
	margin: 0 0 .4em;
	text-shadow: none;
}
.features-content h3,
.col3 h3, .col4 h3{
	text-shadow: none;
}
.features-content h4{
	color: var(--uh-muted);
	font-size: 16px;
}
#home-signup{
	background:
		radial-gradient(500px 200px at 100% 0%, rgba(16, 176, 206, .14), transparent 70%),
		linear-gradient(135deg, #f8fbff 0%, #eef6fb 100%);
	border: 1px solid var(--uh-line);
	border-radius: 20px;
	margin: 0;
	padding: 44px 40px;
	text-align: center;
}
#home-signup-text{
	color: var(--uh-ink);
	font: 800 clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem)/1.2 var(--uh-font);
	letter-spacing: -0.03em;
	margin: 0 0 26px;
}
.signup-text-highlight{
	background: var(--uh-cyan);
	border-radius: 8px;
	color: var(--uh-cyan-ink);
	padding: 2px 10px;
}
#home-signup-form form{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
.home-signup-field,
.home-signup-field:last-child{
	float: none;
	margin: 0;
}
.home-signup-field input[type="text"]{
	background-color: #fff;
	border: 1px solid var(--uh-line-2);
	border-radius: 10px;
	font: 400 16px/1 var(--uh-font);
	height: 54px;
	line-height: normal;
	padding: 0 18px 0 46px;
	width: 300px;
}
.home-signup-field #home-signup-name-field,
.home-signup-field #home-signup-email-field{
	background: #fff no-repeat 16px center / 18px;
}
.home-signup-field #home-signup-name-field{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b85' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E");
}
.home-signup-field #home-signup-email-field{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b85' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5L12 13l8.5-6.5'/%3E%3C/svg%3E");
}
.home-signup-field #home-signup-submit{
	background: var(--uh-navy-2);
	border: 0;
	border-radius: 10px;
	color: #fff;
	font: 700 16px/1 var(--uh-font);
	height: 54px;
	padding: 0 30px;
	transition: background-color .15s ease;
	width: auto;
}
.home-signup-field #home-signup-submit:hover{
	background: var(--uh-indigo);
}

/*=== Homepage marketing sections ===*/
.uh-section{
	box-sizing: border-box;
	margin: 0 auto;
	max-width: var(--uh-max);
	padding: 72px var(--uh-gutter) 24px;
}
.uh-section-head{
	margin: 0 auto 36px;
	max-width: 640px;
	text-align: center;
}
.uh-section-head h2{
	margin: 0 0 .35em;
}
.uh-section-head p{
	color: var(--uh-muted);
	font-size: 17px;
	padding: 0;
}
.uh-kicker{
	color: var(--uh-link);
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	margin: 0 0 10px;
	text-transform: uppercase;
}
.uh-cards{
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
}
@media (max-width: 900px){
	.uh-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
	.uh-cards{ grid-template-columns: 1fr; }
}
.uh-card{
	background: var(--uh-card);
	border: 1px solid var(--uh-line);
	border-radius: 16px;
	box-shadow: var(--uh-shadow);
	padding: 26px 24px;
	position: relative;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.uh-card:hover{
	border-color: #bfe7f0;
	box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 18px 40px rgba(15, 23, 42, .1);
	transform: translateY(-2px);
}
.uh-card h3{
	font-size: 17px;
	margin: 16px 0 6px;
}
.uh-card p{
	color: var(--uh-muted);
	font-size: 14.5px;
	padding: 0 0 12px;
}
.uh-card a{
	font-size: 14px;
	font-weight: 600;
}
/* Whole card is clickable through its single link. */
.uh-card a::after{
	content: "";
	inset: 0;
	position: absolute;
}
.uh-icon{
	align-items: center;
	background: linear-gradient(135deg, #e6f7fb, #dbeef6);
	border-radius: 12px;
	color: var(--uh-link);
	display: inline-flex;
	height: 46px;
	justify-content: center;
	width: 46px;
}
.uh-icon svg{
	height: 24px;
	width: 24px;
}
.uh-stats{
	background: linear-gradient(135deg, var(--uh-navy) 0%, var(--uh-navy-2) 100%);
	border-radius: 20px;
	color: #c3cde0;
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	list-style: none;
	margin: 48px 0 0;
	padding: 32px;
}
.uh-stats li{
	padding: 8px 12px;
	text-align: center;
}
.uh-stats strong{
	color: #fff;
	display: block;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
}
.uh-stats span{
	font-size: 14px;
}

/*=== Testimonials ===*/
#page.no-min-height #columns{
	padding-bottom: 72px;
	padding-top: 56px;
}
.quotes-testimonial{
	background: var(--uh-card);
	border: 1px solid var(--uh-line);
	border-radius: 20px;
	box-shadow: var(--uh-shadow);
	margin: 0 auto;
	max-width: 820px;
	padding: 40px 48px;
	position: relative;
	text-align: center;
}
.quotes-testimonial h3{
	color: var(--uh-link);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	margin: 0 0 14px;
	padding: 0;
	text-transform: uppercase;
}
.quotes-testimonial .single-quote,
.quotes-testimonial blockquote,
.quotes .quotes blockquote p{
	background: none;
}
.quotes-testimonial blockquote{
	color: var(--uh-ink);
	font: 500 clamp(1.1rem, 1rem + .6vw, 1.4rem)/1.5 var(--uh-font);
	padding: 0;
}
.quotes-testimonial blockquote p{
	padding: 0 0 16px;
}
.quotes-testimonial blockquote p::before{ content: "\201C"; }
.quotes-testimonial blockquote p::after{ content: "\201D"; }
.quotes-testimonial cite{
	color: var(--uh-muted);
	font-size: 15px;
	padding: 0;
}
.quotes{
	background: none;
	border-bottom-color: var(--uh-line);
}
.quotes blockquote,
.quotes blockquote p{
	background: none;
	font-family: var(--uh-font);
}

/*=== Features page ===*/
.list-features{
	height: auto;
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	padding: 8px 0 24px;
}
.list-features > .fix,
.list-features > br{
	display: none;
}
.list-features dl,
.list-features dl.fl,
.list-features dl.fr{
	background: var(--uh-card);
	border: 1px solid var(--uh-line);
	border-radius: 16px;
	box-shadow: var(--uh-shadow);
	box-sizing: border-box;
	display: flex;
	float: none;
	gap: 18px;
	/* Base sets height: 1%, which collapses the card once it is a grid item. */
	height: auto;
	margin: 0;
	padding: 24px;
	width: auto;
}
.list-features dt{
	align-items: center;
	background: linear-gradient(135deg, #e6f7fb, #dbeef6);
	border-radius: 14px;
	display: flex;
	flex-shrink: 0;
	float: none;
	height: 64px;
	justify-content: center;
	width: 64px;
}
.list-features dd{
	float: none;
	margin: 0;
	width: auto;
}
.list-features h3{
	color: var(--uh-ink);
	font-size: 17px;
	margin: 2px 0 6px;
}
.list-features p{
	color: var(--uh-muted);
	font-size: 14.5px;
	padding: 0;
}
#page > #features{
	border-top: 1px solid var(--uh-line);
}

/*=== Pricing plans ===*/
.plan-promo-head{
	align-items: center;
	background: linear-gradient(135deg, var(--uh-navy) 0%, var(--uh-indigo) 100%);
	border-radius: 14px 14px 0 0;
	color: #fff;
	display: flex;
	font: 700 22px/1.2 var(--uh-font);
	gap: 10px;
	height: auto;
	justify-content: center;
	letter-spacing: .02em;
	padding: 18px;
	width: auto;
}
.plan-promo-head strong{
	color: var(--uh-cyan-soft);
}
.plan-promo-head img{
	margin: 0;
}
@media (max-width: 560px){
	.plan-promo-head{
		flex-wrap: wrap;
		font-size: 18px;
	}
	.plan-promo-head img{
		display: none;
	}
}
.list-plans,
.features-content.no-free-plan-column .list-plans{
	background: var(--uh-line);
	border: 1px solid var(--uh-line);
	border-radius: 16px;
	box-shadow: var(--uh-shadow);
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	overflow: hidden;
	width: auto;
}
.plan-promo-head + .list-plans{
	border-radius: 0 0 16px 16px;
}
.list-plans.clearfix::before,
.list-plans.clearfix::after{
	content: none;
}
.features-content.no-free-plan-column{
	width: auto;
}
.plan-wrap,
#power-plan.plan-wrap,
#value-plan.plan-wrap,
#basic-plan.plan-wrap,
#free-plan.plan-wrap{
	background: var(--uh-card);
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
}
.plan-info{
	display: flex;
	flex: 1;
	flex-direction: column;
}
.plan-head,
#power-plan .plan-head,
#value-plan .plan-head,
#basic-plan .plan-head,
#free-plan .plan-head{
	background: var(--uh-card);
	border-bottom: 1px solid var(--uh-line);
	color: var(--uh-muted);
	font-size: 13.5px;
	height: auto;
	padding: 24px 20px 18px;
}
.plan-head h2{
	color: var(--uh-ink);
	font: 750 21px/1.2 var(--uh-font);
	margin: 0 0 4px;
	text-shadow: none;
}
/* Value is the plan the platform labels "popular". */
#value-plan .plan-head{
	background: linear-gradient(180deg, #e6f7fb 0%, #fff 100%);
	box-shadow: inset 0 3px 0 var(--uh-cyan);
}
.plan-details{
	flex: 1;
	padding: 10px 0;
}
.plan-details li,
.plan-details .plan-row,
#power-plan .plan-row,
#value-plan .plan-row,
#basic-plan .plan-row,
#free-plan .plan-row{
	background: none;
	color: var(--uh-text);
	font-size: 14px;
	/* Base sets height: 1%, which collapses rows inside the flex column. */
	height: auto;
	padding: 7px 18px 7px 46px;
	position: relative;
}
.plan-details li::before{
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230b7488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
	content: "";
	height: 18px;
	left: 20px;
	position: absolute;
	top: 9px;
	width: 18px;
}
.plan-details .excluded,
.plan-details .excluded.plan-row,
#value-plan .excluded,
#basic-plan .excluded,
#free-plan .excluded{
	color: #94a3b8;
}
.plan-details .excluded::before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7m0-7l-7 7' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.plan-details li strong{
	color: var(--uh-ink);
}
.plan-price{
	border-top: 1px solid var(--uh-line);
	color: var(--uh-ink);
	font: 800 40px/1 var(--uh-font);
	height: auto;
	letter-spacing: -0.04em;
	padding: 20px 20px 8px;
}
.plan-price .price-currency{
	color: var(--uh-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	margin: 0 0 6px;
	padding: 0;
	text-align: center;
}
.plan-price .price-term{
	color: var(--uh-muted);
	font-size: 13px;
	font-weight: 500;
	margin: 6px 0 0;
}
.plan-extras{
	color: var(--uh-muted);
	font-size: 12.5px;
	height: auto;
	padding: 8px 20px 16px;
	text-align: center;
}
.btn-sign-up{
	height: auto;
	padding: 0 20px 24px;
}
.btn-sign-up a,
#power-plan .btn-sign-up a,
#basic-plan .btn-sign-up a,
#free-plan .btn-sign-up a{
	background: var(--uh-navy-2);
	border-radius: 10px;
	box-sizing: border-box;
	font: 700 15px/1 var(--uh-font);
	height: auto;
	padding: 15px 10px;
	text-transform: none;
	width: 100%;
}
#value-plan .btn-sign-up a{
	background: var(--uh-cyan);
	color: var(--uh-cyan-ink);
}
.btn-sign-up a:hover,
#power-plan .btn-sign-up a:hover,
#basic-plan .btn-sign-up a:hover,
#free-plan .btn-sign-up a:hover{
	background: var(--uh-indigo);
	text-decoration: none;
}
#value-plan .btn-sign-up a:hover{
	background: var(--uh-cyan-soft);
}

/*- Plan feature tooltips (built by tooltip.js) -*/
#tooltip-wrapper .tooltip-content{
	background: var(--uh-ink);
	border: 0;
	border-radius: 10px;
	box-shadow: var(--uh-shadow-lg);
	color: #e2e8f0;
	font-size: 13px;
	line-height: 1.5;
}

/*=== Buttons ===*/
input.btn-submit,
.btn-link-highlight a,
.btn-link-normal a,
.btn-like-link,
.form-normal .fieldset-info a.btn-like-link,
input.btn-subscribe,
a.small-btn,
.form-action .btn,
.btn-link-normal-small a{
	background: var(--uh-navy-2);
	border: 1px solid var(--uh-navy-2);
	border-radius: 8px;
	box-sizing: border-box;
	color: #fff !important; /* base sets !important on several of these colours */
	cursor: pointer;
	font: 600 14px/1 var(--uh-font);
	height: auto;
	min-height: 38px;
	padding: 11px 18px;
	text-shadow: none;
	transition: background-color .15s ease, border-color .15s ease;
}
input.btn-submit:hover,
input.btn-submit.active,
.btn-link-highlight a:hover,
.btn-link-normal a:hover,
.btn-link-normal.active a,
.btn-like-link:hover,
.form-normal .fieldset-info a.btn-like-link:hover,
input.btn-subscribe:hover,
a.small-btn:hover,
.form-action .btn:hover,
.btn-link-normal-small a:hover{
	background: var(--uh-indigo);
	border-color: var(--uh-indigo);
	color: #fff !important;
	text-decoration: none;
	text-shadow: none;
}
.btn-link-highlight a{
	background: var(--uh-cyan);
	border-color: var(--uh-cyan);
	color: var(--uh-cyan-ink) !important;
}
.btn-link-normal a,
.btn-link-highlight a{
	line-height: 1;
}
.btn-link-highlight, .btn-link-normal{
	height: auto;
	min-height: 38px;
}
input.btn-submit.reset,
.btn-link-normal li.none a{
	background: none;
	border-color: transparent;
	color: var(--uh-link) !important;
}
input.btn-submit.reset:hover,
.btn-link-normal li.none a:hover{
	background: #eef8fb;
	border-color: transparent;
	color: var(--uh-navy-2) !important;
}
input.btn-submit.destructive{
	background: #fff;
	border-color: #fecaca;
	color: var(--uh-down) !important;
}
input.btn-submit.destructive:hover{
	background: #fef2f2;
	border-color: #f87171;
	color: var(--uh-down) !important;
}
.btn-like-link{
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	min-height: 32px;
	padding: 7px 12px;
}
input.btn-subscribe, a.small-btn, .form-action .btn, .btn-link-normal-small a{
	font-size: 12.5px;
	min-height: 30px;
	padding: 7px 12px;
}
.button-disabled,
input.btn-submit:disabled{
	cursor: not-allowed;
	opacity: .5;
}

/*=== Forms ===*/
.form-normal fieldset{
	margin: 0 0 1.5em;
}
.form-normal div{
	margin: 0 0 14px;
}
.form-normal label,
.form-label{
	color: var(--uh-text);
	font-size: 14px;
	font-weight: 500;
	margin: 9px 0 0;
}
.form-normal label em,
.form-label em{
	color: var(--uh-muted);
	font-size: 12.5px;
	font-weight: 400;
}
.form-normal .chk label{
	color: var(--uh-text);
	font-weight: 400;
	margin: 0;
}
.form-normal .chk input{
	margin: 3px 8px 0 0;
}
.form-normal .fieldset-info,
.form-normal .fieldset-info2,
.form-normal .idd-examples,
.form-normal .idd-countrycode,
.form-normal .idd-networkprefix,
.form-normal .idd-phonenumber{
	color: var(--uh-muted);
	font-size: 13px;
}
.form-normal .fieldset-info em,
.form-normal .fieldset-info a{
	color: var(--uh-link);
}
.form-normal input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]){
	max-width: 100%;
}
.form-normal select{
	max-width: 100%;
}
.form-normal .submit{
	padding-bottom: 10px;
	padding-top: 14px;
}
.captcha{
	border-color: var(--uh-line-2);
	border-radius: var(--uh-radius-sm);
}
#form-login input{
	background: #fff;
	color: var(--uh-text);
	font-size: 13px;
}
#form-login .btn,
#form-language .btn{
	background: var(--uh-cyan);
	border: 0;
	color: var(--uh-cyan-ink);
	font: 600 13px/1 var(--uh-font);
	height: auto;
	padding: 8px 12px;
	text-shadow: none;
}

/*=== Notices ===*/
.box-error,
.box-warning,
.box-information,
.box-success{
	border: 1px solid;
	border-left-width: 4px;
	border-radius: 10px;
	font-size: 14px;
	margin: 18px 0 8px;
	padding: 14px 18px;
}
.box-error{ background: #fef2f2; border-color: #fecaca; border-left-color: #dc2626; color: #7f1d1d; }
.box-warning{ background: #fffbeb; border-color: #fde68a; border-left-color: #d97706; color: #78350f; }
.box-information{ background: #ecfafd; border-color: #bfe7f0; border-left-color: var(--uh-cyan); color: #0c4a5a; }
.box-success{ background: #f0fdf4; border-color: #bbf7d0; border-left-color: #16a34a; color: #14532d; }
.box-error a, .box-information a, .btn-notes-notes.important_notice > a{
	color: var(--uh-link);
	font-weight: 600;
}
.notice{
	text-shadow: none;
}
.notice dt{
	width: 44px;
}
.notice dd{
	float: none;
	margin-left: 44px;
	width: auto;
}
.notice dt img{
	height: 28px;
	width: 28px;
}
.notice p{
	padding: 2px 0;
}
.notices-column{
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 14px;
	color: #78350f;
	padding-bottom: 4px;
	padding-top: 4px;
}
.btn-notes{
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 8px;
	color: #78350f;
}

/*=== Tables ===*/
.tbl-normal{
	box-sizing: border-box;
	margin: 0 auto;
	max-width: var(--uh-max);
	overflow-x: auto;
	padding: 0 var(--uh-gutter) 20px;
}
.main-column .tbl-normal,
.features-content .tbl-normal{
	padding-left: 0;
	padding-right: 0;
}
.tbl-normal table{
	background: #fff;
	border: 1px solid var(--uh-line);
	border-collapse: separate;
	border-radius: 12px;
	border-spacing: 0;
	box-shadow: var(--uh-shadow);
	margin: 0 0 15px;
	min-width: 100%;
	overflow: hidden;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
	.tbl-normal td.minwidthfix{ min-width: 0; }
}
.tbl-normal th{
	background: var(--uh-navy);
	border-right: 1px solid rgba(255, 255, 255, .08);
	color: #e2e8f0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
	padding: 12px 14px;
	text-shadow: none;
}
.tbl-normal th:last-child{
	border-right: 0;
}
.tbl-normal td,
.tbl-normal td.specialcolumn{
	background: #fff;
	border-bottom: 0;
	border-right: 1px solid var(--uh-line);
	border-top: 1px solid var(--uh-line);
	color: var(--uh-text);
	font-size: 14px;
	padding: 10px 14px;
	text-shadow: none;
}
.tbl-normal td:last-child{
	border-right: 0;
}
.tbl-normal td a{
	color: var(--uh-link);
}
.tbl-normal td a em{
	color: var(--uh-link);
}
.tbl-normal tr.specialrow td,
.tbl-normal tr.specialrow td.specialcolumn,
.tbl-normal.combinedtd td{
	background: #f8fafc;
}
.tbl-normal tr.specialrow2 td{
	background: #eef8fb;
	font-weight: 600;
}
.tbl-normal tr:hover td{
	background: #f1f9fc;
}
.tbl-normal td img{
	vertical-align: middle;
}
/* On narrow screens the table scrolls sideways inside its wrapper; keep names readable and the
 * short value columns on one line instead of squeezing every cell. */
@media (max-width: 840px){
	.tbl-normal th:first-child,
	.tbl-normal td:first-child{
		min-width: 170px;
	}
	.tbl-normal th.ac,
	.tbl-normal td.ac{
		white-space: nowrap;
	}
}

/*=== Paging / filters ===*/
.nav-pages{
	font-size: 13px;
	overflow: visible;
}
.nav-pages-wrap,
.nav-pages-center{
	float: none;
	left: auto;
}
.nav-pages ul{
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.nav-pages li{
	float: none;
	padding: 0;
}
.nav-pages li a{
	background: #fff;
	border: 1px solid var(--uh-line-2);
	border-radius: 8px;
	color: var(--uh-text);
	float: none;
	line-height: 34px;
	padding: 0 12px;
	text-shadow: none;
}
.nav-pages li a:hover{
	background: #eef8fb;
	border-color: var(--uh-cyan);
	color: var(--uh-link);
}
.nav-pages li.inactive a{
	background: #f8fafc;
	border-color: var(--uh-line);
	color: #94a3b8;
}
.nav-pages li.filter-text-li{
	padding: 0 4px;
}

/*- Control panel helper menu (Setup Instructions / Tips) -*/
#nav2{
	font-size: 13px;
	height: auto;
	margin: 0 0 8px;
}
#nav2 > ul{
	display: flex;
	gap: 8px;
}
#nav2 li{
	padding: 0;
}
#nav2 li a,
#nav2 li a span{
	background: none;
	float: none;
	height: auto;
	padding: 0;
}
#nav2 > ul > li > a{
	background: #fff;
	border: 1px solid var(--uh-line-2);
	border-radius: 999px;
	color: var(--uh-link);
	display: block;
	font-weight: 600;
	line-height: 1;
	padding: 9px 14px;
}
#nav2 li a:hover,
#nav2 li:hover a,
#nav2 li.active a,
#nav2 li a:hover span,
#nav2 li:hover span,
#nav2 li.active a span{
	background: none;
	color: var(--uh-navy-2);
}
#nav2 > ul > li:hover > a{
	background: #eef8fb;
	border-color: var(--uh-cyan);
}
#nav2 li ul{
	background: #fff;
	border: 1px solid var(--uh-line);
	border-radius: 12px;
	box-shadow: var(--uh-shadow-lg);
	padding: 10px 0;
	top: calc(100% + 6px);
}
#nav2 li:hover li a{
	font: 13.5px/1.4 var(--uh-font);
	padding: 6px 18px;
}
#nav2 li a em{
	color: var(--uh-link);
}
#nav2 li li{
	height: auto;
}

/*- Status legend on reports -*/
.list-test-info ul{
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	height: auto;
}
.list-test-info li{
	align-items: center;
	color: var(--uh-muted);
	display: flex;
	float: none;
	gap: 6px;
	margin: 0;
}
.list-test-info li img{
	float: none;
	margin: 0;
}

/*- Generic lists -*/
.list-highlight li,
#columns .list-highlight li{
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230b7488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 3px / 15px no-repeat;
}
.list-normal ul li,
.list-normal ol li{
	line-height: 1.6;
}
.pic-border{
	border-color: var(--uh-line);
	border-radius: 10px;
}

/*=== Overlays ===*/
.lightbox-content{
	background: #fff;
	border: 0;
	border-radius: 16px;
	box-shadow: var(--uh-shadow-lg);
	max-width: calc(100vw - 32px);
}
.lightbox-content #page{
	background: #fff;
}

/*=== Footer ===*/
#footer{
	background: var(--uh-ink);
	color: #94a3b8;
	font-size: 14px;
	height: auto;
	margin: 0;
	padding: 0;
	width: auto;
}
#footer a{
	color: #c3cde0;
}
#footer a:hover{
	color: #fff;
}
.uh-footer-inner{
	box-sizing: border-box;
	display: grid;
	gap: 32px 48px;
	grid-template-columns: minmax(220px, 1.3fr) repeat(auto-fit, minmax(150px, 1fr));
	margin: 0 auto;
	max-width: var(--uh-max);
	padding: 56px var(--uh-gutter) 40px;
}
.uh-footer-brand img{
	display: block;
	height: auto;
	margin: 0 0 14px;
	max-height: 40px;
	width: auto;
}
.uh-footer-brand p{
	color: #94a3b8;
	font-size: 14px;
	max-width: 320px;
	padding: 0;
}
.uh-footer-col h2{
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	margin: 0 0 14px;
	text-transform: uppercase;
}
.uh-footer-col li{
	margin: 0 0 9px;
}
.uh-footer-legal{
	border-top: 1px solid rgba(255, 255, 255, .08);
}
.uh-footer-legal-inner{
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	margin: 0 auto;
	max-width: var(--uh-max);
	padding: 20px var(--uh-gutter);
}
#footer #copyr{
	float: none;
	font-size: 13px;
	width: auto;
}
.uh-footer-legal ul{
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 13px;
}
/* Control panel and checkout footers are a single line. */
.uh-footer-slim .uh-footer-legal{
	border-top: 0;
}

/*=== Theme artwork ===
 * tools/make_images.py renders these at 2x; the platform's <img> tags carry no sizes, so pin them to
 * the original dimensions here.
 */
img[src*="images/ico-feature"]{ width: 47px; height: 46px; }
img[src*="images/ico01"], img[src*="images/ico02"], img[src*="images/ico03"]{ width: 44px; height: 45px; }
img[src*="images/ico-info"], img[src*="images/ico-success"], img[src*="images/ico-error"], img[src*="images/ico-warn"]{ width: 32px; height: 32px; }
img[src*="images/ico-note"]{ width: 14px; height: 16px; }
img[src*="images/ico-arrow-down"]{ width: 11px; height: 14px; }
img[src*="images/ico-stars"]{ width: 37px; height: 10px; }
img[src*="images/ico-radar"]{ width: 90px; height: 98px; }
.slide-pic img{ width: 460px; height: 270px; }
#slide-alert-icons .alertby img{
	height: 34px;
	left: 18px;
	top: 15px;
	width: auto;
}
#slide-list-features .errors h5{
	background-size: 12px 12px;
}
.list-features dt img{
	height: 40px;
	width: 40px;
}

/* The platform's required firewall beacon is an inline 1x1 image after the footer; in flow it adds a
 * text-line-high strip of page background below the footer. It must still load, so lift it out of flow. */
img[src*="uncacheable.gif.php"]{
	height: 1px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 1px;
}

/*=== Screenshot galleries (push notification and reseller pages) ===*/
.image-list-byside{
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	margin: 24px 0 32px;
}
.image-list-byside::before,
.image-list-byside::after{
	content: none;
}
.image-list-byside .image-column,
.image-list-byside .image-column:last-child{
	float: none;
	max-width: none;
	padding: 0;
}
.image-preview-block img.preview-image,
.image-preview-block img.preview-image.large-size-preview{
	border: 0;
	border-radius: 18px;
	box-shadow: var(--uh-shadow);
	display: block;
	height: auto;
	margin: 0 0 12px;
	width: 100%;
}
.image-caption-block{
	color: var(--uh-muted);
	font-size: 14px;
	text-align: center;
}
.image-caption-block span{
	max-width: none;
}

/* "yourdomain.com" label the platform overlays on the reseller screenshots. */
.yourdomain-tag{
	background: rgba(255, 255, 255, .92);
	border-radius: 999px;
	color: var(--uh-link);
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
}

/*=== Social share ===*/
/* Referral page tiles. Google+ closed in 2019, so its button is hidden. */
.referral-social-share{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.referral-social-share div,
.referral-social-share div a{
	border-radius: 12px;
	height: 52px;
	margin: 0;
	width: 52px;
}
.referral-social-share div{
	transition: transform .15s ease, box-shadow .15s ease;
}
.referral-social-share div:hover{
	box-shadow: 0 8px 18px rgba(11, 19, 36, .18);
	transform: translateY(-2px);
}
/* Shorthand on purpose: the base per-button rules reset size and position with their own shorthand. */
.referral-social-share div.referral-share-fb{ background: url(../images/share-facebook.png) center / 52px 52px no-repeat; }
.referral-social-share div.referral-share-twitter{ background: url(../images/share-x.png) center / 52px 52px no-repeat; }
.referral-social-share div.referral-share-linkedin{ background: url(../images/share-linkedin.png) center / 52px 52px no-repeat; }
.referral-social-share div.referral-share-gplus,
.url-share .gplus-url-share,
.url-share.gplus-url-share{
	display: none;
}
/* Report share icons; the base points these at the platform's /images/social-share set. */
.url-share a{
	border-radius: 6px;
}
.facebook-url-share{ background: url(../images/share-facebook.png) center / 24px 24px no-repeat; }
.twitter-url-share{ background: url(../images/share-x.png) center / 24px 24px no-repeat; }
.linkin-url-share{ background: url(../images/share-linkedin.png) center / 24px 24px no-repeat; }
.reddit-url-share{ background: url(../images/share-reddit.png) center / 24px 24px no-repeat; }

/*=== Responsive ===*/
@media (max-width: 1080px){
	#main-feature .main-feature-content-top{
		gap: 40px;
		grid-template-columns: 1fr;
		padding-top: 48px;
	}
	.slider-column{
		justify-self: center;
	}
}
/* Compact header: header scripts add .uh-compact below 960px or whenever the links do not fit on one
 * line (the control panel has more items, and translations run longer). */
#header.uh-compact .uh-nav-toggle{
	display: inline-flex;
}
#header.uh-compact .uh-header-inner{
	flex-wrap: wrap;
	padding-bottom: 0;
}
#header.uh-compact #nav1,
#header.uh-compact .uh-utility{
	display: none;
	flex-basis: 100%;
	margin: 0;
}
#header.uh-compact.uh-nav-open #nav1,
#header.uh-compact.uh-nav-open .uh-utility{
	display: block;
}
#header.uh-compact.uh-nav-open #nav1{
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 8px 0;
}
#header.uh-compact.uh-nav-open .uh-utility{
	padding: 4px 0 16px;
}
#header.uh-compact #nav1 > ul{
	align-items: stretch;
	flex-direction: column;
}
#header.uh-compact #nav1 li a{
	padding: 12px 10px;
}
#header.uh-compact #nav1 li.active > a{
	box-shadow: inset 3px 0 0 var(--uh-cyan);
	border-radius: 2px 8px 8px 2px;
}
#header.uh-compact #nav1 > ul > li:has(> ul) > a::after{
	display: none;
}
/* Submenus are listed inline under their parent on small screens. */
#header.uh-compact #nav1 li ul{
	background: transparent;
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, .12);
	border-radius: 0;
	box-shadow: none;
	margin: 0 0 6px 14px;
	opacity: 1;
	padding: 0 0 0 6px;
	position: static;
	transform: none;
	visibility: visible;
}
#header.uh-compact #nav1 li li a{
	color: #a5b1c8;
	font-size: 14px;
	padding: 9px 10px;
}
#header.uh-compact #nav1 li li a:hover,
#header.uh-compact #nav1 li li.active a{
	background: rgba(255, 255, 255, .06);
	color: #fff;
}
#header.uh-compact .uh-utility{
	align-items: flex-start;
}
#header.uh-compact.uh-nav-open .uh-utility{
	display: flex;
	flex-wrap: wrap;
}
#header.uh-compact #nav-top ul{
	flex-wrap: wrap;
}
@media (max-width: 840px){
	.network-brand-badge{
		display: none;
	}
	.network-bar-inner{
		padding: 0 8px;
	}
	.network-bar .network-tab{
		font-size: 11.5px;
		padding: 0 10px;
	}
	/* Hint that more brands are off-screen in the swipeable strip. */
	.network-tabs{
		-webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
		mask-image: linear-gradient(to right, #000 85%, transparent);
	}
	/* Stack the 220px label column used by every control panel form. */
	.form-normal label,
	.form-label{
		float: none;
		display: block;
		margin: 0 0 6px;
		width: auto;
	}
	.form-normal .fieldset-info,
	.form-normal .submit,
	.form-radio .form-normal .fieldset-info,
	.form-radio .form-normal .submit{
		padding-left: 0;
	}
	.form-normal .fieldset-multi,
	.form-normal .idd-examples{
		margin-left: 0;
	}
	.form-normal input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]),
	.form-normal select,
	.form-normal textarea{
		width: 100%;
	}
	.col1, .col2, .col3, .col4, .col5, .col6{
		float: none;
		margin: 0;
		padding: 0;
		width: auto;
	}
	.quotes-testimonial{
		padding: 32px 24px;
	}
	#home-signup{
		padding: 32px 20px;
	}
	.home-signup-field,
	.home-signup-field input[type="text"],
	.home-signup-field #home-signup-submit{
		width: 100%;
	}
	#home-signup-form form{
		flex-direction: column;
		width: 100%;
	}
}
@media (max-width: 560px){
	:root{
		--uh-gutter: 16px;
	}
	/* The platform slider is fixed at 460x270; below this width it would overflow. */
	.slider-column{
		display: none;
	}
	#main-feature .main-feature-content-top{
		padding-bottom: 112px;
		padding-top: 40px;
	}
	.list-features{
		grid-template-columns: 1fr;
	}
	.list-features dl,
	.list-features dl.fl,
	.list-features dl.fr{
		flex-direction: column;
	}
	.uh-footer-inner{
		grid-template-columns: 1fr 1fr;
	}
	.uh-footer-brand{
		grid-column: 1 / -1;
	}
	.btn-link-features,
	.btn-link-features a{
		text-align: center;
		width: 100%;
	}
	#main-feature .btn-link-center > div{
		flex: 1 1 100%;
	}
}
/*=== Motion ===
 * Only for visitors who have not asked for reduced motion. The hero entrance is pure CSS. Scroll
 * reveals hide content only once the header script has added .uh-js and IntersectionObserver
 * exists, so nothing stays hidden if scripts fail.
 */
@keyframes uh-rise{
	from{ opacity: 0; transform: translateY(18px); }
	to{ opacity: 1; transform: none; }
}
@keyframes uh-float-in{
	from{ opacity: 0; transform: translateY(24px) scale(.97); }
	to{ opacity: 1; transform: none; }
}
@keyframes uh-bars-grow{
	from{ transform: scaleY(0); }
	to{ transform: scaleY(1); }
}
@keyframes uh-bars-drift{
	to{ background-position: -1200px 100%; }
}
@media (prefers-reduced-motion: no-preference){
	#main-feature .uh-eyebrow,
	#main-feature .list-features-column h3,
	#main-feature .list-features-slider li,
	#main-feature .btn-link-wrap{
		animation: uh-rise .7s var(--uh-ease) both;
	}
	#main-feature .uh-eyebrow{ animation-delay: .05s; }
	#main-feature .list-features-column h3{ animation-delay: .15s; }
	#main-feature .list-features-slider li:nth-child(1){ animation-delay: .3s; }
	#main-feature .list-features-slider li:nth-child(2){ animation-delay: .38s; }
	#main-feature .list-features-slider li:nth-child(3){ animation-delay: .46s; }
	#main-feature .list-features-slider li:nth-child(n+4){ animation-delay: .54s; }
	#main-feature .btn-link-wrap{ animation-delay: .65s; }
	#main-feature .slider-column{
		animation: uh-float-in .9s var(--uh-ease) .35s both;
	}
	/* The chart grows up from the baseline, then scrolls slowly like a live latency graph. */
	#main-feature::before{
		animation: uh-bars-grow 1.4s var(--uh-ease) .2s both, uh-bars-drift 90s linear 1.6s infinite;
		transform-origin: 50% 100%;
	}

	.uh-js .uh-reveal{
		opacity: 0;
		transform: translateY(24px);
		transition: opacity .7s var(--uh-ease), transform .7s var(--uh-ease);
		transition-delay: var(--uh-delay, 0s);
	}
	.uh-js .uh-reveal.uh-in{
		opacity: 1;
		transform: none;
	}
	/* Cards keep their hover lift once revealed. */
	.uh-js .uh-card.uh-reveal.uh-in{
		transition: opacity .7s var(--uh-ease), transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	}
	.uh-js .uh-card.uh-reveal.uh-in:hover{
		transform: translateY(-3px);
	}
	.uh-icon{
		transition: transform .25s var(--uh-ease), background .25s ease;
	}
	.uh-card:hover .uh-icon{
		background: linear-gradient(135deg, #d4f2f9, #c4e5f2);
		transform: scale(1.08) rotate(-4deg);
	}
	.btn-link-features a,
	.btn-sign-up a,
	.home-signup-field #home-signup-submit{
		transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
	}
	.btn-sign-up a:hover,
	.home-signup-field #home-signup-submit:hover{
		box-shadow: 0 8px 20px rgba(11, 19, 36, .2);
		transform: translateY(-1px);
	}
}
@media (prefers-reduced-motion: reduce){
	*,
	*::before,
	*::after{
		animation: none !important;
		transition: none !important;
	}
}