/* plckeeper.app Coming Soon page. Colours follow the app's design language
   (plckeeper-app docs/design/design-language.md): deep teal accent and system type.
   System font stacks only, so no font blobs are needed. The screenshots are blurred
   in the image files themselves, not with CSS, so the sharp versions never ship. */

:root {
  --bg: #f5f5f7;
  --text: #1d1d1f;
  --text-secondary: #55555a;
  --accent: #0b6e78;
  --bezel: #1d1d1f;
  --rule: #d8d8dc;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --text: #f5f5f7;
    --text-secondary: #aeaeb2;
    --accent: #5cc4cd;
    --bezel: #3a3a3c;
    --rule: #38383a;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  overflow-x: hidden;
}

main {
  flex: 1;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: clamp(3rem, 10vh, 6rem) 16px 3rem;
  text-align: center;
}

h1 {
  margin: 0;
  font: 700 clamp(2.5rem, 9vw, 4rem)/1.05 -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  letter-spacing: -0.025em;
}

.lede {
  max-width: 34rem;
  margin: 1rem auto 0;
  color: var(--text-secondary);
  font-size: clamp(1.125rem, 3.5vw, 1.375rem);
  line-height: 1.4;
}

.soon {
  display: inline-block;
  margin: 1.75rem 0 0;
  padding: 0.5rem 1.125rem;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9375rem;
}

@media (prefers-color-scheme: dark) {
  .soon {
    color: #000000;
  }
}

/* A fanned row of phones: the middle one forward, the others tucked behind it. */
.phones {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: clamp(2.5rem, 8vh, 4rem);
  padding: 1rem 0;
}

.phone {
  display: block;
  width: clamp(120px, 19vw, 200px);
  height: auto;
  border: clamp(4px, 0.7vw, 7px) solid var(--bezel);
  border-radius: clamp(20px, 3.4vw, 36px);
  background: var(--bezel);
  box-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.35);
  user-select: none;
}

.phone + .phone {
  margin-left: clamp(-56px, -5vw, -24px);
}

.p1 { transform: rotate(-8deg) translateY(28px) scale(0.86); z-index: 1; }
.p2 { transform: rotate(-4deg) translateY(10px) scale(0.94); z-index: 2; }
.p3 { transform: none; z-index: 3; position: relative; }
.p4 { transform: rotate(4deg) translateY(10px) scale(0.94); z-index: 2; }
.p5 { transform: rotate(8deg) translateY(28px) scale(0.86); z-index: 1; }

.p1, .p2, .p4, .p5 { position: relative; }

/* Phones: three across, so nothing overflows a 320px screen. */
@media (max-width: 600px) {
  .p1,
  .p5 {
    display: none;
  }

  .phone {
    width: clamp(100px, 32vw, 160px);
  }

  .phone + .phone {
    margin-left: -12vw;
  }
}

footer {
  padding: 1.5rem 16px 2.5rem;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  text-align: center;
}

footer p {
  margin: 0;
}