/* NimbleCraft — one stylesheet, no inline styles anywhere (so a strict `style-src 'self'` CSP
   holds). Dark-first with a light-mode override, matching the app sites.

   The palette is deliberately neutral. This page exists to point at three products whose icons
   are strongly coloured (purple, teal, and whatever the third turns out to be); an accent of its
   own would fight them. Colour here comes from the artwork, not the chrome. */

:root {
  --bg: #0e1117;
  --bg-elev: #161b22;
  --border: #2a3444;
  --border-strong: #3a4658;
  --text: #e6edf3;
  --text-dim: #9aa7b4;
  --focus: #6ea8fe;
  --radius: 14px;
  --icon: 112px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f9fb;
    --bg-elev: #ffffff;
    --border: #d8e0ea;
    --border-strong: #b9c6d6;
    --text: #0e1a2b;
    /* #5a6b7d measures 5.19:1 on the page background and 5.48:1 on a card — clear of the 4.5:1
       AA floor in both places it is used (the domain line and the footer). */
    --text-dim: #5a6b7d;
    --focus: #0b5bd3;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Full-height column so the footer sits at the bottom on a short page without being fixed. */
.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 6vw, 4rem);
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) 1.25rem;
}

/* Masthead */
.masthead { text-align: center; }

.wordmark {
  margin: 0;
  font-size: clamp(2rem, 7vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* App grid — three columns that collapse to one rather than two, so the odd card out is never
   stranded on a row of its own. */
.apps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
}

@media (max-width: 640px) {
  .apps { grid-template-columns: 1fr; }
}

.app { display: flex; }

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: clamp(1.25rem, 3vw, 1.75rem) 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--text);
  text-decoration: none;
  text-align: center;
  transition: transform .18s ease, border-color .18s ease;
}

a.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}

a.card:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Honour a reduced-motion preference — the lift is decoration, not information. */
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  a.card:hover { transform: none; }
}

.icon {
  width: var(--icon);
  height: var(--icon);
  /* 22.37% is Apple's squircle corner ratio; plain border-radius is a close enough stand-in at
     this size, and keeps the two shipped icons and the placeholder the same silhouette. */
  border-radius: 22.37%;
  display: block;
}

.name {
  font-weight: 700;
  font-size: 1.05rem;
}

.domain {
  color: var(--text-dim);
  font-size: .875rem;
  /* Sits directly under the name, so the default line-height would over-space it. */
  margin-top: -.5rem;
}

/* Placeholder card — reads as an intentional gap rather than a broken image. */
.is-placeholder { border-style: dashed; }

.icon-placeholder {
  background: transparent;
  border: 2px dashed var(--border-strong);
}

/* Footer */
.footer {
  text-align: center;
  color: var(--text-dim);
  font-size: .875rem;
}

.footer p { margin: 0; }