/* install.css — the front door only. The app itself never loads this.

   Kept apart from base.css on purpose: this page is the one thing a parent
   sees before anything is installed, so it must paint on a cold cache with a
   single stylesheet and no layout shift. */

*{box-sizing:border-box}

body{
  margin:0;
  padding:max(24px,env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom));
  font-family:"Gabarito",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:500;
  color:var(--zellige);
  background:var(--chalk);
  -webkit-text-size-adjust:100%;
  line-height:1.55;
}

.page{max-width:34rem;margin:0 auto}

/* ── the mark ───────────────────────────────────────────────── */

.hero{text-align:center;padding:8px 0 28px}
.mark{
  width:96px;height:96px;border-radius:28px;
  box-shadow:0 10px 30px rgba(91,76,224,.28);
}
.hero h1{
  font-weight:900;font-size:2.5rem;line-height:1.1;
  margin:18px 0 6px;letter-spacing:-.02em;color:var(--majorelle-deep);
}
.tagline{margin:0;color:#5a5872;font-size:1.05rem}

/* ── panels ────────────────────────────────────────────────── */

.card{
  background:#fff;border-radius:24px;padding:24px 22px;
  box-shadow:0 2px 0 rgba(22,21,47,.04),0 12px 34px rgba(22,21,47,.07);
}
.card h2{
  font-weight:900;font-size:1.3rem;margin:0 0 10px;color:var(--majorelle-deep);
}
.card p{margin:0 0 14px}

/* ── the download / open button ────────────────────────────── */

.btn{
  display:block;width:100%;
  padding:17px 20px;border:0;border-radius:999px;
  background:var(--majorelle);color:#fff;
  font-family:inherit;font-weight:900;font-size:1.1rem;
  text-align:center;text-decoration:none;cursor:pointer;
  /* the charter's pushable button: a darker lip, and it sinks when pressed */
  box-shadow:0 4px 0 var(--majorelle-deep);
  transition:transform .08s ease,box-shadow .08s ease;
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--majorelle-deep)}
.btn.ghost{
  margin-top:12px;background:#fff;color:var(--majorelle-deep);
  box-shadow:inset 0 0 0 3px var(--majorelle);
}
.btn.ghost:active{transform:translateY(2px)}

.meta{
  margin:10px 0 0;text-align:center;
  font-size:.9rem;color:#6d6b85;min-height:1.4em;   /* no shift when it fills */
}

/* ── steps ─────────────────────────────────────────────────── */

.steps{margin:20px 0 14px;padding-left:1.35em}
.steps li{margin-bottom:9px}
.steps b{font-weight:900}

.note{
  margin:0;padding:13px 15px;border-radius:16px;
  background:rgba(91,76,224,.07);font-size:.95rem;color:#3f3d5c;
}
.warn{
  padding:13px 15px;border-radius:16px;
  background:rgba(245,165,36,.16);
  box-shadow:inset 0 0 0 2px rgba(245,165,36,.5);
  font-size:.95rem;
}

/* ── the rest ──────────────────────────────────────────────── */

.or{text-align:center;margin:20px 0;color:#5a5872}
.or a{color:var(--majorelle-deep);font-weight:700}

.other{margin-top:8px}
.other summary{
  cursor:pointer;padding:14px 4px;text-align:center;
  color:var(--majorelle-deep);font-weight:700;
}
.other .alt{margin-top:14px;background:#fbfbff}
/* the alternates are reference, not the thing to do next */
.other .alt .btn{
  background:#fff;color:var(--majorelle-deep);
  box-shadow:inset 0 0 0 2px rgba(91,76,224,.35);
}
.other .alt .btn:active{transform:none}

footer{margin-top:36px;text-align:center;color:#7b7994;font-size:.88rem}
footer p{margin:4px 0}
.by strong{color:var(--majorelle-deep);letter-spacing:.06em}

@media (min-width:640px){
  .hero h1{font-size:3rem}
  .card{padding:30px 28px}
}