/* Mobile-specific styles for the hero section */
@media screen and (max-width: 875px) {
  /* Remove background image and use solid color on mobile */
  #challenge {
    background-image: none !important;
    background-color: #FCF8F1 !important;
  }
  /* Make header shorter on mobile */
  header {
    height: 50px !important;
    min-height: 50px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 10px !important; /* Add some padding on sides */
    background: rgba(255, 255, 255, 0) !important; /* Colorless with 0 opacity for color */
    backdrop-filter: blur(8px) !important; /* Keep the blur effect */
    -webkit-backdrop-filter: blur(8px) !important; /* For Safari */
  }
  
  /* More padding below logo on mobile */
  .header-logo {
    margin-top: 11px !important;
    margin-bottom: 10px !important;
  }
  
  /* Header CTA button for mobile */
  button.header-cta-button.cta-button, a.header-cta-button.cta-button {
    background-color: #FF8F09 !important;
    color: white !important;
    border: none !important;
    border-radius: 32px !important; /* More rounded corners */
    padding: 5px 16px !important;
    font-size: 16px !important;
    font-weight: normal !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;
    cursor: pointer !important;
    margin: 0 !important;
    margin-right: 10px !important;
    display: block !important;
    position: absolute !important;
    right: 60px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  
  /* Adjust header-right for mobile */
  .header-right {
    position: static !important;
  }
  
  /* Hide only desktop auth buttons */
  .nav-auth-buttons {
    display: none !important;
  }
  
  /* Hide nav by default on mobile */
  nav {
    display: block !important;
  }
  
  /* More padding below hamburger menu on mobile */
  .menu-toggle {
    position: static !important; /* Normal document flow */
    margin-left: auto !important; /* Push to the right */
    margin-top: 19px !important; /* Push button lower */
    margin-bottom: 15px !important; /* Now margin will work properly */
    height: 50px !important; /* Bigger height */
    font-size: 40px !important; /* Bigger hamburger bars */
    color: #ccc !important; /* Lighter grey bars */
    background-color: transparent !important; /* Keep bg invisible */
  }
  
  /* Reduce margin above the title in hero section */
  #logged-out-intro {
    padding-top: 0 !important; /* No padding at the top */
    padding-bottom: 0 !important; /* No padding at the bottom on mobile */
  }
  
  /* Hero content padding on mobile */
  .hero-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  
  /* Title container with left alignment */
  .hero-headline-container {
    margin-top: -20px !important; /* Negative margin to pull title up */
    margin-bottom: 0.1rem !important; /* Even less margin below subtitle container */
    text-align: left !important; /* Left alignment for all content */
    margin-left: -5px !important; /* Negative margin to reduce padding for title */
    margin-right: -5px !important;
  }
  
  /* Main title left-aligned */
  .fixed-width-headline {
    width: 100% !important; /* Full width on mobile */
    text-align: left !important; /* Left-aligned on mobile */
  }
  
  /* Main headline left-aligned and much smaller */
  .fixed-width-headline .hero-headline {
    text-align: center !important; /* Center-aligned on mobile */
    font-size: 2rem !important; /* Slightly smaller font size on mobile */
    margin-bottom: 0.8rem !important; /* More space below the dynamic word line */
  }
  
  /* Subtitle centered on mobile */
  div.hero-headline-container > h1.hero-headline.second-line.burnt-orange {
    display: block !important;
    text-align: center !important;
    font-size: 1.3rem !important; /* Slightly reduced size */
    line-height: 1.25 !important; /* Slightly increase line spacing */
    margin: 0.5rem 0 1.5rem 0 !important; /* Top margin and more bottom margin */
    padding: 0 20px !important; /* Add left and right padding */
  }
  
  /* Adjust spacing between bullet points on mobile */
  ul.hero-bullets {
    margin-top: 0 !important; /* No margin at the top of bullet list */
    margin-bottom: 0 !important; /* No margin at the bottom of bullet list */
    padding-left: 15px !important; /* Add left padding for bullets */
    padding-right: 15px !important; /* Add right padding for bullets */
  }
  
  .hero-bullets li {
    margin-bottom: 0.8rem !important; /* Slightly reduce spacing between bullets */
    font-size: 1.2rem !important; /* Larger font size for mobile */
  }
  
  /* Slightly smaller checkmarks on mobile and ~5px less gap to text */
  .hero-bullets .bullet-icon {
    font-size: 2.2rem !important;
    margin-right: 2px !important; /* Minimal space between checkmark and text */
    min-width: 35px !important; /* Reduce from desktop 40px to tighten spacing */
  }
  
  /* Mobile CTA button styling */
  .mobile-cta {
    margin-top: 5px !important; /* Very little space above CTA */
    margin-bottom: 1.5rem !important;
    text-align: center !important;
  }
  
  .mobile-cta .cta-button {
    max-width: 100% !important;
    font-size: 1.1rem !important;
    padding: 10px 60px !important; /* Less vertical, more horizontal padding */
  }

  /* Match testimonials CTA (second button) width/padding to hero CTA on mobile */
  #mobile-struggles-cta-button {
    font-size: 1.1rem !important;  /* Match hero CTA text size */
    padding: 10px 60px !important; /* Match hero CTA horizontal padding */
    width: 80% !important;         /* Target 80% width */
    max-width: 80% !important;
    display: inline-block !important; /* Center within text-align:center parent */
  }

  /* Make final CTA button 80% width on mobile */
  #mobile-final-cta-button {
    width: 80% !important;
    max-width: 80% !important;
    display: inline-block !important; /* Center within its container */
  }
  
  /* All CTA buttons on mobile */
  .cta-button {
    font-size: 1.3rem !important;
    line-height: 1.4 !important;
  }
  
  /* Testimonial section mobile adjustments */
  #testimonials {
    padding-top: 15px !important; /* Moderate margin above the testimonial section */
    padding-bottom: 0; /* No space below the testimonial section */
  }
  
  /* Remove struggles left padding on mobile - only for non-carousel version */
  .struggles-content-wrapper:not(.struggles-carousel) .struggles-left {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 15px !important;
    padding: 10px 20px !important;
    margin: 0 15px !important;
    box-sizing: border-box !important;
    width: auto !important;
  }
  
  /* Carousel version of struggles-left */
  .struggles-carousel .struggles-left {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 15px !important;
    padding: 10px 13px !important;
  }
  
  h2.testimonials-headline {
    font-size: 2.1rem !important; /* Slightly bigger font for the testimonial title */
    margin-bottom: -5px !important; /* 5px less margin below */
    margin-top: 50px !important; /* More margin above the title */
    line-height: 1.2; /* Reduce line height to minimize space */
    padding-bottom: 0; /* Ensure no padding */
  }
  
  .testimonial-quote {
    font-size: 0.86rem !important; /* Slightly smaller on mobile */
    line-height: 1.4 !important; /* Adjusted line height for the smaller font */
    margin-top: 20px !important; /* Move quote block up on mobile */
    padding-top: 14px !important; /* More padding above quote on mobile */
  }
  
  .testimonial-author {
    margin-top: 0 !important; /* No margin above reviewer names */
    margin-bottom: 16px !important; /* Slightly less bottom margin to balance padding */
  }
  
  .testimonial-name {
    font-size: 0.85rem !important; /* Smaller font for reviewer names */
  }
  
  .testimonial-age {
    font-size: 0.8rem !important; /* Smaller font for reviewer details */
  }

  .testimonial-date {
    margin-top: 0 !important; /* Remove negative margin on mobile */
  }
  
  /* OCD struggles section mobile adjustments */
  #ocd-struggles {
    padding-top: 0 !important; /* No margin above the section to reduce space below scrolls */
    padding-bottom: 15px !important; /* Less padding below the section */
    padding-left: 20px !important; /* Match testimonials left padding */
    padding-right: 20px !important; /* Match testimonials right padding */
  }
  
  .struggles-headline {
    font-size: 1.4rem !important; /* Even smaller font for the main title */
    line-height: 1.3 !important; /* Adjusted line height */
    width: 100% !important; /* No width limitation */
    margin-top: -10px !important; /* More negative margin to reduce space after testimonials */
    margin-bottom: 10px !important; /* Reduced bottom margin */
    text-align: left !important; /* Left aligned on mobile */
    padding-left: 10px !important; /* Reduced left padding */
    padding-right: 10px !important; /* Reduced right padding */
  }
  
  .struggles-subheading {
    font-size: 1.2rem !important; /* Smaller font for the subtitle */
    line-height: 1.4 !important; /* Adjusted line height */
    margin-bottom: 0.2rem !important; /* Even less margin below the subtitle */
  }
  
  .maybe-heading {
    font-size: 1.3rem !important; /* Smaller font for "Maybe you're..." text */
    text-align: left !important; /* Left aligned */
    margin-bottom: 0.1rem !important; /* Almost no margin below the "Maybe you're..." text */
    margin-top: 0 !important; /* No margin above */
    color: #FF8F09 !important; /* Orange color */
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important; /* Drop shadow */
  }
  
  .struggle-item {
    font-size: 1rem !important; /* Slightly bigger font for bullet points */
    margin-bottom: 10px !important; /* Slightly less margin between bullet points */
    color: white !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important; /* Drop shadow */
    padding-left: 25px !important; /* Medium space from bullet */
  }
  
  .struggle-item::before {
    content: "■" !important; /* Use square character */
    color: white !important;
    font-size: 0.8em !important; /* Make bullets smaller */
    top: 0.2em !important; /* Align with text */
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important; /* Drop shadow */
    left: 3.5px !important; /* Move bullet 1px closer to text */
  }
  
  .struggles-list {
    margin-bottom: 5px !important; /* Less margin below the list of bullet points */
    margin-top: 5px !important; /* Less margin above the list */
  }
  
  /* Reduce margin below the testimonial scroll images */
  .testimonial-scroll {
    margin-bottom: 10px; /* Less space below each scroll */
  }
  
  
  
  /* Struggles carousel container wrapper */
  .struggles-carousel-container {
    overflow: hidden !important;
    width: 100vw !important;
    margin-left: -20px !important;
    padding: 0 !important;
  }
  
  /* Horizontal scroll carousel for struggles on mobile */
  .struggles-carousel {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    scroll-padding-left: 20px !important;
    scroll-padding-right: 1px !important;
    gap: 20px !important;
    margin: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
  
  /* Add spacer before first item */
  .struggles-carousel::before {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    flex-shrink: 0;
  }
  
  /* Add spacer after last item */
  .struggles-carousel::after {
    content: '';
    display: block;
    width: 1px;
    height: 1px;
    flex-shrink: 0;
  }
  
  /* Hide scrollbar but keep functionality */
  .struggles-carousel::-webkit-scrollbar {
    display: none !important;
  }
  
  .struggles-carousel {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }
  
  /* Make struggles boxes take specific width for carousel */
  .struggles-carousel .struggles-left,
  .struggles-carousel .struggles-right-box {
    width: 85vw !important;
    max-width: none !important;
    flex: 0 0 85vw !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure struggles-right-box has same styling */
  .struggles-carousel .struggles-right-box {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 15px 13px !important;
  }
  
  /* Clear path text styling on mobile */
  .clear-path-text-mobile {
    font-size: 1.3rem !important;
    line-height: 1.3 !important;
    margin-bottom: 20px !important;
    margin-top: 30px !important; /* Increased margin above text */
  }
  
  /* Responsible Support section mobile adjustments */
  #responsible-support {
    padding-top: 25px !important; /* Moderate margin at the top of the responsible support section */
  }
  
  .section-wrapper.white-wrapper #responsible-support {
    padding-top: 25px !important; /* Ensure moderate padding even with the wrapper */
  }
  
  .responsible-container {
    margin-top: 5px !important; /* Small margin at the top of the container */
  }
  
  .responsible-headline {
    margin-top: 5px !important; /* Small margin at the top of the headline */
  }
  
  /* Meet Peachy (How it Works) section mobile adjustments */
  #meet-peachy {
    padding-top: 15px !important; /* Less margin above the section */
    padding-bottom: 15px !important; /* Less margin below the section */
    background-color: #FCF8F1 !important; /* Beige background on mobile */
  }
  
  .peachy-headline-container {
    margin-bottom: 15px !important; /* Less margin below the headline container */
  }
  
  .peachy-headline {
    font-size: 1.8rem !important; /* Bigger font for the title on mobile */
    margin-top: 20px !important; /* Moderate margin at the top */
    padding-left: 0 !important; /* No left padding */
    padding-right: 0 !important; /* No right padding */
    margin-left: 0; /* No left margin */
    margin-right: 0; /* No right margin */
  }
  
  .peachy-subheader {
    font-size: 1.6rem !important; /* Much bigger font for the subtitle, almost as big as title */
    font-weight: 800; /* Extra bold */
  }
  
  .step-title {
    font-size: 1rem !important; /* Smaller font for step titles */
  }
  
  .step-description {
    font-size: 0.9rem !important; /* Smaller font for step descriptions */
    line-height: 1.3 !important; /* Tighter line height */
  }
  
  .process-steps {
    gap: 10px !important; /* Less space between steps */
  }
  
  .process-step {
    margin-bottom: 5px !important; /* Less margin between steps */
  }
  
  .peachy-cta {
    margin-top: 40px !important; /* More margin above CTA */
    margin-bottom: 20px !important; /* Positive margin for proper spacing */
  }
  
  .peachy-cta .mobile-cta {
    display: none !important; /* Hide button on mobile */
  }
  
  /* Benefits/Cards section mobile adjustments */
  #benefits-flip {
    padding-top: 15px !important; /* Less padding at the top */
  }
  
  .benefits-header {
    margin-top: 0 !important; /* No margin at the top */
    margin-bottom: 5px !important; /* Even less margin below header */
  }
  
  .benefits-headline {
    font-size: 1.5rem !important; /* Smaller font for the title */
    margin-top: 0 !important; /* No margin at the top */
    margin-bottom: 0 !important; /* No margin below title */
  }
  
  .flip-cards-grid {
    gap: 8px 0 !important; /* Reduce vertical gap between cards */
    margin-bottom: 0 !important; /* No margin below the cards grid */
  }
  
  .flip-card {
    height: 140px !important; /* Make cards shorter */
  }
  
  .card-title {
    font-size: 1.1rem !important; /* Smaller card titles */
  }
  
  /* Benefits section button margin adjustments */
  #benefits-flip .benefits-cta-container {
    margin-top: 0 !important; /* No margin above the button */
    margin-bottom: 20px !important; /* Even more margin below the button */
    padding-top: 0 !important; /* No padding above */
  }
  
  /* The button itself should have no top margin */
  #benefits-flip-cta-button {
    margin-top: 0 !important;
  }
  
  /* Testimonials container wrapper */
  .testimonials-container {
    overflow: hidden !important;
    width: 100vw !important;
    margin-left: -20px !important;
    padding: 0 !important;
    margin-bottom: 0; /* Remove bottom margin */
    padding-bottom: 0; /* No padding at bottom */
    gap: 0; /* Remove flexbox gap */
  }
  
  /* Horizontal scroll carousel for testimonials on mobile */
  .testimonials-grid {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    padding-top: 0 !important; /* Override any padding-top */
    scroll-padding-left: 20px !important;
    scroll-padding-right: 1px !important;
    gap: 20px !important;
    margin: 0 !important;
    margin-top: -20px !important; /* Slightly more negative to pull list up */
    width: 100% !important;
    justify-content: flex-start !important;
  }
  
  /* Add spacer before first item */
  .testimonials-grid::before {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    flex-shrink: 0;
  }
  
  /* Add spacer after last item */
  .testimonials-grid::after {
    content: '';
    display: block;
    width: 1px;
    height: 1px;
    flex-shrink: 0;
  }
  
  
  /* Hide scrollbar but keep functionality */
  .testimonials-grid::-webkit-scrollbar {
    display: none !important;
  }
  
  .testimonials-grid {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }
  
  /* Make testimonial cards take specific width for carousel */
  .testimonial-scroll {
    width: 80vw !important;
    max-width: none !important;
    flex: 0 0 80vw !important;
    scroll-snap-align: start !important;
    margin-bottom: 0; /* Remove bottom margin from scroll images */
    padding-top: 40px !important; /* Match latest pushed version */
    padding-bottom: 64px !important; /* Increase bottom padding to further reduce gap */
  }

  /* FAQ section mobile adjustments */
  #faq h2 {
    font-size: 2rem !important; /* Slightly bigger title on mobile */
    text-align: left !important; /* Left align title on mobile */
    margin-bottom: 20px !important; /* Less margin below title */
  }

  .faq-question {
    font-size: 1.3rem !important; /* Smaller question text on mobile */
    font-weight: normal; /* Not bold on mobile */
    position: relative; /* For positioning the + button */
    padding-right: 40px; /* Make room for the + button */
    cursor: pointer; /* Show it's clickable */
    color: #FF8F09; /* Orange color for questions */
  }

  .faq-answer {
    font-size: 1.3rem !important; /* Same size as question on mobile */
    display: none; /* Initially hidden on mobile */
    margin-top: 10px; /* Space when shown */
  }
  
  .faq-answer.show {
    display: block; /* Show when expanded */
  }
  
  .faq-answer p {
    font-size: 1em; /* Override the 1.1em from typography.css to keep same size as parent */
  }
  
  .faq-question::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8rem;
    color: #FCF8F1;
    font-weight: normal;
    transition: transform 0.3s;
  }
  
  .faq-question.expanded::after {
    content: '−'; /* Minus sign when expanded */
  }
  
  .faq-item {
    border-bottom: 2px solid #FCF8F1; /* Solid white line between items */
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  
  .faq-item:last-child {
    border-bottom: 2px solid #FCF8F1; /* Keep solid white line after last item too */
    margin-bottom: 60px; /* More margin after the last FAQ item */
  }
  
  /* Style responsible and CTA headings specifically on mobile */
  #faq .responsible-container h2.responsible-headline {
    text-align: center !important;
    font-size: 1.8rem !important;
    display: block;
    width: 100%;
  }
  
  #faq .final-cta-container h2.final-cta-headline {
    text-align: center !important;
    font-size: 1.5rem !important;
    display: block;
    width: 100%;
  }
  
  /* Reduce margin below button container on mobile */
  .final-cta-button-container {
    margin-bottom: 2.4rem !important;
  }
  
  /* Footer content in FAQ section on mobile */
  #faq footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  #faq footer p,
  #faq footer div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Fix mini-disclaimer padding on mobile */
  .mini-disclaimer p {
    margin: 0 !important;
  }
  
  /* Meet Peachy section title and subtitle line height adjustments */
  .peachy-headline {
    line-height: 1.3 !important;
  }
  
  .peachy-subheader {
    line-height: 1.3 !important;
  }
  
  /* Meet Peachy mobile card styles */
  .process-step-card {
    position: relative;
    width: 100%;
    height: 150px;
    margin-bottom: 15px;
    perspective: 1000px;
    cursor: pointer;
  }
  
  /* Our Story card with same animation as others */
  .process-step-card.our-story-card {
    height: 350px; /* Taller to fit content */
    margin-top: 30px;
    margin-bottom: 40px;
  }
  
  .process-step-card.our-story-card .card-back {
    padding: 20px 15px;
    overflow-y: auto; /* Allow scrolling if content is too long */
    align-items: flex-start; /* Left align content */
  }
  
  
  .card-front,
  .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    backface-visibility: hidden;
    transition: transform 0.6s;
    display: flex;
    align-items: center;
  }
  
  .card-front {
    z-index: 2;
    transform: rotateY(0deg);
  }
  
  .card-back {
    transform: rotateY(180deg);
    padding: 20px 15px;
    flex-direction: column;
    justify-content: center;
  }
  
  .process-step-card.flipped .card-front {
    transform: rotateY(-180deg);
  }
  
  .process-step-card.flipped .card-back {
    transform: rotateY(0deg);
  }
  
  .card-title-section {
    flex: 0 0 50%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  .card-step-title {
    font-size: 1.6rem;
    font-weight: bold;
    color: #FF8F09;
    margin: 0;
    line-height: 1.2;
  }
  
  .card-image-section {
    flex: 0 0 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  
  .card-image-section img {
    width: 95%;
    height: 95%;
    object-fit: contain;
  }
  
  .card-expand-indicator,
  .card-collapse-indicator {
    position: absolute;
    bottom: 10px;
    right: 15px;
    color: #FF8F09;
    font-size: 2rem;
    font-weight: normal;
    line-height: 1;
  }
  
  .card-collapse-indicator {
    display: none;
  }
  
  .card-description {
    font-size: 1rem;
    line-height: 1.4;
    color: #2A1700;
    margin: 0;
    text-align: center;
    padding: 0 10px;
  }
  
  .process-step-card.our-story-card .card-back .card-description {
    font-size: 0.9rem;
  }
  
  /* Mobile hamburger menu styling */
  nav ul.show {
    align-items: flex-start !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    height: 100dvh !important;
  }
  
  nav ul.show li {
    text-align: left !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  nav ul.show li a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 1.4rem !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid rgba(64, 34, 0, 0.2);
    width: 100%;
    background: transparent !important;
    border-radius: 0 !important;
  }
  
  /* Add arrow to all links except logout */
  nav ul.show li:not(.mobile-auth-container) a::after,
  nav ul.show li.mobile-auth-container a#mobile-login::after {
    content: '>';
    font-size: 1.2rem;
    color: #402200;
  }
  
  /* Remove arrow from logout link */
  nav ul.show li.mobile-auth-container a#mobile-logout::after {
    content: none !important;
  }
  
  /* Hide arrow when login form is active */
  nav ul.show li.mobile-auth-container a#mobile-login.login-active::after {
    content: none !important;
  }
  
  /* Remove border from last nav item */
  nav ul.show li:last-of-type a {
    border-bottom: none;
  }
  
  /* Style the mobile menu CTA within the ul */
  nav ul.show li.mobile-menu-cta {
    margin-top: auto !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  
  nav ul.show li.mobile-menu-cta p {
    color: #795A38 !important;
  }
  
  nav ul.show li.mobile-menu-cta button,
  nav ul.show li.mobile-menu-cta a.cta-button {
    width: 100% !important;
    background-color: #FF8F09 !important;
    color: white !important;
    border: none !important;
    border-radius: 32px !important; /* More rounded corners */
    padding: 15px 30px !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    cursor: pointer !important;
    text-align: center !important;
    display: block !important;
    text-decoration: none !important;
  }
  
  /* Remove arrow from mobile menu CTA button */
  nav ul.show li.mobile-menu-cta a.cta-button::after {
    content: none !important;
  }
  
  /* Mobile nav login form styles */
  li#mobile-nav-login-form {
    width: 100%;
    background: transparent;
    border: none;
    margin: 0;
    list-style: none;
  }
  
  #mobile-nav-login-form h2 {
    font-family: 'Times Custom', Times, serif;
  }
  
  #mobile-nav-login-form input {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  #mobile-nav-login-form .phone-input-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  
  #mobile-nav-login-submit:active {
    transform: scale(0.98);
  }
  
  #mobile-nav-back:hover {
    background-color: #402200 !important;
    color: white !important;
  }
  

}

/* Ensure consistent CTA heights across post-hero sections (mobile) */
@media screen and (max-width: 875px) {
  #mobile-struggles-cta-button,
  #mobile-final-cta-button {
    font-size: 1.1rem !important;  /* Unify font size */
    line-height: 1.3 !important;   /* Stable line height for two-line label */
    padding: 12px 24px !important; /* Unify vertical padding */
    min-height: 64px !important;   /* Enforce consistent overall height */
    display: inline-block !important;
  }
}