@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: auto;
		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: tldr
*/

.tldr-box {
	background: linear-gradient(135deg, #f7f5fb, #ffffff);
	border: 1px solid rgba(111, 90, 142, 0.25);
	border-left: 5px solid #6f5a8e; /* Brand purple accent */

	border-radius: 12px;
	padding: 20px 24px;
	margin: 24px 0 32px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	font-size: 0.95rem;
	line-height: 1.6;
}
	.tldr-box h3 {
		margin-bottom: 10px;
		font-size: 1.1rem;
		font-weight: 600;
		color: #6f5a8e;
	}
	.tldr-box p {
		margin-bottom: 12px;
		color: #333;
	}
	.tldr-box ul {
		padding-left: 1.2rem;
		margin-bottom: 14px;
	}

	.tldr-box li {
		margin-bottom: 6px;
	}

@media (max-width: 576px) {
	.tldr-box {
		padding: 16px 18px;
		font-size: 0.9rem;
	}
}
/*------------------------------------------------------------------------- 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 h2 .normal {
		font-weight:normal; font-size:20px;
	}

#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-subtitle {
		font-size: 24px;
		font-weight: 900;
		margin: -10px auto 10px;
		text-align: center;
	}

#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.centre {
		
		text-align: center;
		margin: 0 auto;
		width: calc(100% - 40px);
		max-width: 920px;
	}
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;
}

	section.cta.no-backing {
		background-color:#fff!important;
		border: 0 !important;
		box-shadow: none !important;
	}

/*------------------------------------------------------------------------- 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 section.box-out.wide {
		max-width: 800px; /* or whatever you want */
	}


#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;
	}
}

/*------------------------------------------------------------------------- AFFILIATE PAGES
*/
.terms-box {
	max-height: 220px;
	overflow-y: auto;
	padding: 20px;
	border: 1px solid #ddd;
	background: #fafafa;
	border-radius: 6px;
	font-size: 0.95rem;
	line-height: 1.5;
	border: 2px solid #000;
	
}

	.terms-box h3 {
		margin-top: 0;
	}

	.terms-box ul {
		padding-left: 20px;
	}

	.terms-box::-webkit-scrollbar {
		width: 8px;
	}

	.terms-box::-webkit-scrollbar-thumb {
		background: #ccc;
		border-radius: 4px;
	}

.terms-detail p {
	text-align: left !important;
}

section#whos-it-for {
	overflow: hidden;
	background: #ddd url(../images/wavy-bg.svg) center center repeat-x;
}

	section#whos-it-for h3.agencies::before {
		content: '';
		display: block;
		z-index: 2;
		width: 90px;
		height: 120px;
		background: url(../images/wssc-agencies.svg) center center / 70% no-repeat;
	}
	section#whos-it-for h3.marketing::before {
		content: '';
		display: block;
		z-index: 2;
		width: 90px;
		height: 120px;
		background: url(../images/wssc-for-marketing-professionals.svg) center center / 100% no-repeat;
	}
	section#whos-it-for h3.developers::before {
		content: '';
		display: block;
		z-index: 2;
		width: 90px;
		height: 120px;
		background: url(../images/wssc-for-developers.svg) center center / 100% no-repeat;
	}
	section#whos-it-for h3.influencers::before {
		content: '';
		display: block;
		z-index: 2;
		width: 90px;
		height: 120px;
		background: url(../images/wssc-content-creator.svg) center center / 92% no-repeat;
	}

	/*------------------------------------------------------------------------- ALERT MESSAGES
*/
	.validation-summary-valid {
		display: none;
	}

	.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;
		}

		.alert li::marker {
			font-weight: 900;
			color: var(--star-color);
		}
	/*------------------------------------------------------------------------- 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;
			}
	/*------------------------------------------------------------------------- APP - SMART ISSUE DETECTION?
*/
	section#smart-issue-detection {
		overflow: hidden;
		background: #ddd url(../images/wavy-bg.svg) center center repeat-x;
	}

		section#smart-issue-detection::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#smart-issue-detection .container {
			max-width: 960px;
			margin: 0 auto;
		}

		section#smart-issue-detection h2 {
			margin-bottom: 40px;
		}

		section#smart-issue-detection h3 {
			text-align: center;
		}


		section#smart-issue-detection h2::before {
			content: '';
			display: block;
			margin: 0 auto 20px;
			width: 64px;
			height: 115px;
			background: url(/images/wssc-bot.svg) center center / 100% no-repeat;
		}

		section#smart-issue-detection: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#smart-issue-detection .tick-list {
			display: flex;
			flex-flow: row wrap;
			gap: 40px;
			margin: 20px auto;
			font-size: 18px;
			line-height: 1.3em;
		}

			section#smart-issue-detection .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#smart-issue-detection .tick-list li strong {
					display: block;
					margin: 0 0 5px;
				}

	section.page-heading {
		padding-top: 0;
	}
	/*------------------------------------------------------------------------- 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);
		}



	.login-cta {
		text-align: center;
		margin: 15px auto 0;
		font-size: 14px;
	}
		/* Keep line2 together so "click here" doesn't split off */
		.login-cta .line2 {
			white-space: nowrap;
		}
	/* Desktop: both spans on one line */
	@media (min-width: 768px) {
		.login-cta {
			white-space: nowrap;
		}

			.login-cta .line1,
			.login-cta .line2 {
				display: inline;
			}
	}
	/* Consent banner */
	.cookie-consent {
		position: fixed;
		left: 16px;
		right: 16px;
		bottom: 16px;
		z-index: 99999;
		pointer-events: none; /* only inner card clickable */
	}

	.cookie-consent__inner {
		pointer-events: auto;
		max-width: 1100px;
		margin: 0 auto;
		display: flex;
		gap: 14px;
		align-items: center;
		justify-content: space-between;
		padding: 14px 16px;
		border-radius: 14px;
		background: rgba(12, 12, 14, 0.92);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		border: 1px solid rgba(255,255,255,0.10);
		box-shadow: 0 10px 30px rgba(0,0,0,0.35);
	}

	.cookie-consent__text {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-wrap: wrap;
	}

	.cookie-icon {
		width: 24px;
		height: 24px;
		flex-shrink: 0;
	}

	.cookie-title {
		margin: 0;
		font-weight: 900;
	}

	.cookie-description {
		color: #fff;
	}

	.cookie-consent__text strong {
		color: #fff;
	}

	.cookie-consent__link {
		color: rgba(255,255,255,0.85);
		text-decoration: underline;
		text-underline-offset: 3px;
	}

		.cookie-consent__link:hover {
			color: #fff;
		}

	.cookie-consent__actions {
		display: flex;
		gap: 10px;
		align-items: center;
		flex-shrink: 0;
	}
	/* Buttons */
	.btn-consent {
		appearance: none;
		border: 1px solid transparent;
		border-radius: 10px;
		padding: 8px 14px;
		font-weight: 600;
		font-size: 14px;
		cursor: pointer;
	}

	.btn-consent--primary {
		background: #ff2db2; /* your pink */
		color: #111;
	}

		.btn-consent--primary:hover {
			filter: brightness(1.05);
		}

	.btn-consent--ghost {
		background: transparent;
		border-color: rgba(255,255,255,0.25);
		color: rgba(255,255,255,0.92);
	}

		.btn-consent--ghost:hover {
			border-color: rgba(255,255,255,0.45);
			color: #fff;
		}

	.cookie-icon {
		margin-right: 6px;
		color: #ff2db2; /* matches your brand pink */
		font-size: 14px;
	}
	/* Mobile layout */
	@media (max-width: 640px) {
		.cookie-consent__inner {
			flex-direction: column;
			align-items: stretch;
		}

		.cookie-consent__actions {
			justify-content: flex-end;
		}
	}