:root{
  /* Dark navy palette to match the app */
  --bg:#0f1f3a;              /* main background */
  --surface:#182a4a;         /* cards/panels */
  --text:#e5eefc;            /* primary text */
  --muted:#9bb0d3;           /* secondary text */
  --border:rgba(255,255,255,.08); /* subtle borders */
  --accent:#0A84FF;          /* iOS system blue */
  --accent-contrast:#ffffff; /* text on accent */
  --email:#FF9F0A;           /* brand orange for email links */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:880px;margin:0 auto;padding:0 20px}
.site-header{border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:10}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;color:var(--text);letter-spacing:.2px}
.brand-icon{width:24px;height:24px;border-radius:6px;display:inline-block}
/* Header brand hover picks up orange */
.brand:hover{color:var(--email)}
.nav a{margin-left:14px;text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--email)}
.site-footer{border-top:1px solid var(--border);margin-top:48px;background:var(--bg)}
.site-footer .wrap{padding:20px;font-size:.95rem;color:var(--muted)}
/* Footer links use brand orange */
.site-footer a{color:var(--email)}
.hero{padding:32px 0 20px 0}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.hero-head{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:end;margin-bottom:16px}
.hero-cta{justify-self:end;text-align:right}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-head{grid-template-columns:1fr;gap:12px}
  .hero-cta{justify-self:start;text-align:left}
  .feature-section{
    grid-template-columns:1fr;
    gap:24px;
    margin:32px 0;
  }
  .feature-screenshot img{
    height:500px;
    object-position:center 32%;
  }
}

/* Additional mobile optimizations for very small screens */
@media (max-width:480px){
  .wrap{padding:0 16px}
  .site-header .wrap{padding:12px 16px;gap:8px}
  .nav a{padding:6px 10px;font-size:0.85rem}
  .hero{padding:32px 0 24px 0}
  h1{font-size:1.8rem}
  .tagline{font-size:1rem}
  .button{padding:12px 16px;font-size:1rem}
  .feature-section{margin:24px 0;padding:16px 0 20px 0}
  .feature-content h2{font-size:1.3rem;margin:0 0 16px 0}
  .feature-list li{font-size:0.9rem;margin:0 0 10px 0}
  .feature-screenshot img{height:280px;border-radius:12px}
  .notice{padding:12px;font-size:0.85rem}
}
h1{font-size:2.2rem;margin:.2rem 0 0}
h2{font-size:1.4rem;margin:2rem 0 1rem}
.tagline{font-size:1.125rem;color:var(--muted);margin:.5rem 0 1rem}
.button{display:inline-block;padding:10px 14px;border-radius:10px;background:var(--accent);color:var(--accent-contrast);text-decoration:none;font-weight:600;border:1px solid rgba(255,255,255,.06)}
.button:hover{filter:brightness(0.98)}
.muted{color:var(--muted)}
.screenshot img{width:100%;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.02)}
/* Feature sections with side-by-side layout */
.feature-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:start;
  margin:32px 0;
  padding:24px 0;
  border-bottom:1px solid var(--border);
  position:relative;
}

/* Add subtle breakline between sections on desktop */
.feature-section:not(:last-child)::after{
  content:'';
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:80px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0.6;
}

/* Remove border from last section */
.feature-section:last-child{
  border-bottom:none;
}

.feature-content h2{
  margin-top:0;
}

.feature-screenshot img{
  width:100%;
  height:600px;
  object-fit:cover;
  object-position:center 32%;
  display:block;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.02);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.features{padding:8px 0 36px}

/* Add subtle breakline after main features heading on desktop */
.features > h2:first-of-type{
  position:relative;
  margin-bottom:32px;
}

.features > h2:first-of-type::after{
  content:'';
  position:absolute;
  bottom:-16px;
  left:50%;
  transform:translateX(-50%);
  width:100px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0.4;
}
.feature-list{list-style:disc;padding-left:20px}
/* Screenshot alongside copy */
.feature-block{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center;margin:24px 0}
.feature-text{min-width:0}
.screenshot-frame{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.02);box-shadow:0 8px 24px rgba(0,0,0,.3);aspect-ratio:4/3}
.screenshot-img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 45%}
details{border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--surface);margin:10px 0}
summary{cursor:pointer;font-weight:600}
.notice{padding:12px;border:1px dashed var(--border);border-radius:12px;background:var(--surface);margin-top:16px}
a{color:var(--accent)}
/* Style mailto links with brand orange */
a[href^="mailto:"]{color:var(--email)}

/* Enhanced mobile layout for better readability and spacing */
@media (max-width:600px){
  html,body{font-size:16px;line-height:1.7}
  .wrap{padding:0 20px;max-width:100%}
  
  /* Improved header spacing */
  .site-header .wrap{padding:16px 20px;flex-direction:column;align-items:flex-start;gap:12px}
  .nav{display:flex;flex-wrap:wrap;margin-top:4px;gap:8px}
  .nav a{margin:0;padding:8px 12px;background:var(--surface);border-radius:8px;font-size:0.9rem}
  .nav a:hover{background:var(--accent);color:var(--accent-contrast)}
  
  /* Enhanced hero section */
  .hero{padding:40px 0 32px 0}
  h1{font-size:2rem;margin:0 0 8px 0;line-height:1.2}
  .tagline{font-size:1.1rem;margin:0 0 24px 0;line-height:1.4}
  .hero-cta p{margin:0 0 16px 0}
  .button{display:block;width:100%;text-align:center;padding:14px 20px;font-size:1.1rem;border-radius:12px}
  
  /* Improved feature sections with better spacing */
  .features{padding:20px 0 40px}
  .feature-section{
    grid-template-columns:1fr;
    gap:24px;
    margin:32px 0;
    padding:20px 0 24px 0; /* Tighter padding for more compact mobile layout */
    border-bottom:1px solid var(--border);
    position:relative;
  }
  
  /* Add subtle breakline between sections */
  .feature-section:not(:last-child)::after{
    content:'';
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:60px;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity:0.6;
  }
  
  /* Remove border from last section */
  .feature-section:last-child{
    border-bottom:none;
  }
  
  /* Better feature content spacing */
  .feature-content h2{
    font-size:1.5rem;
    margin:0 0 20px 0;
    line-height:1.3;
  }
  
  .feature-list{
    padding-left:24px;
    margin:0 0 24px 0;
  }
  
  /* Add subtle breakline after main features list */
  .features > h2:first-of-type{
    position:relative;
    margin-bottom:32px;
  }
  
  .features > h2:first-of-type::after{
    content:'';
    position:absolute;
    bottom:-16px;
    left:50%;
    transform:translateX(-50%);
    width:80px;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity:0.4;
  }
  
  .feature-list li{
    margin:0 0 12px 0;
    line-height:1.6;
    font-size:0.95rem;
  }
  
  /* Enhanced screenshot display for mobile */
  .feature-screenshot{
    order:1; /* Show screenshots after content on mobile */
    margin:8px 0 8px 0; /* Tighter balanced spacing above and below screenshot */
  }
  
  .feature-screenshot img{
    width:100%;
    height:320px; /* Increased height for better mobile viewing */
    object-fit:cover;
    object-position:center 25%; /* Better crop for mobile viewing */
    border-radius:16px;
    box-shadow:0 8px 24px rgba(0,0,0,.2);
  }
  
  /* Improved feature blocks */
  .feature-block{grid-template-columns:1fr;gap:24px;margin:32px 0}
  .screenshot-frame{aspect-ratio:16/10;border-radius:16px}
  .screenshot-img{height:100%;object-fit:cover;object-position:center 30%}
  
  /* Better notice styling */
  .notice{
    padding:16px;
    margin:24px 0;
    font-size:0.9rem;
    line-height:1.5;
  }
  
  /* Enhanced footer */
  .site-footer .wrap{padding:24px 20px;text-align:center}
  .site-footer p{margin:0;line-height:1.6}
}