/*
Theme Name: Sounder
Theme URI: https://sounder.io
Description: Dark, futuristic theme for the Sounder website. Child theme of Twenty Twenty-Five.
Author: Sounder
Author URI: https://sounder.io
Template: twentytwentyfive
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sounder
*/

/* ==========================================================================
   SOUNDER DESIGN SYSTEM
   Brand: Dark futuristic / techy aesthetic
   Font: Author (weight 596 headings, 500 body)
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS CUSTOM PROPERTIES
   -------------------------------------------------------------------------- */
:root {
	/* Brand Colors */
	--sounder-yellow-light: #FFDD15;
	--sounder-yellow-dark: #FCFC6E;
	--sounder-teal-light: #38BFC3;
	--sounder-teal-dark: #38F5FB;
	--sounder-navy: #0D2E63;
	--sounder-electric-blue: #3F53E9;
	--sounder-dark-navy: #061631;
	--sounder-dust-blue: #F0F5FF;
	--sounder-black: #000000;
	--sounder-shadow: #0E0E12;
	--sounder-gray: #625F61;
	--sounder-light-gray: #B8B5BD;
	--sounder-white: #FFFFFF;

	/* Gradients */
	--sounder-gradient-dark-blue: linear-gradient(180deg, #030A20 0%, #08216F 100%);
	--sounder-gradient-teal-yellow: linear-gradient(4deg, #38BFC3 31.5%, #FCFC6E 64.14%);
	--sounder-gradient-image-overlay: linear-gradient(180deg, #0A1947 35.59%, rgba(25, 47, 101, 0.59) 62.81%, #0D2E63 91.34%);

	/* Shadows */
	--sounder-shadow-sm: 0 2px 8px rgba(14, 14, 18, 0.15);
	--sounder-shadow-md: 0 4px 20px rgba(14, 14, 18, 0.25);
	--sounder-shadow-lg: 0 8px 40px rgba(14, 14, 18, 0.4);
	--sounder-shadow-glow-teal: 0 0 30px rgba(56, 191, 195, 0.3);
	--sounder-shadow-glow-blue: 0 0 30px rgba(63, 83, 233, 0.3);

	/* Transitions */
	--sounder-transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
	--sounder-transition-slow: 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* --------------------------------------------------------------------------
   GLOBAL / BODY
   -------------------------------------------------------------------------- */
body {
	background-color: var(--sounder-white);
	color: var(--sounder-dark-navy);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   DARK THEME — Full-page dark override (applied via .sounder-dark-theme body class)
   Element-specific dark rules are handled by :is(.sounder-dark-theme, ...) selectors below.
   -------------------------------------------------------------------------- */
body.sounder-dark-theme {
	background-color: var(--sounder-dark-navy);
	color: var(--sounder-white);
}

.sounder-dark-theme h1,
.sounder-dark-theme h2,
.sounder-dark-theme h3,
.sounder-dark-theme h4,
.sounder-dark-theme h5,
.sounder-dark-theme h6,
.sounder-dark-theme .wp-block-heading {
	color: var(--sounder-white);
}

.sounder-dark-theme .sounder-yellow {
	color: var(--sounder-yellow-light);
}

/* --------------------------------------------------------------------------
   LIL BIT SMALLER — .lilbit-smaller
   Used via the editor FormatType to reduce text size inline.
   -------------------------------------------------------------------------- */
.lilbit-smaller {
	font-size: 0.8em;
}

/* --------------------------------------------------------------------------
   COMPLEMENTARY COLOR SPAN — .compcolor-span
   Used via the editor FormatType to accent part of a heading.
   Rule: dark text → yellow comp, light text → dark-navy comp.
   -------------------------------------------------------------------------- */

/* Default (no color assigned, light page = dark text) → yellow */
.compcolor-span {
	color: #FFDD15 !important;
}

/* Dark text colors → yellow comp */
.has-contrast-color .compcolor-span,
.has-dark-navy-color .compcolor-span,
.has-black-color .compcolor-span,
.has-shadow-color .compcolor-span,
.has-gray-color .compcolor-span,
.has-electric-blue-color .compcolor-span,
.has-link-light-color .compcolor-span {
	color: #FCFC6E !important;
}

/* Light text colors → dark-navy comp */
.has-base-color .compcolor-span,
.has-white-color .compcolor-span,
.has-light-gray-color .compcolor-span,
.has-teal-light-color .compcolor-span,
.has-teal-dark-color .compcolor-span,
.has-yellow-light-color .compcolor-span,
.has-yellow-dark-color .compcolor-span,
.has-dust-blue-color .compcolor-span,
.has-link-dark-color .compcolor-span {
	color: #061631 !important;
}

/* Dark sections / covers with no color assigned (white text) → yellow */
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) h1 .compcolor-span,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) h2 .compcolor-span,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) h3 .compcolor-span,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) h4 .compcolor-span,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) h5 .compcolor-span,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) h6 .compcolor-span,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) p .compcolor-span,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .wp-block-heading .compcolor-span,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .wp-block-paragraph .compcolor-span {
	color: #FCFC6E !important;
}

/* Override: if a heading inside a dark section has an explicit light color, flip comp to dark-navy */
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .has-base-color .compcolor-span,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .has-white-color .compcolor-span,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .has-light-gray-color .compcolor-span,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .has-teal-light-color .compcolor-span,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .has-teal-dark-color .compcolor-span,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .has-yellow-light-color .compcolor-span,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .has-yellow-dark-color .compcolor-span,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .has-dust-blue-color .compcolor-span,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .has-link-dark-color .compcolor-span {
	color: #0D2E63 !important;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY — HEADINGS
   All headings: font-weight 596, Author font
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-weight: 596;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--sounder-dark-navy);
}

/* Homepage context sizes */
.home h1,
.home .wp-block-heading:where([class*="is-style-"]):not([class*="is-style-default"]) h1 {
	font-size: 6.25rem;
}
.home h2 {
	font-size: 3.5rem;
}
.home h3 {
	font-size: 3rem;
}

/* Interior page context sizes — handled via theme.json font size presets */

/* --------------------------------------------------------------------------
   TYPOGRAPHY — BODY / PARAGRAPHS
   All body: font-weight 500, Author font
   -------------------------------------------------------------------------- */
body,
p,
.wp-block-paragraph {
	font-weight: 500;
	line-height: 1.5;
}

/* Interior page context sizes — handled via theme.json font size presets */

/* --------------------------------------------------------------------------
   PARAGRAPH SIZE UTILITY CLASSES
   -------------------------------------------------------------------------- */
.has-large-paragraph,
.is-style-large-paragraph {
	font-size: 1.5rem;
}

.has-normal-paragraph,
.is-style-normal-paragraph {
	font-size: 1.25rem;
}

.has-small-paragraph,
.is-style-small-paragraph {
	font-size: 1.125rem;
}

.has-xsmall-paragraph,
.is-style-xsmall-paragraph {
	font-size: 1rem;
}

/* Heading Styles - Plus Sign */
.wp-block-heading.is-style-plus-icon-heading {
    position: relative;
}

.wp-block-heading.is-style-plus-icon-heading::before {
	content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 0C7.2207 0 6.18194 1.03876 6.18194 2.31806V6.18194H2.31806C1.03876 6.18194 0 7.2207 0 8.5C0 9.7793 1.03876 10.8181 2.31806 10.8181H6.18194V14.6819C6.18194 15.9612 7.2207 17 8.5 17C9.7793 17 10.8181 15.9612 10.8181 14.6819V10.8181H14.6819C15.9612 10.8181 17 9.7793 17 8.5C17 7.2207 15.9612 6.18194 14.6819 6.18194H10.8181V2.31806C10.8181 1.03876 9.7793 0 8.5 0Z' fill='%2338BFC3'/%3E%3C/svg%3E");
	width: 32px;
	height: 32px;
	display: inline-block;
	margin-left: -40px;
	padding-right: 7px;
}

.is-style-arrow-heading {
    content: "";
    background: url(/wp-content/uploads/2025/05/link_arrow_icon.svg);
    height: .75rem;
    width: .75rem;
    top: -2px;
    position: relative;
    display: inline-block;
    margin-left: .75rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform: translateY(0);
    transition: all .3s ease-in-out;
}

.mk-clk {
   transition: all 0.2s ease-in-out; 
}

.mk-clk:hover {
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	transform: translateY(-2%);
}

/* --------------------------------------------------------------------------
   LINKS
   -------------------------------------------------------------------------- */
a {
	transition: color var(--sounder-transition);
}

/*a:hover {
	text-decoration-thickness: 1px !important;
	text-underline-offset: 0.2em;
}*/

a:focus {
	outline: none;
}

/* Image-wrapping links — no hover/focus effects */
.wp-block-site-logo a,
.wp-block-site-logo a:hover,
.wp-block-site-logo a:focus,
.wp-block-site-logo a:active {
	background: none !important;
	text-decoration: none !important;
	color: inherit !important;
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

/* Primary Button — Yellow with dark text */
.wp-block-button .wp-block-button__link,
.wp-element-button,
button.wp-element-button {
	background: var(--sounder-yellow-light);
	color: var(--sounder-dark-navy);
	border: none;
	border-radius: 47px;
	font-weight: 596;
	font-size: 1rem;
	padding: 10px 24px;
	transition: all var(--sounder-transition);
	cursor: pointer;
	letter-spacing: 0.01em;
}

.wp-block-button .wp-block-button__link:hover,
.wp-element-button:hover,
button.wp-element-button:hover {
	background: #38BFC3;
	box-shadow: 0 0 30px rgba(56, 191, 195, 0.3);
}

/* Outline / Ghost Button — bordered, transparent bg (light BG) */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--sounder-dark-navy);
	border: 2px solid #FFDD15;
	border-radius: 47px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: transparent;
	border-color: #38BFC3;
	color: #38BFC3;
}

/* Outline / Ghost Button — dark BG */
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--sounder-white);
	border: 2px solid #FCFC6E;
}

:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: transparent;
	border-color: #38F5FB;
	color: #38F5FB;
}

/* CTA / Accent Button — Teal-Yellow Gradient */
.wp-block-button.is-style-sounder-cta .wp-block-button__link {
	background: var(--sounder-gradient-teal-yellow);
	color: var(--sounder-dark-navy);
	border: none;
	font-weight: 596;
}

.wp-block-button.is-style-sounder-cta .wp-block-button__link:hover {
	opacity: 0.9;
	box-shadow: 0 0 30px rgba(56, 191, 195, 0.4);
}

/* Scan Button — primary fill with scan icon */
.wp-block-button.is-style-sounder-scan .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.wp-block-button.is-style-sounder-scan .wp-block-button__link::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 22px;
	background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjI5IDE1IDMwIDI4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMzAuOTUwNiAxNy43OTk2QzMwLjk1MDYgMTcuMDI2MyAzMS41OTg5IDE2LjM5OTMgMzIuNDAwOSAxNi4zOTkzSDMzLjg1MTJDMzQuMjUxNyAxNi4zOTkzIDM0LjU3NTggMTYuMDg2MyAzNC41NzU4IDE1LjY5OTZDMzQuNTc1OCAxNS4zMTMgMzQuMjUxNyAxNSAzMy44NTEyIDE1SDMyLjQwMDlDMzAuNzk5IDE1IDI5LjUwMTQgMTYuMjU0IDI5LjUwMTQgMTcuNzk5NVYxOS4xOTk5QzI5LjUwMTQgMTkuNTg2NSAyOS44MjU2IDE5Ljg5OTUgMzAuMjI2MSAxOS44OTk1QzMwLjYyNjUgMTkuODk5NSAzMC45NTA3IDE5LjU4NjUgMzAuOTUwNyAxOS4xOTk5TDMwLjk1MDYgMTcuNzk5NloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8cGF0aCBkPSJNNTcuMDUwMiAxNy43OTk2QzU3LjA1MDIgMTcuMDI2MyA1Ni40MDE5IDE2LjM5OTMgNTUuNTk5OSAxNi4zOTkzSDU0LjE0OTZDNTMuNzQ5MSAxNi4zOTkzIDUzLjQyNSAxNi4wODYzIDUzLjQyNSAxNS42OTk2QzUzLjQyNSAxNS4zMTMgNTMuNzQ5MSAxNSA1NC4xNDk2IDE1SDU1LjU5OTlDNTcuMjAxOCAxNSA1OC40OTkzIDE2LjI1NCA1OC40OTkzIDE3Ljc5OTVWMTkuMTk5OUM1OC40OTkzIDE5LjU4NjUgNTguMTc1MiAxOS44OTk1IDU3Ljc3NDcgMTkuODk5NUM1Ny4zNzQzIDE5Ljg5OTUgNTcuMDUwMSAxOS41ODY1IDU3LjA1MDEgMTkuMTk5OUw1Ny4wNTAyIDE3Ljc5OTZaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPHBhdGggZD0iTTMyLjM5OTcgNDEuNjAwNEMzMS41OTg4IDQxLjYwMDQgMzAuOTQ5NCA0MC45NzQ1IDMwLjk0OTQgNDAuMjAwMVYzOC43OTk4QzMwLjk0OTQgMzguNDEzMSAzMC42MjUzIDM4LjEwMDEgMzAuMjI0OCAzOC4xMDAxQzI5LjgyNDMgMzguMTAwMSAyOS41MDAyIDM4LjQxMzEgMjkuNTAwMiAzOC43OTk4VjQwLjIwMDFDMjkuNTAwMiA0MS43NDY3IDMwLjc5ODkgNDIuOTk5NiAzMi4zOTk3IDQyLjk5OTZIMzMuODVDMzQuMjUwNSA0Mi45OTk2IDM0LjU3NDYgNDIuNjg2NyAzNC41NzQ2IDQyLjNDMzQuNTc0NiA0MS45MTMzIDM0LjI1MDUgNDEuNjAwMyAzMy44NSA0MS42MDAzTDMyLjM5OTcgNDEuNjAwNFoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8cGF0aCBkPSJNNTcuMDUwMiA0MC4yMDA0QzU3LjA1MDIgNDAuOTczNyA1Ni40MDE5IDQxLjYwMDcgNTUuNTk5OSA0MS42MDA3SDU0LjE0OTZDNTMuNzQ5MSA0MS42MDA3IDUzLjQyNSA0MS45MTM3IDUzLjQyNSA0Mi4zMDA0QzUzLjQyNSA0Mi42ODcgNTMuNzQ5MSA0MyA1NC4xNDk2IDQzSDU1LjU5OTlDNTcuMjAxOCA0MyA1OC40OTkzIDQxLjc0NiA1OC40OTkzIDQwLjIwMDVWMzguODAwMUM1OC40OTkzIDM4LjQxMzUgNTguMTc1MiAzOC4xMDA1IDU3Ljc3NDcgMzguMTAwNUM1Ny4zNzQzIDM4LjEwMDUgNTcuMDUwMSAzOC40MTM1IDU3LjA1MDEgMzguODAwMUw1Ny4wNTAyIDQwLjIwMDRaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPHBhdGggZD0iTTQyLjE4ODIgMjEuOTk5NEM0MS43ODc3IDIxLjk5OTQgNDEuNDYzNiAyMi4zMTI0IDQxLjQ2MzYgMjIuNjk5MUM0MS40NjM2IDIzLjA4NTcgNDEuNzg3NyAyMy4zOTg3IDQyLjE4ODIgMjMuMzk4N0g0OS40Mzg4QzQ5LjgzOTMgMjMuMzk4NyA1MC4xNjM0IDIzLjA4NTcgNTAuMTYzNCAyMi42OTkxQzUwLjE2MzQgMjIuMzEyNCA0OS44MzkzIDIxLjk5OTQgNDkuNDM4OCAyMS45OTk0SDQyLjE4ODJaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPHBhdGggZD0iTTQyLjE4ODIgMjQuODAwM0M0MS43ODc3IDI0LjgwMDMgNDEuNDYzNiAyNS4xMTMzIDQxLjQ2MzYgMjUuNDk5OUM0MS40NjM2IDI1Ljg4NjYgNDEuNzg3NyAyNi4xOTk2IDQyLjE4ODIgMjYuMTk5Nkg0OS40Mzg4QzQ5LjgzOTMgMjYuMTk5NiA1MC4xNjM0IDI1Ljg4NjYgNTAuMTYzNCAyNS40OTk5QzUwLjE2MzQgMjUuMTEzMyA0OS44MzkzIDI0LjgwMDMgNDkuNDM4OCAyNC44MDAzSDQyLjE4ODJaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPHBhdGggZD0iTTM4LjU2MjkgMzEuNzk5N0MzOC4xNjI0IDMxLjc5OTcgMzcuODM4MiAzMi4xMTI2IDM3LjgzODIgMzIuNDk5M0MzNy44MzgyIDMyLjg4NiAzOC4xNjI0IDMzLjE5ODkgMzguNTYyOSAzMy4xOTg5SDQ5LjQzNzRDNDkuODM3OSAzMy4xOTg5IDUwLjE2MiAzMi44ODYgNTAuMTYyIDMyLjQ5OTNDNTAuMTYyIDMyLjExMjYgNDkuODM3OSAzMS43OTk3IDQ5LjQzNzQgMzEuNzk5N0gzOC41NjI5WiIgZmlsbD0iY3VycmVudENvbG9yIi8+CjxwYXRoIGQ9Ik0zOC41NjI5IDM0LjYwMDNDMzguMTYyNCAzNC42MDAzIDM3LjgzODIgMzQuOTEzMiAzNy44MzgyIDM1LjI5OTlDMzcuODM4MiAzNS42ODY2IDM4LjE2MjQgMzUuOTk5NSAzOC41NjI5IDM1Ljk5OTVINDIuOTEyNkM0My4zMTMxIDM1Ljk5OTUgNDMuNjM3MiAzNS42ODY2IDQzLjYzNzIgMzUuMjk5OUM0My42MzcyIDM0LjkxMzIgNDMuMzEzMSAzNC42MDAzIDQyLjkxMjYgMzQuNjAwM0gzOC41NjI5WiIgZmlsbD0iY3VycmVudENvbG9yIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzkuMjg3MyAxOC4xNDk5QzM5LjA5NDggMTguMTQ5OSAzOC45MTEyIDE4LjIyMzYgMzguNzc1MSAxOC4zNTVMMzUuMTQ5OCAyMS44NTUzQzM1LjAxMzcgMjEuOTg2NyAzNC45Mzc0IDIyLjE2NCAzNC45Mzc0IDIyLjM0OTlWMjcuMjUwNUgzMS4zMTIxQzMwLjMxMDkgMjcuMjUwNSAyOS41IDI4LjAzMzUgMjkuNSAyOS4wMDAxQzI5LjUgMjkuOTY2OCAzMC4zMTA5IDMwLjc0OTcgMzEuMzEyMSAzMC43NDk3SDM0LjkzNzRWMzcuNzUwNEMzNC45Mzc0IDM4LjkwOTQgMzUuOTEyIDM5Ljg1MDQgMzcuMTEyMyAzOS44NTA0SDUwLjg4NzdDNTIuMDg4IDM5Ljg1MDQgNTMuMDYyNiAzOC45MDk0IDUzLjA2MjYgMzcuNzUwNFYzMC43NDk3SDU2LjY4NzlDNTcuNjg5MSAzMC43NDk3IDU4LjUgMjkuOTY2OCA1OC41IDI5LjAwMDFDNTguNSAyOC4wMzM1IDU3LjY4OTEgMjcuMjUwNSA1Ni42ODc5IDI3LjI1MDVINTMuMDYyNlYyMC4yNDk4QzUzLjA2MjYgMTkuMDkwOSA1Mi4wODggMTguMTQ5OSA1MC44ODc3IDE4LjE0OTlMMzkuMjg3MyAxOC4xNDk5Wk01MS42MTI0IDI3LjI1MDRWMjAuMjQ5N0M1MS42MTI0IDE5Ljg2MyA1MS4yODgzIDE5LjU1IDUwLjg4NzggMTkuNTVINDAuMDEzM1YyMC45NTA0QzQwLjAxMzMgMjIuMTA5MyAzOS4wMzg2IDIzLjA1MDMgMzcuODM4MyAyMy4wNTAzSDM2LjM4OFYyNy4yNTAxTDUxLjYxMjQgMjcuMjUwNFpNNTEuNjEyNCAzMC43NTA3SDM2LjM4NjdWMzcuNzUxNEMzNi4zODY3IDM4LjEzODEgMzYuNzEwOCAzOC40NTExIDM3LjExMTMgMzguNDUxMUg1MC44ODY3QzUxLjI4NzIgMzguNDUxMSA1MS42MTEzIDM4LjEzODEgNTEuNjExMyAzNy43NTE0TDUxLjYxMjQgMzAuNzUwN1pNMzcuODM3IDIxLjY1MDJIMzcuNDEyMkwzOC41NjE2IDIwLjU0MDRWMjAuOTUwNkMzOC41NjE2IDIxLjMzNzMgMzguMjM3NSAyMS42NTAyIDM3LjgzNyAyMS42NTAyWk0zMC45NDk0IDI5LjAwMDFDMzAuOTQ5NCAyOC44MDc5IDMxLjExMjEgMjguNjQ5OCAzMS4zMTIzIDI4LjY0OThINTYuNjg4MUM1Ni44ODcyIDI4LjY0OTggNTcuMDUwOSAyOC44MDY4IDU3LjA1MDkgMjkuMDAwMUM1Ny4wNTA5IDI5LjE5MjQgNTYuODg4MyAyOS4zNTA1IDU2LjY4ODEgMjkuMzUwNUgzMS4zMTIzQzMxLjExMzIgMjkuMzUwNSAzMC45NDk0IDI5LjE5MzUgMzAuOTQ5NCAyOS4wMDAxWiIgZmlsbD0iY3VycmVudENvbG9yIi8+Cjwvc3ZnPgo=") no-repeat center / contain;
	flex-shrink: 0;
}

/* Secondary Button — gradient fill (light BG) */
.wp-block-button.is-style-sounder-secondary .wp-block-button__link {
	background: var(--wp--preset--gradient--dark-blue-to-light-blue);
	color: var(--sounder-white);
}

.wp-block-button.is-style-sounder-secondary .wp-block-button__link:hover {
	background: #38BFC3;
	color: var(--sounder-dark-navy);
	box-shadow: 0 0 30px rgba(56, 191, 195, 0.3);
}

/* Secondary Button — dark BG */
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .wp-block-button.is-style-sounder-secondary .wp-block-button__link {
	background: var(--wp--preset--color--teal-dark);
	color: var(--wp--preset--color--electric-blue);
}

:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .wp-block-button.is-style-sounder-secondary .wp-block-button__link:hover {
	background: #79FBFF;
	color: var(--wp--preset--color--electric-blue);
	box-shadow: 0 0 30px rgba(121, 251, 255, 0.3);
}

/* --------------------------------------------------------------------------
   YELLOW HIGHLIGHT SPAN — used like bold, but color
   Default: bold dark text (light bg). Dark theme override in .sounder-dark-theme above.
   -------------------------------------------------------------------------- */
.sounder-yellow {
	color: var(--sounder-dark-navy);
	font-weight: 596;
}

/* Explicit light-section overrides kept for specificity */
.sounder-section-white .sounder-yellow,
.sounder-section-offwhite .sounder-yellow,
.sounder-section-light .sounder-yellow {
	color: var(--sounder-dark-navy);
	font-weight: 596;
}

/* --------------------------------------------------------------------------
   DOTTED SCROLL INDICATOR
   -------------------------------------------------------------------------- */
.sounder-scroll-line {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	/*margin-top: 3rem;*/
}

.sounder-scroll-line .sounder-dot-line {
	width: 2px;
	height: calc(40vh - 250px);
	background: linear-gradient(4deg, #38BFC3 31.5%, #FCFC6E 64.14%);
	/*background: repeating-linear-gradient(*/
	/*	to bottom,*/
	/*	var(--sounder-yellow-light) 0px,*/
	/*	var(--sounder-yellow-light) 4px,*/
	/*	transparent 4px,*/
	/*	transparent 12px*/
	/*);*/
	opacity: 0.6;
	position: relative;
	overflow: hidden;
    margin-left: 5px;
}

.sounder-scroll-line .sounder-dot-line::after {
	content: '';
	position: absolute;
	top: -80px;
	left: 0;
	width: 2px;
	height: 271px;
	background: linear-gradient(to bottom, transparent, var(--sounder-yellow-light));
	animation: sounderScrollPulse 2s ease-in-out infinite;
}

.sounder-scroll-line .sounder-dot-arrow {
	width: 0;
	height: 10px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid var(--sounder-yellow-light);
	opacity: 0.6;
	animation: sounderArrowBounce 2s ease-in-out infinite;
}

@keyframes sounderScrollPulse {
	0%, 100% { top: -400px; }
	50% { top: 400px; }
}

@keyframes sounderArrowBounce {
	0%, 100% { transform: translateY(0); opacity: 0.4; }
	50% { transform: translateY(6px); opacity: 0.8; }
}

/* --------------------------------------------------------------------------
   HEADER / NAVIGATION
   --------------------------------------------------------------------------
   Three modes controlled via body class:
     (default)                    — Dark navy bg, white nav, yellow CTA
     .sounder-header-light        — White bg, dark nav, outlined CTA
     .sounder-header-transparent  — Transparent bg, white nav (overlays hero)
   -------------------------------------------------------------------------- */

/* --- Default: Dark navy header (gradient: darkest top → dark navy bottom) --- */
.wp-block-template-part[data-area="header"],
header.wp-block-template-part {
	background: linear-gradient(to bottom, var(--sounder-dark-navy), #030A20);
	position: relative;
	z-index: 100;
}

/* Reset any borders/outlines on nav items */
.wp-block-navigation-item__content,
.wp-block-navigation a {
	border: none;
	outline: none;
	background: transparent;
}

/* Navigation links — white on dark header (top-level only) */
/* Override WP core doubled-specificity: .wp-block-navigation-item__content.wp-block-navigation-item__content */
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content,
.wp-block-navigation a {
	color: var(--sounder-white);
	font-weight: 500;
	font-size: 1rem;
	transition: color var(--sounder-transition);
}

.wp-block-navigation a:hover {
	color: var(--sounder-teal-dark);
	text-decoration: none;
}

/* Submenu/dropdown links — dark on white dropdown background */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content,
.wp-block-navigation__submenu-container a {
	color: var(--sounder-dark-navy);
}

.wp-block-navigation__submenu-container a:hover {
	color: var(--sounder-teal-dark);
}

/* Submenu indicator arrow — white in header, dark in dropdowns */
.wp-block-navigation__submenu-icon svg {
	fill: var(--sounder-white);
}

.wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg {
	/*fill: var(--sounder-dark-navy);*/
	fill: white;
}

/* "Book a Demo" nav button — yellow on dark header */
.wp-block-navigation .wp-block-button .wp-block-button__link {
	background: var(--sounder-yellow-light);
	color: var(--sounder-dark-navy);
	border-radius: 6px;
	padding: 0.625rem 1.5rem;
	font-size: 0.9375rem;
	transition: background var(--sounder-transition), color var(--sounder-transition), border-color var(--sounder-transition);
}

.wp-block-navigation .wp-block-button .wp-block-button__link:hover {
	background: #ffe94d;
}

/* --- Variant: Light (white) header --- */
.sounder-header-light .wp-block-template-part[data-area="header"],
.sounder-header-light header.wp-block-template-part {
	background: var(--sounder-white);
}

.sounder-header-light .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content,
.sounder-header-light .wp-block-navigation a {
	color: var(--sounder-dark-navy);
}

.sounder-header-light .wp-block-navigation a:hover {
	color: #203578
}

.sounder-header-light .wp-block-navigation .wp-block-button .wp-block-button__link {
	background: transparent;
	color: var(--sounder-dark-navy);
	border: 2px solid var(--sounder-teal-dark);
}

.sounder-header-light .wp-block-navigation .wp-block-button .wp-block-button__link:hover {
	background: var(--sounder-teal-dark);
	color: var(--sounder-white);
}

/* --- Variant: Transparent header (overlays hero) --- */
.sounder-header-transparent .wp-block-template-part[data-area="header"],
.sounder-header-transparent header.wp-block-template-part {
	background: transparent;
}

.sounder-header-transparent .wp-block-navigation a {
	color: var(--sounder-white);
}

.sounder-header-transparent .wp-block-navigation .wp-block-button .wp-block-button__link {
	background: var(--sounder-yellow-light);
	color: var(--sounder-dark-navy);
}

.sounder-header-transparent .wp-block-navigation .wp-block-button .wp-block-button__link:hover {
	background: #ffe94d;
}

/* Mobile nav overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--sounder-dark-navy) !important;
	background-color: var(--sounder-dark-navy) !important;
}

body .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
    background-color: #061631 !important;
}

.wp-block-navigation__responsive-container-open {
    color: white!important;
}

.wp-block-navigation__responsive-container-close {
    color: white;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
    background:var(--sounder-dark-navy);
}

.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
    background:var(--sounder-dark-navy);
}


.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content, .wp-block-navigation__submenu-container a {
    color: white;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
    align-items: flex-start!important;
    justify-content: left;
    line-height: 1.3;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    align-items: flex-start!important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: flex-start!important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
    padding-left: .5rem!important;
}


.sounder-header-transparent .wp-block-navigation a:hover {
	color: #203578;
}

.wp-block-navigation a:hover {
    background: #52F6FB;
    color:#203578;
}

.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
        color:#203578;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.wp-block-template-part[data-area="footer"],
footer.wp-block-template-part {
	background: var(--wp--preset--color--dark-navy);
	color: var(--sounder-gray);
	margin-block-start: 0 !important;
}

.wp-site-blocks > footer.wp-block-template-part,
.wp-site-blocks > .wp-block-template-part[data-area="footer"] {
	margin-block-start: 0 !important;
}

footer a:not(.wp-block-button__link):not(.wp-block-social-link-anchor),
.wp-block-template-part[data-area="footer"] a:not(.wp-block-button__link):not(.wp-block-social-link-anchor) {
	color: var(--sounder-white) !important;
	background: none !important;
	text-decoration: none !important;
}

footer a:not(.wp-block-button__link):not(.wp-block-social-link-anchor):hover,
.wp-block-template-part[data-area="footer"] a:not(.wp-block-button__link):not(.wp-block-social-link-anchor):hover {
	color: var(--sounder-gray) !important;
	background: none !important;
}

footer a:not(.wp-block-button__link):not(.wp-block-social-link-anchor):focus,
.wp-block-template-part[data-area="footer"] a:not(.wp-block-button__link):not(.wp-block-social-link-anchor):focus {
	color: var(--sounder-white) !important;
	background: none !important;
	outline: none;
}

/* --------------------------------------------------------------------------
   HERO SECTIONS
   -------------------------------------------------------------------------- */
.sounder-hero,
.is-style-sounder-hero {
	background: var(--sounder-gradient-dark-blue);
	min-height: 80vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.sounder-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 80%, rgba(63, 83, 233, 0.15), transparent 60%);
	pointer-events: none;
}

/* Hero with video / image overlay */
.sounder-hero-overlay,
.is-style-sounder-hero-overlay {
	position: relative;
}

.sounder-hero-overlay::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--sounder-gradient-image-overlay);
	pointer-events: none;
	z-index: 1;
}

.sounder-hero-overlay > * {
	position: relative;
	z-index: 2;
}

/* --------------------------------------------------------------------------
   LEFT-ALIGNED HERO — H1 takes ~50% on desktop
   -------------------------------------------------------------------------- */
.sounder-hero-left {
	text-align: left;
}

.sounder-hero-left h1,
.sounder-hero-left .wp-block-heading {
	text-align: left;
}

.sounder-hero-left .wp-block-buttons {
	justify-content: flex-start;
}

@media (min-width: 1024px) {
	.sounder-hero-left h1 {
		max-width: 55%;
	}
}

/* --------------------------------------------------------------------------
   VECTOR BACKGROUND SECTION
   -------------------------------------------------------------------------- */
.sounder-vector-bg {
	position: relative;
	overflow: hidden;
}

.sounder-vector-bg::before {
	content: '';
	position: absolute;
	top: 10%;
	right: -5%;
	width: 46%;
	height: 80%;
	background-image: url('./assets/images/sounder-vector.svg');
	background-repeat: no-repeat;
	background-size: contain;
	/*background-size: auto;*/
	background-position: center right;
	pointer-events: none;
	opacity: 1;
	z-index: 0;
	transform: translateY(var(--parallax-y, 0));
	will-change: transform;
	transition: transform 0.1s linear;
	/*background-attachment: fixed;*/
}

.sounder-vector-bg > * {
	position: relative;
	z-index: 1;
}

/* Left-aligned subhero with vector */
.sounder-subhero-left {
	text-align: left;
}

@media (min-width: 1024px) {
	.sounder-subhero-left .wp-block-heading,
	.sounder-subhero-left .wp-block-paragraph {
		max-width: 50%;
		text-align: left;
	}

	.sounder-subhero-left .wp-block-buttons {
		max-width: 50%;
		justify-content: flex-start;
	}
}

@media (max-width: 1023px) {
	.sounder-vector-bg::before {
		opacity: 0.25;
		width: 100%;
		right: -15%;
		top: 5%;
		height: 90%;
	}
}

/* --------------------------------------------------------------------------
   PARALLAX DIFFERENCES SECTION
   Heading pinned left, items scroll on the right with vector bg
   -------------------------------------------------------------------------- */
.sounder-differences {
  position: relative;
  /* REMOVED: overflow: hidden — this was killing sticky */
}

/* Vector background — sticky */
.sounder-diff-vector {
	position: sticky;
	top: 0;
	height: 100vh;
	margin-bottom: -100vh;
	pointer-events: none;
	z-index: 0;
	background-image: url('./assets/images/sounder-vector-alt.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center right;
}

.sounder-differences > * {
  position: relative;
  z-index: 1;
}

/* 2-column layout */
.sounder-diff-layout {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 4rem;
  align-items: flex-start;
}

.sounder-diff-heading {
  flex: 0 0 35%;
  position: sticky;
  top: 8rem;
  align-self: flex-start;
}

.sounder-diff-items {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20rem;
}

/* Individual items — these get the parallax now */
.sounder-diff-item {
  position: relative;
  padding-left: 2.5rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  transform: translateY(var(--parallax-y, 0));
  will-change: transform;
  transition: transform 0.1s linear;
}

.sounder-diff-item::before {
	content: '+';
	position: absolute;
	left: 0;
	top: 0.1em;
    padding-top: 2rem;
    padding-bottom: 2rem;
	color: var(--sounder-teal-dark);
	font-weight: 700;
	font-size: 1.75rem;
	line-height: 1;
}
.sounder-diff-item .sounder-diff-title {
	color: var(--sounder-yellow-light);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 596;
	line-height: 1.15;
	margin: 0 0 0.5rem 0;
}
.sounder-diff-item .sounder-diff-desc {
	color: var(--sounder-white);
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
}

@media (max-width: 1023px) {
	.sounder-diff-layout {
		flex-direction: column;
		gap: 2.5rem;
	}
	.sounder-diff-heading {
		position: static;
		flex: none;
		width: 100%;
	}
	.sounder-differences::before {
		opacity: 0.2;
		left: 0;
		right: -20%;
	}
}

/* --------------------------------------------------------------------------
   CARDS / FEATURE BLOCKS
   -------------------------------------------------------------------------- */
/* Light default */
.sounder-card,
.is-style-sounder-card {
	background: rgba(6, 22, 49, 0.03);
	border: 1px solid rgba(6, 22, 49, 0.08);
	border-radius: 12px;
	padding: 2.5rem;
	transition: all var(--sounder-transition);
}

.sounder-card:hover,
.is-style-sounder-card:hover {
	background: rgba(6, 22, 49, 0.06);
	border-color: rgba(56, 191, 195, 0.2);
	box-shadow: var(--sounder-shadow-glow-teal);
	transform: translateY(-2px);
}

/* Card with gradient top border accent — light default */
.sounder-card-accent,
.is-style-sounder-card-accent {
	background: rgba(6, 22, 49, 0.03);
	border: 1px solid rgba(6, 22, 49, 0.08);
	border-radius: 12px;
	padding: 2.5rem;
	position: relative;
	overflow: hidden;
}

/* Dark context cards */
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .sounder-card,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .is-style-sounder-card,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .sounder-card-accent,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .is-style-sounder-card-accent {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.08);
}

:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .sounder-card:hover,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .is-style-sounder-card:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(56, 245, 251, 0.2);
}

.sounder-card-accent::before,
.is-style-sounder-card-accent::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--sounder-gradient-teal-yellow);
}

/* Teal-bordered service card */
.is-style-sounder-service-card {
	border: 3px solid var(--wp--preset--color--teal-light);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
}

/* --------------------------------------------------------------------------
   BLOG POSTS
   -------------------------------------------------------------------------- */
   
   /* Tags */
   .taxonomy-category a, .wp-block-post-terms a {
    display: inline-block; 
     padding: 2px 15px; 
     border-radius: 1000px;
     background-color: #F0F5FF;
     margin-right: 8px;
     margin-bottom: 8px;
   }

    .wp-block-categories-list li, .wp-block-categories li{
        list-style: none;
        display: inline-block; 
     padding: 2px 15px; 
     border-radius: 1000px;
     background-color: #F0F5FF; 
     margin-bottom: 8px;
    }
    
       .wp-block-categories-list, .wp-block-categories {
           padding-left: 0px;
       }
       
     .wp-block-categories-list li a:hover, .wp-block-categories li a:hover,
     .taxonomy-category a:hover, .wp-block-post-terms a:hover
     {
     background-color: #FBF3C7; 
    }
    
    .blog-on-blue-bg .taxonomy-category a, .blog-on-blue-bg .wp-block-post-terms a  {
    background-color: #020F36;
         margin-right: 8px;
     margin-bottom: 8px;
    }
    
    .blog-on-blue-bg .taxonomy-category a:hover, .blog-on-blue-bg .wp-block-post-terms a:hover
     {
     background-color: #9DEDEF; 
    }
    
    .wp-block-post-terms__separator {
        display: none;
    }
/* --------------------------------------------------------------------------
   SECTIONS — BACKGROUND VARIANTS
   -------------------------------------------------------------------------- */

/* Dark navy section (default) */
.sounder-section-dark {
	background: var(--sounder-dark-navy);
	color: var(--sounder-white);
}

/* Navy section */
.sounder-section-navy {
	background: var(--sounder-navy);
	color: var(--sounder-white);
}

/* Gradient section */
.sounder-section-gradient {
	background: var(--sounder-gradient-dark-blue);
	color: var(--sounder-white);
}

/* Light / dust section (for contrast) */
.sounder-section-light {
	background: var(--sounder-dust-blue);
	color: var(--sounder-dark-navy);
}

.sounder-section-light h1,
.sounder-section-light h2,
.sounder-section-light h3,
.sounder-section-light h4 {
	color: var(--sounder-dark-navy);
}

/* Shadow/black section */
.sounder-section-shadow {
	background: var(--sounder-shadow);
	color: var(--sounder-white);
}

/* Dark section text & headings — white */
:is(.sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) {
	color: var(--sounder-white);
}

:is(.sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) h1,
:is(.sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) h2,
:is(.sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) h3,
:is(.sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) h4,
:is(.sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) h5,
:is(.sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) h6,
:is(.sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .wp-block-heading,
:is(.sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) p,
:is(.sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .wp-block-paragraph {
	color: var(--sounder-white);
}

/* Dark section link colors */
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) a {
	color: #38F5FB;
}

:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) a:hover,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) a:focus {
	color: #061631;
	background-color: #9DEDEF;
	outline: none;
}

/* Dark section button colors */
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .wp-block-button .wp-block-button__link {
	background: #FCFC6E;
	color: var(--sounder-dark-navy);
}

:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .wp-block-button .wp-block-button__link:hover {
	background: #79FBFF;
	box-shadow: 0 0 30px rgba(121, 251, 255, 0.3);
}

/* --------------------------------------------------------------------------
   COVER BLOCK OVERRIDES
   Used for hero/banner areas with background images or videos
   -------------------------------------------------------------------------- */
.wp-block-cover {
	border-radius: 0;
}

.wp-block-cover .wp-block-cover__background {
	background: var(--sounder-gradient-image-overlay);
}

/* Cover with exclusion blend overlay — used for pricing section */
.sounder-cover-exclusion .wp-block-cover__background {
	mix-blend-mode: exclusion;
}

/* --------------------------------------------------------------------------
   GROUP / CONTAINER UTILITIES
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   SEPARATOR / DIVIDERS
   -------------------------------------------------------------------------- */
.wp-block-separator,
hr {
	border-color: rgba(6, 22, 49, 0.1);
	opacity: 1;
}

/* Dark context separators */
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .wp-block-separator,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) hr {
	border-color: rgba(255, 255, 255, 0.1);
}

/* Gradient accent separator */
.sounder-separator-accent,
.is-style-sounder-separator {
	border: none;
	height: 3px;
	background: var(--sounder-gradient-teal-yellow);
	border-radius: 3px;
}

/* --------------------------------------------------------------------------
   IMAGES
   -------------------------------------------------------------------------- */
.wp-block-image img {
	border-radius: 8px;
}

.wp-block-image.is-style-rounded img {
	border-radius: 16px;
}

/* --------------------------------------------------------------------------
   COLUMNS — FEATURE GRID
   -------------------------------------------------------------------------- */
.wp-block-columns {
	gap: 2rem;
}

/* --------------------------------------------------------------------------
   STATS / METRICS DISPLAY
   -------------------------------------------------------------------------- */
.sounder-stat {
	text-align: center;
}

.sounder-stat-number {
	font-size: 3.5rem;
	font-weight: 596;
	line-height: 1;
	background: var(--sounder-gradient-teal-yellow);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.sounder-stat-label {
	font-size: 1rem;
	color: var(--sounder-gray);
	margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   GRADIENT TEXT UTILITY
   -------------------------------------------------------------------------- */
.sounder-gradient-text,
.is-style-sounder-gradient-text {
	background: var(--sounder-gradient-teal-yellow);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Hero heading block styles */
.is-style-page-hero {
	font-family: Author, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 596;
	line-height: 4.25rem;
}

.is-style-home-hero {
	font-family: Author, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: clamp(2.75rem, 8vw, 6.25rem);
	font-weight: 596;
	line-height: 6rem;
}

/* --------------------------------------------------------------------------
   GLOW / ACCENT UTILITIES
   -------------------------------------------------------------------------- */
.sounder-glow-teal {
	box-shadow: var(--sounder-shadow-glow-teal);
}

.sounder-glow-blue {
	box-shadow: var(--sounder-shadow-glow-blue);
}

/* --------------------------------------------------------------------------
   BADGE / TAG
   -------------------------------------------------------------------------- */
.sounder-badge {
	display: inline-block;
	padding: 0.375rem 1rem;
	font-size: 0.8125rem;
	font-weight: 596;
	border-radius: 100px;
	background: rgba(63, 83, 233, 0.15);
	color: var(--sounder-teal-dark);
	border: 1px solid rgba(56, 245, 251, 0.2);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   BLOCKQUOTE / TESTIMONIALS
   -------------------------------------------------------------------------- */
/* Light default */
.wp-block-quote,
blockquote {
	border-left: 3px solid var(--sounder-electric-blue);
	padding: 1.5rem 2rem;
	background: rgba(6, 22, 49, 0.03);
	border-radius: 0 8px 8px 0;
	font-style: normal;
}

/* Dark context blockquote */
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .wp-block-quote,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) blockquote {
	background: rgba(255, 255, 255, 0.02);
}

.wp-block-quote cite {
	color: #FCFC6E;
	font-size: 1.2rem;
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   LIST STYLES — Default + Block Styles (Plus, Shield, Don't)
   -------------------------------------------------------------------------- */
.wp-block-list li::marker {
	color: #38BFC3;
}

/* --- Shared base for icon list styles --- */
.wp-block-list.is-style-sounder-plus,
.wp-block-list.is-style-sounder-shield,
.wp-block-list.is-style-sounder-dont {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-sounder-plus li,
.wp-block-list.is-style-sounder-shield li,
.wp-block-list.is-style-sounder-dont li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.75rem;
	line-height: 1.6;
}

.wp-block-list.is-style-sounder-plus li::before,
.wp-block-list.is-style-sounder-shield li::before,
.wp-block-list.is-style-sounder-dont li::before {
	position: absolute;
	left: 0;
	top: 0.15em;
	display: inline-block;
}

/* --- Plus style --- */
.wp-block-list.is-style-sounder-plus li::before {
	content: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 0C7.2207 0 6.18194 1.03876 6.18194 2.31806V6.18194H2.31806C1.03876 6.18194 0 7.2207 0 8.5C0 9.7793 1.03876 10.8181 2.31806 10.8181H6.18194V14.6819C6.18194 15.9612 7.2207 17 8.5 17C9.7793 17 10.8181 15.9612 10.8181 14.6819V10.8181H14.6819C15.9612 10.8181 17 9.7793 17 8.5C17 7.2207 15.9612 6.18194 14.6819 6.18194H10.8181V2.31806C10.8181 1.03876 9.7793 0 8.5 0Z' fill='%2338BFC3'/%3E%3C/svg%3E");
	width: 17px;
	height: 17px;
}

/* --- Shield style --- */
.wp-block-list.is-style-sounder-shield li::before {
	content: url("data:image/svg+xml,%3Csvg width='14' height='16' viewBox='0 0 14 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1911 1.71653L14 1.67716V6.03249C14 10.3958 11.2935 14.3639 7.27173 15.897L7 16L6.72827 15.897C2.70709 14.3639 0 10.3954 0 6.03249V1.67656L0.808918 1.71593C2.3333 1.78714 3.79557 1.53414 5.15706 0.980695C5.65494 0.775178 6.13688 0.530282 6.59545 0.245459L6.9999 0L7.40435 0.245459C7.86292 0.530297 8.34542 0.775178 8.84274 0.980695C10.2042 1.53416 11.6659 1.78714 13.1909 1.71593L13.1911 1.71653Z' fill='%2338BFC3'/%3E%3C/svg%3E");
	width: 14px;
	height: 16px;
}

/* --- Don't style --- */
.wp-block-list.is-style-sounder-dont li::before {
	content: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.933 8.38318C18.3347 3.17832 13.588 -0.551361 8.38318 0.0670334C3.17832 0.685428 -0.551361 5.41196 0.0670334 10.6168C0.685428 15.8217 5.41196 19.5514 10.6168 18.933C15.8217 18.3146 19.5514 13.588 18.933 8.38318ZM1.70237 10.4172C1.20392 6.12945 4.29514 2.22105 8.58277 1.72185C10.4177 1.50276 12.1925 1.94094 13.6483 2.85875L3.99568 15.0841C2.75897 13.8674 1.92159 12.2522 1.70237 10.4172ZM10.4172 17.2782C8.56283 17.4972 6.76732 17.039 5.29199 16.1017L14.9641 3.85627C16.2203 5.0729 17.0778 6.7083 17.2976 8.5627C17.7961 12.8704 14.7049 16.7789 10.4172 17.2782Z' fill='%2338BFC3'/%3E%3C/svg%3E");
	width: 19px;
	height: 19px;
}

/* --------------------------------------------------------------------------
   CODE / PREFORMATTED
   -------------------------------------------------------------------------- */
/* Light default */
.wp-block-code,
pre {
	background: rgba(6, 22, 49, 0.04);
	border: 1px solid rgba(6, 22, 49, 0.08);
	border-radius: 8px;
	color: var(--sounder-electric-blue);
}

/* Dark context code */
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) .wp-block-code,
:is(.sounder-dark-theme, .sounder-section-dark, .sounder-section-navy, .sounder-section-gradient, .sounder-section-shadow, .has-dark-navy-background-color, .has-navy-background-color, .has-black-background-color, .has-contrast-background-color, .has-gray-background-color, .wp-block-cover) pre {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
	color: var(--sounder-teal-dark);
}

/* --------------------------------------------------------------------------
   SCROLL / ANIMATION UTILITIES
   Subtle entrance animations for sections
   -------------------------------------------------------------------------- */
@keyframes sounderFadeUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.sounder-animate-in {
	animation: sounderFadeUp 0.8s ease-out forwards;
}

/* --------------------------------------------------------------------------
   RESPONSIVE ADJUSTMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.home h1 {
		font-size: 4rem;
	}
	.home h2 {
		font-size: 2.5rem;
	}
	.home h3 {
		font-size: 2rem;
	}
}

@media (max-width: 768px) {
	.home h1 {
		font-size: 3rem;
	}
	.home h2 {
		font-size: 2rem;
	}
	.home h3 {
		font-size: 1.75rem;
	}

	.sounder-card,
	.is-style-sounder-card {
		padding: 1.5rem;
	}

	.sounder-hero,
	.is-style-sounder-hero {
		min-height: 60vh;
	}

	.sounder-stat-number {
		font-size: 2.5rem;
	}
}

@media (max-width: 480px) {
	.home h1 {
		font-size: 2.25rem;
	}
	.home h2 {
		font-size: 1.75rem;
	}

	.wp-block-button .wp-block-button__link {
		padding: 0.75rem 1.5rem;
		font-size: 0.9375rem;
	}
}

/* ==========================================================================
   SERVICE PAGE — LIGHT THEME INTERIOR PAGES
   Dark hero at top, then white/light body sections
   ========================================================================== */

/* --------------------------------------------------------------------------
   SERVICE PAGE HERO — Dark, left-aligned (shorter than homepage)
   -------------------------------------------------------------------------- */
.sounder-service-hero {
	background: var(--sounder-gradient-dark-blue);
	position: relative;
	overflow: hidden;
}

.sounder-service-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 30% 80%, rgba(63, 83, 233, 0.2), transparent 60%);
	pointer-events: none;
}

.sounder-service-hero h1 {
	text-align: left;
}

.sounder-service-hero p {
	color: var(--sounder-light-gray);
}

@media (min-width: 1024px) {
	.sounder-service-hero h1 {
		max-width: 70%;
	}
	.sounder-service-hero p {
		max-width: 65%;
	}
}

/* --------------------------------------------------------------------------
   SERVICE LIGHT SECTION — White background body areas
   -------------------------------------------------------------------------- */
.sounder-section-white {
	background: var(--sounder-white);
	color: var(--sounder-dark-navy);
}

.sounder-section-white h2,
.sounder-section-white h3,
.sounder-section-white h4 {
	color: var(--sounder-dark-navy);
}

.sounder-section-white p {
	color: #374151;
}

/* Off-white alternating sections */
.sounder-section-offwhite {
	background: #F8FAFF;
	color: var(--sounder-dark-navy);
}

.sounder-section-offwhite h2,
.sounder-section-offwhite h3,
.sounder-section-offwhite h4 {
	color: var(--sounder-dark-navy);
}

.sounder-section-offwhite p {
	color: #374151;
}

/* Lists in light sections */
.sounder-section-white .wp-block-list li,
.sounder-section-offwhite .wp-block-list li {
	color: #374151;
}

.sounder-section-white .wp-block-list li::marker,
.sounder-section-offwhite .wp-block-list li::marker {
	color: var(--sounder-electric-blue);
}

/* Separators in light sections */
.sounder-section-white .wp-block-separator,
.sounder-section-offwhite .wp-block-separator {
	border-color: rgba(6, 22, 49, 0.1);
}

/* --------------------------------------------------------------------------
   DETAILS / ACCORDION — Style the native wp:details block
   Teal triangle marker, navy summary text, gray body text
   -------------------------------------------------------------------------- */
.wp-block-details summary {
	color: #0D2E63;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--author);
	font-weight: 596;
	font-size: 1.25rem;
	line-height: 1.4;
	list-style: none;
	position: relative;
	padding-left: 2rem;
	transition: color 0.2s ease;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid #38BFC3;
	transition: transform 0.2s ease;
}

.wp-block-details[open] summary::before {
	transform: rotate(180deg);
}

.wp-block-details summary:hover {
	color: var(--sounder-electric-blue, #3F53E9);
}

.wp-block-details > *:not(summary) {
	padding-left: 2rem;
	color: #4f4f4f;
	font-size: 1.125rem;
	line-height: 1.45;
}

/* --------------------------------------------------------------------------
   COMPARISON TABLE — Two-column "What we track / What we block"
   -------------------------------------------------------------------------- */
.sounder-compare-table {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(6, 22, 49, 0.1);
}

.sounder-compare-col {
	padding: 2rem 2.5rem 2.5rem;
}

.sounder-compare-col:first-child {
	background: var(--sounder-dust-blue);
	border-right: 1px solid rgba(6, 22, 49, 0.08);
}

.sounder-compare-col:last-child {
	background: var(--sounder-white);
}

.sounder-compare-col h3 {
	font-size: 1.25rem;
	font-weight: 596;
	margin: 0 0 1.25rem 0;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--sounder-electric-blue);
}

.sounder-compare-col:last-child h3 {
	border-bottom-color: #dc2626;
}

.sounder-compare-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sounder-compare-col ul li {
	position: relative;
	padding: 0.5rem 0 0.5rem 1.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #374151;
}

.sounder-compare-col:first-child ul li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0.5rem;
	color: var(--sounder-electric-blue);
	font-weight: 700;
}

.sounder-compare-col:last-child ul li::before {
	content: '✕';
	position: absolute;
	left: 0;
	top: 0.5rem;
	color: #dc2626;
	font-weight: 700;
}

@media (max-width: 768px) {
	.sounder-compare-table {
		grid-template-columns: 1fr;
	}
	.sounder-compare-col:first-child {
		border-right: none;
		border-bottom: 1px solid rgba(6, 22, 49, 0.08);
	}
	.sounder-compare-col {
		padding: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   MANAGED SERVICE TABLE — "What Sounder Does / What You Don't Deal With"
   -------------------------------------------------------------------------- */
.sounder-managed-table {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(6, 22, 49, 0.1);
}

.sounder-managed-col {
	padding: 2rem 2.5rem 2.5rem;
}

.sounder-managed-col:first-child {
	background: var(--sounder-navy);
	color: var(--sounder-white);
}

.sounder-managed-col:first-child h3 {
	color: var(--sounder-white);
	border-bottom-color: var(--sounder-teal-dark);
}

.sounder-managed-col:first-child ul li {
	color: rgba(255, 255, 255, 0.85);
}

.sounder-managed-col:first-child ul li::before {
	color: var(--sounder-teal-dark);
}

.sounder-managed-col:last-child {
	background: var(--sounder-dust-blue);
}

.sounder-managed-col h3 {
	font-size: 1.25rem;
	font-weight: 596;
	margin: 0 0 1.25rem 0;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--sounder-electric-blue);
}

.sounder-managed-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sounder-managed-col ul li {
	position: relative;
	padding: 0.5rem 0 0.5rem 1.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #374151;
}

.sounder-managed-col ul li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0.5rem;
	color: var(--sounder-electric-blue);
	font-weight: 700;
}

.sounder-managed-col:last-child ul li::before {
	content: '—';
	color: var(--sounder-gray);
}

@media (max-width: 768px) {
	.sounder-managed-table {
		grid-template-columns: 1fr;
	}
	.sounder-managed-col {
		padding: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   TESTIMONIAL / QUOTE — Light theme variant
   -------------------------------------------------------------------------- */
.sounder-testimonial-light {
	background: var(--sounder-dust-blue);
	border-left: 4px solid var(--sounder-electric-blue);
	border-radius: 0 12px 12px 0;
	padding: 2rem 2.5rem;
	position: relative;
}

.sounder-testimonial-light p {
	color: var(--sounder-dark-navy);
	font-size: 1.125rem;
	line-height: 1.7;
	font-style: italic;
	margin: 0;
}

.sounder-testimonial-light .sounder-testimonial-source {
	font-style: normal;
	font-size: 0.9375rem;
	color: var(--sounder-gray);
	margin-top: 1rem;
	font-weight: 596;
}

/* --------------------------------------------------------------------------
   HOW IT WORKS — Diagram section
   -------------------------------------------------------------------------- */
.sounder-how-it-works {
	text-align: center;
}

.sounder-how-it-works-diagram {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	max-width: 900px;
	margin: 2.5rem auto 0;
	flip: wrap;
}

.sounder-hiw-step {
	background: var(--sounder-dust-blue);
	border: 1px solid rgba(6, 22, 49, 0.08);
	border-radius: 12px;
	padding: 1.5rem 1.25rem;
	flex: 1;
	text-align: center;
	min-width: 0;
}

.sounder-hiw-step-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sounder-gray);
	margin: 0 0 0.5rem;
	font-weight: 596;
}

.sounder-hiw-step-title {
	font-size: 1rem;
	color: var(--sounder-dark-navy);
	font-weight: 596;
	margin: 0;
	line-height: 1.3;
}

.sounder-hiw-step-desc {
	font-size: 0.875rem;
	color: var(--sounder-gray);
	margin: 0.375rem 0 0;
	line-height: 1.4;
}

.sounder-hiw-step.sounder-hiw-highlight {
	background: var(--sounder-navy);
	border-color: var(--sounder-navy);
}

.sounder-hiw-step.sounder-hiw-highlight .sounder-hiw-step-label {
	color: var(--sounder-teal-dark);
}

.sounder-hiw-step.sounder-hiw-highlight .sounder-hiw-step-title {
	color: var(--sounder-white);
}

.sounder-hiw-step.sounder-hiw-highlight .sounder-hiw-step-desc {
	color: var(--sounder-light-gray);
}

.sounder-hiw-arrow {
	flex: 0 0 auto;
	color: var(--sounder-electric-blue);
	font-size: 1.5rem;
	line-height: 1;
}

@media (max-width: 768px) {
	.sounder-how-it-works-diagram {
		flex-direction: column;
		gap: 0.5rem;
	}
	.sounder-hiw-arrow {
		transform: rotate(90deg);
	}
}

/* --------------------------------------------------------------------------
   USE CASE CARDS — 3-column feature cards on light bg
   -------------------------------------------------------------------------- */
.sounder-usecase-card {
	background: var(--sounder-white);
	border: 1px solid rgba(6, 22, 49, 0.08);
	border-radius: 12px;
	padding: 2rem;
	position: relative;
	overflow: hidden;
	transition: all var(--sounder-transition);
}

.sounder-usecase-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--sounder-gradient-teal-yellow);
}

.sounder-usecase-card:hover {
	border-color: rgba(63, 83, 233, 0.2);
	box-shadow: 0 4px 24px rgba(6, 22, 49, 0.08);
	transform: translateY(-2px);
}

.sounder-usecase-card h3 {
	font-size: 1.25rem;
	color: var(--sounder-dark-navy);
	margin: 0 0 0.75rem;
}

.sounder-usecase-card p {
	font-size: 1rem;
	color: #4b5563;
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 768px) {
	.sounder-usecase-card {
		padding: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   FAQ ACCORDION
   -------------------------------------------------------------------------- */
.sounder-faq-item {
	border-bottom: 1px solid rgba(6, 22, 49, 0.1);
}

.sounder-faq-item:first-child {
	border-top: 1px solid rgba(6, 22, 49, 0.1);
}

.sounder-faq-question {
	width: 100%;
	background: none;
	border: none;
	padding: 1.5rem 2.5rem 1.5rem 0;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 596;
	color: var(--sounder-dark-navy);
	line-height: 1.4;
	position: relative;
	transition: color var(--sounder-transition);
}

.sounder-faq-question:hover {
	color: var(--sounder-electric-blue);
	background: none;
	box-shadow: none;
	transform: none;
}

.sounder-faq-question::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--sounder-electric-blue);
	transition: transform 0.3s ease;
}

.sounder-faq-item.is-open .sounder-faq-question::after {
	content: '−';
}

.sounder-faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease, padding 0.3s ease;
	padding: 0 0 0 0;
}

.sounder-faq-item.is-open .sounder-faq-answer {
	max-height: 500px;
	padding-bottom: 1.5rem;
}

.sounder-faq-answer p {
	color: #4b5563;
	font-size: 1rem;
	line-height: 1.7;
	margin: 0;
}

/* --------------------------------------------------------------------------
   PRICING CARD — Highlighted pricing on light bg
   -------------------------------------------------------------------------- */
.sounder-pricing-highlight {
	background: var(--sounder-gradient-dark-blue);
	border-radius: 16px;
	padding: 3rem;
	text-align: center;
	position: relative;
	overflow: hidden;
	max-width: 600px;
	margin: 0 auto;
}

.sounder-pricing-highlight::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 100%, rgba(56, 191, 195, 0.15), transparent 60%);
	pointer-events: none;
}

.sounder-pricing-highlight > * {
	position: relative;
	z-index: 1;
}

.sounder-pricing-highlight .sounder-price-amount {
	font-size: 3.5rem;
	font-weight: 596;
	color: var(--sounder-white);
	line-height: 1;
	margin: 0;
}

.sounder-pricing-highlight .sounder-price-period {
	font-size: 1.25rem;
	color: var(--sounder-light-gray);
	font-weight: 500;
}

.sounder-pricing-highlight .sounder-price-details {
	color: var(--sounder-light-gray);
	font-size: 1rem;
	line-height: 1.7;
	text-align: left;
	list-style: none;
	padding: 0;
	margin: 1.5rem auto 0;
	max-width: 350px;
}

.sounder-pricing-highlight .sounder-price-details li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.5rem;
}

.sounder-pricing-highlight .sounder-price-details li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--sounder-teal-dark);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   CMS SECTION — Icons row
   -------------------------------------------------------------------------- */
.sounder-cms-icons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	margin-top: 2rem;
}

.sounder-cms-icon {
	width: 64px;
	height: 64px;
	border-radius: 12px;
	background: var(--sounder-dust-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
}

.sounder-cms-plus {
	font-size: 1.5rem;
	color: var(--sounder-electric-blue);
	font-weight: 596;
}

/* --------------------------------------------------------------------------
   LAST CONTENT GROUP — Bottom margin when no background
   Applies to page, service-page, and landing-page templates.
   Groups with .has-background bleed edge-to-edge into the footer,
   so they don't need the margin.
   -------------------------------------------------------------------------- */
.page-template-page .wp-block-post-content > .wp-block-group:last-child:not(.has-background),
.page-template-service-page .wp-block-post-content > .wp-block-group:last-child:not(.has-background),
.page-template-landing-page .wp-block-post-content > .wp-block-group:last-child:not(.has-background) {
	margin-bottom: var(--wp--preset--spacing--70);
}

/* --------------------------------------------------------------------------
   SERVICE PAGE — Header override (transparent over dark hero)
   -------------------------------------------------------------------------- */
.page-template-service-page .wp-block-template-part[data-area="header"],
.page-template-service-page{
    
    
}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
   
   .gform_wrapper .gfield input {
      border-color:#B7C7E6!important;
      box-shadow: none!important;
   }
   
   .gform_button {
       background-color:#FFDD15!important;
       color: #0B1A3A!important;
       border-radius: 100px!important;
          }

/* --------------------------------------------------------------------------
   HOMEPAGE MOBILE
   -------------------------------------------------------------------------- */
   @media screen and (max-width: 781px) {
	.healthcare-marketing-homepage {
	    padding-top: 10rem!important;;
	    padding-bottom: 8rem!important;;
	}
	
	/* could also use  the container class that gets made up by wp-blockity when custom settings are applied -- no custom classes needed r*/
	
	.home div.wp-block-column div.wp-block-group.wp-containter-2{
	     padding-top: 0rem!important;
	    padding-bottom: 0rem!important;
	    
	}
	
	
	
	.what-makes-sounder-different-homepage .left-column-content >div {
	    padding-top: 0rem!important;
	    padding-bottom: 0rem!important;
	}

    .what-makes-sounder-different-homepage .right-column-content >div {
      padding-top: 0rem!important;;
      padding-left:24px!important;
    }
            .what-makes-sounder-different-homepage .right-column-content >div> .wp-block-heading {        margin-top: 3rem!important;;
   }
   
   .compliance-first-homepage {
       padding-top: 0px!important;
   }
   
   .homepage-hipaa-compliant-analytics-graphic .arrow-icon,
   .analytics-graphics-on-white-bg .arrow-icon {
       transform: rotate(90deg);
   }
   
   .single-service-pricing .wp-block-group.has-border-color {
       max-width: 100%!important;
   }
   
   .overlapping-blue-box-bg .overlapping-blue-boxes {
       margin-top:-62px!important;
       padding-right: 8px!important;
       padding-left: 8px!important;
       
   }
   
   .wp-block-site-logo img {
       max-width: 80%!important;
   }
   
   .error-boat-and-text .left-column{
       order: 2;
       text-align: center;
   }
   
      .error-boat-and-text .right-column{
       text-align:center;
   }
   
    .error-boat-and-text .wp-block-columns{
       gap:0px!important;
   }
   
   .line-wrapper {
       max-width:100%!important;
       margin-left: auto!important;
       margin-right: auto!important;
       padding-left: 0px!important;
       
   }
    
    .line-wrapper .sounder-scroll-line {
        max-width: 100%!important;
        align-items: center!important;
    }
    
    .navigate-text {
        text-align: center!important;
        max-width: 80%!important;

    }
    .navigate-text .wp-block-heading {
         margin-right: 0 auto!important
    }
    
    .thank-you-message {
        padding-bottom: 2rem!important;
    }
}