/*----------------------------------------------------------------------------

   Variables

----------------------------------------------------------------------------*/
:root {
    --lightest-bg-color: hsl(221 50% 95% / 1);
    --lighter-bg-color: hsl(221 50% 90% / 1);
    --darker-bg-color: #426bc0;
    --darkest-bg-color: #2a4276;
    --shield-color: rgb(66, 108, 192, .9);
    --card-bg-color: white;
    --card-border-color: hsl(221 50% 90% / 1);
    --card-border-radius: 8px;
    --highlight-color: #8ac87e;
    --highlight-active-color: #A8D49F;
    --highlight-good-color: #8ac87e;
    --highlight-bad-color: #f26983;    
    --highlight-subtle-color: #ebf3e9;
    --cta-color: #f3840c;
    --cta-active-color: #f59d3d;
    --cta-inactive-color: #F5D9BA;
    --darker-cta-color: #426bc0;
    --darker-cta-active-color: hsl(220 50% 61% / 1);
    --darker-cta-inactive-color: #426bc026;
    --darkest-cta-color: #2a4276;
    --darkest-cta-active-color: hsl(221 48% 41% / 1);
    --text-color: #56585f;
    --text-placeholder-color: hsl(222 5% 65% / 1);
    --dark-text-color: #4c5b74;
    --dark-text-active-color: #5E708F;
}

/*----------------------------------------------------------------------------

   Fonts

----------------------------------------------------------------------------*/

@font-face {
    font-family: "myriad-pro";
    src: url("https://five.cdn.directmailmac.com/fonts/myriadpro-it-webfont.woff2") format("woff2"),
         url("https://five.cdn.directmailmac.com/fonts/myriadpro-it-webfont.woff") format("woff");
    font-display: swap;
    font-style: italic;
    font-weight: 400;
}

@font-face {
    font-family: "myriad-pro";
    src: url("https://five.cdn.directmailmac.com/fonts/myriadpro-light-webfont.woff2") format("woff2"),
         url("https://five.cdn.directmailmac.com/fonts/myriadpro-light-webfont.woff") format("woff");
    font-display: swap;
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: "myriad-pro";
    src: url("https://five.cdn.directmailmac.com/fonts/myriadpro-regular-webfont.woff2") format("woff2"),
         url("https://five.cdn.directmailmac.com/fonts/myriadpro-regular-webfont.woff") format("woff");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "myriad-pro";
    src: url("https://five.cdn.directmailmac.com/fonts/myriadpro-semibold-webfont.woff2") format("woff2"),
         url("https://five.cdn.directmailmac.com/fonts/myriadpro-semibold-webfont.woff") format("woff");
    font-display: swap;
    font-style: normal;
    font-weight: 600;
}

/*----------------------------------------------------------------------------

   Viewport Rules

----------------------------------------------------------------------------*/

@viewport{
	width: device-width;
}

/*----------------------------------------------------------------------------

   Resets

----------------------------------------------------------------------------*/

* {
	box-sizing: border-box;
}
body, html, div, blockquote, img, label, p, a, h1, h2, h3, h4, h5, h6, pre, ul,
ol, li, dl, dt, dd, form, fieldset, input, th, td, figure {
	border: 0;
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}
img,
video {
	display: block;
	height: auto;
	max-width: 100%;
}
a, :focus {
	outline: 0;
}
a {
	transition: color 0.25s ease-in-out 0s, background-color 0.25s ease-in-out 0s, border-bottom 0.25s ease-in-out 0s;
}
a, a:visited {
	border-bottom: 1px solid var(--cta-color);
	color: var(--text-color);
	text-decoration: none;
}
a:hover, a:active {
	border-color: var(--text-color);
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/*----------------------------------------------------------------------------

   Utility Classes

----------------------------------------------------------------------------*/

.clear:after {
	clear: both;
	content: "";
	display: block;
	height: 0;
	visibility: hidden;
}

/*----------------------------------------------------------------------------

   Global Design Elements & Structure

----------------------------------------------------------------------------*/

html,
body {
	background-color: var(--darker-bg-color);
	position: relative;
}
div[role=main] {
	background-color: var(--lightest-bg-color);
	padding: 2.5em 3.75%;
	position: relative;
}
.wrapper {
	margin: 0 auto;
	max-width: 75em;
	position: relative;
}	
a.btn,
a.btn:visited {
	background-color: var(--cta-color);
	border: none;
	border-radius: 0.5em;
	color: white;
	font-size: 0.875em;
	font-weight: 600;
	letter-spacing: 0.0875em;
	padding: 1.25em 2em;
	text-transform: uppercase;
	-webkit-border-radius: 0.5em;
	white-space: nowrap;
}
a.btn:hover,
a.btn:active {
	background-color: var(--cta-active-color);
	color: white;
}
a.learn-more,
a.learn-more:visited {
	background-color: transparent;
	border: 2px solid var(--cta-color);
	border-radius: 0.5em;
	padding: 0.9375em 1.875em;
	-webkit-border-radius: 0.5em;
}
a.learn-more:hover,
a.learn-more:active {
	background-color: var(--cta-color);
	color: white;
}
img.brand-icons {
	margin-bottom: 1em;
	width: 64px;
}
img.align-left, figure.align-left {
	margin: 0.25em 0.9375em 0.5625em 0;
	float: left;
}
img.align-right, figure.align-right {
	margin: 0.25em 0 0.9375em 0.5625em;
	float: right;
}
img.align-center, figure.align-center {
	margin: 0 auto;
}
video.no-controls::-webkit-media-controls {
	display: none !important;
}
figure.align-center figcaption {
	text-align: center;
}
figcaption {
	font-size: 0.875em;
	font-style: italic;
	margin-top: 0.5em;
	padding: 0.5em;
	text-align: left;
}
.gallery-item {
	float: left;
	margin: 1% 0;
	padding: 0 1%;
}
@media only screen and (min-width: 35.9375em) { 
	a.btn {
		padding: 1.5em 2.5em;
	}
}

/*----------------------------------------------------------------------------

   Form Elements

----------------------------------------------------------------------------*/

form,
fieldset,
form p {
	position: relative;
	font-size: 1em;
}
form ul,
form ol {
	list-style: none;
	padding-left: 0;
}
form ul ul,
form ul ol,
form ol ul,
form ol ol {
	list-style: none;
	margin: 0;
	padding-left: 0;
}
form li {
	margin-bottom: 1.44444444em;
}
label {
	color: var(--darkest-bg-color);
	display: inline-block;
	font-family: 'myriad-pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: inherit;
	line-height: inherit;
	cursor: pointer;
}
input[type=text], input[type=email], input[type=url], input[type=password],
input[type=search], input[type=color], input[type=date], input[type=datetime],
input[type=datetime-local], input[type=number], input[type=range], input[type=tel],
input[type=time], input[type=week], input[type=file], textarea, select, div.hosted-field {
	border: 1px solid var(--lighter-bg-color);
	border-left-width: 6px;
	border-radius: 0;
	color: var(--text-color);
	display: inline-block;
	font-family: 'myriad-pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: inherit;
	font-weight: 400;
	padding: 0.5em 0.625em;
    appearance: none;
}
input[type=text], input[type=email], input[type=url], input[type=password],
input[type=search], input[type=color], input[type=date], input[type=datetime],
input[type=datetime-local], input[type=number], input[type=range], input[type=tel],
input[type=time], input[type=week], input[type=file], textarea, div.hosted-field {
	transition: all 0.5s ease-in-out 0s;
	width: 100%;
}
input[type=text], input[type=email], input[type=url], input[type=password],
input[type=search], input[type=color], input[type=date], input[type=datetime],
input[type=datetime-local], input[type=tel], input[type=time], input[type=week],
input[type=file], div.hosted-field {
	max-width: 100%;
	width: 24.375em;
}
input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, input[type=password]:focus,
input[type=search]:focus, input[type=color]:focus, input[type=date]:focus, input[type=datetime]:focus,
input[type=datetime-local]:focus, input[type=number]:focus, input[type=range]:focus, input[type=tel]:focus,
input[type=time]:focus, input[type=week]:focus, textarea:focus, select:focus, div.hosted-field.braintree-hosted-fields-focused {
	border-color: var(--cta-color);
}
textarea {
	height: 15.625em;
	line-height: inherit;
	resize: none;
	overflow: auto;
}
select {
	cursor: pointer;
	font-size: inherit;
	font-weight: 400;
	max-width: 100%;
	width: 24.375em;
	transition: all 0.5s ease-in-out 0s;
}
@media only screen and ( -webkit-min-device-pixel-ratio: 0 ) {
	select {
		background-image: url('https://five.cdn.directmailmac.com/images/select.v2.png');
		background-position: 100% 50%;
		background-repeat: no-repeat;
		background-size: 30px 20px;
	}
}
select optgroup {
	font-style: normal;
	font-weight: 400;
}
select option {
	padding: 0 1.07142857em;
}
input[type=radio], input[type=checkbox] {
	border: 1px solid var(--lighter-bg-color) !important;
	display: inline-block;
	margin-right: 0.45454545em;
	position: relative;
	vertical-align: middle;
}
input[type=submit], button[type=submit], input[type=button] {
	background-color: var(--highlight-color);
	border-radius: 0.5em;
	color: white;
	font-family: 'myriad-pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 1em;
	padding: 1.125em 1.5em;
	transition: all 0.25s ease-in-out 0s;
	width: auto;
    appearance: none;
}
input[type=submit]:hover, button[type=submit]:hover, input[type=button]:hover {
	background-color: var(--highlight-active-color);
	cursor: pointer;
}
::placeholder {
	color: var(--text-placeholder-color);
}

/*----------------------------------------------------------------------------

   Font Awesome
   https://icomoon.io/app/#/select/font

----------------------------------------------------------------------------*/

.fa-ul {
    padding-left: 0;
    margin-left: 2.14285714em;
    list-style-type: none;
}

.fa-ul > li {
    position: relative;
}

.fa-li {
    position: absolute;
    left: -2.14285714em;
    width: 2.14285714em;
    top: .14285714em;
    text-align: center;
}

@font-face {
  font-family: 'icomoon';
  src:
    url('https://five.cdn.directmailmac.com/fonts/icomoon.v5.ttf?9j2my8') format('truetype'),
    url('https://five.cdn.directmailmac.com/fonts/icomoon.v5.woff?9j2my8') format('woff'),
    url('https://five.cdn.directmailmac.com/fonts/icomoon.v5.svg?9j2my8#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.fa {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-language:before {
	content: "\f1ab";
}

.fa-comments:before {
	content: "\f086";
}

.fa-search:before {
	content: "\f002";
}

.fa-heart:before {
	content: "\f004";
}

.fa-star:before {
	content: "\f005";
}

.fa-check:before {
	content: "\f00c";
}

.fa-close:before {
	content: "\f00d";
}

.fa-remove:before {
	content: "\f00d";
}

.fa-times:before {
	content: "\f00d";
}

.fa-cog:before {
	content: "\f013";
}

.fa-gear:before {
	content: "\f013";
}

.fa-repeat:before {
	content: "\f01e";
}

.fa-rotate-right:before {
	content: "\f01e";
}

.fa-refresh:before {
	content: "\f021";
}

.fa-lock:before {
	content: "\f023";
}

.fa-tags:before {
	content: "\f02c";
}

.fa-font:before {
	content: "\f031";
}

.fa-image:before {
	content: "\f03e";
}

.fa-photo:before {
	content: "\f03e";
}

.fa-picture-o:before {
	content: "\f03e";
}

.fa-question-circle:before {
	content: "\f059";
}

.fa-ban:before {
	content: "\f05e";
}

.fa-fire:before {
	content: "\f06d";
}

.fa-plane:before {
	content: "\f072";
}

.fa-calendar:before {
	content: "\f073";
}

.fa-bar-chart:before {
	content: "\f080";
}

.fa-bar-chart-o:before {
	content: "\f080";
}

.fa-cogs:before {
	content: "\f085";
}

.fa-gears:before {
	content: "\f085";
}

.fa-twitter:before {
	content: "\e900";
}

.fa-facebook:before {
	content: "\f09a";
}

.fa-facebook-f:before {
	content: "\f09a";
}

.fa-tasks:before {
	content: "\f0ae";
}

.fa-bars:before {
	content: "\f0c9";
}

.fa-navicon:before {
	content: "\f0c9";
}

.fa-reorder:before {
	content: "\f0c9";
}

.fa-envelope:before {
	content: "\f0e0";
}

.fa-bolt:before {
	content: "\f0e7";
}

.fa-flash:before {
	content: "\f0e7";
}

.fa-minus-square-o:before {
	content: "\f147";
}

.fa-external-link-square:before {
	content: "\f14c";
}

.fa-google:before {
	content: "\f1a0";
}

.fa-object-group:before {
	content: "\f247";
}

.fa-id-badge:before {
	content: "\f2c1";
}

.fa-cc-visa:before {
	content: "\f1f0";
}

.fa-cc-mastercard:before {
	content: "\f1f1";
}

.fa-cc-discover:before {
	content: "\f1f2";
}

.fa-cc-amex:before {
	content: "\f1f3";
}

.fa-exclamation-triangle:before {
	content: "\f071";
}

/*----------------------------------------------------------------------------

   Typography

----------------------------------------------------------------------------*/

body {
	color: var(--text-color);
	font-family: 'myriad-pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-style: normal;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%;
	    -ms-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6 {
	color: var(--darkest-bg-color);
	font-weight: 600;
}
h1 {
	font-size: 1.75em;
	line-height: 1.25;
	margin-bottom: 0.5em;
}
h2 {
	font-size: 1.5em;
	line-height: 1.25;
	margin-bottom: 0.5em;
}
h3 {
	font-size: 1.3125em;
	line-height: 1.33333333;
	margin-bottom: 0.42857143em;
}
h4 {
	font-size: 1.125em;
	line-height: 1.55555556;
	margin-bottom: 0.5em;
}
h5 {
	font-size: 1em;
	line-height: 1.5;
	margin-bottom: 0.5em;
}
h6 {
	font-size: 0.875em;
	line-height: 1.5;
	margin-bottom: 0.5em;
}
p {
	font-size: 1em;
	line-height: 1.5625;
	margin-bottom: 1.5625em;
}
p.footnote {
	text-align: center;
}
blockquote {
	border-left: 6px solid var(--lighter-bg-color);
	margin: 2em 0;
	padding: 1.875em 1.875em 1.875em 2.1875em;
}
blockquote p {
    font-size: 1.2em;
	font-style: italic;
	line-height: 1.5625;
	margin-bottom: 1.375em;
	quotes: '\201c' '\201d';
	text-indent: -0.33333333em;
}
blockquote p:first-child:before, q:before, q q:before {
	content: open-quote;
}
blockquote p:last-child:after, q:after, q q:after {
	content: close-quote;
}
blockquote p:last-child {
	margin-bottom: 0;
}
q {
	quotes: '\201c' '\201d' '\2018' '\2019';
}
strong, b {
	font-weight: 600;
}
em, i, cite {
	font-style: italic;
}
small {
	font-size: 0.75em;
	line-height: inherit;
}
strike, del {
	text-decoration: line-through;
}
abbr, acronym, ins {
	border-bottom: 1px dotted;
}
abbr, acronym {
	cursor: help;
	text-transform: uppercase;
}
ins {
	text-decoration: none;
}
sup, sub {
	font-size: 0.75em;
	line-height: 1;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.333em;
}
sub {
	bottom: -0.333em;
}
address {
	font-style: normal;
	margin-bottom: 1.5625em;
}
pre {
	background-color: var(--lightest-bg-color);
	border: 1px solid var(--lighter-bg-color);
	line-height: 24px;
	margin: 40px 0;
	overflow: auto;
	overflow-y: hidden;
	padding: 0 25px 25px;
	white-space: pre;
}
code {
	background-color: var(--lightest-bg-color);
	color: var(--dark-text-color);
	font-family: Courier, Monaco, monospace;
	font-size: 95%;
	padding: 0.11111111em 0.22222222em;
}

/*----------------------------------------------------------------------------

   Lists

----------------------------------------------------------------------------*/

ul, ol, dl {
	font-size: 1em;
	line-height: 1.5625;
	margin-bottom: 1.5625em;
}
ul {
	list-style: disc;
	padding-left: 1em;
}
ul ul, ol ul {
	list-style: circle;
}
ol {
	list-style: decimal;
	padding-left: 1.3125em;
}
ul ol, ol ol {
	list-style: lower-alpha;
}
ol ol ol {
	list-style: decimal;
}
ul ul, ol ul, ul ol, ol ol {
	font-size: inherit;
	margin: 0.5em 0;
}
ul ul, ol ul {
	padding-left: 1em;
}
ul ol, ol ol {
	padding-left: 1.125em;
}
dt {
	color: var(--darkest-bg-color);
	font-size: inherit;
	font-weight: 600;
}
li, dd {
	margin-bottom: 0.5em;
}

/*----------------------------------------------------------------------------

   Tables

----------------------------------------------------------------------------*/

table {
	background-color: white;
	border: 1px solid var(--lighter-bg-color);
	font-family: inherit;
	font-size: 1em;
	line-height: 1.5625;
	margin: 2.5em 0;
	width: 100%;
}
caption {
	color: var(--dark-text-color);
	font-size: 1.125em;
	font-weight: 400;
	line-height: 1.33333333;
	margin-bottom: 0.66666667em;
	text-align: left;
}
thead {
	background-color: var(--lightest-bg-color);
}
tbody tr:nth-of-type(2n) {
	background-color: var(--lightest-bg-color);
}
th {
	border-bottom: 1px solid var(--lighter-bg-color);
	padding: 0.75em 0.9375em;
	text-align: left;
	vertical-align: top;
    font-weight: bold;
}
td {
	padding: 0.75em 0.9375em;
	text-align: left;
	vertical-align: top;
}
tfoot {
	font-style: italic;
}
table.feature-compare {
    border-top: none;
    border-left: none;
    border-right: none;
}
table.feature-compare tr.group-header td {
    padding-top: 4em;
    font-style: italic;
}
table.feature-compare tbody:nth-child(2) tr.group-header td {
    padding-top: 1em;
}
table.feature-compare .fa-check {
    color: var(--highlight-good-color);
    font-size: 1.5em;
}
table.feature-compare .fa-times {
    color: var(--highlight-bad-color);
    font-size: 1.5em;
}

/*----------------------------------------------------------------------------

   Header & Nav

----------------------------------------------------------------------------*/

header[role=banner] {
	background-color: white;
	border-bottom: 1px solid var(--lighter-bg-color);
	padding: 0.9375em 3.75% 1px;
	position: relative;
}
.logo {
	float: left;
	margin-bottom: 0.75em;
	position: relative;
}
.logo.hidden {
	visibility: hidden;
}
.logo a {
	border: none;
	color: var(--text-color);
	display: block;
	position: relative;
}
.logo img {
	display: inline;
	margin-right: 0.3125em;
	position: relative;
	top: 0.1875em;
	width: 42px;
	height: 42px;
}
.logo span {
	font-size: 1.375em;
	font-weight: 300;
	line-height: 1;
	left: 0;
	position: relative;
	top: -0.49090909em;
}
a.menu-toggle {
	border: none;
	color: var(--highlight-color);
	font-size: 1.4375em;
	line-height: 2;
	position: absolute;
	right: 0;
	top: 0;
}
a.menu-toggle:hover {
	color: var(--highlight-active-color);
}
.main-nav {
	background-color: var(--lightest-bg-color);
	clear: left;
	display: none;
	margin-bottom: 1em;
	position: relative;
}
.main-nav ul {
	line-height: 1;
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}
.main-nav li {
	border-bottom: 0.25em solid white;
	margin-bottom: 0;
}
.main-nav li a,
.main-nav li a:visited {
	border: none;
	color: var(--text-color);
	display: block;
	padding: 0.9375em 1.25em;
}
.main-nav li a:hover,
.main-nav li a:active {
	background-color: var(--darkest-bg-color);
	color: white;
}
.main-nav li a.btn {
	border-radius: 0;
	color: white;
	font-size: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	-webkit-border-radius: 0;
}
@media only screen and ( min-width: 22.5em ) {
	.logo span {
		left: auto;
		position: relative;
		top: -0.49090909em;
	}
}
@media only screen and ( min-width: 53.75em ) {
	header[role=banner] {
		padding-bottom: 1.5em;
		padding-top: 1.25em;
	}
	.logo {
		margin-bottom: 0;
	}
	.menu-toggle {
		display: none;
	}
	.main-nav {
		background-color: transparent;
		display: block !important;
		margin-bottom: 0;
		position: absolute;
		right: 0;
		top: 1em;
	}
	.main-nav li {
		border-bottom: none;
		float: left;
		margin-left: 1.5em;
	}
	.main-nav li a,
	.main-nav li a:visited {
		color: var(--darkest-bg-color);
		padding: 0;
	}
	.main-nav li a:hover,
	.main-nav li a:active {
		background-color: transparent;
		color: var(--darker-bg-color);
	}
	.main-nav li a.btn {
		background-color: transparent;
		border: 2px solid var(--cta-color);
		border-radius: 0.5em;
		color: var(--darkest-bg-color);
		font-size: inherit;
		margin-top: -1.375em;
		padding: 1.25em 2em 1.375em;
		text-transform: inherit;
		-webkit-border-radius: 0.5em;
		font-weight: 400;
	}
	.main-nav li a.btn:hover {
		background-color: var(--cta-color);
		color: white;
	}
}

/*----------------------------------------------------------------------------

   Footer

----------------------------------------------------------------------------*/

footer {
	background-color: var(--darker-bg-color);
	color: rgba(255, 255, 255, 0.7);
	padding: 2em 3.75%;
	position: relative;
}
footer > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.footer-nav {
	margin-bottom: 1.875em;
    flex-grow: 1;
}
.footer-nav ul {
	float: left;
	list-style: none;
	margin: 0;
	padding-left: 0;
	width: 50%;
}
.footer-nav ul:nth-of-type(2) {
	margin-right: 0;
}
.footer-nav li a,
.footer-nav li a:visited {
	color: rgba(255, 255, 255, 0.7);
	border: none;
}
.footer-nav li a:hover,
.footer-nav li a:active {
	color: white;
}
.newsletter {
	margin-bottom: 1.875em;
}
.newsletter h3 {
	color: white;
	font-size: 1.125em;
	line-height: 1.55555556;
}
.newsletter .iframe-container > iframe {
	border-radius: 0.25em;
}
.c-line {
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	padding-top: 1.25em;
	position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.c-line p {
	margin-bottom: 1em;
}
.c-line ul {
	list-style: none;
	margin: 0 auto;
	padding-left: 0;
}
.c-line li {
	display: inline-block;
	margin: 0 0.25em 0 0;
}
.c-line li a,
.c-line li a:visited {
	color: rgba(255, 255, 255, 0.7);
	display: block;
	border: none;
}
.c-line li a:hover,
.c-line li a:active {
	color: white;
}
.c-line li i {
	font-size: 1.25em;
}
@media only screen and ( min-width: 30em ) {
	.c-line p {
		margin-bottom: 0;
	}
    .c-line p:last-child {
        margin-bottom: 1em;
    }
	.c-line li {
		display: inline;
		margin: 0 0.75em 0 0;
        float: left;
	}
    .c-line li:last-child {
        margin-right: 0;
    }
}
@media only screen and ( min-width: 47.8125em ) {
	.footer-nav ul {
		margin: 0 0.75em 0 0;
		width: 11.875em;
	}
	.footer-nav ul:nth-of-type(2) {
		margin-right: 0;
	}
}

/*----------------------------------------------------------------------------

   Hero

----------------------------------------------------------------------------*/

.hero {
	background-color: var(--darker-bg-color);
	background-image: linear-gradient(var(--darker-bg-color), var(--darkest-bg-color));
	overflow: hidden;
	padding: 0 3.75%;
	position: relative;
	text-align: center;
}
.hero-content {
	margin: 0 auto;
	max-width: 44.375em;
	padding: 2em 0 3.25em;
	position: relative;
}
.hero-content.wide, .hero-content.semiwide {
    max-width: 54.375em;
}
.hero-content.wide a, .hero-content.semiwide a {
    margin-left: 0.5em;
    margin-right: 0.5em;
}
@media only screen and ( max-width: 34.3125em ) {
    .hero-content.wide a, .hero-content.semiwide a {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
}
.hero-image {
	padding: 1em 0 2em;
	overflow: visible;
}
.hero-screenshot{
	border-radius: 4px;
	box-shadow: 0 1em 2em rgba(0,0,25,0.3);
}
.hero-content .hero-app-icon {
	width: 110px;
	display: inline;
}
.hero-content h1 {
	color: white;
	font-size: 2em;
	font-weight: 300;
	line-height: 1.25;
	margin-bottom: 0.5em;
}
.hero-content h6 {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.07692308em;
    padding: 0.5em 1em;
    display: inline-block;
    border-radius: 0.5em;
    color: white;
    background-color: rgba(255, 255, 255, 0.2);
    margin-bottom: 1.5em;
}
.hero-content p {
	color: white;
	font-size: 1em;
	line-height: 1.5625;
	margin: 0 auto 2.25em;
	max-width: 20em;
}
.hero-content.wide p {
    max-width: 30em;
}
.hero-content p:last-child {
	margin-bottom: 0;
}
.hero-content p.button-container {
    max-width: 100%;
}
.hero-content p.button-container .btn {
    display: inline-block;
    margin-bottom: 1.125em;
}
.hero-content a, .hero-content a:visited {
	color: inherit;
}
.hero-content a.btn.inverted, 
.hero-content a.btn.inverted:visited {
	background-color: var(--darkest-cta-color);
	color: white;
    border: none;
}
.hero-content a.btn.inverted:hover, 
.hero-content a.btn.inverted:active {
	background-color: var(--darkest-cta-active-color);
	color: white;
    border: none;
}
.iphone-overlay {
	bottom: -500px;
	left: -60px;
	position: absolute;
	width: 240px;
	transition: all 1s ease-in-out 0s;
	z-index: 200;
}
/* 500px & wider */
@media only screen and (min-width: 31.25em) {
	.hero-content h1 {
		font-size: 2.5em;
	}
	.hero-content p {
		font-size: 1.125em;
		max-width: 21em;
	}
    .hero-content.wide p {
        max-width: 31.5em;
    }
}
/* 800px & wider */
@media only screen and (min-width: 50em) {
	.hero-content {
		padding: 3em 0 4em;
	}
	.hero-content h1 {
		font-size: 3em;
	}
	.hero-content p {
		font-size: 1.25em;
		max-width: 28em;
	}
    .hero-content.wide p {
        max-width: 42em;
    }
	.hero-image {
		padding: 0;
		height: 700px;
		flex: 1;
	}
	.hero-screenshot {
		position: absolute;
		height: 700px;
		border-radius: 9px;
		max-width: max-content;
	}
}
/* 860px & wider */
@media only screen and (min-width: 53.75em) {
	.hero-wrapper {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 5em 0 6em;
		overflow: visible;
	}
	.hero-content {
		padding-top: 4em;
	}
	.hero-content.horizontal {
		padding: 0 2em 0 0;
		flex: 0 0 37%;
		text-align: left;
	}
	.hero-content h6 {
        margin-bottom: 3em;
    }
	.hero-app-icon {
		margin: -4em 0 0 -10px;
	}
	.hero-content.horizontal p {
		margin-left: 0;
	}
	.hero-image {
		padding: 0;
		height: 700px;
		flex: 1;
	}
	.hero-screenshot {
		position: absolute;
		height: 700px;
		border-radius: 9px;
		max-width: max-content;
	}
}
/* 1350px & wider */
@media only screen and (min-width: 84.375em) {
	.iphone-overlay {
		bottom: -140px;
	}
}

/*----------------------------------------------------------------------------

   Logo Banner

----------------------------------------------------------------------------*/

.logo-banner {
	padding: 2.5em 0 4em;
}
.logo-banner h3 {
	text-align: center;
	margin-bottom: 1.333em;
}
.logo-banner ul {
	list-style: none;
	margin: 0 auto;
	padding-left: 0;
	text-align: center;
}
.logo-banner li {
	display: inline-block;
	margin: 0.5em 1.25em;
	vertical-align: middle;
	min-width: 100px;
	zoom: 60%;
}
.logo-banner li img {
	margin-left: auto;
	margin-right: auto;
}
@media only screen and (min-width: 41.25em) {
	.logo-banner {
		padding: 5.75em 0 6.25em;
	}
	.logo-banner li {
		zoom: 80%;
	}
}
@media only screen and (min-width: 77.375em) {
	.logo-banner li {
		min-width: 0px;
		zoom: 100%;
	}
}

/*----------------------------------------------------------------------------

   Whats New

----------------------------------------------------------------------------*/
.whats-new-container {
    max-width: 75em;
    margin: 2em auto 1em auto;
}

.whats-new {
    padding: 2em 2em;
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    background-color: var(--card-bg-color);
    position: relative;
    text-align: center;
    line-height: 1.5625;
}

.whats-new img {
    display: block;
    margin: 1em auto;
}

.whats-new .pill {
    position: absolute;
    left: 1em;
    top: -1em;
    padding: 0.5em 1em;
    background-color: var(--highlight-color);
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8em;
    border-radius: 0;
}

/*----------------------------------------------------------------------------

   What's New Page

----------------------------------------------------------------------------*/

.new-feature-overview {
	color: white;
	padding-bottom: 5em;
}
.whats-new-intro {
	padding: 3em 0;
	text-align: center;
}
.whats-new-intro h1,
.new-feature-details h2 {
	color: white;
	font-size: clamp(2em, 8vw, 3em);
	font-weight: 300;
	margin-bottom: .25em;
	line-height: 1;
}
.whats-new-intro p {
	font-size: clamp(1em, 4vw, 1.25em);
	line-height: 1.5625;
	max-width: 36em;
	margin: 0 auto;
}
.whats-new-intro a {
	display: inline-block;
	margin-top: 2em;
}
.new-feature-details {
	background-color: var(--lightest-bg-color);
	color: var(--text-color);
	padding: 4em 3.75% 4em;
}
.messages-details {
	padding-top: 4em;
}
.collaboration-details {
	padding-bottom: 4em;
}
.detail-header {
	width: 100%;
	margin-bottom: 4em;
	text-align: center;
}
.detail-header p {
	font-size: clamp(1em, 4vw, 1.25em);
	line-height: 1.3;
	margin: 0 auto;
	max-width: 36em;
	color: var(--darkest-bg-color);
}
.new-feature-details h2 {
	color: var(--darkest-bg-color)
}
.feature-detail p {
	font-size: 1em;
	margin-bottom: 1em;
}
.feature-detail img:not(.no-treatment) {
	border-radius: .5em;
	border: solid 1px #ddd;
	box-shadow: 0 5px 10px rgba(0,0,50,0.15);
}
.feature-detail figure {
	margin: 0 0 2em;
}
.detail-text p:last-of-type {
	margin-bottom: 1.7em;
}
@media screen and (min-width: 50em) {
	.new-feature-details {
		padding-top: 5em;
		padding-bottom: 5em;
	}
	.new-feature-details:last-of-type {
		padding-bottom: 6em;
	}
	.feature-detail {
		display: flex;
		align-items: center;
	}
	.feature-detail figure {
		flex: 0 0 calc(50% - 1.5em);
		margin: 0 3.5em 0 0;
	}
}

.feature-grid {
	color: white;
	display: grid;
	grid-template-columns: repeat(2, 41vw);
	grid-template-rows: repeat(21, 41vw);
	gap: 5vw;
	justify-content: center;
	font-size: 2.4vw;
}
.new-grid-item {
	background: hsl(221 48% 22% / 1);
	border-radius: 1em;
	overflow: hidden;
	position: relative;
	padding: 3em;
	grid-column-start: 1;
	grid-column-end: span 2;
	grid-row-end: span 2;
}
.new-grid-item img {
	max-width: none;
}
.new-grid-item p {
	line-height: 1.1;
	font-size: 2.6em;
	text-align: left;
	margin-bottom: 0;
}
.new-grid-item .font-lg{ font-size: 3em; }
.new-grid-item .font-ctr { 
	text-align: center; 
	margin: 0 auto;
	max-width: 10em;
}

.new-grid-item img.al-top {
	margin-top: -3em;
}
.new-grid-item img.al-left {
	margin-left: -3em;
}
.new-grid-item img.al-right {
	margin-right: -3em;
}
.new-grid-item img.al-bottom {
	position: absolute;
	bottom: 0;
}
.new-sidebar img,
.new-inspector img {
	width: calc(100% + 3em);
	border-bottom-right-radius: 1em;
	margin-bottom: 1.5em;
}
.new-inspector img {
	border-radius: 0 0 0 1em;
}
.new-forms img, .new-organization img {
	border-top-left-radius: 1em;
	border-style: solid;
	border-color: #3e4e70;
	border-width: 1px 0 0 1px;
	bottom: 0;
	left: 3em;
	position: absolute;
	width: calc(100% - 3em);
}
.new-organization img {
	border: none;
}
.new-forms p, .new-organization p {
	margin-top: .25em;
	max-width: 10em;
}
.new-images img {
	margin-top: -3em;
	width: 100%;
	border-radius: 0 0 1em 1em;
	margin-bottom: 2.5em;
}
.new-engine .font-lg { font-size: 2.6em; }
.new-engine img {
	height: 60%;
	margin: 0 2em 0 -3em;
	border-radius: 0 1em 1em 0;
}
.new-bug-fixes, .new-zone-delivery, .new-engine {
	display: flex;
	align-items: center;
}
.new-social-media .font-ctr {
	max-width: 12em;
}
.icon-group-social {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 2em auto;
	width: 16em;
}
.icon-group-social img {
	width: 6em;
	margin-bottom: 3em;
}
.new-reports img {
	position: absolute;
	width: calc(100% - 3em);
	bottom: 0;
	left: 3em;
	border-top-left-radius: 1em;
}
.new-fonts img {
	width: calc(100% + 6em);
	margin-bottom: 2.7em;
}
.new-bug-fixes img { 
	width: 7em;
	height: 7em;
	margin: 0 2.5em 0 .1em;
}
.new-zone-delivery img { 
	width: 7em;
	height: 7em;
	margin: 0 2.5em 0 .1em;
}
.new-bug-fixes span {
	font-size: 1.7em;
}
.col-4 { grid-column-end: span 2; }
.row-4 { grid-row-end: span 4; }
.row-3 { grid-row-end: span 3; }
.row-1 { grid-row-end: span 1; }

/* Two column small */
@media screen and (min-width: 23em) {
	.col-4 { grid-column-end: span 4; }
	
	.feature-grid {
	  grid-template-columns: repeat(4, 17em);
	  grid-template-rows: repeat(12, 17em);
	  font-size: 4.7px;
	  gap: 3em;
	}
	.whats-new-intro {
		padding: 5em 0;
	}

	.new-sidebar{ 
		grid-column-start: 1;
		grid-row-start: 1;
	}
	.new-engine{ 
		grid-column-start: 1;
		grid-row-start: 4;
	}
	.new-engine img {
		height: 100%;
		margin: 0 3em 0 0;
		border-radius: 1em;
	}
	.new-engine .font-lg { font-size: 3em; }
	.new-zone-delivery{ 
		grid-column-start: 3;
		grid-row-start: 1;
	}
	.new-forms{ 
		grid-column-start: 3;
		grid-row-start: 2;
	}
	.new-images{ 
		grid-column-start: 1;
		grid-row-start: 5;
	}
	.new-social-media{ 
		grid-column-start: 1;
		grid-column-end: span 4;
		grid-row-start: 12;
		grid-row-end: span 1;
	}
	.new-social-media .font-ctr {
		text-align: left;
		font-size: 3em;
		margin: .7em 0 0 8em;
	}
	.icon-group-social {
		font-size: 70%;
		margin: 0 5em;
		float: left;
	}
	.new-bug-fixes { 
		grid-column-start: 1;
		grid-row-start: 7;
	}
	.new-reports{ 
		grid-column-start: 1;
		grid-row-start: 8;
	}
	.new-inspector{ 
		grid-column-start: 3;
		grid-row-start: 5;
	}
	.new-organization{ 
		grid-column-start: 3;
		grid-row-start: 10;
	}
	.new-fonts{ 
		grid-column-start: 1;
		grid-row-start: 10;
	}
}

/* Two column medium */
@media screen and (min-width: 40em) {
	.feature-grid {
		font-size: 8px;
	}
}

/* Two column large */
@media screen and (min-width: 50em) {
	.feature-grid {
		font-size: 10px;
	}
}

/* Three column small */
@media screen and (min-width: 65em) {
 .feature-grid {
	  font-size: 10px;
	  grid-template-columns: repeat(6, 17em);
	  grid-template-rows: repeat(8, 17em);
	  font-size: 8px;
  }
 
 .new-sidebar{ 
	 grid-column-start: 1;
	 grid-row-start: 1;
  }
 .new-engine{ 
	 grid-column-start: 3;
	 grid-row-start: 1;
  }
 .new-zone-delivery{ 
	 grid-column-start: 3;
	 grid-row-start: 2;
  }
 .new-forms{ 
	 grid-column-start: 5;
	 grid-row-start: 2;
  }
 .new-images{ 
	 grid-column-start: 3;
	 grid-row-start: 3;
  }
 .new-social-media{ 
	 grid-column-start: 1;
	 grid-column-end: span 2;
	 grid-row-start: 4;
	 grid-row-end: span 2;
  }
  .icon-group-social {
	  margin: 2em auto;
	  width: 16em;
	  float: none;
	  font-size: 100%;
  }
  .new-social-media .font-ctr{
	text-align: center;
	font-size: 2.6em;
	margin: 0 auto;
  }
 .new-bug-fixes { 
	 grid-column-start: 5;
	 grid-row-start: 4;
  }
 .new-reports{ 
	 grid-column-start: 3;
	 grid-row-start: 5;
  }
 .new-inspector{ 
	 grid-column-start: 1;
	 grid-row-start: 6;
  }
 .new-organization{ 
	 grid-column-start: 3;
	 grid-row-start: 7;
  }
 .new-fonts{ 
	 grid-column-start: 5;
	 grid-row-start: 7;
  }
}

/* Three column large */
@media screen and (min-width: 85em) {
	.feature-grid {
		font-size: 10px;
	}
}

/*----------------------------------------------------------------------------

   Value Props

----------------------------------------------------------------------------*/


.value-props-bg {
	background-color: var(--lightest-bg-color);
	border-top: 1px solid var(--lighter-bg-color);
	padding: 1.5em 3.75% 1px;
	position: relative;
}
.value-props {
    display: grid;
    grid-template-columns: auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
.value-props,
.value-prop-cta {
	position: relative;
}
.value-prop {
	background-color: var(--card-bg-color);
	border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
	padding: 2.5em 6.25%;
	position: relative;
	text-align: center;
}
a.icon-anchor {
	border-bottom: none;
	display: block;
	margin: 0 auto;
	position: relative;
	width: 80px;
}
.value-prop h3 {
	margin: 1em 0 0.75em;
}
.value-prop p {
	margin: 0 auto 1.5625em;
	max-width: 17.5em;
}
.value-prop-cta {
	margin-top: 3em;
}
/* 675px & wider */
@media only screen and (min-width: 42.1875em) {
    .value-props {
        grid-template-columns: repeat(2, 1fr);
    }
	.value-prop {
		min-height: 28.125em;
		padding: 3em 3%;
	}
	.value-prop:last-of-type {
		grid-column: 1 / span 2;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		gap: 2em;
		min-height: inherit;
	}
	.value-prop:last-of-type > a {
		margin: 0.6em 0 0 0;
		flex-shrink: 0;
	}
	.value-prop:last-of-type > div {
		text-align: left;
	}
	.value-prop:last-of-type .value-prop-cta {
		position: inherit;
		margin-top: 3em;
	}
	.value-prop:last-of-type p {
		max-width: 35em;
	}
	.value-prop-cta {
		bottom: 3em;
		left: 0;
		margin-top: 0;
		position: absolute;
		right: 0;
	}
}
/* 1000px & wider */
@media only screen and (min-width: 62.5em) {
    .value-props {
        grid-template-columns: repeat(3, 1fr);
    }
	.value-prop:last-of-type {
		grid-column: 1 / span 3;
	}
}

/*----------------------------------------------------------------------------

   Secondary CTA

----------------------------------------------------------------------------*/

.secondary-cta {
	background-color: var(--lightest-bg-color);
	padding: 3.75em 3.75% 5em;
	position: relative;
	text-align: center;
}
.dm-support .secondary-cta {
	padding-top: 3.75em;
}
.secondary-cta h2 {
	font-weight: 400;
	margin-bottom: 0.75em;
}
.secondary-cta h2 span {
	display: block;
	font-size: 1.25em;
	font-weight: 600;
}
.secondary-cta p {
	margin: 0 auto 2.5em;
	max-width: 29.7em;
}
.secondary-cta p:last-child {
	margin-bottom: 0;
}
.welcome-cta h2 {
	max-width: 29.7em;
	margin: 0 auto 1.75em;
}
.welcome-cta p {
	max-width: none !important;
}
@media only screen and (min-width: 35.9375em) {
	.secondary-cta h2 span {
		font-size: 1.4em;
	}
	.secondary-cta p {
		font-size: 1.25em;
	}
}
@media only screen and (min-width: 41.25em) {
	.secondary-cta {
		padding-bottom: 8.125em;
		padding-top: 6.25em;
	}
	.secondary-cta p span {
		display: block;
	}
}
.secondary-cta.landing-page .btn {
	display: inline-block;
	margin-bottom: 1.125em;
	margin-left: 0.5em;
	margin-right: 0.5em;
}
a.btn.inverted, a.btn.inverted:visited {
	background-color: white;
	color: inherit;
    border: 1px solid var(--lighter-bg-color);
}
.secondary-cta.gdpr {
	display: none;
	padding-top: 1.25em;
	padding-bottom: 1.25em;
}
.secondary-cta.gdpr .fa-check {
	color: var(--highlight-good-color);
}
.secondary-cta.testimonial {
	padding-bottom: 0;
}
.secondary-cta.testimonial p span {
	display: inline;
}
.secondary-cta.testimonial p {
	font-style: italic;
}
.secondary-cta.testimonial p.more-testimonials {
	font-style: normal;
}
/*.secondary-cta.alternatives {
    padding-top: 0;
}
*/.testimonial .fa-star {
	color: var(--highlight-good-color);
}
.testimonial h2 i {
	transition: opacity 1s linear;
	opacity: 0;
}
.testimonial h2 i:nth-child(1) {
	transition-delay: 0s;
}
.testimonial h2 i:nth-child(2) {
	transition-delay: 0.1s;
}
.testimonial h2 i:nth-child(3) {
	transition-delay: 0.2s;
}
.testimonial h2 i:nth-child(4) {
	transition-delay: 0.3s;
}
.testimonial h2 i:nth-child(5) {
	transition-delay: 0.4s;
}
.testimonial.faded-in h2 i {
	opacity: 1;
}
.testimonial p {
	margin-bottom: 0;
}
.testimonial .source {
    display: flex;
    justify-content: center;
    align-items: center;
}
.testimonial .source > div {
    text-align: left;
    margin: 1em 0.5em;
}
.testimonial .source .photo img {
    width: 64px;
    height: 64px;
    border-radius: 32px;
    border: 1px var(--card-border-color) solid;
}
/*----------------------------------------------------------------------------

   Pricing

----------------------------------------------------------------------------*/

.pricing-background {
	background-color: var(--lightest-bg-color);
	padding: 0 3.75%;
}
.pricing-plan-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 3em;
	margin-bottom: 6em;
	margin-top: 3em;
	margin-left: auto;
	margin-right: auto;
	max-width: 66em;
}
.pricing-plan-container.reversed {
	flex-direction: row-reverse;
}
@media only screen and (max-width: 56.25em) {
	.pricing-plan-container, .pricing-plan-container.reversed {
		flex-direction: column;
		/*align-items: stretch;*/
	}
}
.pricing-plan-container .card {
	min-width: min(22em, 100%);
	background-color: var(--card-bg-color);
	padding: 1.5em;
	text-align: center;
	flex-shrink: 0;
	box-shadow: 0 7px 15px -5px hsl(221 50% 76% / 1);
	color: var(--dark-text-color);
	border-radius: var(--card-border-radius);
}
@media only screen and (max-width: 56.25em) {
	.pricing-plan-container .card {
		/*min-width: 0;*/
	}
}
.pricing-plan-container .card .header {
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--darker-bg-color);
	background-color: var(--lightest-bg-color);
	border-radius: 4px;
	font-size: 0.875em;
}
.pricing-plan-container .card .header p {
	padding-top: 1em;
	padding-bottom: 1em;
	margin: 0 1em;
}
.pricing-plan-container .card .header.with-buttons {
	display: flex;
	gap: 1em;
	justify-content: space-between;
	align-items: center;
}
.pricing-plan-container .card .header a.step-button {
	display: flex;
	justify-content: center;
	align-items: center;
	border: none;
	background-color: var(--darker-bg-color);
	color: white;
	width: 2em;
	height: 2em;
	border-radius: 1em;
	margin-left: 0.8em;
	margin-right: 0.8em;
}
.pricing-plan-container .card .header a[disabled].step-button {
	opacity: 0.1;
	pointer-events: none;
}
.pricing-plan-container .card .header a.step-button div {
	background: white;
	-webkit-mask-size: contain;
	mask-size: contain;
	width: 100%;
	height: 100%;
}
.pricing-plan-container .card .header a.step-button div.plus {
	mask-image: url(/images/plus-icon.v1.png);
}
.pricing-plan-container .card .header a.step-button div.minus {
	mask-image: url(/images/minus-icon.v1.png);
}
.pricing-plan-container .card .original-price {
	font-size: 1.5em;
	text-decoration: line-through;
	color: lightgray;
	margin-top: 2em;
	word-break: break-all;
}
.pricing-plan-container .card .price {
	color: var(--darker-bg-color);
	font-size: 5em;
	margin-top: 0.7em;
	margin-bottom: 0.7em;
	font-weight: 400;
	letter-spacing: -0.05em;
	word-break: break-all;
}
.pricing-plan-container .card .original-price + .price {
	margin-top: 0.1em;
}
.pricing-plan-container .card .price.contact-us > div {
	width: 98px;
	height: 98px;
	margin-left: auto;
	margin-right: auto;
	-webkit-mask-size: contain;
	mask-size: contain;
	background-color: var(--darker-bg-color);
	mask-image: url(/images/open-envelope.v1.png);
}
.pricing-plan-container .card .sign-up a {
	display: block;
}
.pricing-plan-container .name h1 {
	font-size: 2.5em;
	margin-bottom: 0.2em;
}
.pricing-plan-container .name p {
	font-size: 1.5em;
}
.pricing-plan-container .selling-points > div {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 0.5em;
}
.pricing-plan-container .selling-points > div > div {
	width: 48px;
	height: 48px;
	background-color: var(--highlight-color);
	-webkit-mask-size: contain;
	mask-size: contain;
	flex-shrink: 0;
}
.pricing-plan-container .selling-points p {
	margin: 0;
}
.pricing-chart nav {
	text-align: center;
	margin-bottom: 6em;
}
.pricing-chart nav a {
	display: inline-block;
	padding: 0.5em 1.5em;
	margin-right: 0.2em;
	margin-bottom: 0.2em;
	font-size: 1.3em;
	background-color: var(--darker-cta-inactive-color);
	border-bottom: none;
	color: var(--darkest-bg-color);
	border-radius: 0.3em;
}
@media only screen and (max-width: 35.9375em) {
	.pricing-chart nav a {
		display: block;
	}
}
.pricing-chart nav a.selected {
	background-color: var(--darker-bg-color);
	color: white;
}
.pricing-compare-headline h3 {
	text-align: center;
	margin-bottom: 2em;
}
.pricing-compare-grid {
	display: grid;
	grid-template-columns: max-content 1fr 1fr 1fr;
	grid-template-rows: auto;
	gap: 1px;
	max-width: 66em;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2em;
	background-color: white;
}
.pricing-compare-grid.no-free {
	grid-template-columns: max-content 1fr 1fr;
}
.pricing-compare-grid > div {
	display: grid;
	place-items: start;
	padding: 1em;
	outline: 1px solid var(--card-border-color);
}
.pricing-compare-grid div.heading {
	font-weight: 600;
	background-color: var(--lightest-bg-color);
	outline: none;
	grid-column: 1 / span 4;
}
.pricing-compare-grid.no-free div.heading {
	grid-column: 1 / span 3;
}
.pricing-compare-grid .feature a {
	border-bottom-color: inherit;
	border-bottom-style: dashed;
	cursor: help;
}
.pricing-compare-grid .name {
	font-weight: 600;
	word-break: break-all;
}
.pricing-compare-grid .name, .pricing-compare-grid .feature.corner {
	background-color: white;
	position: sticky;
	top: 0;
}
.pricing-compare-grid .tooltip {
	display: none;
	width: fit-content;
	position: absolute;
	top: 0;
	left: 0;
	background: var(--darkest-bg-color);
	color: white;
	padding: 1em;
	font-size: 0.9em;
}
.pricing-compare-grid .tooltip .arrow {
	position: absolute;
	background: var(--darkest-bg-color);
	width: 8px;
	height: 8px;
	transform: rotate(45deg);
}
.pricing-compare-grid.masked {
	overflow-y: hidden;
	max-height: 40em;
	mask-image: linear-gradient(black 50%, transparent);
	position: relative; /* don't clip tooltips */
}
.full-comparison {
	margin-bottom: 6em;
	text-align: center;
}
.full-comparison a {
	display: inline-block;
}
@media only screen and (max-width: 35.9375em) {
	.full-comparison a {
		display: block;
	}
}
@media only screen and (max-width: 55.9375em) {
	.pricing-compare-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	}
	.pricing-compare-grid.no-free {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.pricing-compare-grid div.heading {
		grid-column: 1 / span 3;
	}
	.pricing-compare-grid.no-free div.heading {
		grid-column: 1 / span 2;
	}
	.pricing-compare-grid .feature {
		grid-column: 1 / span 3;
		outline: none;
		background-color: var(--lightest-bg-color);
	}
	.pricing-compare-grid.no-free .feature {
		grid-column: 1 / span 2;
	}
	.pricing-compare-grid .feature.corner {
		display: none;
	}
	.pricing-compare-grid .feature > div {
		margin-left: inherit;
		margin-right: auto;
	}	
}
.pricing-faq {
	max-width: 40em;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 6em;
}
.pricing-faq details {
	padding-top: 1.2em;
	padding-bottom: 0.4em;
	border-top: 1px solid var(--lighter-bg-color);
}
.pricing-faq details:first-of-type {
	border-top: none;
}
.pricing-faq details summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
}
.pricing-faq details summary::-webkit-details-marker {
	display: none;
}
.pricing-faq details summary::before {
	content: "";
	background-color: var(--darkest-bg-color);
	-webkit-mask-size: cover;
	mask-size: cover;
	mask-image: url(/images/chevron-right.v1.png);
	display: inline-block;
	height: 16px;
	width: 16px;
	margin-right: 0.5em;
	margin-bottom: 0.5em;
	transition: transform 100ms linear;
}
.pricing-faq details[open] summary::before {
	transform: rotateZ(90deg);
}
.pricing-chart .fa-times {
	color: var(--highlight-bad-color);
	font-size: 1.25em;
}
.pricing-chart .fa-check {
	color: var(--highlight-good-color);
	font-size: 1.25em;
}
.pricing-headline {
	text-align: center;
	padding-top: 3.5em;
	padding-bottom: 3em;
	margin: 0 auto;
	max-width: 40em;
}
.pricing-headline h1 {
	font-size: 3em;
	font-weight: 300;
}
.pricing-screenshot-card-container {
	text-align: center;
}
.pricing-screenshot-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background-color: var(--card-bg-color);
	padding: 1.5em;
	margin-bottom: 3em;
	text-align: left;
	box-shadow: 0 7px 15px -5px hsl(221 50% 76% / 1);
	color: var(--dark-text-color);
	border-radius: var(--card-border-radius);
	gap: 1.5em;
	max-width: 66em;
	margin-left: auto;
	margin-right: auto;
}
.pricing-screenshot-card p {
	max-width: 15em;
}
.pricing-screenshot-card > div > a {
	text-decoration: none;
}
.pricing-screenshot-card img {
	display: block;
	width: 414px;
}
@media only screen and (max-width: 56.25em) {
	.pricing-screenshot-card {
		flex-direction: column;
	}
	.pricing-screenshot-card p {
		max-width: inherit;
	}
}
/*----------------------------------------------------------------------------

   Sign Up

----------------------------------------------------------------------------*/

.sign-up-background {
	background-color: var(--lightest-bg-color);
	padding: 3.125em 3.75%;
}
.sign-up-background .wrapper {
	max-width: 49.625em;
}
.signup-headline {
	text-align: center;
	padding-bottom: 2em;
	margin: 0 auto;
}
.signup-headline h1 {
    font-size: 2em;
    font-weight: 300;
}
label span.secondary {
    color: var(--text-color);
    font-size: 0.9em;
}
label.newsletter {
    display: flex;
	align-items: flex-start;
}
label.newsletter input {
    flex-shrink: 0;
    margin-top: 0.5em;
}
.pricing-plan {
	overflow: hidden;
}
.pricing-plan select {
	margin-top: 0.5em;
}
.input-group {
	margin-bottom: 1%;
}
.input-group-top {
	background-color: var(--darker-bg-color);
	padding: 1.25em 3.75%;
}
.input-group-top h2 {
	color: white;
	font-size: 1.25em;
	font-weight: 300;
	margin-bottom: 0;
}
.input-group-bottom {
	background-color: white;
	border: 1px solid var(--lighter-bg-color);
	padding: 2em 3.75%;
}
.input-group-bottom p {
    text-align: center;
    margin-bottom: 2em;
}
.input-field {
	margin-bottom: 1.25em;
	position: relative;
}
.cc-expire label {
	display: block;
}
.main-form li {
	border: 1px solid var(--lighter-bg-color);
	border-left-width: 6px;
	margin-bottom: 0.33333333em;
	overflow: hidden;
	padding: 0.5em 0.625em;
	position: relative;
	transition: all 0.25s ease-in-out 0s;
	cursor: pointer;
}
.main-form li.selected-item {
	border-color: var(--cta-color);
}
.main-form li input[type=radio] {
	display: none;
}
.main-form input[type=text],
.main-form input[type=url],
.main-form input[type=email],
.main-form input[type=password],
div.hosted-field {
	display: block;
	margin-top: 0.5em;
	width: 100%;
}
ul.cc-icons {
	display: none;
	font-size: 1.5em;
	line-height: 1;
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
	position: absolute;
	right: 0.375em;
	top: 1.33333333em;
}
ul.cc-icons li {
	background-color: transparent;
	border: none;
	float: left;
	margin: 0 0 0 0.25em;
	opacity: 0.25;
	padding: 0;
}
ul.cc-icons li:hover {
	cursor: default;
}
.cc-sec-code {
	width: 40%;
}
.pricing-plan select {
	width: 6.66666667em;
}
.select-payment-method, .select-product, .select-subproduct {
	margin-top: 0.5em;
	margin-bottom: 2em;
}
.select-product .pill-container {
    position: relative;
}
.select-product .pill {
    background-color: var(--highlight-color);
    color: white;
    padding: 0.2em 0.8em;
    text-transform: uppercase;
    font-size: 0.7em;
    letter-spacing: 0.1em;
    position: absolute;
    z-index: 100;
    right: 0;
    top: 0.2em;
}
.select-product .pill-container + li {
    margin-top: 1.1em;
}
.select-product input[type=radio] {
    vertical-align: top;
    margin-top: 0.75em;
    flex-shrink: 0;
}
.select-product .help {
    align-self: center;
    margin-left: auto;
}
.select-product .help a {
	border: none;
	opacity: 0.4;
	transition: all 0.25s ease-in-out 0s;
}
.select-product .help a:hover, .select-product .help a:active {
	opacity: 1;
}
.select-product li:not(.selected-item) span.price {
	display: none;
}
.product-detail {
    display: none;
}
.pricing-plan-content span.price {
	display: block;
	text-align: right;
	float: right;
}
.pricing-plan-content span.price span.pre-discount-price, span.pre-discount-price {
	text-decoration: line-through;
	opacity: 0.5;
	margin-right: 0.5em;
}
.main-form input[type=submit] {
	background-color: var(--cta-color);
	font-size: 1.125em;
}
.main-form input[type=submit]:active,
.main-form input[type=submit]:not([disabled]):hover {
	background-color: var(--cta-active-color);
}
.main-form input[type=submit][disabled] {
	background-color: var(--cta-inactive-color);
}
.confirm-order {
	background-color: white;
	border: 1px solid var(--lighter-bg-color);
	padding: 3.125em 6.25%;
	text-align: center;
}
.confirm-order .almost-hidden {
	opacity: 0.1;
}
#submit-button-container {
	position: relative;
}
#submit-button-container .spinner-container {
	position: absolute;
	display: inline-block;
    top: 50%;
    margin-left: 16px;
}
#paypal-prompt {
	margin-top: 1.5625em;
}
.security-seal {
	margin: 0 auto;
	max-width: 37.125em;
	padding: 3.125em 0 0;
	position: relative;
	text-align: center;
}
.input-group-top .promo-note {
	color: white;
	margin-bottom: 0;
}
/* 460px & wider */
@media only screen and (min-width: 28.75em) {
	.cc-num-field input[type=text], .cc-num-field div.hosted-field {
		padding-right: 10em;
	}
	ul.cc-icons {
		display: block;
	}
}
/* 470px & wider */
@media only screen and (min-width: 29.375em) {
	.cc-expire {
		float: left;
		width: 40%;
	}
	.cc-sec-code {
		float: right;
	}
}
/* 660px & wider */
@media only screen and (min-width: 41.25em) {
	.input-group-top h2 {
		font-size: 1.5em;
	}
	.input-group-top,
	.input-group-bottom,
	.confirm-order {
		padding-left: 16.833333%;
		padding-right: 16.833333%;
	}
	.main-form input[type=text],
	.main-form input[type=url],
	.main-form input[type=email],
	.main-form input[type=password],
	.main-form li,
    div.hosted-field {
		padding-bottom: 0.75em;
		padding-top: 0.75em;
	}
	ul.cc-icons {
		top: 1.5em;
	}
}
/* 800px & wider */
@media only screen and (min-width: 50em) {
	.pricing-plan h2 {
		float: left;
	}
	.pricing-plan select {
		float: right;
		margin-top: -0.1875em;
	}
}

/*----------------------------------------------------------------------------

   Features 

----------------------------------------------------------------------------*/

.features-jump-container {
    position: sticky;
    top: 0px;
    z-index: 1000;
    background-color: var(--lightest-bg-color);
    border-bottom: 1px solid var(--lighter-bg-color);
	padding: 1.25em 3.75%;
}
.features-jump {
    display: flex;
    justify-content: left;
    overflow-x: auto;
    scrollbar-width: none; /* for Firefox */
    column-gap: 2.25em;
    --mask-width: 40px;
    -webkit-mask-image: var(--mask-image-content);
    mask-image: var(--mask-image-content);
}
.features-jump::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
.features-jump > span {
    white-space: nowrap;
	font-size: 80%;
	letter-spacing: 0.0875em;
    text-transform: uppercase;
}
.features-jump a,
.features-jump a:visited {
    border: none;
    color: var(--darkest-bg-color);
}
.features-jump a:hover,
.features-jump a:hover {
    color: var(--darker-bg-color);
}
.features-jump > span.visible {
    font-weight: bold;
}
.dm-features {
	background-color: white;
	position: relative;
}
.features-title {
	background-color: var(--darker-bg-color);
	padding: 1.25em 3.75%;
	position: relative;
}
.features-title.alternatives {
    padding: 3.5em 3.75%;
    text-align: center;
}
.features-title h1 {
	color: white;
	font-size: 1.75em;
	font-weight: 300;
	line-height: 1.25;
	margin-bottom: 0;
}
.features-nav {
	padding: 3.75em 3.75%;
	position: relative;
	text-align: center;
}
.features-nav h2 {
	font-weight: 400;
	line-height: 1.33333333;
	margin: 0 0 1.5em;
}
ul.features-icon-menu {
	font-size: 1em;
	line-height: 1.5;
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}
ul.features-icon-menu li {
	border-bottom: 1px solid var(--lighter-bg-color);
	border-right: 1px solid var(--lighter-bg-color);
	float: left;
	margin-bottom: 0;
	width: 50%;
}
ul.features-icon-menu li:nth-of-type(2n) {
	border-right: none;
}
ul.features-icon-menu li:nth-of-type(5),
ul.features-icon-menu li:nth-of-type(6) {
	border-bottom: none;
}
ul.features-icon-menu li a,
ul.features-icon-menu li a:visited {
	border: none;
	display: block;
	padding: 1.5em 10%;
}
ul.features-icon-menu li a:hover,
ul.features-icon-menu li a:active,
ul.features-icon-menu li.current-feature-icon a {
	background-color: var(--lightest-bg-color);
}
ul.features-icon-menu img {
	margin: 0 auto;
	width: 56px;
}
ul.features-icon-menu h4 {
	color: var(--text-color);
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	margin: 0.5em 0 0;
}
.feature-content ul {
	font-size: 1em;
}
.feature-content li {
	margin-bottom: 1.333333em;
}
.feature-content {
	padding: 3.125em 0 1em;
	position: relative;
}
.bordered-screenshot .feature-screenshot {
	border: 1px solid var(--lighter-bg-color);
	border-bottom: none;
	padding: 0.625em;
}
.feature-block,
.center-feature-block {
	overflow: hidden;
	border-bottom: 1px solid var(--lighter-bg-color);
	padding: 0 3.75%;
	position: relative;
}
.center-feature-block .feature-content {
	margin: 0 auto;
	max-width: 30.5625em;
}
.center-feature-block .feature-screenshot {
	margin: 0 auto;
	max-width: 62.375em;
}
.feature-two-col .feature-screenshot {
	margin: 0 auto;
}
.feature-block h3,
.content-grid-item h3,
.center-feature-block h3 {
	margin-bottom: 1em;
}
.content-grid-item h3 {
	text-align: center;
}
.feature-content li,
.content-grid-item li {
	margin-bottom: 0.75em;
}
.content-grid {
	border-bottom: 1px solid var(--lighter-bg-color);
	padding: 0 3.75% 3.125em;
	position: relative;
}
.content-grid-item {
	padding: 3.125em 0 0;
	position: relative;
}
.content-grid-item .fa {
	color: var(--highlight-color);
	display: block !important;
	font-size: 200%;
	margin-bottom: 0.5em;
}
.fa-ul .fa {
	color: var(--highlight-color);
}
.content-grid-item ul .fa {
	font-size: inherit;
}
.centered-video {
	margin: 0 auto;
	position: relative;
}
.centered-video video {
	height: auto !important;
    margin-left: auto;
    margin-right: auto;
}
.play-button {
	width: 96px;
	height: 96px;
	position: absolute;
	top: calc(50% - 48px);
	left: calc(50% - 48px);
	opacity: 0;
	cursor: pointer;
}
.compose-video, .reports-video {
	max-width: 65.5em;
}
.compose-video > video {
	box-shadow: 0px 5px 10px rgba(0, 0,0, 0.33);
	position: relative;
	top: 10px;
	border-radius: 10px;
}
.spam-video {
	max-width: 36.4375em;
}
.home-screencast {
	margin-bottom: 3.75em;
	max-width: 62.375em;
}
.home-screencast video {
	border-radius: 5px;
	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.4);
}
@media only screen and (max-width: 25.875em) {
	.home-screencast video {
		border-radius: 2px;
	}
}
.centered-landing {
	margin: auto;
	max-width: 67.5em;
	position: relative;
}
.centered-landing.messages-hero {
	margin-bottom: 1.5em;
	max-width: max-content;
}
.centered-landing.messages-hero img {
	max-height: 700px;
	box-shadow: 0 1em 2em rgba(0,0,25,0.3);
	border-radius: 4px;
}
@media only screen and (min-width: 50em) {
	.centered-landing.messages-hero {
		margin-bottom: 4em;
	}
	.centered-landing.messages-hero img {
		border-radius: 9px;
	}
}
.mac-window {
	box-shadow: 0px 5px 10px rgba(0, 0,0, 0.33);
    border-radius: 10px 10px 0 0;
}
.stamps-preview {
	margin-bottom: 3.75em;
}
.iphone-screenshot .wrapper {
	max-width: 56.25em;
}
.iphone-screenshot .feature-screenshot img {
	margin: 0 auto 3.75em;
	width: 300px;
}
.ios-app-links {
    display: flex;
    align-items: center;
}
.ios-app-links a {
    border-bottom: none !important;
}
.ios-app-links > a:not(:first-child) {
    margin-left: 1em;
}
.app-store-btn {
	width: 135px;
}
.bar-graph-data {
	border-bottom: 1px solid var(--lighter-bg-color);
	margin-bottom: 1em;
	padding-bottom: 2.5em;
	position: relative;
}
ul.bars {
	font-size: 1em;
	line-height: 1.5;
	list-style: none;
	margin: 0;
	padding-left: 0;
}
ul.bars li {
	margin-bottom: 1em;
}
ul.bars span {
	border-radius: 0 50px 50px 0;
	display: block;
	height: 20px;
	-webkit-border-radius: 0 50px 50px 0;
}
ul.bars span.ethree-speed, .e3ds-perf .e3ds-bar.animate {
	animation: ethree 1.5s 1 forwards;
	background-color: var(--cta-color);
	max-width: 100%;
	width: 100%;
}
.vertical-limited .feature-screenshot img,
.vertical-maximized .feature-screenshot img {
	margin-bottom: 3.75em;
}
span.nums {
	background-color: var(--highlight-color);
	border-radius: 100%;
	color: white;
	display: block;
	font-weight: 300;
	line-height: 2;
	margin-bottom: 1em;
	text-align: center;
	width: 2em;
	-webkit-border-radius: 100%;
}
@keyframes ethree {
	from {
		width: 0%;
	}
	to {
		width: 100%;
	}
}
ul.bars span.smtp-speed, .e3ds-perf .smtp-bar.animate {
	animation: smtp 2s 1 forwards;
	background-color: var(--lighter-bg-color);
	max-width: 10%;
	width: 10%;
}
@keyframes smtp {
	from {
		width: 0%;
	}
	to {
		width: 10%;
	}
}
.hatch {
	border-right: 1px solid var(--lighter-bg-color);
	display: block;
	font-size: 12px;
	line-height: 30px;
	height: 30px;
	padding-right: 8px;
	text-align: right;
}
.first-hatch {
	bottom: 0;
	left: 0;
	position: absolute;
	width: 10%;
}
.full-hatch {
	bottom: 0;
	left: 10%;
	position: absolute;
	width: 90%;
}
.bar-graph figcaption {
	margin: 0 0 4em;
}
.mobile-only {
	display: none;
}
.mac-desktop {
    position: relative;
    margin-bottom: 5.3125em;
}
.mac-desktop .wallpaper {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
	background-image: url('https://five.cdn.directmailmac.com/images/mac-desktop.v1.jpg');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 998px;
    --mask-image-content: linear-gradient(to bottom, transparent, black);
    -webkit-mask-image: var(--mask-image-content);
    mask-image: var(--mask-image-content);
}
.mac-bullets {
    position: relative;
    display: grid;
	grid-template-columns: repeat(2, 1fr);
    padding-bottom: 120px;
}
.mac-bullets > div {
    transform: scale(0.6);
    opacity: 0;
    transition: transform 1s ease-out, opacity 1s ease-out;
}
.mac-bullets > div:nth-child(1) { transition-delay: 0.1s; }
.mac-bullets > div:nth-child(2) { transition-delay: 0.2s; }
.mac-bullets > div:nth-child(3) { transition-delay: 0.3s; }
.mac-bullets > div:nth-child(4) { transition-delay: 0.4s; }
.mac-bullets > div:nth-child(5) { transition-delay: 0.5s; }
.mac-bullets > div:nth-child(6) { transition-delay: 0.6s; }
.mac-bullets > div:nth-child(7) { transition-delay: 0.7s; }
.mac-bullets > div:nth-child(8) { transition-delay: 0.8s; }
.mac-bullets > div:nth-child(9) { transition-delay: 0.9s; }
.mac-bullets > div:nth-child(10) { transition-delay: 1.0s; }
.mac-bullets > div:nth-child(11) { transition-delay: 1.1s; }
.mac-bullets > div:nth-child(12) { transition-delay: 1.2s; }
.mac-bullets > div:nth-child(13) { transition-delay: 1.3s; }
.mac-bullets > div.revealed {
    transform: scale(1);
    opacity: 1;
}
/* 500px & wider */
@media only screen and (min-width: 31.25em) {
    .mac-bullets {
		grid-template-columns: repeat(3, 1fr);
    }
}
/* 800px & wider */
@media only screen and (min-width: 50em) {
    .mac-bullets {
		grid-template-columns: repeat(4, 1fr);
    }
}
.mac-bullets > div > div {
    margin: 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
}
.mac-bullets > div > p {
    text-align: center;
    margin-top: 0.5em;
}
/* 430px & wider */
@media only screen and (min-width: 26.875em) {
	ul.list-cols li {
		float: left;
		width: 50%;
	}
}
/* 500px & wider */
@media only screen and (min-width: 31.25em) {
	ul.features-icon-menu li {
		width: 33.33333333%;
	}
	ul.features-icon-menu li:nth-of-type(2n) {
		border-right: 1px solid var(--lighter-bg-color);
	}
	ul.features-icon-menu li:nth-of-type(3n) {
		border-right: none;
	}
	ul.features-icon-menu li:nth-of-type(4) {
		border-bottom: none;
	}
	ul.features-icon-menu img {
		width: 64px;
	}
}
/* 600px & wider */
@media only screen and (min-width: 37.5em) {
	.feature-content,
	.content-grid-item {
		padding-top: 3.75em;
	}
	.content-grid {
		padding-bottom: 3.75em;
	}
}
/* 615px & wider */
@media only screen and (min-width: 38.4375em) {
	.content-grid-item {
		padding-left: 6.25%;
		padding-right: 6.25%;
	}
}
/* 770px & wider */
@media only screen and (min-width: 48.125em) {
	.center-feature-block .feature-screenshot {
		width: auto;
	}
	.center-feature-block .feature-content {
		padding-bottom: 2.5em;
		width: auto;
	}
	.feature-block,
	.center-feature-block {
		padding-top: 5.625em;
	}
	.feature-block.vertical-limited {
		padding-bottom: 5.625em;
	}
	.feature-content {
		width: 40.75%;
		padding: 0;
	}
    .stamps-preview {
		margin-bottom: 5.625em;
    }
	.iphone-screenshot .feature-content {
		width: 54.33333333%;
	}
	.feature-content-right {
		margin-left: 18.5%;
	}
	.feature-screenshot {
		width: 50%;
	}
	.iphone-screenshot .feature-screenshot {
		width: 33.33333333%;
	}
	.iphone-screenshot .feature-screenshot img {
		margin-bottom: 5.625em;
		width: auto;
	}
	.screenshot-right .feature-content,
	.screenshot-left .feature-screenshot {
		float: left;
	}
	.screenshot-left .feature-content,
	.screenshot-right .feature-screenshot {
		float: right;
	}
	.screenshot-right .feature-content,
	.screenshot-left .feature-content {
		margin-top: 8%;
	}
	.screenshot-right.iphone-screenshot .feature-content,
	.screenshot-left.iphone-screenshot .feature-content {
		margin-top: 14%;
	}
	.vertical-limited .feature-content {
		margin-top: 0;
	}
	.vertical-maximized .feature-screenshot img {
		margin-bottom: 5.625em;
	}
	.feature-two-col .feature-content {
		float: left;
		width: 50%;
		padding: 0 6.416667%;
	}
	.feature-two-col .feature-screenshot {
		width: auto;
		margin: 20% 0;
	}
	.content-grid {
		padding-bottom: 0;
	}
	.content-grid-item {
		border-right: 1px solid var(--lighter-bg-color);
		float: left;
		padding: 5.625em 6.416667%;
		width: 50%;
	}
	.content-grid-item:nth-of-type(2) {
		border-right: none;
	}
	ul.bars {
		margin-top: 6.875em;
	}
	ul.list-cols li {
		float: none;
		width: auto;
	}
}
/* 805px & wider */
@media only screen and (min-width: 50.3125em) {
	.access-features {
		display: block;
	}
}
/* 860px & wider */
@media only screen and ( min-width: 53.75em ) {
	.features-title h1 {
		font-size: 2em;
	}
}
/* 985px & wider */
@media only screen and (min-width: 61.5625em) {
	ul.features-icon-menu li {
		border-bottom: none;
		width: 16.666667%;
	}
	ul.features-icon-menu li:nth-of-type(3) {
		border-right: 1px solid var(--lighter-bg-color);
	}
}
/* 1080px & wider */
@media only screen and (min-width: 67.5em) {
	ul.list-cols li {
		float: left;
		width: 50%;
	}
}

/*----------------------------------------------------------------------------

   Banners

----------------------------------------------------------------------------*/

.promo-banner {
	color: white;
	padding: 3.75em 6.25%;
	position: relative;
	text-align: center;
}
.green-banner {
	background-color: var(--highlight-color);
}
.promo-banner p {
	font-size: 1.25em;
	font-style: italic;
	line-height: 1.5;
	margin-bottom: 0;
}

/*----------------------------------------------------------------------------

   Mac Email Marketing

----------------------------------------------------------------------------*/

.mac-email-marketing-page .pricing-background {
	padding-top: 2.5em;
}
.key-features {
	background-color: white;
	border: 1px solid var(--lighter-bg-color);
	overflow: hidden;
	padding: 2.5em 1.25em;
	position: relative;
	text-align: center;
}
.key-features h2,
.key-features p {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
.key-features h2 {
	max-width: 22em;
}
.key-features p {
	max-width: 33em;
}
.key-features h3 {
	margin-bottom: 1em;
}
.key-features-col {
	position: relative;
	text-align: left;
}
.key-features-col ul {
	font-size: 1em;
	line-height: 1.5625;
	margin-bottom: 0;
}
.key-features-col li {
	margin-bottom: 0.75em;
}
/* 900px & wider */
@media only screen and (min-width: 56.25em) {
	.key-features h3 {
		margin-bottom: -1.1em;
		margin-top: 1.81818182em;
	}
	.key-features-col {
		float: left;
		padding: 5% 3.125% 5% 6.25%;
		width: 50%;
	}
	.key-features-col + .key-features-col {
		padding: 5% 6.25% 5% 3.125%;
	}
}

/*----------------------------------------------------------------------------

   Chat

----------------------------------------------------------------------------*/

.live-chat-block, .live-chat-flex {
	display: none;
}
div.live-chat-fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 1em;
    background-color: white;
    border-radius: 100px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
}
div.live-chat-fixed:hover {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}
div.live-chat-fixed i.fa {
    display: block;
    font-size: 2em;
    color: var(--highlight-color);
}
footer {
    padding-bottom: 7em;
}

/*----------------------------------------------------------------------------

   Support

----------------------------------------------------------------------------*/

.search-form label {
	color: var(--text-color);
}
@supports selector(:has(*)) {
	.search-form:has(input:placeholder-shown) label {
		color: var(--text-placeholder-color);
	}
}
.search-result-snippet {
	opacity: 0.7;
}
.page-title-wrapper {
	padding: 2.5em 6.25%;
	position: relative;
}
.support-breadcrumbs {
	font-size: 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 0.5em;
}
.support-breadcrumbs a {
	border-bottom: inherit;
}
.hentry {
	margin-bottom: 1.875em;
	position: relative;
}
.hentry-centered {
	position: relative;
	margin: 0 auto 1.875em;
	max-width: 49.625em;
}
.article-alert {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-bottom: 1.875em;
}
.article-alert i {
	display: block;
	font-size: 2em;
}
.article-alert p {
	margin: 0;
}
.post-title {
	background-color: var(--darker-bg-color);
	font-size: 88.9%;
	padding: 1.25em 3.75%;
	position: relative;
}
.post-title h1 {
	color: white;
	font-weight: 300;
	margin-bottom: 0;
	word-wrap: break-word;
}
.post-title p,
.post-title p a,
.post-title p a:visited {
	color: white;
}
.post-title p a:hover,
.post-title p a:active {
	color: rgba(255, 255, 255, 0.7);
	border-color: white;
}
.article-content {
	background-color: white;
	border: 1px solid var(--lighter-bg-color);
	padding: 1.875em 3.75%;
	position: relative;
	word-wrap: break-word;
}
span.native-lang-pill, span.blog-post-pill {
	margin-left: 0.5em;
	padding: 0.2em 0.6em;
	text-transform: uppercase;
	background-color: var(--cta-color);
	color: white;
	border-radius: 0.2em;
	font-size: 60%;
	letter-spacing: 0.0875em;
	vertical-align: middle;
	display: inline-block;
}
body.dm-support .article-content img {
	margin: 1em auto;
}
ul.support-topics {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 2em 1em;
	grid-template-columns: repeat(1, 1fr);
	margin-bottom: inherit;
}
@media only screen and (min-width: 38.75em) {
	ul.support-topics {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media only screen and ( min-width: 53.75em ) {
	.support-home ul.support-topics {
		grid-template-columns: repeat(3, 1fr);
	}
}
ul.support-topics h3 a {
	border-width: 2px;
}
ul.support-topics p {
	margin-bottom: 0;
}
ul.support-topics li {
	margin-bottom: 0;
}
body.dm-support .article-content ul.support-topics img {
	margin-top: 0;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}
ul.support-topics + ol {
	margin-top: 1.875em;
}
.support-contact-us {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 1em;
	max-width: 44em;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2em;
	margin-bottom: 4.5em;
}
@media only screen and (min-width: 38.75em) {
	.support-contact-us {
		flex-direction: row;
		gap: 2em;
	}
}
.support-contact-us h1 {
	font-size: 1.75em;
	margin-bottom: 0.2em;
}
.support-contact-us p {
	font-size: 1.3125em;
}
.support-contact-us a.btn {
	display: block;
}
.support-contact-us a.btn-inactive {
	opacity: 0.4;
}
.support-contact-us svg {
	display: block;
	color: var(--highlight-color);
	flex-shrink: 0;
	width: 96px;
}
@media only screen and (min-width: 38.75em) {
	.support-contact-us svg {
		margin-top: 1em;
	}
}
.support-contact-us ul {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.1em 1em;
	margin-bottom: 0;
}
.recent-newsletters {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2em;
	margin-left: auto;
	margin-right: auto;
	max-width: 44em;
}
.recent-newsletters p.benefits {
	font-size: 1.3125em;
	margin-bottom: 0;
}
.recent-newsletters p.english-only {
	font-size: 1em;
}
.recent-newsletters > img {
	display: block;
	width: 180px;
	height: auto;
	margin: 0 !important;
}
.recent-newsletters .embed {
	margin-top: 1.3em;
	margin-bottom: 1.8em;
}
.recent-newsletters .link {
	display: flex;
	justify-content: start;
	align-items: center;
	gap: 1em;
	margin-bottom: 0.5em;
}
.recent-newsletters .link > div {
	width: 3em;
	height: 3em;
	background-color: var(--lightest-bg-color);
	color: var(--darkest-bg-color);
	border-radius: 5px;
	font-size: 1.3em;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
}
.recent-newsletters .link > p {
	margin-bottom: inherit;
}
@media only screen and (min-width: 38.75em) {
	.recent-newsletters {
		flex-direction: row;
		align-items: start;
	}
}
.sidebar h3 {
	font-size: 1.26611661em;
	margin-bottom: 0.75em;
}
.support-helpful {
	border-top: 1px solid var(--lighter-bg-color);
	padding-top: 0.625em;
	font-size: 1em;
}
#downvote-feedback-input {
	width: 100%;
}
.support-walkthru {
	background-color: var(--highlight-subtle-color);
	margin-bottom: 1.5625em;
	padding: 1.5em;
	position: relative;
}
.support-walkthru ul,
.support-walkthru ol {
	margin-bottom: 0;
}
.support-walkthru li:last-child, .support-walkthru p:last-child {
	margin-bottom: 0;
}
.article-content table {
	margin-top: 0;
}
@media only screen and ( min-width: 38.75em ) {
	.post-title,
	.article-content {
		font-size: 100%;
	}
}
@media only screen and ( min-width: 53.75em ) {
	body:not(.support-home) .article-column {
		float: left;
		width: 66.33333333%;
	}
	.sidebar {
		float: left;
		left: auto;
		margin-left: 1%;
		position: relative;
		top: auto;
		width: 32.6666667%;
		position: sticky;
		top: 0;
		max-height: 100vh;
		overflow-y: auto;
	}
}
.contact-support-pulse {
	animation: contact-support-pulse 0.5s ease 0s 4 alternate;
}
@keyframes contact-support-pulse {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.25);
	}
}
.yt-video-container {
	position: relative;
	aspect-ratio: 16 / 9;
	margin-bottom: 2em;
}

.yt-video-container iframe, .yt-video-container object, .yt-video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.welcome-cta .yt-video-container {
	margin-left: auto;
	margin-right: auto;
	max-width: 75em;
}
/*----------------------------------------------------------------------------

   Header Search Form

----------------------------------------------------------------------------*/

.header-search {
	background-color: white;
	border-bottom: 1px solid var(--lighter-bg-color);
	padding: 1.875em 3.75%;
	position: relative;
}
.header-search label {
	left: 1em;
	position: absolute;
	top: 0.5em;
}
.header-search input[type=search] {
	padding-left: 2.25em;
	padding-right: 0; /* prevent X from being cut off */
	width: 100%;
}
@media only screen and ( min-width: 38.75em ) {
	.header-search form {
		font-size: 1.25em;
	}
}
@media only screen and ( min-width: 53.75em ) {
	body:not(.support-home) .header-search input[type=search] {
		width: 66.33333333%;
	}
}

/*----------------------------------------------------------------------------

   Sidebar Widgets

----------------------------------------------------------------------------*/

.aside-widget {
	border-top: 3px solid var(--lighter-bg-color);
	font-size: 88.888889%;
	margin-bottom: 3.75em;
	padding: 1.25em 4%;
	position: relative;
}
.aside-widget a.btn {
	padding: 1em 1.5em;
	background-color: var(--darker-cta-color);
}
.aside-widget a.btn:hover, 
.aside-widget a.btn:active {
	color: white;
	background-color: var(--darker-cta-active-color);
}
.aside-widget a.btn-inactive,
.aside-widget a.btn-inactive:hover {
	background-color: var(--darker-cta-inactive-color);
}
.aside-widget h3 {
	font-size: 1.26611661em;
	margin-bottom: 0.75em;
}
.support-widget ul {
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}
.support-widget li {
	float: left;
	margin: 0 0.5em 1.75em 0;
}
@media only screen and ( min-width: 53.75em ) {
	.aside-widget {
		margin-left: 12.244898%;
	}
}
.toc-widget ul {
	list-style-type: none;
	padding-left: 0;
}
.toc-widget li.toc-h3 {
	padding-left: 1em;
}
.toc-widget li.toc-h4 {
	padding-left: 2em;
}

/*----------------------------------------------------------------------------

   Overlays

----------------------------------------------------------------------------*/

.support-modal-shield,
.signup-errors-shield {
    background-color: var(--shield-color);
    bottom: 0;
    display: none;
    left: 0;
    overflow: scroll;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 899;
	opacity: 0;
	transition: opacity 0.5s ease-out 0s;
}
.support-modal-form,
.signup-errors {
	display: none;
	background-color: white;
	border: 5px solid var(--lighter-bg-color);
	margin: 1.25em;
	padding: 1.25em;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	opacity: 0;
}
.support-modal-form.fly,
.signup-errors.fly {
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.support-modal-form.fly.out,
.signup-errors.fly.out {
	transition-timing-function: ease-in, ease-in;
}
.support-modal-form {
	min-width: 93%;
}
.support-modal-panel-container {
	position: relative;
}
.support-email-search-results li {
	margin-bottom: 0.5em !important;
}
.support-modal-spinner {
	display: none;
	height: 2.5em;
}
.support-modal-spinner-progress {
	padding-top: 2.5em;
	text-align: center;
}
a.close-overlay {
	background-color: var(--highlight-color);
	border: none;
	border-radius: 100%;
	color: white;
	display: block;
	font-size: 1em;
	left: -1.25em;
	line-height: 2.5;
	position: absolute;
	text-align: center;
	top: -1.25em;
	width: 2.5em;
	-webkit-border-radius: 100%;
}
a.close-overlay:hover {
	color: white;
}
.download-thanks input[type=email] {
	border-radius: 0.25em;
	border: 1px solid var(--lighter-bg-color);
	margin-bottom: 0.9375em;
	padding: 0.75em;
	width: 100%;
	-webkit-border-radius: 0.25em;
}
.support-modal-form label {
	line-height: 1.25em;
}
.support-modal-form input[type=text],
.support-modal-form input[type=email],
.support-modal-form input[type=file],
.support-modal-form textarea {
	background-color: var(--lightest-bg-color);
	border-radius: 0.25em;
	border: 1px solid var(--lighter-bg-color);
	display: block;
	margin: 0.25em 0 1.75em;
	padding: 0.75em;
	width: 100%;
	-webkit-border-radius: 0.25em;
}
.support-modal-form textarea.captioned {
	margin-bottom: 0.5em;
}
.download-thanks input[type=submit] {
	border-radius: 0.25em;
	padding-bottom: 0.875em;
	padding-top: 0.75em;
	text-align: center;
	width: 100%;
	-webkit-border-radius: 0.25em;
}
.support-modal-form input[type=button],
.support-modal-form input[type=submit] {
	border-radius: 0.25em;
	letter-spacing: inherit;
	padding-bottom: 0.875em;
	padding-top: 0.75em;
	-webkit-border-radius: 0.25em;
}
.support-modal-form input[type=button],
.support-modal-form input[type=submit] {
	text-align: center;
	width: 100%;
}
.support-modal-form select {
    width: 100%;
    margin: 0.25em 0 1.75em;
}
.support-email-back-button {
	margin-bottom: 1em;
}
.signup-error-informative {
	margin-bottom: 0;
}
/* 450px & wider */
@media only screen and ( min-width: 28.125em ) {
	.download-thanks input[type=email] {
		border-right: none;
		margin-bottom: 0;
		width: 98%;
	}
	.download-thanks input[type=submit] {
		border-radius: 0 0.25em 0.25em 0;
		padding-bottom: 0.875em;
		padding-top: 0.75em;
		position: absolute;
		right: 0;
		text-align: left;
		top: 0;
		width: auto;
		-webkit-border-radius: 0 0.25em 0.25em 0;
	}
	.support-email-back-button {
		float: left;
		margin-bottom: 0;
	}
	.support-modal-form-submit {
		float: right;
	}
	.support-modal-form input[type=button],
	.support-modal-form input[type=submit] {
		text-align: left;
		width: auto;
	}
}
/* 610px & wider */
@media only screen and ( min-width: 38.125em ) {
	.support-modal-form,
	.signup-errors {
		margin: 40px 10%;
		padding: 2.5em;
	}
	.support-modal-form,
	.signup-errors {
		min-width: 80%;
	}
}
/* 800px & wider */
@media only screen and ( min-width: 50em ) {
	.support-modal-form,
	.signup-errors {
		margin: 40px 20%;
	}
	.support-modal-form,
	.signup-errors {
		min-width: 60%;
	}
}
/* 1150px & wider */
@media only screen and ( min-width: 71.875em ) {
	.support-modal-form,
	.signup-errors {
		margin: 40px 30%;
	}
	.support-modal-form,
	.signup-errors {
		min-width: 40%;
	}
}
/* 1880px & wider */
@media only screen and ( min-width: 117.5em ) {
	.support-modal-form,
	.signup-errors {
		margin: 40px 35%;
	}
	.support-modal-form,
	.signup-errors {
		min-width: 30%;
	}
}
/*----------------------------------------------------------------------------

   Enterprise

----------------------------------------------------------------------------*/
.promo-banner .testimonial {
    margin-left: auto;
    margin-right: auto;
    max-width: 20em;
}

.promo-banner .testimonial .source {
    display: flex;
    justify-content: center;
    align-items: center;
}
.promo-banner .testimonial .source > div {
    text-align: left;
    margin: 1em 0.5em;
}
.promo-banner .testimonial .source .photo img {
    width: 64px;
    height: 64px;
    border-radius: 32px;
    border: 1px white solid;
}

/* 500px & wider */
@media only screen and (min-width: 31.25em) {
    .promo-banner .testimonial {
        max-width: 21em;
    }
}
/* 800px & wider */
@media only screen and (min-width: 50em) {
    .promo-banner .testimonial {
        max-width: 28em;
    }
}