* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #0f172a;
  background: #e9e6c5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: #2563eb;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: #04BEA6;
  color: #e5e7eb;
}

.nav .brand {
  font-weight: 600;
  color: #FFD15D;
}

.nav-links a {
  margin-left: 1rem;
  color: #fff;
  font-size: 0.95rem;
}

.nav-links a[aria-current="page"] {
  font-weight: 600;
  color: #fff;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  flex: 1 0 auto;
}

.hero {
  padding: 3rem 0 2rem;
}

.hero.small {
  padding-top: 2rem;
}

.hero h1 {
  margin: 0 0 0.75rem;
  font-size: 2.25rem;
}

.hero p {
  margin: 0 0 1.5rem;
  font-size: 1.05rem;
  color: #4b5563;
}

.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: #04BEA6;
  color: #f9fafb;
  font-weight: 500;
}

.button:hover {
  background: #04BEA6;
  text-decoration: none;
}

.features {
  margin-top: 1.5rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.feature {
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.content {
  background: #ffffff;
  padding: 1.5rem 1.75rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.content h2 {
  margin-top: 1.5rem;
}

/* Visual separation for topical sections inside .content */
.content h2 {
  margin: 1.25rem 0 0.5rem;
  padding: 0.6rem 0.85rem;
  background-color: #ffffff; /* product section header background */
  border-left: 4px solid #04BEA6;
  border-radius: 0.5rem;
  font-size: 1.15rem;
}

.content p,
.content ul,
.content ol {
  margin: 0.6rem 0 0.8rem;
  padding: 0.65rem 0.9rem;
  background: #ffffff;
  border-radius: 0.45rem;
  box-shadow: 0 1px 2px rgba(15,23,42,0.03);
}

.content ul,
.content ol {
  padding-left: 2.5rem;
}

/* Reduce visual clutter for the first heading/content */
.content h2:first-of-type { margin-top: 0.5rem; }

.content li + li {
  margin-top: 0.25rem;
}

.policy p {
  margin-top: 0.75rem;
}

.footer {
  padding: 1.25rem 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: #6b7280;
  background: #fff;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    margin-top: 0.5rem;
  }

  .nav-links a {
    margin-left: 0;
    margin-right: 1rem;
  }

  .hero h1 {
    font-size: 1.8rem;
  }
}

/* Slideshow styles */
.screenshots {
  margin: 1.5rem 0;
}

/* Reduce space when screenshots immediately follow the hero section */
.hero + .screenshots {
  margin-top: 0.5rem;
}
.slideshow {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  background: #fff;
  padding: 0.75rem;
  box-shadow: 0 2px 6px rgba(15,23,42,0.06);
}
.slideshow .slides {
  position: relative;
  /* Fix the slideshow height so slides don't push content down
     as they change. This keeps a stable frame for all slides. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.slideshow .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 400ms ease;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.slideshow .slide.active {
  opacity: 1;
}
.slideshow img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  display: block;
  object-fit: contain;
}
.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15,23,42,0.06);
  border: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.slide-btn.prev { left: 0.6rem; }
.slide-btn.next { right: 0.6rem; }
.slide-btn:focus { outline: 2px solid #04BEA6; }
.dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.6rem;
}
.dots button {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  border: none;
  background: #cbd5e1;
  cursor: pointer;
}
.dots button.active { background: #04BEA6; }

@media (max-width: 640px) {
  .slideshow { padding: 0.5rem; }
  .slide-btn { width: 1.9rem; height: 1.9rem; }
}

/* Allow the screenshots section to span the full viewport on wide screens
   while keeping the slideshow itself constrained and centered. This lets
   the carousel use more horizontal real estate than the page container. */
@media (min-width: 1000px) {
  .screenshots {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    padding: 1.5rem 2rem;
    box-sizing: border-box;
    background: transparent;
  }

  .slideshow {
    max-width: 1100px;
    margin: 0 auto;
  }
}

/* Inline icon utility */
.inline-icon {
  height: 36px;
  width: auto;
  display: inline-block;
}

/* About page header image */
.about-hero-image {
  width: 56px;
  height: auto;
  display: inline-block;
  border-radius: 6px;
  object-fit: cover;
}

@media (min-width: 900px) {
  .about-hero-image { width: 120px; }
}