/*
Theme Name: TBOX 2022
Text Domain: TBOX2022
Version: 1.20211229.3
Description: Togglebox 2022 Theme
Tags: Togglebox
Author: Dave Sonnie
*/

/* RESETS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;

  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* DEFAULTS */
@font-face {
  font-family: "Hind";
  src: url("assets/fonts/Hind-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
	font-display: swap;
}
/*
@font-face {
  font-family: "Hind";
  src: url("assets/fonts/Hind-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}*/
@font-face {
  font-family: "Hind Light";
  src: url("assets/fonts/Hind-Regular.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
	font-display: swap;
}
@font-face {
  font-family: "Varela Round";
  src: url("assets/fonts/VarelaRound-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
	font-display: swap;
}
/*
@font-face {
  font-family: "Varela Round";
  src: url("assets/fonts/VarelaRound-Regular-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
	font-display: swap;
}*/
* {
	font-family: "Hind", "Arial";
}
:root {
  --blue-1: #29a7e6;
  --blue-1-dark: #035b85;
  --blue-2: #0473a9;
  --blue-3: #0999df;
  --blue-4: #006287;
  --green-1: #20eb79;
  --green-2: #00e664;
  --green-2-dark: #188f44;
  --green-3: #20eb79;
  --green-4: #00c248;
  --purple-1: #3b4fea;
  --purple-2: #5f6fee;
  --purple-2-dark: #3D51E5;
  --gray-1: #565656;
  --gray-2: #222;
  --gray-3: #e5e5e5;
  --gray-4: #eaeaea;
  --gray-5: #f5f5f5;
  --gray-6: #a0a0a0;
  --gray-7: #cccccc;
  --orange-1: #ff5123;
  --orange-1-dark: #DA2F02;

  /* STYLE.md (brand + neutrals) */
  --brand-primary: var(--blue-1);
  --brand-primary-dark: var(--blue-2);
  --brand-primary-bg: rgba(41, 167, 230, 0.08);
  --brand-cta: #f5921e;
  --brand-highlight: #faab4d;
  --brand-highlight-bg: rgba(250, 171, 77, 0.22);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-disabled: #94a3b8;

  --surface-base: #ffffff;
  --surface-subtle: #f8fafc;
  --surface-muted: #f1f5f9;
  --surface-dark: #1e293b;

  --border-light: #e2e8f0;
  --border-mid: #cbd5e1;
  --border-muted: #94a3b8;

  --hvps-slate-950: #020617;
  --text-on-dark: rgba(226, 232, 240, 0.92);
  --text-on-dark-muted: rgba(226, 232, 240, 0.75);
  --hover-on-dark: rgba(255, 255, 255, 0.08);

  --max-width: 1170px;
  --header-height: 100px;
  --header-height-scrolled: 80px;
  /* z-index scale */
  --z-header: 5000;
  --z-header-dropdown: 6000;
}
body {
  width: 100%;
  margin: 0;
  background-color: #fff;
}
section#content { max-width: 100vw; }
h1,h2,h3,h4,h5,p,div,section,input,article,span,blockquote,a,ul,li,button {
  font-family: "Hind", "Arial", "Times New Roman";
}
p:empty { display: none; }
p+p { margin-top: 1rem;}
div {
}

/* HEADER SECTION */
/* Prevent third-party widgets (chat/recaptcha) from creating horizontal scroll */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 0.9rem;
  background: #fff;
  color: #000;
  border: 2px solid var(--blue-1);
  border-radius: 0.5rem;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.15s ease;
  z-index: calc(var(--z-header-dropdown) + 1);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

#header {
		  display: grid;
		  grid-template-columns: 200px 1fr max-content max-content;
		  grid-column-gap: 0.5rem;
		  width: 100%;
		  height: var(--header-height);
		  --header-current-height: var(--header-height);
		  margin: 0;
		  /* Allow header to use a wider max-width than the body content so the full
		     nav + actions can stay uncollapsed on large screens. */
		  padding-left: max(1.5rem, calc(50% - 700px));
	  padding-right: max(1.5rem, calc(50% - 700px));
	  background-color: #fff;
	  position: relative;
	  z-index: var(--z-header);

}
#header > * {
  /*padding-top: 2rem;*/
  align-self: center;
}

#main-navigation,
#mobile-menu,
#header .header-chat-btn,
#header .phone {
  align-self: stretch;
}
/* header phone number row */
#header .phone {
  min-height: 44px;
  height: 100%;
}
#header .phone {
  display: inline-flex;
  align-items: center;
  justify-content: end;
  gap: 0.4rem;
  padding: 0;
  box-sizing: border-box;
  text-align: right;
  color: var(--text-primary);
  font-family: "Varela Round", georgia;
  text-decoration: none;
  cursor: pointer;
}
#header .header-chat-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  min-height: 44px;
  height: 100%;
  box-sizing: border-box;
  color: var(--text-primary);
  font-family: "Varela Round", georgia;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  font-size: 1rem;
}
#header .header-chat-btn:hover {
  color: var(--brand-primary);
}
#header .phone:hover {
  color: var(--brand-primary);
}

#header .header-chat-btn:focus,
#header .header-chat-btn:focus-visible,
#header .phone:focus,
#header .phone:focus-visible {
  outline: none;
}

#header .header-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.8rem;
  border-radius: 0.5rem;
  line-height: 1;
  box-sizing: border-box;
}

@media only screen and (max-width: 1200px) {
  #header .header-action-chip { padding: 0.45rem 0.7rem; }
}

@media only screen and (max-width: 900px) {
  #header .header-action-chip { padding: 0.4rem 0.6rem; }
}

#header .header-chat-btn .header-action-chip {
  background: rgba(41, 167, 230, 0.08);
  border: 1px solid rgba(41, 167, 230, 0.45);
}

#header .phone .header-action-chip {
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.12);
}

#header .header-chat-btn:hover .header-action-chip {
  background: rgba(41, 167, 230, 0.14);
}

#header .phone:hover .header-action-chip {
  background: rgba(41, 167, 230, 0.07);
}

#header .header-chat-btn:focus-visible .header-action-chip,
#header .phone:focus-visible .header-action-chip {
  outline: 2px solid var(--blue-1);
  outline-offset: 2px;
}

/* Responsive header: collapse chat/phone text first (icons only) */
#header.tb-actions-compact > .header-chat-btn,
#header.tb-actions-compact > .header-phone {
  padding: 0;
}
#header.tb-actions-compact > .header-chat-btn .chat-text,
#header.tb-actions-compact > .header-phone .phone-text {
  display: none;
}
#header.tb-actions-compact > .header-chat-btn .chat-icon,
#header.tb-actions-compact > .header-phone .phone-icon {
  font-size: 1.15rem;
  line-height: 1;
}
/* Sticky Header on Scroll */
#header.scrolled {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
		  z-index: var(--z-header);
	  height: var(--header-height-scrolled);
	  --header-current-height: var(--header-height-scrolled);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  background: #fff;
  animation: slideDown 0.3s ease;
}
@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
/* Spacer when header is fixed */
body.header-fixed {
  padding-top: var(--header-height-scrolled);
}
#header:nth-child(2) {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
#header:nth-child(3) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
/* header menu */
#header ul.menu {
  display: flex;
  justify-self: end;
  align-self: center;
  justify-content: flex-end;
  align-items: center;
	z-index: 99;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 2rem;
  height: 100%;
  padding: 0;
  margin: 0;
}

#header ul.menu, #header ul.menu li {
  list-style: none;
}
#header ul.sub-menu li {
  min-width: 20ch;
}
#header ul.menu a {
  font-size: 1rem;
  text-decoration: none;
  color: inherit;
  font-family: "Varela Round", Georgia;
}
#header ul.menu button {
  font-size: 1rem;
  text-decoration: none;
  color: inherit;
  font-family: "Varela Round", Georgia;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

#header ul.menu > li:hover > a,
#header ul.menu > li:hover > button {
  color: var(--blue-1);
}
#header ul.menu {
  position: relative;
  line-height: 1;
}
#header ul.menu > li {
  position: relative;
  height: 100%;
  line-height: 1;
  padding: 0;
  font-family: "Varela Round";
  font-size: 1rem;
  flex: 0 0 auto;
}

/* Top-level menu hit area should be the actual control, not <li> padding */
#header ul.menu > li > a,
#header ul.menu > li > button:not(.submenu-toggle) {
  display: inline-flex;
  align-items: center;
  height: 100%;
  min-height: 44px;
  padding-left: 1rem;
  padding-right: 1rem;
  line-height: 1;
  white-space: nowrap;
}

#header ul.menu > li > button.submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 44px;
  min-width: 44px;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  line-height: 1;
}

#header ul.menu > li.menu-item-has-children {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

#header ul.menu > li.menu-item-has-children > a {
  flex: 1 1 auto;
}

#header ul.menu > li.menu-item-has-children > ul.sub-menu {
  flex: 0 0 100%;
}

/* Responsive header spacing (every ~200px) */
@media only screen and (max-width: 1600px) {
  #header { grid-column-gap: 0.45rem; }
  #header ul.menu > li > a,
  #header ul.menu > li > button:not(.submenu-toggle) { padding-left: 0.85rem; padding-right: 0.85rem; }
}

@media only screen and (max-width: 1400px) {
  #header { grid-column-gap: 0.4rem; }
  #header ul.menu > li > a,
  #header ul.menu > li > button:not(.submenu-toggle) { padding-left: 0.75rem; padding-right: 0.75rem; }
  #header .header-chat-btn,
  #header .phone { padding: 0; }
}

@media only screen and (max-width: 1200px) {
  #header { grid-column-gap: 0.35rem; }
  #header ul.menu > li > a,
  #header ul.menu > li > button:not(.submenu-toggle) { padding-left: 0.6rem; padding-right: 0.6rem; }
  #header .header-chat-btn,
  #header .phone { padding: 0; }
}

@media only screen and (max-width: 1000px) {
  #header { grid-column-gap: 0.3rem; }
  #header ul.menu > li > a,
  #header ul.menu > li > button:not(.submenu-toggle) { padding-left: 0.5rem; padding-right: 0.5rem; }
  #header .header-chat-btn,
  #header .phone { padding: 0; }
  #header { padding-left: 1rem; padding-right: 1rem; }
}

@media only screen and (max-width: 900px) {
  #header { grid-column-gap: 0.25rem; }
  #header ul.menu > li > a,
  #header ul.menu > li > button:not(.submenu-toggle) { padding-left: 0.4rem; padding-right: 0.4rem; }
  #header .header-chat-btn,
  #header .phone { padding: 0; }
}

@media only screen and (max-width: 800px) {
  #header { grid-column-gap: 0.2rem; }
  #header ul.menu a,
  #header ul.menu button { font-size: 0.95rem; }
  #header ul.menu > li > a,
  #header ul.menu > li > button:not(.submenu-toggle) { padding-left: 0.35rem; padding-right: 0.35rem; }
  #header .header-chat-btn,
  #header .phone {
    padding: 0;
    font-size: 0.95rem;
  }
}
#header ul.sub-menu {
  padding: 0;
  background-color: var(--surface-dark);
}
#header ul.sub-menu li {
  position: relative;
  padding: 0;
}
#header ul.sub-menu li a,
#header ul.sub-menu li button:not(.submenu-toggle) {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  min-height: 44px;
  line-height: 1.35;
  color: var(--text-on-dark);
  white-space: nowrap;
  margin-right: 0;
  background: transparent;
  border: none;
  font-family: "Varela Round", Georgia;
  font-size: 1rem;
  cursor: pointer;
  text-align: left;
}

#header ul.sub-menu > li.menu-item-has-children {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

#header ul.sub-menu > li.menu-item-has-children > a {
  flex: 1 1 auto;
  width: auto;
}

#header ul.sub-menu > li.menu-item-has-children > ul.sub-menu {
  flex: 0 0 100%;
}

#header ul.sub-menu > li > button.submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.75rem 0.9rem;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
}

#header ul.sub-menu > li:hover > a,
#header ul.sub-menu > li:hover > button {
  color: #fff;
}
/* :hover displays */
#header ul.menu li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-header-dropdown);
}
#header ul.menu li:hover > ul {
  display: block;
  background-color: var(--surface-dark);
}
/* nested menus */
#header ul.sub-menu > li > ul {
  position: absolute;
  top: 0;
  left: 100%;
}
#header ul.sub-menu > li {
  background-color: transparent;
}
#header ul.sub-menu > li:hover {
  background-color: var(--hover-on-dark);
}
#header ul.sub-menu > li > ul > li {
  background-color: transparent;
}
#header ul.sub-menu > li > ul > li > a {
  color: var(--text-on-dark-muted);
}
#header ul.sub-menu > li > ul > li:hover {
  background-color: var(--hover-on-dark);
}
#header ul.sub-menu > li > ul > li > ul > li {
  background-color: transparent;
}
/* Old submenu arrow (pre .dropdown-indicator) */
#header ul.sub-menu > li.menu-item-has-children::before,
#header ul.sub-menu > li.menu-item-has-children.order::before {
    content: none;
    display: none;
}
/*
#header ul.sub-menu > li.menu-item-has-children:hover::before {
    writing-mode: vertical-rl;
    color: #f5f5f5;
}*/

#header ul.sub-menu > li > ul > li > ul > li:hover {
  background-color: var(--hover-on-dark);
}
/* Order menu items: align to STYLE.md brand CTA */
#header ul.sub-menu > li.order {
  background-color: var(--brand-cta);
}

#header ul.sub-menu > li.order > a,
#header ul.sub-menu > li.order > button:not(.submenu-toggle) {
  color: var(--text-primary);
}

#header ul.sub-menu > li.order:hover {
  background-color: var(--brand-highlight);
}

#header ul.sub-menu > li.order > ul.sub-menu {
  background-color: var(--brand-cta);
}

#header ul.sub-menu > li.order > ul.sub-menu > li > a,
#header ul.sub-menu > li.order > ul.sub-menu > li > button:not(.submenu-toggle) {
  color: var(--text-on-dark-muted);
}

#header ul.sub-menu > li.order > ul.sub-menu > li:hover {
  background-color: var(--brand-highlight);
}

span#mobile-menu {
	display:none;
}

/* FOOTER */
#footer {
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: max(1.5rem, calc(50% - 585px));
  padding-right: max(1.5rem, calc(50% - 585px));
  background-color: #222222;
  color: #f5f5f5;
}
#footer > * {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
}
#footer-navs {
  display: grid;
  grid-template-columns: repeat(4, auto);
	grid-column-gap: 4rem;
}
#footer-navs div div+div {
  margin-top: 2rem;
}
#footer-navs h2 {
  font-size: 1.5rem;
  font-weight: 200;
}
#footer-navs li {
  padding: .5rem 0;
}
#footer-navs a {
  color: #a0a0a0;
}
#footer-copyright {
  background-color: #151515;
  color: #f5f5f5;
}
#footer-copyright > div {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
}
/* HEADER TAGS */
h1 {
  font-size: 4rem;
  line-height: 4.5rem;
  padding-bottom: 2rem;
}
h2 {
	font-size: 3rem;
	line-height: 3.5rem;
	padding-bottom: 0.5rem;
	font-weight: 550;
}
h3 {
	font-size: 2rem;
	line-height: 2.5rem;
	padding-bottom: 0.5rem;
}
h4 {
  color: var(--blue-2);
	font-size: 1.5rem;
	line-height: 2rem;
	padding-bottom: 2rem;
}
h5 {
	font-size: 1.25rem;
	line-height: 1.75rem;
	padding-bottom: 0.5rem;
}
#hero-section h1 {
    color: #fff;
    font-weight: bold;
}
#hero-section h4 {
  margin-bottom: 1.5rem;
    color: #fff;
    max-width: 75ch;
}
section > h2, .title h2, #rdp-plans h2 {
  color: var(--gray-1);
}
/* A Tags */
a, a:visited, a:active, a:hover {
  text-decoration: none;
}
a.btn, a.btn-lg, button.btn, button.btn-lg {
	display: inline-block;
	background: var(--green-2);
	padding: .75rem 1.5rem;
	font-size: 0.75rem;
	border: none;
	color: #fff;
	text-decoration: none;
}
a.btn.c2, a.btn-lg.c2 {
	background: var(--orange-1);
}
a.btn-lg, button.btn-lg {
	width: 75%;
	padding-top: 1.33rem;
	padding-bottom: 1.33rem;
	font-size: 1rem;
	text-align: center;
}

a.btn:hover, a.btn-lg:hover {
	background: var(--green-2-dark);
}
a.btn.c2:hover, a.btn-lg.c2:hover {
	background: var(--orange-1-dark);
}
a.btn.blue, button.btn.blue, button.btn-lg.blue {
	background: var(--blue-1);
}
a.btn.blue:hover, button.btn.blue:hover, button.btn-lg.blue:hover {
	background: var(--blue-2);
}
a.sm-order-btn {
    display: inline-block;
    padding: 10px 0;
    font-size: 11px;
    background: var(--blue-1);
    color: #fff;
    width: 66%;
}
a.sm-order-btn:hover {
  background-color: var(--blue-2);
}
/* Paragraphs */
#content p {
  line-height: 1.33rem;
  color: var(--gray-1);
}
#hero-section p {
	color: #fff;
}

/* Divs */
#content div {
  font-size: 1rem;
  line-height: 1.33rem;
  color: var(--gray-1);
}
div.grid-align-center {
	align-items: center;
}
div.grid-justify-center {
	justify-items: center;
}
div.grid-align-center {
	place-items: center;
}
/* Strong */
strong {
  font-weight: bold;
  color: inherit;
}

/* SECTIONS */
/* center all content inside 1170px, with min 1.5rem padding at narrow viewports */
#content > section {
  padding-left: max(1.5rem, calc(50% - 585px));
  padding-right: max(1.5rem, calc(50% - 585px));
  padding-top: 4rem;
  padding-bottom: 4rem;
}
section.color-1 {
  background: var(--gray-5);
}
/* HERO SECTION */
#hero-section {
  background-color: #005b80;
	background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:a='http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/' x='0px' y='0px' width='66px' height='100.5px' viewBox='0 0 66 100.5' style='overflow:scroll;enable-background:new 0 0 66 100.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23006187;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cpolygon class='st0' points='66,37.1 66,1.1 34,13.1 34,49.1 '/%3E%3Cpolygon class='st0' points='34,87.3 66,99.3 66,63.3 34,51.3 '/%3E%3Cpolygon class='st0' points='32.9,13.1 0.9,1.1 0.9,37.1 32.9,49.1 '/%3E%3Cpolygon class='st0' points='32.9,51.3 0.9,63.3 0.9,99.3 32.9,87.3 '/%3E%3Cpolygon class='st0' points='0.4,37.9 0.4,37.9 0.4,37.9 0.4,37.9 0,38.1 0,62.1 0.4,62.3 0.4,62.3 0.4,62.3 0.4,62.3 0.4,62.3 32.9,50.1 0.4,37.9 '/%3E%3Cpolygon class='st0' points='66,100.5 66,100.5 33.5,88.3 33.5,88.3 33.5,88.3 33.5,88.3 33.5,88.3 1,100.5 1.1,100.5 65.9,100.5 '/%3E%3Cpolygon class='st0' points='66,0 1.1,0 33.5,12.2 33.5,12.2 33.5,12.2 33.5,12.2 33.5,12.2 66,0 '/%3E%3Cpolygon class='st0' points='66,62.1 66,38.1 34,50.1 '/%3E%3C/svg%3E");
	background-position: center bottom;
}
#hero-section h2:last-child, #hero-section h4:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* *******************************************
INDEX PAGE STYLES
***********************************************/
/* INDEX PAGE CARDS */
#product-cards {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-gap: 1rem;
	/*padding-top: 60px;*/
}
#product-cards > div {
	display: grid;
	padding: 2rem;
	background-color: var(--gray-5);
	border-top: 20px solid #06425a;
	border-top-color: var(--gray-7);
	color: #333;
	font-size: 1rem;
}
#product-cards > div:first-child {
	border-radius: 1rem 0 0 1rem;
	border-top-color: #004e6b;
	border-top-color: #024566;
}
#product-cards > div:last-child {
	border-radius: 0 1rem 1rem 0;
	border-top-color: #007c2e;
	border-top-color: #00782D;
}
#product-cards h3 {
	font-weight: bold;
	color: #555;
	text-align: center;
}
#product-cards p, #product-cards li {
	font-family: Hind;
	font-size: 1rem;
	line-height: 1.5rem;
	color: #333;
}
#product-cards p {}
#product-cards p:first-child {
	/*margin-top: 0;*/
	margin-bottom: 2rem;
}
#product-cards .card-footer {
	justify-self: center;
  padding-top: 1rem;
}
#product-cards a.btn {
	display: inline-block;
	min-width: 50%;
	padding: 0.5rem 1.5rem;
	color: #efefef;
	font-family: 'Open Sans';
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
}
#product-cards > div:first-child a.btn {
	background-color: var(--blue-1);
}
#product-cards > div:first-child a.btn:hover {
	background-color: var(--blue-1-dark);
}
#product-cards > div:last-child a.btn {
	background-color: var(--green-4);
}
#product-cards > div:last-child a.btn:hover {
	background-color: var(--green-2-dark);
}
.top-border {
    border-top: 1px solid #bbb;
    padding-top: 2rem;
}
/*
 * Common Section Styles
 */
#cloud-section-grid, #paas-section-grid, #solutions-section-grid, #about-section-grid, #reviews-section-grid {
	width: 100%;
	display: grid;
	grid-template-columns: calc(50% - 1rem) calc(50% - 1rem);
	grid-gap: 2rem;
}

#cloud-section a.btn, #paas-section a.btn, #solutions-section a.btn, #about-section a.btn, #reviews-section a.btn {
	display: block;
	margin: 0 10% 2rem 10%;
	padding: 1.25rem;
	text-align: center;
	font-size: 1rem;
}

#cloud-section blockquote, #paas-section blockquote, #solutions-section blockquote, #about-section blockquote {
	margin-left: 10%; /* needs to match #cloud-section a.btn */
	margin-bottom: 3rem;
	border-color: var(--blue-4);
	font-style: italic;
}

#cloud-section blockquote::before, #paas-section blockquote::before, #solutions-section blockquote::before, #about-section blockquote::before {
	background-color: var(--blue-1);
}
blockquote {
	padding-left: 25px;
	position: relative;
}
blockquote:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 2px;
	height: 100%;
}
blockquote {
	margin-bottom: 30px;
}
blockquote.grve-element:last-child {
	margin-bottom: 0;
}


#cloud-section p,
#paas-section p,
#solutions-section p,
#about-section p {
	max-width: 75ch;
	margin-top: 1em; /* all but the first  should get top margins, p:first-child is unset below */
}

#cloud-section p:first-child,
#paas-section p:first-child,
#solutions-section p:first-child,
#about-section p:first-child {
	margin-top: 0;
}

/*
 * Cloud Section
 */

#cloud-section {}

#cloud-section-features-grid {
	display: grid;
	grid-template-areas: "a b"
						 "c d"
						 "e e"
						 "f f";
	margin-top: 2rem;
}

#cloud-section-features-grid div:first-child {
	grid-area: a;
	padding-bottom: 1rem;
}
#cloud-section-features-grid div:nth-child(2) {
	grid-area: b;
}
#cloud-section-features-grid div:nth-child(3) {
	grid-area: c;
	padding-bottom: 2rem;
}
#cloud-section-features-grid div:nth-child(4) {
	grid-area: d;
}
#cloud-section-features-grid div:nth-child(5) {
	grid-area: e;
}
#cloud-section-features-grid div:nth-child(6) {
	grid-area: f;
}

.top-border {
	border-top: 1px solid #bbb;
	padding-top: 2rem !important;
}

/*
 * Hero Cards
 */

#hero-cards {
	display: grid;
	/*grid-template-columns: calc(33% - 1.33rem) calc(34% - 1.33rem) calc(33% - 1.33rem);
	grid-template-rows: auto auto auto;*/
	grid-template-areas: "a d g"
						 "b e h"
						 "c f i";
	grid-template-rows: auto auto auto;
	grid-column-gap: 2rem;
	padding-top: 3rem;
	justify-items: center;
}

#title-1  { grid-area: a; }
#body-1   { grid-area: b; }
#footer-1 { grid-area: c; }
#title-2  { grid-area: d; }
#body-2   { grid-area: e; }
#footer-2 { grid-area: f; }
#title-3  { grid-area: g; }
#body-3   { grid-area: h; }
#footer-3 { grid-area: i; }


#hero-cards > div {
	display: grid;
	width: 100%;
	background: var(--gray-4);
	padding: 1rem 2rem;
	text-align: center;
}

#hero-cards #title-1,
#hero-cards #title-2,
#hero-cards #title-3 {
	height: 100%;
	padding-top: 2rem;
	background-color: var(--gray-4);
	border-top: 20px solid #06425a;
	border-top-color: #aaa;
	align-self: center;
	color: #333;
}

#body-1,
#body-2,
#body-3 {
	padding-top: 0;
	font-size: 0.85rem;
}

#body-1,
#body-2,
#body-3 {
	padding-top: 0;
	font-size: 0.85rem;
}

#hero-cards h3 {
	align-self: center;
	font-size: 1.33rem;
	text-align: center;
}

#hero-cards a.btn {
	display: inline-block;
	background: var(--blue-2);
	min-width: 50%;
	padding: 0.5rem 1.5rem;
	border: 1px solid var(--blue-2);
	color: #efefef;
	font-family: 'Open Sans';
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
}
#hero-cards a.btn:hover {
	background-color: var(--blue-1);
}


/*
 * PaaS Section
 */
#paas-section h4 {
	color: var(--purple-2);
}
#paas-section a.btn {
	background-color: var(--purple-2);
}
#paas-section a.btn:hover {
	background-color: var(--purple-2-dark);
}
#paas-section blockquote::before {
	background-color: var(--purple-2);
}

#paas-section-features-grid {
	display: grid;
	grid-template-areas: "a b"
						 "c d"
						 "e e"
						 "f f";
	margin-top: 2rem;
}

#paas-section-features-grid div:first-child {
	grid-area: a;
	padding-bottom: 1rem;
}
#paas-section-features-grid div:nth-child(2) {
	grid-area: b;
}
#paas-section-features-grid div:nth-child(3) {
	grid-area: c;
	padding-bottom: 2rem;
}
#paas-section-features-grid div:nth-child(4) {
	grid-area: d;
}
#paas-section-features-grid div:nth-child(5) {
	grid-area: e;
}
#paas-section-features-grid div:nth-child(6) {
	grid-area: f;
}


/*
 * About Section
 */

 #about-section img {
	 margin-left: 10%; /* needs to match #cloud-section a.btn */
	 margin-bottom: 3rem;
 }

 /*
  * Solutions Section
  */

#solutions-section-grid {
	display: grid;
	grid-template-columns: 33% 34% 33%;
	grid-template-rows: auto;
	grid-gap: 1rem;
}

#solutions-section-grid > div {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 1.15rem auto auto;
	grid-gap: 0.5rem;
	background: #f3f3f3;
	border: 1px solid #777;
	padding: 1rem;
}

#solutions-section-grid div div {
	padding: 0.5rem;
	display: grid;
}

#solutions-section-grid div div:first-child {
	padding-top: 0;
	padding-bottom: 0;
	line-height: 1.15rem;
	font-size: 1.15rem;
	font-weight: bold;
	/*color: #00384d;*/
	/*color: #004e6b;*/
	/*color: #007cac;*/
	color: var(--blue-4);
}

#solutions-section-grid div div:last-child {
	align-items: end;
}

#solutions-section-grid a.feat-btn {
	width: min-content;
	height: min-content;
	display: inline-block;
	justify-self: center;
	padding: 0.25rem 2rem;
	background: #fafafa;
	border: 1px solid #bbb;
	font-size: 0.75rem;
	line-height: 1rem;
	color: #a5a5a5;
	text-align: center;
}

#solutions-section-grid a.feat-btn:hover {
	background: var(--blue-1);
	border-color: var(--blue-1);
	color: #fff;
}

/* sets aspect ratio */
/*#solutions-section-grid > div::before {
  content: "";
  padding-bottom: 36.5%;
  display: inline-block;
  vertical-align: top;
}*/

/*
 * Reviews Section
 */

#reviews-section-grid > div {
	display: grid;
	grid-gap: 1rem;
	margin-bottom: 2rem;
	padding: 1rem;
}

#reviews-section-grid > div:first-child {
	background-color: #f5f5f5;
}

#reviews-section-grid > div:first-child > div {
	padding: 1rem;
	background-color: #fafafa;
	border: 1px solid #e5e5e5;
}

#reviews-section-grid > div div:first-child {
	font-size: 1rem;
}

#reviews-section-grid > div div:last-child {
	font-style: italic;
}

#reviews-section-grid > div div:last-child img {
	margin-right: 1rem;
}

#reviews-section #reviews-section-seals {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: auto;
	grid-template-rows: min-content auto;
	background: none;
}

#reviews-section a.btn {
	font-style: normal;
}

#reviews-section a.btn, #reviews-section-seals div:last-child {
	margin-left: 10%;
}


/* **************************************************
END INDEX Styles
**************************************************** */

/* ***************************************************
CLOUD VPS page styles
***************************************************** */
#cloud-vps-hero-cards {
	display: grid;
	grid-template-areas: "a d g"
						 "b e h"
						 "c f i";
  grid-template-columns: repeat(3, 363.33px);
	grid-template-rows: auto auto auto;
	grid-column-gap: 2rem;
	padding-top: 3rem;
	justify-items: center;
}

#cloud-vps-hero-cards #title-1  { grid-area: a; }
#cloud-vps-hero-cards #body-1   { grid-area: b; }
#cloud-vps-hero-cards #footer-1 { grid-area: c; }
#cloud-vps-hero-cards #title-2  { grid-area: d; }
#cloud-vps-hero-cards #body-2   { grid-area: e; }
#cloud-vps-hero-cards #footer-2 { grid-area: f; }
#cloud-vps-hero-cards #title-3  { grid-area: g; }
#cloud-vps-hero-cards #body-3   { grid-area: h; }
#cloud-vps-hero-cards #footer-3 { grid-area: i; }


#cloud-vps-hero-cards > div {
	display: grid;
	/*width: calc(363.33px - 4rem);*/
  width: 100%;
	background: var(--gray-4);
	padding: 1rem 2rem;
	text-align: center;
}

#cloud-vps-hero-cards #title-1,
#cloud-vps-hero-cards #title-2,
#cloud-vps-hero-cards #title-3 {
	height: 100%;
	padding-top: 2rem;
	background-color: var(--gray-4);
	border-top: 20px solid #06425a;
	border-top-color: #aaa;
	align-self: center;
	color: #333;
}

#cloud-vps-hero-cards #body-1,
#cloud-vps-hero-cards #body-2,
#cloud-vps-hero-cards #body-3 {
	padding-top: 0;
	font-size: 0.85rem;
}

#cloud-vps-hero-cards h3 {
	align-self: center;
	font-size: 1.33rem;
	text-align: center;
}

#cloud-vps-hero-cards a.btn {
	display: inline-block;
	background: var(--blue-2);
	min-width: 50%;
	padding: 0.5rem 1.5rem;
	border: 1px solid var(--blue-2);
	color: #efefef;
	font-family: 'Open Sans';
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
}
#cloud-vps-hero-cards a.btn:hover {
	background-color: var(--blue-1);
}
/*
 * HA Section Grid
 */

#ha-section-grid {
	display: grid;
	grid-row-gap: 0;
}

#ha-section-grid .right-col img {
	width: 75%;
	margin-bottom: 2rem;
}

/*
 * Custom Cloud Section
 */

#custom-cloud-section-grid {
	display: grid;
	grid-row-gap: 0;
}

#custom-cloud-section-grid .right-col img {
	margin-bottom: 2rem;
}
#custom-cloud-section-grid .right-col .btn-lg {
	background: var(--orange-1);
}
#custom-cloud-section-grid .right-col .btn-lg:hover {
	background: var(--orange-1-dark);
}

/*
 * Support Section
 */

#support-section-grid {
	display: grid;
	grid-row-gap: 0;
}
#support-section-grid > div { display: grid; }
#support-section-grid .body { width: 75ch; }
#support-section-grid a.btn-lg {
	width: 50%;
	justify-self: center;
	background-color: var(--blue-1);
}
#support-section-grid a.btn-lg:hover {
	background-color: var(--blue-1-dark);
}
#support-section-grid a.btn-lg img {
	max-width: 2rem;
	max-height: 2rem;
	width: auto;
}
#support-section #support-features-title {
	margin-top: 2rem;
	/*height: min-content;*/
}
#support-features-title h4 { padding-bottom: 0; }
#support-section #support-features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2rem;
	margin-top: 1rem;
}
#support-section-grid h4, #support-section-grid h5 {
	color: var(--blue-1);
}
#support-features-grid > div {
	display: grid;
	grid-template-columns: 3rem auto;
	grid-column-gap: 0rem;
	align-items: center;
	font-size: 1.07rem;
}
#support-features-grid > div > img {
	max-width: 3rem;
	max-height: 3rem;
	width: auto;
}
#support-features-grid > div > div:last-child {
	justify-self: start;
	padding-left: 1.5rem;
	text-align: left;
}
#support-section #support-section-cta {
	margin-top: 2rem;
}
#support-section-cta a.btn-lg { width: 33%; }

/*
 * Standard Features Section
*/
#standard-features-section-grid {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 3rem 0;
}
#standard-features-section-grid .title {
	text-align: center;
	margin-bottom: 2rem;
}
#standard-features-section-grid h4 {
	color: var(--blue-1);
}
#standard-features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2rem;
}
#standard-features-grid > div {
	display: grid;
	grid-template-columns: 3rem auto;
	align-items: start;
	gap: 0 1rem;
}
#standard-features-grid .feature-icon img {
	max-width: 3rem;
	max-height: 3rem;
	width: auto;
}
#standard-features-grid .feature-content {
	display: flex;
	flex-direction: column;
}
#standard-features-grid .feature-title {
	font-size: 1.07rem;
	font-weight: 600;
	color: var(--gray-2);
}
#standard-features-grid .feature-desc {
	font-size: 0.9rem;
	color: var(--gray-6);
	margin-top: 0.25rem;
}
@media (max-width: 900px) {
	#standard-features-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	#standard-features-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Pricing Section
*/
#pricing-section-grid {
	grid-template-areas: "a"
						 "b"
						 "c";
	grid-template-columns: auto;
	grid-template-rows: auto;
}
#pricing-section-cta {
	display: grid;
	width: 100%;
	grid-template-areas: ". a .";
	grid-template-columns: 33% 34% 33%;
	grid-template-rows: auto;
}
#pricing-section-cta a.btn-lg {
	grid-area: a;
	width: 100%;
	background: var(--orange-1);
}
#pricing-section-cta+a {
  margin-top: 2rem;
}
#pricing-table {
	border-collapse: collapse;
	border: none;
}
#pricing-table tr {
	border: none;
}
#pricing-table th, #pricing-table td {
	padding: 0.75rem 1.5rem;
	border: none;
	white-space: nowrap;
  text-align: center;
}
#pricing-table th {
	font-size: 1rem;
	font-weight: bold;
	white-space: nowrap;
}
#pricing-table tr td:first-child {
	padding-right: 1rem;
	font-weight: bold;
	text-align: right;
}
#pricing-table .empty {
	background: none !important;
	background-color: transparent !important;
}
/* remove borders from empty top-left table cells */
#pricing-table tr:first-child th:first-child {
	border-top: none;
	border-left: none;
	border-bottom: none;
}
#pricing-table tr:nth-child(2) th:first-child {
	border-top: none;
	border-left: none;
	border-right: none;
}
#pricing-table tr:nth-child(2) th:nth-child(2) {
	border-top: none;
	border-left: none;
}
/* row background colors */
#pricing-table tr:nth-child(odd) {
	background: rgba(0,0,0, 0.07);
}
#pricing-table tr:nth-child(even) td:first-child {
	background: #f8f8f8;
}
#pricing-table tr:first-child, #pricing-table tr:nth-child(2) {
	background: inherit;
}
/* colgroups */
#pricing-table .unit-col {
	background: #e5e5e5;
	border-left: 3px solid var(--pricing-table-clear-borders);
}
#pricing-table .hour-col {
	background: #c0e9df;
	border-left: 3px solid var(--pricing-table-clear-borders);
	border-collapse: separate;
}
#pricing-table .hour-avg-col {
	background: #c0e9df;
	border-right: 3px solid var(--pricing-table-clear-borders);
	border-collapse: separate;
}
#pricing-table .mo1-col  {
	background: #d5dffd;
	background: rgba(206, 219, 255, 0.75);
}
#pricing-table .mo3-col  {
	background: #cedbff;
	background: rgba(206, 219, 255, 0.50);
}
#pricing-table .mo6-col  {
	background: #d5dffd;
	background: rgba(206, 219, 255, 0.75);
}
#pricing-table .mo12-col {
	background: #cedbff;
	background: rgba(206, 219, 255, 0.50);
}
#pricing-table .post-paid-tag {
	background: #a7cdc4;
	border-collapse: separate;
}
#pricing-table .pre-paid-tag  {
	background: #b5c5f7;
	border-collapse: separate;
}
/* rows */
#pricing-table #ssd-row {
	border-top: 3px solid var(--pricing-table-clear-borders);
}
#pricing-table #bak-row {
	border-bottom: 3px solid var(--pricing-table-clear-borders);
}
#pricing-table #bw-row {
	border-top: 3px solid var(--pricing-table-clear-borders);
	border-bottom: 3px solid var(--pricing-table-clear-borders);
}
#pricing-table .bandwidth {
	background: #d5dbf1;
}
#pricing-table tr:nth-child(2) th:nth-child(3), #pricing-table td:nth-child(3) {
	padding-right: 0.5rem;
}
#pricing-table tr:nth-child(2) th:nth-child(4), #pricing-table td:nth-child(4) {
	padding-left: 0.5rem;
}
#pricing-table .hour-avg-col td {
	padding-left: 0.5rem;
}

/*
 * FAQ section
 */

#faq-section-grid {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto auto;
	grid-row-gap: 1rem;
}

#faq-section-grid div.questions div {
	display: block;
	width: calc(100% - 1.5rem);
	margin-bottom: 1rem;
	padding: 0.75rem;
	background: #fff;
	border: 1px solid #d9d9d9;
}

#faq-section-grid .title {
	background: transparent;
	border: none;
}

#faq-section-grid .title {
}
/*
 * Default Section Grid
 */

.std-grid {
	display: grid;
	grid-template-areas: "a c"
						 "b c";
	grid-template-columns: calc(60% - 2rem) calc(40% - 2rem);
	grid-template-rows: min-content 1fr;
	grid-column-gap: 4rem;
}

.std-grid div { display: grid; }
.std-grid div.jlc-cover {display: block;}
.std-grid div:last-child a {
	place-self: start;
}

.std-grid img {
	width: 75%;
}

.std-grid .title {
	grid-area: a;
	grid-template-rows: min-content min-content;
}

.std-grid .body {
	grid-area: b;
}

.std-grid .right-col {
	grid-area: c;
	grid-template-rows: auto 1fr;
  grid-row-gap: 2rem;
}
.std-grid .cta {
	background-color: inherit;
	margin-top: 0;
	grid-template-columns: auto;
}
/*
MONTHLY CLOUD VPS / HOURLY CLOUD VPS / DRAAS CLOUD VPS common parts
*/

#hero-section.monthly-cloud-vps,
#hero-section.hourly-cloud-vps,
#hero-section.draas-cloud-vps,
#hero-section.app-hosting-calc  {
  padding-bottom: 0;
}
#hero-section.monthly-cloud-vps .hero-content,
#hero-section.hourly-cloud-vps .hero-content,
#hero-section.draas-cloud-vps .hero-content {
  /*display: grid;
  grid-template-columns: auto 30%;
  grid-column-gap: 2rem;*/
}

#hero-section.monthly-cloud-vps #hero-cta,
#hero-section.hourly-cloud-vps #hero-cta,
#hero-section.draas-cloud-vps #hero-cta,
#hero-section.app-hosting-trial-signup #hero-cta {
	display: grid;
	grid-template-columns: calc(50% - 2rem) calc(50% - 2rem);
	grid-column-gap: 4rem;
	padding: 2rem;
	background-color: #151515;
	border-radius: 10px 10px 0 0;
}

.monthly-cloud-vps .cta,
.hourly-cloud-vps .cta,
.draas-cloud-vps .cta {
	display: block;
	background: none;
	margin-top: 0;
}
.monthly-cloud-vps .footnote ,
.hourly-cloud-vps .footnote ,
.draas-cloud-vps .footnote  {
	margin-top: .75rem;
}
.monthly-cloud-vps .footnote a ,
.hourly-cloud-vps .footnote a ,
.draas-cloud-vps .footnote a {
	font-size: 0.85rem;
	color: var(--blue-1);
}
.footnote a:hover {
	color: var(--blue-2);
}
#hero-section.monthly-cloud-vps #hero-cta .plan-card,
#hero-section.hourly-cloud-vps #hero-cta .plan-card,
#hero-section.draas-cloud-vps #hero-cta .plan-card {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

#hero-section.monthly-cloud-vps #hero-cta .promo,
#hero-section.hourly-cloud-vps #hero-cta .promo,
#hero-section.draas-cloud-vps #hero-cta .promo {
  color: var(--gray-6);
  display: grid;
  font-size: 1.25rem;
  text-align: center;
  place-content: center;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

#hero-section.monthly-cloud-vps #hero-cta .promo strong,
#hero-section.hourly-cloud-vps #hero-cta .promo strong,
#hero-section.draas-cloud-vps #hero-cta .promo strong {
  margin-top: 1rem;
  color: #f5f5f5;
}

#hero-section.monthly-cloud-vps #hero-cta .cta,
#hero-section.hourly-cloud-vps #hero-cta .cta,
#hero-section.draas-cloud-vps #hero-cta .cta {
  text-align: center;
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

#hero-section.monthly-cloud-vps #hero-cta div:first-child,
#hero-section.hourly-cloud-vps #hero-cta div:first-child,
#hero-section.draas-cloud-vps #hero-cta div:first-child {
	font-size: 1.15rem;
	line-height: 2.25rem;
	font-weight: 200;
	text-align: center;
	color: var(--gray-6);
	/*border: 1px dashed #555;*/
}
#hero-section.monthly-cloud-vps  #hero-cta .footnote a,
#hero-section.hourly-cloud-vps  #hero-cta .footnote a,
#hero-section.draas-cloud-vps  #hero-cta .footnote a {
	font-size: 0.85rem;
}

#hero-section.monthly-cloud-vps  #hero-cta span,
#hero-section.hourly-cloud-vps  #hero-cta span,
#hero-section.draas-cloud-vps  #hero-cta span {
		font-weight: 700;
		letter-spacing: 0.10rem;
}

#hero-section.monthly-cloud-vps .plan-card h3,
#hero-section.hourly-cloud-vps .plan-card h3,
#hero-section.draas-cloud-vps .plan-card h3 {
  color: var(--gray-5);
}

#hero-section.monthly-cloud-vps .plan-card div,
#hero-section.hourly-cloud-vps .plan-card div,
#hero-section.draas-cloud-vps .plan-card div {
  color: var(--gray-6);
  font-size: 1.25rem;
  padding: .5rem 1rem;
  border-bottom: 1px solid #252525;
}

#hero-section.monthly-cloud-vps .plan-card div:last-child,
#hero-section.hourly-cloud-vps .plan-card div:last-child,
#hero-section.draas-cloud-vps .plan-card div:last-child {
  border-bottom: none;
}

#hero-section.monthly-cloud-vps .plan-card .price,
#hero-section.hourly-cloud-vps .plan-card .price,
#hero-section.draas-cloud-vps .plan-card .price {
  color: var(--green-4);
}
/* Cloud Features Grid */
div#features-section-grid
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1rem;
}
div#features-section-grid > div
{
	display: grid;
	grid-template-rows: auto 1fr;
	padding: 1rem;
	background-color: var(--gray-4);
}
div#features-section-grid > div > div
{
	padding: 1rem;
	background-color: var(--gray-5);
	border: 1px solid var(--gray-3);
}
div#features-section-grid > div > div:first-child
{
	padding-top: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: none;
	font-weight: 600;
}
div#features-section-grid > div > div:nth-child(2)
{
	padding-top: 0.5rem;
	padding-bottom: 1rem;
	border-top: none;
}
div#features-section-cta
{
	display: grid;
	margin-top: 2rem;
	justify-items: center;
}
div#features-section-cta a.btn-lg
{
	width: 33%;
	margin: 0 auto;
}
#features h2 {
  color: var(--gray-1);
}
#pricing-section #pricing-section-cta {
  margin-top: 2rem;
}

.monthly-cloud-vps#features,
.hourly-cloud-vps#features,
.draas-cloud-vps#features {
	display: block;
}

/*
 * Windows RDP Plans
 */
 /* plans card */
#rdp-plans #plans-grid {
	display: grid;
	grid-template-columns: repeat(3, calc(33.3333% - 1.3333rem));
	grid-column-gap: 2rem;
}
#rdp-plans #plans-grid > div {
	background-color: #ffffff;
	border: 1px solid #999;
}
/* title */
#rdp-plans #plans-grid > div > .card-title {
	padding-top: 1rem;
	padding-bottom: 1rem;
	background-color: var(--blue-2);
}
#rdp-plans #plans-grid > div > .card-title h3 {
	text-align: center;
	margin: 0;
	padding: 0;
	font-size: 2rem;
	line-height: 2rem;
	color: #ffffff;
}
/* body paragraphs */
#rdp-plans #plans-grid > div > div > p {
	margin: 0;
	padding: 0.5rem 1rem;
	background-color: #fafafa;
	text-align: center;
}
#rdp-plans #plans-grid > div > div > p:nth-child(even) {
	background-color: #e5e5e5;
}
/* card footer */
#rdp-plans #plans-grid > div > .card-footer {
	display: grid;
	padding-top: 1rem;
	grid-row-gap: 0.5rem;
	background-color: #fafafa;
}
#rdp-plans #plans-grid > div > .card-footer p {
	font-size: 1.5rem;
	font-weight: bold;
}
#rdp-plans #plans-grid > div > .card-footer a.btn {
	width: 50%;
	justify-self: center;
	padding-top: 1rem;
	padding-bottom: 1rem;
	margin-bottom: 2rem;
	font-size: 1rem;
	text-align: center;
	line-height: 1rem;
	text-transform: uppercase;
}

/*
CLOUD Calculator
*/
/* Set all custom divs to grid */
	#billing-type, #billing-type div,
	#calculators, #calculators div	{
		width: 100%;
		/* reset grid */
		display: grid; grid-template-areas: none; grid-column: auto; grid-row: auto; grid-gap: 0;
	}
  #hero-section.cloud-calc h1 {
    padding-bottom: 0;
  }
	#calc-section #calculators .cta {
		grid-template-columns: 1fr;
	}
	/*
	 * Billing type section buttons
	 */
	#billing-type {}
	#billing-type > div {
		grid-template-columns: auto auto;
		grid-column-gap: 1rem;
		padding: 1rem;
		background: var(--gray-4);
	}
	#billing-type #monthly,
	#billing-type #hourly {
		grid-template-columns: auto 1fr;
		background: var(--gray-5);
	}
	/* both card columns */
	#billing-type #monthly > div:first-child,
	#billing-type #hourly > div:first-child,
	#billing-type #monthly > div:last-child,
	#billing-type #hourly > div:last-child {
		padding: 2rem;
		border: 1px solid var(--gray-7);
		border-collapse: collapse;
	}
	/* card left col */
	#billing-type #monthly > div:first-child,
	#billing-type #hourly > div:first-child {
		width: fit-content;
	}
	/* card right col */
	#billing-type #monthly > div:last-child,
	#billing-type #hourly > div:last-child	{
		border-left: none;
	}
	/* learn more links */
	#billing-type > div > div a {
		font-size: 0.75rem;
	}
	/* billing select button */
	#billing-type > div > div a.billing-selector	{
		width: 20ch;
		height: fit-content;
		margin-top: 1.5rem;
		padding: 0.75rem;
		background: #fafafa;;
		border: 1px solid var(--gray-3);
		justify-content: center;
		text-align: center;
		font-size: 0.75rem;
		color: #aaa;
		cursor: pointer;
	}
	/* active card's title and button text */
	#billing-type #monthly.active > div:first-child,
	#billing-type #hourly.active > div:first-child,
	#billing-type #monthly.active a.billing-selector,
	#billing-type #hourly.active a.billing-selector	{
		color: var(--blue-1);
	}
	/* active card's button */
	#billing-type #monthly.active a.billing-selector,
	#billing-type #hourly.active a.billing-selector	{
		border-color: #b5b5b5;
	}
	/* inactive card's left col */
	#billing-type #monthly > div:first-child,
	#billing-type #hourly > div:first-child {
		background-color: #f0f0f0;
		color: #858585;
	}
	/* active card's left col */
	#billing-type #monthly.active > div:first-child,
	#billing-type #hourly.active > div:first-child {
		border: 1px solid #b5b5b5;
		border-collapse: collapse;
		background: #e9eef5;
	}
	/*
	 * Calculators
	 */
	div#calculators	{
		/* div added for specificity */
		padding-top: 2rem;
	}
	div#calculators > div	{
		grid-template-areas: "a a"
							 "b c";
		grid-template-columns: 60% calc(40% - 2rem);
		grid-template-rows: auto;
		grid-column-gap: 2rem;
	}
	div#calculators > div h4	{
		grid-area: a;
	}
	div#calculators > div .calc	{
		grid-area: b;
	}
	div#calculators > div .price	{
		grid-area: c;
		grid-template-rows: 2.25rem min-content min-content;
		align-items: start;
	}
	div#calculators > div .cta	{
	}
	div#calculators .calc section	{
		display: grid;
		grid-template-columns: auto 1fr 4rem auto;
		grid-column-gap: 0;
		grid-row-gap: 0;
		margin-bottom: 2rem;
		padding: 1rem;
		background: var(--gray-4);
	}
	div#calculators .calc section > div	{
		background: var(--gray-5);
		padding: 1rem;
		font-size: 1.10rem;
	}
	div#calculators .calc section > div	{
		border-color: var(--gray-3);
		border-style: solid;
		border-width: 0;
	}

	div#calculators .calc section div.top	{
		border-top-width: 1px;
	}
	div#calculators .calc section div.bottom	{
		border-bottom-width: 1px;
	}
	div#calculators .calc section div.first	{
		border-left-width: 1px;
	}
	div#calculators .calc section div.last	{
		border-right-width: 1px;
	}
	div#calculators .calc section .qty	{
		padding-right: 0.25rem;
	}
	div#calculators .calc section .unit	{
		padding-left: 0.25rem;
	}
  /* TODO: Slider sections need to be converted away from jquery structure*/
	div#calculators .calc .slider	{
		width: 100%;
		align-self: center;
	}
	div#calculators .calc .ui-slider-horizontal	{
		height: 1rem;
	}
	div#calculators .calc .ui-slider-range	{
		background: var(--blue-2);
	}
	div#calculators .calc .ui-state-active	{
		background: var()
	}
	.calc .ui-slider-handle	{
		width: 1rem;
		height: 1.75rem;
		top: -0.5rem;
		margin-left: -0.5rem;
	}
	/* Storage section */
	div#calculators .calc section.storage-section	{
		grid-template-columns: 25ch 1fr 4rem auto;
	}
	div#calculators .calc section.storage-section div	{
		align-content: center;
	}
	div#calculators .calc section.storage-section select	{
		background-color: #fafafa;
		border-color: var(--gray-3);
		color: var(--blue-1);
	}
	/* Pricing Styles*/

	#calculators > div .price > div	{
		padding: 1rem;
		background: #d0dfef;
	}
	#calculators > div .price > div > div	{
		grid-row-gap: 1rem;
		padding: 0; /* reset */
		padding-top: 1rem;
		padding-bottom: 1rem;
		background: var(--gray-4);
	}
	#calculators > div .price > div > div:first-child,
	#calculators > div .price > div > div div	{
		padding-left: 1rem;
	}
	#calculators > div .price > div > div:last-child	{
		padding-right: 1rem;
	}
	#calculators > div .price > div > div:first-child div	{
		padding-left: 0; /* removes double left padding from the first div */
	}
	#calculators > div #m-price-total-wrapper,
	#calculators > div #h-price-total-wrapper	{
		grid-template-areas: "a a a"
							 "b c d";
		grid-template-columns: repeat(3, 1fr);
	}
	#calculators > div #m-price-total-wrapper > div > div,
	#calculators > div #h-price-total-wrapper > div > div	{
		background: var(--gray-2);
		padding-top: 0;
		padding-bottom: 0;
		font-size: 1.07rem;
	}
	#calculators > div #m-price-text,
	#calculators > div #h-price-text	{
		grid-area: a;
		grid-template-columns: auto 1fr;
		grid-column-gap: 2rem;
		padding: 1rem;
		background: #fefefe;
		border-bottom: 1px solid #ddd;
	}
	#calculators > div #m-price-total-wrapper #m-price-text > div,
	#calculators > div #h-price-total-wrapper #h-price-text > div	{
		padding-top: 1rem;
		padding-bottom: 1rem;
		background: #fefefe;
		font-size: 2rem;
	}
	#calculators > div #m-price-text div:last-child,
	#calculators > div #h-price-text div:last-child	{
		color: var(--blue-1);
		font-weight: 800;
	}
	#calculators .price div#m-price-total-wrapper > div > div,
	#calculators .price div#h-price-total-wrapper > div > div	{
		background: var(--gray-4);
	}
	#calculators > div #m-price-total-wrapper > div > div span,
	#calculators > div #h-price-total-wrapper > div > div span	{
		font-size: 1.15rem;
		font-weight: 600;
		color: #777;
	}
	#calculators > div #m-price-total-wrapper > div > div:last-child,
	#calculators > div #h-price-total-wrapper > div > div:last-child	{
		font-size: 1rem;
		font-weight: 550;
	}
	#calculators > div #m-price-3-text,
	#calculators > div #h-price-28-text	{
		grid-area: b;
		border-right: 1px solid var(--gray-3);
	}
	#calculators > div #m-price-6-text,
	#calculators > div #h-price-30-text	{
		grid-area: c;
		border-right: 1px solid var(--gray-3);
	}
	#calculators > div #m-price-12-text,
	#calculators > div #h-price-31-text	{
		grid-area: d;
	}
	/* CTA */
	div#calculators > div .cta .btn-lg	{
		width: 100%;
		background: var(--blue-2);
	}
	.footnote	{
		font-size: 0.75rem;
	}
  .hidden { display: none !important; }

/* OS Template Library */
#hero-section.os-template-library+section {
  padding-bottom: 0;
}
#templates-container {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-gap: 2rem;
}
#templates-container > div {
  display: grid;
  grid-template-columns: auto;
  height: fit-content;
}
#templates-container > div > * {
  height: min-content;
}
/* Cloud Addons */
#featured-addons #featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 2rem;
}
#cloud-addons table {
	width: 100%;
	margin-bottom: 30px;
	border: 1px solid;
	border-collapse: collapse;
	cursor: default;
}
#cloud-addons tr {
	-webkit-transition: background-color 0.2s ease;
	transition: background-color 0.2s ease;
	border-bottom: 1px solid;
}
#cloud-addons th:last-child {
	border: none;
}
#cloud-addons td,
#cloud-addons th {
	padding: 10px 20px 10px 20px;
	line-height: 1.5;
	border-right: 1px solid;
	text-align: center;
}
#cloud-addons thead {
  background-color: var(--blue-2);
}
#cloud-addons th {
  color: #fff;
}
#cloud-addons table, #cloud-addons tr, #cloud-addons td {
  border-color: var(--gray-3);
}
/* LITESPEED */
section.litespeed p {
  max-width: 70ch;
}
/* CPANEL-WHM */
#details.cpanel-whm {
  display: grid;
  grid-template-columns: repeat(2, calc(50% - 1rem));
}
#details.cpanel-whm  img {
  width: calc(50% - 1rem);
  height: auto;
}
#pricing.cpanel-whm table,
#pricing.ssl-certificates table,
table.basic-price-table {
  width: 100%;
  margin-bottom: 30px;
  border: 1px solid var(--gray-3);
  border-collapse: collapse;
}
#pricing.cpanel-whm th,
#pricing.ssl-certificates th,
table.basic-price-table th {
  padding: 10px 20px;
  line-height: 1.5;
	background-color: var(--blue-4);
	color: #fff;
}
#pricing.cpanel-whm th:empty,
#pricing.ssl-certificates th:empty,
table.basic-price-table th:empty {
	background: none;
	background-color: transparent;
}

#pricing.cpanel-whm td,
#pricing.ssl-certificates td,
table.basic-price-table td {
  padding: 10px 20px;
  line-height: 1.5;
  border-right: 1px solid var(--gray-3);
  border-top: 1px solid var(--gray-3);
  text-align: center;
  color: var(--gray-1);
}
section.cpanel-whm-feature-list,
section.cloudlinux-feature-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1.5rem;
}
section.cpanel-whm-feature-list h2,
section.cloudlinux-feature-list h2 {
  grid-column: 1 / 4;
}
section.cpanel-whm-feature-list > div,
section.cloudlinux-feature.list > div {
  display: grid;
  grid-template-columns: 64px auto;
  grid-column-gap: 2rem;
  margin-top: 2rem;
}
section.cpanel-whm-feature-list img,
section.cloudlinux-whm-feature-list img {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
section.cpanel-whm-feature-list h5,
section.cloudlinux-feature-list h5 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  font-size: 2.5rem;
  line-height: 2.5rem;
}
section.cpanel-whm-feature-list p,
section.cloudlinux-whm-feature-list p {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
/* IMUNIFY360 */
.grid2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 2rem;
  grid-row-gap: 0;
}
.grid2col h2 {
  grid-column: 1 / 3;
  grid-row:  1 / 2;
}
.grid2col p {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.grid2col img {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  max-width: calc(100% - 1rem);
  height: auto;
}
.grid2col.l-img p {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.grid2col.l-img img {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

/* LiteSpeed */
#litespeed-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem
}

#litespeed-features h2 {
    grid-column: 1 / 3;
    grid-row: 1 / 2
}

#litespeed-pricing table {
    padding: 2rem;
    font-size: 1.15rem;
}

#litespeed-pricing table td {
    padding: 1rem;
}
#litespeed-pricing table td:first-child {
    padding-right: 2rem;
}

#litespeed-pricing #definitions {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(2, 1fr);
}

/* KERNEL CARE */
#hero-section.kernel-care h1 img {
  max-width: 90%;
}
#kernel-care-features h5 { display: inline-block; }

/* CLOUDLINUX */
#cloudlinux-features-list > div {
  display: grid;
  grid-template-columns: 64px auto;
  grid-column-gap: 1.25rem;
}
#cloudlinux-features-list h5 {
  font-size: 1.5rem;
  line-height: 1.5rem;
  align-self: center;
}
#cloudlinux-features-list p {
  grid-column: 1 / 3;
}
/* Addons Pricing Buttons */
#cloudlinux-pricing a.btn,
#pricing.cpanel-whm a.btn,
#litespeed-pricing a.btn,
#domain-pricing a.btn,
#ssl-pricing a.btn,
#kernel-care-pricing a.btn,
#imunifyav-pricing a.btn,
#imunify360-pricing a.btn {
	width: 33%;
}


/* APP HOSTING */
@import url('/wp-content/themes/tb/css/tbox-custom-wp.css');
.bold {
	font-weight: bold;
}

.footnote {
	font-size: 0.75em;
	margin-right: 2rem;
}

.jlc-wrapper {
	max-width: 400px;
}

.jlc-wrapper .jlc-cover button.jlc-btn {
	border-radius: 0;
	font-weight: 700;
}

.jlc-wrapper.bg-color-2 .jlc-cover .jlc-btn {
	background-color: #ff5123;
}

button.jlc-btn {
	width: 100%;
	font-size: 0.75rem !important;
}

#hero-section.app-hosting {
	padding-bottom: 0;
}
/*
 * Headings
 */
h1, h2 {
	margin-bottom: 0;
	font-size: 48pt;
	font-weight: 600;
	color: #444;
}
h2 {
	font-size: 36pt;
}

h3 {
	font-family: "Hind Light";
	font-size: 2em;
	font-weight: 100;
	color: #7b7b7b;
	color: #0473a9;
	margin-top: 2rem;
}

.color1 {
	color: #0473a9;
}
/*
 * Common Section styles
 */
.grve-section {
	padding-top: 4rem;
	padding-bottom: 4rem;
}
.grve-container {
	padding-top: 0;
}
.features-section,
.cloudlet-section,
#clusterization-section,
.billing-section,
.faq-section {
	/*padding-top: 4rem;
	padding-bottom: 4rem;*/
}

/*
 * Hero Section
 */
.grids-bg {
	background-color: #005b80;
	background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:a='http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/' x='0px' y='0px' width='66px' height='100.5px' viewBox='0 0 66 100.5' style='overflow:scroll;enable-background:new 0 0 66 100.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23006187;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cpolygon class='st0' points='66,37.1 66,1.1 34,13.1 34,49.1 '/%3E%3Cpolygon class='st0' points='34,87.3 66,99.3 66,63.3 34,51.3 '/%3E%3Cpolygon class='st0' points='32.9,13.1 0.9,1.1 0.9,37.1 32.9,49.1 '/%3E%3Cpolygon class='st0' points='32.9,51.3 0.9,63.3 0.9,99.3 32.9,87.3 '/%3E%3Cpolygon class='st0' points='0.4,37.9 0.4,37.9 0.4,37.9 0.4,37.9 0,38.1 0,62.1 0.4,62.3 0.4,62.3 0.4,62.3 0.4,62.3 0.4,62.3 32.9,50.1 0.4,37.9 '/%3E%3Cpolygon class='st0' points='66,100.5 66,100.5 33.5,88.3 33.5,88.3 33.5,88.3 33.5,88.3 33.5,88.3 1,100.5 1.1,100.5 65.9,100.5 '/%3E%3Cpolygon class='st0' points='66,0 1.1,0 33.5,12.2 33.5,12.2 33.5,12.2 33.5,12.2 33.5,12.2 66,0 '/%3E%3Cpolygon class='st0' points='66,62.1 66,38.1 34,50.1 '/%3E%3C/svg%3E");
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	color: #ececec;
}
.grids-bg h1 {
	margin-top: 60px;
	color: #fff
}

.grids-bg h3 {
	color: #eaeaea;
	color: #001a27;
	color: #f5f5f5;
}

.grids-bg p {
	margin: 2rem 0;
}

.grve-row:first-child {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/*
 * Common Grid Templates
 */
.grid-2x1 {
	display: grid;
	grid-template-columns: 50% calc(50% - 1rem);
	grid-gap: 1rem;
}

.grid-3x1 {
	display: grid;
	grid-template-columns: auto auto auto;
	grid-gap: 1rem;
}

.grid-5x1 {
	display: grid;
	grid-template-columns: repeat(5, auto);
	width: 100%;
}

.grid-5x1 img {
	max-height: 48px;
	max-width: 48px;
}

/*
 * Common grid styles
 */

.gap15px {
	grid-gap: 15px;
}

.gap30px {
	grid-gap: 30px;
}

.margin-top-30px {
	margin-top: 30px;
}

.align-items-center {
	align-items: center;
}

.justify-content-center {
	justify-content: center;
}

.bg-white {
	background-color: #fff;
}

.bg-color-1 {
	background-color: #f0f0f0;
	background-color: #e5e5e5;
}

.bg-color-3 {
	background-color: #29a7e6;
}

.bg-color-4 {
	background-color: #006187;
}

img.center {
	display: block;
	margin: 0 auto;
}

/*
 * Sections defaults
 */
.billing-section, .calculator-section, .faq-section, .cloudlet-section {
	/*padding-top: 60px;*/
}

.calculator-section h2 {
	color: #ffffff;
}

/*
 * Features section
 */
.features-section {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: auto auto auto;
	grid-template-rows: auto auto;
}
h3.hero-section {
	margin-top: 0;
}

.features-section h5 {
	color: #0473a9;
	font-weight: 600;
}

/*
 * CTAs
 */
#hero-cta-wrapper,
.cta,
.cloudlet-section .cta {
 padding: 2rem;
}
#hero-cta-wrapper {
	display: grid;
	grid-template-columns: auto auto auto;
	grid-gap: 1rem;
	margin-top: 2rem;
	background-color: #151515;
	border-radius: 10px 10px 0 0;
}
#hero-cta-wrapper > div {
	display: grid;
	width: 100%;
}
#hero-cta-wrapper > div > div {
	width: 100%;
}
#hero-cta-wrapper .jlc-cover {
	background: transparent;
}
#hero-cta-wrapper .jlc-cover .jlc-btn {
	background-color: var(--orange-1);
}

.jlc-wrapper.tbox-blue .jlc-cover .jlc-btn {
	background-color: #29a7e6;
}

#hero-cta-wrapper p span.heading {
	display: inline-block;
	font-weight: bold;
	padding: 5px 0;
}

#hero-cta-wrapper p a {
	color: var(--blue-1);
}

.cta,
.cloudlet-section .cta {
	display: grid;
	grid-template-columns:  auto auto;
	grid-gap: 1rem;
	width: 100%;
	margin-top: 4rem;
	background-color: #444;
	color: #ffffff;
	align-items: center;
}

#benefits .cta {
	background-color: inherit;
}

.cta.color-2 {
	background: var(--blue-1);
}

.cta.color-2 .jlc-wrapper.color-2 button.jlc-btn {
	background: var(--orange-1);
}

#content .cta .headline {
	font-family: Hind;
	font-size: 1.2em;
	padding: 2rem;
	color: #fff;
	/*text-shadow: 1px 1px #666;*/
}

.cta input {
	background-color: #ececec;
	color: #555555;
}

.cta input[type='text'] {
	background-color: #dbf3ff;
	color: #555555;
}

.cta input[type='submit'] {
	background: #0473a9;
	color: #ffffff;
}

#content .cta-tail {
	padding-right: 1rem;
	background-color: #0473a9;
	color: #ffffff;
	text-align: right;
	font-size: 0.685em;
	font-weight: 200;
}

#content .cta-tail.color-2 {
	background-color: var(--blue-1);
}

.icon-list img {
	margin-right: 10px;
	margin-bottom: 2rem;
}

.icon-list img:last-child {
	margin-right: 0;
}

/*
 * Cloudlet section
 */

.cloudlet-section div {
	padding-left: 0px;
}

.cloudlet-grid:first-child {
	padding-left: 0;
}

.cloudlet-grid {
	display: grid;
	grid-template-columns: 50% calc(50% - 1rem);
	grid-gap: 3rem;
}
.cloudlet-grid strong {
	padding-bottom: 0.5rem;
}
.cloudlet-grid p {
	text-align: justify;
}
.cloudlet-diagram {
}
.cloudlet-diagram img,
.pay-for-usage-diagram img {
	width: 75%;
}

.pay-for-usage-diagram {
}

/*
 * Clusterization Section
 */

#clusterization-section {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-gap: 2rem;
	padding-bottom: 0;
}

#clusterization-section div:last-child {
	display: grid;
}

#clusterization-section div:last-child div {
	width: 80%;
	justify-self: center;
}
#clusterization-section img {
	width: 75%;
}

/*
 * Prices grid
 */

#cloudlet-prices-grid {
	display: grid;
	grid-gap: 0;
	grid-template-columns: repeat(4, 1fr);
	grid-template:  "a a b b"
					"c d e f"
					"g h i j";
}

#cloudlet-prices-grid div {
	padding: 10px 20px;
	text-align: center;
	border-color: #aaa;
	border-style: solid;
}

.reserved {
	grid-area: a;
	background-color:#78ef9f;
	background-color: rgba(192, 233, 223, 1);
	color:#222;
	border-width: 1px 1px 0 1px;
}
.dynamic {
	grid-area: b;
	background:#78baef;
	color:#222;
	border-width: 1px 1px 0 0;
}
.rh {
	grid-area: c;
}
.rm { grid-area: d; }
.dh { grid-area: e; }
.dm { grid-area: f; }
.rhv { grid-area: g; }
.rmv { grid-area: h; }
.dhv { grid-area: i; }
.dmv { grid-area: j; }

.reserved, .dynamic {
	border-width:
}
#ssd-prices-grid div:nth-child(even),
#ips-prices-grid div:nth-child(even),
#bandwidth-prices-grid div:nth-child(even) {
	background:#f0f0f0;
	 border-bottom-color: #ccc;
}
#ssd-prices-grid div:nth-child(odd),
#ips-prices-grid div:nth-child(odd),
#bandwidth-prices-grid div:nth-child(odd) {
	background-color: #fafafa;
}
.rh, .rhv { background-color: rgba(192, 233, 223, 0.25); }
.dh, .dhv { background-color: rgba(206, 219, 255, 0.25); }
.rm, .rmv { background-color: rgba(192, 233, 223, 0.45); }
.dm, .dmv { background-color: rgba(206, 219, 255, 0.45); }

.rh, .rhv { border-width: 0 0 0 1px; }
.rm, .rmv, .dm, .dmv { border-width: 0 1px 0 0; }
#cloudlet-prices-grid .rh, #cloudlet-prices-grid .rm, #cloudlet-prices-grid .dh, #cloudlet-prices-grid .dm, #ssd-prices-grid div:first-child, #ips-prices-grid div:first-child, #bandwidth-prices-grid div:first-child,  #ssd-prices-grid div:nth-child(2),  #ips-prices-grid div:nth-child(2),  #bandwidth-prices-grid div:nth-child(2) {
	border-bottom: 1px solid #ddd;
}

.rhv, .dhv, .rmv, .dmv { border-bottom-width: 1px; }

.foot { border-width: 1px 0 0 0; }


#cloudlet-prices-grid span {
	font-size: 0.8em;
	padding: 0 1em;
}

#other-prices-grid {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto;
	grid-gap: 1rem;
}

#ssd-prices-grid, #ips-prices-grid, #bandwidth-prices-grid {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto;
	border: 1px solid #aaa;
}

#ssd-prices-grid div, #ips-prices-grid div, #bandwidth-prices-grid div {
	padding: 7px 10px;
	text-align: center;
}

#calc-btn {
	display: grid;
	grid-template-columns: 20% auto;
	background: #ff5123;
}

#calc-btn div:first-child {
	width: 100%;
	height: 100%;
	background: #343434;
}

#calc-btn #calc-icon-wrapper {
	display: grid;
	width: 48px;
	justify-self: center;
	align-items: center;
}

#calc-btn a {
	display:inline-block;
	width: 100%;
	padding: 2rem;
	background: #ff5123;
	text-align: center;
	color:#fff;
}


div.j-calculator.loading:after {
	left: calc(50% - 300px); /* loading popup width is 400px +  200px (loader img), 300px centers popup */
	 border-radius: 0;
	 width: 400px;
	 height: 200px;
	 background-image: url('/wp-content/uploads/2021/01/Spinner-1s-200px.svg');
	 background-repeat: no-repeat;
	 background-color: rgba(0,0,0,0.67);
	 color: #fff;
	 padding: 0;
	 padding-left: 220px;
	 text-align: center;
	 animation: none;
}

/*
 * FAQ section
 */
 #faq-section-grid {
 	display: grid;
 	grid-template-columns: 100%;
 	grid-template-rows: auto auto;
 	grid-row-gap: 1rem;
 }
 #faq-section-grid div.questions div {
 	display: block;
 	width: calc(100% - 1.5rem);
 	margin-bottom: 1rem;
 	padding: 0.75rem;
 	background: #fff;
 	border: 1px solid #d9d9d9;
 }
 #faq-section-grid div.questions div:last-child {
	 margin-bottom: 0;
 }
 #faq-section-grid .title {
 	background: transparent;
 	border: none;
 }
 #faq-section-grid h5 {
	 color: var(--blue-1);
 }
/*
 * Volume Table
 */
#volume-table
{
	margin-top: 3rem;
	margin-bottom: 3rem;
	border-collapse: collapse;
	border: none;
	background-color: #ffffff;
}
#volume-table tr
{
	border: none;
}
#volume-table th, #volume-table td
{
	padding: 0.75rem 1.5rem;
	border: none;
	white-space: nowrap;
}
#volume-table thead th
{
	font-size: 1rem;
	font-weight: bold;
	white-space: nowrap;
}
#volume-table thead th:first-child {
	background-color: rgba(192, 233, 223, 1);
}
#volume-table thead th:last-child {
	background-color: rgba(206, 219, 255, 1);
}
/* volume table striping */
#volume-table tbody tr:nth-child(odd) {
	background-color: rgba(0,0,0, 0.03);
}

/* highlight a common tier and allow JS to mark active tier */
#volume-table tbody tr:nth-child(4) {
	background-color: rgba(0, 230, 100, 0.07);
}

#volume-table tbody tr.is-active-tier {
	box-shadow: inset 0 0 0 2px rgba(41, 167, 230, 0.55);
	background-color: rgba(41, 167, 230, 0.06);
}

#volume-table td {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-variant-numeric: tabular-nums;
}
#volume-table .qty {
	background-color: #f5f5f5;
}
#volume-table .res-hr {
	background-color: rgba(192, 233, 223, 0.30);
}
#volume-table .res-mo {
	background-color: rgba(192, 233, 223, 0.45);
}
#volume-table .dyn-hr {
	background-color: rgba(206, 219, 255, 0.30);
}
#volume-table .dyn-mo {
	background-color: rgba(206, 219, 255, 0.45);
}

/*
 * Java Clusters Section
 */
#java-clusters .std-grid p {
	padding-bottom:  2rem;
}
#java-clusters .std-grid ul {
	padding-bottom: 2rem;
}
#java-clusters .std-grid .right-col {
	grid-row-gap: 2rem;
}
#java-clusters .std-grid .right-col img {
	height: 20rem;
}
#java-clusters ul.apps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
div#java-app-logos {
	display: grid;
	grid-template-columns: repeat(5, auto);
	grid-column-gap: 1rem;
	margin-top: 1rem;
	margin-bottom: 1.5rem;
}
#java-app-logos img {
	height: 2.5rem;
}
#java h3 {
	font-size: 1.875rem;
}

/* Centered Right Columns */
#java-clusters .std-grid { grid-row-gap: 0; }
#java-clusters .right-col {
	display: grid;
}
#java-clusters .right-col > div {
	display: grid;
	justify-items: center;
	width: 75%;
	grid-row-gap: 2rem;
}
#java-clusters .right-col > div img,
#node-js .right-col > div img {
	width: 100%;
}
/* NodeJS */
#nodejs .right-col {
	display: grid;
	justify-items: center;
	width: 75%;
	grid-template-rows: 1fr;
}
#nodejs .right-col > div {
	display: grid;
	grid-template-rows: repeat(3, auto) 1fr;
	grid-row-gap: 2rem;
}
#nodejs .right-col .btn-lg,
#nodejs .right-col .jlc-wrapper {
	width: 100%;
	max-width: 100%;
}

/* KUBERNETES APP HOSTING */
.kubernetes-app-hosting > .std-grid {
	grid-template-columns: repeat(2, calc(50% - 1rem));
	grid-template-rows: auto 1fr auto;
	grid-row-gap: 2rem;
}
.kubernetes-app-hosting > .std-grid .title {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}
.kubernetes-app-hosting > .std-grid .body {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
.kubernetes-app-hosting > .std-grid .img {
	grid-column: 2 / 3;
	grid-row: 2 / 4;
}
.kubernetes-app-hosting > .std-grid .cta {
	display: grid;
	grid-column: 1 / 2;
	grid-row: 3 / 4;
	grid-template-columns: 1fr;
}
.kubernetes-app-hosting > .std-grid .img img {
	max-width: 80%;
}
/* What is Kubes*/
#what-is-kubes .title {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}
#what-is-kubes .body {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
#what-is-kubes .list {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}
#what-is-kubes .cta {
	grid-column: 1 / 2;
	grid-row: 3 / 4;
}
#what-is-kubes li {
	list-style-image: url(/wp-content/uploads/2021/01/li-plus-icon.svg);
	color: #333;
}
#why-containerize-section-grid .cta {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}



/* WORDPRESS APP HOSTING */
/* wp-intro section */
#wp-intro .cta {
	grid-column: 1 / 3;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 1rem;
	background-color: inherit;
}
#wp-intro .cta .jlc-wrapper,
#wp-intro .cta .btn-wrapper,
#wp-intro .cta .btn-lg {
	width: 100%;
	max-width: 100%;
}
/* wp-cluster section */
#wp-cluster .cta {
	grid-column: 1 / 3;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 1rem;
}
#wp-cluster .cta .jlc-wrapper,
#wp-cluster .cta .btn-wrapper,
#wp-cluster .cta .btn-lg {
	width: 100%;
	max-width: 100%;
}
#wp-cluster .body,
#wp-devops .body {
    grid-template-rows: auto 1fr;
}
#wp-balancer strong {
	display: block;
	margin-top: 1rem;
}
.body ul {
    margin-top: 2rem;
    margin-left: 0;
    list-style-image: url(/wp-content/uploads/2021/01/li-plus-icon.svg);
    list-style-position: inside;
}
.body h3+ul {
	margin-top: 1rem;
}


/* WORDPRESS GEO-DISTRIBUTED */
#hero-section.wp-geo .body {
	display: grid;
	grid-template-columns: calc(75ch + 2rem) auto;
	grid-column-gap: 2rem;
}
#hero-section.wp-geo .jlc-wrapper {
	margin-top: 3rem;
}
.wp-geo .cta {
	display: grid;
	grid-template-columns: auto;
	justify-content: center;
	background-color: inherit;
}
.wp-geo .cta-btn {
	display: inline-block;
	background-color: var(--blue-2);
	padding: 0 3rem !important;
	text-transform: uppercase;
	color: #fff;
	font-size: 0.8rem;
	letter-spacing: 0.15rem;
	line-height: 4rem;
}
.wp-geo .cta-btn:hover {
	background-color: var(--blue-1);
}
.wp-geo .cta-btn, .wp-geo .jlc-btn {
	width: 33%;
}
#premium-wp-section-grid {
	display: grid;
	grid-row-gap: 2rem;
}
#premium-wp .title {
	display: grid;
	grid-row-gap: 1.25rem;
}
#premium-wp .title p {
	width: 75ch;
}
#premium-wp-section-grid .body {
	display: grid;
	grid-template-columns: repeat(2, calc(50% - 1rem));
	grid-template-rows: auto 1fr;
	grid-column-gap: 2rem;
	grid-row-gap: 2rem;
}
#premium-wp-section-grid section.topology {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}
#premium-wp-section-grid section.features {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
#premium-wp-section-grid section.img {
	grid-column: 2 / 3;
	grid-row: 1 / 3;
}
#premium-wp .body section h3 {
	font-size: 2rem;
	font-weight: 600;
}
#premium-wp .body span {
	font-weight: 700;
}

#three-ways article.card {
	display: grid;
	grid-template-columns: 75ch auto;
	grid-template-rows: auto 1fr;
	grid-column-gap: 2rem;
	margin-bottom: 1.5rem;
	padding: 1.5rem;
	border-left-width: 3rem;
	border-style: solid;
	background-color: #fff;
	box-shadow: 5px 5px 10px #c9c9c9;
}
#three-ways article.card h5 {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	font-size: 1.5rem;
	font-weight: 600;
}
#three-ways article .card-body {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
#three-ways article .cta {
	grid-column: 2 / 3;
	grid-row: 1 / 3;
	display: grid;
	background-color: inherit;
}
.wp-geo #three-ways .cta,
.wp-geo #three-ways-section-grid .cta-btn,
.wp-geo #faq-section-grid .cta-btn {
	width: 100%;
}
#three-ways article.card.color1 {
	border-color: #0a8ece;
}
#three-ways article.card.color2 {
	border-color: #035a85;
}
#three-ways article.card.color3 {
	border-color: #0473a9;
}
#three-ways article.card.color1 h5 {
	color: #0a8ece;
}
#three-ways article.card.color2 h5 {
	color: #035a85;
}
#three-ways article.card.color3 h5 {
	color: #0473a9;
}
#three-ways .cta a {
	padding: 1rem 2.25rem;
	place-self: center;
	color: #fff;
}
#three-ways .color1 .cta a {
	background-color: #0a8ece;
}
#three-ways .color2 .cta a {
	background-color: #035a85;
}
#three-ways .color3 .cta a {
	background: none; /* this is a JLC button */
}
#three-ways .jlc-form a {
	color: var(--blue-1);
	padding: 0;
	place-self: initial;
}
#hero-section.wp-geo .jlc-form span {
	color: #fff;
}
#hero-section.wp-geo .jlc-form a {
	color: #fff;
	text-decoration: underline;
}

#faq .faq-card {
	display: grid;
	grid-row-gap: .8rem;
	margin-bottom: 2rem;
	padding: 1.25rem;
	background-color: #fff;
	box-shadow: 5px 5px 6px #c9c9c9;
}

.faq-card h5 {
	font-weight: 600;
	color: var(--blue-1);
}
.faq-card p {}

#how-it-works-section-grid {
	display: grid;
	grid-template-rows: auto auto 1fr;
	grid-row-gap: 2rem;
}
#how-it-works .body {
	display: grid;
	grid-template-columns: calc(75ch + 2rem) auto;
	grid-column-gap: 4rem;
}

#how-it-works .body .copy {
	grid-column: 1 / 2;
}
#how-it-works .body .img {
	grid-column: 2 / 3;
}
#how-it-works .body p {
	max-width: 75ch;
}
#how-it-works .img img {
		height: 15rem;
		opacity: 50%;
}
/* WP-GEO JLC overrides */
.wp-geo .jlc-wrapper, .wp-geo .jlc-wrapper .jlc-cover .jlc-btn {
	margin-left: 0 !important;
	margin-right: 0 !important;
	border-radius: 0 !important;
	font-size: 0.8rem !important;
	letter-spacing: 0.15rem !important;
	line-height: 4rem;
}

/* JAVA APP HOSTING */
#java .std-grid .right-col img {
    height: 20rem;
}
#java .right-col > div,
#clusterization .right-col > div {
	display: grid;
	justify-items: center;
	width: 75%;
	grid-row-gap: 2rem;
}
#java .right-col > div img,
#clusterization .right-col > div img {
	width: 100%;
}
#java .right-col > div .btn-lg,
#clusterization .right-col > div .btn-lg,
#java .right-col > div .btn-wrapper,
#clusterization .right-col > div .btn-wrapper,
#benefits .cta, #benefits .cta .btn-wrapper, #benefits .cta .jlc-wrapper {
	width: 100%;
}
#java .right-col .jlc-wrapper,
#clusterization .right-col .jlc-wrapper,
#benefits .cta, #benefits .cta .jlc-wrapper {
	max-width: initial;
}
/*
 * Java Benefits section
 */
 #benefits .cta {
 	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 1rem;
 }
 #benefits .cta .btn-wrapper,
 #benefits .cta .btn-wrapper,
 #benefits .cta .jlc-wrapper {
 	width: 100%;
 	background-color: var(--blue-2);
	margin: 0;
	justify-self: center;

 }
 #benefits .cta .btn-lg {
	 width: 100%;
 }
 #benefits .cta .btn-lg:hover {
 	background-color: var(--blue-1);
 }
 #benefits-section-grid {
 	display: grid;
 	grid-template-columns: repeat(4, calc(25% - 1.5rem));
 	grid-column-gap: 2rem;
 }

 #benefits-section-grid > div {
 		padding: 1rem;
 		background-color: #ffffff;
 		border: 1px solid var(--gray-3);
 }
 #benefits-section-grid div div:first-child {
 		padding-top: 0;
 		padding-bottom: 1rem;
 		line-height: 1.15rem;
 		font-size: 1.15rem;
 		font-weight: bold;
 		color: var(--blue-1);
 }
 #benefits .cta {
 	margin-top: 2rem;
 }
 #java ul.apps {
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 }
 .std-grid div.body {
 display: block !important;
}


/* DB CLUSTERS */
/*
 * DB Cluster Intro Section
 */

#intro.db-clusters .right-col img
{
	width: 80%;
	margin-bottom: 2rem;
	background-color: #fff;
	border: 1px solid var(--gray-3);
	padding: 1rem;
}
#intro.db-clusters .right-col .btn-lg,
.db-clusters .jlc-wrapper
{
	max-width: inherit;
	width: 80%;
	margin-left: 0;
	margin-right: 0;
}
#intro.db-clusters  .cta {
	padding: 0;
}
/*
 * DB-CLUSTERS Replication section
 */
#replication.db-clusters > div
{
	margin-bottom: 4rem;
}
#replication.db-clusters .std-grid .title h3
{
	color: var(--blue-1);
}
#replication.db-clusters .std-grid .body p
{
	margin-bottom: 1rem;
}
#replication.db-clusters .right-col img
{
	width: 70%;
	background-color: #fff;
	border: 1px solid var(--gray-3);
	padding: 1rem;
}
#replication.db-clusters .cta {
	display: grid;
	grid-template-columns: auto;
	justify-content: center;
	background: inherit;
	width: 100%;
}
#replication.db-clusters .cta .jlc-wrapper {
	/*width: calc(40% - 2rem);*/ /* matches the right column of intro-section */
}
#replication.db-clusters .cta .jlc-wrapper .jlc-cover {
	width: 100%;
	min-width: 400px;
}

#replication.db-clusters .cta .jlc-wrapper .jlc-cover button.jlc-btn,
#replication.db-clusters .cta a.btn-lg {
	width: 100%;
}

#intro.db-clusters .cta .btn-wrapper,
#replication.db-clusters .cta .btn-wrapper {
	margin-top: 1rem;
}

/* APP HOSTING CALC */
/*
 * Prices grid
 */
.billing-section {
   padding-top: 60px;
}

#cloudlet-prices-grid {
	display: grid;
	grid-gap: 0;
	grid-template-columns: repeat(4, 1fr);
	grid-template:  "a a b b"
					"c d e f"
					"g h i j"
					"k k k k";
}

#cloudlet-prices-grid div {
	padding: 10px 20px;
	text-align: center;
	border-color: #aaa;
	border-style: solid;
}

.reserved {
	grid-area: a;
	background:#78ef9f;
	color:#222;
	border-width: 1px 1px 0 1px;
}
.dynamic {
	grid-area: b;
	background:#78baef;
	color:#222;
	border-width: 1px 1px 0 0;
}
.rh {
	grid-area: c;
}
.rm { grid-area: d; }
.dh { grid-area: e; }
.dm { grid-area: f; }
.rhv { grid-area: g; }
.rmv { grid-area: h; }
.dhv { grid-area: i; }
.dmv { grid-area: j; }
.foot {
	grid-area: k;
	/*background: #e5e5e5;*/
}

.reserved, .dynamic {
	border-width:
}

.rh, .rhv, .dh, .dhv, #ssd-prices-grid div:nth-child(odd), #ips-prices-grid div:nth-child(odd), #bandwidth-prices-grid div:nth-child(odd) { background:#fff; }
.rm, .rmv { background:#e4efe8; }
.dm, .dmv { background:#edf3f7; }

.rh, .rhv { border-width: 0 0 0 1px; }
.rm, .rmv, .dm, .dmv { border-width: 0 1px 0 0; }
#cloudlet-prices-grid .rh, #cloudlet-prices-grid .rm, #cloudlet-prices-grid .dh, #cloudlet-prices-grid .dm, #ssd-prices-grid div:first-child, #ips-prices-grid div:first-child, #bandwidth-prices-grid div:first-child,  #ssd-prices-grid div:nth-child(2),  #ips-prices-grid div:nth-child(2),  #bandwidth-prices-grid div:nth-child(2) {
	border-bottom: 1px solid #ddd;
}
#ssd-prices-grid div:nth-child(even), #ips-prices-grid div:nth-child(even), #bandwidth-prices-grid div:nth-child(even) { background:#eaeaea; border-bottom-color: #ccc;}


.foot { border-width: 1px 0 0 0; }


#cloudlet-prices-grid span {
	font-size: 0.8em;
	padding: 0 1em;
}

#other-prices-grid {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto;
	grid-gap: 1rem;
}

#ssd-prices-grid, #ips-prices-grid, #bandwidth-prices-grid {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto;
	border: 1px solid #aaa;
}

#ssd-prices-grid div,
#ips-prices-grid div,
#bandwidth-prices-grid div,
#lsws-prices-grid div,
#lsadc-prices-grid div,
#cdn-prices-grid div {
	padding: 7px 10px;
	text-align: center;
}

#calc-btn {
	display: grid;
	grid-template-columns: 20% auto;
	background: #ff5123;
}

#calc-btn div:first-child {
	width: 100%;
	height: 100%;
	background: #343434;
}

#calc-btn #calc-icon-wrapper {
	display: grid;
	width: 48px;
	justify-self: center;
	align-items: center;
}

#calc-btn a, a.btn {
	display:inline-block;
	width: 100%;
	padding: 2rem;
	background: #ff5123;
	text-align: center;
	color:#fff;
}

.footnote {
   margin-top: 2rem;
}
#pricing-footnotes {
	display: grid;
	grid-template-columns: auto auto;
	grid-column-gap: 3rem;
	margin-bottom: 2rem;
}

div.j-calculator.loading:after {
   border-radius: 0;
   width: 400px;
   height: 200px;
   background-image: url('/wp-content/uploads/2021/01/Spinner-1s-200px.svg');
   background-repeat: no-repeat;
   background-color: rgba(0,0,0,0.67);
   color: #fff;
   padding: 0;
   padding-left: 220px;
   text-align: center;
   animation: none;
}

/* Licenses pricing */
#lsws-prices-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  grid-row-gap: 1rem;
  margin-bottom: 2rem;
}
#lsws-prices-grid.desc-1,
#lsws-prices-grid.cost-1-1,
#lsws-prices-grid.cost-1-2,
#lsws-prices-grid.desc-2,
#lsws-prices-grid.cost-2-1,
#lsws-prices-grid.cost-2-2,
#lsws-prices-grid.desc-3,
#lsws-prices-grid.cost-3-1,
#lsws-prices-grid.cost-3-2 {}

#lsws-prices-grid .desc-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
#lsws-prices-grid .cost-1-1 {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
  background: #dae4ff;
  border: 1px solid #aaa;
}
#lsws-prices-grid .desc-2 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
#lsws-prices-grid .cost-2-1 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
#lsws-prices-grid .cost-2-2 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
#lsws-prices-grid .desc-3 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
#lsws-prices-grid .cost-3-1 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}
#lsws-prices-grid .cost-3-2 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

#lsws-prices-grid .desc-1,
#lsws-prices-grid .desc-2,
#lsws-prices-grid .desc-3 {
}
#lsws-prices-grid .cost-1-1,
#lsws-prices-grid .cost-2-1,
#lsws-prices-grid .cost-3-1 {
  border-left: 1px solid #aaa;
}
#lsws-prices-grid .cost-2-2,
#lsws-prices-grid .cost-3-2 {
  background-color: #eaeaea;
  border-right: 1px solid #aaa;
}
#lsws-prices-grid .cost-2-1,
#lsws-prices-grid .cost-2-2,
#lsws-prices-grid .cost-3-1,
#lsws-prices-grid .cost-3-2 {
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
}
#lsadc-prices-grid {
  display: grid;
  grid-template-columns: 2fr 1rem 3fr 1rem 3fr 3fr;
}
#lsadc-prices-grid .head-1,
#lsadc-prices-grid .head-2,
#lsadc-prices-grid .head-3,
#lsadc-prices-grid .head-4 {
  font-weight: 500;
}
#lsadc-prices-grid .desc-1,
#lsadc-prices-grid .desc-2,
#lsadc-prices-grid .desc-3,
#lsadc-prices-grid .desc-4 {
  background-color: #f8f8f8;
}
#lsadc-prices-grid .cost-1-1,
#lsadc-prices-grid .cost-2-1,
#lsadc-prices-grid .cost-3-1,
#lsadc-prices-grid .cost-4-1 {
  background-color: #c0e9df;
}
#lsadc-prices-grid .cost-1-2,
#lsadc-prices-grid .cost-2-2,
#lsadc-prices-grid .cost-3-2,
#lsadc-prices-grid .cost-4-2 {
  background-color: #e6edff;
}
#lsadc-prices-grid .cost-1-3,
#lsadc-prices-grid .cost-2-3,
#lsadc-prices-grid .cost-3-3,
#lsadc-prices-grid .cost-4-3 {
  background-color: #dae4ff;
}

#lsadc-prices-grid .desc-1,
#lsadc-prices-grid .desc-2,
#lsadc-prices-grid .desc-3,
#lsadc-prices-grid .desc-4,
#lsadc-prices-grid .cost-1-1,
#lsadc-prices-grid .cost-1-2,
#lsadc-prices-grid .cost-1-3,
#lsadc-prices-grid .cost-2-1,
#lsadc-prices-grid .cost-2-2,
#lsadc-prices-grid .cost-2-3,
#lsadc-prices-grid .cost-3-1,
#lsadc-prices-grid .cost-3-2,
#lsadc-prices-grid .cost-3-3 {
  border-bottom: 1px solid;
  border-bottom-color: rgba(0,0,0,0.05);
}

#lsadc-prices-grid .head-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background-color: #efefef;
}
#lsadc-prices-grid .head-2 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  background-color: #b2d9cf;
}
#lsadc-prices-grid .head-3 {
  grid-column: 5 / 6;
  grid-row: 1 / 2;
  background-color: #d6dced;
}
#lsadc-prices-grid .head-4 {
  grid-column: 6 / 7;
  grid-row: 1 / 2;
  background-color: #cbd4ed;
}
#lsadc-prices-grid .desc-1 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
#lsadc-prices-grid .desc-2 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
#lsadc-prices-grid .desc-3 {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}
#lsadc-prices-grid .desc-4 {
  grid-column: 1 / 2;
  grid-row: 5 / 6;
}
#lsadc-prices-grid .cost-1-1 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
#lsadc-prices-grid .cost-1-2 {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
  }
#lsadc-prices-grid .cost-1-3 {
  grid-column: 6 / 7;
  grid-row: 2 / 3;
  }
#lsadc-prices-grid .cost-2-1 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}
#lsadc-prices-grid .cost-2-2 {
  grid-column: 5 / 6;
  grid-row: 3 / 4;
  }
#lsadc-prices-grid .cost-2-3 {
  grid-column: 6 / 7;
  grid-row: 3 / 4;
  }
#lsadc-prices-grid .cost-3-1 {
  grid-column: 3 / 4;
  grid-row: 4 / 5;
}
#lsadc-prices-grid .cost-3-2 {
  grid-column: 5 / 6;
  grid-row: 4 / 5;
  }
#lsadc-prices-grid .cost-3-3 {
  grid-column: 6 / 7;
  grid-row: 4 / 5;
  }
#lsadc-prices-grid .cost-4-1 {
  grid-column: 3 / 4;
  grid-row: 5 / 6;
}
#lsadc-prices-grid .cost-4-2 {
  grid-column: 5 / 6;
  grid-row: 5 / 6;
  }
#lsadc-prices-grid .cost-4-3 {
  grid-column: 6 / 7;
  grid-row: 5 / 6;
  }
/* CDN Prices */
#cdn-billing {}
#cdn-prices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1rem 1fr 1fr;
}
#cdn-prices-grid .head-1,
#cdn-prices-grid .head-2 {
  font-weight: 550;
}
#cdn-prices-grid .subhead-1-1,
#cdn-prices-grid .subhead-1-2,
#cdn-prices-grid .subhead-2-1,
#cdn-prices-grid .subhead-2-2 {
  font-weight: 600;
}

#cdn-prices-grid .subhead-1-1,
#cdn-prices-grid .subhead-1-2,
#cdn-prices-grid .cost-2-1,
#cdn-prices-grid .cost-2-2,
#cdn-prices-grid .cost-4-1,
#cdn-prices-grid .cost-4-2 {
  background-color: #c0e9df;
}
#cdn-prices-grid .cost-1-1,
#cdn-prices-grid .cost-1-2,
#cdn-prices-grid .cost-3-1,
#cdn-prices-grid .cost-3-2,
#cdn-prices-grid .cost-5-1,
#cdn-prices-grid .cost-5-2 {
  background-color: #d6f1ea;
}
#cdn-prices-grid .subhead-2-1,
#cdn-prices-grid .subhead-2-2 {
  background-color: #cbd4ed;
}
#cdn-prices-grid .head-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  background-color: #a7cdc4;
}
#cdn-prices-grid .head-2 {
  grid-column: 4 / 6;
  grid-row: 1 / 2;
  background-color: #b5c5f7;
}
#cdn-prices-grid .subhead-1-1 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
#cdn-prices-grid .subhead-1-2 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
#cdn-prices-grid .subhead-2-1 {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}
#cdn-prices-grid .subhead-2-2 {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}
#cdn-prices-grid .cost-1-1 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
#cdn-prices-grid .cost-1-2 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}
#cdn-prices-grid .cost-2-1 {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
  }
#cdn-prices-grid .cost-2-2 {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
}
#cdn-prices-grid .cost-3-1 {
  grid-column: 1 / 2;
  grid-row: 5 / 6;
  }
#cdn-prices-grid .cost-3-2 {
  grid-column: 2 / 3;
  grid-row: 5 / 6;
}
#cdn-prices-grid .cost-4-1 {
  grid-column: 1 / 2;
  grid-row: 6 / 7;
  }
#cdn-prices-grid .cost-4-2 {
  grid-column: 2 / 3;
  grid-row: 6 / 7;
}
#cdn-prices-grid .cost-5-1 {
  grid-column: 1 / 2;
  grid-row: 7 / 8;
  }
#cdn-prices-grid .cost-5-2 {
  grid-column: 2 / 3;
  grid-row: 7 / 8;
}
#cdn-prices-grid .cost-6-1 {
  grid-column: 4 / 5;
  grid-row: 3 / 4;
  background-color: #e6edff;
}
#cdn-prices-grid .cost-6-2 {
  grid-column: 5 / 6;
  grid-row: 3 / 4;
  background-color: #dae4ff;
}


/* MANAGED BACKUPS */
.managed-backups h2 {
	text-align: center;
}
.managed-backups h3 {
	color: #fff;
}
.managed-backups .grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 2rem;
}
.managed-backups .grid > div {
	display: grid;
	grid-template-columns: auto;
	justify-items: center;
}
#hero-section.managed-backups .grid p {
	text-align: center;
}
#key-features.managed-backups .grid {
	grid-template-columns: 1fr 1fr;
}
#key-features.managed-backups .grid > div {
	grid-template-columns: 64px auto;
	grid-template-rows: auto 1fr;
	justify-items: left;
}
#key-features.managed-backups .grid > div img {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
	width: 40px;
	height: 40px;
	align-self: center;
}
#key-features.managed-backups .grid > div h3 {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	color: var(--blue-2);
}
#key-features.managed-backups .grid > div p {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}
#pricing.managed-backups .grid {
	grid-template-columns: repeat(2, 1fr);
}

#pricing.managed-backups p {
	text-align: center;
}

/* MANAGED ROUTERS */
.managed-routers .grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 2rem;
}

/* About Us */
#about {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	grid-column-gap: 2rem;
}
#about > h1 {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}
#mission {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
#contact-us {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}
#contact-us strong {
	display: block;
}
.about#technology .grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
/* Datacenters */
#features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto 1fr;
	grid-column-gap: 2rem;
}
#features h2 {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}
#features-grid.grid {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	grid-row-gap: 2rem;
}
#features-grid.grid > div {
	display: grid;
	/*grid-row-gap: 1rem;*/
}
#gallery.grid {
	display: grid;
	grid-template-columns: repeat(2, 300px);
	grid-template-rows: auto auto 1fr;
	grid-column-gap: 2rem;
	grid-row-gap: 2rem;
}
#gallery.grid img {
	width: 300px;
	height: auto;
}
/* DNS Failover */
.dns-failover#features,
.dns-failover#pricing {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto 1fr;
	grid-column-gap: 2rem;
}
.dns-failover#features h2,
.dns-failover#pricing h2 {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}
/* TOS */
.tos ol {
	list-style-type: decimal;
	list-style: decimal;
}
.tos > ul,
.tos > ol {
	padding-left: 1rem;
}
.tos li {
	line-height: 2rem;
}
.tos ul li ul li,
.tos ul li ol li,
.tos ol li ul li,
.tos ol li ol li {
	margin-left: 2rem;
}
/* Mobile App Page */
#mobile-app .grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 2rem;
}
/* Promotions */
#promo-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 2rem;
}
/* Branding Assets */
section.branding > h2:first-child + div {
	margin-bottom: 4rem;
}
#main-badges.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 2rem;
}
#main-badges img {
	max-width: 300px;
	height: auto;
}
#powered-by-badges.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto 1fr;
	grid-gap: 2rem;
}
/* Cloud FAQ */
.cloud-faq h4 {
	margin-bottom: 0.5rem;
	padding-bottom: 0;
}
.cloud-faq .grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 2rem;
}
.cloud-faq .grid > div {
	display: grid;
	grid-row-gap: 1.5rem;
}
/* Ransomware Protection */
.ransomware-protection#details .grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 2rem;
}
.ransomware-protection#features {
	display: block;
}
.ransomware-protection#features .grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto 1fr;
	grid-gap: 2rem;
}
.ransomware-protection#features .grid > div {
	display: grid;
	grid-template-columns: 64px 1fr;
	grid-template-rows: auto 1fr;
	grid-column-gap: 1rem;
}
.ransomware-protection#features .grid > div img {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
	width: 64px;
	height: auto;
}
.ransomware-protection#features .grid > div h5 {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}
.ransomware-protection#features .grid > div p {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}

/* contact us */
.contact-us#contact-section .grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 2rem;
}


/* statement of support */
.support-overview {
    font-size: 11px;
	border: 1px solid #e4e4e4;
}

.support-overview td {
	padding: 10px 20px 10px 20px;
	border-right: 1px solid #e4e4e4;
}

.support-overview td:first-child {
    text-align: left;
}

.support-overview tr:nth-child(even), .support-overview thead tr {
    background: #f2f2f2;
}

.indent, .support-item {
    padding-left:18px;
}

.indent span {
    display: block;
    font-weight: bold;
}

.support-item {
    margin: 8px 0;
}


/*
 * Blog
 * /
/* Blog Page */

/* Main container for blog posts */
.blog-container {
  display: flex;
  flex-wrap: wrap;
  margin: 20px auto;
  max-width: 1200px;
}

.entry-title a {
	color: var(--gray-1);
}

.entry-title a:visited {
	color: var(--gray-2);
}

article.post {
	width: 1170px;
	margin: 0 auto;
	margin-top: 2rem;
}

section.blog-list-item {
	display: grid;
	grid-template-columns: 150px 75ch;
	grid-column-gap: 2rem;
}

.thumbnail-missing {
	background-color: var(--blue-1);
}

.entry-footer {
	padding: 1rem 0.5rem 1rem 0.5rem;
}

.entry-footer a {
	font-weight: 700;
	color: var(--blue-1);
}

.entry-footer a:visited {
	color: var(--gray-2);
}

.entry-footer a:hover {
	color: var(--orange-1);
}

.blog-list-item .entry-content {
	line-height: 1.6;
}


/* Single Post */
.blog-post {
  flex: 1 1 calc(33.333% - 20px);
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  margin: 10px;
  padding: 20px;
  transition: all 0.3s ease-in-out;
}

/* Post Hover Effect */
.blog-post:hover {
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

/* Headings */
.entry-content h1 {
  font-size: 3em;
  margin-bottom: 10px;
}

.entry-content h2 {
  font-size: 1.8em;
  margin-bottom: 10px;
}

/* Entry Paragraphs */
.entry-content p {
	line-height: 1.6;
	max-width: 75ch;
}

/* Entry Lists */
.entry-content li {
	line-height: 1.6em;
	margin-bottom: 0.75em;
}

/* Links */
.entry-content a {
	color: var(--blue-1);
}
.entry-content a:visited {
	color: var(--gray-2);
}

.entry-content a:hover {
	color: var(--orange-1);
	text-decoration: underline;
}

/* Post Meta Information */
.blog-post .meta-info {
  font-size: 0.9em;
  color: #777;
  margin-bottom: 20px;
}

/* Post Content */
.blog-post .entry-content {
  font-size: 1em;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Read More Link */
.read-more {
  display: inline-block;
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  border-radius: 3px;
  text-decoration: none;
}

.read-more:hover {
  background-color: #0056b3;
}

/* If you want to style your sidebar */
.sidebar {
  padding: 20px;
  background: #f1f1f1;
}

/* If you have pagination */
.pagination {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.pagination a {
  padding: 10px 20px;
  margin: 0 5px;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #333;
}

.pagination a:hover,
.pagination a.active {
  background: #007BFF;
  color: white;
  border-color: #007BFF;
}

span.page-numbers.current {
	padding: 10px 20px;
    margin: 0 5px;
    border: 1px solid var(--blue-1);
    text-decoration: none;
    color: var(--blue-1);
}


/*
 * Responsive CSS
 */
 @media only screen and (max-width: 600px) {

			#header {
				width: 100%;
				margin: 0;
				padding-left: 1em;
				padding-right: 1em;
				grid-template-columns: 200px 1fr max-content;
				grid-column-gap: 1rem;
			}

			/* keep header height stable on smaller screens */
			#header > .header-chat-btn,
			#header > .header-phone {
				display: none;
			}
	 
	
	/* Headers */
	
	h1 {
		text-align: center;
	}

	h2 {
		font-size: 1.3em;
	}

	h3 {
		font-weight: bold;
		font-size: 1.2em !important;
	}

	h4 {
		font-size: 0.9em;
	}

	h5 {
		font-size: 0.8em;
	}

	h3.hero-section {
		text-align: center;
	}

	#hero-cta-wrapper {
		display: block;
	}
	
	#footer-navs a { font-size: 1rem; }
	#footer-navs {
		display: grid;
		grid-template-columns: repeat(2, auto);
		grid-template-rows: repeat(2, auto);
		grid-column-gap: 4rem;
	}
	 
 /* SECTIONS */
	#content > section {
		padding-left: 1rem;
		padding-right: 1rem;
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
	 #hero-section h4 {
		 margin-bottom: 1.5rem;
		 color: #fff;
		 max-width: 75ch;
		 text-align: center;
	}
	/* Index product cards */
	 #product-cards {
		display: grid;
		grid-template-columns: auto;
		grid-gap: 1rem;
	}
	 
	 #product-cards > div {
		display: grid;
		padding: 2rem;
		background-color: var(--gray-5);
		border-top: 20px solid #06425a;
		border-top-color: var(--gray-7);
		color: #333;
		font-size: 1rem;
	}
	#content div, #cloud-section p {
		font-size: 0.8rem;
		line-height: 1.33rem;
		color: var(--gray-1);
	}
	 
	 #cloud-section a.btn,
	 #paas-section a.btn,
	 #about-section a.btn,
	 #reviews-section a.btn
	 {
		 margin: 0;
	 }
	 #reviews-section-grid > div div:first-child {
		 font-size: 0.75rem;
	 }
	 #solutions-section-grid {
		 display: grid;
		 grid-template-columns: auto;
		 grid-template-rows: auto;
	 }
	 #solutions-section-grid > div {
		 display: grid;
		 grid-template-columns: auto;
		 grid-template-rows: 5rem auto auto;
	 }
}	 



/*
 * Responsive CSS testing block
 */
 @media only screen and (max-width: 995px) and (min-width: 995px) {
	 #header #menu-header-menu-2022 a {
		 padding: 12px;
	 }
} /* end Responsive testing block */

/* Hide Google reCAPTCHA badge (attribution in footer per Google TOS) */
.grecaptcha-badge {
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* reCAPTCHA attribution styling */
.recaptcha-attribution {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}
.recaptcha-attribution a {
    color: #29a7e6;
    text-decoration: none;
}
.recaptcha-attribution a:hover {
    text-decoration: underline;
}

/* ================================================
   ACCESSIBLE NAVIGATION STYLES
   ================================================ */

/* Progressive Enhancement - CSS-only fallback still works */
#main-navigation {
    display: block;
    justify-self: stretch;
    min-width: 0;
    width: 100%;
}

/* Focus Indicators - WCAG 2.1 AA Compliant */
#header ul.menu a:focus,
#header ul.menu a:focus-visible,
#header ul.menu button:focus,
#header ul.menu button:focus-visible {
	    outline: 2px solid var(--blue-1);
	    outline-offset: 2px;
	    border-radius: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    #header ul.menu a:focus {
        outline: 3px solid currentColor;
    }
    #header ul.menu button:focus {
        outline: 3px solid currentColor;
    }
}

/* Dropdown Indicator - Parent link uses flexbox for proper alignment */
#header ul.menu li.menu-item-has-children > a,
#header ul.menu li.menu-item-has-children > button {
	    display: inline-flex;
	    align-items: center;
	    gap: 0.45em;
}

/* Submenu items: keep caret from colliding with label text */
#header ul.sub-menu > li.menu-item-has-children > a,
#header ul.sub-menu > li.menu-item-has-children > button {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    gap: 1rem;
	    margin-right: 0;
}

.dropdown-indicator {
    display: inline-block;
    width: 0.35em;
    height: 0.35em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-top: -0.1em;
    margin-left: 0.35em;
}

.submenu-toggle .dropdown-indicator {
    margin-left: 0;
}

.menu-item-has-children > a[aria-expanded="true"] .dropdown-indicator,
.menu-item-has-children > button[aria-expanded="true"] .dropdown-indicator {
	    transform: rotate(-135deg);
}

/* Hide old chevron indicator since we now have .dropdown-indicator */
#header ul.menu li.menu-item-has-children > a::before {
	    display: none;
}

/* Submenu positioning for nested menus that overflow */
#header .sub-menu.submenu-flip-left {
    left: auto;
    right: 100%;
}

/* Submenu Animation */
#header ul.menu li ul {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

#header ul.menu li.submenu-open > ul,
.no-js #header ul.menu li:hover > ul,
#header ul.menu li:hover > ul,
.no-touch #header ul.menu li:hover > ul {
    display: block;
    position: absolute;
    background-color: var(--surface-dark);
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Touch device adjustments - disable hover, require tap */
.touch-device #header ul.menu li:hover > ul {
    display: none;
    opacity: 0;
    visibility: hidden;
}

.touch-device #header ul.menu li.submenu-open > ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Screen reader only class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ================================================
   MOBILE NAVIGATION ENHANCEMENTS
   ================================================ */

/* Mobile Menu Button */
#mobile-menu {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    min-height: 44px;
    height: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: "Varela Round", georgia;
    font-size: 1rem;
    color: var(--text-primary);
}

#mobile-menu:focus {
    outline: 2px solid var(--blue-1);
    outline-offset: 2px;
}

/* Hamburger Icon */
.hamburger-icon {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    position: relative;
    transition: background 0.2s ease;
}

.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    transition: transform 0.2s ease;
}

.hamburger-icon::before {
    top: -7px;
}

.hamburger-icon::after {
    top: 7px;
}

/* Hamburger to X animation */
#mobile-menu[aria-expanded="true"] .hamburger-icon {
    background: transparent;
}

#mobile-menu[aria-expanded="true"] .hamburger-icon::before {
    transform: rotate(45deg);
    top: 0;
}

#mobile-menu[aria-expanded="true"] .hamburger-icon::after {
    transform: rotate(-45deg);
    top: 0;
}

/* Mobile Menu Open State */
body.mobile-menu-open {
    overflow: hidden;
}

				@media only screen and (max-width: 600px) {
				    #mobile-menu {
				        display: flex;
				        justify-self: end;
				    }

				    /* Mobile menu slide animation */
				    #header #menu-header-menu-2022 {
				        position: fixed;
				        top: var(--header-current-height);
				        right: 0;
				        bottom: 0;
				        width: min(360px, 90vw);
				        background-color: var(--surface-base);
			        z-index: var(--z-header-dropdown);
			        box-shadow: -6px 0 18px rgba(0, 0, 0, 0.2);
				        display: block;
				        transform: translateX(100%);
				        transition: transform 0.3s ease;
				        max-height: calc(100vh - var(--header-current-height));
				        overflow-y: auto;
				    }

				    #header #menu-header-menu-2022 > li {
				        display: block;
				        width: 100%;
				        height: auto;
				    }

				    #header #menu-header-menu-2022 > li + li {
				        border-top: 1px solid rgba(0, 0, 0, 0.06);
				    }

				    #header #menu-header-menu-2022 > li > a,
				    #header #menu-header-menu-2022 > li > button:not(.submenu-toggle) {
				        display: flex;
				        align-items: center;
				        justify-content: flex-start;
				        gap: 0.6rem;
				        padding: 1rem;
				        min-height: 44px;
				        color: var(--text-primary);
				        text-decoration: none;
				        background: transparent;
				        border: none;
				        font-family: "Varela Round", Georgia;
				        font-size: 1rem;
				        width: 100%;
				        text-align: left;
				    }

				    #header #menu-header-menu-2022 > li.menu-item-has-children > a,
				    #header #menu-header-menu-2022 > li.menu-item-has-children > button:not(.submenu-toggle) {
				        justify-content: space-between;
				        gap: 1rem;
				    }

				    #header #menu-header-menu-2022 > li.menu-item-has-children {
				        display: flex;
				        flex-wrap: wrap;
				        align-items: stretch;
				    }

				    #header #menu-header-menu-2022 > li.menu-item-has-children > a {
				        flex: 1 1 auto;
				        width: auto;
				    }

				    #header #menu-header-menu-2022 > li.menu-item-has-children > ul.sub-menu {
				        flex: 0 0 100%;
				    }

				    #header #menu-header-menu-2022 > li > button.submenu-toggle {
				        display: flex;
				        align-items: center;
				        justify-content: center;
				        min-width: 44px;
				        min-height: 44px;
				        padding: 1rem;
				        background: transparent;
				        border: none;
				        color: inherit;
				        cursor: pointer;
				    }

				    #header #menu-header-menu-2022 > li > a:hover,
				    #header #menu-header-menu-2022 > li > button:hover {
				        background-color: rgba(0, 0, 0, 0.04);
				    }

		    #header #menu-header-menu-2022.open {
		        transform: translateX(0);
		    }

				    /* Mobile submenu styling */
				    #header #menu-header-menu-2022 .sub-menu {
			        display: none;
			        max-height: 0;
			        overflow: hidden;
			        transition: max-height 0.3s ease;
			        position: static;
			        opacity: 1;
	        visibility: visible;
	        transform: none;
	        box-shadow: none;
	        padding-left: 1rem;
	        background-color: transparent;
	    }

	    #header #menu-header-menu-2022 .sub-menu li a,
	    #header #menu-header-menu-2022 .sub-menu li button:not(.submenu-toggle) {
	      color: var(--text-primary);
	    }

	    #header #menu-header-menu-2022 .sub-menu > li:hover > a,
	    #header #menu-header-menu-2022 .sub-menu > li:hover > button {
	      color: var(--text-primary);
	    }

	    #header #menu-header-menu-2022 .sub-menu > li:hover {
	      background-color: rgba(15, 23, 42, 0.04);
	    }

		    #header #menu-header-menu-2022 .submenu-open > .sub-menu {
		        display: block;
		        max-height: 500px;
		    }

		    /* Mobile dropdown indicator */
		    #header #menu-header-menu-2022 .dropdown-indicator {
		        position: static;
		        margin-top: 0;
		        margin-left: 0.5rem;
		    }

			    #header #menu-header-menu-2022 .menu-item-has-children > a {
			        position: static;
			    }
			    #header #menu-header-menu-2022 .menu-item-has-children > button {
			        position: static;
			    }
			}

/* ================================================
   REDUCED MOTION
   ================================================ */
@media (prefers-reduced-motion: reduce) {
    #header ul.menu li ul,
    #header #menu-header-menu-2022,
    #header #menu-header-menu-2022 .sub-menu,
    .hamburger-icon,
    .hamburger-icon::before,
    .hamburger-icon::after,
    .dropdown-indicator {
        transition: none;
    }
}

/* ================================================
   NO-JS FALLBACK
   ================================================ */
.no-js #header ul.menu li:hover > ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

.no-js #mobile-menu {
    display: none !important;
}

.no-js #header #menu-header-menu-2022 {
    display: flex !important;
    transform: none !important;
}
/* Primary header CTA (top-level "Order") */
#header #menu-header-menu-2022 > li.tb-cta > a,
#header #menu-header-menu-2022 > li.tb-cta > button:not(.submenu-toggle) {
  background: transparent;
  color: inherit;
  padding-left: 0;
  padding-right: 0;
}

#header #menu-header-menu-2022 > li.tb-cta {
  --tb-cta-chip-height: 28px;
}
#header #menu-header-menu-2022 > li.tb-cta > a:hover,
#header #menu-header-menu-2022 > li.tb-cta > button:not(.submenu-toggle):hover {
  background: transparent;
  color: inherit;
}
#header #menu-header-menu-2022 > li.tb-cta > a:focus,
#header #menu-header-menu-2022 > li.tb-cta > button:not(.submenu-toggle):focus,
#header #menu-header-menu-2022 > li.tb-cta > a:focus-visible,
#header #menu-header-menu-2022 > li.tb-cta > button:not(.submenu-toggle):focus-visible {
  outline: none;
  outline-offset: 0;
}

#header #menu-header-menu-2022 > li.tb-cta .tb-cta-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--tb-cta-chip-height);
  padding: 0 0.9rem;
  border-radius: 0.5rem;
  background: var(--brand-cta);
  color: #0f172a;
  line-height: 1;
}

#header #menu-header-menu-2022 > li.tb-cta.menu-item-has-children .tb-cta-label {
  border-radius: 0.5rem 0 0 0.5rem;
  padding-right: 0.55rem;
}

#header #menu-header-menu-2022 > li.tb-cta > button.submenu-toggle {
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}

#header #menu-header-menu-2022 > li.tb-cta > button.submenu-toggle .submenu-toggle-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--tb-cta-chip-height);
  padding: 0 0.45rem;
  border-radius: 0 0.5rem 0.5rem 0;
  background: var(--brand-cta);
  color: #0f172a;
  line-height: 1;
}

#header #menu-header-menu-2022 > li.tb-cta.menu-item-has-children > button:not(.submenu-toggle) .submenu-toggle-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--tb-cta-chip-height);
  padding: 0 0.45rem;
  border-radius: 0 0.5rem 0.5rem 0;
  background: var(--brand-cta);
  color: #0f172a;
  line-height: 1;
}

#header #menu-header-menu-2022 > li.tb-cta.menu-item-has-children > button:not(.submenu-toggle) {
  gap: 0;
}

#header #menu-header-menu-2022 > li.tb-cta.menu-item-has-children > button:not(.submenu-toggle) .tb-cta-label {
  margin-right: -1px;
}

#header #menu-header-menu-2022 > li.tb-cta > button.submenu-toggle .submenu-toggle-chip .dropdown-indicator {
  border-right-color: currentColor;
  border-bottom-color: currentColor;
  margin-left: 0;
}

#header #menu-header-menu-2022 > li.tb-cta > button:not(.submenu-toggle) .submenu-toggle-chip .dropdown-indicator {
  margin-left: 0;
}

#header #menu-header-menu-2022 > li.tb-cta > a:hover .tb-cta-label,
#header #menu-header-menu-2022 > li.tb-cta > button:not(.submenu-toggle):hover .tb-cta-label {
  background: var(--brand-highlight);
  color: #000;
}

#header #menu-header-menu-2022 > li.tb-cta > button.submenu-toggle:hover .submenu-toggle-chip {
  background: var(--brand-highlight);
  color: #000;
}

#header #menu-header-menu-2022 > li.tb-cta.menu-item-has-children > button:not(.submenu-toggle):hover .submenu-toggle-chip {
  background: var(--brand-highlight);
  color: #000;
}

#header #menu-header-menu-2022 > li.tb-cta > a:focus-visible .tb-cta-label,
#header #menu-header-menu-2022 > li.tb-cta > button:not(.submenu-toggle):focus-visible .tb-cta-label {
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* ================================================
   APP HOSTING PAGE - CONVERSION MODULE STYLES
   ================================================ */

/* ----- Hero Section - Conversion Module ----- */
#hero-section.app-hosting-hero {
    padding: 3rem max(1.5rem, calc(50% - 585px));
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(1200px 520px at 18% 18%, rgba(0, 230, 100, 0.16) 0%, rgba(0, 230, 100, 0.00) 60%),
        radial-gradient(980px 520px at 82% 24%, rgba(41, 167, 230, 0.22) 0%, rgba(41, 167, 230, 0.00) 62%),
        radial-gradient(720px 520px at 58% 92%, rgba(255, 186, 0, 0.10) 0%, rgba(255, 186, 0, 0.00) 56%),
        linear-gradient(135deg, #053b57 0%, #005b80 40%, #0a4d73 100%),
        url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='66px' height='100.5px' viewBox='0 0 66 100.5' style='overflow:scroll;enable-background:new 0 0 66 100.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23006187;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='66,37.1 66,1.1 34,13.1 34,49.1 '/%3E%3Cpolygon class='st0' points='34,87.3 66,99.3 66,63.3 34,51.3 '/%3E%3Cpolygon class='st0' points='32.9,13.1 0.9,1.1 0.9,37.1 32.9,49.1 '/%3E%3Cpolygon class='st0' points='32.9,51.3 0.9,63.3 0.9,99.3 32.9,87.3 '/%3E%3Cpolygon class='st0' points='0.4,37.9 0.4,37.9 0.4,37.9 0.4,37.9 0,38.1 0,62.1 0.4,62.3 0.4,62.3 0.4,62.3 0.4,62.3 0.4,62.3 32.9,50.1 0.4,37.9 '/%3E%3Cpolygon class='st0' points='66,100.5 66,100.5 33.5,88.3 33.5,88.3 33.5,88.3 33.5,88.3 33.5,88.3 1,100.5 1.1,100.5 65.9,100.5 '/%3E%3Cpolygon class='st0' points='66,0 1.1,0 33.5,12.2 33.5,12.2 33.5,12.2 33.5,12.2 33.5,12.2 66,0 '/%3E%3Cpolygon class='st0' points='66,62.1 66,38.1 34,50.1 '/%3E%3C/svg%3E");
    background-size: auto, auto, auto, auto, 88px 132px;
    background-position: center, center, center, center, center;
    background-blend-mode: screen, screen, screen, normal, normal;
}

#hero-section.app-hosting-hero::before {
    content: "";
    position: absolute;
    inset: -25% -10%;
    background:
        radial-gradient(closest-side at 26% 30%, rgba(0, 230, 100, 0.16), rgba(0, 230, 100, 0.00) 70%),
        radial-gradient(closest-side at 74% 34%, rgba(41, 167, 230, 0.18), rgba(41, 167, 230, 0.00) 72%);
    filter: blur(10px);
    opacity: 0.9;
    transform: translate3d(0, 0, 0);
    animation: ah-hero-drift 18s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

#hero-section.app-hosting-hero > * {
    position: relative;
    z-index: 1;
}

#hero-section.app-hosting-hero h1 {
    font-family: "Varela Round", Georgia, serif;
    font-size: 2.75rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.75rem;
    padding-bottom: 0;
    letter-spacing: -0.02em;
    text-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

#hero-section.app-hosting-hero h1 .ah-title-accent {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

#hero-section.app-hosting-hero .hero-subhead {
    font-size: 1.2rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    max-width: 60ch;
    margin: 0 auto 2rem;
    line-height: 1.5;
    padding-bottom: 0;
}

/* Proof Chips - Scannable Trust Signals */
.proof-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    margin: 1.75rem auto 2.25rem;
    max-width: 900px;
}

.proof-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    font-family: "Hind", Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.proof-chip:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
}

.proof-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--green-2);
    color: #0f172a;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 50%;
}

/* Hero CTA Group - Dual Buttons */
.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.btn-primary-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--green-2) !important;
    color: #0f172a !important;
    font-weight: 600;
    padding: 1rem 2rem;
    font-size: 1rem;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(0, 230, 100, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-primary-cta::after {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.0) 40%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.0) 60%);
    transform: translateX(-120%);
    animation: ah-cta-sheen 3.6s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: soft-light;
}

.btn-primary-cta:hover {
    background: var(--green-2-dark) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 230, 100, 0.4);
}

.btn-primary-cta:hover::after {
    animation-duration: 2.2s;
}

.btn-secondary-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.5);
    font-weight: 500;
    padding: 0.9rem 1.75rem;
    font-size: 1rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-secondary-cta:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.8);
}

@keyframes ah-hero-drift {
    0% { transform: translate3d(-1.5%, -1.5%, 0) scale(1); }
    100% { transform: translate3d(1.5%, 1.25%, 0) scale(1.02); }
}

@keyframes ah-cta-sheen {
    0%, 65% { transform: translateX(-120%); opacity: 0; }
    72% { opacity: 1; }
    92% { transform: translateX(120%); opacity: 0; }
    100% { transform: translateX(120%); opacity: 0; }
}

/* ----- Proof Strip (Shared) ----- */
.proof-strip,
.ah-proof-strip {
    padding: 0.9rem max(1.5rem, calc(50% - 585px));
    margin-top: 0;
    color: var(--text-on-dark);
}

/* Override the default #content > section padding for marquee strips */
#content > section.proof-strip,
#content > section.ah-proof-strip {
    padding: 0.9rem max(1.5rem, calc(50% - 585px));
}

.proof-strip__inner,
.ah-proof-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    max-width: var(--max-width);
    margin: 0 auto;
}

.proof-strip__label,
.ah-proof-label {
    margin: 0;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    opacity: 0.92;
    color: var(--text-on-dark) !important;
}

.proof-strip__marquee,
.ah-proof-marquee {
    display: flex;
    gap: 1rem;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.proof-strip__track,
.ah-proof-track {
    display: inline-flex;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    min-width: max-content;
    animation: proof-strip-marquee var(--proof-strip-duration, 20s) linear infinite;
    will-change: transform;
}

.proof-strip__chip,
.ah-proof-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.875rem;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-on-dark);
    margin-right: var(--proof-strip-gap, 0.65rem);
}

@keyframes proof-strip-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.proof-strip--app-hosting,
.ah-proof-strip {
    --proof-strip-duration: 20s;
    --proof-strip-gap: 0.65rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.00) 100%),
        linear-gradient(135deg, #053b57 0%, #005b80 40%, #0a4d73 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    margin-top: -0.25rem;
    color: rgba(255, 255, 255, 0.92);
}

.proof-strip--cloud-vps {
    --proof-strip-duration: 30s;
    --proof-strip-gap: 1.5rem;
    background: linear-gradient(90deg, var(--hvps-slate-950, #020617) 0%, var(--text-primary, #0f172a) 50%, var(--hvps-slate-950, #020617) 100%);
}

.proof-strip--cloud-vps .proof-strip__chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(226, 232, 240, 0.90);
    transition: all 0.2s ease;
}

.proof-strip--cloud-vps .proof-strip__chip:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(34, 211, 238, 0.30);
    color: #ffffff;
}

/* ----- Value Proposition Section (No Right-Sizing) ----- */
.value-prop-section {
    background: #ffffff;
    padding: 4rem max(1.5rem, calc(50% - 585px));
}

.value-prop-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 4rem;
    align-items: center;
    max-width: var(--max-width);
    margin: 0 auto;
}

.value-prop-content h2 {
    font-family: "Varela Round", Georgia, serif;
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--gray-2);
    line-height: 1.2;
    padding-bottom: 1rem;
}

.section-lead {
    font-size: 1.125rem;
    color: var(--gray-1);
    max-width: 55ch;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.section-lead.centered {
    text-align: center;
    max-width: 55ch;
    margin: 0 auto 2.5rem;
}

/* Value Bullets */
.value-bullets {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.value-bullet {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 1rem;
    align-items: flex-start;
}

.value-bullet-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--blue-1) 0%, var(--blue-2) 100%);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(41, 167, 230, 0.25);
    flex-shrink: 0;
}

.value-bullet-icon svg {
    width: 26px;
    height: 26px;
    color: #ffffff;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.value-bullet-content h5 {
    font-family: "Varela Round", Georgia, serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-2);
    padding-bottom: 0.25rem;
    margin: 0;
}

.value-bullet-content p {
    font-size: 0.95rem;
    color: var(--gray-1);
    line-height: 1.5;
    margin: 0;
}

.value-prop-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.value-prop-visual img {
    max-width: 100%;
    height: auto;
}

.ah-autoscale-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    width: 100%;
    max-width: 380px;
}

.ah-autoscale-wrap .ah-autoscale-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.08));
}

.ah-autoscale-bars {
    position: absolute;
    left: 50%;
    bottom: 12%;
    transform: translateX(-50%);
    width: min(320px, 86%);
    height: 44%;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    align-items: end;
    pointer-events: none;
    opacity: 0.88;
}

.ah-autoscale-bars .ah-bar {
    height: 30%;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(0, 230, 100, 0.75) 0%, rgba(0, 230, 100, 0.12) 100%);
    box-shadow: 0 10px 22px rgba(0, 230, 100, 0.18);
    transform-origin: bottom;
    animation: ah-bars 2.4s ease-in-out infinite;
}

.ah-autoscale-bars .ah-bar:nth-child(2) { animation-delay: -0.3s; }
.ah-autoscale-bars .ah-bar:nth-child(3) { animation-delay: -0.9s; }
.ah-autoscale-bars .ah-bar:nth-child(4) { animation-delay: -0.6s; }
.ah-autoscale-bars .ah-bar:nth-child(5) { animation-delay: -1.1s; }
.ah-autoscale-bars .ah-bar:nth-child(6) { animation-delay: -0.4s; }
.ah-autoscale-bars .ah-bar:nth-child(7) { animation-delay: -0.8s; }
.ah-autoscale-bars .ah-bar:nth-child(8) { animation-delay: -0.2s; }

@keyframes ah-bars {
    0% { transform: scaleY(0.25); filter: saturate(1); opacity: 0.75; }
    40% { transform: scaleY(0.92); filter: saturate(1.15); opacity: 0.95; }
    70% { transform: scaleY(0.55); opacity: 0.9; }
    100% { transform: scaleY(0.28); opacity: 0.78; }
}

/* ----- After Trial Section (Conversion Anxiety Reducer) ----- */
.after-trial-section {
    background: linear-gradient(180deg, var(--gray-5) 0%, #ffffff 100%);
    padding: 3rem max(1.5rem, calc(50% - 585px));
}

.after-trial-card {
    background: #ffffff;
    border: 2px solid var(--blue-1);
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 8px 24px rgba(41, 167, 230, 0.1);
}

.after-trial-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(41, 167, 230, 0.1);
    border-radius: 50%;
    color: var(--blue-1);
    margin-bottom: 1rem;
}

.after-trial-icon svg {
    width: 32px;
    height: 32px;
}

.after-trial-card h3 {
    font-family: "Varela Round", Georgia, serif;
    font-size: 1.5rem;
    color: var(--gray-2);
    padding-bottom: 1.5rem;
    margin: 0;
}

.after-trial-points {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}

.after-trial-point {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--gray-1);
    line-height: 1.5;
}

.after-trial-point .point-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
}

.after-trial-point .point-icon.good {
    background: var(--green-2);
    color: #ffffff;
}

.after-trial-point.negative .point-icon {
    background: var(--gray-3);
    color: var(--gray-1);
}

.after-trial-point.negative span:last-child {
    color: var(--gray-6);
}

/* ----- Pricing Clarity Section ----- */
.pricing-clarity-section {
    padding: 4rem max(1.5rem, calc(50% - 585px));
}

.pricing-clarity-section h2 {
    text-align: center;
    margin-bottom: 2.5rem;
}

/* How It Works Box */
.how-it-works-box {
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem 2.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-3);
    max-width: 800px;
    margin: 0 auto 3rem;
}

.how-it-works-box h3 {
    font-family: "Varela Round", Georgia, serif;
    font-size: 1.5rem;
    color: var(--blue-2);
    text-align: center;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--gray-3);
}

.how-it-works-steps {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.step-number {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--blue-1);
    color: #ffffff;
    font-family: "Varela Round", Georgia, serif;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50%;
}

.step-content strong {
    display: block;
    font-size: 1rem;
    color: var(--gray-2);
    margin-bottom: 0.25rem;
}

.step-content p {
    font-size: 0.9rem;
    color: var(--gray-1);
    line-height: 1.4;
    margin: 0;
}

/* Pricing Rate Finder (quick tier lookup) */
.pricing-interactive-teaser {
    max-width: 900px;
    margin: 1.5rem auto 0;
    padding: 1.25rem 1.25rem 1.1rem;
    border-radius: 14px;
    border: 1px solid rgba(41, 167, 230, 0.18);
    background:
        radial-gradient(900px 220px at 15% 0%, rgba(41, 167, 230, 0.12) 0%, rgba(41, 167, 230, 0.00) 55%),
        radial-gradient(900px 240px at 85% 100%, rgba(0, 230, 100, 0.08) 0%, rgba(0, 230, 100, 0.00) 55%),
        #ffffff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04);
}

.pricing-interactive-teaser .pit-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
    margin-bottom: 0.85rem;
}

.pricing-interactive-teaser .pit-head h4 {
    margin: 0;
    padding-bottom: 0;
    font-family: "Varela Round", Georgia, serif;
    color: var(--gray-2);
}

.pricing-interactive-teaser .pit-head p {
    margin: 0;
    color: var(--gray-6);
    font-size: 0.95rem;
}

.pricing-interactive-teaser .pit-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

.pricing-interactive-teaser label {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--gray-2);
}

.pricing-interactive-teaser .pit-output {
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 800;
    color: var(--blue-2);
}

.pricing-interactive-teaser input[type="range"] {
    width: 100%;
    accent-color: var(--blue-1);
}

.pricing-interactive-teaser .pit-results {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.pricing-interactive-teaser .pit-pill {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.1rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.72);
}

.pricing-interactive-teaser .pit-pill strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
}

.pricing-interactive-teaser .pit-tier {
    font-size: 0.9rem;
    color: var(--gray-6);
}

.pricing-interactive-teaser .pit-total {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    color: var(--gray-2);
}

.pricing-interactive-teaser .pit-footnote {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--gray-6);
}

/* Included Items */
.included-items {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-3);
}

.included-items h4 {
    font-size: 1rem;
    color: var(--green-2-dark);
    text-align: center;
    padding-bottom: 1rem;
    margin: 0;
}

.included-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.included-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--gray-2);
}

.included-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--green-2);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 50%;
}

/* Storage Examples */
.storage-examples {
    max-width: 900px;
    margin: 0 auto;
}

.storage-examples h3 {
    text-align: center;
    font-size: 1.5rem;
    color: var(--gray-2);
    padding-bottom: 0.5rem;
}

.storage-note {
    text-align: center;
    font-size: 0.9rem;
    color: var(--gray-6);
    margin-bottom: 1.5rem;
}

.storage-examples-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.storage-example {
    background: #ffffff;
    border: 1px solid var(--gray-3);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.2s ease;
}

.storage-example:hover {
    border-color: var(--blue-1);
    box-shadow: 0 4px 12px rgba(41, 167, 230, 0.12);
}

.storage-example.featured {
    border-color: var(--blue-1);
    background: linear-gradient(180deg, rgba(41, 167, 230, 0.04) 0%, #ffffff 100%);
}

.storage-total {
    font-family: "Varela Round", Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-2);
    margin-bottom: 0.5rem;
}

.storage-billable {
    font-size: 0.875rem;
    color: var(--gray-6);
    margin-bottom: 0.75rem;
}

.storage-cost {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--blue-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
}

/* ----- Feature Cards Section ----- */
.features-cards-section {
    padding: 4rem max(1.5rem, calc(50% - 585px));
}

.features-cards-section h2 {
    text-align: center;
    margin-bottom: 0.75rem;
}

.feature-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: var(--max-width);
    margin: 0 auto;
}

.feature-card {
    background: #ffffff;
    border: 1px solid var(--gray-3);
    border-radius: 12px;
    padding: 1.75rem;
    transition: all 0.25s ease;
}

.feature-card.featured {
    border-color: rgba(0, 230, 100, 0.55);
    background:
        linear-gradient(180deg, rgba(0, 230, 100, 0.06) 0%, rgba(0, 230, 100, 0.00) 60%),
        #ffffff;
    position: relative;
}

.feature-card.featured::before {
    content: "Top pick";
    position: absolute;
    top: -12px;
    left: 16px;
    background: var(--green-2);
    color: #0f172a;
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 18px rgba(0, 230, 100, 0.22);
}

.feature-card:hover {
    border-color: var(--blue-1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.feature-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--blue-1) 0%, var(--blue-2) 100%);
    border-radius: 10px;
    margin-bottom: 1.25rem;
}

.feature-card-icon svg {
    width: 24px;
    height: 24px;
    color: #ffffff;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.feature-card h4 {
    font-family: "Varela Round", Georgia, serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--gray-2);
    padding-bottom: 0.5rem;
    margin: 0;
}

.feature-card p {
    font-size: 0.925rem;
    color: var(--gray-1);
    line-height: 1.55;
    margin-bottom: 0;
}

.feature-card-link {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--blue-1);
    text-decoration: none;
    transition: color 0.2s ease;
}

.feature-card-link:hover {
    color: var(--blue-2);
}

/* ----- Power Features Accordion ----- */
.power-features-section {
    background: #ffffff;
    padding: 4rem max(1.5rem, calc(50% - 585px));
}

.power-features-section h2 {
    text-align: center;
    margin-bottom: 0.75rem;
}

.power-features-accordion {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.accordion-item {
    background: var(--gray-5);
    border: 1px solid var(--gray-3);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.accordion-item:hover {
    border-color: var(--blue-1);
}

.accordion-item[open] {
    background: #ffffff;
    border-color: var(--blue-1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    list-style: none;
}

.accordion-header::-webkit-details-marker {
    display: none;
}

.accordion-title {
    font-family: "Varela Round", Georgia, serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gray-2);
}

.accordion-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
}

.accordion-icon::before,
.accordion-icon::after {
    content: '';
    position: absolute;
    background: var(--blue-1);
    transition: transform 0.25s ease;
}

.accordion-icon::before {
    top: 50%;
    left: 4px;
    right: 4px;
    height: 2px;
    transform: translateY(-50%);
}

.accordion-icon::after {
    left: 50%;
    top: 4px;
    bottom: 4px;
    width: 2px;
    transform: translateX(-50%);
}

.accordion-item[open] .accordion-icon::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

.accordion-content {
    padding: 0 1.5rem 1.5rem;
}

.accordion-content p {
    font-size: 0.95rem;
    color: var(--gray-1);
    line-height: 1.6;
    margin: 0;
}

/* ----- Final CTA Section ----- */
.final-cta-section {
    text-align: center;
    padding: 4rem max(1.5rem, calc(50% - 585px));
}

.final-cta-content h2 {
    font-family: "Varela Round", Georgia, serif;
    font-size: 2.25rem;
    color: #ffffff;
    margin-bottom: 1.5rem;
    padding-bottom: 0;
}

.final-cta-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    margin-bottom: 2rem;
}

.summary-chip {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.95);
}

.final-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.final-trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    margin: 0.75rem auto 2rem;
    max-width: 980px;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ----- FAQ Accordion Styling ----- */
#faq-section .faq-accordion {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#faq-section .faq-item {
    background: #ffffff;
    border: 1px solid var(--gray-3);
    border-radius: 10px;
    overflow: hidden;
}

#faq-section .faq-item[open] {
    border-color: var(--blue-1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#faq-section .faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    list-style: none;
    font-family: "Varela Round", Georgia, serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--blue-2);
}

#faq-section .faq-question::-webkit-details-marker {
    display: none;
}

#faq-section .faq-question::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    opacity: 0.7;
}

#faq-section .faq-item[open] .faq-question::after {
    transform: rotate(-135deg);
}

#faq-section .faq-answer {
    padding: 0 1.5rem 1.5rem;
    font-size: 0.95rem;
    color: var(--gray-1);
    line-height: 1.6;
}

/* Scroll Reveal (JS adds .ah-animate + .in-view) */
html.ah-animate .value-bullet,
html.ah-animate .step,
html.ah-animate .storage-example,
html.ah-animate .feature-card,
html.ah-animate .accordion-item,
html.ah-animate .faq-item,
html.ah-animate .pricing-interactive-teaser,
html.ah-animate .after-trial-card,
html.ah-animate .value-prop-visual,
html.ah-animate .final-cta-content {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

html.ah-animate .in-view {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

html.ah-animate .feature-card:nth-child(2) { transition-delay: 0.06s; }
html.ah-animate .feature-card:nth-child(3) { transition-delay: 0.12s; }
html.ah-animate .feature-card:nth-child(4) { transition-delay: 0.06s; }
html.ah-animate .feature-card:nth-child(5) { transition-delay: 0.12s; }
html.ah-animate .feature-card:nth-child(6) { transition-delay: 0.18s; }

/* Mobile Sticky CTA */
.mobile-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.92);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.10);
    transform: translateY(110%);
    transition: transform 0.25s ease;
    display: none;
}

.mobile-sticky-cta.visible {
    transform: translateY(0);
}

.mobile-sticky-cta-inner {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: center;
}

.mobile-sticky-cta .btn-primary-cta,
.mobile-sticky-cta .btn-secondary-cta {
    width: 100%;
    max-width: none;
    padding: 0.85rem 0.9rem;
    text-transform: none;
    letter-spacing: 0;
}

.mobile-sticky-cta .btn-primary-cta::after {
    display: none;
}

.mobile-sticky-cta .btn-secondary-cta {
    color: var(--blue-2) !important;
    border-color: rgba(4, 115, 169, 0.25);
    background: rgba(4, 115, 169, 0.04) !important;
}

.mobile-sticky-cta-close {
    appearance: none;
    border: 0;
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.72);
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.mobile-sticky-cta-close:focus-visible {
    outline: 3px solid rgba(0, 0, 0, 0.35);
    outline-offset: 2px;
}

/* ================================================
   APP HOSTING - RESPONSIVE STYLES
   ================================================ */
@media (max-width: 900px) {
    .value-prop-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .value-prop-visual {
        order: -1;
    }

    .value-prop-visual img {
        max-width: 320px;
    }

    .feature-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 800px) {
    #hero-section.app-hosting-hero h1 {
        font-size: 2rem;
    }

    #hero-section.app-hosting-hero .hero-subhead {
        font-size: 1.05rem;
    }

    .proof-chips {
        gap: 0.5rem;
    }

    .proof-chip {
        font-size: 0.8rem;
        padding: 0.5rem 0.875rem;
    }

    .storage-examples-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin: 0 auto;
    }

    .included-grid {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
}

@media (max-width: 600px) {
    #hero-section.app-hosting-hero h1 {
        font-size: 1.75rem;
    }

    .hero-cta-group {
        flex-direction: column;
        align-items: center;
    }

    .btn-primary-cta,
    .btn-secondary-cta {
        width: 100%;
        max-width: 300px;
    }

    .value-prop-content h2 {
        font-size: 1.75rem;
    }

    .value-bullet {
        grid-template-columns: 44px 1fr;
    }

    .value-bullet-icon {
        width: 44px;
        height: 44px;
    }

    .feature-cards-grid {
        grid-template-columns: 1fr;
    }

    .feature-card {
        padding: 1.5rem;
    }

    .how-it-works-box {
        padding: 1.5rem;
    }

    .after-trial-card {
        padding: 1.5rem;
    }

    .final-cta-content h2 {
        font-size: 1.75rem;
    }

    .final-cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .final-cta-buttons .btn-primary-cta,
    .final-cta-buttons .btn-secondary-cta {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .mobile-sticky-cta {
        display: block;
        bottom: 64px;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .proof-chip,
    .btn-primary-cta,
    .btn-secondary-cta,
    .feature-card,
    .storage-example,
    .accordion-item,
    .accordion-icon::before,
    .accordion-icon::after {
        transition: none;
    }

    .btn-primary-cta:hover,
    .feature-card:hover {
        transform: none;
    }

    #hero-section.app-hosting-hero::before,
    .btn-primary-cta::after,
    .proof-strip__track,
    .ah-proof-track,
    .ah-autoscale-bars .ah-bar {
        animation: none !important;
    }

    .proof-strip__marquee,
    .ah-proof-marquee {
        overflow: visible;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .proof-strip__track,
    .ah-proof-track {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        min-width: 0;
        transform: none !important;
        gap: var(--proof-strip-gap, 0.65rem);
    }

    .proof-strip__chip,
    .ah-proof-chip {
        margin-right: 0;
    }

    .proof-strip__track > [aria-hidden="true"],
    .ah-proof-track > [aria-hidden="true"] {
        display: none;
    }
}

/* ================================================
   APP HOSTING DEV - DESIGN ENHANCEMENTS
   Phase 1-6 Implementation
   ================================================ */

/* ----- PHASE 1: Hero Section Enhancements ----- */

/* 1.1 Grid pattern overlay for depth */
#hero-section.app-hosting-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

/* Floating geometric shapes for visual interest */
.hero-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.hero-shape-1 {
    width: 400px;
    height: 400px;
    top: -100px;
    right: 10%;
    animation: ah-float 12s ease-in-out infinite;
}

.hero-shape-2 {
    width: 300px;
    height: 300px;
    bottom: -80px;
    left: 5%;
    animation: ah-float 15s ease-in-out infinite reverse;
}

@keyframes ah-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -20px) scale(1.05); }
}

/* 1.2 Enhanced Typography */
#hero-section.app-hosting-hero h1 {
    font-weight: 800;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.25), 0 2px 10px rgba(0, 0, 0, 0.15);
    letter-spacing: -0.03em;
}

#hero-section.app-hosting-hero h1 .ah-title-accent {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    font-size: 0.85em;
}

/* 1.3 Enhanced Proof Chips */
.proof-chip {
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 0.7rem 1.15rem;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.proof-chip:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.proof-chip-icon {
    background: #4ade80;
    color: #0f172a;
    font-size: 0.65rem;
    width: 20px;
    height: 20px;
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.4);
}

/* 1.4 Enhanced CTA Button Hierarchy */
.btn-primary-cta {
    background: linear-gradient(135deg, #00e664 0%, #00c756 100%) !important;
    box-shadow: 0 6px 24px rgba(0, 230, 100, 0.35), 0 2px 8px rgba(0, 230, 100, 0.2);
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-primary-cta:hover {
    background: linear-gradient(135deg, #00d45c 0%, #00b34d 100%) !important;
    box-shadow: 0 10px 36px rgba(0, 230, 100, 0.45), 0 4px 12px rgba(0, 230, 100, 0.25);
    transform: translateY(-3px);
}

.btn-secondary-cta {
    border: 2px solid rgba(255, 255, 255, 0.55);
    font-weight: 600;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.btn-secondary-cta:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.85);
    transform: translateY(-2px);
}

/* ----- PHASE 2: Value Proposition Enhancements ----- */

/* 2.1 Enhanced Value Bullets with accent border */
.value-bullet {
    padding: 1.25rem 1.5rem 1.25rem 1.25rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-left: 4px solid #0ea5e9;
    border-radius: 0 14px 14px 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.value-bullet:hover {
    transform: translateX(8px);
    box-shadow: -4px 4px 24px rgba(14, 165, 233, 0.15), 0 4px 16px rgba(0, 0, 0, 0.06);
    border-left-color: #0284c7;
}

.value-bullet-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.3);
    transition: transform 0.3s ease;
}

.value-bullet:hover .value-bullet-icon {
    transform: scale(1.08) rotate(-3deg);
}

.value-bullet-icon svg {
    width: 28px;
    height: 28px;
}

/* 2.2 Autoscale diagram enhancement */
.ah-autoscale-wrap {
    max-width: 420px;
    transform: scale(1.05);
}

.ah-autoscale-wrap .ah-autoscale-img {
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.12));
    position: relative;
    z-index: 2;
}

/* 2.3 Enhanced animated bars */
.ah-autoscale-bars {
    opacity: 1;
    /* Align animated overlay to the SVG goalposts (cloudlet-diagram-custom-5.svg). */
    left: 3.692%;
    width: 88.784%;
    bottom: 9.275%;
    transform: none;
    z-index: 1;
    height: 22.45%;
    /* Split into Pay/Free groups to match the SVG’s brace segments + middle gap. */
    grid-template-columns: repeat(5, 11.5684%) 9.6475% repeat(3, 10.8369%);
    gap: 0;
}

.ah-autoscale-bars .ah-bar {
    background: linear-gradient(180deg, #10b981 0%, #34d399 50%, rgba(52, 211, 153, 0.2) 100%);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4), 0 10px 24px rgba(16, 185, 129, 0.25);
    border-radius: 6px;
    width: 70%;
    justify-self: center;
}

/* Skip the SVG’s middle gap column. */
.ah-autoscale-bars .ah-bar:nth-child(6) { grid-column: 7; }
.ah-autoscale-bars .ah-bar:nth-child(7) { grid-column: 8; }
.ah-autoscale-bars .ah-bar:nth-child(8) { grid-column: 9; }

@keyframes ah-bars-enhanced {
    0%, 100% {
        transform: scaleY(0.2);
        opacity: 0.6;
        filter: brightness(0.9);
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
        filter: brightness(1.1);
    }
}

.ah-autoscale-bars .ah-bar {
    animation: ah-bars-enhanced 2.2s ease-in-out infinite;
}

/* Free / Dynamic (Available) bars: match the SVG's white + dark outline. */
.ah-autoscale-bars .ah-bar:nth-child(n+6) {
    background: #ffffff;
    border: 2px solid #111111;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    animation-name: ah-bars-available;
}

@keyframes ah-bars-available {
    0%, 100% {
        transform: scaleY(0.2);
    }
    50% {
        transform: scaleY(1);
    }
}

/* ----- PHASE 3: Pricing Section Enhancements ----- */

/* 3.1 Enhanced Range Slider */
.pricing-interactive-teaser input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    background: linear-gradient(90deg, #e2e8f0 0%, #e2e8f0 100%);
    border-radius: 6px;
    outline: none;
    margin: 0.5rem 0;
}

.pricing-interactive-teaser input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 3px solid #0ea5e9;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35), 0 2px 6px rgba(0, 0, 0, 0.1);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pricing-interactive-teaser input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 18px rgba(14, 165, 233, 0.45), 0 3px 8px rgba(0, 0, 0, 0.12);
}

.pricing-interactive-teaser input[type="range"]::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.05);
}

.pricing-interactive-teaser input[type="range"]::-moz-range-thumb {
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 3px solid #0ea5e9;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35);
    cursor: grab;
}

/* 3.2 Enhanced Results Cards */
.pricing-interactive-teaser .pit-pill {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(14, 165, 233, 0.15);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.pricing-interactive-teaser .pit-pill:hover {
    border-color: rgba(14, 165, 233, 0.35);
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.12);
    transform: translateY(-2px);
}

.pricing-interactive-teaser .pit-pill strong {
    font-size: 1.15rem;
    color: #0f172a;
}

/* 3.3 Tier Badge Enhancement */
.pricing-interactive-teaser .pit-tier {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #64748b;
    padding: 0.25rem 0.6rem;
    background: rgba(14, 165, 233, 0.08);
    border-radius: 6px;
    margin-top: 0.25rem;
}

.pricing-interactive-teaser .pit-tier::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #0ea5e9;
    border-radius: 50%;
}

/* ----- PHASE 4: Feature Cards Enhancements ----- */

/* 4.1 Featured Card - Subtle highlight */
.feature-card.featured {
    border-color: rgba(0, 230, 100, 0.45);
    box-shadow: 0 4px 16px rgba(0, 230, 100, 0.12);
}

/* 4.2 Enhanced Card Hover States */
.feature-card {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12), 0 12px 24px rgba(0, 0, 0, 0.06);
    border-color: #0ea5e9;
}

.feature-card.featured:hover {
    border-color: rgba(0, 230, 100, 0.6);
    box-shadow: 0 24px 48px rgba(0, 230, 100, 0.15), 0 12px 24px rgba(0, 0, 0, 0.06);
}

/* 4.3 Icon Enhancement */
.feature-card-icon {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 16px rgba(41, 167, 230, 0.25);
}

.feature-card:hover .feature-card-icon {
    transform: scale(1.12) rotate(5deg);
    box-shadow: 0 10px 24px rgba(41, 167, 230, 0.35);
}

/* ----- PHASE 5: Tables + FAQ Enhancements ----- */

/* 5.1 Pricing Tables Visual Enhancement */
#cloudlet-prices-grid {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

#cloudlet-prices-grid thead tr:first-child th:nth-child(2) {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: #ffffff;
}

#cloudlet-prices-grid thead tr:first-child th:nth-child(3) {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #ffffff;
}

/* 5.2 Volume Table Row Highlighting */
#volume-table tbody tr {
    transition: all 0.2s ease;
}

#volume-table tbody tr:hover {
    background: rgba(14, 165, 233, 0.04);
}

#volume-table tbody tr:nth-child(3) {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
    position: relative;
}

#volume-table tbody tr:nth-child(3) td:first-child::before {
    content: 'Popular';
    display: inline-block;
    background: #10b981;
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    margin-left: 0.5rem;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* 5.3 Enhanced FAQ Accordion */
#faq-section .faq-item {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    margin-bottom: 0.85rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

#faq-section .faq-item:hover {
    border-color: #94a3b8;
}

#faq-section .faq-item[open] {
    border-color: #0ea5e9;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04);
}

#faq-section .faq-question {
    padding: 1.35rem 1.75rem;
    font-weight: 700;
    transition: background 0.2s ease;
}

#faq-section .faq-item:hover .faq-question {
    background: rgba(14, 165, 233, 0.03);
}

#faq-section .faq-item[open] .faq-question {
    background: rgba(14, 165, 233, 0.05);
    border-bottom: 1px solid rgba(14, 165, 233, 0.15);
}

#faq-section .faq-question::after {
    width: 12px;
    height: 12px;
    border-color: #0ea5e9;
    opacity: 1;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#faq-section .faq-answer {
    padding: 1.25rem 1.75rem 1.75rem;
}

/* ----- PHASE 6: Final CTA Section Enhancements ----- */

/* 6.1 Enhanced Background with Radial Glow */
.final-cta-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(14, 165, 233, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 20% 80%, rgba(0, 230, 100, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(139, 92, 246, 0.10) 0%, transparent 50%),
        linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
}

.final-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.5;
    pointer-events: none;
}

/* Animated glow pulse */
.final-cta-section::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    animation: cta-glow-pulse 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cta-glow-pulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.15); }
}

.final-cta-content {
    position: relative;
    z-index: 1;
}

/* 6.2 Enhanced Trust Badges */
.trust-badge {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.65rem 1.1rem;
    font-weight: 500;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.trust-badge:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* 6.3 Summary Chips Enhancement */
.summary-chip {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 0.6rem 1.15rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.summary-chip:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

/* Social proof enhancement for Final CTA */
.final-cta-social-proof {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.final-cta-social-proof strong {
    color: #4ade80;
}

/* ----- Additional Polish ----- */

/* Smoother scroll reveal animations */
html.ah-animate .value-bullet,
html.ah-animate .step,
html.ah-animate .storage-example,
html.ah-animate .feature-card,
html.ah-animate .accordion-item,
html.ah-animate .faq-item,
html.ah-animate .pricing-interactive-teaser,
html.ah-animate .after-trial-card,
html.ah-animate .value-prop-visual,
html.ah-animate .final-cta-content {
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Feature card stagger improvements */
html.ah-animate .feature-card:nth-child(1) { transition-delay: 0s; }
html.ah-animate .feature-card:nth-child(2) { transition-delay: 0.08s; }
html.ah-animate .feature-card:nth-child(3) { transition-delay: 0.16s; }
html.ah-animate .feature-card:nth-child(4) { transition-delay: 0.08s; }
html.ah-animate .feature-card:nth-child(5) { transition-delay: 0.16s; }
html.ah-animate .feature-card:nth-child(6) { transition-delay: 0.24s; }

/* Value bullet stagger */
html.ah-animate .value-bullet:nth-child(1) { transition-delay: 0s; }
html.ah-animate .value-bullet:nth-child(2) { transition-delay: 0.1s; }
html.ah-animate .value-bullet:nth-child(3) { transition-delay: 0.2s; }

/* Mobile responsive adjustments for enhancements */
@media (max-width: 900px) {
    .ah-autoscale-wrap {
        transform: scale(1);
        max-width: 340px;
    }
}

@media (max-width: 600px) {
    .value-bullet {
        padding: 1rem 1.25rem 1rem 1rem;
        border-radius: 0 10px 10px 0;
    }

    .value-bullet:hover {
        transform: translateX(4px);
    }

    #faq-section .faq-question {
        padding: 1.15rem 1.25rem;
    }

    #faq-section .faq-answer {
        padding: 1rem 1.25rem 1.5rem;
    }

    .final-cta-section::after {
        width: 300px;
        height: 300px;
    }
}

/* Reduced motion - disable new animations */
@media (prefers-reduced-motion: reduce) {
    .hero-shape,
    .final-cta-section::after {
        animation: none !important;
    }

    .value-bullet:hover,
    .feature-card:hover,
    .proof-chip:hover,
    .trust-badge:hover,
    .pricing-interactive-teaser .pit-pill:hover {
        transform: none;
    }

    .feature-card:hover .feature-card-icon,
    .value-bullet:hover .value-bullet-icon {
        transform: none;
    }
}