/* Mobile-first landing page styles */
:root{
  --bg:#f4f1e9;          /* light eggshell */
  --footer:#e9e3d7;      /* subtle contrast for footer */
  --card:rgba(0,0,0,0.04);
  --accent:#6ee7b7;
  --link: rgb(30, 110, 244);
  --muted:#5f6b7a;
  --text:#0f1724;
  --ghost-border:rgba(0,0,0,0.12);
  --device-top:#e3dfd4;
  --device-bottom:#d7d1c2;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#141414;        /* dark charcoal */
    --footer:#000000;
    --card:rgba(255,255,255,0.04);
    --muted:#9aa4b2;
    --text:#ffffff;
    --ghost-border:rgba(255,255,255,0.12);
    --device-top:#072032;
    --device-bottom:#09283a;
    --link: rgb(0, 136, 255);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.container{padding:0 1rem;max-width:980px;margin:0 auto}
.site-header{padding:0.75rem 0}
.header-inner{display:flex;align-items:center}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit}
.logo{width:40px;height:40px}
.brand-name{font-weight:700}

.hero{padding:2.5rem 0;text-align:center}
.hero-title{font-size:1.5rem;margin:.25rem 0 0.5rem}
.hero-sub{color:var(--muted);margin:0 0 1.25rem}
.cta-row{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.5rem}
.btn{display:inline-block;padding:.65rem 1rem;border-radius:10px;text-decoration:none;font-weight:600}
.btn.primary{background:var(--accent);color:#042018}
.btn.ghost{background:transparent;border:1px solid var(--ghost-border);color:var(--text)}

.store-badges{display:flex;justify-content:center;margin-bottom:1.5rem}
.store-badge{display:inline-flex;align-items:center}
.store-badge img{height:50px;display:block}
.coming-soon{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin:0 auto 1.5rem;
  padding:.65rem 1rem;
  border-radius:12px;
  border:1px solid var(--ghost-border);
  background:var(--card);
  font-weight:700;
}
.coming-soon::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(110,231,183,0.2);
}

.screenshot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;justify-items:center;margin-top:1.25rem}
.phone-mock{
  width:100%;
  max-width:220px;
  /* keep grid items consistent size but remove any device styling */
  display:block;
}
/* display images in their natural aspect ratio and without rounded corners */
.phone-mock img{width:100%;height:auto;display:block;border-radius:0;object-fit:contain}

.features{padding:2rem 0}
.feature-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}
.feature{background:var(--card);padding:1rem;border-radius:10px}
.feature h3{margin:0 0 .5rem}
.site-footer{padding:1.25rem 0;color:var(--muted);text-align:center;background:var(--footer)}

.api-callout{font-size:0.9rem;color:var(--muted);margin:0 0 0.5rem}
.api-callout a{color:var(--link);text-decoration:underline}
.footer-link{color:var(--link);text-decoration:underline}

/* Global link styles */
a, a:visited{color:var(--link);text-decoration:underline}
a:hover,a:focus{opacity:0.95}

/* Larger screens */
@media(min-width:720px){
  .hero-title{font-size:2rem}
  .feature-grid{grid-template-columns:repeat(3,1fr)}
  .screenshot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .phone-mock{max-width:260px}
}

@media(min-width:520px){
  .screenshot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:960px){
  .screenshot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@supports not (display:grid){
  .screenshot-grid{display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:center}
  .screenshot-grid .phone-mock{flex:1 1 160px;max-width:220px}
}