/* Zip Flip — shared styles. Same bones as Silent Bell (silentbell.app): black
   ground, warm greys, Newsreader for display lines, system sans for the rest.
   Newsreader is self-hosted (fonts/newsreader.css) so visitors' addresses are
   not handed to a font service. This stylesheet, the font files and count.js
   are the only assets the pages request. */

body {
  margin: 0;
  background: #000;
  font-family: -apple-system, 'Helvetica Neue', system-ui, sans-serif;
  color: #B8B2A6;
  -webkit-font-smoothing: antialiased;
}
a { color: #6EB6CF; text-decoration: none; }
a:hover { color: #8FCBE0; }
::selection { background: rgba(110,182,207,.3); }
:focus-visible { outline: 2px solid #6EB6CF; outline-offset: 3px; border-radius: 4px; }
input::placeholder { color: #8A8378; }
[hidden] { display: none !important; }

.serif { font-family: 'Newsreader', ui-serif, Georgia, serif; }
.page { min-height: 100vh; background: #000; display: flex; flex-direction: column; align-items: center; }
.wrap { width: 100%; max-width: 1060px; box-sizing: border-box; }
.rule { border-top: 1px solid rgba(232,226,216,.08); }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: #8A8378; }
.pill {
  font-size: 14px; color: #B8B2A6;
  border: 1px solid rgba(232,226,216,.14);
  border-radius: 20px; padding: 9px 18px;
}
.beat-n { font-family: 'Newsreader', ui-serif, Georgia, serif; font-style: italic; font-size: 17px; color: #6EB6CF; }
.beat-t { font-size: 18px; font-weight: 600; color: #EDE7DB; margin-top: 10px; }
.beat-d { font-size: 15px; line-height: 1.65; color: #9D968A; margin-top: 8px; }

/* Header and footer */
.header { padding: 28px clamp(20px,5vw,48px); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand span { font-size: 14px; font-weight: 600; letter-spacing: .12em; color: #E8E2D8; }
.header a.quiet, .footer a { color: #8A8378; }
.header a.quiet:hover, .footer a:hover { color: #B8B2A6; }
.footer { font-size: 13px; color: #8A8378; text-align: center; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 24px; border-radius: 26px; box-sizing: border-box;
  font-size: 16px; font-weight: 600; font-family: inherit; text-decoration: none; cursor: pointer;
}
.btn-teal { background: #6EB6CF; color: #0B1A20; border: 0; }
.btn-teal:hover { background: #8FCBE0; color: #0B1A20; }
.btn-grey { background: #1C1C1E; color: #EBEBF0; border: 1px solid #2A2A2D; }
.btn-grey:hover { color: #FFFFFF; border-color: #3A3A3C; }
.badge {
  display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 24px;
  border-radius: 12px; background: #1C1C1E; border: 1px solid #2A2A2D; color: #FFFFFF; text-decoration: none;
}
.badge:hover { color: #FFFFFF; border-color: #3A3A3C; }
.badge .l1 { font-size: 11px; line-height: 1.15; }
.badge .l2 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }

/* Cards and inputs */
.card { padding: 22px 24px; border-radius: 16px; background: #0E0E10; border: 1px solid #1C1C1E; }
.field {
  width: 100%; height: 56px; box-sizing: border-box; padding: 0 18px; border-radius: 12px;
  border: 1px solid #2A2A2D; background: #0E0E10; color: #EDE7DB; font-size: 16px; font-family: inherit;
}
.field:focus { border-color: #6EB6CF; outline: none; }
.linkbox {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 18px 20px; border-radius: 12px; background: #0E0E10; border: 1px solid #2A2A2D;
}
.linkbox code { flex: 1 1 280px; min-width: 0; font-size: 15px; line-height: 1.5; color: #6EB6CF; word-break: break-all; }

/* Watch mockup in the hero */
.watch { position: relative; background: #1D1D20; border-radius: 96px; padding: 11px; box-shadow: 0 30px 80px rgba(0,0,0,.7); }
.watch .crown { position: absolute; right: -7px; top: 88px; width: 8px; height: 44px; border-radius: 4px; background: #343437; }
.watch .button { position: absolute; right: -6px; top: 148px; width: 6px; height: 70px; border-radius: 3px; background: #2A2A2D; }
.watch .screen {
  width: 278px; height: 332px; background: #000; border-radius: 80px; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px; padding: 18px 14px 16px; box-sizing: border-box;
}
.watch .bar { display: flex; justify-content: space-between; align-items: baseline; padding: 0 6px; font-size: 20px; font-weight: 600; }
.watch .face {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px; padding: 16px; border-radius: 26px; background: #1C1C1E;
}
.watch .answers { display: flex; gap: 8px; }
.watch .answers div {
  flex: 1 1 0; height: 56px; border-radius: 28px; display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 600;
}

/* Video slot */
.video {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; background: #0E0E10;
  border: 1px solid #1C1C1E; overflow: hidden; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 20px; text-align: center; padding: 24px; box-sizing: border-box;
}
.video .play {
  width: 84px; height: 84px; border-radius: 50%; background: #6EB6CF;
  display: flex; align-items: center; justify-content: center;
}
.video video { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Text pages (privacy, support, link page) */
.prose { max-width: 62ch; margin: 0 auto; padding: 0 clamp(20px,5vw,48px) clamp(64px,10vh,110px); }
.prose h1 {
  font-family: 'Newsreader', ui-serif, Georgia, serif;
  font-weight: 300; font-size: clamp(34px,5vw,52px); line-height: 1.1;
  color: #EDE7DB; margin: clamp(24px,5vh,48px) 0 0;
}
.prose h2 {
  font-size: 17px; font-weight: 600; color: #EDE7DB;
  margin: 38px 0 0;
  scroll-margin-top: 24px;
}
.prose p, .prose li { font-size: 16px; line-height: 1.7; color: #B8B2A6; }
.prose p { margin: 14px 0 0; }
.prose ul, .prose ol { margin: 12px 0 0; padding-left: 20px; }
.prose li { margin: 6px 0; }
.prose .lede { font-size: 19px; color: #EDE7DB; margin-top: 20px; }
.prose .meta { font-size: 13px; color: #8A8378; margin-top: 48px; }