:root {
  --blue:#005FC3;
  --gray:#6E6E73;
  --text:#1C1C1E;
  --bg:#FAFAFA;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  color:var(--text);background:var(--bg);line-height:1.6;
}

p {padding: 0.25rem 0rem;}
.container{max-width:900px;margin:0 auto;padding:2rem 1rem;}
.nav{background:white;border-bottom:1px solid #eee;}
.nav .container{display:flex;justify-content:space-between;align-items:center;}
.nav a{margin-left:1rem;text-decoration:none;color:var(--gray);font-weight:500;}
.nav a.active,.nav a:hover{color:var(--blue);}
.logo{font-weight:700;font-size:1.25rem;}
.accent{color:var(--blue);}
.black{font-weight:600;}


.hero{text-align:center;padding:0rem 1rem;}
.hero h2{font-size:2.5rem;font-weight:600;margin-bottom:1rem;}
.hero .subtitle{color:var(--gray);margin-bottom:2rem;}
.hero-img {
  max-width: 100%;
  border-radius: 8px; /* optional, gives a softer look */
  box-shadow: none;   /* removes the drop shadow */
  margin-top: 2rem;
  transition: opacity 0.4s ease;
}

.hero-gallery {
  position: relative;
  max-width: 900px;
  margin: 2rem auto 0;
  border-radius: 8px;
  overflow: hidden;
}

.hero-gallery picture {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: auto;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.hero-gallery picture.active {
  opacity: 1;
  position: relative;
}

.hero-gallery img {
  display: block;
  width: 100%;
  border-radius: 8px;
  box-shadow: none;
}

.prose {
  max-width: 70ch;
  line-height: 1.6;
}
.lede {
  font-size: 1.1em;
  color: var(--text-muted);
}
.table-responsive {
  overflow-x: auto;
}


/* ---------- Feature Details Section ---------- */
#ai-features {
  margin-top: 4rem;
}

#ai-features h3 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

#ai-features h4 {
  margin-top: 2rem;
  font-size: 1.25rem;
}

#ai-features h5 {
  margin-top: 1.25rem;
  font-size: 1.1rem;
}

#ai-features ul {
  margin: 0.5rem 0 1.5rem 1.25rem;
}

#ai-features table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

#ai-features th,
#ai-features td {
  padding: 0.5rem;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

@media (prefers-color-scheme: dark) {
  #ai-features th,
  #ai-features td {
    border-bottom-color: #2a2a2d;
  }
}


.cta{display:inline-block;background:var(--blue);color:white;padding:0.75rem 1.5rem;border-radius:8px;text-decoration:none;font-weight:500;transition:background 0.3s;}
.cta:hover{background:linear-gradient(135deg,#4DA0FF,#2F68FF);}

/*.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0rem;text-align:center;padding:2.5rem 0;} */

/* Refined 3-column feature grid layout */
.grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;                /* increased space between columns */
  text-align: center;
  padding: 3rem 0;
}

.grid3 h3 {
  font-size: 1.1rem;       /* slightly smaller heading */
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.grid3 p {
  font-size: 0.85rem;       /* reduced paragraph size */
  color: var(--gray);
  line-height: 1.7;
  max-width: 32ch;
  margin: 0 auto;
}



.features h3{margin-bottom:0.5rem;}
.features p{color:var(--gray);}

.beta{text-align:center;padding:4rem 1rem;background:white;border-top:1px solid #eee;}
.beta input{padding:0.75rem;width:60%;max-width:300px;border:1px solid #ccc;border-radius:8px;margin-right:0.5rem;}
.beta button{background:var(--blue);color:white;border:none;border-radius:8px;padding:0.75rem 1.25rem;font-weight:500;cursor:pointer;}
.beta button:hover{background:linear-gradient(135deg,#4DA0FF,#2F68FF);}

.page{padding:0rem 1rem;}
.page h2{font-size:2rem;margin-bottom:1.5rem;}
.feature-list{list-style:none;}
.feature-list li{margin-bottom:1rem;}

.footer{padding:2rem 1rem;text-align:center;color:var(--gray);border-top:1px solid #eee;}

/* Default (light mode) */
blockquote {
  font-style: italic;
  font-weight: 400;
  color: var(--gray);
  border-left: 4px solid var(--blue);
  margin: 2rem auto;
  padding: 1rem 1.5rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.03);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

blockquote p {
  margin: 0;
  line-height: 1.6;
}

blockquote::before {
  content: "“";
  font-size: 2.5rem;
  line-height: 0;
  color: var(--blue);
  vertical-align: -0.4rem;
  margin-right: 0.25rem;
}

blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  color: var(--text);
  font-weight: 500;
  text-align: right;
}


li h3 { padding: 2rem 0 0 0;  /* top right bottom left */}



/* ---- Figure + Figcaption (figcap) ---- */


figure > img,
figure > picture,
figure > video,
figure > svg {
  display: block;
  width: 100%;
  height: auto;
  /* border-radius: 12px;         optional */
}

figcaption {
  margin-top: 0rem;           /* brings it closer to the image */
  margin-left: 1.25rem;          /* gentle indentation */
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-muted, #666);
  max-width: 90%;                /* keeps it aligned with image width */
}

/* subtle rule to separate caption from body if desired */
figcaption::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  margin: 0.25rem 0;             /* tighter spacing */
  background: currentColor;
  opacity: 0.2;
}

/* alignment helpers */
.figcap-center   { text-align: center; }
.figcap-left     { text-align: left; }
.figcap-right    { text-align: right; }

/* tone helpers */
.figcap-muted    { color: var(--text-muted, #666); }
.figcap-strong   { color: var(--text, #1a1a1a); }

/* size helpers */
.figcap-sm       { font-size: 0.85rem; }
.figcap-lg       { font-size: 1.05rem; }

/* dark mode adjustments (if you’re using prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  figcaption {
    color: var(--text-muted, #b3b3b3);
  }
  figcaption::before {
    opacity: 0.25;
  }
}

/* optional: tighter figure style inside your feature list */
.feature-list figure {
  margin-top: 0.75rem;
}



/* Detailed Features Layout */
.page .prose {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.page .prose h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

.page .prose h3 {
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text, #111);
}

.page .prose p,
.page .prose ul {
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.page .prose ul li {
  margin-bottom: 0.5rem;
}


.page .prose h3::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--accent, #007aff);
  margin: 0.5rem 0 1.5rem;
  opacity: 0.25;
}

/* Feature Tables */
.table-responsive {
  margin: 1.5rem 0 2.5rem;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border, #ddd);
}

.table-responsive table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--surface, #fafafa);
}

.table-responsive th {
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--surface-alt, #f1f1f1);
  font-weight: 600;
  border-bottom: 1px solid var(--border, #ccc);
}

.table-responsive td {
  padding: 0.65rem 1rem;
  vertical-align: top;
  border-bottom: 1px solid var(--border, #eee);
}

.table-responsive tr:last-child td {
  border-bottom: none;
}

@media (prefers-color-scheme: dark) {
  .table-responsive {
    border-color: #333;
  }
  .table-responsive table {
    background: #1c1c1e;
  }
  .table-responsive th {
    background: #2a2a2d;
    color: #eee;
  }
  .table-responsive td {
    border-bottom-color: #333;
    color: #ddd;
  }
}



/* Restore indentation for bulleted lists */
.page .prose ul {
  padding-left: 1.5rem;   /* adds left indentation for all ul lists */
  margin-bottom: 1.25rem;
}

.page .prose ul li {
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;  /* gives text some spacing after the bullet */
}

/* Nested list indentation */
.page .prose ul ul {
  padding-left: 1.75rem;  /* adds more indent for nested bullets */
  margin-top: 0.25rem;
}


/* Responsive image scaling for smaller devices */
@media (max-width: 600px) {
  figure > img,
  figure > picture img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }

  /* Optional: tighter vertical rhythm on mobile */
  figcaption {
    font-size: 0.85rem;
    margin-left: 0.75rem;
    margin-top: 0.25rem;
  }

  /* Optional: reduce padding in containers for narrow screens */
  .container {
    padding: 1rem;
  }
}


/* 🌙 Dark Mode Variant */
@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #e6e6e6;
  }

  .nav, .footer, .beta {
    background: #1c1c1e;
    border-color: #2a2a2d;
  }

  a, .accent {
    color: #82aaff;
  }

  blockquote {
    background: #1c1c1e;
    color: #ccc;
    border-left-color: #4da0ff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  }

  blockquote::before {
    color: #4da0ff;
    opacity: 0.8;
  }

  blockquote cite {
    color: #fff;
  }
  
  /* General Layout */
  .container {
    color: #e6e6e6;
  }

  /* Navigation */
  .nav {
    background: #1c1c1e;
    border-bottom-color: #2a2a2d;
  }
  .nav a {
    color: #aaa;
  }
  .nav a.active, .nav a:hover {
    color: #82aaff;
  }
  .logo {
    color: #fff;
  }

  /* Hero Section */
  .hero {
    background: #111;
  }
  .hero h2 {
    color: #fff;
  }
  .hero .subtitle {
    color: #999;
  }

  .hero-img {
    box-shadow: none; /* also ensure no shadow in dark mode */
  }
  
  .hero-gallery img {
    box-shadow: none;
  }

  /* Buttons and Links */
  .cta, .beta button {
    background: #4da0ff;
    color: #fff;
  }
  .cta:hover, .beta button:hover {
    background: linear-gradient(135deg, #6ebaff, #4da0ff);
  }

  a {
    color: #82aaff;
  }

  /* Features Section */
  .features {
    background: #111;
  }
  .features h3 {
    color: #fff;
  }
  .features p {
    color: #bbb;
  }

  /* Beta Signup */
  .beta {
    background: #1c1c1e;
    border-top-color: #2a2a2d;
  }
  .beta input {
    background: #2a2a2d;
    color: #e6e6e6;
    border-color: #3a3a3d;
  }
  .beta input::placeholder {
    color: #888;
  }

  /* Page Sections */
  .page {
    background: #111;
  }
  .page h2 {
    color: #fff;
  }
  .feature-list li {
    color: #ccc;
  }

  /* Footer */
  .footer {
    background: #1c1c1e;
    color: #aaa;
    border-top-color: #2a2a2d;
  }

  /* Accents and Highlights */
  .accent {
    color: #82aaff;
  }

  /* Optional: Smooth Transition Between Modes */
  body, .nav, .footer, .hero, .beta, .features, .page, blockquote {
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
  }
  
  
}