:root {
  --bg: #f7f5f0;
  --band-bg: #f1eee6;
  --surface: #ffffff;
  --text: #1e2933;
  --muted: #56626e;
  --line: #e3ded3;
  --accent: #2f6f8f;
  --accent-hover: #24566f;
  --accent-text: #ffffff;
  --deep: #1f3b52;
  --deep-text: #eef3f6;
  --deep-muted: #c4d2dc;
  --display: "Inter Tight", "SF Pro Display", -apple-system, "Segoe UI", system-ui, sans-serif;
  --body: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111a22;
    --band-bg: #15212b;
    --surface: #18252f;
    --text: #e8edf1;
    --muted: #a3b0bb;
    --line: #26343f;
    --accent: #6fa8c6;
    --accent-hover: #8bbcd5;
    --accent-text: #0f1a22;
    --deep: #1c3447;
    --deep-text: #eef3f6;
    --deep-muted: #b9c8d3;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 var(--body);
}

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

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

h1, h2, .outcome, .brand {
  font-family: var(--display);
  letter-spacing: -0.02em;
}

/* header */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 22px;
  padding-bottom: 22px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 21px;
}
.bar nav { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.bar nav a { color: var(--muted); text-decoration: none; }
.bar nav a:hover { color: var(--text); }
.bar nav a.outline {
  color: var(--text);
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 16px;
}

/* hero */
.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
  padding-top: 40px;
  padding-bottom: 64px;
}
.pitch { flex: 1 1 420px; min-width: 0; }
.eyebrow {
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
h1 {
  margin: 0 0 22px;
  font-size: clamp(40px, 6vw, 60px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.lead { margin: 0 0 30px; font-size: 19px; color: var(--muted); max-width: 34em; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0; }
.note { font-size: 15px; color: var(--muted); }

.button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 24px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: none;
}
.button:hover { background: var(--accent-hover); color: var(--accent-text); }
.button.light { background: var(--bg); color: var(--deep); }
.button.light:hover { background: #ffffff; color: var(--deep); }

.art { flex: 1 1 440px; min-width: 0; margin: 0; }
/* The picture is a square crop of a rounded tile; the radius matches the
   tile's own corners (300 px of 1048 x 1058), so no halo shows. */
.art img { display: block; width: 100%; height: auto; border-radius: 28.6% / 28.4%; }

/* outcomes band */
.outcomes {
  background: var(--band-bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  padding-top: 34px;
  padding-bottom: 34px;
}
.outcome-grid p { margin: 0; font-size: 15px; color: var(--muted); }
.outcome-grid .outcome { margin: 0 0 4px; font-size: 20px; font-weight: 650; color: var(--text); }

/* features */
.features { padding-top: 80px; padding-bottom: 40px; }
.features h2 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 38px); font-weight: 650; line-height: 1.15; }
.section-lead { margin: 0 0 40px; font-size: 18px; color: var(--muted); max-width: 40em; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
}
.cards article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
}
.cards svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cards h3 { margin: 14px 0 8px; font-size: 18px; font-weight: 600; }
.cards p { margin: 0; font-size: 15px; color: var(--muted); }

/* closing band */
.closing { padding-top: 40px; padding-bottom: 88px; }
.band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 52px 44px;
  border-radius: 22px;
  background: var(--deep);
  color: var(--deep-text);
}
.band > div { flex: 1 1 420px; min-width: 0; }
.band h2 { margin: 0 0 10px; font-size: clamp(28px, 4vw, 36px); font-weight: 650; }
.band p { margin: 0; font-size: 18px; color: var(--deep-muted); }

/* narrow pages: sign in, not found */
.narrow { max-width: 640px; margin: 0 auto; padding: 48px 24px 120px; }
.narrow h1 { font-size: clamp(34px, 5vw, 46px); }

/* footer */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 22px;
  padding-bottom: 36px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.foot a { color: var(--muted); }

@media (max-width: 520px) {
  .wrap, .narrow { padding-left: 16px; padding-right: 16px; }
  .hero { gap: 32px; padding-top: 16px; }
  .band { padding: 36px 24px; }
  .bar nav { gap: 16px; }
}