/* Agibot waitlist
   Layout: one black screen. The pitch and the form sit at the top; Agibot's head rises from the
   bottom edge, sized so its eyes always land inside the first viewport. */
:root {
  color-scheme: dark;

  /* Color. Pure black so the render's backdrop and the page are one surface. */
  --night: #000;
  --panel: #0f0e14;
  --panel-2: #17151e;
  --panel-3: #211e2b;
  --line: rgb(255 255 255 / 0.09);
  --line-2: rgb(255 255 255 / 0.15);
  --ink: #f5f4fa;
  --ink-2: #a9a5b8;
  --ink-3: #75718a;
  --fur: #6b4dff;
  --fur-hi: #a998ff;
  --eye: #0d0814;
  --on: #44d68c;
  --stop: #ff6e6e;

  /* Type */
  --font-display: 'Funnel Display', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  --gutter: clamp(16px, 4vw, 40px);
  /* Width of the mascot render. The page fits it to whatever height is left under the copy. */
  --copy-h: 500px;
  --gw: clamp(600px, min(calc((100svh - var(--copy-h)) / 0.29), max(110vw, 940px)), 1900px);

  /* Motion. Springs from 60fps.design reference shots, sampled into CSS linear(). */
  /* press (0.2, 0.7): duolingo-create-avatar-sheet */
  --spring-press: linear(0, 0.0234, 0.0839, 0.1686, 0.2671, 0.3713, 0.4749, 0.5735, 0.6641, 0.7448, 0.8148, 0.8739, 0.9224, 0.9611, 0.9909, 1.0129, 1.0284, 1.0383, 1.0439, 1.0459, 1.0454, 1.0429, 1.0393, 1.0349, 1.0301, 1.0253, 1.0207, 1.0164, 1.0126, 1.0093, 1.0064, 1.0041, 1.0022, 1.0007, 0.9996, 0.9988, 0.9983, 0.998, 0.9979, 0.9979, 1);
  --dur-press: 292ms;
  /* snappy (0.25, 0.72): dropset-subscription-tabs-switch-interaction */
  --spring-snappy: linear(0, 0.016, 0.0584, 0.1196, 0.1933, 0.2743, 0.3584, 0.4423, 0.5235, 0.6, 0.6708, 0.7349, 0.7919, 0.8419, 0.8849, 0.9213, 0.9514, 0.976, 0.9955, 1.0105, 1.0216, 1.0295, 1.0345, 1.0374, 1.0384, 1.038, 1.0365, 1.0343, 1.0315, 1.0284, 1.0252, 1.022, 1.0188, 1.0159, 1.0131, 1.0106, 1.0084, 1.0064, 1.0047, 1.0033, 1);
  --dur-snappy: 299ms;
  /* bouncy (0.25, 0.5): medium-clap-count-pop */
  --spring-bouncy: linear(0, 0.0421, 0.1497, 0.297, 0.4618, 0.6262, 0.7771, 0.9062, 1.0087, 1.0835, 1.1319, 1.157, 1.1629, 1.1542, 1.1355, 1.1108, 1.0838, 1.0572, 1.033, 1.0126, 0.9965, 0.985, 0.9777, 0.9741, 0.9735, 0.9752, 0.9785, 0.9826, 0.987, 0.9913, 0.9951, 0.9984, 1.0009, 1.0027, 1.0038, 1.0043, 1.0043, 1.004, 1.0034, 1.0027, 1);
  --dur-bouncy: 488ms;
  /* medium (0.45, 0.72): remy-ai-chat-interaction */
  --spring-medium: linear(0, 0.016, 0.0585, 0.1198, 0.1937, 0.2748, 0.359, 0.443, 0.5242, 0.6008, 0.6715, 0.7356, 0.7927, 0.8426, 0.8855, 0.9218, 0.9519, 0.9764, 0.9958, 1.0107, 1.0218, 1.0296, 1.0346, 1.0374, 1.0384, 1.038, 1.0365, 1.0342, 1.0314, 1.0283, 1.0251, 1.0219, 1.0187, 1.0158, 1.013, 1.0105, 1.0083, 1.0063, 1.0046, 1.0032, 1);
  --dur-medium: 538ms;
  /* success (0.48, 0.65): swiggy-purchased-loader-to-check-mark-animation */
  --spring-success: linear(0, 0.027, 0.0964, 0.1931, 0.3047, 0.4215, 0.536, 0.6431, 0.7391, 0.8224, 0.892, 0.9481, 0.9916, 1.0237, 1.0457, 1.0595, 1.0664, 1.068, 1.0658, 1.0607, 1.054, 1.0463, 1.0383, 1.0306, 1.0234, 1.0169, 1.0114, 1.0068, 1.0031, 1.0002, 0.9982, 0.9967, 0.9959, 0.9954, 0.9954, 0.9956, 0.9959, 0.9964, 0.9969, 0.9975, 1);
  --dur-success: 750ms;
  /* rise (0.7, 0.8): the head coming up from the bottom edge */
  --spring-rise: linear(0, 0.018, 0.0647, 0.1307, 0.2083, 0.2917, 0.3765, 0.4594, 0.538, 0.6109, 0.6772, 0.7363, 0.7882, 0.8331, 0.8715, 0.9037, 0.9303, 0.9521, 0.9695, 0.9832, 0.9937, 1.0015, 1.0072, 1.011, 1.0134, 1.0147, 1.0152, 1.015, 1.0143, 1.0133, 1.0122, 1.0109, 1.0096, 1.0084, 1.0072, 1.006, 1.005, 1.0041, 1.0033, 1.0026, 1);
  --dur-rise: 894ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* Animating the measured copy height lets the head resize smoothly when the layout changes. */
@property --copy-h { syntax: '<length>'; inherits: true; initial-value: 500px; }
:root.fitted { transition: --copy-h var(--dur-medium) var(--spring-medium); }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100svh;
  background: radial-gradient(900px 520px at 50% -140px, rgb(107 77 255 / .13), transparent 70%) no-repeat, var(--night);
  color: var(--ink);
  font: 400 1rem/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body::before { /* film grain */
  content: ''; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p, h1, h2, h3, ul { margin: 0; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--fur-hi); outline-offset: 3px; }
::selection { background: var(--fur); color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: 10px; background: #fff; color: #000; font-weight: 600; }
.skip:focus { top: 12px; }
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.label { font-family: var(--font-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }

/* Page frame: the hero fills the first screen; the FAQ and the footer follow it. */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--gutter); position: relative; z-index: 10; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-weight: 650; font-size: 1.125rem; letter-spacing: -.02em; }
.brand img { border-radius: 9px; }
/* Plain text link: solid, bright type; an underline draws in from the left on hover. */
.nav-link {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 2px;
  color: var(--ink); text-decoration: none; font-weight: 550; font-size: .95rem; letter-spacing: -.005em;
  transition: color .2s;
}
.nav-link::after {
  content: ''; position: absolute; left: 2px; right: 2px; bottom: 9px; height: 1.5px; border-radius: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-snappy) var(--spring-snappy);
}
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }
.nav-link:active { color: var(--ink-2); }

/* Load sequence: gleam-intro-text-typewriter-fade-animation, quickened */
/* backwards, not both: once finished, no filter or transform is left on the text. A leftover
   blur(0) makes Chrome clip glyphs that hang outside their box, like the g and the final t. */
.js .load { animation: rise .95s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
/* The icon rises without blur, so it never sits in a filter layer and stays pixel-sharp. */
.js .face.load { animation-name: rise-plain; }
@keyframes rise-plain { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }

/* Pitch */
.pitch {
  position: relative; z-index: 5;
  display: grid; justify-items: center; gap: 22px; text-align: center;
  width: min(820px, 100% - 2 * var(--gutter)); margin-inline: auto;
  padding-top: clamp(20px, 8vh, 96px);
}
.title {
  display: flex; align-items: center; justify-content: center; gap: .2em; flex-wrap: wrap;
  font-family: var(--font-display); font-weight: 640;
  font-size: clamp(3rem, 8.4vw, 6.6rem); line-height: 1; letter-spacing: -.05em;
}
.title .w { display: inline-block; }
.face { display: inline-block; width: .84em; height: .84em; flex-shrink: 0; }
/* The real macOS icon (resources/icon.png): an 824/1024 tile with 185px corners on a padded canvas. */
.face-in {
  position: relative; display: block; width: 100%; height: 100%; cursor: pointer;
  filter: drop-shadow(0 .1em .35em rgb(107 77 255 / .45));
  transition: transform var(--dur-bouncy) var(--spring-bouncy);
}
.face-in::after { content: ''; position: absolute; inset: 0; border-radius: 22.45%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); pointer-events: none; }
.face-in:hover { transform: rotate(-8deg) scale(1.07); }
.face-in.boop { animation: boop var(--dur-bouncy) var(--spring-bouncy); }
@keyframes boop { from { transform: scale(.82, 1.12); } to { transform: none; } }
/* Absolute, so the crop can't collapse margins with .face-in and drift off the outline. */
.face-in img { position: absolute; left: -12.135%; top: -12.135%; width: 124.27%; height: 124.27%; max-width: none; }

@media (max-height: 820px) and (min-width: 700px) {
  .nav { padding-block: 12px; }
  .pitch { gap: 16px; padding-top: 4px; }
  .title { font-size: clamp(3rem, 6.6vw, 5.2rem); }
  .signup { margin-top: 2px; }
}
.lede { max-width: 44ch; color: var(--ink-2); font-size: clamp(1.02rem, 1.35vw, 1.18rem); text-wrap: balance; }

/* Waitlist form. On success the pill itself becomes the confirmation:
   perplexity-loader-animation-morph (button collapses into a round loader),
   toss-otp-successful-animation (input fades, a springy check takes its place) and
   swiggy-purchased-loader-to-check-mark-animation (loader fills and draws the check). */
.signup { width: min(500px, 100%); display: grid; margin-top: 6px; }
.waitlist { display: grid; gap: 8px; }
.field {
  position: relative;
  display: flex; align-items: center; gap: 6px; padding: 6px;
  border-radius: 999px; background: var(--panel); border: 1px solid var(--line-2);
  transition: border-color .4s, box-shadow .4s, background-color .25s;
}
.field:focus-within { border-color: rgb(169 152 255 / .6); box-shadow: 0 0 0 5px rgb(107 77 255 / .16); background: #121019; }
.field input {
  flex: 1; min-width: 0; height: 46px; padding: 0 16px;
  border: 0; background: transparent; outline: 0; color: var(--ink);
  font: 400 1rem var(--font-body);
  transition: opacity .3s, transform .45s var(--ease-out), filter .3s;
}
.field input::placeholder { color: var(--ink-3); }
.submit {
  position: relative; flex-shrink: 0; display: grid; place-items: center; overflow: hidden;
  height: 46px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: #fff; color: #000; font-weight: 600; font-size: .95rem;
  transition: transform var(--dur-press) var(--spring-press), width var(--dur-medium) var(--spring-snappy), padding var(--dur-medium) var(--spring-snappy), background-color .3s, box-shadow .4s;
}
.submit:hover { background: #ebe8f5; }
.submit:active { transform: scale(.95); }
.submit { grid-template-columns: minmax(0, 1fr); } /* the column follows the button's width, so the spinner and check stay centred when it collapses */
.submit > * { grid-area: 1 / 1; }
.submit-label { transition: opacity .18s, transform var(--dur-snappy) var(--spring-snappy); }
.submit-spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgb(0 0 0 / .15); border-top-color: #000;
  opacity: 0; transform: scale(.6);
  transition: opacity .2s, transform var(--dur-snappy) var(--spring-snappy);
}
.submit-check { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; opacity: 0; }
.submit::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes pop { from { transform: scale(.78); } to { transform: scale(1); } }
@keyframes halo { 0% { opacity: 1; box-shadow: 0 0 0 0 rgb(169 152 255 / .75); } 100% { opacity: 0; box-shadow: 0 0 0 18px rgb(169 152 255 / 0); } }

/* 1. loading: the button collapses into a round loader (its width is driven from JS) */
.waitlist:is([data-state='loading'], [data-state='done'], [data-state='joined']) .submit { padding: 0; cursor: default; }
.waitlist:is([data-state='loading'], [data-state='done'], [data-state='joined']) .submit-label { opacity: 0; transform: translateY(-10px); }
.waitlist[data-state='loading'] .submit-spin { opacity: 1; transform: scale(1); animation: spin .7s linear infinite; }
.waitlist[data-state='loading'] .field input { opacity: .45; }

/* 2. done: the loader fills violet and pops, the check draws, the email blurs away */
.waitlist:is([data-state='done'], [data-state='joined']) .submit {
  background: var(--fur); box-shadow: 0 0 0 5px rgb(107 77 255 / .2), 0 8px 24px -8px var(--fur);
}
.waitlist[data-state='done'] .submit { animation: pop var(--dur-success) var(--spring-success); }
.waitlist[data-state='done'] .submit::after { animation: halo .6s var(--ease-out); }
.waitlist:is([data-state='done'], [data-state='joined']) .submit-check { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .34s var(--ease-out) .12s, opacity .1s; }
.waitlist:is([data-state='done'], [data-state='joined']) .field input { opacity: 0; transform: translateX(-12px); filter: blur(6px); pointer-events: none; }

/* 3. joined: the check slides to the start of the pill and one line fades in word by word */
.waitlist[data-state='joined'] .field { border-color: rgb(169 152 255 / .32); box-shadow: 0 0 0 5px rgb(107 77 255 / .08); }
.waitlist[data-state='joined'] .submit {
  position: absolute; left: 6px; top: 6px; width: 46px;
  transition: transform var(--dur-medium) var(--spring-medium), background-color .3s, box-shadow .4s;
}
.field-msg {
  position: absolute; left: 64px; right: 20px; top: 50%; translate: 0 -50%; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
  font-size: .98rem; color: var(--ink); pointer-events: none;
}
.field-msg b { font-weight: 600; }
.field-msg .muted { color: var(--ink-3); }
.field-msg .mw { display: inline-block; white-space: pre; }
.waitlist[data-state='joined'] .field-msg .mw { animation: word-in .55s var(--ease-out) backwards; animation-delay: calc(var(--w) * 55ms + 300ms); }
.waitlist.instant .field-msg .mw { animation: none; }
@keyframes word-in { from { opacity: 0; transform: translateY(6px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.form-note { min-height: 1.35em; font-size: .8125rem; color: var(--ink-3); }
.waitlist[data-state='error'] .form-note { color: var(--stop); }
.form-note.quiet { opacity: 0; }
.waitlist[data-state='error'] .field { border-color: rgb(255 110 110 / .55); box-shadow: 0 0 0 5px rgb(255 110 110 / .1); }
.waitlist.instant *, .waitlist.instant { transition: none !important; }
@media (max-width: 400px) {
  .field input { padding: 0 12px; font-size: .95rem; }
  .submit { padding: 0 16px; font-size: .9rem; }
}

.meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; color: var(--ink-3); font-size: .875rem; }
.meta .roller { color: var(--ink); font-weight: 600; }
.dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }
.meta-count { display: inline-flex; align-items: center; gap: 8px; }
.meta-count .roller { transition: color .5s, text-shadow .5s; }
.meta-count.tick .roller { color: #fff; text-shadow: 0 0 14px rgb(169 152 255 / .9); transition-duration: .08s; }
.live-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--on); box-shadow: 0 0 0 3px rgb(68 214 140 / .16); }
.live-dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--on); opacity: 0; }
.meta-count.tick .live-dot::after { animation: ping 1.1s var(--ease-out); }
@keyframes ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.4); opacity: 0; } }
@media (max-width: 520px) { .meta { flex-direction: column; gap: 2px; } .dot-sep { display: none; } }

/* Rolling digits: push-workout-count-up-animation */
.roller { display: inline-flex; font-variant-numeric: tabular-nums; vertical-align: bottom; }
.roller .col { display: inline-block; height: 1.2em; line-height: 1.2em; overflow: hidden; }
.roller .strip { display: flex; flex-direction: column; transition: transform var(--dur-medium) var(--spring-snappy); }
.roller .strip > span { height: 1.2em; text-align: center; }
.roller .sep { display: inline-block; height: 1.2em; line-height: 1.2em; }

/* Stage: the head rising from the bottom edge */
.stage {
  position: relative; flex: 1 0 auto;
  min-height: calc(var(--gw) * .29);
  margin-top: clamp(8px, 2vh, 28px);
  overflow: hidden;
}
/* The render is cut by the stage's bottom edge. Fading the fur into black hides that cut once
   the page scrolls, so the head reads as rising out of the dark. */
.stage::after {
  content: ''; position: absolute; inset: auto 0 0; height: clamp(56px, 12vh, 132px); z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / .62) 55%, var(--night));
}
.giant, .arcs {
  position: absolute; left: 50%; bottom: calc(var(--gw) * -.135);
  width: var(--gw); aspect-ratio: 16 / 9; margin-left: calc(var(--gw) * -.5);
}
.arcs { width: calc(var(--gw) * 1.3); aspect-ratio: 2080 / 900; margin-left: calc(var(--gw) * -.65); }
.giant { transform-origin: 50% 82%; will-change: transform; cursor: pointer; }
.js .giant { animation: giant-in var(--dur-rise) var(--spring-rise) .35s both; }
@keyframes giant-in { from { translate: 0 34%; } to { translate: 0 0; } }
.giant-img { width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.giant-glow { /* rim light around the head; screen only ever adds light */
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(30% 44% at 49.7% 60%, rgb(118 86 255 / .32), rgb(118 86 255 / .1) 55%, transparent 75%);
  animation: glow 5.2s ease-in-out infinite;
}
@keyframes glow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* Eyes are drawn live over the faceless render (measured against the silhouette). */
.eye { position: absolute; top: 58.9%; left: var(--x); width: 7.6%; aspect-ratio: 122 / 166; translate: -50% -50%; will-change: transform; }
.eye-l { --x: 42.75%; }
.eye-r { --x: 56.63%; }
.eye-ball {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(70% 60% at 42% 34%, #261b38, var(--eye) 72%);
  box-shadow: 0 0 0 .12vw rgb(13 6 30 / .45), 0 .5vw 1.6vw -.3vw rgb(30 6 110 / .7), inset 0 -.6vw 1vw rgb(0 0 0 / .55);
  transition: transform var(--dur-snappy) var(--spring-snappy), opacity .12s;
}
.eye-shine { position: absolute; left: 24%; top: 15%; width: 24%; height: 15%; border-radius: 50%; background: rgb(255 255 255 / .2); filter: blur(1px); transform: rotate(-20deg); }
.eye-happy {
  position: absolute; left: -8%; top: 18%; width: 116%; overflow: visible;
  fill: none; stroke: var(--eye); stroke-width: 15; stroke-linecap: round;
  opacity: 0; transform: translateY(14%) scale(.6);
  transition: opacity .15s, transform var(--dur-bouncy) var(--spring-bouncy);
}
.eye.asleep .eye-ball { transform: scaleY(.06); transition: none; }
.eye.happy .eye-ball { transform: scaleY(.05); opacity: 0; }
.eye.happy .eye-happy { opacity: 1; transform: none; }

/* Line work around the head, after the x.ai reference */
.arcs { overflow: visible; pointer-events: none; z-index: 1; -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 34%); mask-image: linear-gradient(to bottom, transparent 20%, #000 34%); }
.arc { fill: none; stroke: rgb(255 255 255 / .16); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .arc { animation: arc-draw 2.2s cubic-bezier(.6, 0, .2, 1) 1.1s both; }
@keyframes arc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.arc-pulse {
  fill: none; stroke: rgb(169 152 255 / .55); stroke-width: 1.2; vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: arc-pulse 6s cubic-bezier(.2, .7, .3, 1) 3.2s infinite;
}
.arc-pulse.two { animation-delay: 6.2s; }
@keyframes arc-pulse { 0% { opacity: .6; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.14); } }

/* Feature chips orbiting the head */
.chips { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.chip { position: absolute; translate: 0 50%; will-change: transform; }
.chip-in {
  display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 15px;
  border-radius: 999px; background: rgb(17 15 23 / .82); border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px -16px rgb(0 0 0 / .9);
  font-size: .85rem; color: var(--ink-2); white-space: nowrap;
  animation: bob var(--bob, 7s) ease-in-out infinite; animation-delay: var(--bob-d, 0s);
}
.chip-in .ic { color: var(--fur-hi); font-size: 15px; }
.js .chip { animation: chip-in .9s var(--ease-out) backwards; }
.js .c1 { animation-delay: 1.5s; } .js .c2 { animation-delay: 1.65s; } .js .c3 { animation-delay: 1.8s; } .js .c4 { animation-delay: 1.95s; }
@keyframes chip-in { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.on-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--on); box-shadow: 0 0 0 3px rgb(68 214 140 / .18); }
.c1 { right: calc(50% + var(--gw) * .17); bottom: calc(var(--gw) * .25); }
.c2 { left: calc(50% + var(--gw) * .19); bottom: calc(var(--gw) * .22); }
.c3 { right: calc(50% + var(--gw) * .27); bottom: calc(var(--gw) * .13); }
.c4 { left: calc(50% + var(--gw) * .285); bottom: calc(var(--gw) * .1); }
@media (max-width: 1180px) { .c3, .c4 { display: none; } }
@media (max-width: 760px) { .chips { display: none; } }

.burst { position: absolute; left: 50%; bottom: calc(var(--gw) * .27); width: 0; height: 0; z-index: 4; pointer-events: none; }
.burst i { position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--fur-hi); }

/* Below the hero, sections fade up as they arrive: up-ahead-onboarding's staggered text reveal. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform var(--dur-medium) var(--spring-medium); transition-delay: calc(var(--i, 0) * 45ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* FAQ: a heading column and a ruled list (after Linear's and Giga's FAQ sections). */
.faq {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 72px;
  width: min(1120px, 100% - 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(80px, 13vh, 144px) 0 clamp(96px, 16vh, 168px);
}
.faq-head { align-self: start; position: sticky; top: 40px; display: grid; justify-items: start; gap: 16px; }
.faq-title { font-family: var(--font-display); font-weight: 630; font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.02; letter-spacing: -.045em; }
.faq-title span { display: block; color: var(--ink-3); }
.faq-more { color: var(--ink-2); font-size: .95rem; }
.faq-more a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.faq-more a:hover { text-decoration-color: currentColor; }

.faq-list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa.animating { overflow: hidden; }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0; border-radius: 4px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.qa summary::-webkit-details-marker { display: none; }
.qa h3 {
  font-family: var(--font-display); font-weight: 560; font-size: clamp(1.06rem, 1.5vw, 1.2rem); line-height: 1.35; letter-spacing: -.015em;
  color: var(--ink-2); transition: color .2s;
}
.qa summary:hover h3, .qa.is-open h3, html:not(.js) .qa[open] h3 { color: var(--ink); }
/* The plus turns into a cross on a quick spring (bevel-fab-icon-rotate-menu-pop-interaction). */
.qa-plus {
  flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--ink-2);
  transition: rotate var(--dur-snappy) var(--spring-snappy), scale var(--dur-press) var(--spring-press), background-color .2s, border-color .2s, color .2s;
}
.qa-plus svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.qa summary:hover .qa-plus { color: var(--ink); border-color: rgb(255 255 255 / .3); }
.qa summary:active .qa-plus { scale: .88; }
.qa.is-open .qa-plus, html:not(.js) .qa[open] .qa-plus { rotate: 45deg; background: var(--fur); border-color: var(--fur); color: #fff; }
.qa-a { padding: 0 54px 26px 0; }
.qa-a p { max-width: 62ch; color: var(--ink-2); line-height: 1.65; text-wrap: pretty; }

@media (max-width: 900px) {
  .faq { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .faq-head { position: static; }
}
@media (max-width: 560px) {
  .faq { padding-block: 64px 80px; }
  .qa summary { gap: 16px; padding: 19px 0; }
  .qa-a { padding-right: 0; }
}

/* Footer: black at the top, a violet horizon at the bottom (after Antimetal's and Luma's
   gradient footers), with the wordmark sinking into it (after Cosmos). */
.foot {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(56px, 9vh, 96px) var(--gutter) 0;
  background:
    radial-gradient(75% 60% at 50% 100%, rgb(124 92 255 / .5), rgb(84 52 220 / .2) 48%, transparent 76%),
    linear-gradient(to bottom, var(--night), #07050f 34%, #140b33 72%, #26145f);
}
.foot::before { /* hairline that fades out toward the edges */
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 30%, var(--line-2) 70%, transparent);
}
.foot::after { /* the horizon breathes, like the glow around the head */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 50% at 50% 108%, rgb(160 130 255 / .42), transparent 72%);
  animation: glow 6.4s ease-in-out infinite;
}
.foot-row, .foot-base { width: min(1120px, 100%); margin-inline: auto; }
.foot-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 28px 40px; }
.foot-brand { display: grid; justify-items: start; gap: 12px; }
.foot-tag { max-width: 30ch; color: var(--ink-2); font-size: .95rem; text-wrap: balance; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: -6px; }
.foot-base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  margin-top: clamp(36px, 6vh, 64px); padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .75rem; color: var(--ink-2);
}
.foot-link {
  padding: 4px 0; border: 0; background: none; color: var(--ink-2); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px;
  transition: color .2s, text-decoration-color .2s;
}
.foot-link:hover { color: var(--ink); text-decoration-color: currentColor; }
.foot-word {
  display: flex; justify-content: center;
  margin: clamp(16px, 3vw, 40px) 0 -.07em; /* the capitals sink a little into the horizon */
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(4.5rem, 20vw, 20rem); line-height: .82; letter-spacing: -.035em;
  user-select: none; pointer-events: none;
}
/* Each letter carries its own gradient. The padding (cancelled by the margin) keeps the whole
   glyph inside the box, since background-clip: text paints nothing outside it. */
.foot-word span {
  display: inline-block; padding: .14em .1em; margin: -.14em -.1em;
  background: linear-gradient(to bottom, rgb(255 255 255 / .94) 22%, rgb(210 198 255 / .66) 55%, rgb(150 122 255 / .22) 86%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.js .foot-word span { opacity: 0; }
.js .foot-word.in span { opacity: 1; animation: letter-rise var(--dur-rise) var(--spring-rise) backwards; animation-delay: calc(var(--i) * 55ms + 100ms); }
@keyframes letter-rise { from { opacity: 0; transform: translateY(40%); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }
@media (max-width: 560px) { .foot-nav { gap: 4px 22px; } }

/* Cookie consent: a small glass card, like the feature chips, rising in on the page's spring.
   Decline and Accept carry equal weight, so saying no is as easy as saying yes. */
.consent {
  position: fixed; z-index: 60; left: var(--gutter); bottom: max(16px, env(safe-area-inset-bottom));
  width: min(392px, 100% - 2 * var(--gutter));
  display: grid; gap: 14px; padding: 16px 16px 16px 18px;
  border-radius: 18px; background: rgb(17 15 23 / .88); border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / .9);
  color: var(--ink-2); font-size: .9rem; line-height: 1.5;
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity .25s var(--ease-out), transform var(--dur-medium) var(--spring-medium);
}
.consent.in { opacity: 1; transform: none; }
.consent-actions { display: flex; justify-content: flex-end; gap: 8px; }
.consent-btn {
  height: 36px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2); background: rgb(255 255 255 / .04); color: var(--ink);
  font-size: .875rem; font-weight: 550;
  transition: background-color .2s, border-color .2s, scale var(--dur-press) var(--spring-press);
}
.consent-btn:hover { background: rgb(255 255 255 / .09); border-color: rgb(255 255 255 / .3); }
.consent-btn:active { scale: .95; }
@media (max-width: 560px) { .consent { right: var(--gutter); width: auto; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .arc-pulse { display: none; }
}