/* Landing page only. Palette tokens come from styles.css, so the marketing page
   and the app can never drift apart on colour. */

body.landing{
  /* No footer, so the page itself has to end with some air under it. */
  padding-bottom:46px;
  line-height:1.6;
}

.wrap{max-width:860px;margin-inline:auto;padding:0 22px}

.landing h1,
.landing h2,
.landing h3{letter-spacing:-0.02em}

.landing section{margin:76px 0}
.landing h2{font-size:26px;margin-bottom:14px}
.landing p{color:var(--muted);margin:0 0 14px}
/* :not(.btn) matters. Without it this rule (specificity 0,1,1) outranks
   .btn's own colour (0,1,0) and paints purple link text onto the purple
   button — 1.26:1 in light mode. Buttons keep --accent-ink. */
.landing a:not(.btn){color:var(--accent-fg)}

/* ---------- hero ---------- */
.hero{
  padding:56px 0 8px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 380px at 15% -10%, var(--day-active), transparent 70%);
}
/* The lockup from the brand sheet: mark, wordmark, tagline underneath. The
   wordmark is tracked out because CADENCE in caps at this size closes up
   otherwise. */
.brand{display:flex;align-items:center;gap:14px;margin-bottom:40px}
.brand .mark{width:44px;height:44px;flex:none}
.brand-words{display:flex;flex-direction:column;gap:2px}
.brand-name{
  font-size:22px;font-weight:800;letter-spacing:.06em;line-height:1;
  text-transform:uppercase;
}
.brand-tag{
  font-size:10px;font-weight:600;letter-spacing:.22em;line-height:1;
  text-transform:uppercase;color:var(--muted);
}

.hero h1{
  font-size:clamp(38px,8vw,60px);
  line-height:1.04;margin:0 0 18px;
}
.lede{
  font-size:clamp(17px,2.4vw,19px);
  max-width:56ch;color:var(--muted);margin:0 0 30px;
}

.cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:46px}
.btn.big{
  font-size:17px;padding:15px 30px;border-radius:14px;
  text-decoration:none;font-weight:700;
}
.cta-note{font-size:13px;color:var(--muted)}

/* ---------- paste demo ---------- */
.demo-grid{
  display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;
  margin-top:22px;
}
.demo-side{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;min-width:0;
}
.demo-label{
  font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);margin-bottom:10px;
}
/* Sans, not mono: this is meant to read like the notes app it came from, and
   iOS Notes and Google Keep both set plain text in the system sans. */
.demo-side pre{
  margin:0;white-space:pre-wrap;color:var(--text);
  font:13px/1.7 var(--font);
}
.demo-arrow{font-size:26px;color:var(--accent-fg)}

.demo-out{list-style:none;margin:0;padding:0}
.demo-out li{
  display:flex;justify-content:space-between;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:14px;
}
.demo-out li:last-child{border-bottom:0}
/* A heading in the pasted text becomes a routine of its own, which is the part
   of the parser worth showing — so the preview groups rather than listing. */
.demo-out li.demo-head{
  border-bottom:0;padding:12px 0 2px;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.demo-out li.demo-head:first-child{padding-top:0}
.demo-out span{color:var(--text)}
.demo-out b{color:var(--accent-fg);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- features ---------- */
.features,
.install-grid{
  display:grid;gap:16px;margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.feature{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;
}
.feature h3{font-size:16px;margin-bottom:7px}
.feature p{font-size:14px;margin:0}

.privacy{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px;
}
.privacy h2{margin-top:0}
.privacy p{margin:0 0 12px;max-width:64ch}
.privacy p:last-child{margin-bottom:0}
.privacy strong{color:var(--text)}

.closer{text-align:center;padding:14px 0 0}
.closer .btn{margin-bottom:14px}

@media (max-width:640px){
  .demo-grid{grid-template-columns:1fr}
  .demo-arrow{transform:rotate(90deg);text-align:center}
  .landing section{margin:56px 0}
}

.steps{margin:0;padding-left:20px;color:var(--muted);font-size:14px}
.steps li{margin:0 0 6px}
.steps li:last-child{margin-bottom:0}
.steps strong{color:var(--text)}