@media (max-width: 680px) {
    /* GLOBAL */

    body{
      font-size: 20px;
    }
    
    
    /* FONTS */
  .text-18 {
    font-size: 22px;
  }

    /* UTILITY */

    .value-card { width: 92%; }
    .about-story-stat-row { flex-direction: column; }
    .about-stat { min-width: unset; width: 100%; }
    .about-cta-buttons { flex-direction: column; align-items: center; }    

    /* CTA */

    section.demo-now{ padding: 40px 20px;}

    .roles-empty-state { padding: 36px 20px; }
    .careers-cta-buttons { flex-direction: column; align-items: center; }    

    /* INDEX */

    .features-md{
      max-width: 98%;
    }
    .features-header{padding: 40px 20px;}
    .trust-bar-list{width: 98%; justify-content: flex-start; margin: 0 auto;}

    /* PRICING */
    .pricing-table { padding: 50px 4% 0; }

    .pricing-cards {
        flex-direction: column;
        align-items: center;
        padding: 0 4% 20px;
    }

    .pricing-option {
        width: 90%;
        max-width: 480px;
        transform: none !important;
        align-items: center;
    }

    .pricing-option.featured {
        transform: none !important;
    }

    .billing-toggle { flex-direction: column; border-radius: var(--radius-md); }
    .toggle-btn { padding: 12px 20px; text-align: center; }
    .comparison-section { padding: 50px 0; width: 100%; max-width: 100%; display: flex; flex-direction: column; align-content: center; justify-content: center;}
    .comparison-wrap { margin: 0 auto; width: 86%;}
    .comparison-cta-buttons{flex-direction: column; gap: 0;}
    .plan-price{ text-align: center;}
    .pricing-faq { padding: 50px 4%; }
    .pricing-options { flex-direction: column; align-items: center; padding: 0;}
    .pricing-options div { width: 90%; }
    .pricing-grid { flex-direction: column; align-items: center; }
    .pricing-card { width: 90%; }

    /* CONTACT */

    .contact-hero::before{
        background-color: rgba(0,0,0,0.6);
    }
    .contact-hero{
        background-position: -70% center;
    }    
    .contact-section { padding: 48px 4% 56px; }
    .contact-faq { padding: 48px 4% 56px; }
    .contact-form-card { padding: 22px 16px; }

    /* HIRE ME */
    .hire-hero::before { background: rgba(0,0,0,0.60); }
    .hire-hero { background-position: 56% 0; }

    .hire-services  { padding: 60px 4%; }
    .hire-process   { padding: 60px 4%; }
    .hire-form-section { padding: 60px 4% 80px; }
    .service-card   { padding: 28px 22px; }

    /* ABOUT */
    .about-story-inner{
        width: 80%;
        margin: 0 auto;
    }

    /* LEGAL */

    .toc-links a { font-size: 12px; }


    /* MODULES */
    .module-hero { padding: 48px 16px 44px; }
    .module-intro { padding: 48px 16px; }
    .module-benefits-section { padding: 52px 16px; }

    .module-stat-chips { gap: 8px; }
    .module-stat-chip {
        min-width: 100px;
        padding: 12px 16px;
    }
    .module-stat-chip strong { font-size: 17px; }

    .module-faq-q { font-size: 14px; padding: 16px 18px; }
    .module-faq-a { padding: 16px 18px 18px; }

    .module-callout-card { padding: 24px 20px; }

    .module-hero-eyebrow {
        flex-direction: column;
        gap: 10px;
    }


  h1 { font-size: clamp(22px, 6vw, 30px); }
  h2 { font-size: clamp(18px, 5vw, 24px); }
  h3 { font-size: clamp(15px, 4vw, 18px); }

  .text-18 { font-size: 18px; }
  .text-22 { font-size: 22px; }

  .module-back-link, .module-tier { font-size: 20px !important; margin: 10px auto;}
  .module-tier{margin-bottom: 20px;}
  .module-benefit-list .feature-list div{font-size: 18px;} 
  
  .module-section-h2{text-align: center;}

  .module-callout-card{text-align: center; justify-content: center;}
  .module-callout-card .grey-text{font-size: 18px;}
  .module-callout-card .fa-solid{margin: 10px auto;}  
  .module-callout-card button{width: 80%; margin-left: auto; margin-right: auto;}

  .fa-ul{ margin-inline-start: 0 !important;}

  /* HERO — banner only. The page content lives in <main class="site-main">
     below the hero, so this floor just keeps the banner from collapsing on
     small screens; it no longer constrains the scrollable page. */
  .index-hero, .pricing-hero, .contact-hero,  .about-hero, .careers-hero, .hire-hero, .legal-hero {
    min-height: 20svh;
  }

  /* .hero-content { padding: 50px 0; } */
  /* .hero-content .logo { width: 180px; } */

  .hero-content .logo{
    width: 100%;
    height: auto;
    margin: 0 auto 26px auto;
  }

  .lite-button, .pro-button { width: 96%; }

  .lite-button.red-bg.button, .pro-button.green-bg.button{
    display: flex;
    padding: 14px 20px;
    min-height: 40px;
    justify-content: center;
    align-items: center;
  }


  .pricing-option a.pro-button{
    width: 98%; align-self: center; font-size: 18px;
  }

  /* Intro */
  .trust, .problem { padding: 20px 16px; }
  .trust ul, .problem ul { padding: 8px 0; width: 100%; }

  /* Features */
  .features { padding: 40px 4%; }
  .features-flex { gap: 24px 0; }
  .features-flex article { width: 95%; }

  .features-header{padding: 0 20px;}
  /* Who / Value */
  .who-flexbox { padding: 40px 4%; }
  div.who, div.value { padding: 20px 16px; width: 95% !important; }

  /* Not */
  .not { padding: 50px 4%; }
  .not-flexbox { gap: 10px 0; }
  .not-flexbox span { width: 92%; }
  
  /* Footer */
  .site-footer { flex-direction: column; align-items: center; gap: 24px; padding: 32px 4%; }
  .footer-links { flex-direction: column; }
  .footer-link-col-one a, .footer-link-col-two a { padding: 0 8px; }
}

@media (max-width: 960px) {

/* Global */

    body{
      font-size: 18px;
    }

    /* Force the list to make room for the absolute icons */
    ul.fa-ul {
        list-style-type: none;
        margin-left: 2.5em; /* Adjust to match your design spacing */
        padding-left: 0;
        position: relative;
    }

    /* Force the icon to position absolutely to the left of the text */
    ul.fa-ul > li {
        position: relative;
    }

    ul.fa-ul > li > .fa-li {
        position: absolute;
        left: -2em;
        top: 0.15em; /* Adjust this to vertically align the point perfectly */
        text-align: center;
        width: 2em;
    }
        

/* Base / Reset */
  .cta::before{
    box-sizing: content-box !important;
  }

  /* Fonts / Text Styling */
  .slim-text-wide{
  
  width: 98%;}

  .text-18 {
    font-size: 20px;
  }

  .trust-bar-list li span{
    font-size: 20px;
    text-align: left;
    padding-left: 1.5rem;
  }

  /* Cards / Sections */


  .features-md{
    max-width: 92%;
  }

  .t-p-content .flexbox {
    flex-direction: column;
    gap: 40px;
  }

  .problem ul li, .trust ul li{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }

}