/* One screen, no scrolling: the mascot, the line, two buttons, the video. Dark only. */
:root {
  --background: oklch(0.135 0 0);
  --foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.29 0 0);
  --border: oklch(1 0 0 / 12%);
  --ring: oklch(0.556 0 0);
  --lift: 1.16;           /* hover for a fill that matches the page */
  --lift-inverted: 0.9;   /* hover for a fill that opposes it */
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  margin: 0; background: var(--background); color: var(--foreground);
  font-family: "Figtree", ui-sans-serif, system-ui, sans-serif; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Text on the left, the video on the right; stacked on narrow screens. */
.page {
  height: 100dvh; max-width: 1360px; margin: 0 auto; display: flex; align-items: center; gap: clamp(32px, 5vw, 88px);
  padding: clamp(20px, 5vh, 56px) clamp(16px, 4vw, 56px);
}
/* A fixed width, so an opening answer never widens the column and squeezes the video. */
.hero-copy { flex: 0 0 clamp(320px, 32vw, 460px); display: flex; flex-direction: column; align-items: flex-start; }
.mascot-home { width: clamp(96px, 15vh, 140px); aspect-ratio: 1; flex: none; visibility: hidden; }
.title {
  margin: clamp(8px, 2vh, 20px) 0 0; font-size: clamp(26px, 4.4vh, 42px); font-weight: 400;
  letter-spacing: -0.025em; line-height: 1.12;
}

/* Pill buttons: brightness lift on hover and a 1px press. Icon buttons are round. */
.cta-row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; margin-top: clamp(16px, 3vh, 28px); }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: filter .2s ease-out, transform .15s ease-out; user-select: none;
}
.pill:active { transform: translateY(1px); }
.pill-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.pill-primary:hover { filter: brightness(var(--lift-inverted)); }
.pill-neutral { background: var(--secondary); color: var(--foreground); }
.pill-neutral:hover { filter: brightness(var(--lift)); }
.pill .lucide { width: 16px; height: 16px; }
.pill-icon { width: 44px; padding: 0; }
.pill-icon svg { width: 18px; height: 18px; transition: transform .2s ease-out; }
.pill-icon:hover svg { transform: scale(1.08); }

/* FAQ under the buttons: one answer open at a time, opening smoothly. */
:root { interpolate-size: allow-keywords; }
/* min-height is set by js/faq.js to the height with the tallest answer open, so opening one never
   moves the text above it. */
.faq { width: 100%; margin-top: clamp(20px, 4vh, 40px); }
.faq.measuring details::details-content { transition: none; }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px;
  font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; user-select: none;
  color: oklch(0.985 0 0 / 0.86); transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover, .faq details[open] summary { color: var(--foreground); }
.faq summary .lucide { width: 16px; height: 16px; flex: none; opacity: .6; transition: transform .25s ease-out; }
.faq details[open] summary .lucide { transform: rotate(180deg); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .25s ease-out, content-visibility .25s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq p { margin: 0 0 12px; padding: 0 2px; font-size: 13.5px; line-height: 1.55; color: oklch(0.985 0 0 / 0.6); }

/* The video takes whatever height is left, at its own shape. */
.video-frame {
  flex: 1 1 auto; align-self: stretch; min-width: 0; min-height: 0;
  display: flex; align-items: center; justify-content: center; container-type: size;
}
@media (max-width: 860px) {
  html, body { overflow: auto; }
  .page { height: auto; min-height: 100dvh; flex-direction: column; align-items: stretch; gap: 20px; }
  .hero-copy { flex: none; width: 100%; max-width: 480px; margin: 0 auto; align-items: center; text-align: center; }
  .cta-row { justify-content: center; }
  .faq { text-align: left; }
  .video-frame { flex: none; container-type: normal; }
  .video-frame video { width: 100%; }
}
.video-frame video {
  display: block; width: min(1200px, 100cqw, 100cqh * 704 / 628); height: auto;
  aspect-ratio: 704 / 628; border-radius: 16px; border: 1px solid var(--border); background: #0b0b0d;
  box-shadow: 0 40px 120px -40px rgba(120, 120, 255, .22);
}

/* The mascot: a WebGL jelly on a layer over the whole window (js/jelly.js). */
.jelly { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }
.over-jelly, .over-jelly * { cursor: grab; }
.is-grabbing, .is-grabbing * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }