:root {
  --orange: #FF7A45;
  --ember: #D1361F;
  --charcoal: #1A1A1A;
  --paper: #FAFAF7;
  --ink: #0F1419;
  --subtle: #8E8E93;
  --maxw: 760px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}

a { color: var(--ember); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Compact hero: icon + text side by side, sized to its content */
header.hero {
  background: linear-gradient(135deg, var(--orange), var(--ember));
  color: #fff;
}
.hero-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 24px;
}
header.hero img.icon {
  width: 72px; height: 72px; border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
  flex: 0 0 auto;
}
.hero-text h1 { font-size: 30px; margin: 0 0 2px; font-weight: 800; letter-spacing: -0.02em; }
.hero-text p.tag { font-size: 16px; margin: 0 0 12px; opacity: 0.95; }

/* Official App Store badge — white variant reads well on the orange gradient */
.app-store-badge { display: inline-block; line-height: 0; transition: opacity .15s; }
.app-store-badge:hover { opacity: 0.88; text-decoration: none; }
.app-store-badge img { height: 46px; width: auto; display: block; }
.app-store-badge .badge-light { display: none; }
.app-store-badge .badge-dark { display: block; }

main { padding: 20px 0 48px; }
.lede { font-size: 18px; margin: 16px 0 0; }
h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin-top: 44px; }
h3 { font-size: 18px; font-weight: 600; margin-top: 24px; }

/* Device-framed media — an iPhone bezel shared by the preview video and the
   screenshots, so both read as a real device. The .screen fixes the 886/1920
   aspect; media fills it via object-fit. */
.device {
  background: #1A1A1A; border-radius: 34px; padding: 9px;
  box-shadow: 0 22px 50px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.device .screen {
  aspect-ratio: 886 / 1920; border-radius: 26px; overflow: hidden;
  background: var(--paper); display: block;
}
.device .screen img,
.device .screen video {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  display: block; border-radius: inherit;
}

/* Preview video — one framed phone, centered */
.demo { margin: 30px 0 6px; display: flex; justify-content: center; }
.hero-device { width: 240px; max-width: 72vw; }

/* Screenshot gallery — row on desktop, swipe on mobile */
.shots {
  display: flex;
  gap: 18px;
  margin: 22px 0 0;
  padding-bottom: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  justify-content: center;
}
.shots .device {
  width: 200px; flex: 0 0 auto;
  scroll-snap-align: center;
}

.features { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.feature { background: #fff; border: 1px solid #ECEAE4; border-radius: 16px; padding: 22px; }
.feature h3 { margin-top: 0; }
.feature p { margin: 6px 0 0; color: #3a3f45; }

.muted { color: var(--subtle); font-size: 14px; }

article.legal { padding: 40px 0; }
article.legal h1 { font-size: 30px; letter-spacing: -0.02em; }
article.legal h2 { font-size: 20px; }
article.legal p, article.legal li { color: #2a2f35; }

footer {
  border-top: 1px solid #ECEAE4;
  padding: 32px 0;
  text-align: center;
  color: var(--subtle);
  font-size: 14px;
}
footer a { color: var(--subtle); }

@media (max-width: 640px) {
  .features { grid-template-columns: 1fr; }
  /* Stack the hero so the title sits under the icon, centered */
  .hero-inner { flex-direction: column; text-align: center; gap: 12px; padding: 28px 24px 30px; }
  .hero-text h1 { font-size: 28px; }
  .hero-text p.tag { font-size: 15px; }
  header.hero img.icon { width: 72px; height: 72px; }
  .app-store-badge { margin: 0 auto; }
  .shots { justify-content: flex-start; }
}

@media (prefers-color-scheme: dark) {
  body { background: var(--charcoal); color: #EDEDED; }
  .feature { background: #232323; border-color: #333; }
  .feature p, article.legal p, article.legal li { color: #CFCFCF; }
  footer { border-color: #333; }
}