:root {
  --text: #fff;
  --muted: rgba(255, 255, 255, 0.5);
  --faint: rgba(255, 255, 255, 0.32);
  --hairline: rgba(255, 255, 255, 0.09);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: #000; color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }

body { min-height: 100vh; display: flex; flex-direction: column; }

a { color: inherit; text-decoration: none; }

.nav { padding: 28px 32px 0; }

/* Matches the app's Wordmark: "lock" on the baseline, "step" raised a step. */
.wordmark { display: inline-block; font-size: 20px; font-weight: 800; letter-spacing: -0.045em; padding-top: 0.14em; }
.wordmark .step { position: relative; top: -0.14em; }

.hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 96px 20px; text-align: center; }

h1 { font-size: clamp(32px, 5.2vw, 64px); line-height: 1.45; letter-spacing: -0.035em; font-weight: 700; }

.line { display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.mobile-copy { display: none; }

.stack { display: inline-flex; margin: 0 0.22em; }

.icon {
  --size: 1.25em;
  width: var(--size);
  height: var(--size);
  border-radius: 22.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  margin-left: -0.32em;
  box-shadow: 0 0 0 0.08em #000;
  transform: rotate(var(--tilt, 0deg));
}
.icon:first-child { margin-left: 0; }
.icon img { width: 58%; height: 58%; }
.icon.art img { width: 100%; height: 100%; object-fit: cover; }

.stack > :nth-child(6n + 1) { --tilt: -8deg; }
.stack > :nth-child(6n + 2) { --tilt: 5deg; }
.stack > :nth-child(6n + 3) { --tilt: -3deg; }
.stack > :nth-child(6n + 4) { --tilt: 9deg; }
.stack > :nth-child(6n + 5) { --tilt: -6deg; }
.stack > :nth-child(6n + 6) { --tilt: 4deg; }

/* Keep the hover target still while its artwork moves. */
.stack-icon { position: relative; display: flex; flex: none; margin-left: -0.32em; z-index: 0; }
.stack-icon:first-child { margin-left: 0; }
.stack-icon .icon { margin-left: 0; }

@media (hover: hover) and (pointer: fine) {
  .stack-icon:hover { z-index: 1; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .stack-icon { transition: z-index 0s 180ms; }
  .stack-icon:hover { transition-delay: 0s; }
  .stack-icon .icon {
    transition: translate 180ms cubic-bezier(0.2, 0, 0, 1), scale 180ms cubic-bezier(0.2, 0, 0, 1);
  }
  .stack-icon:hover .icon {
    translate: 0 -0.12em;
    scale: 1.12;
    animation: icon-jiggle 420ms ease-in-out 1;
  }
}

/* Add a single right-left wiggle to each icon's resting tilt. */
@keyframes icon-jiggle {
  0%, 100% { rotate: 0deg; }
  30% { rotate: 11deg; }
  68% { rotate: -9deg; }
}

.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.tiktok { background: #111; box-shadow: 0 0 0 0.08em #000, inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.youtube { background: #ff0033; }
.snapchat { background: #fffc00; }
.snapchat img { width: 66%; height: 66%; }
.reddit { background: #ff4500; }
.facebook { background: #0866ff; }
.hermes { background: #fff; }

.button { margin-top: 56px; background: #fff; color: #000; font-weight: 600; font-size: 16px; border-radius: 999px; padding: 15px 26px; }
.button:hover { background: rgba(255, 255, 255, 0.85); }

.footer { display: flex; justify-content: space-between; gap: 16px; padding: 20px 32px 28px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--faint); }
.footer .agents { font-family: var(--mono); font-size: 12px; }
.footer .links { display: flex; gap: 20px; }
.footer a:hover { color: var(--muted); }

/* Phones: two complete statements, each followed by its icon stack. */
@media (max-width: 640px) {
  h1 { font-size: clamp(27px, 8.5vw, 34px); line-height: 1.3; }
  .desktop-copy { display: none; }
  .mobile-copy { display: inline; }
  .line { flex-direction: column; gap: 14px; }
  .line + .line { margin-top: 40px; }
  .stack { margin: 0; }
  .icon { --size: 56px; margin-left: -14px; box-shadow: 0 0 0 3px #000; }
  .stack-icon { margin-left: -14px; }
  .tiktok { box-shadow: 0 0 0 3px #000, inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
  .footer { flex-direction: column; padding: 20px 24px 28px; }
}

/* Privacy page */
.doc { max-width: 620px; margin: 0 auto; padding: 80px 24px 96px; flex: 1; }
.doc h1 { font-size: 36px; line-height: 1.15; letter-spacing: -0.03em; }
.doc h2 { font-size: 18px; margin-top: 36px; letter-spacing: -0.01em; }
.doc p, .doc li { color: var(--muted); font-size: 16px; line-height: 1.6; margin-top: 12px; }
.doc ul { padding-left: 20px; }
.doc .updated { font-size: 13px; color: var(--faint); }