/* Basic Reset (you might want a more comprehensive one like normalize.css) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 8px Baseline Grid & Typography */
html {
    font-size: 100%;
    /* Typically 16px */
}

body {
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    /* 16px */
    line-height: 1.6;
    /* approx 24px based on 16px*1.5, adjust for 8px grid harmony */
    color: #212529;
    background-color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    /* Bold */
    line-height: 1.3;
    margin-bottom: 16px;
    margin-top:16px;
    /* Multiple of 8 */
    color: #212529;
}

h1 {
    font-size: 2.5rem;
    /* 40px */
}

/* Adjust sizes as needed */
h2 {
    font-size: 2rem;
    /* 32px */
}

h3 {
    font-size: 1.75rem;
    /* 28px */
}

h4 {
    font-size: 1.5rem;
    /* 24px */
}

p {
    margin-bottom: 16px;
}

a {
    color: #00A99D;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #00877A;
    text-decoration: underline;
}

/* Utility Classes */
.container {
    width: 90%;
    max-width: 1120px;
    /* Max width for content */
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

.section {
    padding-top: 64px;
    /* Multiple of 8 */
    padding-bottom: 64px;
}

.section-light-bg {
    background-color: #F8F9FA;
}

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

.accent-color {
    color: #00A99D;
}

.bold-headline {
    font-weight: 700;
}

.sub-headline {
    font-size: 1.25rem;
    /* 20px */
    color: #6C757D;
    margin-bottom: 32px;
}


/* Site Layout (for Sticky Footer) */
#page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    /* This is the <main> element, we make it grow to push the footer down */
    flex-grow: 1;
}


/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    /* Adjust for 8px grid */
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    /* SemiBold */
    font-size: 1rem;
    text-align: center;
    border-radius: 4px;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.btn-primary {
    background-color: #00A99D;
    color: #FFFFFF;
    border-color: #00A99D;
}

.btn-primary:hover {
    background-color: #00877A;
    border-color: #00877A;
    color: #FFFFFF;
    text-decoration: none;
}

.btn-secondary {
    background-color: transparent;
    color: #00A99D;
    border: 2px solid #00A99D;
}

.btn-secondary:hover {
    background-color: #E0F7FA;
    /* Light teal tint */
    color: #00877A;
    border-color: #00877A;
    text-decoration: none;
}

/* Header */
.site-header {
    padding: 24px 0 10px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #CED4DA;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* --- REVISED HEADER BRANDING STYLES --- */

.site-branding {
    font-family: 'Poppins', sans-serif;
    font-size: 1.75rem;
    /* 28px - This controls the site title size */
    font-weight: 700;
    color: #212529;

    /* Allow this container to shrink to make room for the nav menu */
    flex-shrink: 1;
    min-width: 0;
    /* A flexbox trick to allow text to shrink/wrap properly */
}

/* This is the <a> tag that wraps the logo and title */
.site-branding .site-logo-link {
    display: flex;
    /* Aligns children (logo and text) in a row */
    align-items: center;
    /* Vertically centers the logo and text */
    gap: 12px;
    /* Creates space between the logo and the text */
    color: #4c9893;
    text-decoration: none;
}

.site-branding:hover {
    transition: filter 0.3s ease;
}

.site-branding:hover {
    filter: brightness(1.2);
}

/* This targets the logo image */
.site-branding .site-logo {
    width: 80px;
    /* Sets the logo width as requested */
    height: auto;
    /* Maintains the aspect ratio */
    flex-shrink: 0;
    /* Prevents the logo itself from being squished */
}

/* This targets the h1/p tag holding the link */
.site-branding .site-title {
    margin: 0;
    /* Removes default heading margins to prevent alignment issues */
}

.site-branding a {
    color: inherit;
    text-decoration: none;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.main-navigation ul li {
    margin-left: 0;
}

.main-navigation ul li a {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: #212529;
    display: flex;
    align-items: center;
    gap: 8px;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item a {
    color: #00A99D;
    text-decoration: none;
}

/* Hide section links on desktop by default */
.main-navigation ul li.section-link {
    display: none;
}

/* --- NEW / REVISED: Styles for simplified Auth Links --- */
/* Hide the Register icon on desktop */
.main-navigation .register-item .register-link svg,
.main-navigation .view-catalog-item .view-catalog-link svg {
    display: none;
}

/* Add spacing to the left of the Login link on desktop */
.main-navigation ul li.login-item {
    margin-left: 24px;
}

/* Use flexbox on the Register LI to align the pipe and the link */
.main-navigation ul li.register-item,
.main-navigation ul li.view-catalog-item {
    display: flex;
    align-items: center;
}

/* Add the pipe separator before the Register item on desktop */
.main-navigation ul li.register-item::before,
.main-navigation ul li.view-catalog-item::before {
    content: '|';
    color: #CED4DA;
    /* A light gray separator color */
    padding: 0 12px;
    /* Space around the pipe */
}

/* Remove button styles from previous implementation */
.auth-link-item .register-link.btn-secondary {
    padding: initial;
    border: none;
    background: transparent;
}

.auth-link-item .register-link.btn-secondary:hover {
    background: transparent;
}


/* Mobile Menu Button */
.menu-toggle {
    display: none;
    /* Hidden by default, shown on mobile */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #212529;
}


/* Hero Section (Revised for Responsiveness) */
.hero-section {
    background-color: #d4e6e7;
    padding: 0 0 64px;
    text-align: center;
}

.hero-illustration {
    display: block;
    max-width: 700px;
    /* A good max size for the illustration */
    width: 100%;
    /* Ensures it shrinks on smaller screens */
    height: auto;
    /* Maintains aspect ratio */
    margin: 0 auto 0;
    /* Center it and add space below */
}

/* The existing .hero-headline and .hero-subheadline rules work well here */
.hero-headline {
    font-size: 3rem;
    /* 48px */
    font-weight: 700;
    margin-bottom: 16px;
}

.hero-subheadline {
    font-size: 1.5rem;
    /* 24px */
    color: #6C757D;
    max-width: 700px;
    margin: 0 auto 32px;
}

.hero-ctas .btn {
    margin: 0 8px;
}



/* Problem + Solution Section */
.problem-solution-section .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

.problem-statement {
    /* Not used directly in HTML, but h2 inside .problem-text covers it */
    font-size: 1.5rem;
    /* 24px */
    font-weight: 600;
    margin-bottom: 24px;
}

.solution-bullets ul {
    list-style: none;
    padding-left: 0;
}

.solution-bullets li {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-size: 1.125rem;
    /* 18px */
}

.solution-bullets li .icon {
    width: 64px;
    height: 64px;
    margin-right: 24px;
    color: #00A99D;
    /* Icon color */
    flex-shrink: 0;
}

.solution-bullets li .icon img,
.solution-bullets li .icon svg {
    width: 100%;
    height: 100%;
}


/* How It Works Section */
.how-it-works-section .section-title {
    text-align: center;
    margin-bottom: 48px;
}

.how-it-works-graphic {
    max-width: 600px;
    margin: 0 auto;
    display: block;
}

/* Placeholder for 3-step graphic: you'd style the actual graphic elements or image here */
.steps-container {
    display: flex;
    justify-content: space-around;
    text-align: center;
    gap: 32px;
    margin-top: 32px;
    /* If graphic is separate from text */
}

.step {
    flex: 1;
}

.step .step-number {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background-color: #00A99D;
    color: white;
    font-weight: bold;
    margin-bottom: 16px;
}

.step h4 {
    font-size: 1.25rem;
    margin-bottom: 8px;
}


/* Key Benefits Section */
.key-benefits-section .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 32px;
}

.benefit-item {
    text-align: center;
    /* Or left if preferred with icon next to title */
    padding: 24px;
    border: 1px solid #E0F7FA;
    border-radius: 8px;
    background-color: #FFFFFF;
}

.benefit-item .icon {
    width: 128px;
    height: 128px;
    margin: 0 auto 16px;
    color: #00A99D;
}

.benefit-item .icon img,
.benefit-item .icon svg {
    width: 100%;
    height: 100%;
}

/* ----- SVG Icon Coloring Fix ----- */
/* Ensures inline SVGs within .icon containers use the parent's text color (#00A99D) 
   for their fill and strokes, unless these are explicitly 'none' or 'transparent'.
   This applies to SVGs loaded via imagezen_get_svg() and placed in .icon wrappers. */

/* For SVGs in .solution-bullets li .icon */
.solution-bullets li .icon svg [fill]:not([fill="none"]):not([fill="transparent"]) {
    fill: currentColor;
}

.solution-bullets li .icon svg [stroke]:not([stroke="none"]):not([stroke="transparent"]) {
    stroke: currentColor;
}

/* For SVGs in .benefit-item .icon */
.benefit-item .icon svg [fill]:not([fill="none"]):not([fill="transparent"]) {
    fill: currentColor;
}

.benefit-item .icon svg [stroke]:not([stroke="none"]):not([stroke="transparent"]) {
    stroke: currentColor;
}


.benefit-item h4 {
    font-size: 1.25rem;
    /* 20px */
    margin-bottom: 8px;
}

/* Social Proof Section */
.social-proof-section .quotes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.quote-card {
    background-color: #FFFFFF;
    padding: 24px;
    border-left: 4px solid #00A99D;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.quote-card blockquote {
    font-size: 1.125rem;
    /* 18px */
    font-style: italic;
    color: #6C757D;
    margin-bottom: 16px;
    border-left: none;
    /* Remove default blockquote styling if any */
    padding-left: 0;
}

.quote-author {
    display: flex;
    align-items: center;
}

.quote-author img.headshot {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 16px;
    object-fit: cover;
}

.quote-author cite {
    font-style: normal;
    font-weight: 600;
    color: #212529;
}

.quote-author cite span {
    display: block;
    font-weight: normal;
    font-size: 0.875rem;
    /* 14px */
    color: #6C757D;
}


/* Footer CTA */
.footer-cta-section {
    background-color: #00A99D;
    /* Accent color background */
    color: #FFFFFF;
    text-align: center;
    padding: 48px 0;
}

.footer-cta-section .cta-title {
    font-size: 2rem;
    /* 32px */
    font-weight: 700;
    margin-bottom: 24px;
    color: #FFFFFF;
}

.footer-cta-section .sub-headline {
    color: #FFFFFF;
}

.footer-cta-section .btn-light {
    /* Custom button style for dark bg */
    background-color: #FFFFFF;
    color: #00A99D;
    border-color: #FFFFFF;
}

.footer-cta-section .btn-light:hover {
    background-color: #E0F7FA;
    color: #00877A;
    border-color: #E0F7FA;
}


/* Site Footer */
.site-footer {
    background-color: #212529;
    /* Dark background */
    color: #CED4DA;
    /* Light gray text */
    padding: 40px 0;
    font-size: 0.875rem;
    /* 14px */
}

.site-footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-nav ul li {
    margin: 0 12px 8px;
}

.footer-nav ul li a {
    color: #FFFFFF;
}

.footer-nav ul li a:hover {
    color: #00A99D;
    text-decoration: underline;
}

.copyright {
    margin-top: 16px;
}


/* Plans Page Specifics */
.plans-header {
    text-align: center;
    padding-bottom: 40px;
}

.plans-header h1 {
    margin-bottom: 8px;
}

/* Feature Summary Table/List */
.feature-summary {
    margin-bottom: 48px;
}

.feature-summary table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.feature-summary th,
.feature-summary td {
    padding: 12px 16px;
    border-bottom: 1px solid #E0F7FA;
}

.feature-summary th {
    background-color: #F8F9FA;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.feature-summary .check-icon {
    color: #00A99D;
    font-weight: bold;
}

/* Or Vertical List Style */
.feature-summary-list ul {
    list-style: none;
    padding: 0;
}

.feature-summary-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #E0F7FA;
}

.feature-summary-list li strong {
    font-family: 'Poppins', sans-serif;
}

/* Pricing Cards */
.pricing-cards-section {
    background: #00a99dbf;
}

.pricing-cards-section .section-title {
    color: #FFFFFF;
}

.pricing-cards-section .sub-headline {
    color: #FFFFFF
}

.pricing-cards-section .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    align-items: stretch;
    /* Make cards same height */
}

.pricing-card {
    background-color: #FFFFFF;
    border: 1px solid #CED4DA;
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.pricing-card.popular {
    /* Optional: highlight a plan */
    border-color: #00A99D;
    border-width: 2px;
    position: relative;
}

.pricing-card.popular::before {
    /* Optional: "Most Popular" badge */
    content: "Popular";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-color: #00A99D;
    color: white;
    font-size: 1rem;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
}


.pricing-card h3 {
    /* Plan Name */
    font-size: 1.5rem;
    /* 24px */
    color: #00A99D;
    margin-bottom: 8px;
}

.pricing-card .price {
    font-size: 2.5rem;
    /* 40px */
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #212529;
    margin-bottom: 8px;
}

.pricing-card .price .term {
    font-size: 1rem;
    font-weight: normal;
    color: #6C757D;
}

.pricing-card .description {
    color: #6C757D;
    margin-bottom: 24px;
    min-height: 100px;
    /* To align descriptions */
}

.pricing-card .features-list {
    list-style: none;
    padding: 0;
    margin-bottom: 32px;
    text-align: left;
    flex-grow: 1;
    /* Pushes CTA to bottom */
}

.pricing-card .features-list li {
    margin-bottom: 8px;
    padding-left: 24px;
    position: relative;
}

.pricing-card .features-list li::before {
    /* Custom bullet */
    content: '✓';
    /* Or an SVG icon */
    color: #00A99D;
    position: absolute;
    left: 0;
    font-weight: bold;
}

.pricing-card .btn {
    width: 100%;
    margin-top: auto;
    /* Pushes button to bottom if content above is short */
}

.fair-usage-notice,
.fair-usage-notice a {
    color: #FFFFFF;
    /* Inherit the white color */
    font-size: 0.9rem;
    font-style: italic;
    text-decoration: none;
    /* Remove the underline */
}

.fair-usage-notice a:hover {
    text-decoration: underline;
    /* Add underline on hover for affordance */
}

/* You may need to combine this with the original rule depending on your structure */
.fair-usage-notice {
    margin-top: -8px;
    margin-bottom: 32px;
}



/* Detailed Features Section */
.detailed-features-section .feature-block {
    margin-bottom: 48px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}

.detailed-features-section .feature-block:nth-child(even) .feature-image-container {
    /* Changed to container for better control */
    order: -1;
    /* Image on left for even items on desktop */
}

.detailed-features-section .feature-image-container img {
    /* Ensure this is the direct child if using order */
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    display: block;
    /* Prevents extra space under img */
}

.detailed-features-section .feature-text h3 {
    color: #00A99D;
    margin-bottom: 16px;
}


/* FAQs Section */
.faqs-section {
    padding: 50px 0;
}

/* Needed to jump to the Fair Usage Policy */
#fair-usage-faq {
    position: relative;
    /* reset any default top margin if you need */
    margin-top: 0;
    padding-top: 0;
}

/* Insert an invisible block 70px tall *before* it: */
#fair-usage-faq::before {
    content: "";
    display: block;
    height: 80px;
    /* height of your fixed header */
    margin-top: -80px;
    /* pulls the element back up by the same amount */
    visibility: hidden;
    /* doesn’t show anything */
    pointer-events: none; /* Add this line */
}


.faqs-section .faq-section-subtitle {
    margin-top: 50px;
}

.faqs-section .faqs-list {
    margin-top: 20px;
    margin-bottom: 60px;
}

.faqs-section .faq-item {
    margin-bottom: 16px;
    /* Reduced space between items */
    border-bottom: 1px solid #CED4DA;
    /* More visible separator line */
    padding-bottom: 16px;
}

.faqs-section .faq-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.faqs-section .faq-question {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    /* 20px */
    margin-bottom: 0;
    /* Let answer handle its own top margin */
    cursor: pointer;
    position: relative;
    padding-right: 32px;
    /* Make space for the icon */
    transition: color 0.3s ease;
}

.faqs-section .faq-question:hover {
    color: #00A99D;
}

.faqs-section .faq-question::after {
    content: '+';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.75rem;
    font-weight: 300;
    /* For a thin plus/minus sign */
    line-height: 1;
    color: #00A99D;
    transition: transform 0.2s ease, color 0.2s ease;
}

.faqs-section .faq-question.active {
    color: #212529;
    /* Keep question text dark when open */
}

.faqs-section .faq-question.active::after {
    content: '−';
    /* Unicode MINUS SIGN */
}

.faqs-section .faq-answer {
    color: #6C757D;
    margin-top: 16px;
    /* Space between question and answer */
    padding-left: 20px;
    /* Indent the answer text */
    border-left: 3px solid #E0F7FA;
    /* A subtle accent bar */
    display: none;
    /* Hide by default, JS will toggle */
}

.faqs-section .faq-answer p:last-child {
    margin-bottom: 0;
}



.final-cta-note {
    margin-top: 16px;
    font-size: 0.875rem;
    color: #6C757D;
}


/* Subtle Motion & Hover States */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Add hover states for interactive elements like cards, list items if desired */
.benefit-item:hover,
.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


/* Responsive Design */
@media (min-width: 768px) {
    .problem-solution-section .grid {
        grid-template-columns: 1fr 1fr;
        /* Two columns for problem/solution */
    }

    .social-proof-section .quotes-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }

    .detailed-features-section .feature-block {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer .container {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .footer-nav ul {
        margin-bottom: 0;
    }

    .menu-toggle {
        display: none !important;
    }

    /* Ensure it's hidden on desktop */

    .detailed-features-section .feature-block:nth-child(even) .feature-image-container {
        order: -1;
        /* Ensure image is on the left for even items */
    }

    .detailed-features-section .feature-block:nth-child(odd) .feature-image-container {
        order: 1;
        /* Ensure image is on the right for odd items (default behavior, but explicit) */
    }

}

@media (max-width: 767px) {
    .main-navigation {
        display: none;
        /* Hidden by default */
        width: 100%;
        position: absolute;
        top: 100%;
        /* Below header */
        left: 0;
        background-color: #FFFFFF;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-top: 1px solid #CED4DA;
    }

    .main-navigation.toggled-on {
        display: block;
        /* Shown when toggled */
    }

    .main-navigation ul {
        flex-direction: column;
        align-items: stretch;
        /* Reset alignment */
    }

    .main-navigation ul li {
        border-bottom: 1px solid #E0F7FA;
    }

    .main-navigation ul li:last-child {
        border-bottom: none;
    }

    /* Show section-links in mobile menu */
    .main-navigation ul li.section-link {
        display: list-item;
        /* Make it visible again */
    }

    .main-navigation ul li a {
        padding: 12px 16px;
    }

    .menu-toggle {
        display: block;
        /* Show hamburger */
    }

    /* --- NEW / REVISED: Auth link styles for mobile --- */

    /* Reset flexbox behavior on the Register LI for mobile */
    .main-navigation ul li.register-item,
    .main-navigation ul li.view-catalog-item {
        display: list-item;
    }

    /* Hide the pipe separator on mobile */
    .main-navigation ul li.register-item::before,
    .main-navigation ul li.view-catalog-item::before {
        display: none;
    }

    /* Show the Register icon again on mobile */
    .main-navigation .register-item .register-link svg,
    .main-navigation .view-catalog-item .view-catalog-link svg {
        display: block;
    }

    /* Reset margins for vertical layout */
    .main-navigation ul li.login-item {
        margin-left: 0;
        border-top: 1px solid #CED4DA;
        /* Separates auth from sections */
    }

    /* REVISED Hero rules for mobile */
    .hero-section {
        padding: 40px 0;
        /* Less padding on mobile */
    }

    .hero-headline {
        font-size: 2.5rem;
    }

    .hero-subheadline {
        font-size: 1.25rem;
    }

    .hero-ctas .btn {
        display: block;
        margin: 8px auto;
        width: 100%;
        max-width: 300px;
    }

    .steps-container {
        flex-direction: column;
        gap: 32px;
    }

    .detailed-features-section .feature-block .feature-image-container {
        /* Stack image below text on mobile */
        order: 2 !important;
        /* Ensure image is always below text block */
    }

    .detailed-features-section .feature-block .feature-text {
        order: 1 !important;
    }

    .site-branding {
        font-size: 1.4rem;
        /* Decrease the site title font size on mobile */
    }

    .site-branding .site-logo {
        width: 50px;
        /* Make the logo smaller on mobile */
    }

    .site-branding .site-logo-link {
        font-size: 1.8rem;
        gap: 6px;
        /* Reduce the space between logo and text */
    }
}