/* =================================================================
   peritiq - Landing Page 
   File: assets/css/main.css
   Version: 2.1 - Namespaced Brand Variables
   ================================================================= */

/* Fix: Load Material Symbols Font (Enabled FILL axis for stars) */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

body {
    font-family: var(--peritiq-font-body);
    color: var(--peritiq-text-secondary);
    background-color: var(--peritiq-background-base);
    font-size: 1.1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Font Setup (Inter) --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-VariableFont.woff2') format('woff2');
}

.site-footer .logo img {
  filter: brightness(0) invert(1);
}

section.alternate {
  background: linear-gradient(90deg, #2D2F36, #191923, #2D2F36);
  background-size: 200% 200%;
  animation: peritiqGlow 12s ease-in-out infinite;
}

.site-footer {
  background-color: var(--peritiq-graphite-soft);
  /* --- NEW: Pushes footer to bottom on short pages --- */
  margin-top: auto;
}

.logo img {
    height: 40px;
    width: auto;
    vertical-align: middle;
}

/* --- 2. Layout & Typography --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
section { padding: 100px 0; }
.section-title {
    font-family: var(--peritiq-font-heading);
    font-weight: 700;
    font-size: 2.8rem;
    color: var(--peritiq-text-primary);
    text-align: center;
    margin-bottom: 1rem;
}
.section-subtitle {
    font-size: 1.2rem;
    color: var(--peritiq-text-secondary);
    max-width: 750px;
    margin: 0 auto 60px auto;
    text-align: center;
}
p { margin-bottom: 1rem; }
h1, h2, h3, h4 { font-family: var(--peritiq-font-heading); color: var(--peritiq-text-primary); }

/* --- 3. Custom Buttons --- */
.btn-primary {
    background-color: var(--peritiq-brand-primary);
    border: 2px solid var(--peritiq-brand-primary);
    color: var(--peritiq-text-inverse);
    font-family: var(--peritiq-font-heading);
    font-weight: 600;
    padding: 14px 35px;
    border-radius: var(--peritiq-border-radius);
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    display: inline-block;
}
.btn-primary:hover {
    background-color: var(--peritiq-brand-primary-hover);
    border-color: var(--peritiq-brand-primary-hover);
    color: var(--peritiq-text-inverse);
    transform: scale(1.03); /* This is safer and won't flicker */
    transition: all 0.3s ease; /* Re-add transition here */
}
.btn-secondary {
    background-color: transparent;
    border: 2px solid var(--peritiq-border-primary);
    color: var(--peritiq-text-primary);
    border-radius: var(--peritiq-border-radius);
    font-family: var(--peritiq-font-heading);
    font-weight: 600;
    padding: 14px 35px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}
.btn-secondary:hover {
    background-color: var(--peritiq-accent-signal);
    border-color: var(--peritiq-accent-signal);
    color: var(--peritiq-text-primary);
}

/* --- 4. Header & Navigation --- */
#main-header {
    position: fixed; width: 100%; top: 0; left: 0; z-index: 1000;
    padding: 20px 0;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
}
#main-header.scrolled {
    background-color: rgba(25, 25, 35, 0.85); /* Deep Space Blue with transparency */
    backdrop-filter: blur(10px);
}
#main-header nav { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.75rem; font-weight: 700; text-decoration: none; color: var(--peritiq-text-primary); }
.nav-links a { margin-left: 35px; text-decoration: none; font-weight: 500; font-family: var(--peritiq-font-heading); color: var(--peritiq-text-primary); transition: color 0.3s ease; }
.nav-links a:hover { color: var(--peritiq-accent-signal); }

/* --- 4.5 Mobile Navigation --- */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--peritiq-text-primary);
    padding: 0;
    z-index: 1200;
}
.mobile-menu-toggle .material-symbols-outlined {
    font-size: 2.5rem;
}
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--peritiq-background-base);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, visibility 0s linear 0.4s, transform 0.4s ease;
}
.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.4s ease, visibility 0s linear 0s, transform 0.4s ease;
}
.mobile-menu-overlay .close-btn {
    display: block;
    position: absolute;
    top: 25px;
    right: 24px; /* Align with container padding */
}
.mobile-nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}
.mobile-nav-links a {
    color: var(--peritiq-text-primary);
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 600;
    font-family: var(--peritiq-font-heading);
    transition: color 0.3s ease;
}
.mobile-nav-links a:hover {
    color: var(--peritiq-accent-signal);
}


/* --- 5. Section Specific Styles --- */

/* Hero Section */
.hero-section-custom {
    min-height: 90vh;
    padding-top: 120px;
    display: flex;
    align-items: center;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2rem;
}
.hero-content {
    text-align: left;
}
.hero-content .section-subtitle {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2rem;
}

/* --- AAA Typography Fix --- */
.hero-content h1 {
    /* Responsive typography for hero title */
    font-size: clamp(2.8rem, 4vw, 3.8rem);
    line-height: 1.15;
    
    /* 1. Safety net: Break arbitrary letters only if the word is wider than the screen */
    overflow-wrap: break-word;
    
    /* 2. Disable automatic hyphenation (browser dictionaries unreliable for PT-BR) */
    hyphens: none;
    -webkit-hyphens: none;
    
    max-width: 100%;
}
.hero-cta-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}
.hero-trust-line {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--peritiq-text-secondary);
}
.hero-animation-container {
    perspective: 1000px;
}
.hero-chat-animation {
    background-color: var(--peritiq-background-secondary);
    border: 1px solid var(--peritiq-border-primary);
    border-radius: 12px;
    padding: 24px;
    position: relative;
    transform: rotateX(10deg) rotateY(-15deg);
    transform-style: preserve-3d;
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
    height: 310px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden; 
}
.chat-scenario {
    display: none; 
}
.chat-scenario.active {
    display: block;
}
.chat-bubble {
    padding: 14px 18px;
    border-radius: 18px;
    max-width: 85%;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(20px);
    animation: bubble-fade-in 0.5s forwards ease-out;
    text-align: left;
}
.chat-bubble.user {
    background-color: var(--peritiq-graphite-medium);
    color: var(--peritiq-text-primary);
    border-bottom-right-radius: 4px;
    margin-left: auto;
    animation-delay: 0.2s;
}
.chat-bubble.peritiq {
    background-color: var(--peritiq-background-base);
    color: var(--peritiq-text-secondary);
    border: 1px solid var(--peritiq-border-primary);
    border-bottom-left-radius: 4px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    animation-delay: 1s;
}
.chat-bubble.peritiq .material-symbols-outlined {
    color: var(--peritiq-accent-signal);
    font-size: 1.5rem;
}
.chat-bubble.peritiq strong {
    color: var(--peritiq-text-primary);
    display: block;
    font-size: 1rem;
}
.chat-bubble.peritiq p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}
@keyframes bubble-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Testimonials Section */
.endorsement-carousel {
    width: 100%; 
    padding: 20px 40px 50px 40px; /* Added horizontal padding for arrows */
}
.swiper-slide {
    display: flex; 
    justify-content: center; 
    height: auto;
}
.endorsement-card {
    background-color: var(--peritiq-background-base);
    border: 1px solid var(--peritiq-border-primary);
    border-radius: 15px; 
    padding: 30px;
    width: 100%; 
    max-width: 380px;
    display: flex; 
    flex-direction: column;
    height: 100%;
}
.endorsement-stars { 
    margin-bottom: 1.5rem; 
}

/* FIX: Force Material Symbols to render as solid (filled) stars */
.endorsement-stars .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

/* Active Stars (Yellow) */
.endorsement-stars .material-symbols-outlined.filled {
    color: var(--peritiq-yellow);
}

/* Empty Stars (Gray) */
.endorsement-stars .material-symbols-outlined.empty {
    color: #444;
}
.endorsement-comment { 
    flex-grow: 1; 
    font-style: italic; 
}
.endorsement-author { 
    margin-top: auto; 
    padding-top: 1rem; 
}
.author-name { 
    display: block; 
    font-weight: 600; 
    color: var(--peritiq-text-primary); 
}
.author-title { 
    font-size: 0.9rem; 
    color: var(--peritiq-text-secondary); 
}
.swiper-pagination-bullet-active { 
    background: var(--peritiq-accent-signal); 
}

/* --- Navigation Arrow Styling --- */
.swiper-button-next, 
.swiper-button-prev { 
    color: var(--peritiq-accent-signal); /* Uses correct theme accent color */
}

.swiper-button-next::after, 
.swiper-button-prev::after {
    font-size: 1.5rem; /* Makes the default arrow icon larger */
    font-weight: 900;
}

/* Hide arrows on smaller screens where they are less useful */
@media (max-width: 767px) {
    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }
    .endorsement-carousel {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Features Section */
#features .material-symbols-outlined {
    font-size: 3rem; color: var(--peritiq-accent-signal);
    background-color: rgba(0, 199, 199, 0.1);
    padding: 15px;
    border-radius: 50%;
}
#features .row { margin-bottom: 4rem; }

/* How It Works Section */
.timeline { position: relative; }
.timeline-item { position: relative; padding-left: 5rem; padding-bottom: 3rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
    content: ''; position: absolute; left: 31px; top: 0;
    width: 2px; height: 100%; background-color: var(--peritiq-border-primary);
}
.timeline-icon {
    position: absolute; left: 0; top: 0; width: 64px; height: 64px;
    border: 2px solid var(--peritiq-border-primary); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--peritiq-background-base); font-size: 1.5rem; color: var(--peritiq-text-primary);
}
.image-rotator {
    position: relative; width: 100%; aspect-ratio: 16 / 10;
    border-radius: 12px; overflow: hidden;
    border: 1px solid var(--peritiq-border-primary);
}
.image-rotator img { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s ease-in-out; }
.image-rotator img.active { opacity: 1; }

/* =================================================================
   PRICING SECTION (Aligned with JS Modal)
   ================================================================= */

.pricing-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px; 
    max-width: 1000px; 
    margin: 0 auto;
    align-items: stretch;
}

/* 1. THE CARD - Exact match to JS Modal */
.pricing-card {
    background-color: #0f172a; /* Dark Blue from Modal */
    border: 1px solid #334155; /* Slate Border */
    border-radius: 12px;
    padding: 30px;
    text-align: left; /* FORCE LEFT ALIGNMENT */
    display: flex; 
    flex-direction: column;
    position: relative;
    transition: transform 0.2s, border-color 0.2s;
}

.pricing-card:hover {
    border-color: #F7CB18;
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.pricing-card.popular-border {
    border: 2px solid #F7CB18;
}

/* 2. HEADER - Aligned Left */
.plan-header { 
    margin-bottom: 20px;
    text-align: left;
}

.plan-name { 
    font-size: 1.4rem; 
    font-weight: 700; 
    color: #fff; 
    margin-bottom: 5px;
}

.plan-sub { 
    font-size: 0.9rem; 
    color: #94a3b8; 
    min-height: 1.4em;
    text-align: left;
}

/* 3. PRICE - Big & White */
.plan-price-box { 
    margin-bottom: 20px; 
    display: flex; 
    align-items: baseline; 
    gap: 5px; 
    justify-content: flex-start; /* Left align */
}

.plan-price-val { 
    font-size: 2.2rem; 
    font-weight: 700; 
    color: #fff; 
}

.plan-price-period { 
    font-size: 0.9rem; 
    color: #94a3b8; 
}

/* 4. FEATURES - Clean Yellow Ticks */
.features-list { 
    list-style: none; 
    padding: 0; 
    margin: 0 0 30px 0; 
    flex-grow: 1; 
    text-align: left;
}

.features-list li { 
    margin-bottom: 12px; 
    color: #cbd5e1; /* Light Gray Text */
    font-size: 0.95rem; 
    display: flex; 
    align-items: flex-start; 
    gap: 10px; 
}

/* Override previous "Circle" styles for checks */
#pricing .features-list .material-symbols-outlined { 
    color: #F7CB18; /* Yellow */
    font-size: 1.1rem; 
    margin-top: 2px;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

/* 5. BUTTONS */
.select-plan-btn {
    width: 100%;
    padding: 14px;
    background: transparent;
    border: 2px solid #F7CB18;
    color: #fff;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: none; /* JS modal uses normal casing usually */
    font-family: var(--peritiq-font-heading);
}

.select-plan-btn:hover { 
    background: #F7CB18; 
    color: #000; 
}

/* Solid Yellow Button for Team (Primary) */
.select-plan-btn.primary { 
    background: #F7CB18; 
    color: #000; 
}

.select-plan-btn.primary:hover { 
    filter: brightness(110%); 
    transform: scale(1.02);
}

/* 6. POPULAR TAG */
.popular-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #F7CB18;
    color: #000;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
}

/* 7. RISK REVERSAL TEXT */
.pricing-card .risk-reversal {
    text-align: center; 
    margin-top: 10px; 
    font-size: 0.75rem; 
    color: #64748b;
}

/* Enterprise Banner alignment fix */
.enterprise-cta-banner {
    background-color: #0f172a; /* Match card bg */
    border: 1px solid #334155;
}
/* =================================================================
   NEW: Payment Modal Specific Styles (Growth UI)
   ================================================================= */

/* 1. Seat Selector & Team Card */
.seat-selector-container {
    background: #1e293b; 
    border: 1px solid #334155;
    border-radius: 8px; 
    padding: 20px; 
    margin-bottom: 20px;
    margin-top: 20px;
}

.seat-selector {
    display: flex; 
    justify-content: space-between;
    align-items: center; 
    margin-bottom: 10px;
}

.seat-controls { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.seat-btn { 
    background: #334155; 
    color: #fff; 
    border: 1px solid #475569; 
    width: 28px; height: 28px; 
    border-radius: 4px; 
    cursor: pointer; 
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}

.seat-btn:hover { 
    border-color: #F7CB18; 
    color: #F7CB18; 
}

.seat-display { 
    font-weight: 700; 
    font-size: 1rem; 
    width: 24px; 
    text-align: center;
}

/* 2. Hero Total Price (Right Align, Big Yellow) */
.seat-total-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Right align */
}

/* 3. Popular/Team Border & Tag */
.popular-border {
    border: 2px solid #F7CB18 !important;
    position: relative;
    box-shadow: 0 0 20px rgba(247, 203, 24, 0.1);
}

.popular-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #F7CB18;
    color: #000;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    z-index: 2;
}

/* 4. Select Button in Modal (Bright Yellow) */
.select-plan-btn {
    width: 100%;
    padding: 14px;
    background: transparent;
    border: 2px solid #F7CB18;
    color: #fff;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--peritiq-font-heading);
    text-transform: uppercase;
    font-size: 0.9rem;
}

.select-plan-btn:hover { 
    background: #F7CB18; 
    color: #000; 
}

.select-plan-btn.primary { 
    background: #F7CB18; 
    color: #000; 
}

.select-plan-btn.primary:hover { 
    filter: brightness(110%); 
    transform: scale(1.02);
}

/* 5. Shake Animation (For Seat Limit) */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.shake-animation {
  animation: shake 0.3s ease-in-out;
  border-color: #ef4444 !important; /* Red flash */
}

/* 6. Active Plan State (If they are already on a plan) */
.active-plan-card {
    border: 2px solid #10b981 !important; /* Green Border */
    background: rgba(16, 185, 129, 0.05) !important;
}

.current-plan-badge {
    color: #10b981;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 15px;
}

/* FAQ Section */
.custom-faq .accordion-item { background: transparent; border: 0; border-bottom: 1px solid var(--peritiq-border-primary); }
.custom-faq .accordion-button { font-size: 1.2rem; color: var(--peritiq-text-primary); background: transparent; padding: 1.5rem 0; font-weight: 500; }
.custom-faq .accordion-button:not(.collapsed) { color: var(--peritiq-accent-signal); box-shadow: none; }
.custom-faq .accordion-button:focus { box-shadow: none; }
.custom-faq .accordion-body { padding: 0 0 1.5rem 0; color: var(--peritiq-text-secondary);}
.custom-faq .accordion-button::after {
    content: '+'; font-family: 'Inter', sans-serif; font-size: 2rem;
    background-image: none; transform: rotate(0); transition: transform 0.3s ease;
    color: var(--peritiq-accent-signal);
}
.custom-faq .accordion-button:not(.collapsed)::after { transform: rotate(45deg); }

/* CTA Section */
#cta { 
    /* The background-color property has been removed */
    border-radius: 20px; 
}

/* --- 6. Footer --- */
.site-footer {
    /* The background-color property has been removed */
    padding: 60px 0 40px 0;
    border-top: 1px solid var(--peritiq-border-primary);
}
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; }
.footer-column h4 { font-size: 1.1rem; margin-bottom: 20px; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { text-decoration: none; color: var(--peritiq-text-secondary); transition: color 0.3s ease; }
.footer-links a:hover { color: var(--peritiq-accent-signal); }
.footer-bottom { text-align: center; margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--peritiq-border-primary); font-size: 0.9rem; color: var(--peritiq-text-secondary); }

/* --- 7. Responsive Design --- */
@media (max-width: 992px) {
    .nav-links { 
        display: none; 
    }
    .mobile-menu-toggle {
        display: block;
    }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-content { text-align: center; }
    .hero-content .section-subtitle { margin: 0 auto 2rem auto; }
    .hero-cta-wrapper { justify-content: center; }
    .hero-animation-container { 
        margin-top: 3rem; 
        perspective: none;
    }
    .hero-chat-animation { 
        transform: none;      /* Keeps the 3D effect disabled */
        height: 330px;      /* NEW: A fixed height, taller than desktop's 255px */
        overflow: hidden;   /* Hides any overflow, as the box is now tall enough */
    }
}
@media (max-width: 768px) {
    section { padding: 80px 0; }
    .section-title { font-size: 2.2rem; }
    /* Adjusted min-size from 2.8rem to 2.2rem for better fit on narrow phones */
    .hero-content h1 { 
        font-size: clamp(2.2rem, 9vw, 3.5rem); 
    }
    #features .row { text-align: center; }
    #features .row .col-md-10 { text-align: center !important; }
}

/* --- NEW: Hero Chat Typing Animation --- */
.chat-bubble.typing {
    background-color: var(--peritiq-background-base);
    color: var(--peritiq-text-secondary);
    border: 1px solid var(--peritiq-border-primary);
    border-bottom-left-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 18px 18px;
    width: 70px;
}

.chat-bubble.typing span {
    width: 8px;
    height: 8px;
    background-color: var(--peritiq-gray-light);
    border-radius: 50%;
    animation: typing-pulse 1.4s infinite;
}

.chat-bubble.typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.chat-bubble.typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing-pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- 5.5 Privacy Banner --- */
#privacy-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--peritiq-graphite-soft);
    padding: 1rem 1.5rem;
    padding-bottom: 2rem;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    box-shadow: none;
}
#privacy-banner p {
    margin: 0;
    color: var(--peritiq-text-secondary);
    text-align: center;
}
.banner-buttons {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}
.cookie-banner-btn {
    padding: 0.6rem 1.2rem;
    border-radius: var(--peritiq-border-radius);
    border: 2px solid var(--peritiq-brand-primary);
    background-color: var(--peritiq-brand-primary);
    color: var(--peritiq-text-inverse);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}
.cookie-banner-btn:hover {
    background-color: var(--peritiq-brand-primary-hover);
    border-color: var(--peritiq-brand-primary-hover);
    transform: scale(1.02); /* Changed to a small scale */
}
@media (max-width: 768px) {
    #privacy-banner {
        flex-direction: column;
        gap: 1rem;
        padding-bottom: 1.5rem;
    }
}

#main-header .btn-primary {
    background-color: transparent;
    border: 2px solid var(--peritiq-brand-primary);
    color: var(--peritiq-brand-primary);
    will-change: transform;
}


#main-header .btn-primary:hover {
    background-color: var(--peritiq-brand-primary-hover);
    border-color: var(--peritiq-brand-primary-hover);
    color: var(--peritiq-text-inverse);
    transform: scale(1.03); /* This is safer and won't flicker */
    transition: all 0.3s ease; /* Re-add transition here */
}

/* --- NEW: Enterprise CTA Banner below pricing grid --- */
.enterprise-cta-banner {
    max-width: 1000px;
    margin: 40px auto 0 auto;
    padding: 25px 30px;
    background-color: var(--peritiq-background-secondary);
    border-radius: var(--peritiq-border-radius);
    border-left: 4px solid var(--peritiq-accent-signal); /* The cyan line */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.enterprise-cta-content h4 {
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
    color: var(--peritiq-text-primary);
}

.enterprise-cta-content p {
    margin: 0;
    color: var(--peritiq-text-secondary);
}

.enterprise-cta-banner .btn-secondary {
    flex-shrink: 0; /* Prevents the button from shrinking */
}

/* Responsive behavior for the banner */
@media (max-width: 768px) {
    .enterprise-cta-banner {
        flex-direction: column;
        text-align: center;
        padding: 30px;
    }

    .enterprise-cta-banner .btn-secondary {
        width: 100%;
    }
}

/* =================================================================
   NEW: Pricing Page UI/UX Refinements (Oct 2025)
   ================================================================= */

/* --- 2. Spacing and Alignment --- */

/* Ensure all cards have equal height and align content */
.pricing-grid {
    align-items: stretch; /* Makes grid items equal height */
}
.pricing-card {
    display: flex;
    flex-direction: column; /* Ensures content inside stretches */
}
.features-list {
    flex-grow: 1; /* Pushes button to the bottom */
}

/* Add more vertical breathing space between features */
.features-list li {
    margin-bottom: 12px;
}

/* Tighten the top margin of the main page subtitle */
.section-subtitle {
    margin-top: -0.5rem; /* Adjust as needed */
    margin-bottom: 40px;
}

/* --- 3. Typography Hierarchy --- */

/* Use larger, bold prices */
.price {
    font-size: 2.8rem; /* Made slightly larger for impact */
    font-weight: 700;
}

/* Make /user/month smaller and in a neutral gray */
.price-per {
    color: #A0A0A0;
    font-size: 0.9rem;
}

/* --- 4. CTA Buttons --- */

/* Pro plan button is already yellow by default via .btn-primary */

/* Style Starter & Business buttons with a subtle outline */
.pricing-card.starter .btn-primary,
.pricing-card.business-premium .btn-primary {
    background-color: transparent;
    border: 2px solid var(--peritiq-border-primary);
    color: var(--peritiq-text-primary);
}

/* --- 5. Micro-Interactions (Hover Effects) --- */

.pricing-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* On hover, lift the card and intensify the shadow */
.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Animate the outline buttons to filled on card hover */
.pricing-card.starter:hover .btn-primary,
.pricing-card.business-premium:hover .btn-primary {
    background-color: var(--peritiq-brand-primary);
    border-color: var(--peritiq-brand-primary);
    color: var(--peritiq-text-inverse);
}

/* Add a slight scale effect to all buttons on hover */
.pricing-card .btn-primary:hover {
    transform: scale(1.03);
}

/* --- 6. Monthly/Yearly Toggle --- */

.pricing-toggle-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--peritiq-text-secondary);
}

/* --- Updated Toggle Switch & Badges --- */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    flex-shrink: 0; /* Prevents squishing */
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--peritiq-graphite-medium);
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

/* Yellow color for Yearly/Active state to match branding */
input:checked + .slider {
    background-color: #F7CB18; 
}

input:checked + .slider:before {
    transform: translateX(24px);
}

/* Active Text State */
.toggle-label {
    transition: color 0.3s ease;
}
.toggle-label.active {
    color: #fff;
    font-weight: 700;
}

/* Growth Hack: "2 Months Free" Badge */
.badge-save-percent {
    background-color: #10b981; /* Growth Green */
    color: #ffffff;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 12px;
    margin-left: 8px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
    vertical-align: middle;
    display: inline-block;
}

/* --- 8.5 Launch Soon Modal --- */
.dev-notify-modal-overlay {
    position: fixed; /* Position relative to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Semi-transparent background */
    background-color: rgba(25, 25, 35, 0.8);
    backdrop-filter: blur(8px);

    /* Use flexbox to center the modal */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* ** This is the key fix **
    The main header is at z-index 1000, so we set the modal higher.
    */
    z-index: 2000; 
}

.dev-notify-modal {
    background-color: var(--peritiq-background-secondary);
    padding: 40px 50px;
    border-radius: var(--peritiq-border-radius);
    border: 1px solid var(--peritiq-border-primary);
    width: 100%;
    max-width: 520px; /* Control the modal width */
    text-align: center;
}

/* =================================================================
   NEW: 8. Authentication Pages (Login, Reset, etc.)
   ================================================================= */

/* --- Centering and Box Styling --- */
.auth-container {
    width: 100%;
    max-width: 460px;
    
    /* NEW: This is the centering fix.
      'margin: auto;' tells the flex container (body) to center
      this element both vertically and horizontally.
    */
    margin: auto; 
    
    padding: 2.5rem 3rem;
    background-color: var(--peritiq-background-secondary);
    border: 1px solid var(--peritiq-border-primary);
    border-radius: var(--peritiq-border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.auth-container .auth-title {
    font-family: var(--peritiq-font-heading);
    color: var(--peritiq-text-primary);
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 2rem;
}

/* --- Form Element Styling --- */
form#reset-password-form .form-group {
    margin-bottom: 1.5rem;
}

.auth-container label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--peritiq-text-secondary);
    font-size: 0.95rem;
}

.auth-container input[type="password"],
.auth-container input[type="email"],
.auth-container input[type="text"] {
    display: block;
    width: 100%;
    padding: 12px 15px;
    background-color: var(--peritiq-background-base);
    border: 1px solid var(--peritiq-border-primary);
    border-radius: var(--peritiq-border-radius);
    color: var(--peritiq-text-primary);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.auth-container input[type="password"]:focus,
.auth-container input[type="email"]:focus,
.auth-container input[type="text"]:focus {
    outline: none;
    border-color: var(--peritiq-accent-signal);
    box-shadow: 0 0 0 3px rgba(0, 199, 199, 0.25);
}

/* --- Validation & Strength Meter --- */
.auth-container input.is-invalid {
    border-color: #e74c3c !important; /* Red for error */
}
.auth-container input.is-valid {
    border-color: #2ecc71 !important; /* Green for success */
}

form#reset-password-form .password-strength-meter {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.strength-bar {
    flex-grow: 1;
    height: 6px;
    background-color: var(--peritiq-graphite-medium);
    border-radius: 3px;
    transition: all 0.4s ease;
}
.strength-bar.weak { background-color: #e74c3c; }
.strength-bar.medium { background-color: #f39c12; }
.strength-bar.strong { background-color: #2ecc71; }
.strength-bar.very-strong { background-color: var(--peritiq-accent-signal); }

.strength-text { color: var(--peritiq-text-secondary); transition: color 0.4s ease; }
.strength-text.weak { color: #e74c3c; }
.strength-text.medium { color: #f39c12; }
.strength-text.strong { color: #2ecc71; }
.strength-text.very-strong { color: var(--peritiq-accent-signal); }

/* --- Button Styling --- */
form#reset-password-form .btn-primary {
    width: 100%;
    padding: 14px;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1.5rem; /* BUG FIX: Adds space above the button */
}

.auth-container .btn-primary:disabled {
    background-color: var(--peritiq-graphite-medium);
    border-color: var(--peritiq-graphite-medium);
    color: var(--peritiq-text-secondary);
    cursor: not-allowed;
    transform: none;
}

/* --- Alerts and Links --- */
.auth-alert {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: var(--peritiq-border-radius);
    border: 1px solid transparent;
    font-size: 0.95rem;
    line-height: 1.5;
}

.auth-alert-error {
    background-color: rgba(185, 146, 159, 0.1); /* Based on --peritiq-rose-graphite */
    border-color: var(--peritiq-rose-graphite);
    color: #f0c0cb;
}

.auth-alert-success {
    background-color: rgba(0, 199, 199, 0.1); /* Based on --peritiq-accent-signal */
    border-color: var(--peritiq-accent-signal);
    color: var(--peritiq-accent-signal);
}

.auth-link {
    display: block;
    text-align: center;
    margin-top: 1.5rem;
    color: var(--peritiq-accent-signal);
    text-decoration: none;
    font-size: 0.9rem;
}

.auth-link:hover {
    text-decoration: underline;
}

/* ADD THIS ENTIRE NEW RULE */
.auth-container .auth-subtitle {
    text-align: center;
    color: var(--peritiq-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-top: -1.5rem; /* Pulls it closer to the title */
    margin-bottom: 2rem; /* Pushes the form fields down */
}

/* =================================================================
   9. Expert Section Styles
   ================================================================= */

/* --- Expert Grid on Homepage --- */
.expert-grid {
    display: grid;
    /* THIS IS THE FIX: We stop the column from growing to 1fr */
    /* It will now be between 300px and 350px wide. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 350px));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    /* This centers the card (or group of cards) */
    justify-content: center;
}
.expert-card {
    background-color: var(--peritiq-background-secondary);
    border: 1px solid var(--peritiq-border-primary);
    border-radius: var(--peritiq-border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.expert-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.expert-image-link {
    display: block;
}

.expert-image {
    width: 100%;
    height: 320px;
    object-fit: cover;
    object-position: center; /* <-- THIS IS THE FIX */
    border-bottom: 1px solid var(--peritiq-border-primary);
}

.expert-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.expert-name {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.expert-name a {
    text-decoration: none;
    color: var(--peritiq-text-primary);
    transition: color 0.3s ease;
}
.expert-name a:hover {
    color: var(--peritiq-accent-signal);
}

.expert-title {
    color: var(--peritiq-text-accent);
    font-weight: 500;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.expert-bio {
    font-size: 0.95rem;
    color: var(--peritiq-text-secondary);
    flex-grow: 1;
    margin-bottom: 1.5rem;
}

.expert-social-links {
    display: flex;
    gap: 1rem;
    margin-top: auto; /* Pushes to the bottom */
    justify-content: center; /* <-- ADD THIS LINE TO CENTER ICONS */
}

.expert-social-links a {
    color: var(--peritiq-text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.expert-social-links a:hover {
    color: var(--peritiq-accent-signal);
}
.expert-social-links .material-symbols-outlined {
    font-size: 1.8rem;
}

@media (max-width: 768px) {
    .expert-profile-header {
        flex-direction: column;
        text-align: center;
    }
    .expert-profile-name {
        font-size: 2.2rem;
    }
    .expert-profile-title {
        font-size: 1.2rem;
    }
    .expert-profile-links {
        justify-content: center;
    }
}

        /* --- Main Content Area --- */
        .error-main {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 1rem;
            min-height: calc(100vh - 200px); 
        }

        /* --- Content Wrapper (inside main) --- */
        .error-container {
            max-width: 560px;
            width: 100%;
            animation: fadeInSlideUp 0.8s ease-out forwards;
        }

        /* --- Icon --- */
        .error-icon {
            margin-bottom: 1.5rem;
            color: var(--peritiq-accent-signal);
            animation: popIn 0.6s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
        }

        /* --- Typography --- */
        .error-code {
            font-family: var(--peritiq-font-heading);
            font-size: clamp(5rem, 20vw, 8rem); 
            line-height: 1;
            margin: 0;
            background: linear-gradient(45deg, var(--peritiq-accent-signal), #8B5CF6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1rem;
        }

        .error-header {
            font-family: var(--peritiq-font-heading);
            font-size: 1.75rem;
            font-weight: 700;
            margin: 0 0 0.75rem 0;
            color: var(--peritiq-text-primary);
        }

        .error-subheader {
            font-size: 1.125rem;
            color: var(--peritiq-text-secondary);
            margin: 0 0 2.5rem 0;
            line-height: 1.6;
        }

        /* --- Button --- */
        .btn-home {
            display: inline-block;
            padding: 0.875rem 2rem;
            background: linear-gradient(45deg, var(--peritiq-accent-signal), #8B5CF6);
            color: var(--peritiq-white);
            font-size: 1rem;
            font-weight: 500;
            text-decoration: none;
            border: none;
            border-radius: var(--peritiq-border-radius);
            transition: transform 0.2s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .btn-home:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 199, 199, 0.3);
        }
        
        /* --- Animations --- */
        @keyframes fadeInSlideUp {
            from {
                opacity: 0;
                transform: translateY(25px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes popIn {
            from {
                opacity: 0;
                transform: scale(0.5);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

/* --- Single Expert Profile Page (Pro Layout) --- */
#expert-profile {
    padding-top: 140px; /* Increased offset for header */
    padding-bottom: 100px; /* Add breathing room at the bottom */
    min-height: 100vh; /* **Full Height Page** */
    display: flex;
    flex-direction: column;
    align-items: center; /* **Horizontal Centering** */
    justify-content: center; /* **Vertical Centering** */
}

/* This container now centers ALL its content */
.expert-profile-info {
    text-align: center;
}

/* This rule is now obsolete, we remove it */
/* .expert-profile-header { ... } */

.expert-profile-image {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--peritiq-border-primary);
    margin: 0 auto 1.5rem auto; /* **Centers the image above the text** */
    display: block; /* Ensures margin:auto works */
}

.expert-profile-name {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--peritiq-text-primary);
    text-align: center; /* Ensure centering */
}

.expert-profile-title {
    font-size: 1.5rem;
    color: var(--peritiq-text-accent);
    font-weight: 500;
    margin-top: 0.1rem; /* Tighter margin */
    text-align: center;
}

.expert-profile-links {
    display: flex;
    gap: 1rem;
    margin-top: 2rem; /* Give buttons more space */
    justify-content: center; /* **Centers the buttons** */
}

.expert-profile-body {
    /* VISUAL BOX (The Card) */
    background-color: rgba(255, 255, 255, 0.03); /* Subtle lighter background */
    border: 1px solid var(--peritiq-border-primary); /* Defines the edges */
    border-radius: 24px; /* Smooth rounded corners */
    padding: 3.5rem; /* Spacious internal padding */
    
    /* POSITIONING */
    margin-top: 3rem; /* Gap between Social Links and this Card */
    width: 100%;
    max-width: 850px; /* Slightly contained width looks more premium */
    margin-left: auto;
    margin-right: auto;
    
    /* Reset old styles */
    border-top: 1px solid var(--peritiq-border-primary); /* Ensures full border */
    box-shadow: 0 4px 20px rgba(0,0,0, 0.2); /* Subtle depth */
}

/* Mobile Adjustment for the Card */
@media (max-width: 768px) {
    .expert-profile-body {
        padding: 2rem;
        margin-top: 2rem;
        width: 95%; /* Prevent touching screen edges on mobile */
    }
}

.expert-profile-body .section-title-small {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--peritiq-text-primary);
    margin-bottom: 1.5rem;
    text-align: center; /* **Center 'About' title** */
}

.expert-profile-body .expert-bio-full {
    font-size: 1.1rem;
    line-height: 1.8; /* Slightly looser for readability */
    color: var(--peritiq-text-secondary);
    max-width: 750px; /* Constrain bio width */
    margin: 0 auto; /* **Center the bio text block** */
    text-align: center; /* Center the text itself */
}

/*
 * STYLING FÜR EXPERTENPROFIL-SEITE
 */

/* "Zurück"-Link oben auf der Seite */
.expert-profile-back-link {
    margin-bottom: 24px;
    width: 100%;
}

.expert-profile-back-link a {
    text-decoration: none;
    color: #adb5bd; /* Eine dezente Farbe, anpassen nach Bedarf */
    font-size: 0.95rem;
    font-weight: 500;
}

.expert-profile-back-link a:hover {
    color: #ffffff; /* Heller bei Hover */
    text-decoration: underline;
}

/* (Optional) Fügt etwas mehr Platz unter dem Haupt-Header hinzu */
.expert-profile-header {
    margin-bottom: 48px;
}

/* =================================================================
   10. Directory Search Bar (NEW)
   ================================================================= */

/* This is the wrapper we added in expert-matrix.php */
.directory-search-bar {
    position: relative;
    /* Center the search bar on the page */
    max-width: 500px; 
    /* 1.5rem top, auto left/right, 3rem bottom */
    margin: 1.5rem auto 3rem auto; 
}

/* This styles the 'search' icon */
.directory-search-bar .material-symbols-outlined {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--peritiq-text-secondary); /* Uses global variable */
    pointer-events: none; /* So you can click the input through it */
}

/* This styles the <input> field itself */
#expert-search-input {
    width: 100%;
    padding: 0.85rem 1rem 0.85rem 3.2rem; /* 3.2rem left padding for the icon */
    background-color: var(--peritiq-background-base); /* Uses global variable */
    border: 1px solid var(--peritiq-border-primary); /* Uses global variable */
    border-radius: 2rem; /* Pill shape */
    color: var(--peritiq-text-primary); /* Uses global variable */
    font-size: 1rem;
    transition: all 0.2s ease-in-out;
}

/* Style for the placeholder text */
#expert-search-input::placeholder {
    color: var(--peritiq-text-secondary);
}

/* Style for when the user clicks the search bar */
#expert-search-input:focus {
    outline: none;
    border-color: var(--peritiq-accent-signal); /* Uses global variable */
    box-shadow: 0 0 0 3px rgba(0, 199, 199, 0.2); 
    background-color: var(--peritiq-background-secondary); /* Uses global variable */
}

.price-billed-annually {
    font-size: 0.9rem;
    color: var(--peritiq-text-secondary);
    margin-top: 0.5rem;
}

.price-billed-annually {
    font-size: 0.95rem; /* Slightly larger */
    color: var(--peritiq-accent-signal); /* <-- YOUR BRAND'S CYAN COLOR */
    margin-top: 0.5rem;
    font-weight: 600; /* <-- MAKES IT BOLD AND IMPORTANT */
}

.price-billed-annually .old-price {
    color: var(--peritiq-text-secondary);
    text-decoration: line-through;
    font-weight: 400;
    margin-left: 0.5rem;
}

.pricing-card .plan-description {
    text-align: left;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    color: var(--peritiq-text-secondary);
}





/* COUNTDOWN */
/* =================================================================
   11. Launch Countdown Modal
   ================================================================= */

#launch-countdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(25, 25, 35, 0.85); /* --peritiq-blue-deep with alpha */
    backdrop-filter: blur(10px);
    display: flex; /* Changed from 'none' to 'flex' for JS */
    align-items: center;
    justify-content: center;
    z-index: 9998; /* Just below auth modal */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#launch-countdown-overlay.is-visible {
    opacity: 1;
}

#launch-countdown-modal {
    position: relative;
    background-color: var(--peritiq-background-secondary);
    border: 1px solid var(--peritiq-border-primary);
    border-radius: var(--peritiq-border-radius);
    width: 100%;
    max-width: 500px;
    padding: 2.5rem 3rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    text-align: center;
    
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* "Pop" effect */
}

#launch-countdown-overlay.is-visible #launch-countdown-modal {
    transform: scale(1);
    opacity: 1;
}

/* Re-use existing modal close button style if possible */
#launch-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--peritiq-text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
}
#launch-modal-close:hover {
    background-color: var(--peritiq-graphite-medium);
    color: var(--peritiq-text-primary);
}
#launch-modal-close .material-symbols-outlined {
    font-size: 1.8rem;
}

.launch-modal-icon {
    font-size: 3rem;
    color: var(--peritiq-accent-signal);
    background-color: rgba(0, 199, 199, 0.1);
    padding: 15px;
    border-radius: 50%;
    margin-bottom: 1rem;
    display: inline-block;
}

.launch-modal-content h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--peritiq-text-primary);
    margin-bottom: 0.75rem;
}

.launch-modal-content p {
    color: var(--peritiq-text-secondary);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.countdown-timer {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--peritiq-background-base);
    border: 1px solid var(--peritiq-border-primary);
    border-radius: var(--peritiq-border-radius);
    width: 80px;
    height: 80px;
}

.time-block span {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--peritiq-text-primary);
    line-height: 1.1;
}

.time-block small {
    font-size: 0.8rem;
    color: var(--peritiq-text-secondary);
    text-transform: uppercase;
    font-weight: 500;
}

.launch-modal-content .btn-primary {
    font-size: 1.1rem;
    padding: 14px;
}

/* =================================================================
   12. Testimonial Modal Styles (NEW)
   ================================================================= */

/* --- 1. Override Bootstrap Modal for Dark Theme --- */
#testimonialModal .modal-content {
    background-color: var(--peritiq-background-secondary);
    border: 1px solid var(--peritiq-border-primary);
    border-radius: var(--peritiq-border-radius);
    color: var(--peritiq-text-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative; /* Anchor for the close button */
}

#testimonialModal .modal-header {
    border-bottom: none; /* REMOVED: No line below title */
    display: flex;
    justify-content: center; /* NEW: Centers the title */
    align-items: center;
    width: 100%;
    padding: 1rem; 
    padding-top: 1.5rem;
}

/* UX IMPROVEMENT: Absolute positioning for the close button */
#testimonialModal .btn-close {
    position: absolute;
    top: 20px;
    right: 20px;
    margin: 0;
    filter: invert(1) grayscale(100%); /* UPDATED: Removed brightness boost to make it grayer */
    opacity: 0.4; /* UPDATED: Lower opacity to make it less dominant */
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

#testimonialModal .btn-close:hover {
    opacity: 1;
    transform: scale(1.1);
}

#testimonialModal .modal-title {
    font-family: var(--peritiq-font-heading);
    font-weight: 600;
    margin: 0;
}

/* --- 2. Style Custom Form Elements --- */

/* Star Rating Input */
.star-rating-input {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 1.5rem;
}

.star-rating-input .star {
    cursor: pointer;
    color: var(--peritiq-yellow);
    user-select: none;          /* Prevents blue text highlight selection */
    -webkit-user-select: none;  /* Safari support */
    -moz-user-select: none;     /* Firefox support */
}

.star-rating-input .star .material-symbols-outlined {
    font-size: 3rem;
    transition: transform 0.2s ease, font-variation-settings 0.2s ease;
}

/* Force filled style when class 'filled' is added by JS */
.star-rating-input .star .material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1;
}

.star-rating-input .star:hover .material-symbols-outlined {
    transform: scale(1.15);
}

/* Form Inputs - Improved Contrast */
#testimonialModal .form-control {
    background-color: rgba(255, 255, 255, 0.07); /* Slightly lighter than base */
    border: 1px solid var(--peritiq-border-primary);
    color: var(--peritiq-text-primary);
    padding: 14px 15px;
    font-size: 1rem;
}

#testimonialModal .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4); /* Ensure placeholder is visible */
}

#testimonialModal .form-control:focus {
    outline: none;
    border-color: var(--peritiq-accent-signal);
    box-shadow: 0 0 0 3px rgba(0, 199, 199, 0.25);
    background-color: rgba(255, 255, 255, 0.1); 
}

/* --- Custom Scrollbar for Modal Textarea --- */
#testimonialModal textarea::-webkit-scrollbar {
    width: 6px;
}

#testimonialModal textarea::-webkit-scrollbar-track {
    background: transparent;
}

#testimonialModal textarea::-webkit-scrollbar-thumb {
    background-color: var(--peritiq-border-primary);
    border-radius: 10px;
}

#testimonialModal textarea::-webkit-scrollbar-thumb:hover {
    background-color: var(--peritiq-accent-signal);
}

/* Character Counters */
#title-char-counter, 
#comment-char-counter {
    color: var(--peritiq-text-secondary);
    font-size: 0.85rem;
}

/* Consent Checkbox Container Fix - Full Width & Natural Text Flow */
#testimonialModal .form-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 1rem;
    padding-left: 0 !important; /* Reset Bootstrap padding */
    margin-left: 0 !important;  /* Reset Bootstrap margin */
    width: 100%;                /* Ensure container takes full available width */
    box-sizing: border-box;     /* Ensure padding doesn't affect width calculation */
}

#testimonialModal .form-check-label {
    color: var(--peritiq-text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    line-height: 1.5;
    margin-top: 0;
    
    /* FIX: Force text to fill the line before wrapping */
    flex: 1;              
    width: auto;          
    white-space: normal;  
    text-align: left;     
    display: block;       
}

#testimonialModal .form-check-input {
    background-color: var(--peritiq-background-base);
    border: 1px solid var(--peritiq-border-primary);
    cursor: pointer;
    flex-shrink: 0;       /* Prevent checkbox from squishing */
    margin-top: 3px;      /* Align with the first line of text */
    margin-left: 0 !important; 
    float: none !important;    
    width: 16px;          
    height: 16px;
}

#testimonialModal .form-check-input:checked {
    background-color: var(--peritiq-accent-signal);
    border-color: var(--peritiq-accent-signal);
}

/* Feedback Line */
.feedback-line {
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 1rem;
    min-height: 1.2em; /* Prevents layout jump */
    font-weight: 500;
}

/* JS adds .show class */
.feedback-line.show { 
    display: block; 
}
.feedback-line.invalid { 
    color: #FF4757; /* Error red */
}
.feedback-line.valid, 
.feedback-line.validating { 
    color: var(--peritiq-accent-signal); /* Theme cyan */
}

/* Submit Button */
#submit-testimonial-btn {
    /* Uses the .btn-primary styles from main.css */
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    font-weight: 600;
}

#submit-testimonial-btn:disabled {
    background-color: var(--peritiq-graphite-medium);
    border-color: var(--peritiq-graphite-medium);
    color: var(--peritiq-text-secondary);
    cursor: not-allowed;
    transform: none;
}

/* --- 3. "Thank You" Step --- */
#step-thanks {
    padding: 2rem 0;
    text-align: center;
}

#step-thanks .success-icon {
    font-size: 4rem;
    color: var(--peritiq-accent-signal);
}

#step-thanks h4 {
    color: var(--peritiq-text-primary);
    font-weight: 600;
    margin-top: 1rem;
}

#step-thanks p {
    color: var(--peritiq-text-secondary);
    font-size: 1rem;
    margin-bottom: 0;
}

/* =================================================================
   13. Unified Contact Modals (Expert & Enterprise)
   ================================================================= */

/* --- Expert Profile Page: Static Contact Box (Not the Modal) --- */
.expert-contact-container {
    background-color: var(--peritiq-background-secondary) !important;
    border: 1px solid var(--peritiq-border-primary) !important;
    border-radius: var(--peritiq-border-radius) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.expert-contact-container h3 {
    font-family: var(--peritiq-font-heading);
    color: var(--peritiq-text-primary);
    font-weight: 600;
}

.expert-contact-container input,
.expert-contact-container textarea {
     background-color: #1F1F2B !important;
     border: 1px solid var(--peritiq-border-primary);
     color: #FFFFFF !important;
}

/* =================================================================
   13. Unified Contact Modals (Expert & Enterprise)
   Harmonized with .peritiq-modal-wide
   ================================================================= */

/* 1. Dialog Wrapper - FIXES THE WIDTH BUG */
#enterpriseContactModal .modal-dialog,
#expertContactModal .modal-dialog,
.modal-dialog.peritiq-modal-wide,
.peritiq-modal-wide {
    max-width: 700px !important; /* Forces the wider 700px width */
    width: 100% !important;      /* Ensures it fills available space */
    margin: 1.75rem auto !important; /* Centers it horizontally */
}

/* 2. Modal Content (Background & Text) */
#enterpriseContactModal .modal-content,
#expertContactModal .modal-content,
.peritiq-modal-wide .modal-content {
    background-color: var(--peritiq-background-secondary) !important; /* Force Dark BG */
    border: 1px solid var(--peritiq-border-primary) !important;
    border-radius: var(--peritiq-border-radius) !important;
    color: var(--peritiq-text-primary) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
}

/* 3. Header & Body Spacing */
#enterpriseContactModal .modal-header,
#expertContactModal .modal-header,
.peritiq-modal-wide .modal-header {
    justify-content: flex-start;
    padding: 2rem 2.5rem 0.5rem 2.5rem;
    border-bottom: none;
}

#enterpriseContactModal .modal-body,
#expertContactModal .modal-body,
.peritiq-modal-wide .modal-body {
    padding: 0 2.5rem 2.5rem 2.5rem;
    text-align: left !important;
}

#enterpriseContactModal .modal-title,
#expertContactModal .modal-title,
.peritiq-modal-wide .modal-title {
    font-family: var(--peritiq-font-heading);
    font-weight: 600;
    font-size: 1.5rem;
    text-align: left !important;
    width: 100%;
}

/* 4. Close Button */
#enterpriseContactModal .btn-close,
#expertContactModal .btn-close,
.peritiq-modal-wide .btn-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1056;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23A9A9B2'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity: 0.6;
    width: 1.5rem;
    height: 1.5rem;
    box-shadow: none;
}
.peritiq-modal-wide .btn-close:hover { opacity: 1; transform: scale(1.1); }

/* 5. FORM INPUTS */
.peritiq-modal-wide input,
.peritiq-modal-wide textarea,
.peritiq-modal-wide .form-control,
#cost-modal input,
#cost-modal textarea,
#product-modal input,
#product-modal textarea,
#product-modal select,
#cost-modal select {
    background-color: #1F1F2B !important; 
    border: 1px solid var(--peritiq-border-primary) !important;
    color: #FFFFFF !important; 
    font-size: 1rem;
    padding: 0.8rem 1rem;
    border-radius: var(--peritiq-border-radius);
    width: 100% !important;
}

.peritiq-modal-wide input::placeholder,
.peritiq-modal-wide textarea::placeholder,
.peritiq-modal-wide .form-control::placeholder,
#cost-modal input::placeholder,
#cost-modal textarea::placeholder,
#product-modal input::placeholder,
#product-modal textarea::placeholder {
    color: #A9A9B2 !important; 
    opacity: 1;
}

.peritiq-modal-wide input:focus,
.peritiq-modal-wide textarea:focus,
.peritiq-modal-wide .form-control:focus,
#cost-modal input:focus,
#cost-modal textarea:focus,
#product-modal input:focus,
#product-modal textarea:focus,
#product-modal select:focus,
#cost-modal select:focus {
    background-color: #1F1F2B !important;
    border-color: var(--peritiq-accent-signal) !important;
    box-shadow: 0 0 0 3px rgba(0, 199, 199, 0.1) !important;
    color: #FFFFFF !important;
    outline: none;
}

/* 6. Labels */
.peritiq-modal-wide label,
.peritiq-modal-wide .form-label {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
    color: var(--peritiq-text-secondary) !important;
    display: block;
    text-align: left !important;
}

/* 7. Turnstile Alignment */
.peritiq-modal-wide .cf-turnstile {
    display: flex;
    justify-content: center !important;
    margin: 0 0 1.5rem 0 !important;
}


/* --- Password Toggle Button (Show/Hide) --- */

/* 1. Position the container relative so the absolute button stays inside */
.password-input-container,
.password-input-wrapper {
    position: relative;
}

/* 2. Position the button to the right */
.password-toggle-btn {
    position: absolute;
    /* Fallback for old structure (Login Modal) */
    top: 33px; 
    /* Perfect centering for new structure (Reset Page) */
    right: 15px;
    background: transparent;
    border: none;
    color: var(--peritiq-text-secondary);
    cursor: pointer;
    padding: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
    line-height: 1;
}

/* OVERRIDE: Perfect center when using the new wrapper */
.password-input-wrapper .password-toggle-btn {
    top: 50%;
    transform: translateY(-50%);
}

.password-toggle-btn:hover {
    color: var(--peritiq-accent-signal);
}

/* 3. Ensure text doesn't overlap the icon */
.auth-container input[type="password"],
.auth-container input[type="text"]#reg_password, 
.auth-container input[type="text"]#new_password,
.auth-container input[type="text"]#confirm_new_password {
    padding-right: 45px;
}

/* =================================================================
   Expert Profile - Compact Chip Grid (Pro Gray Pills)
   ================================================================= */

/* =================================================================
   Expert Profile - Compact Chip Grid (Pro Gray Pills)
   ================================================================= */

/* Container: Holds the Label + The Grid */
.expert-offers-container {
    /* Top: Space from the "About" Title */
    margin-top: 1.5rem; 
    
    /* Bottom: Space before the Bio Text starts */
    margin-bottom: 3rem; 
    
    /* Alignment */
    text-align: center;
    width: 100%;
    max-width: 900px; /* Slightly wider to fit 3 items comfortably */
    margin-left: auto;
    margin-right: auto;
    
    /* GROUPING: Flex column to manage internal vertical spacing */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px; /* Consistent gap between Label and Grid */
}

/* The Label: "Available Opportunities" */
.offers-label {
    font-size: 0.75rem; /* Slightly smaller for elegance */
    text-transform: uppercase;
    letter-spacing: 2px; /* Increased letter spacing */
    color: var(--peritiq-text-secondary);
    font-weight: 700;
    opacity: 0.7;
    margin-bottom: 0; /* Let container 'gap' handle spacing */
    line-height: 1; /* Tighter line height prevents drift */
}

/* The Grid: Holds the Pills */
.offers-grid {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; /* Center items horizontally */
    gap: 16px; /* Space between chips */
    width: 100%;
}

/* The Pill: Individual Offer - Badge inside on right */
.offer-chip {
    /* Base Style */
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--peritiq-border-primary);
    border-radius: 30px; /* Rounded but allows multi-line */
    padding: 14px 20px;
    
    /* Layout - Horizontal, centered by default (no badge) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    
    /* Typography & Interaction */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    user-select: none;
    min-width: 280px;
    max-width: 500px;
}

/* When badge is present, left-align text and push badge to right */
.offer-chip:has(.chip-badge) {
    justify-content: space-between;
}

/* Hover Animation: Lift & Glow */
.offer-chip:hover {
    transform: translateY(-4px);
    background-color: var(--peritiq-background-secondary); 
    border-color: var(--peritiq-accent-signal); 
    box-shadow: 0 8px 20px rgba(0, 199, 199, 0.12);
}

/* Active State (Click) */
.offer-chip:active {
    transform: scale(0.97);
}

/* Service Name Text */
.chip-name {
    font-family: var(--peritiq-font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--peritiq-text-primary);
    white-space: normal; /* Allow text wrapping */
    text-align: center;
    line-height: 1.4;
}

/* When badge is present, left-align text and take remaining space */
.offer-chip:has(.chip-badge) .chip-name {
    text-align: left;
    flex: 1;
}

/* Badge Wrapper - Inside chip on right */
.chip-badge {
    background-color: rgba(247, 203, 24, 0.15);
    border: 1px solid rgba(247, 203, 24, 0.4); 
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: all 0.2s ease;
    flex-shrink: 0; /* Prevent badge from shrinking */
    min-width: 52px; /* Fixed width for consistent badge size */
    box-sizing: border-box;
}

/* Badge Text Elements */
.chip-value {
    font-weight: 800;
    color: var(--peritiq-yellow);
    font-size: 1rem;
    line-height: 1;
}

.chip-suffix {
    font-size: 0.55rem;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255,255,255, 0.7);
    letter-spacing: 0.5px;
}

/* Hover States for Badge */
.offer-chip:hover .chip-badge {
    background-color: var(--peritiq-yellow);
    border-color: var(--peritiq-yellow);
    box-shadow: 0 0 10px rgba(247, 203, 24, 0.4);
}

.offer-chip:hover .chip-value { color: #1a1a1a; }
.offer-chip:hover .chip-suffix { color: #333; }

/* Mobile Tweak */
@media (max-width: 480px) {
    .offers-grid {
        flex-direction: column;
        align-items: stretch;
    }
    .offer-chip {
        border-radius: 16px;
        max-width: 100%;
    }
}

/* =================================================================
   Expert Profile - Mini Social Row
   ================================================================= */

.expert-social-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 24px; /* row-gap | column-gap */
    margin-top: 1rem; 
    /* SEPARATION: Clear gap between Identity and Offers */
    margin-bottom: 2.5rem; 
}

@media (max-width: 480px) {
    .expert-social-mini {
        gap: 12px 16px;
    }
    .social-link-item {
        font-size: 0.85rem;
    }
    .separator {
        display: none;
    }
}

.social-link-item {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Slightly tighter icon gap */
    text-decoration: none;
    color: var(--peritiq-text-secondary);
    font-size: 0.95rem;
    font-weight: 500; /* Medium weight for legibility */
    opacity: 0.8;
    transition: all 0.2s ease;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.social-link-item:hover {
    opacity: 1;
    color: var(--peritiq-text-primary);
    transform: translateY(-1px);
}

.social-icon {
    font-size: 1.2rem; /* Size for Material Symbols */
    width: 1.2rem; /* Size for SVG */
    height: 1.2rem;
    fill: currentColor; /* Matches text color */
    flex-shrink: 0; /* Prevent SVG from collapsing */
    display: inline-block;
    vertical-align: middle;
}

/* Safari SVG fix */
svg.social-icon {
    overflow: visible;
    min-width: 16px;
    min-height: 16px;
}

/* Hover State */
.social-link-item:hover {
    color: var(--peritiq-text-primary); /* White */
    transform: translateY(-2px);
}

.social-link-item:hover .social-icon {
    color: var(--peritiq-accent-signal); /* Teal Glow */
    fill: var(--peritiq-accent-signal);
}

/* Distinct style for "Send Message" if included */
.social-link-item.action-link {
    color: var(--peritiq-accent-signal);
}
.social-link-item.action-link:hover {
    color: #fff;
}

.separator {
    color: var(--peritiq-border-primary);
    font-size: 0.8rem;
}

/* =================================================================
   AAA Terms Table Styles (FIXED: Horizontal Scroll on Mobile)
   ================================================================= */

/* 1. Scrollable Container for ALL tables (Terms, Privacy, etc.) */
.table-responsive,
.terms-container,
.legal-text-wrapper {
    display: block;
    width: 100%;
    /* Forces horizontal scroll instead of breaking layout */
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    margin-bottom: 2rem;
}

/* 2. Unified Table Styling */
.terms-table,
.terms-container table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--peritiq-text-secondary);
    /* Ensures the table is wide enough to be readable, triggering the scroll */
    min-width: 800px; 
    font-size: 0.95rem;
    background-color: var(--peritiq-background-secondary);
    border: 1px solid var(--peritiq-border-primary);
    border-radius: var(--peritiq-border-radius);
    overflow: hidden;
}

.terms-table th,
.terms-table td,
.terms-container table th,
.terms-container table td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--peritiq-border-primary);
    text-align: left;
    vertical-align: top;
    line-height: 1.6;
}

.terms-table th,
.terms-container table th {
    background-color: rgba(255, 255, 255, 0.05);
    font-weight: 700;
    color: var(--peritiq-text-primary);
    white-space: nowrap; /* Keeps headers on one line */
    border-bottom: 2px solid var(--peritiq-accent-signal);
}

.terms-table tr:last-child td,
.terms-container table tr:last-child td {
    border-bottom: none;
}

/* Strong text inside tables */
.terms-table td strong,
.terms-container table td strong {
    color: var(--peritiq-text-primary);
    font-weight: 600;
}

/* Zebra Striping */
.terms-table tr:nth-child(even),
.terms-container table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Mobile Tweak: Ensure the container doesn't overflow the screen */
@media screen and (max-width: 991px) {
    .terms-container,
    .legal-text-wrapper {
        padding: 1.5rem; /* Ensure padding inside the box */
        overflow-x: auto; /* Double check scroll is enabled */
    }
}

/* --- Fix Auth Consent Alignment --- */
.auth-container .form-check {
    display: flex;             /* Enables flexible layout */
    align-items: flex-start;   /* Aligns checkbox to the top line of text */
    justify-content: flex-start;
    padding-left: 0 !important;/* CRITICAL: Removes Bootstrap's default gutter padding */
    margin-left: 0 !important; /* CRITICAL: Ensures container is flush left */
    gap: 12px;                 /* nice space between box and text */
    margin-top: 0.5rem;        /* REDUCED: Tighter vertical rhythm */
    width: 100%;               
}

/* Specific fix for the box position */
.auth-container .form-check-input {
    float: none !important;        /* CRITICAL: Disable Bootstrap float */
    margin-left: 0 !important;     /* CRITICAL: Removes the "far left" negative margin */
    margin-right: 0 !important;
    flex-shrink: 0;                /* Prevents checkbox from squishing */
    margin-top: 4px;               /* Visual tweak to align with text cap-height */
    width: 18px;               
    height: 18px;
    cursor: pointer;
}

.auth-container .form-check label {
    margin-bottom: 0;
    line-height: 1.5;
    color: var(--peritiq-text-secondary);
    cursor: pointer;
    flex: 1;                   /* Ensures text takes up remaining space */
    text-align: left;          /* Forces text to align left */
}

/* =================================================================
   ENTERPRISE MODAL UNIQUE OVERRIDE
   Target: #enterprise-dialog-unique (pricing.php)
   ================================================================= */

@media (min-width: 992px) {
    #enterprise-dialog-unique {
        max-width: 700px !important; /* Forces wider width */
        margin-left: auto !important; 
        margin-right: auto !important;
        display: flex;
        align-items: center;
    }
}

.hero-chip-pill {
    display: inline-flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.08); /* Subtle glass effect */
    border: 1px solid var(--peritiq-border-primary);
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 0.85rem;
    color: var(--peritiq-text-primary);
    transition: all 0.3s ease;
}

.hero-chip-pill:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: var(--peritiq-accent-signal);
    transform: translateY(-2px);
}

.hero-chip-pill .icon {
    font-size: 1.1rem;
    margin-right: 6px;
    color: var(--peritiq-accent-signal);
}

/* =================================================================
   Cookie Consent Banner
   ================================================================= */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(30, 30, 30, 0.97);
    color: #fff;
    padding: 1rem 1.5rem;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
}

.cookie-consent-banner.show {
    display: flex;
}

.cookie-consent-banner__text {
    flex: 1;
    min-width: 280px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.cookie-consent-banner__text h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.cookie-consent-banner__text p {
    margin: 0;
    opacity: 0.9;
}

.cookie-consent-banner__text a {
    color: #F7CB18;
    text-decoration: underline;
}

.cookie-consent-banner__actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.cookie-consent-banner__btn {
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-size: 0.9rem;
}

.cookie-consent-banner__btn {
    background: #F7CB18;
    color: #000;
}

.cookie-consent-banner__btn:hover {
    background: #e5ba16;
}
/* Expert Contact Consent Checkbox */
.consent-checkbox-wrapper {
    margin: 1rem 0;
    padding: 0.75rem;
    background: rgba(247, 203, 24, 0.1);
    border: 1px solid rgba(247, 203, 24, 0.3);
    border-radius: 6px;
}

.consent-checkbox-wrapper label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1.4;
}

.consent-checkbox-wrapper input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.consent-checkbox-wrapper a {
    color: #F7CB18;
}

/* =================================================================
   LEGAL PAGE & RESPONSIVE TABLES (FINAL FIX + BRAND SCROLLBAR)
   ================================================================= */

/* 1. Legal Page Layout & Containers */
.legal-page-container {
    max-width: 900px;
    margin: 8rem auto 6rem auto;
    padding: 0 1.5rem;
}

/* THE SCROLLING WRAPPERS */
.terms-container,
.legal-text-wrapper,
.table-responsive { 
    display: block;
    width: 100%;
    /* Forces horizontal scroll for wide content */
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    border-radius: var(--peritiq-border-radius);
    
    /* Ensure the scrollbar sits inside the box nicely */
    scrollbar-color: var(--peritiq-border-primary) transparent; /* Firefox */
    scrollbar-width: thin; /* Firefox */
}

/* --- RESTORE BRAND SCROLLBAR STYLING (Webkit/Chrome/Safari) --- */
.terms-container::-webkit-scrollbar,
.legal-text-wrapper::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    height: 8px; /* Horizontal scrollbar height */
    width: 8px;  /* Vertical scrollbar width */
}

.terms-container::-webkit-scrollbar-track,
.legal-text-wrapper::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
    background: transparent; 
    border-radius: 4px;
}

.terms-container::-webkit-scrollbar-thumb,
.legal-text-wrapper::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background-color: var(--peritiq-border-primary);
    border-radius: 10px;
    border: 2px solid var(--peritiq-background-secondary); /* Creates padding effect */
}

.terms-container::-webkit-scrollbar-thumb:hover,
.legal-text-wrapper::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
    background-color: var(--peritiq-accent-signal); /* BRAND CYAN COLOR */
}

/* 2. Legal Box Styling */
.terms-container { 
    border: 1px solid var(--peritiq-border-primary); 
    padding: 2.5rem; 
    background-color: var(--peritiq-background-secondary);
    margin-bottom: 1.5rem;
    word-wrap: break-word; 
    overflow-wrap: break-word;
}

.terms-headline { 
    font-size: 1.15em; 
    font-weight: bold; 
    margin-top: 1.8em; 
    margin-bottom: 0.6em; 
    color: var(--peritiq-text-primary); 
}

.terms-paragraph { 
    margin-bottom: 1em; 
    line-height: 1.7; 
    color: var(--peritiq-text-secondary); 
}

.terms-paragraph a { 
    color: var(--peritiq-accent-signal); 
    text-decoration: underline; 
}
.terms-paragraph a:hover { 
    color: var(--peritiq-brand-primary); 
}

.terms-list { 
    margin-left: 20px; 
    margin-bottom: 1em; 
    color: var(--peritiq-text-secondary); 
}
.terms-list li { 
    margin-bottom: 0.5em; 
    line-height: 1.6; 
}
.terms-list strong { 
    color: var(--peritiq-text-primary); 
}

.terms-hr { 
    margin: 2em 0; 
    border-top: 1px solid var(--peritiq-border-primary); 
}

/* 3. UNIFIED TABLE STYLING (Dark Theme Forced) */
.terms-table,
.terms-container table,
.legal-text-wrapper table {
    width: 100%;
    min-width: 650px; /* Trigger scroll on mobile */
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    
    /* FORCE DARK THEME */
    color: var(--peritiq-text-secondary) !important;
    background-color: var(--peritiq-background-secondary) !important;
    border: 1px solid var(--peritiq-border-primary) !important;
}

/* Headers */
.terms-table th,
.terms-container table th,
.legal-text-wrapper table th {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--peritiq-text-primary) !important;
    font-weight: 700;
    white-space: nowrap; 
    border-bottom: 2px solid var(--peritiq-accent-signal) !important; /* Cyan Line */
    border-top: none !important;
    border-left: none;
    border-right: none;
    padding: 16px 20px;
    text-align: left;
}

/* Cells */
.terms-table td,
.terms-container table td,
.legal-text-wrapper table td {
    background-color: transparent !important;
    color: var(--peritiq-text-secondary) !important;
    border-bottom: 1px solid var(--peritiq-border-primary) !important;
    border-top: none !important;
    border-left: none;
    border-right: none;
    padding: 16px 20px;
    vertical-align: top;
    line-height: 1.6;
}

/* Zebra Striping */
.terms-table tr:nth-child(even),
.terms-container table tr:nth-child(even),
.legal-text-wrapper table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Strong text */
.terms-table td strong,
.terms-container table td strong,
.legal-text-wrapper table td strong {
    color: var(--peritiq-text-primary) !important;
    font-weight: 600;
}

/* Plan Name Highlight */
.terms-table td.plan-name-cell {
    color: var(--peritiq-text-primary) !important;
    background-color: rgba(247, 203, 24, 0.05) !important;
}

/* --- FIXED GRID CONTAINER --- */
.depth-stats-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Aligns tops of items */
    flex-wrap: wrap;
    gap: 0; 
    margin-top: 3rem;
    width: 100%;
}

/* --- FIXED ITEM WIDTHS --- */
.depth-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* FIX: Force all 3 items to be exactly equal width */
    flex: 1; 
    min-width: 220px; /* Prevents squishing on small screens */
    
    position: relative;
    padding: 0 20px; /* Reduced padding since we are using flex:1 */
}

/* --- DIVIDERS (Only show on Desktop) --- */
.depth-stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%; /* Center the line better */
    height: 80%; 
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.15), transparent);
}

/* --- NUMBERS (Keep as is) --- */
.depth-number {
    font-family: var(--peritiq-font-heading);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.75rem; /* More space between number and text */
    
    background: linear-gradient(135deg, #ffffff 30%, var(--peritiq-accent-signal) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--peritiq-text-primary); 
}

/* --- FIXED LABELS (The Secret Sauce) --- */
.depth-label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--peritiq-text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1.5;
    
    /* FIX: Constrain width to force text wrapping */
    max-width: 160px; 
    margin: 0 auto; /* Center the text block */
    display: block; /* Ensure max-width works */
}

/* --- MOBILE/TABLET RESPONSIVENESS --- */
@media (max-width: 991px) {
    /* Stack them sooner to avoid the "weird pyramid" look */
    .depth-stats-grid {
        flex-direction: column;
        gap: 3rem; /* Proper vertical breathing room */
    }

    .depth-stat-item {
        width: 100%;
        border-right: none;
        padding: 0;
    }

    /* Remove vertical dividers on mobile */
    .depth-stat-item::after {
        display: none;
    }
    
    /* Relax the max-width on mobile so it doesn't look weirdly narrow */
    .depth-label {
        max-width: 100%; 
    }
}

/* =================================================================
   AAA SPACING FIX: Depth/Trust Vertical Rhythm
   ================================================================= */

/* 1. Equalize Headline Spacing */
.depth-content .section-title {
    /* Increase space below headline to match the next gap */
    margin-bottom: 2.5rem; 
}

/* 2. Equalize Subtitle Spacing */
.depth-content .section-subtitle {
    /* Override global 60px margin to match the headline gap */
    margin-bottom: 2.5rem !important; 
    margin-top: 0;
}

/* 3. Remove Grid Top Margin */
/* Previously we had margin-top: 3rem here. 
   We remove it (set to 0) so the subtitle's margin controls the gap perfectly. */
.depth-stats-grid {
    margin-top: 0 !important; 
}

/* --- Mobile Tweak for tighter screens --- */
@media (max-width: 768px) {
    .depth-content .section-title,
    .depth-content .section-subtitle {
        margin-bottom: 1.5rem !important; /* Tighter 24px gap on mobile */
    }
}


/* =================================================================
   AAA GLOBAL SPACING (FINAL FIX)
   Target: Consistent Rhythm across All Sections
   ================================================================= */

section {
    padding: 100px 0;
}

/* --- 1. The Header Unit (Title + Subtitle) --- */

/* The Main Title */
.section-title {
    margin-bottom: 0.75rem !important; /* STANDARD TIGHT GAP to subtitle */
    line-height: 1.15;
    display: block;
}

/* The Subtitle (The Anchor) */
.section-subtitle {
    margin-top: 0 !important;
    margin-bottom: 3.5rem !important; /* STANDARD WIDE GAP to content */
    line-height: 1.6;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* --- 2. Exception: Sections WITHOUT Subtitles --- */
/* (e.g., FAQ, Matrix) - The title must push the content down itself */
#faq .section-title, 
#expert-matrix .section-title { 
    margin-bottom: 3.5rem !important; 
}

/* --- 3. Content Containers (Reset Top Margins) --- */
/* Prevents double spacing. The subtitle provides the gap. */
.expert-grid,
.pricing-grid,
.endorsement-carousel,
.depth-stats-grid,
.timeline,
.accordion,
#features .row {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* --- 4. Specific Section Fixes --- */

/* DEPTH SECTION: Force Compliance */
/* Remove any specific overrides that break the rhythm */
.depth-content .section-title {
    margin-bottom: 0.75rem !important; /* Match global */
}
.depth-content .section-subtitle {
    margin-bottom: 3.5rem !important; /* Match global */
}

/* PRICING: The Toggle Switch */
/* The toggle sits between subtitle and grid. */
/* We keep the subtitle gap standard (3.5rem) so the toggle has room. */
#pricing .section-subtitle {
    margin-bottom: 3.5rem !important; 
}
.pricing-toggle-wrapper {
    margin-top: 0 !important;
    margin-bottom: 3rem !important; /* Space between switch and grid */
}

/* FAQ: Accordion Reset */
.custom-faq {
    margin-top: 0 !important;
}

/* --- 5. Mobile Responsiveness --- */
@media (max-width: 768px) {
    section { 
        padding: 60px 0; 
    }
    
    .section-subtitle,
    .depth-content .section-subtitle,
    #faq .section-title { 
        margin-bottom: 2.5rem !important; /* Tighter on mobile */
    }
}

/* FORCE FIX: Enterprise Modal Width Override */
.modal .modal-dialog.modal-dialog-centered.peritiq-modal-wide,
.modal.fade .modal-dialog.peritiq-modal-wide,
#enterpriseContactModal .modal-dialog,
#enterpriseContactModal.modal .modal-dialog {
    max-width: 700px !important;
    width: 100% !important;
    margin: 1.75rem auto !important;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Override Bootstrap's modal centering container */
#enterpriseContactModal .modal-dialog-centered {
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 3.5rem) !important;
    margin: 0 auto !important;
    max-width: 700px !important;
}

/* Password Requirements Checklist - AAA Quality */
.password-checklist {
    list-style: none;
    padding: 0;
    margin: 0.6rem 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.3rem; /* row-gap | column-gap */
    justify-content: center;
}
.password-checklist li {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--peritiq-text-secondary);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    padding: 0.25rem 0.55rem;
    transition: all 0.2s ease;
}
.password-checklist li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.password-checklist li.met {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.06);
    border-color: rgba(34, 197, 94, 0.15);
}
.password-checklist li.met::before {
    background: #4ade80;
    box-shadow: 0 0 5px rgba(74, 222, 128, 0.4);
}

#expert-directory mark {
    background-color: #00b4d8;
    color: #000;
    padding: 0 2px;
    border-radius: 2px;
}

/* =================================================================
   INVESTOR SIGNAL SECTION - MINIMAL CLEAN DESIGN
   ================================================================= */

#investor-signal {
    padding: 80px 0;
}

.investor-signal-content {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.investor-signal-content .section-title {
    font-size: 2.4rem;
    margin-bottom: 1.5rem;
}

.investor-signal-body {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--peritiq-text-secondary);
    margin-bottom: 2.5rem;
}

.investor-signal-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.investor-signal-tertiary {
    display: inline-block;
    font-size: 0.9rem;
    color: var(--peritiq-text-secondary);
    text-decoration: none;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.investor-signal-tertiary:hover {
    color: var(--peritiq-accent-signal);
    opacity: 1;
}

.investor-signal-tertiary::after {
    content: ' →';
}

/* Investor Logo Bar */
.investor-logo-bar {
    margin: 2.5rem 0 1rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}

.investor-logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem 2rem;
}

.investor-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    text-decoration: none;
    cursor: pointer;
}

.investor-logo-item img {
    height: 28px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    filter: grayscale(1) brightness(0) invert(1);
    opacity: 0.5;
    transition: opacity 0.25s ease, filter 0.25s ease;
}

.investor-logo-item img:hover {
    filter: grayscale(0) brightness(1) invert(0);
    opacity: 1;
}

/* Mobile */
@media (max-width: 576px) {
    .investor-signal-content .section-title {
        font-size: 1.8rem;
    }
    
    .investor-signal-body {
        font-size: 1rem;
    }
    
    .investor-signal-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .investor-signal-buttons .btn-lg {
        width: 100%;
        max-width: 280px;
    }
}
.investor-logo-bar-label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.3);
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
    font-weight: 300;
    margin-bottom: 1.25rem;
}