/* ==========================================================================
   Public site: shared modern styles for the inner pages (features, pricing,
   FAQ, contact, about, video, privacy). Loaded on every public page after
   the legacy CSS; page typography is scoped to body:not(.home) because the
   main page and product pages are styled by home.css.
   ========================================================================== */

:root {
	--site-blue: #005d97;
	--site-blue-dark: #0b1726;
	--site-orange: #ff9004;
	--site-ink: #0f172a;
	--site-text: #475569;
	--site-border: #e5e7eb;
	--site-tint: #e6f0f7;
}

/* ---------- page banner (slide_inc.asp #page-header) ---------- */
#page-header {
	max-height: none;
	padding: 72px 0 64px;
	border-top: 0;
	background: var(--site-blue-dark);
	background-image:
		radial-gradient(ellipse at 85% 0%, rgba(0, 93, 151, .55) 0%, rgba(0, 93, 151, 0) 60%),
		linear-gradient(120deg, #0b1726 0%, #0c2f4f 55%, #005d97 100%);
}
#page-header h3 {
	margin: 0 0 14px;
	color: #fff;
	font-family: 'Source Sans Pro', Arial, sans-serif;
	font-size: 46px;
	font-weight: bold;
	line-height: 1.1;
	letter-spacing: -.01em;
	text-transform: none;
}
#page-header p {
	max-width: 780px;
	margin: 0 auto;
	color: rgba(255, 255, 255, .8);
	font-family: 'Source Sans Pro', Arial, sans-serif;
	font-size: 19px;
	font-weight: normal;
	line-height: 1.55;
}
#page-header p br { display: none !important; } /* legacy .visible-desktop forces these on */

/* ---------- inner page typography ---------- */
body:not(.home) #content { padding-top: 8px; }
body:not(.home) #content h3 {
	color: var(--site-ink);
	font-family: 'Source Sans Pro', Arial, sans-serif;
	font-size: 28px;
	font-weight: bold !important; /* legacy mobile rules reset the weight */
	line-height: 1.25;
	letter-spacing: 0;
}
body:not(.home) #content p,
body:not(.home) #content li,
body:not(.home) #content dd {
	color: var(--site-text);
	font-family: 'Source Sans Pro', Arial, sans-serif;
	font-size: 17px;
	line-height: 1.7;
	text-align: left;
}
body:not(.home) #content a:not(.site-btn) { color: var(--site-blue); }
body:not(.home) #content .vertical-divider { display: none; }

/* tick lists (features page and others) */
body:not(.home) #content ul.checkmark { margin: 16px 0 24px; padding: 0; list-style: none; }
body:not(.home) #content ul.checkmark li {
	position: relative;
	margin: 0 0 12px;
	padding: 0 0 0 32px;
	background: none;
	list-style: none;
	color: var(--site-ink);
}
body:not(.home) #content ul.checkmark li::before {
	content: "\f00c";
	position: absolute;
	left: 0;
	top: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--site-tint);
	color: var(--site-blue);
	font-family: FontAwesome;
	font-size: 11px;
	line-height: 1;
}

/* screenshots and photos in content */
body:not(.home) #content #video img,
body:not(.home) #content .video-container iframe { border-radius: 14px; box-shadow: 0 20px 48px rgba(15, 23, 42, .18); }

/* ---------- buttons ---------- */
.site-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 26px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: 'Source Sans Pro', Arial, sans-serif;
	font-size: 16px;
	font-weight: bold;
	white-space: nowrap;
	text-decoration: none !important;
	transition: filter .15s ease, background-color .15s ease, color .15s ease;
}
.site-btn-primary { background: var(--site-orange); color: #fff !important; }
.site-btn-primary:hover { filter: brightness(.95); }
.site-btn-ghost { border-color: var(--site-blue); color: var(--site-blue) !important; }
.site-btn-ghost:hover { background: var(--site-blue); color: #fff !important; }

/* ---------- demo call-to-action band (contactinfo_inc.asp) ---------- */
.cta-band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	margin: 48px 0 56px;
	padding: 36px 40px;
	border: 1px solid #d6e6f2;
	border-radius: 18px;
	background: linear-gradient(120deg, #f2f8fc 0%, #e6f0f7 100%);
}
body #content .cta-band h3 {
	margin: 0 0 6px;
	color: var(--site-ink);
	font-family: 'Source Sans Pro', Arial, sans-serif;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.25;
	text-align: left !important;
}
body #content .cta-band p { margin: 0; color: var(--site-text); font-size: 17px; line-height: 1.6; }
.cta-band { flex-wrap: wrap; }
.cta-band-text { flex: 1 1 360px; }

/* ---------- video page: responsive 16:9 embed ---------- */
body:not(.home) #content > .row:has(> #video_page) {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 56px;
	align-items: center;
	padding-top: 48px;
}
body:not(.home) #content > .row:has(> #video_page)::before,
body:not(.home) #content > .row:has(> #video_page)::after,
body:not(.home) #content > .row:has(> #video_page) > .span1 { display: none; }
body:not(.home) #content > .row:has(> #video_page) > [class*="span"] { float: none; width: auto; margin: 0; }
body:not(.home) .video-container { position: relative; width: 100%; height: auto; padding: 0; overflow: visible; }
body:not(.home) .video-container iframe { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; } /* legacy CSS positioned it absolutely in a 0-height box */

/* ---------- FAQ (faq.asp: dl > dt Q./A. + dd) ---------- */
body:not(.home) #content dl { margin: 0 0 8px; }
body:not(.home) #content dl > br { display: none; }
body:not(.home) #content dl dt { float: left; clear: left; width: 28px; margin: 0; }
body:not(.home) #content dl dt span.q,
body:not(.home) #content dl dt span.answer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-top: 3px;
	border-radius: 6px;
	font-family: 'Source Sans Pro', Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
}
body:not(.home) #content dl dt span.q { background: var(--site-blue); color: #fff; }
body:not(.home) #content dl dt span.answer { background: var(--site-tint); color: var(--site-blue); }
body:not(.home) #content dl dd { margin: 0 0 8px 36px; padding: 0; }
body:not(.home) #content dl dd.question { color: var(--site-ink); font-weight: bold; line-height: 1.4; }
body:not(.home) #content dl dd:not(.question) { margin-bottom: 28px; }
body:not(.home) #content dl dd br { display: none; }

/* ---------- pricing table (pricing.asp .comparePlans) ---------- */
body:not(.home) .comparePlans table {
	overflow: hidden;
	border: 1px solid var(--site-border);
	border-radius: 16px;
	border-collapse: separate;
	border-spacing: 0;
}
body:not(.home) .comparePlans table td,
body:not(.home) .comparePlans table th { border-top-color: var(--site-border); }
body:not(.home) .comparePlans table tbody tr:nth-child(odd) td { background: #f8fafc; }

/* ---------- pricing: roomier package grid ---------- */
body:not(.home) .comparePlans { margin: 32px 0 16px; }
body:not(.home) .comparePlans table { box-shadow: 0 16px 40px rgba(15, 23, 42, .08); }
body:not(.home) .comparePlans table th.header_package { padding: 26px 18px 24px !important; vertical-align: top; font-size: 15px; }
body:not(.home) .comparePlans .header_package .package { display: inline-block; margin-bottom: 4px; font-size: 26px; line-height: 1.2; text-shadow: none; }
body:not(.home) .comparePlans .header_package .package span { font-size: 28px !important; }
body:not(.home) .comparePlans .info { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: #64748b; }
body:not(.home) .comparePlans table tbody td { padding: 20px 18px !important; font-size: 17px; }
body:not(.home) .comparePlans table tbody td.item { color: var(--site-ink); font-weight: bold; text-align: left; white-space: nowrap; }
body:not(.home) .comparePlans table tbody td:not(.item) { color: var(--site-ink); }
body:not(.home) .comparePlans table tbody td del { color: #94a3b8; font-size: 15px; }
body:not(.home) .comparePlans #contactus img { display: block; width: 100%; height: auto; }

/* ---------- FAQ (faq.asp): intro + accordion ---------- */
.faq-intro {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 56px;
	align-items: center;
	box-sizing: border-box;
	max-width: 1170px;
	margin: 0 auto;
	padding: 48px 0 40px;
}
body:not(.home) #content .faq-intro h3 { margin: 0 0 12px; font-size: 32px; }
.faq-intro-video #video { float: none; width: auto; margin: 0; }
.faq-intro-video img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 20px 48px rgba(15, 23, 42, .18); }
.faq-list { display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; max-width: 1170px; margin: 0 auto; }
.faq-item {
	border: 1px solid var(--site-border);
	border-radius: 14px;
	background: #fff;
	transition: box-shadow .15s ease, border-color .15s ease;
}
.faq-item:hover { border-color: #cbd5e1; }
.faq-item[open] { border-color: #bfd6e8; box-shadow: 0 12px 32px rgba(15, 23, 42, .07); }
.faq-item summary {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 24px;
	cursor: pointer;
	list-style: none;
	color: var(--site-ink);
	font-family: 'Source Sans Pro', Arial, sans-serif;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "\f107";
	flex: 0 0 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-left: auto;
	border-radius: 50%;
	background: var(--site-tint);
	color: var(--site-blue);
	font-family: FontAwesome;
	font-size: 18px;
	font-weight: normal;
	transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-answer { padding: 0 24px 22px; }
body:not(.home) #content .faq-answer p { margin: 0 0 12px; }
body:not(.home) #content .faq-answer p:last-child { margin-bottom: 0; }
.faq-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 4px 0 16px; }
.faq-logos br { display: none; }
.faq-logos img { width: auto !important; height: 34px !important; }

/* ---------- contact page (contactus.asp) ---------- */
.contact-page {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 48px;
	align-items: center;
	box-sizing: border-box;
	max-width: 1170px;
	margin: 0 auto;
	padding: 56px 0 72px;
}
body:not(.home) #content .contact-page h3 { margin: 0 0 8px; font-size: 32px; }
body:not(.home) #content .contact-lead { margin: 0 0 28px; font-size: 18px; }
.contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contact-card {
	padding: 24px;
	border: 1px solid var(--site-border);
	border-radius: 16px;
	background: #fff;
}
.contact-card-wide { grid-column: 1 / -1; }
.contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	border-radius: 12px;
	background: var(--site-tint);
	color: var(--site-blue);
	font-size: 20px;
}
body:not(.home) #content .contact-card h4 {
	margin: 0 0 6px;
	color: #64748b;
	font-family: 'Source Sans Pro', Arial, sans-serif;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: .1em;
	text-transform: uppercase;
}
body:not(.home) #content .contact-card p { margin: 0; color: var(--site-ink); font-size: 18px; line-height: 1.55; overflow-wrap: anywhere; }
/* email stays on one line at full size; its column sizes to the address */
.contact-cards { grid-template-columns: minmax(max-content, 1fr) max-content; }
body:not(.home) #content .contact-card-email p { overflow-wrap: normal; white-space: nowrap; }
body:not(.home) #content .contact-card a { color: var(--site-blue); font-weight: bold; text-decoration: none; }
.contact-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 78% 50%;
	border-radius: 18px;
	box-shadow: 0 20px 48px rgba(15, 23, 42, .14);
}

/* ---------- tablet / phone ---------- */
@media (max-width: 979px) {
	#page-header { padding: 48px 0 40px; }
	#page-header h3 { font-size: 32px; }
	#page-header p { font-size: 17px; padding: 0 16px; }
	body:not(.home) #content h3 { font-size: 24px; }
	.cta-band { flex-direction: column; align-items: flex-start; margin: 32px 16px 40px; padding: 28px 24px; }
	body:not(.home) #content > .row:has(> #video_page) { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
	.faq-intro, .contact-page { grid-template-columns: 1fr; gap: 28px; padding: 32px 16px; }
	.faq-list { padding: 0 16px; }
	.faq-item summary { padding: 16px 18px; font-size: 16px; }
	.faq-answer { padding: 0 18px 18px; }
	.contact-photo { display: none; }
}
@media (max-width: 600px) {
	.contact-cards { grid-template-columns: 1fr; }
	/* phone: one column; scale the email text to the card width so it never wraps or overflows */
	body:not(.home) #content .contact-card-email p { font-size: min(18px, calc((100vw - 84px) / 18.8)); }
}