:root {
  /* Brand: the logo's cyan and blue on a cool paper. */
  --paper: #f4f6f7;
  --ink: #12161a;
  --sub: #5d656c;
  --cyan: #5ce1e6;
  --blue: #004aad;
  --sky: #8fb4ff;
  --pad: clamp(20px, 3.2vw, 48px);
  --sans: "Google Sans Flex", sans-serif;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--cyan); color: var(--ink); }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

#scene {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: block;
  touch-action: none;
}

/* ---------- top bar ---------- */

.top {
  position: fixed;
  inset: 0 0 auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 24px;
  padding: calc(var(--pad) * 0.75) var(--pad) 0;
  pointer-events: none;
  z-index: 2;
}
.top > * { pointer-events: auto; }

/* Paper halo so the line drawings passing underneath never fight the text. */
.headline, .brand, .legal {
  text-shadow: 0 0 6px var(--paper), 0 0 14px var(--paper), 0 0 24px var(--paper);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  font-weight: 800;
  font-size: 25px;
  letter-spacing: -1.4px;
  padding-top: 4px;
}
.brandmark { display: block; width: 34px; height: 34px; }
.brand-dot { color: var(--blue); transition: color 0.3s; }

.headline {
  text-align: center;
  font-weight: 780;
  font-size: clamp(28px, 2.6vw, 40px);
  letter-spacing: -0.035em;
}
/* Every line is the same fixed height, so the rotating word and the ✳ can't change the rhythm. */
.headline .line {
  display: block;
  height: 1.1em;
  line-height: 1.1em;
  white-space: nowrap;
}

.role {
  display: inline-block;
  color: var(--blue);
  perspective: 600px;
  will-change: transform, opacity;
}
.role.is-out { animation: role-out 0.28s cubic-bezier(.55,.05,.8,.42) both; }
.role.is-in { animation: role-in 0.44s cubic-bezier(.18,.78,.25,1) both; }
@keyframes role-out { to { opacity: 0; transform: translateY(-0.4em) rotateX(72deg); filter: blur(4px); } }
@keyframes role-in { from { opacity: 0; transform: translateY(0.45em) rotateX(-70deg); filter: blur(4px); } }

/* The ✳ hangs off the word's right edge without adding width, so the word itself stays centred. */
.role-wrap { position: relative; display: inline-block; }
.spin {
  position: absolute;
  left: 100%;
  top: 0.36em;
  margin-left: 0.25em;
  font-size: 0.62em;
  line-height: 1;
  font-weight: 500;
  color: #8a939b;
  animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.pills { display: flex; gap: 10px; justify-self: end; }

.pill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  background: var(--bg);
  color: var(--fg);
  transition: color 0.35s cubic-bezier(.2,.8,.2,1), background 0.4s;
}
/* Hover: the fill colour rises from the bottom; the button itself never moves. */
.pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fill);
  transform: translateY(101%);
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
}
.pill:hover::before, .pill:focus-visible::before { transform: translateY(0); }
.pill:hover, .pill:focus-visible { color: var(--fill-fg); }

.pill--dark { --bg: var(--ink); --fg: #fff; --fill: var(--cyan); --fill-fg: var(--ink); }
.pill--light { --bg: #fff; --fg: var(--ink); --fill: var(--ink); --fill-fg: #fff; box-shadow: inset 0 0 0 1px #dfe3e7; }
.pill--close { --bg: #1e2328; --fg: #fff; --fill: var(--cyan); --fill-fg: var(--ink); display: none; }

/* ---------- the window (colour lens) ---------- */

/* Transparent: the canvas draws the black rounded window and the colour pass behind it,
   reading this element's rect every frame. */
.window {
  position: fixed;
  left: 50%;
  top: 54%;
  width: min(37vw, 580px);
  aspect-ratio: 520 / 334;
  translate: -50% -50%;
  border-radius: 24px;
  z-index: 1;
  color: #fff;
  transition: width 0.7s cubic-bezier(.2,.8,.2,1);
}
.window:hover { width: min(42vw, 660px); }

/* ---------- the vision screen (window opened) ---------- */

.vision {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  color: #fff;
  visibility: hidden;
  transition: visibility 0s 0.4s;
}
.vision__statement {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  top: 38%;
  translate: 0 -50%;
}
.vision__intro, .vision__tail {
  font-size: clamp(18px, 1.9vw, 28px);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.vision__title {
  max-width: 15.5em;
  margin: 0.12em 0 0.18em;
  font-size: clamp(38px, 5.4vw, 84px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.05em;
}
.vision__title em { font-style: normal; }
.vision__title .people { color: var(--sky); }
.vision__title .ai { color: var(--cyan); }
.vision__body {
  position: absolute;
  left: 38%;
  bottom: calc(var(--pad) * 1.6);
  max-width: 500px;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.vision__intro, .vision__tail, .vision__body, .vision__title { text-shadow: 0 2px 28px rgba(0,0,0,0.55); }

/* Reveal pieces: each word rises out of its own line mask; the other blocks fade up. */
/* The mask is padded well past ascenders/descenders (p, g, commas) so nothing gets clipped once it's in. */
.vision .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.1em 0.06em 0.24em;
  margin: -0.1em -0.06em -0.24em;
}
.vision .w > span { display: inline-block; transform: translateY(140%); transition: transform 0.25s ease-in; }
.vision__intro, .vision__tail, .vision__body {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.25s, transform 0.25s;
}

body.is-open .vision { visibility: visible; transition: none; }
body.is-open .vision .w > span {
  transform: none;
  transition: transform 0.9s cubic-bezier(.16,1,.3,1) calc(0.75s + var(--i) * 28ms);
}
body.is-open .vision__intro, body.is-open .vision__tail, body.is-open .vision__body {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s calc(var(--d) + 0.75s), transform 0.9s cubic-bezier(.16,1,.3,1) calc(var(--d) + 0.75s);
}
.vision__intro { --d: 0s; }
.vision__tail { --d: 0.45s; }
.vision__body { --d: 0.6s; }

/* While open: the home copy steps aside, the chrome turns light-on-dark. */
.headline, .lede, .window { transition: opacity 0.35s, width 0.7s cubic-bezier(.2,.8,.2,1); }
body.is-open .headline, body.is-open .lede { opacity: 0; pointer-events: none; }
body.is-open .window { pointer-events: none; }
/* .is-dark lands once the growing window has reached the edges (main.js), and leaves at once on close. */
body.is-dark .brand, body.is-dark .legal { color: #fff; text-shadow: none; }
body.is-dark .brand-dot { color: var(--cyan); }
body.is-dark .pill--dark { --bg: #fff; --fg: var(--ink); }
.brand, .legal { transition: color 0.3s; }
body.is-open .pill--light { display: none; }
body.is-open .pill--close { display: inline-flex; }

/* ---------- bottom ---------- */

.bottom {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 0 var(--pad) calc(var(--pad) * 0.75);
  pointer-events: none;
  z-index: 2;
}
.bottom > * { pointer-events: auto; }

.lede {
  max-width: 420px;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink);
}
/* Highlighter: a cyan band per line that touches the next one, like a marker over the text. */
.lede span {
  background: var(--cyan);
  padding: 0.1em 0.18em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lede strong { font-weight: 700; }

.legal {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  white-space: nowrap;
}
.legal a:hover { text-decoration: underline; }

/* ---------- early access modal ---------- */

.modal {
  margin: auto;   /* the global reset removes the dialog's default centring */
  width: min(460px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 40px 120px rgba(18, 22, 26, 0.28), 0 0 0 1px rgba(18, 22, 26, 0.04);
  overflow: hidden;
}
.modal[open] { animation: modal-in 0.5s cubic-bezier(.16,1,.3,1); }
.modal::backdrop { background: rgba(18, 22, 26, 0.38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal[open]::backdrop { animation: fade-in 0.4s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(24px) scale(0.97); } }
@keyframes fade-in { from { opacity: 0; } }

/* Header: a small piece of the black window — grid, logo, the ✳. */
.modal__hero {
  position: relative;
  height: 132px;
  background:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px) 0 0 / 34px 34px,
    #12161a;
}
.modal__hero img { position: absolute; left: 28px; bottom: 24px; width: 44px; height: 44px; }
.modal__hero .star {
  position: absolute;
  right: 30px;
  top: 50%;
  translate: 0 -50%;
  font-size: 64px;
  line-height: 1;
  color: var(--cyan);
  animation: spin 14s linear infinite;
}
.modal__x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}
.modal__x:hover { background: rgba(255,255,255,0.24); }

.modal__body { padding: 26px 28px 26px; }
.modal__kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.modal__title { margin: 8px 0 10px; font-size: 32px; font-weight: 750; line-height: 1.05; letter-spacing: -0.045em; }
.modal__sub { font-size: 15px; line-height: 1.45; color: var(--sub); margin-bottom: 20px; }
.modal__fine { margin-top: 12px; font-size: 12px; color: #9aa2a9; }

.signup {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 5px 5px 5px 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #dfe3e7;
  transition: box-shadow 0.25s;
}
.signup:focus-within { box-shadow: inset 0 0 0 2px var(--blue); }
.signup input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); }
.signup input::placeholder { color: #9aa2a9; }
.signup .pill { height: 42px; flex-shrink: 0; }
.signup .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup.is-busy { opacity: 0.6; pointer-events: none; }
.signup__msg { margin-top: 10px; font-size: 13px; color: #c0392b; }
.signup__msg:empty { display: none; }
.signup__msg a { text-decoration: underline; }

.modal__done { padding: 26px 28px 28px; }
.modal__done p:not(.modal__kicker) { font-size: 15px; line-height: 1.45; color: var(--sub); margin-bottom: 20px; }
.modal__done b { color: var(--ink); word-break: break-all; }
.modal.is-done .modal__body { display: none; }
.modal:not(.is-done) .modal__done { display: none; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- small screens ---------- */

/* ---------- ?og: the 1200×630 social card (screenshotted into og.png) ---------- */

.og-card { display: none; }
body.og .pills, body.og .bottom { display: none; }
body.og .top { padding: 52px 64px 0; }
body.og .brand { font-size: 30px; }
body.og .brandmark { width: 40px; height: 40px; }
body.og .headline {
  position: fixed;
  left: 64px;
  top: 160px;
  text-align: left;
  font-size: 53px;
}
body.og .window, body.og .window:hover {
  left: auto;
  right: 64px;
  top: 50%;
  translate: 0 -50%;
  width: 430px;
  aspect-ratio: 430 / 500;
  border-radius: 28px;
}
body.og .og-card { display: block; position: fixed; left: 64px; top: 368px; bottom: 52px; z-index: 2; }
body.og .og-tag { font-size: 25px; line-height: 1.4; letter-spacing: -0.02em; font-weight: 500; }
body.og .og-tag span { background: var(--cyan); padding: 0.08em 0.2em; }
body.og .og-url { position: absolute; bottom: 0; left: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--blue); }

@media (max-width: 980px) {
  .top { grid-template-columns: 1fr auto; row-gap: 26px; }
  .headline { grid-column: 1 / -1; grid-row: 2; font-size: clamp(30px, 6.6vw, 48px); }
}

@media (max-width: 640px) {
  /* One button fits on phones: Early access, styled as the primary. */
  .pills .pill--dark { display: none; }
  .pills .pill--light { --bg: var(--ink); --fg: #fff; --fill: var(--cyan); --fill-fg: var(--ink); box-shadow: none; }
  body.is-dark .pills .pill--dark { display: inline-flex; }
  .pill { height: 36px; padding: 0 16px; }
  .brand { font-size: 22px; }
  .headline { font-size: clamp(24px, 7.2vw, 40px); }
  .window, .window:hover { width: 86vw; top: 57%; }
  .vision__statement { top: 34%; }
  .vision__body { left: var(--pad); right: var(--pad); bottom: calc(var(--pad) * 3.2); font-size: 14px; }
  .bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .window, .pill, .pill::before { transition: none; }
  .spin { animation: none; }
}