/* DayWindow — the same colours as the app, taken from DayWindow/Core/Theme.swift.
   The site and the app must never look like two different products.

   ⛔ The first version of this page was invented from a blank sheet: no product in it, just
   coloured boxes with paragraphs in them. Wasim called it slop and he was right. Rebuilt after
   studying flighty.com, bear.app and cardpointers.com, which all do the same three things —
   very few words, one enormous honest headline, and the REAL app shown large as the hero. */

:root {
  --bg: #ffffff;
  --bg-soft: #f6f8fb;
  --card: #ffffff;
  --well: #edf1f7;
  --ink: #0f172a;
  --dim: #667486;
  --line: #e4e8ef;
  --accent: #2563eb;
  --on-accent: #ffffff;
  --gain: #0e8a5f;
  --radius: 20px;
  --maxw: 1080px;
  --shadow: 0 30px 70px -30px rgba(15, 23, 42, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0d11;
    --bg-soft: #10141a;
    --card: #161a20;
    --well: #20262e;
    --ink: #f4f7fa;
    --dim: #8a94a3;
    --line: #262d36;
    --accent: #4b85ff;
    --gain: #3dd598;
    --shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

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

a { color: var(--accent); }

/* ---------- header ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.4px;
  color: var(--ink);
  text-decoration: none;
}

.brand .mark {
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: var(--accent);
  position: relative;
  flex: none;
}

.brand .mark::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 2px;
  background: var(--on-accent);
}

.nav-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.link {
  color: var(--dim);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

.link:hover { color: var(--ink); }

/* ---------- hero ---------- */

.hero {
  text-align: center;
  padding: 92px 0 0;
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}

h1 {
  font-size: clamp(38px, 7vw, 68px);
  line-height: 1.03;
  letter-spacing: -2.4px;
  font-weight: 800;
  margin: 0 auto 20px;
  max-width: 15ch;
}

.lede {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--dim);
  max-width: 46ch;
  margin: 0 auto 12px;
}

/* ---------- the phone ---------- */

.phone {
  width: 100%;
  max-width: 330px;
  margin: 0 auto;
  border-radius: 46px;
  padding: 9px;
  background: linear-gradient(160deg, #3a4150, #10141a 45%, #2b313d);
  box-shadow: var(--shadow);
}

.phone img { border-radius: 38px; }

.phone.sm { max-width: 290px; }

.hero-phone { padding-top: 46px; padding-bottom: 8px; }

/* ---------- alternating feature rows ---------- */

section { padding: 88px 0; }

section.soft { background: var(--bg-soft); }

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.row + .row { margin-top: 96px; }

.row.flip .copy { order: 2; }

@media (max-width: 820px) {
  .row { grid-template-columns: 1fr; gap: 34px; }
  .row.flip .copy { order: 0; }
  section { padding: 64px 0; }
}

h2 {
  font-size: clamp(27px, 3.6vw, 40px);
  letter-spacing: -1.3px;
  line-height: 1.1;
  font-weight: 780;
  margin: 0 0 14px;
}

.copy p {
  color: var(--dim);
  font-size: 17px;
  margin: 0 0 14px;
  max-width: 44ch;
}

.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.kicker.free { color: var(--gain); }

.section-head { text-align: center; margin-bottom: 52px; }

.section-head h2 { margin-inline: auto; max-width: 18ch; }

.section-head p { color: var(--dim); max-width: 52ch; margin: 0 auto; }

/* ---------- small print list ---------- */

.facts { list-style: none; padding: 0; margin: 22px 0 0; }

.facts li {
  display: flex;
  gap: 11px;
  align-items: baseline;
  color: var(--dim);
  margin-bottom: 9px;
  font-size: 16px;
}

.facts li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  flex: none;
  transform: translateY(-1px);
}

/* ---------- pricing ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  max-width: 620px;
  margin: 0 auto;
}

.plan {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 26px;
  text-align: center;
}

.plan.best { border-color: var(--accent); border-width: 2px; }

.plan .cap {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--dim);
}

.price {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -1.6px;
  font-variant-numeric: tabular-nums;
  margin: 8px 0 2px;
}

.per { font-size: 15px; color: var(--dim); }

.small {
  margin: 26px auto 0;
  max-width: 58ch;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--dim);
  text-align: center;
}

/* ---------- documents ---------- */

.doc { padding: 64px 0 84px; max-width: 720px; }

.doc h1 { font-size: clamp(30px, 5vw, 44px); text-align: left; max-width: none; margin-bottom: 8px; }

.doc h2 { font-size: 20px; margin: 36px 0 8px; letter-spacing: -0.4px; }

.doc p, .doc li { color: var(--ink); font-size: 16.5px; }

.doc ul { padding-left: 20px; }

.doc li { margin-bottom: 7px; }

.meta { color: var(--dim); font-size: 14px; margin-top: 0; }

.callout {
  border: 1px solid var(--line);
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 24px 0;
}

.callout p { margin: 0; }

/* ---------- footer ---------- */

.site-foot {
  border-top: 1px solid var(--line);
  padding: 38px 0 54px;
  color: var(--dim);
  font-size: 14px;
}

.foot-links { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }

.foot-links a { color: var(--dim); text-decoration: none; }

.foot-links a:hover { color: var(--ink); }

.disclaimer { max-width: 68ch; }