/* Curfew landing — minimal, system font, dark default */

:root {
  --bg: #0e0e0e;
  --surface: #161616;
  --border: rgba(255, 255, 255, 0.08);
  --ink: #f0ede8;
  --muted: #888;
  --accent: #e8854a;
  --accent-hover: #d9743b;
  --radius: 12px;
  --max: 820px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f2ee;
    --surface: #fff;
    --border: rgba(0, 0, 0, 0.08);
    --ink: #1a1714;
    --muted: #666;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

code {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 0.92em;
}

/* ── Header ── */

.site-header {
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
}

.site-header nav {
  max-width: var(--max);
  margin: 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.wordmark {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  flex: 1;
}

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

/* ── Sections ── */

section { padding: 80px 24px; }
.section-inner { max-width: var(--max); margin: 0 auto; }

/* ── Hero ── */

.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding-top: 100px;
  padding-bottom: 100px;
}

.hero h1 {
  font-size: clamp(40px, 8vw, 72px);
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1.05;
  margin-bottom: 24px;
}

.hero-sub {
  font-size: 20px;
  color: var(--muted);
  max-width: 520px;
  margin-bottom: 40px;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 72px;
}

/* ── Buttons ── */

.btn-primary, .btn-secondary {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); text-decoration: none; }

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
}
.btn-secondary:hover { opacity: 0.8; text-decoration: none; }

/* ── Lockout mockup ── */
/* A standalone dark card that evokes the full-screen overlay users see
   when curfew fires. The mockup stays dark regardless of light-mode so
   it always reads as "this is what the app looks like when it kicks in."
   The subtle radial warmth hints at the product's orange accent without
   colouring the rest of the page. */

/* Real screenshot of the lockout overlay, generated by `just capture` and
   committed at landing/images/lockout-overlay.png. Refresh it before a
   release with `just capture` (XCUITest) or `just capture-hero` (local). */
.lockout-shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.45);
}

/* ── How it works ── */

.how {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.how h2 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 56px;
}

.how-steps {
  display: grid;
  gap: 48px;
  margin-bottom: 56px;
}

@media (min-width: 720px) {
  .how-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

.how-step h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: -0.2px;
}

.how-step p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
}

.step-num {
  display: block;
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 14px;
  font-feature-settings: "tnum" 1;
}

.how-note {
  font-size: 15px;
  color: var(--muted);
  max-width: 640px;
  line-height: 1.7;
  padding-left: 20px;
  border-left: 2px solid var(--border);
}

.how-note em { color: var(--ink); font-style: italic; }

/* ── Reflect ── */
/* Reuses the .how-steps / .how-step / .how-note layout; only the section
   heading and lede need their own rules. Sits on the page background so it
   alternates with the surface-toned sections around it. */

.reflect h2 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
}

.reflect > .section-inner > .reflect-lede {
  font-size: 17px;
  color: var(--muted);
  max-width: 620px;
  margin-bottom: 48px;
  line-height: 1.6;
}

/* ── MCP ── */

.mcp h2 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
}

.mcp > .section-inner > p {
  font-size: 17px;
  color: var(--muted);
  max-width: 600px;
  margin-bottom: 32px;
  line-height: 1.6;
}

.code-row {
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
}

@media (min-width: 720px) {
  .code-row {
    grid-template-columns: 1fr 1fr;
  }
}

.code-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  overflow-x: auto;
}

.code-caption {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}

.code-block pre { margin: 0; }
.code-block code {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 13px;
  color: var(--ink);
  white-space: pre;
}

.mcp-note {
  font-size: 14px;
  color: var(--muted);
  max-width: 600px;
  line-height: 1.6;
}

/* ── Pro ── */

.pro {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.pro h2 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}

.pro-pitch {
  font-size: 17px;
  color: var(--ink);
  max-width: 620px;
  line-height: 1.65;
  margin-bottom: 24px;
}

.pro-price {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 24px;
}

.pro-amount {
  color: var(--ink);
  font-weight: 700;
  font-size: 18px;
}

.pro-availability {
  color: var(--accent);
  font-weight: 500;
}

.pro-buy {
  margin-bottom: 16px;
}

.pro-checkout-note {
  font-size: 13px;
  color: var(--muted);
  max-width: 540px;
  line-height: 1.7;
}

/* ── Download ── */

.download h2 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}

.download > .section-inner > p {
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 24px;
}

.download-trust {
  font-size: 13px;
  color: var(--muted);
  margin-top: 20px;
  max-width: 640px;
  line-height: 1.7;
}

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

.download-sub code {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 13px;
}

/* ── Footer ── */

footer {
  border-top: 1px solid var(--border);
  padding: 40px 24px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
}

.three-horizon {
  max-width: 520px;
  margin: 0 auto 20px;
  font-size: 13px;
  line-height: 1.7;
}

footer p em { color: var(--ink); font-style: italic; }

/* ── Privacy page ── */
/* Shared styles reused via class names; the privacy page keeps to the
   same grid and typography so the two surfaces read as one product. */

.privacy-heading {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 32px;
}

.privacy-lede {
  color: var(--muted);
  margin-bottom: 32px;
  font-size: 17px;
  line-height: 1.6;
}

.privacy-section-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: -0.2px;
}

.privacy-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 40px;
  font-size: 15px;
}

.privacy-table th,
.privacy-table td {
  padding: 10px 16px;
  border: 1px solid var(--border);
  text-align: left;
}

.privacy-table th {
  font-weight: 600;
  background: var(--surface);
}

.privacy-list {
  color: var(--muted);
  margin-bottom: 40px;
  padding-left: 20px;
  line-height: 2;
}

.privacy-prose {
  color: var(--muted);
  margin-bottom: 40px;
  line-height: 1.7;
  max-width: 640px;
}