body {
  min-height: 100vh;
  min-height: 100dvh;
  color: #fff;
  background: radial-gradient(120% 80% at 50% 0%, #0B5E59 0%, #12302E 70%) fixed;
}

.hub {
  max-width: 440px;
  margin: 0 auto;
  padding: calc(var(--safe-top) + 2.5rem) 1.25rem calc(var(--safe-bottom) + 2rem);
}

.hub__head { text-align: center; margin-bottom: 2.5rem; }
/* White version of the PSYCHE logo (transparent PNG) for the dark wallpaper. */
.hub__logo {
  width: min(220px, 62%); height: auto;
  margin: -1rem auto .25rem;
}
.hub__head h1 { font-size: 2rem; color: #fff; }
.hub__lead { margin: .75rem auto 0; max-width: 32ch; color: rgba(255, 255, 255, .78); }

/* Phone-style icon grid */
.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 1.75rem 1rem;
}
.app {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: #fff; text-decoration: none; text-align: center;
}
.app__icon {
  width: 64px; height: 64px;
  border-radius: 22.4%;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .12) inset;
  transition: transform .12s;
}
.app__icon img { width: 100%; height: 100%; }
.app:active .app__icon { transform: scale(.92); }
.app:focus-visible { outline-color: var(--clr-accent-soft); border-radius: 12px; }
.app__name { font-size: .8rem; line-height: 1.2; font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }

.hub__foot { margin-top: 3.5rem; text-align: center; }
.hub__pin {
  background: none; border: 0; padding: .5rem;
  color: var(--clr-accent-soft);
  font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.hub__pin:focus-visible { outline-color: var(--clr-accent-soft); }

/* Pin popup */
.pin {
  width: min(92vw, 400px);
  padding: 0; border: 0; border-radius: 22px;
  color: var(--clr-dark); background: var(--clr-surface);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}
.pin::backdrop { background: rgba(18, 48, 46, .7); }
.pin__card { padding: 1.5rem 1.5rem 1.25rem; text-align: center; }
.pin__icon { margin: 0 auto 1rem; border-radius: 22.4%; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
.pin h2 { font-size: 1.35rem; }
.pin__card > p { margin: .5rem 0 0; color: var(--clr-muted); }
.pin__steps { margin: 1.1rem 0 0; padding: 0; list-style: none; counter-reset: s; text-align: left; display: grid; gap: .6rem; }
.pin__steps li {
  counter-increment: s; position: relative;
  padding: .55rem .75rem .55rem 2.6rem;
  background: var(--clr-bg); border-radius: 12px; font-size: .95rem;
}
.pin__steps li::before {
  content: counter(s);
  position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 700; color: #fff; background: var(--clr-base);
}
.pin__steps svg { display: inline-block; vertical-align: -3px; width: 1.15em; height: 1.15em; }
.pin__actions { display: grid; gap: .6rem; margin-top: 1.25rem; }
.pin__card > .pin__note { margin-top: .9rem; font-size: .8rem; }