/*
Theme Name: Synapse Elementor Theme
Theme URI: https://synapse.media
Author: Synapse Team
Author URI: https://synapse.media
Description: A custom Elementor-friendly theme for Synapse.
Version: 1.0.1
License: Proprietary
*/

:root {
    --primary-color: #3CBCD6;
    --primary-hover: #2ba1b9;
    --secondary-color: #180E36;
    --accent-color: #e94560;

    /* Light Mode Palette */
    --bg-dark: #f4f4f4;
    /* Main Body Background */
    --bg-card: #ffffff;
    --text-main: #180E36;
    /* Dark Text */
    --text-muted: #180E36;

    --header-bg: #ffffff;

    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Poppins', sans-serif;
    --spacing-unit: 1rem;
    --border-radius: 12px;
    --transition-speed: 0.3s;
}

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Poppins:wght@400;600;700&family=Syne:wght@700&display=swap');

.synapse-logo {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #fff;
    letter-spacing: -0.5px;
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-dark);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-speed);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 {
    font-size: 64px;
    line-height: 76px;
    color: var(--secondary-color);
}

h2 {
    font-size: 48px;
    line-height: 56px;
    color: var(--secondary-color);
}

h3 {
    font-size: 1.75rem;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.text-center {
    text-align: center;
}

.section-padding {
    padding: 80px 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 30px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(60, 188, 214, 0.3);
}

.btn-text {
    background: none;
    border: none;
    color: var(--text-main);
    font-weight: 500;
    padding: 8px 16px;
    cursor: pointer;
}

.btn-text:hover {
    color: var(--primary-color);
}

.btn:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(60, 188, 214, 0.5);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    box-shadow: none;
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.btn-large {
    padding: 16px 36px;
    font-size: 1.1rem;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.9rem;
}

/* Backgrounds */
.bg-card {
    background-color: var(--bg-card);
}

.site-header {
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid transparent;
    padding: 15px 0;
    box-shadow: none;
    transition: all 0.3s ease;
}

.site-header.scrolled {
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Ensure logo doesn't disrupt layout */
.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    max-width: 200px;
}

/* WordPress outputs a link class 'custom-logo-link' */
.custom-logo-link {
    display: block;
    width: auto;
    max-width: 100%;
}

.custom-logo-link img,
.custom-logo {
    height: 30px;
    /* Match design */
    width: auto;
    /* Preserve aspect ratio */
    display: block;
    max-width: 100%;
}

.synapse-logo {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--secondary-color);
    letter-spacing: -0.5px;
    line-height: 1;
}

/* Re-style Nav for this layout */
.main-nav ul {
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
}

.main-nav a {
    font-weight: 500;
    color: var(--secondary-color);
    /* Dark color from palette */
    font-size: 0.95rem;
}

.main-nav a:hover {
    color: var(--primary-color);
}

.header-right {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Hero Section */
.hero {
    padding: 120px 0 60px;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) -13.17%, rgba(24, 14, 54, 0.1) 100%);
    overflow: hidden;
    transition: background 0.5s ease;
}

.hero.journo-mode {
    background: linear-gradient(180deg, rgba(60, 188, 214, 0.1) 0%, rgba(255, 255, 255, 1) 100%);
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.hero h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 76px;
    text-align: center;
    color: #180E36;
    margin-bottom: 24px;
    background: none;
    -webkit-text-fill-color: initial;
    -webkit-background-clip: border-box;
    background-clip: border-box;
}

/* New Hero Styles */
.hero-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 392px;
    max-width: 100%;
    /* Mobile fix */
    height: 44px;
    border: 1px solid #3CBCD6;
    border-radius: 32px;
    background: transparent;
    padding: 0;
    margin-bottom: 30px;
    overflow: hidden;
}

.toggle-btn {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.3s ease;
    padding: 0;
    background: transparent;
    color: #3CBCD6;
}

.toggle-btn.active {
    background-color: #3CBCD6;
    color: #FFFFFF;
    box-shadow: none;
}

.hero-content {
    text-align: center;
    max-width: 850px;
    margin: 0 auto;
}

/* Override default grid for this specific centered hero design */
.hero .container.centered-hero {
    display: block;
    text-align: center;
}

.hero h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 76px;
    text-align: center;
    color: #180E36;
}

.hero h1 strong,
.hero h1 em,
.highlight-text {
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    position: relative;
    display: inline-block;
    color: var(--secondary-color);
    z-index: 1;
    font-weight: lighter;
}

.hero h1 strong::after,
.hero h1 em::after,
.highlight-text::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 12px;
    background: url('assets/img/banner-icon-1.png') no-repeat center center;
    background-size: 100% 100%;
    z-index: -1;
}

.brand-logos {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* Social Proof Text */
.social-proof-text {
    font-size: 18px;
    /* Updated per request */
    color: var(--text-main);
    margin-bottom: 20px;
}

.brand-logos img {
    height: 40px;
    width: auto;
    opacity: 1;
    transition: all 0.3s;
}

.brand-logos img:hover {
    opacity: 0.6;
}

/* CTA Background & Inset Shadow */
.cta-background {
    width: 100%;
    height: 464px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) -13.17%, rgba(24, 14, 54, 0.1) 100%);
    /* PR Default */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.5s ease;
}

.cta-background.journo-mode {
    background: linear-gradient(180deg, rgba(60, 188, 214, 0.1) 0%, rgba(255, 255, 255, 1) 100%);
    /* Journalist Mode */
}

.hero p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 30px;
    text-align: center;
    color: var(--text-main);
    margin-bottom: 35px;
    max-width: 874px;
}

.hero-btns {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.hero-btns .btn {
    padding: 16px 32px;
    height: 60px;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
    box-shadow: none;
    /* Figma doesn't mention shadow for this button specifically in the text dump, but keeping it clean or adding if needed. Flat seems better for now or match primary style */
}

/* ================================================
   UTILITY: Thumbnail Fallback
   Used site-wide when a post has no featured image.
   Replaces all external placehold.co dependencies.
   ================================================ */
.synapse-thumbnail-fallback {
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: linear-gradient(135deg, #180E36 0%, #1d5ca8 55%, #3CBCD6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

.synapse-thumbnail-fallback::after {
    content: '';
    display: block;
    width: 56px;
    height: 56px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.25)' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3 3h18M3 3v18M3 3l18 18'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.5;
}

/* Testimonials */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.testimonial-card {
    padding: 40px;
    border-radius: var(--border-radius);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.testimonial-card p {
    font-style: italic;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.testimonial-card .author {
    font-weight: 600;
    color: var(--primary-color);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-col h3 {
    color: #fff;
    margin-bottom: 20px;
}

.footer-col h4 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col a {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.footer-col a:hover {
    color: var(--primary-color);
}

.hero-image {
    margin-top: 60px;
    width: 100%;
}

.hero-visual-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.hero-visual-placeholder img {
    width: 85%;
    height: auto;
    object-fit: cover;
    display: block;
    margin: auto;
}


.mission-section {
    position: relative;
    background: rgba(60, 188, 214, 0.05);
    padding: 64px 0;
    margin-top: 100px;
    border-radius: 8px;
    overflow: hidden;
}

.mission-content-wrapper {
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 72px;
    margin: auto;
}

@media (max-width: 992px) {
    .mission-content-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .mission-left-col {
        width: 100%;
    }

    .mission-description {
        max-width: 100%;
    }
}

.mission-left-col {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    flex: 1;
}

.accent-line {
    width: 15px;
    height: 100%;
    min-height: 280px;
    background-color: #3CBCD6;
    border-radius: 2px;
}

.mission-text h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 56px;
    color: #180E36;
    margin: 0;
    white-space: pre-wrap;
}

.mission-text .text-cyan {
    color: #3CBCD6;
}

.mission-text .text-faded {
    color: rgba(60, 188, 214, 0.3);
    /* Ghosted effect */
}

.mission-description {
    width: 100%;
    max-width: 420px;
    flex-shrink: 0;
}

.mission-description p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.4;
    color: #180E36;
    hanging-punctuation: first last;
    margin: 0;
}

/* Responsive Mission */
@media (max-width: 1100px) {
    .mission-content-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .mission-left-col {
        width: 100%;
    }

    .mission-description {
        max-width: 100%;
        padding-left: 34px;
        /* Align with text roughly */
    }
}

.hero-visual-placeholder .placeholder-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.2);
    font-weight: bold;
    font-size: 2rem;
}

/* Responsive */
@media (max-width: 900px) {
    .container {
        padding: 0 25px;
    }

    h1 {
        font-size: 2.5rem;
    }

    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-btns {
        justify-content: center;
    }

    .dual-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .main-nav {
        display: none;
        /* Simplification */
    }
}

/* How Synapse Works Section */
.how-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 64px;
    flex-wrap: wrap;
    gap: 20px;
}

.how-header-row h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 48px;
    color: #180E36;
    margin: 0;
}

/* How It Works — header row (inline styles removed from front-page.php) */
.how-container {
    max-width: 1440px;
}

.how-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 64px;
}

.how-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 56px;
    color: #180E36;
    margin: 0;
}


.works-toggle-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #3CBCD6;
    border-radius: 32px;
    /* Pill shape */
    overflow: hidden;
    height: 44px;
}

.works-toggle-btn {
    background: transparent;
    border: none;
    padding: 0 24px;
    height: 100%;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #3CBCD6;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.works-toggle-btn.active {
    background-color: #3CBCD6;
    color: #FFFFFF;
}

.works-content-group {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.steps-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
}

.work-step {
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.work-step.active {
    opacity: 1;
}

/* Step Line/Bar for Carousel */
.step-line {
    width: 100%;
    height: 4px;
    background: rgba(60, 188, 214, 0.1);
    margin-bottom: 24px;
    position: relative;
    border-radius: 2px;
    overflow: hidden;
}

.work-step.active .step-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: #3CBCD6;
    animation: progressFill 10s linear forwards;
}

@keyframes progressFill {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

.step-line {
    width: 100%;
    height: 4px;
    background-color: #C7C7C7;
    margin-bottom: 16px;
    transition: background-color 0.3s ease;
    position: relative;
    /* Essential for ::after positioning */
    overflow: hidden;
    /* optional, keeps fill inside */
}

/* Remove instant background change so animation is visible */
.work-step.active .step-line {
    background-color: #C7C7C7;
}


.work-step h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    color: #180E36;
    margin-bottom: 16px;
}

.work-step p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #180E36;
    margin: 0;
}

.works-image-container {
    width: 100%;
    position: relative;
    padding-top: 56.25%;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
}

.works-feature-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.works-feature-img.active {
    opacity: 1;
    z-index: 2;
}

/* Responsive */
@media (max-width: 992px) {
    .steps-row {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .how-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .works-image-container {
        padding-top: 75%;
    }
}

/* Live Chat Section */
.live-chat-section {
    padding: 0;
    margin: 100px auto;
    width: 100%;
    max-width: 1326px;
}

.chat-container {
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
}

.chat-content-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    min-height: 452px;
}

/* Left Column */
.chat-left-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 64px 0 64px 64px;
    /* Left padding specific */
    gap: 16px;
    width: 357px;
    flex-shrink: 0;
}

.chat-left-col h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.17;
    color: #180E36;
    margin: 0;
}

.chat-left-col p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.56;
    color: #180E36;
    margin: 0;
}

/* Right Column (Image) */
.chat-image-col {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    /* Center image in space */
    align-items: center;
    height: 100%;
    position: relative;
    padding-right: 0;
}

.chat-image-col img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    /* Optional: If design requires image to bleed or fit specifically */
}

/* ============================================================
   JOURNALIST LIVE CHAT SECTION  (.jr-*)
   Matches live-chat-preview-jr.png exactly.
   ============================================================ */

.jr-chat-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 56px;
    background: linear-gradient(145deg, #E5F8FB 0%, #EEF9FB 60%, #F5FBFD 100%);
    border: 1.5px solid #A5E0EB;
    border-radius: 20px;
    padding: 52px 60px;
    box-sizing: border-box;
}

/* Left: text */
.jr-chat-left {
    flex: 0 0 36%;
    max-width: 36%;
}

.jr-chat-left h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1.15;
    color: #180E36;
    margin: 0 0 18px;
}

.jr-chat-left p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #4A5568;
    margin: 0;
}

/* Right: cards area */
.jr-cards-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* Top row: 2 cards side by side */
.jr-cards-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* Bottom row: 1 centred wide card */
.jr-cards-bottom {
    display: flex;
    justify-content: center;
    padding: 0 30px;
}

/* Individual card */
.jr-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
}

.jr-card-wide {
    width: 100%;
}

/* Card header: icon + "Synapse APP" */
.jr-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jr-app-icon {
    width: 40px;
    height: 40px;
    background: #180E36;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    padding: 8px;
}

.jr-app-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.jr-app-name {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #180E36;
    display: flex;
    align-items: center;
    gap: 6px;
}

.jr-app-badge {
    background: #E2E8F0;
    color: #64748B;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

/* Card body */
.jr-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.jr-card-body p {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #180E36;
    margin: 0;
}

.jr-card-msg {
    color: #718096 !important;
    font-style: italic;
}

.jr-card-pitch {
    font-weight: 700 !important;
    color: #180E36 !important;
}

/* Card action buttons */
.jr-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.jr-btn {
    padding: 8px 18px;
    border-radius: 7px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.jr-btn-primary {
    background: #1C6B44;
    color: #ffffff;
    border: none;
}

.jr-btn-primary:hover {
    background: #155938;
}

.jr-btn-outline {
    background: transparent;
    color: #1C6B44;
    border: 1.5px solid #1C6B44;
}

.jr-btn-outline:hover {
    background: rgba(28, 107, 68, 0.06);
}

/* Responsive */
@media (max-width: 992px) {
    .chat-content-wrapper {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px;
        height: auto;
    }

    .chat-left-col {
        width: 100%;
        padding: 0 0 40px 0;
    }

    .chat-image-col {
        width: 100%;
    }
}

/* ============================================================
   SYNAPSE CHAT SECTIONS — sc-*
   Both #chat-pr and #chat-journo share these base styles.
   Card positions differ per section via modifier classes.
   ============================================================ */

/* Outer wrapper with teal bg + inset glow (from Figma) */
.sc-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 0 0 64px;
    gap: 61px;
    max-width: 1326px;
    min-height: 452px;
    margin: 0 auto;
    background: rgba(60, 188, 214, 0.05);
    box-shadow: inset 0px 0px 15px 2px #3CBCD6;
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

/* Left text column — Figma: 357px × 396px, padding 64px 0 */
.sc-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 64px 0;
    gap: 16px;
    width: 357px;
    flex-shrink: 0;
    z-index: 1;
}

.sc-left h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 56px;
    color: #180E36;
    margin: 0;
}

.sc-left p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #180E36;
    margin: 0;
}

/* Right cards area — contains absolutely positioned cards */
.sc-cards {
    flex: 1;
    align-self: stretch;
    position: relative;
    min-width: 0;
}

/* ── Base card ──────────────────────────────────────────── */
.sc-card {
    position: absolute;
    background: #FFFFFF;
    box-shadow: 2px 2px 4px 2px rgba(24, 14, 54, 0.05);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}

/* Card inner row: logo + content */
.sc-card-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
}

/* Synapse app logo — 42.73px dark navy rounded square */
.sc-app-logo {
    width: 42.73px;
    height: 42.73px;
    min-width: 42.73px;
    background: #180E36;
    border-radius: 5.34px;
    padding: 6px;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
}

/* Content column: badge row + notification text + buttons */
.sc-card-content {
    display: flex;
    flex-direction: column;
    gap: 21.37px;
    flex: 1;
    min-width: 0;
}

/* "Synapse APP" row */
.sc-app-name-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5.34px;
    margin-bottom: 4px;
}

.sc-app-name {
    font-family: 'Lato', 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 17.36px;
    line-height: 21px;
    color: #1B1B1B;
}

.sc-app-badge {
    background: #DFDFDF;
    border-radius: 4px;
    padding: 1.34px 5.34px;
    font-family: 'Lato', 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    color: #2E2E2E;
    opacity: 0.7;
}

/* Card meta: badge + notification text + optional sub-text */
.sc-card-meta {
    display: flex;
    flex-direction: column;
}

/* Bold notification text */
.sc-notif-text {
    font-family: 'Lato', 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #131313;
    margin: 0;
}

/* Secondary card text (pitch subject, message preview) */
.sc-card-sub {
    font-family: 'Lato', 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #000000;
    margin: 4px 0 0;
}

.sc-card-sub--light {
    font-weight: 400;
}

/* Action buttons row */
.sc-card-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10.68px;
    flex-wrap: wrap;
}

.sc-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10.68px 14px;
    border-radius: 5.34px;
    font-family: 'Lato', 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.sc-btn--primary {
    background: #007757;
    color: #FFFFFF;
}

.sc-btn--primary:hover {
    background: #005f44;
}

.sc-btn--outline {
    background: #FFFFFF;
    border: 1.34px solid #007757;
    color: #007757;
}

.sc-btn--outline:hover {
    background: rgba(0, 119, 87, 0.05);
}

/* ── Webp image card positions ──────────────────────────────── */
/* sc-img: base — absolutely positioned, no box model decoration */
.sc-img {
    position: absolute;
    height: auto;
    display: block;
    max-width: 100%;
}

/* Left card (slack-left.webp) — Figma: Patsy Quinn position */
.sc-img--left {
    left: 34px;
    top: 42px;
    width: 330px;
}

/* Right card (slack-right.webp) — Figma: Matt Sampson position */
.sc-img--right {
    left: 381px;
    top: 74px;
    width: 420px;
}

/* Bottom card (slack-bottom.webp) — Figma: Pete Hall position */
.sc-img--bottom {
    left: 160px;
    top: 234px;
    width: 468px;
}

/* ── Responsive: ≤ 991px — stack vertically ────────────────── */
@media (max-width: 991px) {
    .sc-section {
        flex-direction: column;
        padding: 40px 28px 32px;
        gap: 32px;
        min-height: auto;
        overflow: visible;
    }

    .sc-left {
        width: 100%;
        padding: 0;
    }

    .sc-left h2 {
        font-size: 30px;
        line-height: 38px;
    }

    /* Switch cards to flex column, static positioning */
    .sc-cards {
        width: 100%;
        position: static;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding-bottom: 8px;
    }

    /* Images switch to static, full-width stack */
    .sc-img {
        position: static !important;
        width: 100% !important;
        max-width: 100%;
        left: auto !important;
        top: auto !important;
    }
}

@media (max-width: 575px) {
    .sc-section {
        padding: 28px 16px 24px;
    }

    .sc-left h2 {
        font-size: 24px;
        line-height: 32px;
    }

    .sc-left p {
        font-size: 15px;
    }

    .sc-notif-text,
    .sc-card-sub {
        font-size: 15px;
    }

    .sc-btn {
        font-size: 14px;
        padding: 9px 12px;
    }
}

/* Testimonials Section */

.testimonials-section {
    padding: 64px 56px;
    background: rgba(60, 188, 214, 0.05);
    /* Background Blue tint */
    width: 100%;
    margin: 0 auto;
}

.testi-container {
    max-width: 1328px;
    /* Matches frame width */
    margin: 0 auto;
}

/* Header Row */
.testi-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 64px;
    flex-wrap: wrap;
    gap: 20px;
}

.testi-header-row h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 56px;
    color: #180E36;
    max-width: 823px;
    margin: 0;
}

.testi-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 8px 32px;
    height: 44px;
    border: 1px solid #180E36;
    border-radius: 32px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #180E36;
    text-decoration: none;
    transition: all 0.3s ease;
}

.testi-btn:hover {
    background: #180E36;
    color: #fff;
}

/* Bento Grid */
.testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 Columns */
    grid-template-rows: auto auto;
    /* 2 Rows */
    gap: 20px;
    /* Approx 16-32px gap */
}

/* Common Card Styles */
.testi-card {
    background: linear-gradient(90deg, rgba(29, 92, 168, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 8px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

/* Specific Card Backgrounds (Subtle variations per design) */
.slot-1 {
    background: linear-gradient(90deg, rgba(29, 92, 168, 0.1) 41.88%, rgba(255, 255, 255, 0) 201.97%);
}

/* Reach */
.slot-2 {
    background: linear-gradient(90deg, rgba(24, 14, 54, 0.1) 0%, rgba(255, 255, 255, 0) 203.6%);
}

/* Third City */
.slot-3 {
    background: linear-gradient(90deg, rgba(24, 14, 54, 0.1) 0.12%, rgba(255, 255, 255, 0) 168.56%);
}

/* Folk */
.slot-4 {
    background: linear-gradient(90deg, rgba(29, 92, 168, 0.1) 0.06%, rgba(255, 255, 255, 0) 151.2%);
}

/* Newsquest */

/* Slot Positioning */
.slot-1 {
    grid-column: 1 / 2;
    min-height: 353px;
}

.slot-2 {
    grid-column: 2 / 3;
    min-height: 353px;
}

.slot-3 {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    min-height: 691px;
    padding-top: 250px;
    /* Space for image at top */
}

.slot-4 {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    min-height: 322px;
    display: flex;
    align-items: center;
}

/* Content Styles */
.testi-card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.testi-quote {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.36;
    color: #180E36;
    margin-bottom: auto;
    /* Pushes Person and Logo to bottom */
    padding-bottom: 24px;
}

.testi-person strong {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #180E36;
}

.testi-person span {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    /* Design says bold/700 for title too? Or smaller? */
    font-size: 15px;
    color: #180E36;
    opacity: 0.8;
}

.testi-logo-wrapper {
    margin-top: 24px;
    min-height: 40px;
}

.testi-logo {
    max-height: 40px;
    width: auto;
    object-fit: contain;
}

.logo-fallback {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 24px;
    color: #180E36;
    opacity: 0.2;
    margin: 0;
    text-transform: uppercase;
}

/* Image Styles (for Slot 3 & 4) */
.testi-photo.round {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    object-fit: cover;
    background: #D9D9D9;
    position: absolute;
}

/* Slot 3 Image (Top) */
.slot-3 .testi-photo {
    top: 0;
    left: 0;
    /* Or centered? Design looks like top-left of container */
    width: 100%;
    height: 250px;
    /* Occupy top area */
    border-radius: 0;
    /* Full width top image? Design has rounded circle on grey bg? */
    /* Design: "Ellipse 17" absolute top 0. Actually, image is absolute. Let's make it easy */
    position: static;
    margin-bottom: 32px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

/* Override for Slot 3 specific structure */
.slot-3 {
    padding-top: 32px;
    /* Reset padding */
    justify-content: flex-start;
}

/* Slot 4 Layout (Side by Side) */
.slot-4-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    width: 100%;
}

.slot-4 .testi-photo {
    position: static;
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

/* Responsive */
@media (max-width: 992px) {
    .testi-grid {
        grid-template-columns: 1fr;
        /* Stack all */
        grid-template-rows: auto;
    }

    .slot-1,
    .slot-2,
    .slot-3,
    .slot-4 {
        grid-column: span 1;
        grid-row: auto;
        min-height: auto;
    }

    .slot-4-layout {
        flex-direction: column;
        text-align: left;
        align-items: flex-start;
    }

    .testi-header-row h2 {
        font-size: 32px;
    }
}

/* FAQ Section */
.faq-section {
    padding: 64px 57px;
    background: #FFFFFF;
    width: 100%;
    margin: 0 auto;
}

.faq-container {
    max-width: 1440px;
    /* Full width container */
    margin: 0 auto;
}

.faq-layout {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

@media (max-width: 992px) {
    .faq-layout {
        flex-direction: column;
        gap: 30px;
    }

    .faq-left,
    .faq-right {
        width: 100%;
    }

    .faq-left h2 {
        text-align: center;
        margin-bottom: 20px;
    }
}

/* Left Col */
.faq-left {
    width: 307px;
    flex-shrink: 0;
}

.faq-left h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.17;
    color: #180E36;
    margin: 0;
}

/* Right Col */
.faq-right {
    width: 867px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Gap handled by padding/margin inside items */
}

/* Accordion Item */
.faq-item {
    width: 100%;
    margin-bottom: 32px;
}

.faq-question {
    list-style: none;
    /* Remove default marker */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 32px;
    /* Space between Q and A (or separator) */
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    color: #180E36;
    margin: 0;
    max-width: 90%;
}

/* Custom Arrow Icon - Simplified using Border trick to avoid external asset dependency or complex SVG escaping issues if needed, or stick to provided SVG data URI if confident */
.faq-icon {
    width: 12px;
    height: 12px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    margin-top: -10px;
    /* Slight alignment tweak */
}

details[open] .faq-icon {
    transform: rotate(225deg);
    /* Flip up */
    margin-top: 5px;
}

/* Answer */
.faq-answer {
    padding-bottom: 32px;
}

.faq-answer p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.56;
    color: #180E36;
    color: #180E36;
    margin-bottom: 20px;
    /* Added spacing */
}

/* Separator */
.faq-separator {
    width: 100%;
    height: 0;
    border-top: 4px solid #3CBCD6;
    /* Light Blue */
    margin-bottom: 32px;
}



/* CTA Section */
.cta-section {
    width: 100%;
    margin-bottom: 0;
    overflow: hidden;
    /* Ensure gradient doesn't spill */
}

/* Background & Inset Shadow - Moved to line 433 */

/* Radial Gradient Overlay */
.cta-background::before {
    content: '';
    position: absolute;
    width: 100%;
    height: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    pointer-events: none;
}

.cta-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

/* Toggle Switch */
.cta-toggle-wrapper {
    display: flex;
    width: 392px;
    height: 44px;
    border: 1px solid #3CBCD6;
    border-radius: 32px;
    overflow: hidden;
    background: white;
}

.cta-toggle-wrapper button {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Active State (Cyan) */
.cta-toggle-active {
    background: #3CBCD6;
    color: #FFFFFF;
    border-radius: 32px 0 0 32px;
    /* Smooth corners */
}

/* Inactive State (White/Text Cyan) */
.cta-toggle-inactive {
    background: transparent;
    color: #3CBCD6;
}

/* Specific overrides for JS toggling when 'journalist' is active will be handled by classes or JS logic swapping styles. 
   Actually, better to use a common class and an 'active' class. But for now, let's stick to the structure and swap classes in JS.
*/

.cta-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 56px;
    color: #180E36;
    margin: 0;
    max-width: 874px;
}

.cta-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 16px 32px;
    width: 168px;
    height: 60px;
    background: #3CBCD6;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #FFFFFF;
    text-decoration: none;
    transition: background 0.3s ease;
}

.cta-btn:hover {
    background: #2aa8c2;
    color: #fff;
}

@media(max-width: 768px) {
    .cta-background {
        height: auto;
        padding: 60px 20px;
    }

    .cta-content h2 {
        font-size: 32px;
    }

    .cta-toggle-wrapper {
        width: 300px;
    }
}

/* Footer Section */
.site-footer {
    width: 100%;
    background: #180E36;
    padding: 64px 57px;
    color: #FFFFFF;
}

.footer-container {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 100px;
    /* Design says 232px but 100px is safer for responsive */
    flex-wrap: wrap;
}

.footer-left {
    width: 422px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.footer-logo img {
    height: 50px;
    width: auto;
}

.footer-desc {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #FFFFFF;
    margin: 0;
}

/* Footer Right Group */
.footer-menu-right {
    display: flex;
    flex-direction: row;
    gap: 48px;
    flex-wrap: wrap;
}

.footer-col {
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    /* Gap between Title and List */
}

/* Widget Titles */
.widget-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin: 0;
    color: #FFFFFF;
}

/* Links List */
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-col ul li a,
.footer-col a {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #FFFFFF;
    text-decoration: none;
    transition: opacity 0.3s;
}

.footer-col a:hover {
    opacity: 0.8;
}

/* Social Icons specific */
.social-icons {
    display: flex;
    gap: 16px;
}

.social-icons a {
    /* If using text placeholders like LinkedIn/X */
    font-weight: 700;
}

/* Responsive */
/* Responsive */
@media (max-width: 1200px) {
    .footer-container {
        gap: 60px;
    }
}

@media (max-width: 992px) {
    .footer-container {
        flex-direction: column;
        gap: 60px;
    }

    .footer-left {
        width: 100%;
    }

    .footer-menu-right {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 600px) {
    .footer-menu-right {
        flex-direction: column;
        gap: 40px;
    }
}

/* --- Mobile Specific Overrides (Figma Spec) --- */
@media (max-width: 768px) {

    /* Global Container Adjustments */
    .container,
    .hero-container,
    .mission-container,
    .works-container,
    .testi-header-row,
    .testi-grid,
    .faq-container,
    .cta-content,
    .footer-container {
        width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }

    /* Hero Section */
    .hero {
        padding-top: 128px;
        /* Figma: top 128px */
        text-align: center;
        height: auto;
        min-height: auto;
    }

    .hero-content {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        width: 100%;
    }

    .hero-toggle {
        margin: 0 auto;
        /* Center toggle */
        width: 100%;
        max-width: 370px;
    }

    .hero h1 {
        font-size: 36px !important;
        line-height: 48px !important;
        text-align: center;
        margin-bottom: 16px;
    }

    .hero p {
        font-size: 18px !important;
        line-height: 28px !important;
        text-align: center;
        max-width: 100%;
        margin-bottom: 24px;
    }

    .hero-btns {
        justify-content: center;
        width: 100%;
    }

    .social-proof {
        flex-direction: column;
        gap: 16px;
        margin-top: 32px;
    }

    .social-proof p {
        text-align: center;
        font-size: 16px;
    }

    .brand-logos {
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    /* Hero Image / Visual */
    .hero-visual-placeholder {
        width: 100%;
        height: auto;
        aspect-ratio: 370 / 188;
        /* Approximate from Figma */
        margin-top: 32px;
        background-size: cover;
        background-position: center;
    }

    /* Mission Section */
    .mission-section {
        padding: 32px 16px;
    }

    .mission-content-wrapper {
        flex-direction: column;
        gap: 16px;
    }

    .mission-left-col,
    .mission-text {
        width: 100%;
        flex-direction: row;
        /* Keep accent line next to text if possible, or stack? Spec says Col */
        align-items: flex-start;
    }

    .accent-line {
        display: none;
    }

    .mission-section h2 {
        font-size: 32px !important;
        line-height: 40px !important;
    }

    .mission-description {
        font-size: 18px !important;
        line-height: 28px !important;
        max-width: 100%;
    }

    /* How It Works */
    .how-it-works {
        padding: 32px 0;
    }

    .works-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 16px;
    }

    .works-header h2 {
        font-size: 34px !important;
        line-height: 40px;
        margin-bottom: 32px;
    }

    .works-toggle-wrapper {
        width: 100%;
        margin-bottom: 32px;
    }

    .works-content {
        flex-direction: column;
    }

    /* Steps & Nav */
    .works-nav {
        width: 100%;
        flex-direction: column;
        gap: 32px;
        padding: 0 16px;
    }

    .work-step {
        width: 100%;
        padding: 0 0 16px 0;
        border-bottom: 4px solid #F0F0F0;
        /* Default border */
        border-left: none;
        /* Remove desktop left border */
        opacity: 1;
        /* Show all steps on mobile usually, or keep toggle logic? Figma shows all. */
    }

    .work-step.active {
        border-bottom-color: #3CBCD6;
        border-left: none;
    }

    .work-step h3 {
        font-size: 26px !important;
        line-height: 32px;
    }

    .work-step p {
        font-size: 16px !important;
        line-height: 24px;
    }

    /* Allow horizontal scrolling for images if needed, or just stack them? 
       Figma implies "Product image" below text. 
       Currently existing JS toggles image. on Mobile, maybe show image below each step?
       For now, let's keep the image container visible and stacked at bottom or top.
    */
    .works-visual {
        width: 100%;
        height: auto;
        min-height: 200px;
        margin-top: 32px;
        padding: 0 16px;
    }

    .works-image-container {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 370 / 200;
        padding-bottom: 0;
    }

    /* Testimonials */
    .testi-header-row {
        text-align: left;
        padding-bottom: 32px;
    }

    .testi-header-row h2 {
        font-size: 34px !important;
        line-height: 40px;
    }

    .testi-header-row p {
        font-size: 19px !important;
    }

    .testi-grid {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    /* Reset Grid Slots for Mobile Stack */
    .testi-card {
        width: 100%;
        height: auto;
        min-height: auto;
    }

    .slot-1,
    .slot-2,
    .slot-3,
    .slot-4 {
        grid-column: auto;
        grid-row: auto;
    }

    /* Specific Order from Figma Spec:
       1. Reach (Slot 2)
       2. Newsquest (Slot 1 - assuming ID mapping) - Wait, let's check content.
       Figma Order: 
         - Reach
         - Newsquest
         - Bulldog (Third City - Slot 3?)
         - Folk (Slot 4)
    */
    .slot-2 {
        order: 1;
    }

    .slot-1 {
        order: 2;
    }

    .slot-3 {
        order: 3;
        padding-top: 32px;
    }

    /* Reset slot 3 padding */
    .slot-4 {
        order: 4;
    }

    .testi-quote {
        font-size: 19px;
        line-height: 28px;
    }

    /* FAQ */
    .faq-section {
        padding: 32px 16px;
    }

    .faq-layout {
        flex-direction: column;
        gap: 32px;
    }

    .faq-left h2 {
        font-size: 34px !important;
    }

    .faq-question h3 {
        font-size: 26px !important;
        line-height: 32px;
    }

    /* CTA Section */
    .cta-background {
        height: auto;
        padding: 60px 16px;
    }

    .cta-content h2 {
        font-size: 34px !important;
        line-height: 40px;
        text-align: center;
    }

    .cta-toggle-wrapper {
        width: 100%;
        max-width: 370px;
    }

    /* Footer */
    .footer-container {
        padding: 0 16px;
    }

    .footer-left {
        width: 100%;
    }

    .footer-menu-right {
        flex-direction: column;
        gap: 32px;
    }

    .footer-col {
        width: 100%;
    }
}

/* Footer Section Gradient */
.site-footer {
    background: linear-gradient(180deg, #180E36 0%, #0F0824 100%);
    padding: 80px 0 40px;
    color: #fff;
}

/* Newsquest BW Logic */
.slot-4 .testi-logo {
    filter: grayscale(100%);
    opacity: 0.8;
}

.border-synapse {
    border-color: var(--primary-color) !important;
}

/* ========================================
   CONTACT FORM 7 STYLING
   For green gradient "Get in Touch" sections
   ======================================== */

/* Form container */
.wpcf7 {
    width: 100%;
}

.wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Two column layout */
.form-field-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

@media (max-width: 600px) {
    .form-field-two {
        grid-template-columns: 1fr;
    }
}

/* Single column layout */
.form-field-one {
    width: 100%;
}

/* Labels - hide text, only show inputs */
.wpcf7-form label {
    display: block;
    width: 100%;
}

/* All text inputs, email, tel */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"] {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 30px;
    font-size: 15px;
    font-family: 'Inter', 'Poppins', sans-serif;
    background: #fff;
    color: #333;
    outline: none;
    transition: box-shadow 0.2s ease;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.wpcf7-form input::placeholder {
    color: #999;
}

/* Select dropdown */
.wpcf7-form select,
.wpcf7-form .wpcf7-select {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 30px;
    font-size: 15px;
    font-family: 'Inter', 'Poppins', sans-serif;
    background: #fff;
    color: #333;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    outline: none;
}

.wpcf7-form select:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* Textarea */
.wpcf7-form textarea,
.wpcf7-form .wpcf7-textarea {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 20px;
    font-size: 15px;
    font-family: 'Inter', 'Poppins', sans-serif;
    background: #fff;
    color: #333;
    min-height: 120px;
    resize: vertical;
    outline: none;
}

.wpcf7-form textarea:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.wpcf7-form textarea::placeholder {
    color: #999;
}

/* Checkbox styling */
.fm-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    margin-top: 5px;
}

.wpcf7-form .wpcf7-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wpcf7-form .wpcf7-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #fff;
    cursor: pointer;
}

.wpcf7-form .wpcf7-checkbox .wpcf7-list-item-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.4;
}

/* reCAPTCHA */
.wpcf7-form .wpcf7-recaptcha {
    margin: 10px 0;
}

.wpcf7-form .wpcf7-recaptcha[data-align="center"] {
    display: flex;
    justify-content: center;
}

/* Submit button container */
.form-submit-btn {
    margin-top: 10px;
}

/* Submit button */
.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 14px 40px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    width: fit-content;
    transition: all 0.2s ease;
    font-family: 'Inter', 'Poppins', sans-serif;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover {
    background: #fff;
    color: #1a1a2e;
}

/* Validation messages */
.wpcf7-form .wpcf7-not-valid-tip {
    color: #ffcccc;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

.wpcf7-form .wpcf7-response-output {
    border: none !important;
    padding: 15px 20px;
    margin: 15px 0 0 0;
    border-radius: 10px;
    font-size: 14px;
}

.wpcf7-form.sent .wpcf7-response-output {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
    background: rgba(255, 100, 100, 0.2);
    color: #ffcccc;
}

/* Spinner */
.wpcf7-form .wpcf7-spinner {
    display: inline-block;
    margin-left: 10px;
}

/* Privacy note styling (if added manually) */
.cs-privacy-note,
.careers-privacy-note,
.contact-privacy-note {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 15px;
}

.cs-privacy-note a,
.careers-privacy-note a,
.contact-privacy-note a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}

/* ========================================
   ROLE-BASED CONTENT VISIBILITY
   Use body.role-pr or body.role-journalist
   ======================================== */

/* Hide content based on role */
body.role-journalist .pr-only {
    display: none !important;
}

body.role-pr .journalist-only {
    display: none !important;
}

/* Show content based on role */
body.role-journalist .journalist-only {
    display: block;
}

body.role-pr .pr-only {
    display: block;
}

/* Default state (before JS loads) - show PR content */
.journalist-only {
    display: none;
}

.pr-only {
    display: block;
}

/* --- Fixes & Refinements (Re-applied) --- */
.btn-sm {
    box-shadow: none !important;
}

.brand-logos img[src*="lad"],
.brand-logos img[src*="LAD"] {
    height: 50px;
}

.brand-logos img[src*="stylist"],
.brand-logos img[src*="Stylist"] {
    height: 26px;
}

.mission-text,
.mission-text h2 {
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 992px) {

    .mission-text,
    .mission-text h2 {
        max-width: 100%;
    }
}

.testi-photo.round {
    border-radius: 0 50% 50% 50% !important;
}

.testi-person span {
    color: #6B7280 !important;
    opacity: 1 !important;
    font-weight: 500;
}

.slot-4 .testi-logo {
    filter: none !important;
    opacity: 1 !important;
}

.cta-toggle-wrapper {
    background: transparent !important;
}

.faq-answer p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #4B5563;
}

/* --- Slack Section (Custom) --- */
.slack-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, #E0F7FA 0%, #FFFFFF 100%);
    border-radius: 20px;
    padding: 60px;
    gap: 40px;
    position: relative;
    overflow: visible;
}

.slack-text {
    flex: 1;
    max-width: 450px;
    padding-right: 20px;
}

.slack-text h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.1;
    color: #180E36;
    margin-bottom: 24px;
    text-align: left;
}

.slack-text p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #4B5563;
    line-height: 1.5;
    text-align: left;
}

.slack-cards-grid {
    flex: 1.5;
    position: relative;
    height: 480px;
    width: 100%;
}

.slack-card {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    position: absolute;
    width: 320px;
    font-family: 'Inter', sans-serif;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.app-icon {
    width: 36px;
    height: 36px;
    background: #180E36;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
}

.app-name {
    font-weight: 700;
    font-size: 15px;
    color: #111;
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-badge {
    background: #E5E7EB;
    color: #6B7280;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.card-body {
    font-size: 15px;
    color: #111;
    margin-bottom: 20px;
    line-height: 1.4;
}

.card-msg {
    font-weight: 600;
    margin-top: 8px;
    display: block;
}

.card-actions {
    display: flex;
    gap: 10px;
}

.slack-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}

.slack-btn.primary {
    background: #007a5a;
    color: #fff;
    border: 1px solid #007a5a;
}

.slack-btn.primary:hover {
    background: #006c4f;
}

.slack-btn.outline {
    background: #fff;
    color: #111;
    border: 1px solid #ddd;
}

.slack-btn.outline:hover {
    border-color: #bbb;
    background: #f9f9f9;
}

.card-jack {
    top: 40px;
    left: 0;
    width: 300px;
    z-index: 2;
}

.card-sarah {
    top: 0;
    right: 0;
    width: 360px;
    z-index: 1;
}

.card-deanna {
    bottom: 20px;
    left: 50%;
    transform: translateX(-10%);
    width: 340px;
    z-index: 3;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

@media (max-width: 992px) {
    .slack-container {
        flex-direction: column;
        padding: 40px 24px;
        text-align: center;
        height: auto;
    }

    .slack-text h2 {
        font-size: 32px;
        text-align: center;
    }

    .slack-text p {
        text-align: center;
        margin-bottom: 40px;
    }

    .slack-cards-grid {
        position: static;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 24px;
        align-items: center;
    }

    .slack-card {
        position: relative;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100%;
        max-width: 360px;
    }
}