/* The signed-out front page. Every value comes from the design system tokens. */
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
}

.front {
  max-width: 460px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-7);
  display: grid;
  gap: var(--space-6);
}

.front-bar { display: flex; align-items: center; justify-content: space-between; }
.front-wordmark { width: 132px; height: auto; display: block; }

.front-hero { display: grid; gap: var(--space-4); }
.front-hero h1 { margin: 0; text-wrap: balance; }
.front-lede { margin: 0; color: var(--pencil); font-size: calc(16rem / 17); line-height: calc(24rem / 17); max-width: 34ch; }

.front-prints { width: 100%; max-width: 340px; justify-self: center; padding: var(--space-5) 9% 0 0; box-sizing: border-box; }
/* The design system's placeholder gradients */
.front-photo-1 { background-image: linear-gradient(180deg, #F6B66E, #E77C5A 40%, #6B4A6E 65%, #2C3D55); }
.front-photo-2 { background-image: radial-gradient(circle at 70% 30%, #FFE2A8 0 12%, transparent 13%), linear-gradient(160deg, #8FC1D4, #3F7B8C 60%, #23454F); }
.front-photo-3 { background-image: radial-gradient(ellipse at 30% 80%, #F2C27B 0 18%, transparent 40%), linear-gradient(135deg, #5A2E24, #A85A3C 55%, #E2A15E); }

.front-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.front-steps li {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.front-steps li > span:last-child { display: grid; gap: 2px; }
.front-steps .sub { color: var(--pencil); font-size: calc(14rem / 17); }
.front-step-art { display: grid; justify-items: center; }
.front-step-art .af-pill { margin: 0; white-space: nowrap; }
.front-dev { width: 56px; }

.front-cta { display: grid; gap: var(--space-2); }
.front-cta .sub { margin: 0; color: var(--pencil); font-size: calc(12.5rem / 17); text-align: center; }
.front-prints .af-prints-sticker { right: 11%; }