/* Landing-page furniture, loaded only by the two extension pages.
   Those pages advertise something you install rather than something you
   use in the page, so they need a vocabulary the tool pages don't: a hero,
   a mock of the extension popup, an install CTA, and the notes and privacy
   blocks underneath. Anything below is shared by both of them. */

.stage--landing{
  width:100%;
  max-width:680px;
  margin:0 auto;
  justify-content:flex-start;
  gap:64px;
  padding-top:32px;
}

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

.hero{max-width:560px}
.display{
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(38px,7vw,62px);
  line-height:1.08;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.lede{
  max-width:460px;
  margin:20px auto 0;
  font-size:15px;
  line-height:1.65;
  color:var(--muted);
  text-wrap:balance;
}

/* ---------- popup mock ---------- */

.demo{display:flex;flex-direction:column;align-items:center;gap:18px}
.popup{
  width:340px;
  max-width:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  text-align:left;
}
.popup-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px 12px;
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
}
.popup-tag{color:var(--faint)}
.popup-body{
  padding:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

/* ---------- install CTA ---------- */

.install{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.install-btn{padding:14px 32px;font-size:13px}
.install .hint{margin-top:0}
.install .hint a{
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid var(--line-strong);
  transition:color 200ms, border-color 200ms;
}
.install .hint a:hover{color:rgba(255,255,255,.85);border-bottom-color:rgba(255,255,255,.4)}

/* ---------- notes ---------- */

.notes{
  width:100%;
  max-width:660px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px;
  text-align:left;
}
.note h2{
  margin-bottom:12px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.note p{
  font-size:14px;
  line-height:1.7;
  color:var(--faint);
}

/* ---------- privacy ---------- */

.privacy{
  width:100%;
  max-width:560px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.privacy h2{
  margin-bottom:16px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.privacy p{
  max-width:52ch;
  margin:0 auto 12px;
  font-size:14px;
  line-height:1.7;
  color:var(--faint);
}
.privacy-contact a{
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid var(--line-strong);
  transition:color 200ms, border-color 200ms;
}
.privacy-contact a:hover{color:rgba(255,255,255,.85);border-bottom-color:rgba(255,255,255,.4)}

@media (max-width:600px){
  .stage--landing{gap:52px;padding-top:16px}
  .notes{grid-template-columns:1fr;gap:28px;text-align:center}
}