/* The Mac download pages, on top of lander.css: the steps on the left, install.js's animation on the lander's desktop blue on the right. */
.install {
  display: grid;
  grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
  min-height: 100vh;
  min-height: 100svh;
}
.how {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px clamp(16px, 6vw, 96px) 40px;
}
.steps { margin: auto 0; }
.steps h1 { margin-bottom: 28px; font-size: clamp(34px, 3.6vw, 56px); }
.steps ol {
  margin: 0 0 24px;
  padding: 0 0 0 1.3em;
  font-size: clamp(18px, 1.4vw, 21px);
  font-weight: 600;
}
.steps li { margin-bottom: 10px; padding-left: 0.2em; }
.steps b { font-weight: 800; }
.again { margin: 0; color: var(--muted); font-size: 16px; font-weight: 600; }
.again a { color: var(--ink); text-underline-offset: 3px; }
.again a:focus-visible { border-radius: 4px; }

.desktop { position: relative; overflow: hidden; background: #2b5a72; }
.desktop svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.lifted { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22)); }
#window, #chip, #folder, #app, #dog { transform-box: fill-box; transform-origin: center; }
#dog { transform-origin: bottom; }

@media (max-width: 960px) {
  .install { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .how { gap: 24px; padding: 16px 16px 32px; }
  .desktop { aspect-ratio: 980 / 950; }
}