/* Layout & typography */
:root{--ink:#0f172a;--muted:#475569;--accent:#f39200;--light:#f8fafc}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:#fff}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.grid-2{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.narrow{max-width:640px;margin:0 auto}
h1{font-size:42px;line-height:1.1;margin:0 0 12px}
h2{margin:0 0 14px}
.subhead{font-size:18px;color:var(--muted);margin:0 0 20px}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;border:none;padding:12px 18px;border-radius:12px;font-weight:700;cursor:pointer}
.btn-lg{padding:14px 20px;font-size:16px}
.fineprint{font-size:12px;color:#6b7280;margin-top:10px}
.section{padding:56px 0;border-top:1px solid #f1f5f9}
.section.light{background:var(--light)}
.card{padding:20px;border:1px solid #e5e7eb;border-radius:14px;background:#fff}
.feature{padding:8px}

/* Header */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eef2f7;z-index:10}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:16px 20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700}
.brand-mark{font-size:18px;color:var(--accent)}
.nav a{margin-left:18px;text-decoration:none;color:var(--ink);font-weight:600}
.nav .btn-sm{padding:8px 14px;border-radius:10px;border:1px solid #e5e7eb}

/* Images */
.device-shot{width:100%;height:auto;border-radius:18px;box-shadow:0 16px 44px rgba(2,6,23,.12)}
.hero-fig{margin:0}
.supp-fig{margin:28px 0 0}

/* Size tuning for supporting visuals */
.device-medium .device-shot{max-width:560px;margin:0 auto;display:block}
@media (min-width:981px){
  .section .hero-grid{grid-template-columns:1.2fr 0.8fr}
}

.caption{margin-top:10px;font-size:14px;color:#64748b;text-align:center}
.ticks{margin:14px 0 0;padding-left:0;list-style:none}
.ticks li{position:relative;padding-left:26px;margin:8px 0}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:#16a34a;font-weight:700}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

/* Responsive */
@media (max-width: 980px){
  .grid-2{grid-template-columns:1fr;gap:24px}
  h1{font-size:34px}
  .grid-3{grid-template-columns:1fr}
}

/* ======================
   Mobile-first enhancements
   ====================== */
@media (max-width: 768px){
  .container{padding:0 16px}
  .section{padding:36px 0}
  .grid-2{grid-template-columns:1fr;gap:16px}
  .grid-3{grid-template-columns:1fr;gap:16px}
  .site-header .container{flex-wrap:wrap;gap:10px;padding:12px 16px}
  .brand{font-size:18px}
  .nav a{margin-left:12px}
  h1{font-size:28px;line-height:1.15}
  h2{font-size:22px}
  .subhead{font-size:16px}
  .btn,.btn-lg{width:100%;text-align:center}
  .hero-copy{text-align:center}
  .device-medium .device-shot{max-width:100%}
  .caption{font-size:13px}
}
/* Very small phones */
@media (max-width: 390px){
  h1{font-size:26px}
  .nav a{margin-left:10px;font-size:14px}
}

/* Alignment fix for tick lists so checkmarks line up */
.section .hero-copy { text-align:left; }
.ticks li { text-align:left; }

/* v8 alignment: hero (top) stays centered on mobile; other sections left-aligned */
@media (max-width: 768px){
  .hero-top .hero-copy{ text-align:center; }
}

.eyebrow {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}