/* Basic Reset & Setup */
body,
html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* This is a helper to make the footer "stick" to the bottom */
.main-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
    /* This makes the content area push the footer down */
    padding: 2rem 0;
    /* Add some space to the top/bottom */
}

/* --- Header & Nav --- */
.main-header {
    background: #ffffff;
    border-bottom: 1px solid #ddd;
    padding: 1rem 0;
}

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

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #111;
    text-decoration: none;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-nav li {
    margin-left: 1.5rem;
    position: relative;
    /* For the dropdown */
}

.main-nav a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

/* --- Footer --- */
.main-footer {
    background: #222;
    color: #aaa;
    padding: 2rem 0;
}

.footer-bottom {
    text-align: center;
    margin-top: 1rem;
    border-top: 1px solid #444;
    padding-top: 1rem;
}


/*
==================================================
  Section: Hero
==================================================
*/

.hero {
    background-color: #1a202c;
    /* A deep, professional "dark mode" blue/grey */
    color: #ffffff;
    padding: 6rem 0;
    /* Lots of vertical space */
    text-align: center;
}

.hero .container {
    max-width: 900px;
    /* Constrain the width for readability */
}

.hero-title {
    font-size: 3.5rem;
    /* Large, bold, and confident */
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1.5rem 0;
    color: #ffffff;
}

.hero-subtitle {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #e2e8f0;
    /* A slightly softer white */
    margin: 0 0 2.5rem 0;
}

.hero-subtitle strong {
    color: #63b3ed;
    /* A "tech blue" to highlight key terms */
    font-weight: 600;
}

/* === Button Styles === */

/* This group holds the two buttons */
.hero-cta-group {
    display: flex;
    justify-content: center;
    gap: 1rem;
    /* Space between the buttons */
    flex-wrap: wrap;
    /* Lets them stack on small screens */
}

/* A general style for all buttons */
.button {
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
    /* For hover effects */
}

/* Primary Button (Solid) */
.button-primary {
    background-color: #4299e1;
    /* A strong, clear blue */
    color: #ffffff;
}

.button-primary:hover {
    background-color: #3182ce;
    /* A slightly darker blue on hover */
    transform: translateY(-2px);
    /* A slight "lift" effect */
}

.button-secondary {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
}

/* Fix for secondary buttons on a *light* background */
.solution .button-secondary,
.final-cta .button-secondary {
    color: #4299e1;
    /* Primary blue text */
    border: 2px solid #4299e1;
    /* Primary blue border */
}

.solution .button-secondary:hover,
.final-cta .button-secondary:hover {
    background-color: #4299e1;
    /* Fill with blue */
    color: #ffffff;
    /* White text */
}


/* ========================================================
  START: NEW FIX 
  ========================================================
  This is the new class for light backgrounds
*/
.button-outline {
    background-color: transparent;
    color: #4299e1;
    /* Primary blue text */
    border: 2px solid #4299e1;
    /* Primary blue border */
}

.button-outline:hover {
    background-color: #4299e1;
    /* Fill with blue */
    color: #ffffff;
    /* White text */
    transform: translateY(-2px);
}

/* ========================================================
  END: NEW FIX
  ========================================================
*/


.button-secondary:hover {
    background-color: #ffffff;
    color: #1a202c;
    /* Invert colors on hover */
    transform: translateY(-2px);
}

/*
==================================================
  Section: Stalemate
==================================================
*/
.stalemate {
    background-color: #ffffff;
    /* A clean white background */
    padding: 5rem 0;
    /* Add space above and below */
    border-bottom: 1px solid #e2e8f0;
    /* A light separator line */
}

/* This is the two-column grid layout */
.stalemate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two equal columns */
    gap: 2.5rem;
    /* Space between the columns */
}

/* This is the style for each "card" in the grid */
.stalemate-card {
    background-color: #f7fafc;
    /* A very light grey, almost white */
    padding: 2.5rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* A subtle shadow */
}

.stalemate-title {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1a202c;
    /* Dark text */
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.stalemate-card p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4a5568;
    /* A softer, professional grey text */
    margin-bottom: 1.5rem;
}

/* Specific styling for the list in the COO card */
.stalemate-card ul {
    list-style: none;
    /* Remove default bullets */
    padding-left: 0;
    margin: 0;
}

.stalemate-card li {
    font-size: 1.1rem;
    color: #4a5568;
    position: relative;
    padding-left: 2rem;
    /* Make space for a custom icon */
    margin-bottom: 1rem;
}

/* Custom "bullet" for the list */
.stalemate-card li::before {
    content: '→';
    /* A simple, clean arrow */
    position: absolute;
    left: 0;
    top: 0;
    color: #c53030;
    /* A "danger" red to imply a problem */
    font-weight: bold;
}



/*
==================================================
  Section: Solution
==================================================
*/
.solution {
    background-color: #f7fafc;
    /* Use the light grey from the stalemate cards as the BG */
    padding: 5rem 0;
}

/* A reusable style for section headers */
.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3.5rem auto;
    /* Center it and add space below */
}

.section-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #1a202c;
    margin-top: 0;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #4a5568;
    line-height: 1.7;
}

/* Solution Grid: very similar to the stalemate grid */
.solution-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

/* Solution Card: A "stronger" card style */
.solution-card {
    background-color: #ffffff;
    /* White card on a grey BG */
    padding: 2.5rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.solution-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a202c;
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.solution-subtitle {
    font-size: 1rem;
    font-weight: 500;
    color: #4299e1;
    /* Use the blue to highlight the "benefit" */
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.solution-card p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 1.5rem;
}

.solution-list-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Specific styling for the list in the solution card */
.solution-card ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.solution-card li {
    font-size: 1rem;
    color: #4a5568;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1.25rem;
}

/* Custom "bullet" for the list - a green checkmark */
.solution-card li::before {
    content: '✓';
    /* A checkmark */
    position: absolute;
    left: 0;
    top: 2px;
    color: #38a169;
    /* A "success" green */
    font-weight: bold;
    font-size: 1.2rem;
}


/*
==================================================
  Section: Trust Verification
==================================================
*/
.trust-verification {
    background-color: #ffffff;
    /* White background */
    padding: 5rem 0;
    border-top: 1px solid #e2e8f0;
    /* Separator line */
}

/* We re-use the .section-header styles from the last step */

.trust-verification .section-subtitle strong {
    color: #1a202c;
    /* Make "Secure, not Secretive" bold and dark */
}

.trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

.trust-card {
    /* We add a border-top instead of a full box */
    border-top: 4px solid #4299e1;
    /* Use the primary blue color */
    padding-top: 2rem;
}

.trust-step-number {
    display: inline-block;
    background-color: #ebf4ff;
    /* A very light blue */
    color: #3182ce;
    /* A strong blue */
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    /* Pill shape */
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.trust-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a202c;
    margin-top: 0;
    margin-bottom: 1rem;
}

.trust-card p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 0;
}

/*
==================================================
  Section: Final CTA
==================================================
*/
.final-cta {
    background-color: #1a202c;
    /* Same as the hero */
    color: #ffffff;
    padding: 6rem 0;
    text-align: center;
}

.final-cta .container {
    max-width: 900px;
    /* Match the hero's container */
}

.final-cta-title {
    font-size: 2.5rem;
    /* Slightly smaller than hero title */
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 1.5rem 0;
}

.final-cta-subtitle {
    font-size: 1.2rem;
    line-height: 1.7;
    color: #e2e8f0;
    margin: 0 0 2.5rem 0;
}

.final-cta-subtitle strong {
    color: #63b3ed;
    /* Tech blue for emphasis */
}

/* We are re-using .hero-cta-group, .button, .button-primary,
   and .button-secondary, so no new button CSS is needed! */



/*
==================================================
  Page: About Us
==================================================
*/

/* --- Reusable Page Header --- */
.page-header {
    background-color: #1a202c;
    /* Dark background, same as hero */
    color: #ffffff;
    padding: 4rem 0;
    text-align: center;
}

.page-title {
    font-size: 3rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.page-subtitle {
    font-size: 1.25rem;
    color: #e2e8f0;
    margin: 0;
}

/* --- Reusable Narrow Container --- */
.container-narrow {
    max-width: 800px;
    /* For text-heavy sections */
    margin: 0 auto;
}

/* --- About Purpose Section --- */
.about-purpose {
    padding: 5rem 0;
    background: #ffffff;
}

.about-intro-text {
    font-size: 1.25rem;
    /* Make the intro text larger */
    line-height: 1.7;
    color: #4a5568;
}

.about-section-title {
    font-size: 2rem;
    font-weight: 600;
    color: #1a202c;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

.about-purpose p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 1.5rem;
}

.about-purpose p strong {
    color: #1a202c;
}


/* --- About Principles Section --- */
.about-principles {
    padding: 5rem 0;
    background-color: #f7fafc;
    /* Light grey background */
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.principles-grid {
    display: grid;
    /* 2 columns on desktop, 1 on mobile */
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.principle-card {
    background: #ffffff;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.principle-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin-top: 0;
    margin-bottom: 1rem;
}

.principle-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 0;
}

/* --- About Vision (CTA) Section --- */
.about-vision-cta {
    padding: 5rem 0;
    background: #ffffff;
}

.about-vision-cta p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4a5568;
}


/*
==================================================
  Page: Solutions
==================================================
*/
.solutions-problem {
    background: #fff;
    padding: 4rem 0;
}

/* We're re-using the .stalemate-card li styles, 
   but we need a wrapper class for the <ul> */
.stalemate-card-list {
    list-style: none;
    /* Remove default bullets */
    padding-left: 0;
    margin-top: 2rem;
}

.stalemate-card-list li {
    font-size: 1.1rem;
    color: #4a5568;
    position: relative;
    padding-left: 2rem;
    /* Make space for a custom icon */
    margin-bottom: 1rem;
}

.stalemate-card-list li::before {
    content: '→';
    /* A simple, clean arrow */
    position: absolute;
    left: 0;
    top: 0;
    color: #c53030;
    /* A "danger" red to imply a problem */
    font-weight: bold;
}


.solutions-pillars {
    background-color: #f7fafc;
    /* Light grey background */
    padding: 5rem 0;
    border-top: 1px solid #e2e8f0;
}

/* Re-using .solution-grid and .solution-card */

.solutions-ciso-blocker {
    background: #fff;
    padding: 5rem 0;
    border-top: 1px solid #e2e8f0;
}

/* Re-using .final-cta */


/*
==================================================
  Page: Product
==================================================
*/
.product-pillars {
    background: #fff;
    padding: 5rem 0;
}

.product-grid {
    display: grid;
    /* 3 columns on desktop */
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}

.product-card {
    background-color: #f7fafc;
    /* Light grey card */
    padding: 2.5rem 2rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.product-pillar-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: #4299e1;
    /* Primary blue */
    margin-bottom: 1rem;
}

.product-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.product-subtitle {
    font-size: 1rem;
    font-weight: 500;
    color: #718096;
    /* Medium grey */
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.product-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 0;
}

.product-engage {
    background-color: #f7fafc;
    /* Light grey background */
    padding: 5rem 0;
    border-top: 1px solid #e2e8f0;
}

/*
==================================================
  Page: Pricing
==================================================
*/
.pricing-intro {
    background: #fff;
    padding: 3rem 0;
}

.pricing-table-section {
    background: #fff;
    padding: 2rem 0 5rem 0;
}

/* Wrapper to allow horizontal scroll on mobile */
.pricing-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.pricing-table {
    width: 100%;
    min-width: 800px;
    /* Force scroll on small screens */
    border-collapse: collapse;
    /* Clean, modern look */
    font-size: 1rem;
}

.pricing-table th,
.pricing-table td {
    padding: 1.25rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
    line-height: 1.6;
}

.pricing-table th {
    background-color: #f7fafc;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4a5568;
}

/* Header for the two tiers */
.pricing-table th:nth-child(2),
.pricing-table th:nth-child(3) {
    font-size: 1.1rem;
    text-transform: none;
    letter-spacing: 0;
    color: #1a202c;
    background-color: #ebf4ff;
    /* Light blue */
    border-bottom: 3px solid #4299e1;
    /* Blue accent */
}

.pricing-table td:nth-child(1) {
    font-weight: 600;
    color: #1a202c;
}

.pricing-table td:nth-child(2),
.pricing-table td:nth-child(3) {
    color: #4a5568;
    vertical-align: top;
}

/* Style for cells with a "check" or included feature */
.pricing-table td.cell-check {
    color: #1a202c;
}

.pricing-table td ul {
    list-style: none;
    padding-left: 0;
    margin: 0.5rem 0 0 0;
}

.pricing-table td ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.pricing-table td ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #38a169;
    /* Green check */
    font-weight: bold;
}

.pricing-methodology {
    background: #f7fafc;
    /* Light grey */
    padding: 5rem 0;
    border-top: 1px solid #e2e8f0;
}

.pricing-methodology ul {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5rem;
}

.pricing-methodology li {
    font-size: 1.1rem;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    color: #4a5568;
}

.pricing-methodology li::before {
    content: '→';
    position: absolute;
    left: 0;
    top: 0;
    color: #4299e1;
    /* Blue arrow */
    font-weight: bold;
}

.pricing-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin-top: 3rem;
    margin-bottom: 1rem;
}



/*
==================================================
  Page: Careers
==================================================
*/
.careers-mission {
    background: #fff;
    padding: 5rem 0;
}

/* Re-using .about-section-title, .about-intro-text */

.careers-philosophy {
    background: #f7fafc;
    padding: 5rem 0;
    border-top: 1px solid #e2e8f0;
}

/* Re-using .product-grid, .product-card */

.careers-hiring {
    background: #fff;
    padding: 5rem 0;
    border-top: 1px solid #e2e8f0;
}

.role-list {
    margin-top: 2.5rem;
}

.role-item {
    border-bottom: 1px solid #e2e8f0;
    padding: 2rem 0;
}

.role-item:first-child {
    padding-top: 0;
}

.role-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.role-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin-top: 0;
    margin-bottom: 1rem;
}

.role-item p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 0;
}


/*
==================================================
  Page: Contact
==================================================
*/
.contact-intro {
    background: #fff;
    padding: 3rem 0;
}

.contact-paths {
    background: #f7fafc;
    /* Light grey BG */
    padding: 5rem 0;
    border-top: 1px solid #e2e8f0;
}

/* We are reusing the .solution-grid and .solution-card */

.path-number {
    display: inline-block;
    background-color: #ebf4ff;
    /* A very light blue */
    color: #3182ce;
    /* A strong blue */
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    /* Pill shape */
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.path-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a202c;
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.path-subtitle {
    font-size: 1rem;
    font-weight: 500;
    color: #718096;
    /* Medium grey */
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* Make sure the card grows to fit content */
.solution-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.solution-card p {
    flex-grow: 1;
    /* Pushes the button to the bottom */
}


/*
==================================================
  Page: Blog Listing (blog.php)
==================================================
*/
.posts-list-section {
    background: #fff;
    padding: 4rem 0;
}

.post-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    /* For radius */
}

.post-card-header {
    padding: 2rem 2.5rem 0 2.5rem;
}

.post-card-tags {
    margin-bottom: 1rem;
}

.post-card-tags span {
    display: inline-block;
    background-color: #ebf4ff;
    color: #3182ce;
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    font-size: 0.875rem;
    font-weight: 500;
}

.post-card-title {
    font-size: 2rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0;
}

.post-card-title a {
    text-decoration: none;
    color: inherit;
}

.post-card-title a:hover {
    color: #4299e1;
}

.post-card-excerpt {
    padding: 1.5rem 2.5rem;
    font-size: 1.1rem;
    color: #4a5568;
}

.post-card-footer {
    background: #f7fafc;
    padding: 1.5rem 2.5rem;
    border-top: 1px solid #e2e8f0;
}


/*
==================================================
  Page: Single Post (single-post.php)
==================================================
*/
.post-header {
    background: #f7fafc;
    padding: 4rem 0;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}

.post-header-tags {
    margin-bottom: 1.5rem;
}

.post-header-tags a {
    display: inline-block;
    background-color: #e2e8f0;
    color: #4a5568;
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    margin: 0 0.25rem;
}

.post-header-tags a:hover {
    background-color: #4299e1;
    color: #fff;
}

.post-title {
    font-size: 3rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 1rem 0;
}

.post-subtitle {
    font-size: 1.25rem;
    color: #4a5568;
    line-height: 1.7;
    margin: 0;
}

.post-content-section {
    background: #fff;
    padding: 4rem 0;
}

/* This is the main content area for the post */
.post-content {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #333;
}

.post-content p {
    margin-bottom: 1.5rem;
}

.post-content h3 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a202c;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

.post-content strong {
    color: #1a202c;
    font-weight: 600;
}

.post-content hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 3rem 0;
}

.post-content ul,
.post-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.post-content li {
    margin-bottom: 0.75rem;
}

.post-content .post-cta {
    text-align: center;
    background: #f7fafc;
    padding: 2.5rem;
    margin-top: 3rem;
    border-radius: 8px;
}


/*
==================================================
  Page: White Paper Listing (whitepapers.php)
==================================================
*/
/* We are re-using all the .post-card styles, so no new CSS is needed! */


/*
==================================================
  Page: Single White Paper (single-whitepaper.php)
==================================================
*/
.whitepaper-content-section {
    background: #fff;
    padding: 4rem 0;
}

/* 2-column layout: 2/3 content, 1/3 form */
.whitepaper-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
}

.whitepaper-content h2 {
    font-size: 2rem;
    font-weight: 600;
    color: #1a202c;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.whitepaper-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 1.5rem;
}

.whitepaper-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}

.whitepaper-content li {
    font-size: 1.1rem;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    color: #4a5568;
}

.whitepaper-content li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 2px;
    color: #38a169;
    font-weight: bold;
}

.whitepaper-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

/* --- Sidebar Form --- */
.whitepaper-sidebar {
    /* "Sticky" form that follows you as you scroll */
    position: sticky;
    top: 2rem;
    align-self: start;
}

.whitepaper-form-box {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 2rem;
}

.whitepaper-form-box h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin-top: 0;
    margin-bottom: 1rem;
}

.whitepaper-form-box p {
    font-size: 1rem;
    color: #4a5568;
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4a5568;
    margin-bottom: 0.5rem;
}

.form-group input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-sizing: border-box;
    /* Important for 100% width */
}

/* We are re-using .button.button-primary */

/*
==================================================
  Footer Links (REVISED)
==================================================
*/
.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* Logo on left, group on right */
    align-items: center;
    gap: 2rem;
}

.footer-logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
}

/* NEW: Styles for the link grouping div */
.footer-nav-group {
    display: flex;
    flex-wrap: wrap;
    /* Allow links to stack if needed */
    align-items: center;
    gap: 1.5rem 3rem;
    /* 1.5rem row-gap, 3rem column-gap */
}

.footer-links a {
    color: #aaa;
    text-decoration: none;
    margin-left: 1.5rem;
    font-size: 0.9rem;
}

.footer-links a:first-child {
    margin-left: 0;
    /* Remove margin from first link */
}

.footer-links a:hover {
    color: #fff;
}

.footer-social a {
    color: #aaa;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    margin-left: 1.5rem;
    transition: color 0.3s ease;
}

.footer-social a:first-child {
    margin-left: 0;
    /* Remove margin from first link */
}

.footer-social a:hover {
    color: #4299e1;
}

/*
==================================================
  Page: Form Pages (review.php, assessment.php)
==================================================
*/
.form-page-section {
    background: #fff;
    padding: 5rem 0;
}

.form-header {
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 2rem;
    margin-bottom: 2.5rem;
}

.form-header h2 {
    font-size: 2.5rem;
    font-weight: 600;
    color: #1a202c;
    margin-top: 0;
    margin-bottom: 1rem;
}

.form-header p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 0;
}

/* We re-use .form-group and input styles from the whitepaper form */
/* We just need to add styles for checkboxes */

.checkbox-group {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 1.5rem;
}

.checkbox-group label {
    display: block;
    position: relative;
    padding-left: 2rem;
    font-size: 1rem;
    color: #1a202c;
    margin-bottom: 1.25rem;
    cursor: pointer;
}

.checkbox-group label:last-child {
    margin-bottom: 0;
}

.checkbox-group input {
    position: absolute;
    left: 0;
    top: 3px;
    height: 1.15rem;
    width: 1.15rem;
}

.form-submit-group {
    text-align: left;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
}

/* --- Form Messages --- */
.form-success-message {
    text-align: center;
    padding: 3rem;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.form-success-message h2 {
    font-size: 2rem;
    color: #1a202c;
    margin-top: 0;
    margin-bottom: 1rem;
}

.form-success-message p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 2rem;
}

.form-error-message {
    text-align: center;
    padding: 1.5rem;
    background: #fff5f5;
    border: 1px solid #c53030;
    border-radius: 6px;
    margin-bottom: 2rem;
}

.form-error-message p {
    color: #c53030;
    font-weight: 500;
    margin: 0;
}


/*
==================================================
  Text Emphasis Utilities (No Quotes)
==================================================
*/

/* For "Problem" terms (Dirty Data, Black Boxes) */
/* Makes them stand out as concepts, but looks professional */
.text-emphasis {
    color: #2d3748; /* Darker grey than body text */
    font-weight: 600;
    font-style: italic;
}

/* OVERRIDE: Text Emphasis on Dark Backgrounds 
   This fixes the readability issue in the Hero and Final CTA sections.
   It changes the color from Dark Grey to a Light, Muted Grey.
*/
.hero .text-emphasis,
.final-cta .text-emphasis,
.page-header .text-emphasis {   /* <-- Added this line */
    color: #cbd5e0; 
}

/* For Product Names (Kypspr Enterprise, API Sandbox) */
/* Links them visually to your brand color */
.text-brand {
    color: #4299e1; /* Your primary blue */
    font-weight: 600;
}

/* For the CISO Veto ("no") */
.text-danger {
    color: #e53e3e; /* Red */
    font-weight: 700;
    text-transform: uppercase; /* Make it "NO" */
}


/*
==================================================
  Navigation Dropdowns (Desktop Only)
==================================================
*/

/* This needs to be global for all screen sizes */
.main-nav li {
    /* We already had this, it's the parent container */
    position: relative;
}

/* Only apply hover logic to screens wider than 768px */
@media (min-width: 769px) {

    .main-nav .dropdown-menu {
        display: none;
        /* 1. Hide the dropdown by default */
        position: absolute;
        /* 2. Take it out of the normal flow */
        left: 0;
        top: 100%;
        /* 3. Position it right below the parent li */
        background: #ffffff;
        padding: 0.5rem 0;
        border-radius: 6px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        min-width: 220px;
        /* Give it a nice width */
        z-index: 100;
        /* Ensure it's on top of other content */
    }

    /* 4. This is the magic: When you hover the parent, show the menu */
    .main-nav li:hover .dropdown-menu {
        display: block;
    }

    .main-nav .dropdown-menu li {
        margin: 0;
        /* Reset margins */
        display: block;
        /* Make links stack vertically */
    }

    .main-nav .dropdown-menu li a {
        display: block;
        padding: 0.75rem 1.5rem;
        color: #333;
        font-size: 0.95rem;
    }

    .main-nav .dropdown-menu li a:hover {
        background-color: #f7fafc;
        /* Add a light hover effect */
        color: #4299e1;
        /* Use our primary blue */
    }

}

/* <-- Don't forget this closing bracket! */


/*
==================================================
  Page: Trust & Security
==================================================
*/
.trust-feature {
    background: #fff;
    padding: 5rem 0;
}

.trust-pillars {
    background: #fff;
    padding: 5rem 0;
    border-top: 1px solid #e2e8f0;
}

/* We need a simple list for the "Roadmap" card */
.solution-card-list {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5rem;
}

.solution-card-list li {
    font-size: 1rem;
    color: #4a5568;
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.75rem;
}

.solution-card-list li::before {
    content: '✓';
    /* A checkmark */
    position: absolute;
    left: 0;
    top: 2px;
    color: #38a169;
    /* A "success" green */
    font-weight: bold;
    font-size: 1.2rem;
}



/*
==================================================
  Mobile Navigation Toggle (Hamburger)
==================================================
*/

/* A helper class for screen-readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.mobile-nav-toggle {
    display: none;
    /* Hide on desktop */
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    z-index: 1001;
    /* Must be on top */
}

.hamburger-box {
    width: 30px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -1px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 30px;
    height: 3px;
    background-color: #1a202c;
    /* Dark color for the bars */
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -10px;
}

.hamburger-inner::after {
    bottom: -10px;
}


/* --- "X" Animation --- */
/* When the button has the "is-active" class, animate to an "X" */

.mobile-nav-toggle.is-active .hamburger-inner {
    transform: rotate(45deg);
}

.mobile-nav-toggle.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-90deg);
}

.mobile-nav-toggle.is-active .hamburger-inner::after {
    bottom: 0;
    opacity: 0;
    /* Hide the bottom bar */
}

/*
==================================================
  Mobile Nav Dropdown Toggle Button
==================================================
*/
.dropdown-toggle {
    display: none;
    /* Hide on desktop */
    position: absolute;
    top: 0;
    right: 0;
    height: 4.5rem;
    /* Match the height of the parent link */
    width: 4.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1002;
}

/* Create the "+" icon */
.dropdown-toggle::before,
.dropdown-toggle::after {
    content: '';
    display: block;
    position: absolute;
    background-color: #718096;
    /* A grey color */
    width: 16px;
    height: 3px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease;
}

/* This is the vertical bar of the "+" */
.dropdown-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* When active (open), turn the "+" into a "-" */
.dropdown-toggle.is-active::after {
    transform: translate(-50%, -50%) rotate(0deg);
}




/*
==================================================
  Responsive Design: Mobile (Full Update)
==================================================
*/
@media (max-width: 768px) {

    /* --- Show the hamburger button --- */
    .mobile-nav-toggle {
        display: block;
    }

    /* --- Hide the desktop nav items --- */
    .main-nav ul {
        display: none;
        /* Hide the <ul> by default */
    }

    /* --- Style the mobile menu container --- */
    .main-nav {
        /* Hide it off-screen by default */
        position: fixed;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100vh;
        background: #ffffff;
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
        padding-top: 6rem;
    }

    /* --- This is the "Open" state, toggled by JS --- */
    .main-nav.nav-open {
        transform: translateX(-100%);
        /* Slide it in */
    }

    .main-nav.nav-open ul {
        display: block;
        /* Show the <ul> */
        text-align: left;
    }

    .main-nav.nav-open li {
        margin: 0;
        width: 100%;
    }

    .main-nav.nav-open li a {
        display: block;
        padding: 1.25rem 1.5rem;
        font-size: 1.5rem;
        /* Big, clear links */
        color: #1a202c;
    }

    .main-nav.nav-open .nav-button {
        border: none;
        /* Make button look like a link */
    }

    /* --- Handle dropdowns in mobile menu --- */
    /* --- Handle dropdowns in mobile menu --- */

    /* This is the parent <li> */
    .main-nav.nav-open .nav-dropdown {
        position: relative;
        /* So we can position the button */
        border-bottom: 1px solid #e2e8f0;
    }

    /* Make the main link take up space */
    .main-nav.nav-open .nav-dropdown>a {
        padding-right: 4.5rem;
        /* Make space for the button */
    }

    /* Show the toggle button */
    .main-nav.nav-open .dropdown-toggle {
        display: block;
    }

    /* HIDE the submenu by default */
    .main-nav.nav-open .dropdown-menu {
        display: none;
        position: static;
        box-shadow: none;
        border: none;
        min-width: 0;
        padding-left: 0;
        /* No indent */
        background: #f7fafc;
        /* Light grey BG */
        border-top: 1px solid #e2e8f0;
    }

    /* This is the "OPEN" state, toggled by JS */
    .main-nav.nav-open .dropdown-menu.submenu-open {
        display: block;
    }

    .main-nav.nav-open .dropdown-menu li {
        border-bottom: 1px solid #e2e8f0;
    }

    .main-nav.nav-open .dropdown-menu li:last-child {
        border-bottom: none;
    }

    .main-nav.nav-open .dropdown-menu li a {
        font-size: 1.1rem;
        /* Smaller */
        color: #4a5568;
        padding: 0.75rem 1.5rem;
        /* Give it some padding */
    }

    .main-nav.nav-open .dropdown-menu li a {
        font-size: 1.25rem;
        /* Slightly smaller */
        color: #4a5568;
        padding: 0.75rem 1rem;
    }


    /* === Other Mobile Styles === */
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

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

    .hero {
        padding: 4rem 0;
    }

    .stalemate {
        padding: 3rem 0;
    }

    .stalemate-card {
        padding: 1.5rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 1.1rem;
    }

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

    .solution {
        padding: 3rem 0;
    }

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

    .trust-verification {
        padding: 3rem 0;
    }

    .trust-card {
        padding-top: 1.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .trust-title {
        font-size: 1.5rem;
    }

    .final-cta {
        padding: 4rem 0;
    }

    .final-cta-title {
        font-size: 2rem;
    }

    .page-title {
        font-size: 2.25rem;
        line-height: 1.2;
    }

    .about-purpose,
    .about-principles,
    .about-vision-cta {
        padding: 3rem 0;
    }

    .about-intro-text {
        font-size: 1.15rem;
    }

    .about-section-title {
        font-size: 1.75rem;
    }

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

    .solutions-problem,
    .solutions-pillars,
    .solutions-ciso-blocker {
        padding: 3rem 0;
    }

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

    .product-pillars,
    .product-engage {
        padding: 3rem 0;
    }

    /* ==================================================
      START: CAREERS PAGE MOBILE STYLES
      ==================================================
      Add this new block
    */
    .careers-mission,
    .careers-philosophy,
    .careers-hiring {
        padding: 3rem 0;
    }

    .role-title {
        font-size: 1.25rem;
    }

    /* ==================================================
      END: CAREERS PAGE MOBILE STYLES
      ==================================================
    */

    /* ==================================================
      START: CONTACT PAGE MOBILE STYLES
      ==================================================
      Add this new block
    */
    .contact-intro {
        padding: 3rem 0;
    }

    .contact-paths {
        padding: 3rem 0;
    }

    .path-title {
        font-size: 1.5rem;
    }

    /* ==================================================
      END: CONTACT PAGE MOBILE STYLES
      ===================================
    */

    /* ==================================================
      START: BLOG & POST MOBILE STYLES
      ==================================================
      Add this new block
    */
    .posts-list-section {
        padding: 3rem 0;
    }

    .post-card-header {
        padding: 1.5rem 1.5rem 0 1.5rem;
    }

    .post-card-excerpt {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }

    .post-card-footer {
        padding: 1.5rem 1.5rem;
    }

    .post-card-title {
        font-size: 1.5rem;
    }

    .post-header {
        padding: 3rem 0;
    }

    .post-title {
        font-size: 2rem;
    }

    .post-subtitle {
        font-size: 1.1rem;
    }

    .post-content-section {
        padding: 3rem 0;
    }

    .post-content {
        font-size: 1.1rem;
    }

    .post-content h3 {
        font-size: 1.5rem;
    }

    /* ==================================================
      END: BLOG & POST MOBILE STYLES
      ==================================================
    */

    /* ==================================================
      START: WHITE PAPER MOBILE STYLES
      ==================================================
      Add this new block
    */
    .whitepaper-content-section {
        padding: 3rem 0;
    }

    .whitepaper-layout {
        /* Stack the columns */
        grid-template-columns: 1fr;
    }

    .whitepaper-sidebar {
        /* Un-stick the form */
        position: static;
        top: 0;
        /* Move the form to the top on mobile */
        grid-row: 1;
        margin-bottom: 3rem;
    }

    .whitepaper-content h2 {
        font-size: 1.75rem;
    }

    /* ==================================================
      END: WHITE PAPER MOBILE STYLES
      ==================================================
    */

    /* ==================================================
      START: FOOTER MOBILE STYLES (REVISED)
      ==================================================
    */
    .footer-content {
        /* Stack all footer items vertically */
        flex-direction: column;
        align-items: center;
        /* Center-align all items */
        gap: 2rem;
        /* Increase gap for vertical stacking */
    }

    .footer-nav-group {
        flex-direction: column;
        gap: 1.5rem;
    }

    .footer-links a {
        margin: 0 0.75rem;
    }

    .footer-social a {
        margin: 0 0.75rem;
    }

    /* ==================================================
      END: FOOTER MOBILE STYLES
      ==================================================
    */


}

/* media 768 close */