:root {
  --bg: #08090a;
  --raised: #121315;
  --line: #1f2124;
  --ink: #f2f3f4;
  --muted: #8b9096;
  --accent: #66b78e;
  --accent-dim: #2c4a3b;
  --measure: 62ch;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.glow {
  position: fixed;
  inset: -30vh 0 auto 0;
  height: 70vh;
  background: radial-gradient(60% 55% at 50% 0%, rgba(102, 183, 142, 0.14), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--ink);
}

.brand .mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(160deg, #1c8f5d, #0d5433);
  display: grid;
  place-items: center;
  font-family: "SF Arabic", "Geeza Pro", "Al Bayan", "Noto Naskh Arabic", serif;
  font-size: 22px;
  line-height: 1;
  padding-bottom: 4px;
  color: #eafff3;
}

nav a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 22px;
  font-size: 15px;
  transition: color 0.15s ease;
}

nav a:hover { color: var(--ink); }

.hero {
  padding: 96px 0 24px;
  max-width: 720px;
}

h1 {
  font-size: clamp(40px, 7vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 640;
  margin: 0 0 20px;
}

h1 .soft { color: var(--muted); }

.lede {
  font-size: clamp(18px, 2.3vw, 21px);
  color: var(--muted);
  margin: 0 0 34px;
  max-width: 56ch;
}

/* Apple requires their own artwork, unmodified, with clear space of at
   least one quarter the badge height on every side. 52px sits above the
   40px onscreen minimum. Do not recolour, crop, or add a shadow. */
.badge {
  display: inline-block;
  margin: 13px 13px 13px 0;
  text-decoration: none;
}

.badge img {
  height: 52px;
  width: auto;
  display: block;
}

.badge:hover { opacity: 0.9; }

.note {
  color: var(--muted);
  font-size: 14px;
  margin-top: 14px;
}

.shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin: 96px 0 0;
}

/* Screenshots are lifted with shadow and a faint accent halo rather than a
   border. A hairline outline on a near-black page reads as a box; diffuse
   shadow reads as depth. */
.shot {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.6),
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 90px rgba(102, 183, 142, 0.07);
}

.wide {
  margin: 150px 0;
}

.wide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.6),
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 120px rgba(102, 183, 142, 0.08);
}

.wide figcaption {
  margin-top: 20px;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

/* Sections alternate text and image down the page and are separated by space,
   not by rules. */
section.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  padding: 0;
  margin: 150px 0;
  border: 0;
}

section.feature .copy { max-width: 46ch; }

section.feature.flip .copy { order: 2; }

section.feature h2 {
  margin: 0 0 18px;
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--ink);
  text-transform: none;
}

section.feature p {
  margin: 0;
  color: #b9bec3;
  font-size: 17px;
}

section.feature p + p { margin-top: 16px; }

section.feature img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.6),
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 90px rgba(102, 183, 142, 0.07);
}

section.feature .pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.closer {
  margin: 150px 0 0;
  max-width: 54ch;
}

.closer h2 {
  font-size: clamp(26px, 3vw, 32px);
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0 0 16px;
}

.closer p { color: #b9bec3; margin: 0; }

footer.site {
  border-top: 1px solid var(--line);
  margin-top: 140px;
  padding: 34px 0 80px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
}

footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--ink); }
footer.site .spacer { flex: 1; }

/* document pages */
.doc { padding: 26px 0 90px; max-width: var(--measure); }
.doc h1 { font-size: clamp(32px, 5vw, 44px); margin-bottom: 10px; }
.doc .updated { color: var(--muted); font-size: 14px; margin: 0 0 40px; }
.doc h2 {
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 38px 0 12px;
}
.doc h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 28px 0 8px;
}
.doc p, .doc li { color: #c9cdd1; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 8px; }
.doc a { color: var(--accent); }
.doc strong { color: var(--ink); font-weight: 600; }

.callout {
  border: 1px solid var(--line);
  background: var(--raised);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 26px 0;
}
.callout p { margin: 0; }

@media (max-width: 860px) {
  .shots { grid-template-columns: 1fr; max-width: 380px; margin: 64px auto 0; gap: 40px; }
  section.feature {
    grid-template-columns: 1fr;
    gap: 32px;
    margin: 96px 0;
  }
  section.feature.flip .copy { order: 0; }
  section.feature .media { max-width: 380px; }
  .wide { margin: 96px 0; }
  .closer { margin-top: 96px; }
  nav a { margin-left: 16px; }
}