/* Outer Meadow — one stylesheet for the whole site.
   No build step, no framework, no dependencies: the site is four HTML
   files and this. That keeps hosting free and keeps the whole thing
   editable by hand a year from now. */

:root {
  --green-900: #06371f;
  --green-700: #0d6b3c;
  --green-600: #12874c;
  --green-500: #22a35f;
  --green-300: #6fd39b;
  --green-50:  #eef8f2;

  --ink:       #10251b;
  --ink-soft:  #4d6459;
  --ink-faint: #7d9188;

  --bg:        #ffffff;
  --bg-tint:   #f6faf7;
  --line:      #e2ece6;

  --radius: 18px;
  --radius-lg: 28px;
  --wrap: 1080px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
          Inter, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:       #eaf4ee;
    --ink-soft:  #a8c0b4;
    --ink-faint: #7c968a;
    --bg:        #0a1611;
    --bg-tint:   #0f1f18;
    --line:      #1e332a;
    --green-50:  #10261b;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

header.site {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 66px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.02rem;
}

.brand .mark {
  width: 26px;
  height: 26px;
  flex: none;
}

nav.site a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.94rem;
  margin-left: 26px;
  font-weight: 500;
}

nav.site a:hover,
nav.site a[aria-current="page"] { color: var(--green-600); }

/* Below ~560px the four nav links plus the wordmark stop fitting on one
   line. Rather than hiding links or shrinking them into illegibility, the
   header becomes two centred rows and grows to suit. */
@media (max-width: 560px) {
  header.site .wrap {
    height: auto;
    flex-direction: column;
    gap: 6px;
    padding-block: 12px;
  }
  nav.site { display: flex; gap: 18px; }
  nav.site a { margin-left: 0; font-size: 0.9rem; }
}

/* ---------- type ---------- */

h1, h2, h3 {
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 0.4em;
  font-weight: 700;
}

h1 { font-size: clamp(2.4rem, 6vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.12rem; font-weight: 640; }

p { margin: 0 0 1.1em; }

a { color: var(--green-600); }

.lede {
  font-size: clamp(1.06rem, 2.1vw, 1.32rem);
  color: var(--ink-soft);
  max-width: 46ch;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--green-600);
  margin-bottom: 14px;
}

/* ---------- sections ---------- */

section { padding: 84px 0; }
section.tint { background: var(--bg-tint); border-block: 1px solid var(--line); }

.hero { padding: 96px 0 84px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  section { padding: 60px 0; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 620;
  font-size: 0.97rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--green-500), var(--green-700));
  color: #fff;
  box-shadow: 0 8px 22px -10px var(--green-600);
}

.btn-ghost {
  border-color: var(--line);
  color: var(--ink);
  background: var(--bg);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------- cards ---------- */

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
}

/* Four items auto-fit to 3+1, which reads as one card left over rather than
   as a set. Pin them to a real row once there's room. */
@media (min-width: 900px) {
  .grid.four { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}

.card h3 { margin-bottom: 6px; }
.card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

.card .ico {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--green-50);
  color: var(--green-600);
  margin-bottom: 14px;
}

.card .ico svg { width: 19px; height: 19px; }

/* app card on the landing page */

.app-card {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 22px;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.app-card:hover { border-color: var(--green-300); transform: translateY(-2px); }
.app-card h3 { font-size: 1.35rem; margin-bottom: 3px; }
.app-card p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; }
.app-card .chev { color: var(--ink-faint); }

@media (max-width: 620px) {
  .app-card { grid-template-columns: 64px 1fr; }
  .app-card .chev { display: none; }
}

/* ---------- phone mock ---------- */

.phone {
  width: 260px;
  aspect-ratio: 9 / 19.5;
  margin: 0 auto;
  border-radius: 40px;
  background: linear-gradient(160deg, var(--green-600), var(--green-900));
  /* Literal, not derived from --ink: a phone bezel is a physical object and
     should stay dark in dark mode rather than inverting to white with the
     text colour. */
  border: 8px solid #16211c;
  box-shadow: 0 40px 70px -34px rgba(6, 55, 31, 0.6);
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.phone .route {
  position: absolute;
  inset: 0;
  opacity: 0.45;
}

.phone .readout { position: relative; }
.phone .readout .big {
  font-size: 3rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1;
}
.phone .readout .unit { font-size: 0.9rem; opacity: 0.75; margin-top: 4px; }
.phone .readout .row {
  display: flex; gap: 22px; justify-content: center;
  margin-top: 26px; font-size: 0.82rem; opacity: 0.85;
}
.phone .readout .row b { display: block; font-size: 1.06rem; font-weight: 680; }

/* ---------- prose (privacy / support) ---------- */

.prose { max-width: 70ch; }
.prose h2 { margin-top: 2.2em; font-size: 1.42rem; }
.prose h2:first-of-type { margin-top: 1.4em; }
.prose h3 { margin-top: 1.8em; }
.prose ul { padding-left: 1.2em; margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.5em; color: var(--ink-soft); }
.prose p { color: var(--ink-soft); }
.prose strong { color: var(--ink); }

.callout {
  border: 1px solid var(--green-300);
  background: var(--green-50);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 0 0 2em;
}
.callout p { margin: 0; color: var(--ink); }

.updated {
  font-size: 0.86rem;
  color: var(--ink-faint);
  margin-bottom: 2.4em;
}

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

footer.site {
  border-top: 1px solid var(--line);
  padding: 44px 0;
  background: var(--bg-tint);
}

footer.site .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  align-items: center;
}

footer.site p { margin: 0; color: var(--ink-faint); font-size: 0.88rem; }
footer.site nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.88rem;
  margin-left: 22px;
}
footer.site nav a:first-child { margin-left: 0; }
footer.site nav a:hover { color: var(--green-600); }