/* === CSS Variables (Color Palette & Fonts) === */
:root {
    --charcoal: #1f2b38; /* Darker Background */
    --charcoal-lighter: #34495e; 
    --white: #ecf0f1;      
    --green: #2ecc71;      
    --lightblue: #3498db;    
    --text-color: var(--white);
    --heading-color: var(--white);
    --link-color: var(--lightblue);
    --link-hover-color: var(--green);
    --primary-color: var(--green);
    --secondary-color: var(--lightblue);
    --border-color: #4a627a; 
    --success-color: var(--green);
    --info-color: var(--lightblue);
    --danger-color: #e74c3c; 

    --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --base-font-size: 16px;
    --line-height-base: 1.6;

    --container-width: 1140px;
    --section-padding: 60px 0; 
    --border-radius: 4px;
    --transition-speed: 0.3s ease;
}

/* === Basic Reset & Body Defaults === */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--base-font-size);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    line-height: var(--line-height-base);
    background-color: var(--charcoal);
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === Utility Classes === */
.container {
    width: 90%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px; 
    padding-right: 15px; 
}

.section-padding {
    padding: var(--section-padding);
}

.bg-alternate {
    background-color: var(--charcoal-lighter);
}

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

.text-success { color: var(--success-color); }
.text-info { color: var(--info-color); }
.text-danger { color: var(--danger-color); }


/* === Typography === */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600; 
    line-height: 1.3;
    margin-bottom: 0.75em;
    color: var(--heading-color);
}

h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }

p {
    margin-bottom: 1rem;
}
p.subtitle { 
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}


a {
    color: var(--link-color);
    text-decoration: none;
    transition: color var(--transition-speed), background-color var(--transition-speed), border-color var(--transition-speed), opacity var(--transition-speed);
}

a:hover, a:focus {
    color: var(--link-hover-color);
    text-decoration: underline;
}

ul, ol {
    list-style: none;
    padding-left: 0; 
}
ul ul, ol ol, ul ol, ol ul {
     margin-bottom: 0; 
}
main ul:not([class]), 
main ol:not([class]) {
    padding-left: 20px; 
    margin-bottom: 1rem;
}
main ul:not([class]) li {
    list-style: disc;
    margin-bottom: 0.5rem;
}
main ol:not([class]) li {
     list-style: decimal;
     margin-bottom: 0.5rem;
}


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

/* === Branding Header (Logo at Top) === */
.branding-header {
    background-color: var(--charcoal); /* Match body or slightly different */
    padding: 20px 0; /* Adjust padding as needed */
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.main-logo {
    max-width: 250px; /* Control logo size */
    width: 60%; /* Responsive width */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center if needed */
    /* border-radius: var(--border-radius); /* Optional */
}

/* === Site Header & Navigation === */
.site-header {
    padding: 10px 0; /* Reduced padding slightly */
    background-color: var(--charcoal-lighter); /* Different background for nav */
    border-bottom: 1px solid var(--border-color);
    position: sticky; 
    top: 0;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: space-between; /* Changed to space-between */
    align-items: center;
    position: relative; 
    min-height: 50px; 
}

/* Removed text logo styles */

.main-navigation {
    display: flex;
    align-items: center;
    width: 100%; /* Allow nav to take full width for centering */
    justify-content: center; /* Center the main nav list */
}

.nav-list {
    /* These styles apply primarily to DESKTOP view */
    display: flex;
    align-items: center;
    gap: 15px; /* Default gap for desktop */
    padding: 0; /* Remove padding if centering */
}

/* Default Nav Link Styles (Desktop Text Links before Button Override) */
.nav-link {
    color: var(--text-color);
    font-weight: 500;
    text-decoration: none;
    padding: 8px 0; 
    position: relative;
    transition: color var(--transition-speed); 
}
.nav-link:hover,
.nav-link:focus {
    color: var(--primary-color);
    text-decoration: none; 
}
/* Default underline effect (hidden by buttons on desktop) */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width var(--transition-speed);
}
.nav-link:hover::after,
.nav-link:focus::after {
    width: 100%;
}

/* Default Active Nav Link Styling (Text style) */
.nav-link.active {
    color: var(--primary-color); 
    font-weight: 700;
}
.nav-link.active::after { 
    width: 100%;
}

/* Action Nav is removed from structure based on template */
/* .action-nav { ... } */

/* Dropdown Menu Styles (Works with JS Click Toggle) */
.dropdown {
    position: relative; 
}
.dropdown-menu {
    display: none; 
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--charcoal-lighter);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    min-width: 180px;
    z-index: 1001; 
    padding: 10px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-top: 5px; 
}
.dropdown.open .dropdown-menu { /* Show menu when parent LI has .open */
    display: block;
} 
.dropdown-menu li a {
    display: block;
    padding: 8px 15px;
    color: var(--text-color);
    white-space: nowrap;
    text-decoration: none; 
}
.dropdown-menu li a:hover {
    background-color: var(--charcoal);
    color: var(--primary-color);
    text-decoration: none;
}
.dropdown-menu li a.active {
    color: var(--primary-color);
    font-weight: 700;
    background-color: rgba(0,0,0,0.1); 
}

/* Mobile Menu Toggle */
.mobile-nav-toggle {
    display: none; 
    background: none;
    border: none;
    color: var(--white);
    font-size: 2rem;
    cursor: pointer;
    z-index: 1001; 
    /* Positioned absolutely in mobile view */
}


/* === Buttons === */
.btn {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 10px 25px;
    font-size: 1rem;
    border-radius: var(--border-radius);
    transition: all var(--transition-speed);
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover {
    text-decoration: none;
    opacity: 0.9; 
}

.btn-primary {
    color: var(--charcoal); /* Updated text color */
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-primary:hover {
    background-color: #27ae60; 
    border-color: #27ae60;
}

.btn-secondary {
    color: var(--charcoal); /* Updated text color */
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.btn-secondary:hover {
    background-color: #2980b9; 
    border-color: #2980b9;
}

.btn-outline {
    color: var(--primary-color);
    background-color: transparent;
    border-color: var(--primary-color);
}
.btn-outline:hover {
    color: var(--charcoal); 
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-large {
    padding: 15px 35px;
    font-size: 1.1rem;
}

.btn-block { 
    display: block;
    width: 100%;
}


/* === Hero Section === */
.hero {
    background-color: var(--charcoal); 
    /* padding: 80px 0; /* Padding handled by section-padding */
}
.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.hero-text {
    flex-basis: 55%; 
}
.hero h1 {
    color: var(--white);
    margin-bottom: 0.5em;
}
.hero .subtitle { 
    color: var(--white);
    opacity: 0.9;
    margin-bottom: 1.5rem;
    margin-left: 0; 
    margin-right: 0;
}
.cta-buttons {
    display: flex;
    gap: 15px; 
    margin-top: 2rem;
}
/* Container for the slideshow within the hero */
.hero-visual {
  flex-basis: 40%;
  /* No text-align needed */
}


/* === Slideshow === */
.slideshow {
  /* flex-basis: 40%; /* Handled by hero-visual */
  position: relative; 
  overflow: hidden; 
  border-radius: var(--border-radius);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  aspect-ratio: 16 / 9; /* Define aspect ratio */
  background-color: var(--charcoal-lighter); /* Fallback background */
}

.slideshow .slide {
  width: 100%;
  height: 100%; 
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 1s ease;
}

.slideshow .slide.active {
  opacity: 1;
  /* position: relative; /* Keep absolute for layering */
}

.slideshow .slide img {
  display: block; 
  width: 100%;   
  height: 100%;   
  object-fit: cover; /* Scale image to cover container */
  border-radius: var(--border-radius); 
}


/* === Section Header (Reusable) === */
.section-header {
    text-align: center;
    margin-bottom: 40px;
}
.section-header h2 {
    margin-bottom: 10px;
}
.section-header p:not(.subtitle) { 
    max-width: 700px; 
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

/* === Page Header Section (For subpages) === */
.page-header-section {
     /* Uses section-padding */
}
.page-header-section h1 {
    margin-bottom: 10px;
    text-align: center; /* Center title on subpages */
}
.page-header-section p { /* Center description on subpages */
     text-align: center;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
}


/* === Student Offer Section === */
.student-offer {
    background-color: var(--charcoal-lighter);
}
.student-offer h2.student-highlight {
    color: var(--primary-color);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.student-offer p {
    margin-bottom: 1.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

/* === Special Offer Section === */
.special-offer {
    background-color: var(--charcoal); /* Match hero background */
}
.special-offer .section-header {
    margin-bottom: 2rem;
}
.special-offer h2 {
    color: var(--white);
}
.special-offer p {
    margin-bottom: 1rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}
.special-offer p strong {
    color: var(--primary-color);
    font-weight: 600;
}

/* Offer Grid and Cards */
.offer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.offer-card {
    background-color: var(--charcoal-lighter);
    padding: 30px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    text-align: center;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    display: flex; /* Added for alignment */
    flex-direction: column; /* Stack content */
}
.offer-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}
.offer-card h3 {
    color: var(--secondary-color);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}
.offer-card p {
    margin-bottom: 1.5rem;
    opacity: 0.9;
    flex-grow: 1; /* Allow paragraph to take space */
}
.offer-card .btn {
    width: 100%;
    max-width: 300px;
    margin: auto auto 0 auto; /* Center button and push to bottom */
}
/* Specific Offer Card Styles */
.individual-offer h3 {
    color: var(--primary-color);
}
.org-offer {
    border: 2px solid var(--primary-color); /* Highlight border */
}
.org-offer h3 {
    color: var(--primary-color);
}


/* === Problem/Solution Section === */
.problem-solution .solution-text {
    margin-top: 30px;
}
.problem-solution .solution-text h3 {
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 1rem;
}

/* === Features / Use Cases Grid === */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px;
}

/* Style feature item as a clickable link */
.feature-item { 
    background-color: var(--charcoal-lighter); /* Changed background */
    padding: 30px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    text-align: center;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    text-decoration: none; /* Remove underline from link */
    color: inherit; /* Inherit text color */
    display: block; /* Make the link block-level */
}
.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    color: inherit; /* Prevent link color change on hover */
    text-decoration: none; /* Ensure no underline on hover */
}

.feature-icon {
    font-size: 2rem; 
    color: var(--primary-color);
    margin-bottom: 15px;
    line-height: 1; 
}

.feature-item h3 {
    color: var(--secondary-color); 
    margin-bottom: 10px;
    font-size: 1.3rem;
}
.feature-item p {
    margin: 0; /* Remove default paragraph margin */
    opacity: 0.9;
}


/* Inline Feature List */
.features-list-inline {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px 25px; 
    list-style: none;
    padding: 0;
}
.features-list-inline li {
     display: flex;
     align-items: center;
     gap: 8px; 
}
.features-list-inline li i { 
     font-size: 1em; 
}


/* === Solutions Overview Grid (Homepage & solutions.html) === */
.solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.solution-card { 
    background-color: var(--charcoal-lighter);
    padding: 30px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.solution-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}
.solution-icon { 
    font-size: 2.5rem; 
    color: var(--primary-color);
    margin-bottom: 15px;
}
.solution-card h3 {
     color: var(--secondary-color);
     margin-bottom: 15px;
}
.solution-card p {
    flex-grow: 1; 
    margin-bottom: 20px;
}
.learn-more { 
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    align-self: flex-start; 
    margin-top: auto; 
}
.learn-more:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
}
.audience-gateway .solution-card .btn { 
    width: 100%; 
    margin-top: auto; 
}

/* === Tier Highlight Sections (Individuals page) === */
.tier-highlight {
    /* Uses section-padding and bg-alternate */
}
.tier-highlight h2 {
    margin-bottom: 1rem;
}
.tier-highlight .tier-details {
    margin: 20px 0 30px 0; 
}


/* === Deployment Options (Businesses page) === */
.deployment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 30px;
}
.deployment-card {
    background-color: var(--charcoal); 
    padding: 30px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    display: flex; 
    flex-direction: column; 
}
.deployment-card.self-hosted-highlight {
    border-color: var(--primary-color); 
}
.deployment-icon {
    margin-bottom: 15px;
    text-align: center; 
    font-size: 2.5rem; 
}
.deployment-card h3 {
    text-align: center;
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
}
.deployment-card .deployment-features { 
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
    flex-grow: 1; 
}
.deployment-card .deployment-features li {
    margin-bottom: 0.75rem; 
    display: flex;
    align-items: flex-start;
    text-align: left; 
}
.deployment-card .deployment-features li i {
    margin-right: 10px;
    margin-top: 4px; 
    flex-shrink: 0; 
    width: 1.2em; 
    text-align: center;
}
.deployment-card .learn-more {
     display: block; 
     text-align: center; 
     margin-top: auto; 
}

/* === Pricing Page Styles === */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
    gap: 30px;
    align-items: stretch; 
}
.pricing-card {
    background-color: var(--charcoal-lighter);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 30px;
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    position: relative; 
}
.pricing-card:hover {
     transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}
.pricing-card.popular {
    border-color: var(--primary-color);
    border-width: 2px;
}
.popular-badge {
    position: absolute;
    top: -15px; 
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-color);
    color: var(--charcoal); 
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}
.pricing-header {
    margin-bottom: 25px;
}
.pricing-header h3 {
    margin-bottom: 10px;
    color: var(--white); 
}
.price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 5px;
}
.price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-color);
    opacity: 0.8;
}
.pricing-header .description {
    font-size: 0.9rem;
    opacity: 0.8;
    min-height: 3em; 
}
.pricing-card .features-list { 
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: left;
    flex-grow: 1; 
}
.pricing-card .features-list li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.pricing-card .features-list li i {
    margin-right: 10px;
    width: 1.2em; 
    text-align: center;
    color: var(--success-color); 
}
.pricing-card .features-list li i.fa-times {
    color: var(--danger-color); 
}
.pricing-footer {
    margin-top: auto; 
}
.pricing-footer .annual-option {
    font-size: 0.85rem;
    margin-top: 10px;
    opacity: 0.8;
}

/* FAQ Section Styles */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 15px;
}
.faq-item summary {
    padding: 15px 0;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    list-style: none; 
    color: var(--secondary-color);
}
.faq-item summary::-webkit-details-marker {
    display: none; 
}
.faq-item summary::after { 
    content: '+';
    position: absolute;
    right: 10px;
    font-size: 1.5rem;
    transition: transform var(--transition-speed);
    color: var(--text-color);
}
.faq-item[open] summary::after {
    transform: rotate(45deg);
}
.faq-item > div, 
.faq-item > p { 
    padding: 0 0 15px 0;
    opacity: 0.9;
}


/* === Competitions Page Styles === */
.divisions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}
.division-card {
    background-color: var(--charcoal);
    padding: 30px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    text-align: center;
}
.division-icon {
     font-size: 2.5rem;
     color: var(--primary-color);
     margin-bottom: 15px;
}
.division-card h3 {
     color: var(--secondary-color);
}
.division-card p em { 
     font-size: 0.9rem;
     opacity: 0.8;
     display: block;
     margin-top: 10px;
}
.schedule-list .schedule-item { 
    border-bottom: 1px dashed var(--border-color);
    padding: 15px 0;
    margin-bottom: 15px;
}
.schedule-list .schedule-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.schedule-list h4 {
    margin-bottom: 5px;
}
.schedule-list p {
    margin-bottom: 5px;
    font-size: 0.95rem;
    opacity: 0.9;
}


/* === Contact Page Styles === */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adjusted minmax */
    gap: 30px;
}
.contact-method {
    background-color: var(--charcoal-lighter);
    padding: 30px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    text-align: center;
}
.contact-icon {
     margin-bottom: 15px;
     color: var(--primary-color);
}
.contact-method h3 {
    color: var(--secondary-color);
    margin-bottom: 1rem;
}
.contact-method .btn { 
    margin-top: 1rem;
}
.contact-method .btn i { 
    margin-right: 8px;
}


/* === Competitions Teaser Section === */
.competitions-teaser h2 {
    color: var(--white);
}
.competitions-teaser p {
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

/* === Pricing Teaser Section === */
.pricing-teaser {
    background-color: var(--charcoal);
}
.pricing-teaser h2 {
    color: var(--white);
}
.pricing-teaser p {
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

/* === OSI-Robot Chatbot === */
.osi-chat {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    background: var(--charcoal);
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: none; /* Initially hidden - JS controls this */
    flex-direction: column; /* Stack header, messages, input */
    font-size: 0.9rem;
    transition: height 0.3s ease, opacity 0.3s ease; /* Smooth transitions */
    opacity: 0; /* Start hidden */
}
.osi-chat.visible {
    display: flex; /* Show when JS adds class */
    opacity: 1;
}
.osi-chat.minimized {
    height: 55px; /* Height of header + border */
    overflow: hidden;
    cursor: pointer; /* Indicate clickable when minimized */
}
.osi-chat.minimized .osi-messages,
.osi-chat.minimized .osi-input {
    display: none; /* Hide content when minimized */
}
.osi-icon {
    width: 35px; /* Slightly smaller icon */
    height: 35px;
    margin-right: 10px;
    flex-shrink: 0; /* Prevent icon shrinking */
}
.osi-header {
    background: var(--charcoal-lighter);
    padding: 10px 15px; /* Adjusted padding */
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    border-radius: 8px 8px 0 0; /* Match container radius */
    cursor: pointer; /* Make header clickable to minimize/maximize */
}
.osi-header span {
    color: var(--white);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.osi-toggle {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: auto;
    padding: 0 5px; /* Easier to click */
}
.osi-toggle:hover {
    color: var(--link-hover-color);
}
.osi-messages {
    height: 250px; /* Set fixed height for message area */
    overflow-y: auto; /* Enable scrolling */
    padding: 10px;
    display: flex;
    flex-direction: column; /* Stack messages */
}
.osi-message {
    margin-bottom: 10px; /* Space between messages */
    padding: 8px 12px; /* Padding inside bubble */
    border-radius: 10px; /* Rounded bubbles */
    max-width: 80%; /* Prevent bubbles becoming too wide */
    line-height: 1.4;
}
.osi-message.user {
    background: var(--primary-color);
    color: var(--charcoal); /* Dark text on light background */
    align-self: flex-end; /* Align user messages to the right */
    border-bottom-right-radius: 2px; /* Slightly flatten corner */
}
.osi-message.bot {
    background: var(--charcoal-lighter);
    color: var(--white);
    align-self: flex-start; /* Align bot messages to the left */
    border-bottom-left-radius: 2px; /* Slightly flatten corner */
}
.osi-message p {
    margin: 0; /* Remove default paragraph margin */
}
.osi-message a {
    color: var(--secondary-color);
    text-decoration: underline;
}
.osi-input {
    display: flex;
    padding: 10px;
    border-top: 1px solid var(--border-color);
}
.osi-input input {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px 0 0 5px;
    background: var(--charcoal-lighter);
    color: var(--white);
    outline: none; /* Remove default focus outline */
}
.osi-input input:focus {
     border-color: var(--primary-color); /* Highlight on focus */
}
.osi-input button {
    padding: 8px 12px;
    border: none;
    background: var(--primary-color);
    color: var(--charcoal); /* Dark icon on button */
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: background-color var(--transition-speed);
}
.osi-input button:hover {
    background-color: #27ae60; /* Darker green */
}


/* === Footer === */
.site-footer {
    background-color: var(--charcoal-lighter); 
    color: var(--text-color);
    padding: 30px 0;
    margin-top: 60px; 
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
    opacity: 0.8;
}
.footer-container {
    /* Layout handled by child */
}
.footer-content {
    text-align: center; 
}
.footer-links {
    margin-top: 10px;
}
.footer-links a {
    color: var(--text-color);
    margin: 0 10px;
}
.footer-links a:hover {
    color: var(--primary-color);
}
.social-links {
    margin-top: 15px;
}
.social-links a {
    margin: 0 8px;
    display: inline-block; 
    color: var(--text-color); 
    font-size: 1.2rem;
}
.social-links a:hover {
     color: var(--primary-color);
}


/* ============================================= */
/* === Desktop Navigation Button Styling === */
/* ============================================= */
@media (min-width: 769px) {

    /* Adjust gap slightly for button look */
     .main-navigation .nav-list.main-nav {
        gap: 10px; /* Reduced gap */
     }

    /* Base button appearance for main nav links */
    .main-nav .nav-link {
        padding: 8px 15px; /* Adjusted padding */
        border-radius: var(--border-radius);
        color: var(--charcoal); /* Dark text for contrast */
        text-decoration: none;
        transition: background-color var(--transition-speed), border-color var(--transition-speed), opacity var(--transition-speed), box-shadow var(--transition-speed);
        border: 1px solid transparent; 
        font-weight: 500; /* Reset base weight */
    }

    /* Remove the default text link hover/focus effects */
    .main-nav .nav-link:hover,
    .main-nav .nav-link:focus {
        text-decoration: none; 
        opacity: 0.9;
        color: var(--charcoal); /* Ensure text stays dark */
    }
    .main-nav .nav-link::after {
        display: none; /* Remove underline pseudo-element */
    }

    /* --- Alternating Backgrounds --- */
    /* ODD Items (1st, 3rd, 5th, 7th, 9th) = Green */
    .main-nav .nav-item:nth-child(odd) > .nav-link {
        background-color: var(--primary-color); /* Green */
        border-color: var(--primary-color);
    }
    .main-nav .nav-item:nth-child(odd) > .nav-link:hover,
    .main-nav .nav-item:nth-child(odd) > .nav-link:focus {
        background-color: #27ae60; /* Darker green */
        border-color: #27ae60;
    }

    /* EVEN Items (2nd, 4th, 6th, 8th) = Blue */
    .main-nav .nav-item:nth-child(even) > .nav-link {
        background-color: var(--secondary-color); /* Light Blue */
        border-color: var(--secondary-color);
    }
     .main-nav .nav-item:nth-child(even) > .nav-link:hover,
     .main-nav .nav-item:nth-child(even) > .nav-link:focus {
        background-color: #2980b9; /* Darker blue */
        border-color: #2980b9;
    }

    /* --- Active State Styling --- */
    .main-nav .nav-link.active {
        color: var(--charcoal); 
        font-weight: 700; 
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6); 
        opacity: 1; 
    }
     /* Ensure active hover maintains distinction */
     .main-nav .nav-item:nth-child(odd) > .nav-link.active:hover,
     .main-nav .nav-item:nth-child(odd) > .nav-link.active:focus {
          background-color: #27ae60; 
          border-color: #27ae60;
     }
      .main-nav .nav-item:nth-child(even) > .nav-link.active:hover,
      .main-nav .nav-item:nth-child(even) > .nav-link.active:focus {
         background-color: #2980b9; 
         border-color: #2980b9;
     }
     .main-nav .nav-link.active::after {
         display: none; 
     }

} /* End of @media (min-width: 769px) for Desktop Nav Buttons */


/* =================================== */
/* === Mobile Responsiveness === */
/* =================================== */
@media (max-width: 992px) {
    /* --- Tablet Adjustments --- */
    :root {
        --base-font-size: 15px;
    }
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }

    .hero-container {
        flex-direction: column;
        text-align: center;
    }
    .hero-text {
        flex-basis: 100%;
        margin-bottom: 30px;
        order: 2; /* Text below image on tablet */
    }
     .hero .subtitle { 
        margin-left: auto;
        margin-right: auto;
     }
    .hero-visual {
        flex-basis: 100%;
        max-width: 500px; 
        margin: 0 auto 30px auto; /* Add margin below */
        order: 1; /* Image above text */
    }
    .cta-buttons {
        justify-content: center;
    }

    .deployment-grid {
        grid-template-columns: 1fr; 
    }
} /* End @media 992px */

@media (max-width: 768px) {
    /* --- Mobile Navigation Styles --- */
    .branding-header {
        padding: 15px 0; /* Less padding */
    }
    .main-logo {
        max-width: 200px; /* Smaller logo */
    }
    .site-header {
        padding: 10px 0;
    }
    .header-container {
        min-height: 50px; 
    }
    
    /* Position the main navigation container below the header */
    .main-navigation {
        position: absolute;
        top: 100%; /* Position below the <nav class="site-header"> */
        left: 0;
        width: 100%;
        z-index: 999; 
    }
    
    .nav-list { 
        display: none; 
        flex-direction: column;
        width: 100%; 
        background-color: var(--charcoal-lighter); 
        border-top: 1px solid var(--border-color); 
        padding: 10px 0; 
        align-items: center; 
        gap: 0; 
        /* Remove position: relative if container is positioned */
    } 
    .nav-list.active { 
        display: flex; 
    }
     
     /* Remove absolute positioning for logo on mobile */
    .logo {
         position: static; 
         transform: none;
         /* display: none; /* Hide text logo if image header is present */
    }
     
     .mobile-nav-toggle {
        display: block; 
        /* Position relative to header-container */
        position: absolute; 
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1001; 
    }

    .nav-item {
        width: 100%;
        text-align: center;
        margin-bottom: 0; 
        position: relative; 
    }
    .nav-item .dropdown-menu { 
        display: none !important; 
    }
     .nav-item.dropdown.open > .dropdown-menu {
          display: block;
          position: static; 
          background: none;
          border: none;
          box-shadow: none;
          padding: 0;
          margin-top: 0; 
          width: 100%; 
     }
      .nav-item.dropdown.open > .dropdown-menu li a {
          padding: 10px 15px 10px 30px; 
          background-color: rgba(0, 0, 0, 0.15); 
          border-bottom: 1px solid var(--border-color);
          font-size: 0.95em; 
          color: var(--text-color); 
          text-align: center; 
      }
      .nav-item.dropdown.open > .dropdown-menu li:last-child a {
           border-bottom: none; /* Remove border on last sub-item */
      }
      .nav-item.dropdown.open > a {
          background-color: rgba(0,0,0,0.1); 
          border-bottom-color: transparent; 
      }

    /* Consolidated Style for ALL Mobile Nav Links */
    .main-navigation .nav-list .nav-link { 
        display: flex;           
        align-items: center;     
        justify-content: center; 
        min-height: 50px; /* Slightly smaller */        
        padding: 10px 15px;      
        border-bottom: 1px solid var(--border-color); 
        color: var(--text-color); 
        font-weight: 500; 
        background-color: transparent; 
        border-radius: 0; 
        border-left: none; 
        border-right: none;
        border-top: none; 
        width: 100%; 
        margin: 0; 
        transition: background-color var(--transition-speed), color var(--transition-speed); 
    }
    .main-navigation .nav-list .nav-link:hover,
    .main-navigation .nav-list .nav-link:focus { 
        background-color: rgba(0,0,0,0.1);
        color: var(--primary-color); 
        opacity: 1; 
        text-decoration: none; 
    }
     /* Remove bottom border from the very last item overall */
     .main-navigation .nav-list:last-of-type .nav-item:last-child .nav-link {
          border-bottom: none;
     }

     /* Active link style for Mobile */
     .main-navigation .nav-list .nav-link.active {
         color: var(--primary-color);
         font-weight: 700;
         background-color: rgba(0,0,0,0.15); 
         box-shadow: none; 
     }
       .dropdown-menu li a.active { 
           color: var(--primary-color);
           font-weight: bold;
            background-color: rgba(0, 0, 0, 0.25); 
       }

    .nav-link::after { 
         display: none; 
    }
     
    /* Remove Action Nav specific styles as it's part of main list now */
    /* .action-nav { ... } */
      
    /* --- Other Mobile Adjustments --- */

    /* Stack Grids on Mobile */
    .features-grid,
    .solutions-grid,
    .pricing-grid,
    .deployment-grid,
    .contact-grid,
    .divisions-grid,
    .offer-grid {
        grid-template-columns: 1fr; 
    }

    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    .student-offer h2.student-highlight { font-size: 1.8rem; }


    .hero-container {
        /* Keep image above text */
    }
     .hero-text { order: 2; }
     .hero-visual { order: 1; max-width: 100%; }

    .cta-buttons {
        flex-direction: column; 
        align-items: center;
    }
    .cta-buttons .btn {
        width: 80%; 
        max-width: 300px;
    }

    .page-header-section { 
         padding-top: 50px;
         padding-bottom: 50px;
    }
    .section-padding { 
        padding: 40px 0;
    }
    .site-footer {
        margin-top: 40px;
    }

    /* Chatbot Mobile Adjustments */
    .osi-chat {
        width: 90%;
        max-width: 300px; /* Max width */
        right: 10px;
        bottom: 10px;
    }
    .osi-chat.minimized {
        height: 50px; /* Adjust if needed */
    }
     .osi-messages {
        height: 200px; /* Reduce height */
    }

} /* End @media 768px */

/* ========================================== */
/* Styles for Expanded Chat on Tutorials Page */
/* ========================================== */

/* Target the body tag when on the tutorials page */
body.on-tutorials-page #osiChatWidget {
    position: relative; /* Override fixed positioning */
    width: 100%;        /* Fill the chat-column-container */
    height: 100%;       /* Fill the chat-column-container */
    max-width: none;
    max-height: none;
    bottom: auto;
    right: auto;
    border: 1px solid var(--border-color); /* Add border for separation */
    border-radius: var(--border-radius); /* Optional */
    margin: 0;
    box-shadow: none; /* Remove corner widget shadow */
    display: flex; /* Use flex to control internal layout */
    flex-direction: column;
    background-color: var(--charcoal); /* Ensure background */
}

/* Make internal elements flexible */
body.on-tutorials-page #osiChatWidget .osi-header {
    /* Keep header styling mostly, maybe adjust padding/border */
    border-bottom: 1px solid var(--border-color);
}

body.on-tutorials-page #osiChatWidget .osi-messages {
    flex-grow: 1; /* Allow message area to take up available space */
    height: auto;  /* Remove fixed height if previously set */
    max-height: none; /* Remove max height */
    overflow-y: auto; /* Keep scroll */
    padding: 15px;
}

body.on-tutorials-page #osiChatWidget .osi-input {
    /* Keep input styling mostly, maybe adjust padding/border */
    border-top: 1px solid var(--border-color);
}

/* How minimizing works on tutorial page might change */
body.on-tutorials-page #osiChatWidget.minimized {
    /* Instead of hiding, maybe just shrink it? Or hide completely? */
    /* Option 1: Hide it */
    /* display: none; */

    /* Option 2: Make it very small (might need more specific styling) */
    height: 40px; /* Just the header height */
    overflow: hidden;
}
body.on-tutorials-page #osiChatWidget.minimized .osi-messages,
body.on-tutorials-page #osiChatWidget.minimized .osi-input {
    display: none; /* Hide messages/input when minimized */
}