/* Hide stock status by default until JS runs */
.in-stock {
  display: none;
  
}

.out-of-stock {
  display: none;
}

.visible {
  display: block !important;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

* { box-sizing: border-box; }
body, html {
  margin: 0; padding: 0;
  font-family: 'Inter', sans-serif;
  background: #fff;
  color: #333333;
  scroll-behavior: smooth;
  font-size: 1.5rem;
}

section {
  height: 100vh;
  padding: 0 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Navbar */
.navbar {
   top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem 0; background: #fff; z-index: 10;
}
.nav-links { display: flex; gap: 2rem; }
.nav-links a {
  text-decoration: none;
  color: #000000;
  font-weight: 600;
  transition: color .3s;
  font-size: 0.7rem;
  font-weight: 500;
}
.nav-links a:hover { color: #007BFF; }
.logo { height: 7vh; }

/* Add hamburger menu styles */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 0.5rem;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: #333;
  margin: 2px 0;
  transition: 0.3s;
}

/* Shared button */
.btn {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #000000;
  color: #ffffff;
  text-decoration: none;
  border-radius: .25rem;
  font-weight: 600;
  margin-top: 1rem;
  font-size: 1.2rem;
}

.btn:hover {
  background-color: #0056b3;
}

/* Small button for nav/hamburger */
.small-btn {
  display: inline-block;
  padding: 0.4rem 1rem;
  background-color: #000;
  color: #fff !important;
  text-decoration: none;
  border-radius: .25rem;
  font-weight: 600;
  font-size: 0.8rem;
  margin-top: 0;
  margin-bottom: 0;
  transition: background 0.2s;
  border: none;
  cursor: pointer;
}
.small-btn:hover {
  background-color: #0056b3;
  color: #fff !important;
}

/* Hero */
#hero .hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#hero .hero-content .images { display: none; }
#hero h1 { font-size: 2rem; margin: .5rem 0; }
#hero p { font-size: 1rem; }

/* Pricing and stock text */
#hero .text p:nth-last-child(2),
#hero .text p:last-child {
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0.4rem 0;
  color: #666;
}

.next-section {
  text-align: center;
  margin-top: 0.5rem;
}
.arrow-down {
  width: 1rem; height: 1rem;
  border: solid black;
  border-width: 0 1px 1px 0;
  display: inline-block;
  transform: rotate(45deg);
  transition: border-color .3s;
  margin-bottom: 2rem;
}
.arrow-down:hover { border-color: #007BFF; }

/* Features / How it works? */

#features h2,
#demo h2,
#pricing h2 {
  text-align: center;
  margin-top: 1rem;    /* Consistent top margin */
  font-size: 1.5rem;   /* Consistent font size */
  font-weight: 500;    /* Consistent font weight */
  margin-bottom: 0rem;
}

/* Card */
.card {
  background: linear-gradient(135deg, #ffffff 0%, #d4e5ff 100%);
  border: 1px solid #e8f0fe;
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  flex-shrink: 0;
  width: 80vw;
  scroll-snap-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Remove or override all specific .card:nth-child background rules */
.card:nth-child(1), .card:nth-child(2), .card:nth-child(3),
.pricing-cards .device, .pricing-cards .independent, .pricing-cards .clinic {
  background: none;
}

.card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  margin-top: 0rem;
}

/* Card Text */
.card p {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

/* Card Images */
.card img {
  display: block; /* Ensures the image behaves like a block element */
  margin: 0 auto;
  max-height: 45vh;
}

/* Specific styling for demo_usage image */
img[src="demo_usage.png"] {
  margin-top: 3rem;
  max-height: 35vh;
  border-radius: 12px;
}

/* Card Grid - Carousel on Mobile */
.card-grid {
  display: flex;
  gap: 1rem; /* Reduced from 1.5rem */
  padding: 0.5rem 0; /* Reduced from 1rem 0 */
  overflow-x: auto; /* Enable horizontal scrolling */
  scroll-snap-type: x mandatory; /* Enable scroll snapping */
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
  padding-bottom: 0.5rem; /* Reduced from 1rem */
  margin-top: 1rem; /* Or adjust as needed to match the visual space after the title */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.card-grid::-webkit-scrollbar {
  display: none;
}

/* Add indicators for carousel */
.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.indicator {
  width: 0.5rem;
  height: 0.5rem;
  background-color: #ccc;
  border-radius: 50%;
}

.indicator.active {
  background-color: #333;
}


/* Pricing Section */
#pricing {
  text-align: center;
  padding: 2rem 1rem; /* Reduced padding */
}

#pricing li {
  font-size: 0.8rem;
  margin-bottom: 0.5rem; 
  text-align: left;
}

/* Pricing cards layout */
.pricing-cards {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-content: center;
  margin: 2rem auto;
  padding: 0 2rem;
  max-width: 1200px;
  margin-top: 1rem; /* Or adjust as needed to match the visual space after the title */
}

.pricing-cards .card {
  flex: 1;
  min-width: 0; /* Prevents flex items from overflowing */
  max-width: 400px;
}

/* Price card headings */
.pricing-cards .card h2 {
  font-size: 1.2rem; /* Match other card h3 size */
  font-weight: 500;
  margin-bottom: 0.5rem;
  margin-top: 0;
}

/* Price amount */
.pricing-cards .card h3 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: #333;
}

/* Price card lists */
.pricing-cards .card ul {
  font-size: 0.8rem; /* Match other card p size */
  margin: 0.5rem 0;
  padding-left: 1.5rem;
  list-style-type: disc;
  text-align: left;
}

.pricing-cards .card li {
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

/* make calculator sliders grayscale */
#calculator input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
}
#calculator input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: #ddd;
}
#calculator input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  margin-top: -5px;
  background: #888; border-radius: 50%;
  cursor: pointer;
}
#calculator input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 3px; background: #ddd;
}
#calculator input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; background: #888;
  border: none; border-radius: 50%; cursor: pointer;
}
/* IE/Edge */
#calculator input[type="range"]::-ms-track {
  height: 6px; background: transparent; border-color: transparent; color: transparent;
}
#calculator input[type="range"]::-ms-fill-lower,
#calculator input[type="range"]::-ms-fill-upper {
  background: #ddd; border-radius: 3px;
}
#calculator input[type="range"]::-ms-thumb {
  width: 16px; height: 16px; background: #888;
  border: none; border-radius: 50%; cursor: pointer;
}

/* smaller calculator labels on desktop */
@media (min-width: 1000px) {
  #calculator label {
    font-size: 0.9rem;
    font-weight: 500;
  }
}

/* ensure the bold amount stands out */
#calculator h3 strong {
  font-weight: 700;
}

/* clean up formula text */
#formula {
  font-size: 0.6rem !important;
  color: #555;
  margin-top: 0.25rem;
}

/* Formula text styling */
.formula {
  font-size: 0.5rem; 
  color: #666;
  margin: 0.5rem 0 1rem;
  font-family: 'Inter', sans-serif;
}

/* Calculator section spacing */
#calculator {
  margin-top: 2rem;
}

.calculator-input:first-child {
  margin-top: 1.5rem;
}

/* FAQ Section overrides */
#faq {
  height: auto;       /* Allow FAQ to grow with its content */
  padding: 2rem 4rem; /* Consistent padding */
  margin-top: 2rem;   /* Spacing from previous section */
}

/* FAQ enhancements */
#faq details {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0;
}
#faq details:last-of-type {
  border-bottom: none;
}
#faq summary {
  font-size: 1rem;
  cursor: pointer;
  margin: 0;
  padding: 0.5rem 0;
}
#faq p {
  font-size: 0.875rem;
  margin: 0.5rem 0 0;
}
#faq h3 {
  font-size: 1.2rem;
  margin: 1rem 0;
}

#faq h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* Pricing wrapper */
.pricing-wrapper {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  justify-content: center;
}

/* Hardware and software panels - adjusted widths */
.hardware-group {
  flex: 2; /* Takes up twice the space */
}

.software-group {
  flex: 1;
}

.software-group .step-label,
.software-group .step-desc,
.software-group .card h2,
.software-group .card h3,
.software-group .card li {
  color: inherit;
}

/* Keep subscription cards at their original width */
.pricing-cards .independent,
.pricing-cards .clinic {
  width: calc((100% - 2rem) / 2);
}

@media (min-width: 1000px) {
  .hardware-group {
    flex: 0 0 25%;
  }

  .software-group {
    flex: 0 0 60%;
    border-left: 1px solid #e0e0e0;
    padding-left: 2rem;
    margin-left: 2rem;
  }

  /* Adjust subscription cards to fit the wider software section */
  .pricing-cards .independent,
  .pricing-cards .clinic {
    width: calc((100% - 2rem) / 2);
  }

}

/* Pricing-wrapper specific overrides for widescreen */
@media (min-width: 1000px) {
  .pricing-wrapper .hardware-group .card {
    /* Step 1 card fills hardware (40%) section */
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
  }
  .pricing-wrapper .software-group .pricing-cards .card {
    /* Step 2 cards split software (60%) section into two */
    width: calc((100% - 2rem) / 2);
    max-width: none;
    flex: 0 0 auto;
  }
}

@media (max-width: 1000px) {
  #hero .text p:nth-last-child(2),
  #hero .text p:last-child {
    line-height: 1.3;
    margin: 0.2rem 0;
  }

  /* Mobile adjustments */
  .hardware-group,
  .software-group {
    flex: 1 1 100%;
  }
  
  .pricing-cards .independent,
  .pricing-cards .clinic {
    width: 90vw;
  }
  
  .card.device {
    width: 90vw;
  }

  /* Center card images on mobile */
  .card img {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 80vw;
    object-fit: contain;
  }
  
  /* Remove box around software group */
  .software-group {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
  }

    .hamburger {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
  }
  .hamburger-signin {
    margin-top: 2rem;
    align-self: flex-end;
    display: block;
  }
  .nav-links .nav-signin {
    display: none;
  }

  .waitlist-form {
    align-items: center;
    width: 100%;
  }
  
  .waitlist-form .input-group {
    width: 90vw;
  }
  
  .waitlist-form h3,
  .waitlist-form p {
    text-align: center;
  }

   .pricing-wrapper {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .software-group {
      border-top: 1px solid #e0e0e0;
      padding-top: 2rem;
      margin-top: 2rem;
    }

  /* Divider between hardware and software */
  @media (min-width: 1000px) {
    .pricing-wrapper {
      display: flex;
      gap: 2rem;
    }
    .software-group {
      border-left: 1px solid #e0e0e0;
      padding-left: 2rem;
      margin-left: 2rem;
    }
  }

  /* Step labels and descriptions */
  .step-label {
    font-weight: 700;
    margin-bottom: 1rem; /* Reduced from 2rem */
  }

  .step-desc {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    color: #555;
  }

  /* Mobile layout */
  @media (max-width: 1000px) {

    /* Adjust base font size */
    body, html {
      font-size: 1rem;
      overflow-x: hidden;
      width: 100%;
    }

    /* Show hamburger, hide nav links by default */
    .hamburger {
      display: flex;
      z-index: 11;
    }

    .nav-links {
      position: fixed;
      top: 0;
      right: -100%;
      height: 100vh;
      width: 70%;
      background: white;
      flex-direction: column;
      padding: 4rem 2rem;
      transition: 0.3s;
      box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }

    .nav-links.active {
      right: 0;
    }

    /* Mobile text sizes */
    #hero h1 {
      font-size: 2rem;
    }

    #hero p {
      font-size: 0.9rem;
    }

    #features h2,
    #pricing h2 {
      font-size: 1.5rem; /* Consistent mobile font size */
      margin-top: 1.5rem; /* Adjust mobile spacing if needed */
    }

    #pricing h3 {
      font-size: 1.5rem;
    }

    .card h3 {
      font-size: 1rem;
    }

    .card p {
      font-size: 0.8rem;
    }

    #pricing li {
      font-size: 0.75rem;
    }

    .btn {
      font-size: 1.1rem;
      padding: 0.75rem 1.5rem;
    }

    /* Adjust section padding */
    section {
      padding: 1rem;
      min-height: 100vh;
      height: auto;
    }

    .pricing-cards {
      flex-direction: column;
      gap: 1rem;
      padding: 0 1rem;
      margin: 1rem 0;
      width: 100%;
      margin-top: 1rem; /* Consistent mobile top margin */
    }

    /* Independent and Clinic cards */
    .pricing-cards .independent,
    .pricing-cards .clinic {
      height: auto;
      min-height: fit-content;
      padding: 1.5rem;
    }

    /* Make content scrollable if it overflows */
    .pricing-cards .card {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      width: 90vw;
      height: auto;
      min-height: 0;
      margin: 0 auto 1rem auto;
      scroll-snap-align: none;
      padding: 1.5rem;
    }

    /* Adjust padding and margins for better fit */
    .pricing-cards .card h2 {
      margin-top: 0.5rem;
      margin-bottom: 1rem;
      font-size: 1rem;
    }

    .pricing-cards .card h3 {
      margin: 1rem 0;
      font-size: 0.9rem;
    }

    .pricing-cards .card ul {
      margin: 1.5rem 0;
      padding-left: 1.5rem;
      padding: 0 1.5rem;
      font-size: 0.8rem;
    }

    .pricing-cards .card li {
      margin-bottom: 0.75rem;
    }

    .pricing-cards .card {
      width: 90vw;
    }

    /* Make cards more compact */
    #pricing .card {
      padding: 1rem;
    }

    #pricing ul {
      margin: 0.5rem 0;
      padding-left: 1.5rem;
    }

    #pricing li {
      margin: 0.25rem 0;
    }

    /* Hero images: show and stack on mobile */
    #hero .hero-content .images {
      display: flex !important;      
      flex-direction: row;
      justify-content: center;
      gap: 0.5rem;
      margin-top: 1rem; /* Add space below images */
    }

    #hero .hero-content .images img {
      max-width: 80vw;               /* smaller so two fit neatly */
      width: 100%;
      height: auto;
    }

    #hero .btn {
      margin-top: 1rem; /* Add space above button */
    }

    /* Pricing cards: full width, more padding */
    .pricing-cards {
      padding: 0 1rem;
      gap: 1rem;
    }
    .pricing-cards .card {
      width: 100%;
      padding: 1.5rem;
      margin: 0 auto 1rem;
      min-height: auto;
      overflow-y: auto;
    }

    /* Calculator mobile spacing */
    .calculator-input {
      margin-bottom: 1.5rem; /* Increase space between slider groups */
    }

    #calculator label {
      margin-bottom: 1rem; /* More space between label and slider */
      display: block;
      font-size: 0.9rem;
    }

    #calculator input[type="range"] {
      margin: 0.75rem 0; /* Add space above and below slider */
    }

    /* Earnings text spacing */
    #earnings-headline {
      margin: 1.5rem 0; /* More space around earnings number */
      font-size: 1.3rem;
    }

    #calculator {
      margin-top: 2.5rem;
    }
    
    .calculator-input:first-child {
      margin-top: 2rem;
    }

    /* Pricing wrapper responsive */
    .pricing-wrapper {
      flex-direction: column;
    }
    .software-group {
      border-left: none;
    }
  }
}

/* Shoprocket widget customization */
.sr-element {
  height: 100%;
}

.sr-products {
  height: 100%;
}

/* Pricing card specific styles */
#pricing .card {
  padding: 1rem; /* Reduced padding inside cards */
}

#pricing ul {
  margin: 0.5rem 0; /* Reduced margin */
  padding-left: 1rem; /* Reduced padding */
}

#pricing li {
  margin: 0.25rem 0; /* Reduced margin between list items */
}

/* CTA Button spacing */
#pricing .btn {
  margin-top: 1rem;
  display: block;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

/* Widescreen layout */
@media (min-width: 1000px) {
  .pricing-cards {
    display: flex; /* Change from grid to flex */
    flex-direction: row;
    gap: 2rem;
  }

  .pricing-cards .card {
    width: calc((100% - 4rem) / 3); /* Equal widths with gaps */
    margin: 0;
  }

  /* Hero */
  #hero .hero-content {
    flex-direction: row;
    text-align: left;
  }
  #hero .hero-content .images {
    display: flex;
    gap: 1rem;
  }
  #hero .hero-content .images img {
    max-height: 60vh;
  }
  #hero h3 {
    margin-bottom: 0rem;
  }

  /* Cards on larger screens */
  .card {
    width: calc((100% - 4rem) / 3); 
  }

  /* Card grid on larger screens */
  .card-grid {
    flex-wrap: wrap; /* Allow wrapping on larger screens */
    justify-content: center; /* Center cards */
    overflow-x: visible; /* Disable horizontal scrolling */
    scroll-snap-type: none; /* Disable scroll snapping */
  }

  /* Hide carousel indicators on larger screens */
  .carousel-indicators {
    display: none;
  }

  /* Update button width in widescreen layout */
  #pricing .btn {
    width: 50%;
    max-width: 600px;
  }

  #pricing h3 {
    font-size: 1rem;
  }
}

/* Footer styling */
.footer-links {
  text-align: center;
  padding: 2rem 4rem;
  height: auto;
}

.footer-links a {
  color: #666;
  text-decoration: none;
  margin: 0 1rem;
  transition: color 0.3s;
  font-size: 0.9rem;
}

.footer-links a:hover {
  color: #007BFF;
}

.footer-links p {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #666;
}

@media (max-width: 767px) {

}

/* Plan icons */
.plan-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
}

/* Most Popular Badge */
.most-popular-badge {
  position: absolute;
  top: 0.5rem;
  left: 80%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #007BFF 0%, #0056b3 100%);
  color: white;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
  z-index: 5;
}

/* Make the independent card position relative for badge positioning */
.card.independent {
  position: relative;
}

/* Step description text styling */
.software-group p {
  font-size: 0.8rem;
}

.icon-attributions {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.8rem;
  color: #666;
}

.icon-attributions a {
  color: #666;
  text-decoration: none;
}

.icon-attributions a:hover {
  text-decoration: underline;
}

/* Onboarding screenshot styling */
.onboarding-screenshot {
  max-width: 100%;
  max-height: 20rem;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  margin: 0.5rem auto;
  display: block;
}

/* Ensure video elements follow the same styling */
video.onboarding-screenshot {
  width: 100%; /* Videos should fill available width */
}

/* Wide screen styling for onboarding screenshot */
@media (min-width: 768px) {
  .onboarding-screenshot {
    max-width: 50%;
  }
}

/* Privacy and Terms of Service pages */
.privacy-page,
.tos-page,
.instructions-page {
  margin-top: 2rem;
}

.privacy-page section,
.tos-page section,
.instructions-page section {
  height: auto;
  min-height: auto;
  padding: 2rem 4rem;
}

.privacy-page section h1,
.tos-page section h1,
.instructions-page section h1 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

/* Instructions page h1 styling */
.instructions-page h1 {
  text-align: center;
}

.privacy-page section h2,
.tos-page section h2,
.instructions-page section h2 {
  font-size: 1rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.privacy-page section p,
.tos-page section p,
.privacy-page section li,
.tos-page section li,
.instructions-page section p,
.instructions-page section li {
  font-size: 0.8rem;
  line-height: 1.4;
  margin-bottom: 0.4rem;
}

/* Instructions page specific spacing */
.instructions-page ol li {
  margin-bottom: 1.5rem; /* More space between list items */
  line-height: 1.6; /* Better line height for readability */
}

.instructions-page ol ol li {
  margin-bottom: 1.5rem; /* More spacing for nested list items */
  margin-top: 0.75rem; /* Add space above nested items */
  line-height: 1.7; /* Even better line height for sublists */
}

.instructions-page ol ol {
  margin-top: 1rem; /* Space before the sublist starts */
  margin-bottom: 1rem; /* Space after the sublist ends */
  padding-left: 2rem; /* More indentation for better hierarchy */
}

.instructions-page p {
  margin: 1.5rem 0; /* More space around paragraphs */
  line-height: 1.6;
}

.instructions-page h2 {
  margin-top: 2.5rem; /* More space before section headings */
  margin-bottom: 1.5rem; /* More space after section headings */
}

.instructions-page .onboarding-screenshot {
  margin: 1.5rem auto; /* More space around screenshots */
}

/* Instructions page h3 styling */
.instructions-page h3 {
  font-size: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

/* Color-coded text for tension scores */
.tension-very-tight {
  color: #ef4444; /* Red */
  font-weight: 600;
}

.tension-tight {
  color: #f97316; /* Orange */
  font-weight: 600;
}

.tension-typical {
  color: #eab308; /* Yellow */
  font-weight: 600;
}

.tension-loose {
  color: #22c55e; /* Light Green */
  font-weight: 600;
}

.tension-very-loose {
  color: #166534; /* Dark Green */
  font-weight: 600;
}

@media (max-width: 767px) {
  .privacy-page section,
  .tos-page section,
  .instructions-page section {
    padding: 5rem 2rem 2rem 2rem;
  }
  
  .privacy-page section h1,
  .tos-page section h1,
  .instructions-page section h1 {
    font-size: 1.25rem;
  }
  
  .privacy-page section h2,
  .tos-page section h2,
  .instructions-page section h2 {
    font-size: 0.9rem;
  }
  
  .privacy-page section p,
  .tos-page section p,
  .privacy-page section li,
  .tos-page section li,
  .instructions-page section p,
  .instructions-page section li {
    font-size: 0.75rem;
  }

    .footer-links {
    padding: 2rem 1rem;
  }
  
  .footer-links a {
    display: block;
    margin: 0.5rem 0;
  }
}

/* Waitlist Form */
.waitlist-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.waitlist-form h3 {
  font-size: 1rem;
  margin: 0;
  color: black;
}

.waitlist-form p {
  font-size: 0.6rem;
  margin: 0;
  color: black;
}

.waitlist-form .input-group {
  display: flex;
  width: 30vw;
  gap: 0.5rem;
}

.waitlist-form input[type="email"] {
  flex: 1;
  padding: 0.5rem;
}

.waitlist-form button {
  padding: 0.5rem 1rem;
  background-color: black;
  color: white;
  border: none;
  cursor: pointer;
}

.app-store-badge {
  text-align: center;
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.app-store-badge img {
  width: 10rem;
  height: auto;
  object-fit: contain;
  display: block;
}

.app-store-badge a {
  text-decoration: none;
  border: none;
  outline: none;
}

/* Stock Display Styles */
.stock-display {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  display: inline-block;
  margin-top: 0.5rem;
}

.stock-display.in-stock {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.stock-display.low-stock {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.stock-display.out-of-stock {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

@media (min-width: 1000px) {
  .hamburger-signin {
    display: none;
  }
  .nav-links .nav-signin {
    display: inline-block;
  }
}

/* Email Popup Modal */
.email-popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  animation: fadeIn 0.3s ease-in-out;
}

.email-popup-overlay.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

.email-popup-content {
  position: relative;
  max-width: 500px;
  width: 90%;
  background-color: #f9f9f9;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease-in-out;
}

.email-popup-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  transition: color 0.2s;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.email-popup-close:hover {
  color: #000;
}

.email-popup-content h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
  margin-top: 0;
  color: #333;
}

.email-popup-content p {
  font-size: 0.7rem;
  color: #666;
  margin-bottom: 0.4rem;
  line-height: 1.2;
}

.email-popup-content form {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.email-popup-content input[type="email"] {
  padding: 0.4rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 0.75rem;
  background-color: white;
}

.email-popup-content button[type="submit"] {
  font-size: 0.75rem;
  padding: 0.4rem;
  background-color: #000000;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}

.email-popup-content button[type="submit"]:hover {
  background-color: #0056b3;
}

.email-popup-message {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  text-align: center;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 1000px) {
  .email-popup-content {
    padding: 1.5rem;
    width: 95%;
  }
  
  .email-popup-close {
    top: 0.5rem;
    right: 0.5rem;
  }
}