/* Landing page only */

.landing{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;padding:64px var(--pad);position:relative;
}
.inner{width:100%;max-width:1082px;display:flex;flex-direction:column}
.landing > .moon{position:absolute;top:22px;right:var(--pad)}

.hero{display:flex;align-items:flex-start;gap:48px;width:100%}
.hero > img{object-fit:contain;width:340px;height:340px;flex:0 0 auto}
.hero .copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}

.hero h1{
  margin:0;font:600 clamp(38px,6vw,58px)/1 var(--sans);letter-spacing:-.04em;
}
.hero .tag{
  margin:14px 0 0;max-width:42ch;font:16px/1.6 var(--sans);color:var(--fg3);text-wrap:pretty;
}

.actions{display:flex;gap:12px;margin:28px 0 0;flex-wrap:wrap}
.btn.primary,.btn.secondary{border-radius:10px;padding:14px 22px;font:600 14px/1 var(--sans)}
.btn.primary{background:var(--acc);color:var(--accfg);border:1px solid var(--acc)}
.btn.primary:hover{background:transparent;color:var(--acc)}
.btn.secondary{border:1px solid var(--line);color:var(--fg)}
.btn.secondary:hover{border-color:var(--acc);color:var(--acc)}

.install{
  margin:18px 0 0;font:13px/1 var(--mono);color:var(--fg3);
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 13px;
}

.for{
  margin:28px 0 0;padding-top:20px;border-top:1px solid var(--line2);
  max-width:52ch;font:13.5px/1.65 var(--sans);color:var(--fg4);text-wrap:pretty;
}
.for span{
  display:block;margin-bottom:6px;font:700 20px/1.4 var(--mono);letter-spacing:.08em;color:var(--acc);
}

.landing .foot{margin:16px 0 0;padding-left:388px}

@media (max-width:760px){
  .landing .foot{padding-left:0}
  .hero{flex-direction:column;gap:20px;text-align:left;align-items:flex-start}
  .hero > img{width:289px;height:289px}
  .landing{justify-content:flex-start;padding-top:72px}
}