/* The front door at www.jufi.app, on top of Lijnennet. */
body.front main { max-width: 880px; margin: 0 auto; padding: 72px 24px 64px; display: flex; flex-direction: column; gap: 12px; }
body.front h1 {
  font-size: 120px; line-height: 112px; letter-spacing: -0.05em;
  text-shadow: 5px 5px 0 var(--riso-pink);
}
body.front .lead { max-width: 560px; margin: 8px 0 40px; font-size: 19px; line-height: 28px; color: var(--text-2); }
.suite-apps-list { border-top: 2px solid var(--ink); }
.suite-app {
  display: grid; grid-template-columns: 44px 220px 1fr 20px; align-items: center; gap: 20px;
  padding: 22px 8px; color: var(--ink); text-decoration: none;
  transition: background-color 0.15s ease;
}
.suite-app:hover { background: var(--surface); }
.suite-app:hover > .icon { transform: translateX(3px); }
.suite-app > .icon { width: 20px; height: 20px; transition: transform 0.12s ease; }
.suite-app .mark { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--paper); background: var(--cobalt); }
.suite-app .mark .icon { width: 20px; height: 20px; }
.suite-app .what { display: flex; flex-direction: column; gap: 2px; }
.suite-app strong { font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 26px; letter-spacing: -0.02em; }
.suite-app .about { font-size: 15px; line-height: 22px; color: var(--text-2); }
.suite-home[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 600px) {
  body.front main { padding-top: 40px; }
  body.front h1 { font-size: 72px; line-height: 72px; }
  .suite-app { grid-template-columns: 44px 1fr 20px; gap: 6px 16px; }
  .suite-app > .icon { grid-column: 3; grid-row: 1; }
  .suite-app .about { grid-column: 2 / 4; }
}