/* Same look as the video (docs/waitlist-video.md): white and light grey, Inter, monospace eyebrows,
   1 px grey borders, 12 px corners, black pill buttons. Fonts are self-hosted: no third-party requests. */
@font-face { font-family: 'Inter'; src: url('fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }

:root {
  --ink: #111;
  --muted: #5f6368;
  --line: #e6e6e9;
  --soft: #f7f7f8;
  --bg: #fff;
  --radius: 12px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }

.eyebrow {
  margin: 0 0 16px;
  font: 500 13px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero { padding: 72px 16px 40px; text-align: center; }
.hero h1 {
  margin: 0 auto;
  max-width: 820px;
  font-size: clamp(32px, 5.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 650;
}
.lead { max-width: 640px; margin: 20px auto 0; font-size: clamp(17px, 2vw, 20px); color: var(--muted); }

.cta { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pill {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}
.pill:hover { background: #333; }
.pill:active { transform: scale(0.98); }
.pill:focus-visible { outline: 3px solid #9aa0ff; outline-offset: 3px; }
.note { font-size: 14px; color: var(--muted); }

.video-wrap { padding-bottom: 24px; }
video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}
video.tall { aspect-ratio: 4 / 5; }
.caption { margin: 12px 0 0; font-size: 14px; color: var(--muted); text-align: center; }

.steps { padding-top: 72px; }
.steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 820px) { .steps ol { grid-template-columns: repeat(3, 1fr); } }
.steps li { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--bg); }
.num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--soft); border: 1px solid var(--line);
  font: 600 13px/1 'JetBrains Mono', ui-monospace, monospace;
}
.steps h2 { margin: 16px 0 8px; font-size: 19px; letter-spacing: -0.01em; }
.steps p { margin: 0; color: var(--muted); font-size: 16px; }
.connectors { margin: 24px 0 0; text-align: center; color: var(--muted); font-size: 15px; }

.faq { padding-top: 72px; max-width: 760px; }
details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 32px 18px 0;
  font-weight: 600;
  position: relative;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: 4px; top: 16px; font-weight: 400; font-size: 20px; color: var(--muted); }
details[open] summary::after { content: '–'; }
details p { margin: 0 0 18px; color: var(--muted); }

.end { padding: 88px 16px; text-align: center; }
.end h2 { margin: 0; font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.02em; }
.end p { margin: 12px auto 28px; max-width: 520px; color: var(--muted); }

footer {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  padding-top: 24px; padding-bottom: 32px;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}
footer a { color: inherit; }

/* Privacy page */
.doc { max-width: 720px; padding-top: 56px; padding-bottom: 72px; }
.doc h1 { font-size: 32px; letter-spacing: -0.02em; margin: 0 0 8px; }
.doc h2 { font-size: 18px; margin: 32px 0 8px; }
.doc p, .doc li { color: #333; }
.doc a { color: var(--ink); }
.tbd { background: #fff3c4; padding: 0 4px; border-radius: 4px; }

/* "Join the waitlist": the loudest thing on the page, in the video's ink style (near-black, white type,
   print-style corner marks, faint top highlight). Black on the white page is the strongest contrast available. */
[hidden] { display: none !important; }
:root { --cta-glow: rgba(15, 15, 15, 0.30); --mark: #0f0f0f; }
.pill.loud {
  position: relative;
  padding: 20px 40px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  background: linear-gradient(180deg, #2b2b2b 0%, #0f0f0f 58%);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 12px 30px rgba(0, 0, 0, 0.28);
}
.pill.loud:hover { background: linear-gradient(180deg, #363636 0%, #181818 58%); transform: translateY(-1px); }
/* corner marks just outside the button */
.pill.loud::before {
  content: '';
  position: absolute;
  inset: -10px;
  pointer-events: none;
  background:
    linear-gradient(var(--mark), var(--mark)) left top / 12px 1.5px no-repeat,
    linear-gradient(var(--mark), var(--mark)) left top / 1.5px 12px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right top / 12px 1.5px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right top / 1.5px 12px no-repeat,
    linear-gradient(var(--mark), var(--mark)) left bottom / 12px 1.5px no-repeat,
    linear-gradient(var(--mark), var(--mark)) left bottom / 1.5px 12px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right bottom / 12px 1.5px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right bottom / 1.5px 12px no-repeat;
  opacity: 0.55;
}
.pill.loud::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--cta-glow);
  animation: pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--cta-glow); }
  70%, 100% { box-shadow: 0 0 0 14px rgba(15, 15, 15, 0); }
}
@media (prefers-reduced-motion: reduce) { .pill.loud::after { animation: none; } }
@media (max-width: 600px) { .cta .pill.loud, .end .pill.loud { display: block; width: 100%; text-align: center; } }
.pill.loud.small { padding: 12px 22px; font-size: 16px; }
.pill.loud.small::before { inset: -7px; background-size: 9px 1.5px, 1.5px 9px, 9px 1.5px, 1.5px 9px, 9px 1.5px, 1.5px 9px, 9px 1.5px, 1.5px 9px; }
.pill.loud.small::after { animation: none; }

.cta .note a, .text-link { color: var(--ink); font-weight: 600; }
.after-video { margin-top: 28px; }

.pill.ghost { background: var(--bg); color: var(--ink); border: 1.5px solid var(--ink); }
.pill.ghost:hover { background: var(--soft); }

.talk {
  margin: 56px auto 0;
  max-width: 560px;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
}
.talk h3 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.talk p { margin: 8px auto 20px; }
.talk-links { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: center; }

.footer-links { display: inline-flex; gap: 16px; }

/* Sticky bar: slides in once the top button has scrolled out of view. */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.25s ease;
}
.sticky-cta.show { transform: translateY(0); }
.sticky-text { font-size: 14px; color: var(--muted); }
@media (max-width: 600px) {
  .sticky-text { display: none; }
  .sticky-cta .pill { flex: 1; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

/* Data safety */
.safety { padding-top: 72px; }
.safety h2 { margin: 0 0 24px; font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -0.02em; }
.safety-cols { display: grid; gap: 16px; }
@media (min-width: 820px) { .safety-cols { grid-template-columns: 1fr 1fr; } }
.safety-col { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.safety-col h3 { margin: 0 0 12px; font: 600 13px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.safety-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.safety-col li { position: relative; padding-left: 26px; font-size: 16px; color: var(--muted); }
.safety-col li::before {
  content: ''; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border-radius: 4px;
  background: #e8f6ee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.2 2.2 4.8-4.8' fill='none' stroke='%231a7f45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.safety-col li strong { color: var(--ink); }
.safety-intro { margin: 0 0 12px; font-size: 15px; color: var(--muted); }
.safety-source { margin: 16px 0 0; font-size: 13px; color: var(--muted); }
.safety-source a { color: inherit; }

/* Dāvis's cutout to the left of the video (desktop: full height, name in the fade), beside his name above it (phone). */
.video-row { display: grid; gap: 12px; }
.host { margin: 0; display: flex; align-items: flex-end; gap: 16px; }
.host img { display: block; width: auto; height: 180px; }
.host figcaption { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; font-size: 14px; color: var(--muted); }
.host figcaption strong { color: var(--ink); font-size: 17px; }
.host figcaption a { color: var(--ink); font-weight: 600; }
.video-box { min-width: 0; }
/* Wide screens: the photo sits in a rail in the far-left margin (outside the widest 976 px content) and stays
   on screen while scrolling from the video down to the "Rather talk it through?" card. The rail's top and height are
   set by the script in index.html. */
main { position: relative; }
.photo-rail { display: none; }
@media (min-width: 1360px) {
  .photo-rail { --photo-w: min(240px, calc((100vw - 976px) / 2 - 48px));
    display: block; position: absolute; left: 24px; width: var(--photo-w); }
  /* pinned low on screen (just above the sticky join bar, photo is 2.11x as tall as wide), so at the end of the
     rail it comes to rest beside the "Rather talk it through?" card */
  .photo-rail .host { position: sticky; top: max(72px, calc(100vh - 96px - 2.11 * var(--photo-w))); display: block; }
  .photo-rail .host img { width: 100%; height: auto; }
  .photo-rail .host figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    align-items: center; text-align: center; padding: 0 0 6px;
  }
}