@charset "utf-8";
/*------------------------------------------------------------------------- FONTS 
*/
@font-face {
    font-family: 'wssc';
    src: url('fonts/wssc-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'wssc';
    src: url('fonts/wssc-italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'wssc';
    src: url('fonts/wssc-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'wssc';
    src: url('fonts/wssc-black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

/*------------------------------------------------------------------------- RESET 
*/
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;
	outline: 0;
}
/* 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;
}
:focus {
	outline: 0;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*------------------------------------------------------------------------- CORE STYLES
*/
body {
	color: #333;
	font-size: 15px;
	font-family: 'wssc', sans-serif;
	overflow-x: hidden;
	display: flex;
	flex-flow: column nowrap;
	min-height: 100vh;
}
body.stop-transitions * {
  transition: none !important;
}
body.page-dark {
	background: linear-gradient(180deg, #737f87 0%, #8a9ba8 40%);
}
main {
	flex: 1;
}
.hidden {
	display: none;	
}
.wow {
	visibility: hidden;
}
.wssc {
	font-weight: bold;
	color: #ff3dbf;
}
h1 .wssc {
	font-weight: 900;
}
em {
	font-style: italic;
}
.two-column-text-block {
	column-count: 2;
	column-gap: 40px;
}
@media (max-width: 640px)
{
	.two-column-text-block {
		column-count: 1;
	}
}


.video-wrapper {
	width: 100%;
	height: 600px;
	height: 357px;
	border-radius: 10px;
	overflow: hidden;
	background: #333 url(../images/video.svg) center center / 80px no-repeat;
	border: 3px solid gray;
}

	.video-wrapper .how-it-works-video {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover; /* makes the poster fill (may crop edges) */
		background: transparent;
	}

/*------------------------------------------------------------------------- CORE COLOURS & OTHER VARIABLES
*/
:root {
	--wsscMidGrey: #baa6b1;
	--wsscGrey: #717d86;
	--wsscPink: #ff3dc0;
	--wsscDarkBlue: #523e6b;
	--wsscBlue: #6292c0;
	--wsscPurple: #817192;
	--star-size: 30px;
	--star-color: #fff;
	--star-background: #fc0;
}
/*------------------------------------------------------------------------- FORM ELEMENTS
*/
form {
	padding: 0 40px;
	min-width: 280px;
}

fieldset {
	margin: 0px 0 15px;
}
label {
	display: block;
	font-weight: bold;
	margin-bottom: 5px;
}
input,
textarea,
select {
	border: 2px solid #000;
	border-radius: 5px;
	width: 100%;
	height: 40px;
	padding: 10px;
	transition: all 0.25s ease;
}
textarea {
	min-height: 200px;
	resize: none;
}
input:hover, input:focus,
textarea:hover, textarea:focus,
select:hover, select:focus {
	border-color: var(--wsscPink);
}
input::placeholder,
textarea::placeholder {
	color: #999;
	font-family: 'wssc';
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
}
button {
	border: 0;
	border-radius: 5px;
	background-color: var(--wsscPink);
	color: #fff;
	font-weight: 900;
	font-size: 18px;
	letter-spacing: -1px;
	text-transform: lowercase;
	width: 100%;
	height: 40px;
	transition: all 0.25s ease;
}
button:hover {
	background-color: #523e6b;
	cursor: pointer;
}

.field-validation-error {
	background: red url(../images/warning.svg) 5px 5px / 20px no-repeat;
	color: #fff;
	font-weight: 900;
	font-size: 12px;
	text-transform: lowercase;
	padding: 5px 5px 5px 30px;
	border-radius: 5px;
	display: inline-block;
	width: 100% !important;
}

fieldset:has(.field-validation-error) input,
fieldset:has(.field-validation-error) textarea,
fieldset:has(.field-validation-error) select {
	border-color: red;
}

@media (max-width: 640px)
{
	form {
		padding: 20px 0;
		min-width: 100%;
	}
}

/*------------------------------------------------------------------------- LINK BUTTON
*/
.button {
	display: block;
	width: 100%;
	height: 40px;
	line-height: 36px;
	text-align: center;
	font-weight: 900;
	font-size: 20px;
	letter-spacing: -1px;
	border: 2px solid #333;
	border-radius: 10px;
	transition: all 0.25s ease;
}
.button::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/button-shading.svg) center center / 100% 100% no-repeat;
	pointer-events: none;
	z-index: 100;
	opacity: 1;
}
.button i.character {
	position: relative;
	display: block;
	z-index: 2;
	width: 90px;
	height: 120px;
	background: center center / 100% no-repeat;
	margin: -15px -10px 20px -30px;
}
.button:hover {
	cursor: pointer;
}

/*------------------------------------------------------------------------- HEADER
*/
header {
	position: sticky;
	top: 0;
	z-index: 99;
	background-color: transparent;
	transition: all 0.25s ease;
	height: 50px;
}
header .container {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	flex-flow: row nowrap;
}
header .logo {
	display: block;
	width: 100%;
	max-width: 480px;
	aspect-ratio: 4.17 / 1;
	text-indent: -9999px;
	background: url(../images/wssc-logo-tab.svg) center top / 100% no-repeat;
}
body.menu-dark header .logo {
	background-image: url(../images/wssc-logo-tab-grey.svg);
}
body.menu-dark header, 
header.fixed {
	background-color: #fff;
}
header.fixed {
	background-color: #fff;
	box-shadow: 0 10px 0px 0px rgba(0,0,0,0.15);
}
body.menu-dark header {
	background-color: #76828a; 
}

@media (max-width: 767px)
{
	header {
		background-color: transparent !important;
		box-shadow: none !important;
	}
	header .container {
		display: block;
	}
	header .logo {
		max-width: 320px;
		margin: 0 auto;
	}
}

/*------------------------------------------------------------------------- NAVIGATION
*/
nav {
	margin: 0 0 0 auto;
	padding: 10px 20px 10px 0;
}
#menu {
	display: flex;
	flex-flow: row nowrap;
}
#menu li {
	margin: 0 2px;
}
#menu a {
	display: block;
	padding: 7px 10px;
	text-decoration: none;
    border: 2px solid transparent;
	border-radius: 5px;
	letter-spacing: -1px;
	font-weight: bold;
	text-transform: lowercase;
	transition: all 0.25s ease;
	color: #fff;
	white-space: nowrap;
}
#menu a.active,
#menu a:hover {
	background-color: var(--wsscPink);
	border-color: #000;
	color: #fff;
}
#mobile-menu-button {
	display: none;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: var(--wsscPink) url(../images/menu.svg) center center / 50% no-repeat;
	box-shadow: 0 0 5px 0px rgba(0,0,0,0.3);
	color: #fff;
	text-indent: -9999px;
	transition: all 0.25s ease;
}
#mobile-menu-button:hover {
	background-color: #523e6b;
}

/*------------------------------------------------------------------------- NAVIGATION FIXED
*/
header.fixed #menu a {
	color: #333;
}
header.fixed #menu a.active,
header.fixed #menu a:hover {
	color: #fff;
}

@media (min-width: 768px) {
	body.menu-dark header.fixed #menu a {
		color: #fff;
	}
}

/*------------------------------------------------------------------------- NAVIGATION MOBILE
*/
@media (max-width: 767px)
{
	nav {
		padding: 10px 10px 0 0;
	}
	#mobile-menu-button {
		display: block;
	}
	#menu {
		position: absolute;
		top: 40px;
		right: 10px;
		width: calc(100% - 20px);
		max-width: 100%;
		max-width: 240px;
		margin-top: 10px;
		flex-flow: column nowrap;
		border: 0px solid transparent;
		border-radius: 10px;
		background-color: #fff;
		height: 0;
		overflow: hidden;
		box-shadow: 0px 15px 1px -6px rgba(0,0,0,0.2);
		transition: all 0.25s ease-out;
	}
	#menu a {
		text-align: center;
		color: #000;
	}

	nav.open #menu {
		height: 180px;
		border-color: #000;
		border-width: 2px;
		padding: 7px;
	}
	nav.open #mobile-menu-button {
		background-image: url(../images/close.svg);
	}
}

/*------------------------------------------------------------------------- SECTION: LAYOUT
*/
section {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 20px;
	line-height: 1.4em;
	z-index: 1;
}
section.full-width {
	max-width: 100%;
}
section.news-item {
	max-width: 800px;
}

section.standard-text {
	padding: 40px 20px;
}
section.standard-text .row {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
}
section.standard-text .row .column {
	flex: 0 1 50%;
}
section.standard-text.full-width .row {
	max-width: 920px;
	margin: 0 auto;

}

@media (max-width: 640px)
{
	section.standard-text .row {
		flex-flow: column nowrap !important;
	}
	section.standard-text .row .column:last-of-type {
		padding-top: 30px !important;
	}
}

/*------------------------------------------------------------------------- SECTION: NEWS ITEM
*/
section.standard-text.news-item.author {
	padding: 0;
}

section.standard-text.news-item.author .row {
	align-items: center;
	gap: 20px;
}
section.standard-text.news-item.author .row .column {
	flex: 0 1 auto;
}
section.columns-2 {
	column-count: 2;
	column-gap: 40px;
}

/*------------------------------------------------------------------------- SECTION: TEXT ELEMENTS
*/
section h1 {
	text-align: center;
	font-size: 30px;
	font-weight: 900;
	letter-spacing: -2px;
	margin: 40px 0 20px;
	line-height: 30px;
	color: #333;
}
section h2 {
	text-align: center;
	font-size: 28px;
	font-weight: 900;
	letter-spacing: -2px;
	margin: 20px 0 20px;
	line-height: 30px;
}
section h3 {
	color: var(--wsscPink);
	font-weight: bold;
	font-size: 22px;
	letter-spacing: -1px;
	margin: 0 0 15px;
}
section h4 {
	color: #333;
	font-weight: bold;
	font-size: 18px;
	letter-spacing: -1px;
	margin: 0 0 15px;
}
section h5 {
	color: #333;
	font-weight: bold;
	font-size: 16px;
	margin: 0 0 10px;
}
section h6 {
	text-align: left;
	font-weight: bold;
	font-size: 16px;
	margin: 5px 0 10px;
	color: var(--wsscPink); 
}
section p {
	font-size: 15px;
	margin: 0 0 20px;
}
section p.emph,
section strong {
	font-weight: bold;
}
section a {
	position: relative;
	white-space: nowrap;
	text-decoration: none;
	color: #1f1976;
	font-weight: bold;
	transition: all 0.25s ease;
}
section a:hover {
	color: var(--wsscPink); 
}
section a::after {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	bottom: 0;
	height: 1px;
	width: 0;
	background-color: var(--wsscPink);
	opacity: 0;
	transition: inherit;
}
section a:hover::after {
	width: 100%;
	left: 0;
	opacity: 1;
}
section figcaption {
    width: 60%;
    margin: 20px auto;
    min-width: 240px;
	color: #1f1976;
	font-weight: bold;
	letter-spacing: -1px;
	line-height: 1.2em;
	text-align: center;
}
section .inline-image {
	margin: 20px auto;
}
section .inline-image img {
	display: block;
	width: 100%;
}
section code {
	font-family: monospace, monospace;
	font-weight: bold;
}

@media (max-width: 320px)
{
	section figcaption {
		width: 80%;
		min-width: 0;
	}
}

/*------------------------------------------------------------------------- SECTION: LISTS
*/
section ul {
	margin: 10px 0 20px 20px;
	list-style-type: disc;
}
section li {
	margin: 0 0 2px;
}
section li::marker {
	font-weight: 900;
	color: var(--wsscPink); 
}
section ol {
	margin: 10px 0 20px 20px;
	list-style-type: decimal;
}
section ol li {
	padding-left: 10px;
}
section ol.alpha {
	list-style-type: lower-alpha;
}
section ol.alpha.italic li::marker {
	font-style: italic;
}
section ul.error-list,
section ul.tick-list {
	list-style-type: none;
	margin-left: 0;
}
section ul.error-list li,
section ul.tick-list li {
	padding-left: 30px;
	margin-bottom: 5px;
}
section ul.tick-list li {
	background: url(../images/tick.svg) left 3px / 16px no-repeat;
}
section ul.error-list li {
	background: url(../images/warning.svg) left 3px / 24px no-repeat;
	min-height: 24px;
	font-weight: bold;
}
section ol.cartoon-numbers {
	list-style-type: none;
}
section ol.cartoon-numbers li::before {
	content: '';
	display: block;
	width: 40px;
	height: 40px;
	background: center center / auto 100% no-repeat;
	position: absolute;
	left: 0;
}
section ol.cartoon-numbers li:nth-of-type(1)::before {
	background-image: url(../images/number-1.svg);
}
section ol.cartoon-numbers li:nth-of-type(2)::before {
	background-image: url(../images/number-2.svg);
}
section ol.cartoon-numbers li:nth-of-type(3)::before {
	background-image: url(../images/number-3.svg);
}
section ol.cartoon-numbers li:nth-of-type(4)::before {
	background-image: url(../images/number-4.svg);
}
section ol.cartoon-numbers li:nth-of-type(5)::before {
	background-image: url(../images/number-5.svg);
}
/*------------------------------------------------------------------------- SECTION: TABLES
*/
section table {
	display: table;
	margin: 20px 0;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}
section table td, 
section table th {
    padding: 15px;
    line-height: 1.5;
    vertical-align: top;
    border: 1px solid rgba(0,0,0,0.3);
}
section table th {
	font-weight: bold;
}
section table tbody>tr:nth-child(odd)>td, 
section table tbody>tr:nth-child(odd)>th {
    background-color: #f9f9f9;
}
section table tbody>tr:nth-child(even)>td, 
section table tbody>tr:nth-child(even)>th {
    background-color: #f0f0f0;
}
#privacy-cookies td, 
#privacy-definitions td {
    word-break: normal;
    vertical-align: top;
}
#privacy-definitions td:nth-child(1) {
    width: 120px;
}

@media (max-width: 480px)
{
    section table, 
    section thead, 
    section tbody, 
    section th, 
    section td, 
    section tr {
	    display: block;
    }
	section thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	#privacy-definitions td:nth-child(1) {
		width: 100%;
	}
	section table tbody > tr:nth-child(4n-3) td,
	section table tbody > tr:nth-child(4n-2){
		background-color: #f9f9f9;
	}
	section table tbody > tr:nth-child(4n-1),
	section table tbody > tr:nth-child(4n) {
		background-color: #f0f0f0;
	}
}

/*------------------------------------------------------------------------- SECTION: HEADER BANNER
*/
section.header-banner {
	padding: 40px 0 0;
	color: #fff;
}
section.header-banner .container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 20px;
}
section.header-banner .row {
	display: flex;
	flex-flow: row nowrap;
}
section.header-banner .column {
	flex: 1 0 50%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	padding: 0 20px;
}
section.header-banner img {
	display: block;
	margin: 20px auto 0;
	width: calc(100% - 40px);
	max-width: 480px;
	max-height: 300px;
}

@media (max-width: 767px)
{
	section.header-banner .container {
		padding: 0 20px 40px;
	}

	section.header-banner .container > .row {
		flex-flow: column nowrap;
	}
	section.header-banner .container > .row .column {
		align-items: center;
		padding: 0;
	}
}

/*------------------------------------------------------------------------- SECTION: HEADER BANNER (HOME)
*/
#home section.header-banner {
	background: linear-gradient(180deg, #737F87 0%, #8A9BA6 100%);
	max-width: 100%;
	margin-top: -50px;
	padding-top: 60px;
}
#home section.header-banner .container > .row .column:last-of-type {
	flex: 0 1 45%;
}
#home section.header-banner h1 {
	margin: 60px auto 20px;
	max-width: 960px;
	color: #fff;
}
section.header-banner #wssc-with-ai-robot {
	position: relative;
	width: 100%;
	max-width: 480px;
	aspect-ratio: 1.28 / 1;
	background: url(../images/wssc-header-bg.svg) center center / 100% no-repeat;
	margin-bottom: 20px;
	margin-top: 40px;
	transition: all 0.25s ease;
}
section.header-banner #wssc-with-ai-robot::after {
	content: '';
	display: block;
	position: absolute;
	margin: auto;
	width: 90%;
	max-width: 363px;
	aspect-ratio: 1.3 / 1;
	background: url(../images/super-wssc-with-ai-robot.svg) center center / 100% no-repeat;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
section.header-banner #wssc-with-ai-robot h3 {
	position: absolute;
	right: -20px;
	top: -20px;
	width: 30%;
	max-width: 135px;
	aspect-ratio: 1 / 1.25;
	height: 108px;
	background: url(../images/ai-powered.svg) center center / 100% no-repeat;
	text-indent: -9999px;
	z-index: 10;
}
#try-it-now-panel {
	position: relative;
	width: 100%;
	max-width: 480px;
	border-radius: 10px 10px 0 0;
	background-color: #f5f5f5;
	filter: drop-shadow(0 0 15px rgba(0,0,0,0.25));
}
#try-it-now-panel::after {
	content: '';
	display: block;
	position: absolute;
	bottom: -30px;
	left: 0;
	width: 100%;
	height: 30px;
	background: url(../images/panel-arrow.svg) center top / 100% 100% no-repeat;
}
#try-it-now-panel .panel-header {
	position: relative;
	background: var(--wsscPink) url(../images/panel-header-shadow.png) center top / 100% 40px no-repeat;
	border-radius: 10px 10px 0 0;
	padding: 10px;
}
#try-it-now-panel .panel-header h2 {
	font-size: 24px;
	margin: -10px auto 10px;
}
#try-it-now-panel .panel-header h4 {
	position: relative;
	top: -15px;
	width: 80%;
	max-width: 240px;
	height: 40px;
	margin: 0 auto;
	background: url(../images/panel-tab.svg) center center / 100% 100% no-repeat;
	text-align: center;
	text-transform: uppercase;
	padding: 5px 0 0;
	letter-spacing: -1px;
	font-weight: bold;
	color: #fff;
	font-size: 15px;
}
#try-it-now-panel .panel-header h4::before {
	content: '';
	position: absolute;
	top: -10px;
	left: -15px;
	width: 47px;
	height: 40px;
	background: url(../images/credit-card.svg) center center / 100% no-repeat;
}
#try-it-now-panel .panel-body {
	padding: 15px 0;
	color: #000;
	text-align: center;
}
#try-it-now-panel .panel-body .row:last-of-type {
	padding: 20px 0 0;
}
#try-it-now-panel .panel-body .column {
	padding: 0 15px;
}
#try-it-now-panel .panel-body .column:last-of-type {
	border-left: 1px solid var(--wsscMidGrey);
	flex: 0 1 40%;
}
#try-it-now-panel .price-per-page {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	font-size: 56px;
	font-weight: 900;
	letter-spacing: -2px;
	color: var(--wsscPink);
	margin: 5px auto 10px;
}
#try-it-now-panel .panel-body p {
	margin: 0 auto 10px;
	color: #000;
	font-weight: bold;
	font-size: 15px;
	letter-spacing: -0.02em;
	line-height: 1.1em;
}
#try-it-now-panel .panel-body h6 {
	text-align: center;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: normal;
}
#try-it-now-panel .panel-body ul {
	text-align: left;
	font-weight: bold;
}
#try-it-now-panel .panel-body .button {
	display: block;
	position: relative;
	max-width: 240px;
	width: 90%;
	margin: 0 auto;
	border-color: #666;
	color: #fff;
	background-color: var(--wsscPink);
}
#try-it-now-panel .panel-body .button:hover {
	background-color: var(--wsscDarkBlue);
	border-color: #000;
}
#try-it-now-panel .panel-body .button::before {
	content: '';
	display: block;
	position: absolute;
	right: -70px;
	bottom: -70px;
	width: 60px;
	height: 62px;
	background: url(../images/pointy-hand.svg) center center / 100% no-repeat;
	z-index: 10;
	opacity: 0;
	transition: all 0.4s ease;
}
#try-it-now-panel:hover .panel-body .button::before {
	opacity: 1;
	right: -30px;
	bottom: -40px;
	animation-name: point-at-me;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	animation-direction: normal;
}

@media (max-width: 540px), (min-width: 768px) and (max-width: 980px) 
{
	#try-it-now-panel .panel-body {
		padding: 0 0 20px;
	}
	#try-it-now-panel .panel-body .row {
		flex-flow: column nowrap;
		padding: 0 20px 0;
	}
	#try-it-now-panel .panel-body .column {
		padding: 15px 20px 5px;
	}
	#try-it-now-panel .panel-body .column:last-of-type {
		border-left: 0;
		border-top: 1px solid var(--wsscMidGrey);
	}
}

@media(max-width: 960px) and (min-width: 768px)
{
	#home section.header-banner .container > .row:last-of-type {
		position: absolute;
		bottom: 60px;
		width: 50%;
	}
	section.header-banner #wssc-with-ai-robot {
		margin: 40px auto auto;
	}
}

@media (max-width: 340px)
{
	#try-it-now-panel .panel-header h4 {
		font-size: 12px;
	}
	#try-it-now-panel .panel-header h4::before {
		left: -25px;
	}
}

/*------------------------------------------------------------------------- SECTION: HEADER BANNER (PRICE LIST)
*/
#example-prices section.header-banner {
	margin-bottom: 40px;
	background: transparent;
}
#example-prices section.header-banner .column {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	padding: 0 20px;
}
#example-prices section.header-banner .column .wssc {
	color: #fff;
}
#example-prices section.header-banner .column p:first-of-type {
	font-weight: bold;
}

/*------------------------------------------------------------------------- SECTION: HEADER STRAP (HOME)
*/
section.strap {
	background-color: var(--wsscPurple);
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	max-width: 100%;
	min-height: 90px;
	z-index: 2;
	box-shadow: 0 10px 0 0 rgba(0,0,0,0.2);
}
section.strap .container {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	gap: 10px;
	max-width: 960px;
	margin: 0 auto;
}
section.strap .button {
	position: relative;
	z-index: 0;
	background-color: #fff;
	border-radius: 10px;
	color: #000;
	text-align: left;
	line-height: 1em;
	font-size: 20px;
	text-transform: lowercase;
	height: 70px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	max-width: 400px;
	margin: 0 auto;
}
section.strap .button:hover {
	background-color: var(--wsscDarkBlue);
	color: #fff;
}
section.strap .button::before {
	content: '';
	display: block;
	width: 68px;
	height: 66px;
	background: url(../images/wssc-for-flash.svg) center center / 100% no-repeat;
	border-radius: 7px 0 0 7px;
	overflow: hidden;
}
section.strap .button:hover::before {
	filter: brightness(150%);
}
section.strap i.character.business {
	background-image: url(../images/wssc-for-business-owners.svg);
}
section.strap i.character.marketing {
	background-image: url(../images/wssc-for-marketing-professionals.svg);
}
section.strap i.character.developers {
	background-image: url(../images/wssc-for-developers.svg);
}

@media (max-width: 960px) and (min-width: 768px), (max-width: 320px)
{
	section.strap .button {
		font-size: 16px;
	}
}

@media (max-width: 767px)
{
	section.strap .container {
		flex-flow: column nowrap;
		gap: 40px;
	}

}
@media (max-width: 768px) and (min-width: 440px)
{
	section.strap .button br {
		display: none;
	}
}

/*------------------------------------------------------------------------- SECTION: HOW IT WORKS
*/
section#how-it-works {
	max-width: 100%;
	background: #ddd url(../images/wavy-bg.svg) center center repeat-x;
	text-align: center;
}
section#how-it-works .container {
	max-width: 960px;
	margin: 0 auto;
}
section#how-it-works .column {
	flex: 1;
	padding: 0 20px;
}
section#how-it-works .column:first-of-type {
	flex: 0 1 33%;
}
section#how-it-works h2::before {
	content: '';
	display: block;
	margin: 0 auto 20px;
	width: 64px;
	height: 64px;
	background: url(../images/settings.svg) center center / 100% no-repeat;
}
section#how-it-works:hover h2::before {
	animation-name: spin-me;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	animation-direction: normal;
}

/*------------------------------------------------------------------------- SECTION: WHY IS IT IMPORTANT?
*/
section#why-is-it-important:hover h2::before {
	animation-name:  hvr-buzz;
	animation-duration: 0.2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	animation-direction: normal;
}
section#why-is-it-important h2::before {
	content: '';
	display: block;
	margin: 0 auto 20px;
	width: 64px;
	height: 70px;
	background: url(../images/dictionary-icon.svg) center center / 100% no-repeat;
}
section#why-is-it-important h2 {
	margin-bottom: 60px;
}

section#why-is-it-important h4 {
	font-weight: 900;
	font-size: 16px;
	margin-bottom: 30px;
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-start;
	break-inside: avoid;
	gap: 10px;
}
section#why-is-it-important h4::before {
	content: '';
	display: block;
	width: 45px;
	height: 42px;
	background: url(../images/warning.svg) center center / 100% no-repeat;

}

/*------------------------------------------------------------------------- SECTION: OUR SOLUTION
*/
section#our-solution {
	background-color: var(--wsscPurple);
	overflow: hidden;
}
section#our-solution::before {
	content: '';
	display: block;
	position: absolute;
	right: -35%;
	top: -880px;
	width: 1280px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: #fff;
	opacity: 5%;
	pointer-events: none;
}
section#our-solution .column:first-of-type {
	padding-right: 12%;
	font-weight: bold;
}

section#our-solution h2::before {
	content: '';
	display: block;
	margin: 0 auto 20px;
	width: 64px;
	height: 70px;
	background: url(../images/light-bulb-icon.svg) center center / 100% no-repeat;
}
section#our-solution:hover h2::before {
	animation-name: glowing;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	animation-direction: normal;
}

section#our-solution h2 {
	margin-bottom: 60px;
}
section#our-solution .button {
	width: 90%;
	max-width: 300px;
	height: 70px;
	background-color: #fff;
	color: #000;
	white-space: normal;
	text-align: left;
	line-height: 0.95em;
	padding: 12px 0 0 20px;
	text-transform: lowercase;
	margin: 0 auto;
}
section#our-solution .button:hover {
	background-color: var(--wsscDarkBlue);
	color: #fff;
}
section#our-solution .button i.character {
	background-image: url(../images/wssc-clipboard.svg);
	position: absolute;
	right: 10px;
	top: -50px;
	margin: 0;
	width: 110px;
}

@media (max-width: 640px)
{
	section#our-solution .column:first-of-type {
		padding-right: 0;
		padding-bottom: 40px;
	}
}

/*------------------------------------------------------------------------- SECTION: CTA
*/
section.cta {
	background-color: #f9f9f9;
	border-bottom: 2px solid #000;
	z-index: 2;
	box-shadow: 0 10px 0 0 rgba(0,0,0,0.2);
	padding: 40px 20px;
}
section.cta .cta-panel {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	border: 3px solid #000;
	border-radius: 15px;
	background-color: var(--wsscPink);
	color: #fff;
	text-align: center;
}
section.cta .cta-panel::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/wavy-bg.svg) center center / 100% repeat-x;
	z-index: 1;
	opacity: 0.5;
}
section.cta .cta-panel * {
	z-index: 2;
}
section.cta .cta-panel .wssc {
	color: #fff;
	font-weight: 900;
}
section.cta .cta-panel a:not(.button) {
	display: block;
	width: 100%;
	height: 100%;
	padding: 10px;
	color: inherit;
	z-index: 2;
	position: relative;
}
section.cta .cta-panel a:not(.button)::after {
	display: none;
}
section.cta .cta-panel a:not(.button):hover {
	color: inherit;
}

/*------------------------------------------------------------------------- CTA: TRY IT NOW FOR FREE!
*/
#try-wssc-for-free::before {
	content: '';
	display: block;
	position: absolute;
	left: -10px;
	top: -10px;
	width: 190px;
	height: 190px;
	background: url(../images/no-credit-card-flash.svg) center center / 100% no-repeat;
}
#try-wssc-for-free strong {
	font-weight: 900;
}
#try-wssc-for-free h2::before {
	content: '';
	display: block;
	margin: 0 auto;
	width: 60px;
	height: 60px;
	background: url(../images/free.svg) center center / 100% no-repeat;
}
#try-wssc-for-free:hover h2::before {
	animation-name: glowing, hvr-pulse;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	animation-direction: normal;
}
#try-wssc-for-free h2::after {
	content: '';
	display: block;
	position: absolute;
	width: 200px;
	height: 100%;
	right: 0;
	top: 0;
	background: transparent url(/images/wssc-ai-bot.svg) center top / 100% no-repeat;
	z-index: 2;
}


#try-wssc-for-free .button {
	max-width: 240px;
	margin: 0 auto 20px;
	background-color: #fff;
	color: #000;
}
#try-wssc-for-free .button:hover {
	background-color: var(--wsscDarkBlue);
	color: #fff;
}

@media (max-width: 800px)
{
	#try-wssc-for-free p {
		width: 40%;
		margin: 0 auto 10px;
	}
	#try-wssc-for-free p br {
		display: none;
	}
	#try-wssc-for-free h2::after {
		width: 140px;
		background-position: center center;
		right: 20px;
	}
}
@media (max-width: 580px)
{
	#try-wssc-for-free h2::after {
		display: none;
	}
	#try-wssc-for-free p {
		width: 80%;
	}
}
@media (max-width: 480px)
{
	#try-wssc-for-free::before {
		width: 140px;
		height: 140px;
	}
}


/*------------------------------------------------------------------------- SECTION: IMAGE
*/
section.image-area {
	background-color: #f9f9f9;
	border: 2px solid #e3e3e3;
    border-radius: 10px;
	text-align: center;
	margin: 0 auto;
	width: calc(100% - 40px);
	max-width: 920px;
}
section.image-area img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	max-height: 600px;
}
section.image-area .caption {
	margin: 20px auto 0;
}


body.feature-article section.image-area {
	max-width: 800px;
	margin: 40px auto 0;
}

.screenshot {
	position: relative;
	width: 100%;
	max-width: 480px;
	min-height: 100px;
	border-radius: 15px;
	border: 2px solid #fff;
	margin: 0 auto 20px;
}
.screenshot.float-shadow {
	margin-bottom: 60px;
}
.screenshot img {
	display: block;
	width: 100%;
	height: auto;
}
.screenshot .image-wrapper {
	overflow: hidden;
	border-radius: 14px;
}

.float-shadow::after {
	content: '';
	display: block;
	position: absolute;
	width: 90%;
	height: 10px;
	background-color: #000;
	opacity: 0.2;
	border-radius: 50%;
	left: 0;
	right: 0;
	bottom: -30px;
	margin: 0 auto;
}

/*------------------------------------------------------------------------- SECTION: BOX-OUT
*/
section.box-out {
	border-radius: 10px;
	border: 2px solid #e3e3e3;
	background-color: #f9f9f9;
}

section.box-out.capabilityNotes {
	margin-top: 20px;
}
section.box-out.capabilityNotes ul {
	list-style: none;
	margin: 20px 0;
}
section.box-out.capabilityNotes ul li {
	display: flex;
	flex-flow: row nowrap;
	gap: 10px;
}

@media (max-width: 1040px)
{
	section.box-out {
		max-width: calc(100% - 40px);
	}
}

/*------------------------------------------------------------------------- SECTION: NOTES
*/
section.notes {
	text-align: center;
	color: #fff;
	padding: 40px;
}
section.notes h4 {
	font-weight: 900;
	font-size: 28px;
	letter-spacing: -1px;
	margin: 0 0 20px;
	color: #fff;
}


/*------------------------------------------------------------------------- MAIN CONTENT (DARK)
*/
body.page-dark section h1 {
	color: #fff;
	margin-top: 20px;
}
section.dark-theme {
	color: #fff;
}
section.dark-theme .wssc {
	color: #fff;
}

/*------------------------------------------------------------------------- HOME PAGE CUSTOMER QUOTES
*/
#featured-reviews h2::before {
	content: '';
	display: block;
	margin: 0 auto 20px;
	width: 64px;
	height: 56px;
	background: url(../images/megaphone-icon.svg) center center / 100% no-repeat;
}
#featured-reviews:hover h2::before {
	animation-name:  hvr-buzz;
	animation-duration: 0.2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	animation-direction: normal;
}
#customer-quotes {
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
	gap: 40px;
	margin: 40px auto 0;
}
.customer-quote {
	position: relative;
	background-color: #f9f9f9;
	border: 3px solid #000;
	border-radius: 20px;
	padding: 30px;
	max-width: 480px;
	margin: 0 auto 20px;
	filter: drop-shadow(10px 10px 0 rgba(0,0,0,0.1));
	display: flex;
	flex-flow: column nowrap;
}
.customer-quote::after {
	content: '';
	display: block;
	position: absolute;
	left: 40px;
	top: 100%;
	width: 33px;
	height: 29px;
	background: url(../images/testimonial-bubble-tag.svg) center center / 100% 100% no-repeat;
}
.customer-quote b 
{
	font-weight:bold;
}
.quote-attribution {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	margin: auto 0 0 0;
	gap: 10px;
}
.customer-logo {
	width: 100%;
	max-width: 120px;
	margin: 10px 0 0;
}
.customer-logo img {
	display: block;
	width: 100%;
}
.customer-name {
	font-weight: bold;
}

@media (max-width: 720px)
{
	#customer-quotes {
		flex-flow: column nowrap;
	}
}

/*------------------------------------------------------------------------- CREATE ACCOUNT PAGE
*/
#confirm-account .header-banner,
#create-account .header-banner {
	padding: 60px 0 20px;
	max-width: 640px;
}
#confirm-account .header-banner .column:first-of-type,
#create-account .header-banner .column:first-of-type {
	flex: 1 1 auto;
	padding: 0;
}
#confirm-account .header-banner img,
#create-account .header-banner img {
	max-height: 200px;
	width: 100%;
	margin-top: 0;
}
#confirm-account .header-banner h1,
#create-account .header-banner h1 {
	text-align: left;
}
#create-account section.box-out {
	padding: 40px 20px;
	max-width: 480px;
	width: calc(100% - 40px);
	margin: 0 auto 40px;
}
#create-account form {
	margin: 0 auto 20px;
}
#create-account p {
	text-align: center;
}
#create-account .btn-link {
	display: inline-block;
	margin: 20px 0 0 0;
}

@media (max-width: 640px)
{
	#confirm-account .header-banner .row,
	#create-account .header-banner .row {
		flex-direction: column;
	}
	#confirm-account .header-banner h1,
	#create-account .header-banner h1 {
		text-align: center;
	}
	#confirm-account .header-banner img,
	#create-account .header-banner img {
		transform: translateX(-30px);
	}
	#confirm-account section.header-banner p {
		text-align: center;
	}
}

/*------------------------------------------------------------------------- ALERT MESSAGES
*/
.alert {
	width: calc(100% - 20px);
	max-width: 480px;
	margin: 0 auto 20px;
    border-radius: 10px;
    border: 2px solid #e3e3e3;
    background-color: #f9f9f9;
	padding: 20px 20px 20px 70px;
}
.alert.alert-danger {
	background: red url(/images/stop.svg) 10px 8px / 40px 40px no-repeat;
	color: #fff;
}
.alert.alert-info {
	background: #f9f9f9 url(/images/information.svg) 10px 8px / 40px 40px no-repeat;
}
.alert form {
	margin: 20px 0 0 -50px;
	width: calc(100% + 50px);
	padding: 0;
}
.alert strong {
	font-weight: bold;
}
.alert p {
	margin: 0 0 10px;
	line-height: 1.1em;
}

/*------------------------------------------------------------------------- PRICING TABLE
*/
#prices {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	position: relative;
	padding: 20px 0;
	width: calc(100% - 40px);
	z-index: 2;
}
#pricing-table {
	flex: 1 0 calc(100% - 280px);
}
.pricing-item {
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 10px;
	background-color: #f5f5f5;
	border-radius: 10px;
	margin-bottom: 5px;
	min-height: 50px;
	padding-right: 20px;
	transition: opacity 0.25s ease, width 0.25s ease;
	opacity: 0.5;
	width: 90%;
}
.pricing-item.restricted {
	background-color: silver;
	opacity: 0.3;
	cursor: not-allowed!important;
}
.govRestricted{
	font-weight:bolder;
	color:red;
}
.pricing-item:hover,
.pricing-item.selected {
	opacity: 1;
	cursor: pointer;
}
.pricing-item.selected {
	width: calc(100% + 10px);
}
.pricing-item.selected::after {
	content: '';
	width: 20px;
	height: 20px;
	position: relative;
	display: block;
	background: url(/images/arrow-right.svg) center center / 100% no-repeat;
	margin: 0 0 0 auto;
}
.pricing-item .pricing-flag {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	background-color: var(--wsscPink);
	flex: 0 0 50px;
}
.pricing-item .pricing-language {
	position: relative;
	font-weight: bold;
	flex: 1;
	line-height: 1em;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-start;
}
.pricing-item .pricing-language .language {
	flex: 0 1 160px;
}
.pricing-item .pricing-cost-per-page {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 10px;
}
.pricing-item .pricing-cost-per-page .label {
	color: var(--wsscGrey);
	line-height: 0.9em;
}
.pricing-item .pricing-cost-per-page .price {
	color: var(--wsscPink);
	font-size: 20px;
	font-weight: 900;
}
#pricing-pop-up {
	position: relative;
	top: 0;
	right: 0;
	width: 280px;
	max-width: 100%;
	border-radius: 10px;
	box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
	z-index: 10;
	transition: top 0.25s ease;
}
#pop-up-header {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	padding: 5px;
	background-color: var(--wsscPink);
	border-radius: 10px 10px 0 0;
	gap: 10px;
}
#pop-up-header h3 {
	color: #fff;
	font-size: 15px;
	letter-spacing: 0;
	margin: 0;
}
#pop-up-body {
	background-color: #f5f5f5;
	position: relative;
	padding: 20px;
}
#pop-up-body::before {
	content: '';
	position: absolute;
	right: -30px;
	top: 140px;
	width: 95px;
	height: 138px;
	background: transparent url(/images/wssc-ai-bot.svg) center center / 100% no-repeat;
}
#pop-up-body::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 50px;
	display: block;
	left: 0;
	bottom: -50px;
	background: transparent url(/images/pricing-pop-up-arrow-bg.png) center top / 100% 50px no-repeat;
}
#pop-up-body h4 {
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: -1px;
	text-align: center;
	margin: 0;
	line-height: 1em;
}
#pop-up-body .free-pages {
	color: var(--wsscPink);
	font-size: 32px;
	font-weight: 900;
	letter-spacing: -2px;
	text-align: center;
	margin: 0 -30px 10px 0;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	gap: 5px;	
	white-space: nowrap;
}
#pop-up-body .free-pages::after {
	content: '';
	display: block;
	width: 40px;
	height: 40px;
	background: url(/images/free.svg) center center / 100% no-repeat;
	transform: rotate(15deg);
}
#pop-up-body .button {
	background-color: var(--wsscPink);
	color: #fff;
	margin: 20px auto;
	max-width: 240px;
}
#pop-up-body .button:hover {
	background-color: var(--wsscDarkBlue);
}
#pop-up-body h5 {
	border-bottom: 1px solid var(--wsscMidGrey);
	padding-bottom: 5px;
	margin: 20px 0 20px;
}
#pop-up-body .notes {
	color: var(--wsscGrey);
	margin: 20px 0 0;
	font-size: 13px;
}
#pop-up-body .cost {
	display: flex;
	align-items: center;
	flex-flow: row wrap;
	margin-bottom: 5px;
}
#pop-up-body .cost > .label {
	flex: 0 0 120px;
}
#pop-up-body .cost .label {
	color: #333;
	font-weight: normal;
}
#pop-up-body .cost .price {
	font-weight: 900;
	font-size: 20px;
	color: var(--wsscPink);
}
#pop-up-footer {
	background-color: var(--wsscMidGrey);
	padding: 50px 10px 10px;
	border-radius: 0 0 10px 10px;
	text-align: center;
}
#pop-up-footer h4 {
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	margin: 0 0 5px;
}
#pop-up-footer .savings {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #fff;
	font-weight: 900;
	font-size: 30px;
	letter-spacing: -1px;
	line-height: 1em;
	margin: 0 0 0 -20px;
}
#pop-up-footer .savings::before {
	content: '';
	display: block;
	width: 30px;
	height: 30px;
	background: url(/images/token.svg) center center / 100% no-repeat;
}

@media (max-width: 767px)
{
	.pricing-item .pricing-language .language {
		display: none;
	}
}

@media (max-width: 600px)
{
	.pricing-item {
		flex-flow: column nowrap;
		align-items: flex-start;
		padding: 0 10px 10px 0;
		gap: 0;
	}
	.pricing-item .pricing-language {
		display: block;
		height: auto;
	}

	.pricing-item .pricing-flag {
		width: 100%;
		background-color: transparent;
		justify-content: flex-start;
		padding: 0 0 0 10px;
		flex: 0 0 auto;
	}
	.pricing-item .pricing-cost-per-page,
	.pricing-item .pricing-language,
	.pricing-item .pricing-flag {
		padding-left: 10px;
	}
	.pricing-item .pricing-language {
		width: 100%;
	}

	.pricing-item.selected::after {
		position: absolute;
		right: 20px;
		top: 15px;
	}
	.pricing-item .pricing-cost-per-page {
		gap: 5px;
	}

}
@media (max-width: 480px) and (min-width: 330px)
{
	.pricing-item {
		flex-flow: row wrap;
		align-items: center;
	}
	.pricing-item .pricing-flag {
		width: auto;
		flex: 0 0 50px;
	}
	.pricing-item .pricing-language {
		flex: 0 0 calc(100% - 50px);
	}
}
@media (max-width: 480px)
{
	.pricing-item.selected::after {
		bottom: 10px;
		right: 10px;
		top: auto;
		position: absolute;
		background: url(/images/arrow-down.svg) center center / 100% no-repeat;
		margin: 0;
	}
	#prices {
		display: block;
	}
	.pricing-item,
	.pricing-item.selected {
		width: 100%;
	}
	#pricing-pop-up {
		width: 100%;
		margin: 10px auto 0;
		position: absolute;
		right: 0;
		left: 0;
	}
}
@media (max-width: 330px)
{
	#pop-up-body .free-pages {
		font-size: 24px;
	}
	#pop-up-body h4 .newline {
		display: block;
		font-size: 0;
		height: 0;
	}
	#pop-up-body .button {
		font-size: 16px;
	}
	#pop-up-footer .savings {
		margin-left: 0;
	}
	#pop-up-footer .savings::before {
		display: none;
	}
	#pop-up-body .cost {
		flex-flow: column nowrap;
	}
	#pop-up-body .cost > .label {
		flex: 1 0 auto;
	}
}

/*------------------------------------------------------------------------- COUNTRY FLAG ICONS
*/
.flag {
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
	border: 1px solid #fff;
	border-radius: 50%;
	background: center center no-repeat;
	background-size: cover;
}
.flag::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: url(/images/country-flag-overlay.svg) center center / 100% no-repeat;
	opacity: 0.8;
}
.flag.af { background-image: url(/images/flags/af.svg); }
.flag.ax { background-image: url(/images/flags/ax.svg); }
.flag.al { background-image: url(/images/flags/al.svg); }
.flag.dz { background-image: url(/images/flags/dz.svg); }
.flag.as { background-image: url(/images/flags/as.svg); }
.flag.ad { background-image: url(/images/flags/ad.svg); }
.flag.ao { background-image: url(/images/flags/ao.svg); }
.flag.ai { background-image: url(/images/flags/ai.svg); }
.flag.aq { background-image: url(/images/flags/aq.svg); }
.flag.ag { background-image: url(/images/flags/ag.svg); }
.flag.ar { background-image: url(/images/flags/ar.svg); }
.flag.am { background-image: url(/images/flags/am.svg); }
.flag.aw { background-image: url(/images/flags/aw.svg); }
.flag.au { background-image: url(/images/flags/au.svg); }
.flag.at { background-image: url(/images/flags/at.svg); }
.flag.az { background-image: url(/images/flags/az.svg); }
.flag.bs { background-image: url(/images/flags/bs.svg); }
.flag.bh { background-image: url(/images/flags/bh.svg); }
.flag.bd { background-image: url(/images/flags/bd.svg); }
.flag.bb { background-image: url(/images/flags/bb.svg); }
.flag.by { background-image: url(/images/flags/by.svg); }
.flag.be { background-image: url(/images/flags/be.svg); }
.flag.bz { background-image: url(/images/flags/bz.svg); }
.flag.bj { background-image: url(/images/flags/bj.svg); }
.flag.bm { background-image: url(/images/flags/bm.svg); }
.flag.bt { background-image: url(/images/flags/bt.svg); }
.flag.bo { background-image: url(/images/flags/bo.svg); }
.flag.bq { background-image: url(/images/flags/bq.svg); }
.flag.ba { background-image: url(/images/flags/ba.svg); }
.flag.bw { background-image: url(/images/flags/bw.svg); }
.flag.bv { background-image: url(/images/flags/bv.svg); }
.flag.br { background-image: url(/images/flags/br.svg); }
.flag.io { background-image: url(/images/flags/io.svg); }
.flag.bn { background-image: url(/images/flags/bn.svg); }
.flag.bg { background-image: url(/images/flags/bg.svg); }
.flag.bf { background-image: url(/images/flags/bf.svg); }
.flag.bi { background-image: url(/images/flags/bi.svg); }
.flag.cv { background-image: url(/images/flags/cv.svg); }
.flag.kh { background-image: url(/images/flags/kh.svg); }
.flag.cm { background-image: url(/images/flags/cm.svg); }
.flag.ca { background-image: url(/images/flags/ca.svg); }
.flag.ky { background-image: url(/images/flags/ky.svg); }
.flag.cf { background-image: url(/images/flags/cf.svg); }
.flag.td { background-image: url(/images/flags/td.svg); }
.flag.cl { background-image: url(/images/flags/cl.svg); }
.flag.cn { background-image: url(/images/flags/cn.svg); }
.flag.cx { background-image: url(/images/flags/cx.svg); }
.flag.cc { background-image: url(/images/flags/cc.svg); }
.flag.co { background-image: url(/images/flags/co.svg); }
.flag.km { background-image: url(/images/flags/km.svg); }
.flag.cg { background-image: url(/images/flags/cg.svg); }
.flag.cd { background-image: url(/images/flags/cd.svg); }
.flag.ck { background-image: url(/images/flags/ck.svg); }
.flag.cr { background-image: url(/images/flags/cr.svg); }
.flag.ci { background-image: url(/images/flags/ci.svg); }
.flag.hr { background-image: url(/images/flags/hr.svg); }
.flag.cu { background-image: url(/images/flags/cu.svg); }
.flag.cw { background-image: url(/images/flags/cw.svg); }
.flag.cy { background-image: url(/images/flags/cy.svg); }
.flag.cz { background-image: url(/images/flags/cz.svg); }
.flag.dk { background-image: url(/images/flags/dk.svg); }
.flag.dj { background-image: url(/images/flags/dj.svg); }
.flag.dm { background-image: url(/images/flags/dm.svg); }
.flag.do { background-image: url(/images/flags/do.svg); }
.flag.ec { background-image: url(/images/flags/ec.svg); }
.flag.eg { background-image: url(/images/flags/eg.svg); }
.flag.sv { background-image: url(/images/flags/sv.svg); }
.flag.gq { background-image: url(/images/flags/gq.svg); }
.flag.er { background-image: url(/images/flags/er.svg); }
.flag.ee { background-image: url(/images/flags/ee.svg); }
.flag.sz { background-image: url(/images/flags/sz.svg); }
.flag.et { background-image: url(/images/flags/et.svg); }
.flag.fk { background-image: url(/images/flags/fk.svg); }
.flag.fo { background-image: url(/images/flags/fo.svg); }
.flag.fj { background-image: url(/images/flags/fj.svg); }
.flag.fi { background-image: url(/images/flags/fi.svg); }
.flag.fr { background-image: url(/images/flags/fr.svg); }
.flag.gf { background-image: url(/images/flags/gf.svg); }
.flag.pf { background-image: url(/images/flags/pf.svg); }
.flag.tf { background-image: url(/images/flags/tf.svg); }
.flag.ga { background-image: url(/images/flags/ga.svg); }
.flag.gm { background-image: url(/images/flags/gm.svg); }
.flag.ge { background-image: url(/images/flags/ge.svg); }
.flag.de { background-image: url(/images/flags/de.svg); }
.flag.gh { background-image: url(/images/flags/gh.svg); }
.flag.gi { background-image: url(/images/flags/gi.svg); }
.flag.gr { background-image: url(/images/flags/gr.svg); }
.flag.gl { background-image: url(/images/flags/gl.svg); }
.flag.gd { background-image: url(/images/flags/gd.svg); }
.flag.gp { background-image: url(/images/flags/gp.svg); }
.flag.gu { background-image: url(/images/flags/gu.svg); }
.flag.gt { background-image: url(/images/flags/gt.svg); }
.flag.gg { background-image: url(/images/flags/gg.svg); }
.flag.gn { background-image: url(/images/flags/gn.svg); }
.flag.gw { background-image: url(/images/flags/gw.svg); }
.flag.gy { background-image: url(/images/flags/gy.svg); }
.flag.ht { background-image: url(/images/flags/ht.svg); }
.flag.hm { background-image: url(/images/flags/hm.svg); }
.flag.va { background-image: url(/images/flags/va.svg); }
.flag.hn { background-image: url(/images/flags/hn.svg); }
.flag.hk { background-image: url(/images/flags/hk.svg); }
.flag.hu { background-image: url(/images/flags/hu.svg); }
.flag.is { background-image: url(/images/flags/is.svg); }
.flag.in { background-image: url(/images/flags/in.svg); }
.flag.id { background-image: url(/images/flags/id.svg); }
.flag.ir { background-image: url(/images/flags/ir.svg); }
.flag.iq { background-image: url(/images/flags/iq.svg); }
.flag.ie { background-image: url(/images/flags/ie.svg); }
.flag.im { background-image: url(/images/flags/im.svg); }
.flag.il { background-image: url(/images/flags/il.svg); }
.flag.it { background-image: url(/images/flags/it.svg); }
.flag.jm { background-image: url(/images/flags/jm.svg); }
.flag.jp { background-image: url(/images/flags/jp.svg); }
.flag.je { background-image: url(/images/flags/je.svg); }
.flag.jo { background-image: url(/images/flags/jo.svg); }
.flag.kz { background-image: url(/images/flags/kz.svg); }
.flag.ke { background-image: url(/images/flags/ke.svg); }
.flag.ki { background-image: url(/images/flags/ki.svg); }
.flag.kp { background-image: url(/images/flags/kp.svg); }
.flag.kr { background-image: url(/images/flags/kr.svg); }
.flag.kw { background-image: url(/images/flags/kw.svg); }
.flag.kg { background-image: url(/images/flags/kg.svg); }
.flag.la { background-image: url(/images/flags/la.svg); }
.flag.lv { background-image: url(/images/flags/lv.svg); }
.flag.lb { background-image: url(/images/flags/lb.svg); }
.flag.ls { background-image: url(/images/flags/ls.svg); }
.flag.lr { background-image: url(/images/flags/lr.svg); }
.flag.ly { background-image: url(/images/flags/ly.svg); }
.flag.li { background-image: url(/images/flags/li.svg); }
.flag.lt { background-image: url(/images/flags/lt.svg); }
.flag.lu { background-image: url(/images/flags/lu.svg); }
.flag.mo { background-image: url(/images/flags/mo.svg); }
.flag.mg { background-image: url(/images/flags/mg.svg); }
.flag.mw { background-image: url(/images/flags/mw.svg); }
.flag.my { background-image: url(/images/flags/my.svg); }
.flag.mv { background-image: url(/images/flags/mv.svg); }
.flag.ml { background-image: url(/images/flags/ml.svg); }
.flag.mt { background-image: url(/images/flags/mt.svg); }
.flag.mh { background-image: url(/images/flags/mh.svg); }
.flag.mq { background-image: url(/images/flags/mq.svg); }
.flag.mr { background-image: url(/images/flags/mr.svg); }
.flag.mu { background-image: url(/images/flags/mu.svg); }
.flag.yt { background-image: url(/images/flags/yt.svg); }
.flag.mx { background-image: url(/images/flags/mx.svg); }
.flag.fm { background-image: url(/images/flags/fm.svg); }
.flag.md { background-image: url(/images/flags/md.svg); }
.flag.mc { background-image: url(/images/flags/mc.svg); }
.flag.mn { background-image: url(/images/flags/mn.svg); }
.flag.me { background-image: url(/images/flags/me.svg); }
.flag.ms { background-image: url(/images/flags/ms.svg); }
.flag.ma { background-image: url(/images/flags/ma.svg); }
.flag.mz { background-image: url(/images/flags/mz.svg); }
.flag.mm { background-image: url(/images/flags/mm.svg); }
.flag.na { background-image: url(/images/flags/na.svg); }
.flag.nr { background-image: url(/images/flags/nr.svg); }
.flag.np { background-image: url(/images/flags/np.svg); }
.flag.nl { background-image: url(/images/flags/nl.svg); }
.flag.nc { background-image: url(/images/flags/nc.svg); }
.flag.nz { background-image: url(/images/flags/nz.svg); }
.flag.ni { background-image: url(/images/flags/ni.svg); }
.flag.ne { background-image: url(/images/flags/ne.svg); }
.flag.ng { background-image: url(/images/flags/ng.svg); }
.flag.nu { background-image: url(/images/flags/nu.svg); }
.flag.nf { background-image: url(/images/flags/nf.svg); }
.flag.mk { background-image: url(/images/flags/mk.svg); }
.flag.mp { background-image: url(/images/flags/mp.svg); }
.flag.no { background-image: url(/images/flags/no.svg); }
.flag.om { background-image: url(/images/flags/om.svg); }
.flag.pk { background-image: url(/images/flags/pk.svg); }
.flag.pw { background-image: url(/images/flags/pw.svg); }
.flag.ps { background-image: url(/images/flags/ps.svg); }
.flag.pa { background-image: url(/images/flags/pa.svg); }
.flag.pg { background-image: url(/images/flags/pg.svg); }
.flag.py { background-image: url(/images/flags/py.svg); }
.flag.pe { background-image: url(/images/flags/pe.svg); }
.flag.ph { background-image: url(/images/flags/ph.svg); }
.flag.pn { background-image: url(/images/flags/pn.svg); }
.flag.pl { background-image: url(/images/flags/pl.svg); }
.flag.pt { background-image: url(/images/flags/pt.svg); }
.flag.pr { background-image: url(/images/flags/pr.svg); }
.flag.qa { background-image: url(/images/flags/qa.svg); }
.flag.re { background-image: url(/images/flags/re.svg); }
.flag.ro { background-image: url(/images/flags/ro.svg); }
.flag.ru { background-image: url(/images/flags/ru.svg); }
.flag.rw { background-image: url(/images/flags/rw.svg); }
.flag.bl { background-image: url(/images/flags/bl.svg); }
.flag.sh { background-image: url(/images/flags/sh.svg); }
.flag.kn { background-image: url(/images/flags/kn.svg); }
.flag.lc { background-image: url(/images/flags/lc.svg); }
.flag.mf { background-image: url(/images/flags/mf.svg); }
.flag.pm { background-image: url(/images/flags/pm.svg); }
.flag.vc { background-image: url(/images/flags/vc.svg); }
.flag.ws { background-image: url(/images/flags/ws.svg); }
.flag.sm { background-image: url(/images/flags/sm.svg); }
.flag.st { background-image: url(/images/flags/st.svg); }
.flag.sa { background-image: url(/images/flags/sa.svg); }
.flag.sn { background-image: url(/images/flags/sn.svg); }
.flag.rs { background-image: url(/images/flags/rs.svg); }
.flag.sc { background-image: url(/images/flags/sc.svg); }
.flag.sl { background-image: url(/images/flags/sl.svg); }
.flag.sg { background-image: url(/images/flags/sg.svg); }
.flag.sx { background-image: url(/images/flags/sx.svg); }
.flag.sk { background-image: url(/images/flags/sk.svg); }
.flag.si { background-image: url(/images/flags/si.svg); }
.flag.sb { background-image: url(/images/flags/sb.svg); }
.flag.so { background-image: url(/images/flags/so.svg); }
.flag.za { background-image: url(/images/flags/za.svg); }
.flag.gs { background-image: url(/images/flags/gs.svg); }
.flag.ss { background-image: url(/images/flags/ss.svg); }
.flag.es { background-image: url(/images/flags/es.svg); }
.flag.lk { background-image: url(/images/flags/lk.svg); }
.flag.sd { background-image: url(/images/flags/sd.svg); }
.flag.sr { background-image: url(/images/flags/sr.svg); }
.flag.sj { background-image: url(/images/flags/sj.svg); }
.flag.se { background-image: url(/images/flags/se.svg); }
.flag.ch { background-image: url(/images/flags/ch.svg); }
.flag.sy { background-image: url(/images/flags/sy.svg); }
.flag.tw { background-image: url(/images/flags/tw.svg); }
.flag.tj { background-image: url(/images/flags/tj.svg); }
.flag.tz { background-image: url(/images/flags/tz.svg); }
.flag.th { background-image: url(/images/flags/th.svg); }
.flag.tl { background-image: url(/images/flags/tl.svg); }
.flag.tg { background-image: url(/images/flags/tg.svg); }
.flag.tk { background-image: url(/images/flags/tk.svg); }
.flag.to { background-image: url(/images/flags/to.svg); }
.flag.tt { background-image: url(/images/flags/tt.svg); }
.flag.tn { background-image: url(/images/flags/tn.svg); }
.flag.tr { background-image: url(/images/flags/tr.svg); }
.flag.tm { background-image: url(/images/flags/tm.svg); }
.flag.tc { background-image: url(/images/flags/tc.svg); }
.flag.tv { background-image: url(/images/flags/tv.svg); }
.flag.ug { background-image: url(/images/flags/ug.svg); }
.flag.ua { background-image: url(/images/flags/ua.svg); }
.flag.ae { background-image: url(/images/flags/ae.svg); }
.flag.gb { background-image: url(/images/flags/gb.svg); }
.flag.us { background-image: url(/images/flags/us.svg); }
.flag.um { background-image: url(/images/flags/um.svg); }
.flag.uy { background-image: url(/images/flags/uy.svg); }
.flag.uz { background-image: url(/images/flags/uz.svg); }
.flag.vu { background-image: url(/images/flags/vu.svg); }
.flag.ve { background-image: url(/images/flags/ve.svg); }
.flag.vn { background-image: url(/images/flags/vn.svg); }
.flag.vg { background-image: url(/images/flags/vg.svg); }
.flag.vi { background-image: url(/images/flags/vi.svg); }
.flag.wf { background-image: url(/images/flags/wf.svg); }
.flag.eh { background-image: url(/images/flags/eh.svg); }
.flag.ye { background-image: url(/images/flags/ye.svg); }
.flag.zm { background-image: url(/images/flags/zm.svg); }
.flag.zw { background-image: url(/images/flags/zw.svg); }


/*------------------------------------------------------------------------- AI CAPABILITY
*/
.capabilityIcon {
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	border: 1px solid #fff;
	border-radius: 50%;
	background: center center no-repeat;
	background-size: cover;
	text-indent: -9999px;
}
.capabilityIcon::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: url(/images/country-flag-overlay.svg) center center / 100% no-repeat;
	opacity: 0.8;
}
.capabilityIcon.green {
	background-color: #009900;
}
.capabilityIcon.orange {
	background-color: #ffbf00;
}
.capabilityIcon.red {
	background-color: #cc0000;
}
.pricing-item.restricted .capabilityIcon {
	background-color: #cc0000;
}
.capabilityPopUp {
	position: absolute;
    border-radius: 10px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
	background-color: var(--wsscBlue);
	color: #fff;
	padding: 10px;
	z-index: 11;
	left: 30px;
	top: -30px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
	text-indent: 0;
}
.capabilityPopUp.show {
	opacity: 1;
}
.capabilityPopUp::before {
	content: '';
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 20px 10px 0;
	border-color: transparent var(--wsscBlue) transparent transparent;
	left: -20px;
	top: 0;
	bottom: 0;
	margin: auto;
}
.capabilityPopUp .capabilityDescription {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	margin: 0 0 5px;
}
.capabilityPopUp .capabilityDescription .capabilityLabel {
	font-weight: normal;
	flex: 1 0 100px;
}
section.notes .capabilityNotes {

}
section.notes .capabilityNotes ul {
	list-style: none;
	text-align: left;
	margin: 0 0 20px;
}
section.notes .capabilityNotes ul li {
	display: flex;
	flex-flow: row nowrap;
	align-items: start;
	gap: 10px;
	margin: 0 0 5px;
}

@media (max-width: 600px)
{
	.capabilityIcon {
		position: absolute;
		left: 50px;
		top: -35px;
	}
	section.box-out.capabilityNotes .capabilityIcon {
		position: relative;
		left: auto;
		top: auto;
	}
}
@media (max-width: 480px)
{
	.capabilityIcon {
		left: 0;
		top: -10px;
	}
}

/*------------------------------------------------------------------------- FAQs
*/
#faqs {
	padding-top: 0;
	margin-top: -20px;
}
.faq {
	background: #fcfcfc url(../images/question-mark.svg) 10px 20px / 30px no-repeat;
    border: 2px solid #e3e3e3;
    border-radius: 10px;
    padding: 20px 20px 20px 50px;
	margin: 0 0 10px;
	transition: all 0.5s ease;
}
.faq .question {
	font-weight: bold;
	color:#ff3dbf; 
	margin: 0 0 10px;
	transition: color 0.25s ease;
}
.faq .question:hover {
	cursor: pointer;
	color: #1f1976;
}
.faq .answer {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.5s ease, opacity 0.5s ease;
}
.faq .answer.show {
	max-height: 400px;
	opacity: 1;
}

/*------------------------------------------------------------------------- NEWS & FEATURES (INDEX)
*/
#news-snippets {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
	padding: 40px;
	grid-auto-flow: dense;
	max-width: 1280px;
}
.news-snippet {
	position: relative;
	width: 100%;
	max-width: 320px;
	min-width: 200px;
	background-color: #fff;
	border: 2px solid #000;
	border-radius: 10px;
	box-shadow: 0 10px 5px -5px rgba(0,0,0,0.2);
	overflow: hidden;
	margin: 0 auto 10px;
	transition: transform 0.3s ease;
}
.news-snippet:hover {
	transform: scale(105%);
	z-index: 10;
}
.news-snippet::after {
	content: '';
	display: block;
	width: 70px;
	height: 22px;
	top: 10px;
	left: 10px;
	position: absolute;
	background-color: var(--wsscPink);
    border-radius: 5px;
    font-size: 10px;
    font-weight: bold;
	text-transform: uppercase;
	color: #fff;
	padding: 0 10px;
	line-height: 22px;
}
.news-snippet.feature::after {
	content: 'feature';
}
.news-snippet.news::after {
	content: 'news';
}
.news-snippet a {
	display: flex;
	flex-flow: column nowrap;
	gap: 20px;
	white-space: normal;
	height: 100%;
}
.news-snippet a::after {
	display: none;
}
.news-snippet-image {
	width: 100%;
	height: 160px;
	
}
.news-snippet-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.news-snippet-heading {
	font-weight: 900;
	font-size: 18px;
	letter-spacing: -1px;
	padding: 0 15px;
	color: #333;
}
.news-snippet-extract {
	padding: 0 15px;
}
.news-snippet-extract p {
	color: #777;
	font-size: 13px;
	line-height: 1.3em;
	font-weight: normal;
}
.news-snippet-date {
	padding: 0 15px 10px;
	color: #777;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 12px;
	margin-top: auto;
}
.fasthosts {
	display: block;
	margin: 20px auto 0;
	width: 80%;
	max-width: 320px;
	height: 140px;
	text-indent: -9999px;
	background: url(../images/news/fh-technology-partner-a32127.svg) center center / 100% no-repeat;
}
.fasthosts::after {
	display: none;
}

/*------------------------------------------------------------------------- CUSTOMER REVIEWS (TESTIMONIALS PAGE)
*/
#testimonials .trustpilot-footnote {
	max-width: 800px;
}
#testimonials .google-footnote {
	max-width: 800px;
}
#customer-reviews {
	display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    gap: 0.5rem;
	max-width: 1280px;
	padding-top: 0;
}
.customer-review {
	flex: 1;
    padding: 20px;
    border: 3px solid #333;
    border-radius: 10px;
    margin: 0 auto 40px;
    background: #fff;
	display: flex;
	flex-flow: column nowrap;
    min-width: 240px;
    max-width: 360px;
    position: relative;
    filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.15));
}
.customer-review::after {
    content: '';
    width: 32px;
    height: 26px;
    position: absolute;
    bottom: -26px;
    background: url(../images/customer-quote.svg) center center / 100% auto no-repeat;
}
.customer-review .review-title {
	font-weight: 900;
	margin: 0 0 10px;
}
.customer-review .review-author {
	margin: auto 0 0 0;
	color: var(--wsscPink);
	font-weight: bold;
}
.customer-review .review-date {
	color: var(--wsscPink);
	margin-bottom: 10px;
}
.review-star-rating {
	--percent: calc(var(--rating) / 5 * 100%);
	display: inline-block;
	font-size: var(--star-size);
	font-family: Times; /* make sure ★ appears correctly */
	line-height: 1;
	margin: 10px 0;
}
.review-star-rating::before {
    content: '★★★★★';
    background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*------------------------------------------------------------------------- TRUSTPILOT FOOTNOTE LINK
*/
.trustpilot-footnote {
	margin: 0 auto 40px;
}
.trustpilot-footnote p {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	font-weight: 900;
	letter-spacing: -1px;
	padding-right: 20px;
}
.trustpilot-footnote a {
	display: block;
	text-indent: -9999px;
	width: 160px;
	height: 40px;
	background: url(../images/trustpilot.svg) center center / 100% no-repeat;
	transition: filter 0.25s ease;
}
.trustpilot-footnote a:hover {
	filter: brightness(120%);
}
.trustpilot-footnote a::after {
	display: none;
}

body.page-dark .trustpilot-footnote p {
	color: #fff;
}
body.page-dark .trustpilot-footnote a {
	background-image: url(../images/trustpilot-white-text.svg);
}

@media (max-width: 767px)
{
	.trustpilot-footnote p {
		justify-content: center;
		flex-flow: column nowrap;
		padding-right: 0;
	}
}
/*------------------------------------------------------------------------- Google FOOTNOTE LINK
*/
.google-footnote {
	margin: 0 auto 40px;
}

	.google-footnote p {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		align-items: center;
		gap: 10px;
		font-weight: 900;
		letter-spacing: -1px;
		padding-right: 20px;
	}

	.google-footnote a {
		display: block;
		text-indent: -9999px;
		width: 160px;
		height: 52px;
		background: url(../images/google_logo.svg) center center / 100% no-repeat;
		transition: filter 0.25s ease;
	}

		.google-footnote a:hover {
			filter: brightness(120%);
		}

		.google-footnote a::after {
			display: none;
		}

body.page-dark .google-footnote p {
	color: #fff;
}

body.page-dark .google-footnote a {
	background-image: url(../images/google_logo.svg);
}

@media (max-width: 767px) {
	.googlet-footnote p {
		justify-content: center;
		flex-flow: column nowrap;
		padding-right: 0;
	}
}

/*------------------------------------------------------------------------- SITE MAP
*/
#site-map h6 {
	font-weight: 900;
	letter-spacing: -1px;
}
#site-map-links a {
	font-weight: normal;
}
#site-map-links li {
	margin-bottom: 5px;
}

#site-map-links li:has(h6) {
	margin: 20px 0 0 -20px;
}
#site-map-links li:has(h6)::marker {
	content: none;
}

/*------------------------------------------------------------------------- SITE MAP SERVICE PAGE
*/
#wssc-sitemap-service section h4 {
	text-align: center
}

/*------------------------------------------------------------------------- SITE MAP  SERVICE PAGE - WHY?
*/
section#why-you-need-a-sitemap h2::before {
    content: '';
    display: block;
    margin: 0 auto 20px;
    width: 64px;
    height: 70px;
    background: url(../images/sitemap.svg) center center / 100% no-repeat;
}
section#why-you-need-a-sitemap:hover h2::before {
    animation-name: hvr-buzz;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-direction: normal;
}

/*------------------------------------------------------------------------- SITE MAP  SERVICE PAGE - WHAT?
*/
section#what-you-get {
    overflow: hidden;
    background: #ddd url(../images/wavy-bg.svg) center center repeat-x;
}
section#what-you-get::before {
    content: '';
    display: block;
    position: absolute;
    right: -35%;
    top: -880px;
    width: 1280px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #fff;
    opacity: 5%;
    pointer-events: none;
}
section#what-you-get .container {
	max-width: 960px;
	margin: 0 auto;
}
section#what-you-get h2 {
	margin-bottom: 40px;
}
section#what-you-get h2::before {
    content: '';
    display: block;
    margin: 0 auto 20px;
    width: 64px;
    height: 70px;
    background: url(../images/orders.svg) center center / 100% no-repeat;
}
 section#what-you-get:hover h2::before {
    animation-name: hvr-bob;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-direction: normal;
}
section#what-you-get .tick-list {
	display: flex;
	flex-flow: row wrap;
	gap: 40px;
	margin: 20px auto;
	font-size: 18px;
	line-height: 1.3em;
}
section#what-you-get .tick-list li {
	flex: 1 1 calc(50% - 20px);
	margin: 0 0 20px;
	min-width: 280px;
	max-width: 480px;
	background: url(../images/tick-green.svg) left 3px / 32px no-repeat;
	padding-left: 50px;
	min-height: 32px;
}
section#what-you-get .tick-list li strong {
	display: block;
	margin: 0 0 5px;
}
section.page-heading {
	padding-top: 0;
}

/*------------------------------------------------------------------------- SITE MAP  SERVICE PAGE - PRICE
*/
section#one-time-fixed-price {
	text-align: center;
}
section#one-time-fixed-price h2::before {
    content: '';
    display: block;
    margin: 0 auto 20px;
    width: 64px;
    height: 70px;
    background: url(../images/credit.svg) center center / 100% no-repeat;
}
section#one-time-fixed-price:hover h2::before {
    animation-name: glowing;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-direction: normal;
}
section#one-time-fixed-price h4 {
	background: url(../images/blob.svg) center center / 100% no-repeat;
	width: 135px;
	height: 108px;
	margin: 20px auto;
	font-weight: 900;
	font-size: 36px;
    letter-spacing: -2px;
	color: #fff;
	padding: 25px 15px;
}
section#one-time-fixed-price h4 span {
	font-size: 14px;
	font-weight: normal;
	letter-spacing: normal;
	display: block;
	line-height: 1em;
	margin: 5px 0 0;
}

/*------------------------------------------------------------------------- SITE MAP  SERVICE PAGE - BENEFITS
*/
section#sitemap-benefits-at-a-glance {
    background-color: var(--wsscPurple);
    overflow: hidden;
}
section#sitemap-benefits-at-a-glance::before {
    content: '';
    display: block;
    position: absolute;
    right: -35%;
    top: -880px;
    width: 1280px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #fff;
    opacity: 5%;
    pointer-events: none;
}
section#sitemap-benefits-at-a-glance .container {
	max-width: 960px;
	margin: 0 auto;
}
section#sitemap-benefits-at-a-glance h2 {
	margin-bottom: 40px;
}
section#sitemap-benefits-at-a-glance h2::before {
    content: '';
    display: block;
    margin: 0 auto 20px;
    width: 64px;
    height: 70px;
    background: url(../images/thumbs-up.svg) center center / 100% no-repeat;
}
 section#sitemap-benefits-at-a-glance:hover h2::before {
    animation-name: hvr-bob;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-direction: normal;
}
section#sitemap-benefits-at-a-glance .tick-list {
	display: flex;
	flex-flow: row wrap;
	gap: 40px;
	margin: 20px auto;
	font-size: 18px;
	line-height: 1.3em;
}
section#sitemap-benefits-at-a-glance .tick-list li {
	flex: 1 1 calc(50% - 20px);
	margin: 0 0 20px;
	min-width: 280px;
	max-width: 480px;
	background: url(../images/award.svg) left 3px / 40px no-repeat;
	padding-left: 50px;
	min-height: 40px;
}

/*------------------------------------------------------------------------- SITE MAP  SERVICE PAGE - GET TARTED CTA
*/
section#sitemap-get-started {
	background-color: #fff;
}
section#sitemap-get-started .cta-panel {
	padding: 20px 40px;

}
section#sitemap-get-started h2::before {
    content: '';
    display: block;
    margin: 0 auto 20px;
    width: 64px;
    height: 70px;
    background: url(../images/sitemap.svg) center center / 100% no-repeat;
}
section#sitemap-get-started:hover h2::before {
    animation-name: hvr-buzz;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-direction: normal;
}
section#sitemap-get-started .button {
    max-width: 320px;
    margin: 0 auto 20px;
    background-color: #fff;
    color: #000;
}
section#sitemap-get-started .button:hover {
    background-color: var(--wsscDarkBlue);
    color: #fff;
}

/*------------------------------------------------------------------------- FOOTER
*/
footer {
	background: url(../images/bg-footer.svg) center top no-repeat;
	background-size: 1280px;
	padding-top: 80px;
}
footer .container {
	width: 100%;
	height: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 20px 20px 30px;
}
footer .container .row {
	display: flex;
	flex-flow: row nowrap;
	height: 100%;
}
footer .container .row .column {
	flex: 1 1 auto;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-end;
	padding: 0 10px;
}
footer .container .row .column.links {
	flex: 1 0 160px;
}
footer a {
	text-decoration: none;
	color: #fff;
}
footer h5 {
	text-indent: -9999px;
}
footer .wssc-logo {
	width: 100%;
	max-width: 240px;
	height: 33px;
	background: url(../images/wssc-logo-light.svg) center center / 100% no-repeat;
	margin: 0 0 10px;
}
footer .c3-logo {
	width: 50px;
	height: 50px;
	background: url(../images/c3-software-logo.svg) center center / 100% no-repeat;
	cursor: pointer;
}
footer .copyright {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 10px;
}
footer .copyright p {
	color: #fff;
	margin: 0;
	font-size: 13px;
	line-height: 1.3em;
}
.footer-links {
	width: 100%;
}
.footer-links {
	margin: 0 0 5px;
}
.footer-links a {
	color: #fff;
	display: block;
	height: 32px;
	transition: all 0.4s ease;
	padding: 7px 5px;
	border: 2px solid transparent;
	border-radius: 3px;
}
.footer-links a.active,
.footer-links a:hover {
	border-color:#000;
	background-color: #fff;
	color: #000;
	font-weight: bold;
}
.contact-links li {
	margin: 20px 0;
}
.contact-links a {
	font-size: 18px;
	font-weight: bold;
	transition: color 0.4s ease;
}
.contact-links a:hover {
	color: #ccc;
}
.social-media-links {
	display: flex;
	flex-flow: row nowrap;
	gap: 20px;
}
.social-media-links a {
	display: block;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
	background: transparent center center / 100% no-repeat;
	transition: filter 0.4s ease;
}
.social-media-links a:hover {
	filter: brightness(80%);
}
.social-media-links a.facebook {
	background-image: url(../images/facebook.svg);
}
.social-media-links a.x {
	background-image: url(../images/x.svg);
}
.social-media-links a.instagram {
	background-image: url(../images/instagram.svg);
}

@media (max-width: 767px)
{
	footer {
		padding-top: 120px;
	}
	footer .container {
		background-color: #523e6b;
	}
	footer .container .row {
		flex-flow: column nowrap;
		margin-top: -60px;
	}
	footer .container .row .column {
		width: 100%;
		max-width: 320px;
		margin: 0 auto 20px;
		order: 3;
		align-items: center;
	}
	footer .container .row .column.links {
		order: 1;
		flex: 1 0 auto;
	}
	footer .container .row .column:last-of-type {
		order: 2;
	}
	.contact-links,
	.footer-links a {
		text-align: center;
	}
}

/*------------------------------------------------------------------------- ANIMATIONS
*/
@keyframes point-at-me {
	0% {
		transform: translate(0px);
	}
	50% {
		transform: translate(-5px, -5px) scale(0.9);
	}
	100% {
		transform: translate(0px);
	}
}

@keyframes spin-me {
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes glowing {
	0% {
		filter: brightness(100%);
	}
	50% {
		filter: brightness(140%);
	}
	100% {
		filter: brightness(100%);
	}
}
/*------------------------------------------------------------------------- HOVER ANIMATION: Pop
*/
@keyframes hvr-pop {
  50% {
    transform: scale(1.2);
  }
}
.hvr-pop {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
  animation-name: hvr-pop;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}


/*------------------------------------------------------------------------- HOVER ANIMATION: Bob
*/
@keyframes hvr-bob {
  0% {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob-float {
  100% {
    transform: translateY(-8px);
  }
}
.hvr-bob {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
  animation-name: hvr-bob-float, hvr-bob;
  animation-duration: .3s, 1.5s;
  animation-delay: 0s, .3s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
  animation-direction: normal, alternate;
}


/*------------------------------------------------------------------------- HOVER ANIMATION: Pulse
*/
@keyframes hvr-pulse {
  25% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
}
.hvr-pulse {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active {
  animation-name: hvr-pulse;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/*------------------------------------------------------------------------- HOVER ANIMATION: Buzz
*/
@keyframes hvr-buzz {
  50% {
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    transform: translateX(-3px) rotate(-2deg);
  }
}
.hvr-buzz {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-buzz:hover, .hvr-buzz:focus, .hvr-buzz:active {
  animation-name: hvr-buzz;
  animation-duration: 0.15s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.code-block {
	display: block;
	margin: .5rem 0 .75rem;
	padding: .75rem .9rem;
	background: #0d1117; /* pleasant dark code look */
	color: #e6edf3;
	border-radius: .6rem;
	border: 1px solid #1f2a37;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: .9rem;
	line-height: 1.45;
	overflow: auto; /* scroll if long */
	white-space: pre; /* preserve formatting */
	tab-size: 2;
}
	/* Optional soft scrollbar styling */
	.code-block::-webkit-scrollbar {
		height: 10px;
		width: 10px;
	}

	.code-block::-webkit-scrollbar-thumb {
		background: #2b3441;
		border-radius: 999px;
	}

	.code-block::-webkit-scrollbar-track {
		background: transparent;
	}



/* -------------------------------- News contribute -----------------------------------------*/
.wssc-writeforus-card {
	position: relative;
	background: #fff;
	border: 2px solid rgba(20, 35, 55, 0.15);
	border-radius: 14px;
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10);
	overflow: hidden;
	min-height: 360px; 
}

	.wssc-writeforus-card .wssc-badge {
		position: absolute;
		top: 12px;
		right: 12px;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .02em;
		padding: 4px 10px;
		border-radius: 999px;
		color: #fff;
		background: #7c3aed; 
	}


	.wssc-writeforus-card .wssc-content {
		padding: 16px 16px 14px 16px;
	}

	.wssc-writeforus-card h3 {
		margin: 6px 0 10px 0;
		font-size: 18px;
		line-height: 1.25;
		color: #0f172a;
	}

	.wssc-writeforus-card p {
		margin: 0 0 12px 0;
		font-size: 13px;
		line-height: 1.45;
		color: rgba(15, 23, 42, 0.80);
	}

	.wssc-writeforus-card ul {
		margin: 0 0 14px 18px;
		padding: 0;
		font-size: 13px;
		color: rgba(15, 23, 42, 0.85);
	}

	.wssc-writeforus-card li {
		margin: 6px 0;
	}

	.wssc-writeforus-card .wssc-guidelines {
		font-size: 12px;
		color: rgba(15, 23, 42, 0.70);
		background: rgba(20, 35, 55, 0.04);
		border: 1px solid rgba(20, 35, 55, 0.08);
		padding: 10px 12px;
		border-radius: 12px;
	}

	.wssc-writeforus-card .wssc-actions {
		display: flex;
		gap: 10px;
		align-items: center;
		margin-top: 14px;
	}

	.wssc-writeforus-card .wssc-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		padding: 0 14px;
		border-radius: 12px;
		border: 2px solid rgba(20, 35, 55, 0.15);
		background: #fff;
		color: #0f172a;
		font-weight: 700;
		font-size: 13px;
		text-decoration: none;
		transition: transform .06s ease, box-shadow .12s ease, background .12s ease;
		cursor: pointer;
		white-space: nowrap;
	}

		.wssc-writeforus-card .wssc-btn:hover {
			transform: translateY(-1px);
			box-shadow: 0 10px 20px rgba(0,0,0,0.10);
			background: rgba(20, 35, 55, 0.02);
		}

	.wssc-writeforus-card .wssc-btn-primary {
		background: #ff4da6; 
		border-color: #ff4da6;
		color: #fff;
	}

		.wssc-writeforus-card .wssc-btn-primary:hover {
			background: #ff3399;
			border-color: #ff3399;
		}

	.wssc-writeforus-card .wssc-footer {
		margin-top: 14px;
		font-size: 12px;
		color: rgba(15, 23, 42, 0.55);
	}