/* Spica marketing site — one pager at `/`.

   Everything is measured in the Figma frame's 1920-wide space. --u is one
   Figma pixel at the current window width, so `calc(102.32 * var(--u))` is
   102.32px on a 1920 window and scales with it. Values keep their decimals
   on purpose: they are read off the frame (Spica Home Page, node 25-5891). */

:root {
  --u: calc(100vw / 1920);
  --orange: #ff3c02;
  --ink: #010101;
  --paper: #fefefc;
  --f-display: 'Parkinsans', system-ui, sans-serif;
  --f-ui: 'Google Sans Flex', 'Google Sans', system-ui, sans-serif;
  --f-serif: 'Instrument Serif', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.site {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--f-display);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
:where(.site) a { color: inherit; text-decoration: none; }
:where(.site) img { display: block; }
/* every picture here is sized from the frame; a host's img { max-width: 100% }
   would squash the ones wider than their box (the ABC up/down pair) */
.site img { max-width: none; }
:where(.site) :is(h1, p) { margin: 0; font-weight: 400; }

/* every fold is one window tall */
.fold {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* ---------- loading: two kinds of dissolve ----------
   The ground and the pictures arrive together as one layer; every other
   element dissolves in on its own, one after the next (--i). */
.hero-media { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.is-ready .hero-media { opacity: 1; }
[data-reveal] { opacity: 0; transition: opacity .8s ease calc(.35s + var(--i, 0) * .18s); }
.is-ready [data-reveal] { opacity: 1; }

/* ================= general menu (Figma 811:1945) ================= */
.gm {
  position: fixed;
  z-index: 50;
  /* level with the opening lockup: same top and same height */
  top: calc(68.33 * var(--u));
  left: 50%;
  width: calc(1598 * var(--u));
  height: calc(116.519 * var(--u));
  padding: calc(20 * var(--u)) calc(34 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #000;
  border-radius: calc(17.93 * var(--u));
  color: #fff;
  pointer-events: none;
  transform: translateX(-50%);
  /* opens from its left edge, closes back into it */
  clip-path: inset(0 100% 0 0 round calc(17.93 * var(--u)));
  /* closing is the opening played backwards: the items leave last-in first,
     then the bar rolls back to its left edge (1.44s in all, like opening) */
  transition: clip-path 1s cubic-bezier(.65, 0, .35, 1) .44s, visibility 0s linear 1.44s;
  visibility: hidden;
}
.gm-on .gm {
  pointer-events: auto; visibility: visible;
  clip-path: inset(0 0% 0 0 round calc(17.93 * var(--u)));
  transition: clip-path 1s cubic-bezier(.65, 0, .35, 1), visibility 0s;
}
/* its contents follow the opening edge in one after another — the logo, each
   link, Log in, Start — and leave in the reverse order */
.gm-logo, .gm-links > a, .gm-account > a {
  opacity: 0; transform: translateX(calc(-24 * var(--u)));
  transition: opacity .4s ease calc(1.44s - var(--gd) - .4s), transform .5s cubic-bezier(.64, 0, .78, 0) calc(1.44s - var(--gd) - .5s);
}
.gm-on .gm-logo, .gm-on .gm-links > a, .gm-on .gm-account > a {
  opacity: 1; transform: none;
  transition: opacity .4s ease var(--gd), transform .5s cubic-bezier(.22, 1, .36, 1) var(--gd);
}
.gm-logo { --gd: .2s; }
.gm-links > a:nth-child(1) { --gd: .4s; }
.gm-links > a:nth-child(2) { --gd: .48s; }
.gm-links > a:nth-child(3) { --gd: .56s; }
.gm-links > a:nth-child(4) { --gd: .64s; }
.gm-links > a:nth-child(5) { --gd: .72s; }
.gm-account > a:nth-child(1) { --gd: .84s; }
.gm-account > a:nth-child(2) { --gd: .94s; }
/* when the script drives the menu (site.js), it owns the clip and the items */
.gm.is-live, .gm.is-live .gm-logo, .gm.is-live .gm-links > a, .gm.is-live .gm-account > a { transition: none !important; }
.gm.is-live { visibility: visible; }
.gm.is-live .gm-logo, .gm.is-live .gm-links > a, .gm.is-live .gm-account > a { opacity: 1; transform: none; }
.gm-logo img { width: calc(322 * var(--u)); height: calc(62.103 * var(--u)); }
.gm-links {
  display: flex;
  align-items: center;
  gap: calc(37.652 * var(--u));
  font: 400 calc(17.571 * var(--u)) / 1 var(--f-display);
  letter-spacing: calc(.1757 * var(--u));
  white-space: nowrap;
}
.gm-account { display: flex; align-items: center; gap: calc(37.652 * var(--u)); }
/* phone-only pieces of the menu (shown in the phone rules) */
.gs-short, .gm-burger, .gmp, .gmp-join { display: none; }
.gm-login {
  display: flex;
  align-items: center;
  gap: calc(6.275 * var(--u));
  font: 400 calc(17.571 * var(--u)) / 1 var(--f-ui);
  letter-spacing: calc(.1757 * var(--u));
  white-space: nowrap;
}
.gm-login img { width: calc(23.846 * var(--u)); height: calc(23.846 * var(--u)); }
.gm-start {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(17.571 * var(--u)) calc(30.121 * var(--u));
  background: #fff;
  color: #000;
  border-radius: calc(16.316 * var(--u));
  font: 400 calc(18.826 * var(--u)) / 1 var(--f-ui);
  letter-spacing: calc(.753 * var(--u));
  white-space: nowrap;
}

/* ================= fold 1 — hero (Figma 811:1896) ================= */
/* the orange fills exactly one window; the light band (92) sits below it, so
   the picture's foot running into the band only shows once you scroll */
.fold.hero { height: calc(100vh + 92 * var(--u)); height: calc(100svh + 92 * var(--u)); }
/* before the orange ground dissolves in, the fold is the next fold's grey,
   so it never flashes white */
.fold.hero { background: #f8f8f8; }
.hero-ground { position: absolute; inset: 0; background: var(--orange); }
/* the fold ends in a light band (Figma 839:4168, 92 high), the next fold's
   grey; the picture runs on past the orange into it */
.hero-ground::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(92 * var(--u)); background: #f8f8f8; }

/* the picture block: 1187 × 1093, flush right, standing on the fold's floor
   (the frame is 1093 high, as corrected) */
.hero-art {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(1187 * var(--u));
  height: calc(1093 * var(--u));
  overflow: hidden;
}
.hero-art > * { position: absolute; }
.ha-paper {
  left: calc(396 * var(--u)); top: calc(593 * var(--u));
  width: calc(791 * var(--u)); height: calc(500 * var(--u));
  background: #f8f8f8; overflow: hidden;
}
.ha-paper p {
  position: absolute; left: calc(4 * var(--u)); top: calc(-19 * var(--u));
  width: calc(1142.56 * var(--u));
  font: 400 calc(157.134 * var(--u)) / calc(127.254 * var(--u)) var(--f-serif);
  color: #f4e8e4;
}
/* two black pixels stepping down from under the cat (Figma 849:4173/4174) */
.ha-paper .ha-px5, .ha-paper .ha-px6 { position: absolute; background: #020202; }
.ha-px5 { left: calc(139 * var(--u)); top: calc(425 * var(--u)); width: calc(148.2 * var(--u)); height: calc(21.5 * var(--u)); }
.ha-px6 { left: calc(287.2 * var(--u)); top: calc(446.5 * var(--u)); width: calc(21.5 * var(--u)); height: calc(21.5 * var(--u)); }
.ha-strip { left: 0; top: calc(932 * var(--u)); width: calc(349 * var(--u)); height: calc(69 * var(--u)); background: #f8f8f8; }

/* the same collage twice, turned two ways (as in the frame) */
.ha-collage-a {
  left: calc(652 * var(--u)); top: calc(685 * var(--u));
  width: calc(446 * var(--u)); height: calc(333 * var(--u));
  display: flex; align-items: center; justify-content: center;
}
.ha-collage-a img {
  flex: none;
  width: calc(333 * var(--u)); height: calc(446 * var(--u));
  object-fit: fill;
  transform: rotate(-90deg) scaleY(-1);
}
.ha-collage-b {
  left: calc(76 * var(--u)); top: calc(753 * var(--u));
  width: calc(499 * var(--u)); height: calc(377 * var(--u));
  display: flex; align-items: center; justify-content: center;
}
.ha-collage-b img {
  flex: none;
  width: calc(377 * var(--u)); height: calc(499 * var(--u));
  object-fit: cover;
  transform: rotate(90deg);
}
/* the rays sit in their own full-height layer (same right/bottom anchor as the
   picture block) and run on up past its top, so on any window height they
   reach the top of the screen */
.hero-rays { position: absolute; right: 0; top: 0; bottom: 0; width: calc(1187 * var(--u)); overflow: hidden; pointer-events: none; }
.ha-rays { position: absolute; left: calc(702 * var(--u)); bottom: calc((1093 - 477.387) * var(--u)); width: calc(542.186 * var(--u)); height: calc(3576.387 * var(--u)); }
.ha-px1 { left: calc(58 * var(--u)); top: calc(735 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); background: #db1900; }
.ha-px2 { left: calc(58 * var(--u)); top: calc(753 * var(--u)); width: calc(18 * var(--u)); height: calc(17 * var(--u)); background: #ff6100; }
.ha-px3 { left: calc(39 * var(--u)); top: calc(770 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); background: #e3111f; }
.ha-px4 { left: calc(14 * var(--u)); top: calc(735 * var(--u)); width: calc(17 * var(--u)); height: calc(18 * var(--u)); background: #970094; }
.ha-cat { left: calc(186 * var(--u)); top: calc(144 * var(--u)); width: calc(836 * var(--u)); height: calc(874 * var(--u)); }
.ha-star { top: calc(488.78 * var(--u)); width: calc(38.097 * var(--u)); height: calc(38.097 * var(--u)); }
.ha-star-l { left: calc(484.95 * var(--u)); }
.ha-star-r { left: calc(696.38 * var(--u)); }
.ha-kanji { left: calc(185.88 * var(--u)); top: calc(587.79 * var(--u)); width: calc(298.11 * var(--u)); height: calc(439.07 * var(--u)); }

/* the opening lockup — the header until scrolling begins */
/* pinned to the top of the window, so it stays in place while it folds away
   on scroll (the general menu only takes over once it has closed) */
/* the lockup stands on the general menu's left edge (the menu is 1598 wide and
   centred, so its edge is at 161; the lockup's own drawing starts at 102), so
   the switch between them never jumps sideways */
.hero-lockup { position: fixed; left: calc(59 * var(--u)); top: 0; width: calc(100% - 59 * var(--u)); height: calc(200 * var(--u)); z-index: 49; pointer-events: none; }
/* without the scripted birth (no JS, reduced motion) it simply fades away */
.hero-lockup:not(.is-live) { transition: opacity .3s ease; }
.scrolled .hero-lockup:not(.is-live) { opacity: 0; }
.hl-by > span { display: inline-block; }
.hl-mark { transform-origin: 50% 50%; }
.hl-mark { display: block; }
.hl-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* the figure's parts grow from their own middles (site.js draws them in) */
.mk-p { transform-box: view-box; }
.mk-head { transform-origin: 58.2167px 24.8159px; }
.mk-b { transform-origin: 58.2px 52px; }
.mk-l { transform-origin: 57.61px 72px; }
.hl-caret { transform-origin: 50% 50%; }
.hl-join { transform-origin: 0 50%; } /* each connector grows out of its left middle, from the capsule before it */
.hero-lockup > * { position: absolute; }
/* the lockup as rebuilt in Figma (855:4305): capsules joined by the new
   black connectors (the orange notches are gone) */
.hl-pill  { left: calc(227.07 * var(--u)); top: calc(68.33 * var(--u)); width: calc(339.025 * var(--u)); height: calc(116.519 * var(--u)); border-radius: calc(65.206 * var(--u)); background: var(--ink); }
.hl-box   { left: calc(575.92 * var(--u)); top: calc(68.33 * var(--u)); width: calc(362.553 * var(--u)); height: calc(116.519 * var(--u)); border-radius: calc(17.926 * var(--u)); background: var(--ink); }
.hl-caret { left: calc(1262.54 * var(--u)); top: calc(68.33 * var(--u)); width: calc(52.658 * var(--u)); height: calc(116.519 * var(--u)); border-radius: calc(17.926 * var(--u)); background: var(--ink); }
.hl-join  { display: block; width: calc(12.793 * var(--u)); height: calc(28.397 * var(--u)); }
.hl-join-a { left: calc(216 * var(--u)); top: calc(112.7 * var(--u)); }
.hl-join-b { left: calc(564 * var(--u)); top: calc(112.7 * var(--u)); }
.hl-word  { left: calc(288.58 * var(--u)); top: calc(104 * var(--u)); width: calc(212.678 * var(--u)); height: calc(45.155 * var(--u)); }
.hl-for, .hl-by {
  top: calc(94.1 * var(--u));
  width: calc(309 * var(--u)); height: calc(54.45 * var(--u));
  font: 400 calc(42.938 * var(--u)) / normal var(--f-display);
  white-space: nowrap;
}
.hl-for { left: calc(613 * var(--u)); color: #fff; }
.hl-by  { left: calc(959 * var(--u)); color: var(--ink); }
.hl-mark { left: calc(102 * var(--u)); top: calc(68.33 * var(--u)); width: calc(116.348 * var(--u)); height: calc(116.348 * var(--u)); }

.hero-title {
  position: absolute; z-index: 2;
  left: calc(108 * var(--u)); top: calc(283 * var(--u));
  width: calc(999 * var(--u));
  font: 400 calc(102.32 * var(--u)) / 1.21 var(--f-display);
  color: var(--paper);
}
.hero-sub {
  position: absolute; z-index: 2;
  left: calc(113 * var(--u)); top: calc(563 * var(--u));
  width: calc(620 * var(--u));
  /* 8% under the Figma size, so the line sits in two rows */
  font: 500 calc(22.676 * var(--u)) / 1.45 var(--f-display);
  letter-spacing: calc(.454 * var(--u));
  color: #000;
}
.hero-cta {
  position: absolute; z-index: 2;
  left: calc(108 * var(--u)); top: calc(750 * var(--u));
  width: calc(289 * var(--u)); height: calc(88 * var(--u));
  padding: calc(19.637 * var(--u)) calc(33.916 * var(--u));
  display: flex; align-items: center; justify-content: center;
  gap: calc(16.371 * var(--u));
  background: var(--ink);
  border-radius: calc(68.304 * var(--u));
  color: #fff;
  font: 400 calc(21.039 * var(--u)) / 1 var(--f-display);
  letter-spacing: calc(.8416 * var(--u));
  white-space: nowrap;
}
.hero-cta img { width: calc(22.442 * var(--u)); height: calc(22.442 * var(--u)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-media, [data-reveal], .gm, .hero-lockup { transition: none !important; }
}

/* ================= fold 2 — what it is (Figma 811:2038) =================
   The frame is 1920 × 1554 (more air above and below, as corrected), taller
   than most windows, so this fold uses its
   own unit --k: the frame scaled to fit the window's width *and* height,
   centred on the fold's own grey. */
.what {
  --k: min(var(--u), calc(100svh / 1554));
  background: #f8f8f8;
}
.what-stage {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(1920 * var(--k)); height: calc(1554 * var(--k));
  transform: translate(-50%, -50%);
}
.what-title {
  position: absolute; left: 0; right: 0; top: calc(256.06 * var(--k));
  margin: 0; text-align: center;
  font: 500 calc(72 * var(--k)) / 1 var(--f-display);
  color: #000;
  white-space: nowrap;
}
/* progress: one dot per tab; the open tab's dot stretches into a pill that
   fills over the 3s before the next tab opens on its own */
.what-dots {
  position: absolute; left: 50%; top: calc(419 * var(--k)); translate: -50% 0; /* 50 more air above the dots… */
  display: flex; align-items: center; gap: calc(12 * var(--k));
}
.wd {
  all: unset; cursor: pointer; position: relative; overflow: hidden;
  width: calc(12 * var(--k)); height: calc(12 * var(--k)); border-radius: 999px;
  background: rgba(0, 0, 0, .18);
  transition: width .5s cubic-bezier(.65, 0, .35, 1), background-color .4s ease;
}
.wd:hover { background: rgba(0, 0, 0, .32); }
.wd.is-on { width: calc(56 * var(--k)); background: rgba(0, 0, 0, .14); }
.wd i { position: absolute; inset: 0; background: var(--orange); border-radius: inherit; transform-origin: 0 50%; transform: scaleX(0); }
.wd:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.what-tabs {
  position: absolute; left: calc(143 * var(--k)); top: calc(631 * var(--k)); /* …and 50 more below them */
  width: calc(631.712 * var(--k));
  display: flex; flex-direction: column; gap: calc(22 * var(--k));
}
.wt {
  padding: calc(12.333 * var(--k)) calc(15.856 * var(--k)) calc(62.33 * var(--k));
  border-bottom: calc(.881 * var(--k)) solid #bebebe;
}
.wt-head {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between;
  cursor: pointer;
  font: 300 calc(70 * var(--k)) / 1 var(--f-display);
  color: #000;
  white-space: nowrap;
}
.wt-head:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.wt-head img { width: calc(39 * var(--k)); height: calc(39 * var(--k)); flex: none; }
/* the open tab's body grows out of nothing rather than jumping in */
.wt-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s ease; }
.wt.is-open .wt-body { grid-template-rows: 1fr; }
.wt-inner {
  min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(23.784 * var(--k));
  opacity: 0; transition: opacity .35s ease;
}
.wt.is-open .wt-inner { opacity: 1; transition-delay: .12s; }
.wt-inner p {
  margin-top: calc(23.784 * var(--k)); /* head-to-text gap; a margin, so the closed body can shrink to nothing */
  width: calc(600 * var(--k));
  font: 300 calc(24 * var(--k)) / 1.47 var(--f-display);
  color: #000;
}
.wt-link {
  display: flex; align-items: center; gap: calc(10.835 * var(--k));
  padding: calc(10.62 * var(--k)) 0;
  border-bottom: calc(.662 * var(--k)) solid #000;
  font: 600 calc(13.924 * var(--k)) / 1 var(--f-display);
  letter-spacing: calc(.2785 * var(--k));
  color: #000;
  white-space: nowrap;
}
.wt-link img { width: calc(14.853 * var(--k)); height: calc(14.853 * var(--k)); }

.what-art {
  position: absolute; left: calc(829 * var(--k)); top: calc(570 * var(--k));
  width: calc(981 * var(--k)); height: calc(846 * var(--k));
}
/* Each picture is a stack of its own layers. Three things move them, each on
   its own property so they never fight:
   - .wa-l translate: the lean toward the cursor (--mx/--my from site.js, × depth)
   - .wa-l transform/opacity: entering and leaving (site.js, Web Animations)
   - img transform: the slow breathing loop; img scale: the lift under the cursor */
.wa-panel { position: absolute; inset: 0; visibility: hidden; }
.wa-panel.is-on { visibility: visible; }
.wa-l {
  position: absolute;
  left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k));
  width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k));
  translate: calc(var(--mx, 0) * var(--d) * var(--k)) calc(var(--my, 0) * var(--d) * var(--k));
  will-change: transform, translate;
}
.wa-l > img, .wa-l > i { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.wa-l > i { background: #fff; border-radius: calc(17.1 * var(--k)); }
.wa-l > img, .wa-l > i { animation: wa-breathe var(--ft) ease-in-out var(--fd) infinite; transition: scale .6s cubic-bezier(.2, .8, .2, 1), filter .6s ease; }
.wa-word > img { animation-name: wa-drift; }
.wa-photo > img { animation-name: wa-swell; transform-origin: 50% 60%; }
.wa-bar > img { animation: none; }
/* the question list moves as one piece: glass, sheet and rows bob together, no tilt */
.wa-panel[data-tab="presale"] :is(.wa-card, .wa-row) > * { animation-name: wa-bob; }
@keyframes wa-breathe {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(0, calc(-9 * var(--k) * var(--fa))) rotate(calc(.7deg * var(--fa))); }
}
@keyframes wa-bob {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0, calc(-9 * var(--k) * var(--fa))); }
}
@keyframes wa-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(calc(14 * var(--k)), calc(-4 * var(--k))); }
}
@keyframes wa-swell {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}
/* the small pieces answer the cursor: a gentle lift where it rests */
.what-art { pointer-events: none; }
.wa-panel.is-on .wa-face, .wa-panel.is-on .wa-pill, .wa-panel.is-on .wa-card, .wa-panel.is-on .wa-row { pointer-events: auto; }
.wa-face:hover > img, .wa-pill:hover > img, .wa-card:hover > img { scale: 1.045; }
.wa-row:hover > img { scale: 1.035; }
.wa-panel.is-on .wa-l:has(> i) { pointer-events: none; }
.wa-panel[data-tab="presale"] .wa-card { pointer-events: none !important; }
/* before the fold arrives, the pieces wait out of sight */
.what-art.is-waiting .wa-l { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .wt-body, .wt-inner { transition: none !important; }
  .wa-l > img, .wa-l > i { animation: none !important; }
  .wa-l { translate: none; }
}

/* ================= fold 3 — by designers (Figma 811:2212) ================= */
@font-face {
  font-family: 'Geist Pixel Circle';
  src: url('/assets/site/fonts/GeistPixel-Circle.woff2') format('woff2');
  font-display: swap;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.by {
  /* the frame's radial ground, exactly as Figma writes it */
  background: #060017 url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 1098' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-168.15 2.9 -3.4098 -197.71 1487 549)'><stop stop-color='rgba(255,57,38,1)' offset='0.027507'/><stop stop-color='rgba(255,99,38,1)' offset='0.32779'/><stop stop-color='rgba(255,57,38,1)' offset='0.57088'/><stop stop-color='rgba(255,84,71,1)' offset='0.58041'/><stop stop-color='rgba(255,112,104,1)' offset='0.58995'/><stop stop-color='rgba(255,139,138,1)' offset='0.59948'/><stop stop-color='rgba(255,166,171,1)' offset='0.60901'/><stop stop-color='rgba(207,140,187,1)' offset='0.64953'/><stop stop-color='rgba(160,114,204,1)' offset='0.69004'/><stop stop-color='rgba(112,87,220,1)' offset='0.73056'/><stop stop-color='rgba(64,61,237,1)' offset='0.77107'/><stop stop-color='rgba(64,61,237,1)' offset='0.78775'/><stop stop-color='rgba(50,46,184,1)' offset='0.80956'/><stop stop-color='rgba(35,31,130,1)' offset='0.83136'/><stop stop-color='rgba(28,23,103,1)' offset='0.84227'/><stop stop-color='rgba(21,15,76,1)' offset='0.85317'/><stop stop-color='rgba(14,8,50,1)' offset='0.86407'/><stop stop-color='rgba(6,0,23,1)' offset='0.87498'/></radialGradient></defs></svg>") center / 100% 100% no-repeat;
  isolation: isolate;
}
/* the collage, turned and laid over the ground in soft-light */
.by-texture {
  /* at least the frame's scale, more on a tall window, so the clouds always
     cover the fold top to bottom (568 = half its 1174 height less its 19 drop) */
  --t: max(var(--u), calc(100svh / 1136));
  position: absolute; left: 50%; top: 50%;
  width: calc(2256 * var(--t)); height: calc(1174 * var(--t));
  transform: translate(calc(-50% + 66 * var(--t)), calc(-50% + 19 * var(--t)));
  display: flex; align-items: center; justify-content: center;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.by-texture > div {
  flex: none; position: relative; overflow: hidden;
  width: calc(1174 * var(--t)); height: calc(2256 * var(--t));
  transform: rotate(-90deg) scaleY(-1);
}
.by-texture img { position: absolute; left: .05%; top: .01%; width: 100.46%; height: 99.99%; max-width: none; }

/* the pixel line: two copies end to end, slid by one copy's width */
.by-marquee {
  position: absolute; left: 0; right: 0;
  /* hung from the fold's top edge, as in Figma, at any window height, so the
     letters always touch the white fold above */
  top: calc(-74 * var(--u));
  overflow: hidden; pointer-events: none;
}
.by-track { display: flex; width: max-content; animation: by-drift 320s linear infinite; }
.by-track span {
  flex: none;
  font: 400 calc(303.751 * var(--u)) / normal 'Geist Pixel Circle', 'Geist Mono', monospace;
  letter-spacing: calc(-9.1125 * var(--u));
  color: #fff;
  white-space: nowrap;
}
@keyframes by-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* the 1920 × 1098 frame, centred on the fold */
.by-stage {
  position: absolute; left: 0; top: 50%;
  width: calc(1920 * var(--u)); height: calc(1098 * var(--u));
  transform: translateY(-50%);
}
.by-stage > * { position: absolute; }
.by-card {
  /* Figma 811:2212 (corrected Oct 2026): a taller card, a smaller two-line
     headline and a longer paragraph whose first sentence is bold */
  left: 0; top: calc(365 * var(--u));
  width: calc(655 * var(--u)); height: calc(535 * var(--u));
  padding: calc(95 * var(--u)) 0 0 calc(44.5 * var(--u));
  box-sizing: border-box;
  background: #fff;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(21 * var(--u));
}
.by-card h2 {
  margin: 0;
  width: calc(555 * var(--u));
  font: 500 calc(46 * var(--u)) / 1.18 var(--f-display);
  letter-spacing: -.02em;
  color: #000;
}
.by-card p {
  margin: 0;
  width: calc(541 * var(--u));
  /* 15 at full size, never under 13px so it stays readable on a laptop */
  font: 400 max(calc(15 * var(--u)), 13px) / 1.52 var(--f-display);
  color: #000;
}
.by-card p b { font-weight: 600; }
.by-card .by-cta { margin-top: calc(10 * var(--u)); }
.by-cta {
  box-sizing: border-box;
  width: calc(272.62 * var(--u)); height: calc(83.01 * var(--u));
  padding: calc(18.52 * var(--u)) calc(31.99 * var(--u));
  display: flex; align-items: center; justify-content: center; gap: calc(15.443 * var(--u));
  background: #000; color: #fff;
  border-radius: calc(64.43 * var(--u));
  font: 400 calc(19.847 * var(--u)) / 1 var(--f-display);
  letter-spacing: calc(.7939 * var(--u));
  white-space: nowrap;
}
.by-cta img { width: calc(21.17 * var(--u)); height: calc(21.17 * var(--u)); }

/* the search bar: runs off the right edge on purpose */
.by-bar {
  left: calc(782 * var(--u)); top: calc(436 * var(--u));
  width: calc(1404 * var(--u)); height: calc(337 * var(--u));
  background: #010101;
  border-radius: calc(265.037 * var(--u));
}
.by-bar > * { position: absolute; }
/* the disc and its glow: Figma's drop shadow (orange at 69%, blur 50) on a
   black circle, drawn in CSS so the glow alone can breathe */
.by-glow {
  left: calc(74 * var(--u)); top: calc(59 * var(--u));
  width: calc(222 * var(--u)); height: calc(222 * var(--u));
  border-radius: 50%;
  background: #000;
  z-index: 0; /* its own layer, so the glow sits on the bar, not under it */
}
.by-glow::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
  /* Figma's glow, plus a wider second ring so the bright end of the breath reads */
  box-shadow: 0 0 calc(100 * var(--u)) rgba(255, 60, 2, .69),
              0 0 calc(170 * var(--u)) calc(24 * var(--u)) rgba(255, 60, 2, .6);
  animation: by-breathe 6s ease-in-out infinite;
}
/* only the glow's strength breathes; the disc never changes size */
@keyframes by-breathe {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
.by-mark { left: calc(133.23 * var(--u)); top: calc(106 * var(--u)); width: calc(101.576 * var(--u)); height: calc(114.941 * var(--u)); }
.by-typed {
  left: calc(366 * var(--u)); top: calc(135.96 * var(--u));
  font: 400 calc(38.064 * var(--u)) / normal var(--f-display);
  color: #fff;
  white-space: nowrap;
}

/* the clouds drift, very slowly, in two layers: the picture itself slides
   one way, and a second, fainter copy of it, seen only through soft patches,
   slides the other way at another pace, so the light shifts like real cloud
   banks passing at different heights. Both are slightly enlarged so their
   edges never show. */
.by-texture img { scale: 1.2; animation: by-cloud-a 19s ease-in-out infinite alternate; /* twice the old 38s pace */ }
@keyframes by-cloud-a { from { translate: -9.66% 4.83%; } to { translate: 9.66% -4.83%; } }
.by-texture-2 { opacity: .5;
  -webkit-mask-image: radial-gradient(38% 30% at 30% 40%, #000, transparent), radial-gradient(30% 34% at 72% 62%, #000, transparent);
          mask-image: radial-gradient(38% 30% at 30% 40%, #000, transparent), radial-gradient(30% 34% at 72% 62%, #000, transparent);
  -webkit-mask-size: 160% 160%; mask-size: 160% 160%;
  animation: by-cloud-mask 22.5s ease-in-out infinite alternate; }
.by-texture-2 img { scale: 1.3; animation: by-cloud-b 14s ease-in-out -5s infinite alternate; }
@keyframes by-cloud-b { from { translate: 14.49% -7.25%; } to { translate: -14.49% 8.45%; } }
@keyframes by-cloud-mask { from { -webkit-mask-position: 0% 30%; mask-position: 0% 30%; } to { -webkit-mask-position: 100% 70%; mask-position: 100% 70%; } }

/* entrance: the fold comes out of the grey of the folds above it; the card and its words come in
   from the left, the search bar from the right, then the glowing disc
   lights up slowly and the first prompt is typed (site.js) */
.by-veil { position: absolute; inset: 0; background: #f8f8f8; opacity: 0; pointer-events: none; z-index: 1; }
.by-marquee, .by-stage { z-index: 2; }
.by { --be: cubic-bezier(.45, 0, .55, 1); }
.by.will-enter .by-veil { opacity: 1; }
.by.will-enter .by-card { opacity: 0; translate: calc(-120 * var(--u)) 0; }
.by.will-enter .by-card > * { opacity: 0; translate: calc(-50 * var(--u)) 0; }
.by.will-enter .by-bar { opacity: 0; translate: calc(320 * var(--u)) 0; }
.by.will-enter .by-glow, .by.will-enter .by-mark { opacity: 0; }
.by.will-enter .by-glow { scale: .82; }
.by.is-in .by-veil { opacity: 0; transition: opacity 1.8s var(--be); }
.by.is-in .by-card { opacity: 1; translate: 0 0; transition: opacity 1.1s var(--be) .35s, translate 1.4s var(--be) .35s; }
.by.is-in .by-card > * { opacity: 1; translate: 0 0; transition: opacity 1s var(--be) calc(.65s + var(--c) * .16s), translate 1.2s var(--be) calc(.65s + var(--c) * .16s); }
.by-card > :nth-child(1) { --c: 0; } .by-card > :nth-child(2) { --c: 1; } .by-card > :nth-child(3) { --c: 2; }
.by.is-in .by-bar { opacity: 1; translate: 0 0; transition: opacity 1.2s var(--be) .6s, translate 1.6s var(--be) .6s; }
.by.is-in .by-glow, .by.is-in .by-mark { opacity: 1; scale: 1; transition: opacity 1.8s var(--be) 1.9s, scale 2s var(--be) 1.9s; }
/* the button's own hover keeps its quick scale once it has arrived */
.by.is-in .by-card > .by-cta { transition: opacity 1s var(--be) .97s, translate 1.2s var(--be) .97s, scale .45s var(--hover-ease); }

@media (prefers-reduced-motion: reduce) {
  .by-track, .by-glow::before, .by-texture img, .by-texture-2 { animation: none; }
  .by-veil { display: none; }
  .by [class] { transition: none !important; }
}

/* ================= fold 4 — the ABC (Figma 811:2608) =================
   The frame is 1920 × 1080; --k fits it to the window like fold 2. The stage
   is centred and lets the wheel run past its edges; the stickers that Figma
   cuts at the frame's edge are pinned to the fold's own edges instead, so a
   cut never shows in mid-air. */
.abc {
  --k: min(var(--u), calc(100svh / 1080));
  --ease: cubic-bezier(.65, 0, .35, 1);
  background: #010101;
  color: #fff;
}
.abc-stage {
  position: absolute; left: 50%; top: 50%;
  width: calc(1920 * var(--k)); height: calc(1080 * var(--k));
  transform: translate(-50%, -50%);
}
.abc-stage > * { position: absolute; }
/* the wheel: circle, tick ring and the arc of names share one centre (362, 509) */
/* the wheel's rim, as corrected in Figma (811:2612): only the right-hand arc,
   white where it faces the slot and fading to black toward its ends */
.abc-circle { left: calc(807.514 * var(--k)); top: calc(48.999 * var(--k)); width: calc(243.236 * var(--k)); height: calc(984.448 * var(--k)); }
.abc-ring {
  left: calc(-383.93 * var(--k)); top: calc(-236.93 * var(--k));
  width: calc(1491.86 * var(--k)); height: calc(1491.86 * var(--k));
  transform: rotate(calc(var(--ring, 0) * 1deg));
  transition: transform 1s var(--ease);
}
/* the ring's tick at the slot (x 1078–1108) lies under the in-arrow; cover it
   so only the arrow shows there — ticks turning past dip under it too */
.abc-slotmask { left: calc(1074 * var(--k)); top: calc(500 * var(--k)); width: calc(38 * var(--k)); height: calc(18 * var(--k)); background: #010101; }
/* toward the top and bottom of the fold the ring's orange ticks sink into the
   dark too, like the names beside them (the ring turns; this veil stays) */
.abc-ringfade {
  /* reaches well past the frame (on a tall window the fold shows more of the
     ring above and below it) and across the whole wheel */
  left: calc(-400 * var(--k)); top: calc(-600 * var(--k)); width: calc(2400 * var(--k)); height: calc(2280 * var(--k));
  background: linear-gradient(#010101 0, #010101 calc(600 * var(--k)),
    rgba(1, 1, 1, .9) calc(730 * var(--k)), rgba(1, 1, 1, 0) calc(924 * var(--k)),
    rgba(1, 1, 1, 0) calc(1356 * var(--k)), rgba(1, 1, 1, .9) calc(1550 * var(--k)),
    #010101 calc(1680 * var(--k)), #010101 100%);
  pointer-events: none;
}
.abc-arc { left: calc(362 * var(--k)); top: calc(509 * var(--k)); width: 0; height: 0; }
.aw-item {
  all: unset;
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  transform: rotate(calc(var(--a, 0) * 1deg)) translate(calc(752 * var(--k)), -50%);
  display: flex; align-items: flex-end; gap: calc(7.467 * var(--k));
  white-space: nowrap;
  opacity: 0;
  cursor: pointer;
  transition: transform 1s var(--ease), opacity 1s var(--ease);
}
.aw-item.is-near { opacity: .31; }
.aw-item.is-near:hover, .aw-item.is-near:focus-visible { opacity: .6; }
/* the name just below the slot runs under the Pros / Cons text: keep it dim */
.aw-item.is-near[data-d="1"] { opacity: .12; }
.aw-item.is-near[data-d="1"]:hover, .aw-item.is-near[data-d="1"]:focus-visible { opacity: .3; }
.aw-item.no-anim { transition: none; }
/* the names toward the top and bottom of the fold sink into the dark, their
   orange lines with them */
.aw-item.is-near[data-d="2"], .aw-item.is-near[data-d="-2"] { opacity: .14; }
.aw-item.is-near[data-d="3"], .aw-item.is-near[data-d="-3"] { opacity: .06; }
.aw-item.is-near[data-d="2"]:hover, .aw-item.is-near[data-d="-2"]:hover { opacity: .35; }
.aw-item.is-near[data-d="3"]:hover, .aw-item.is-near[data-d="-3"]:hover { opacity: .25; }
/* while its headline is flying to or from the slot, the arc copy stays out of sight */
.aw-item.is-flying { opacity: 0 !important; transition: transform 1s var(--ease); }
.aw-a { font: 400 calc(31.879 * var(--k)) / normal var(--f-serif); letter-spacing: calc(.3188 * var(--k)); color: #fff; }
.aw-b { font: 400 calc(26.948 * var(--k)) / normal 'Geist Pixel Circle', monospace; color: var(--orange); }

/* title */
.abc-title { margin: 0; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.abc-title > span { position: absolute; white-space: nowrap; }
.at-the { left: calc(215.48 * var(--k)); top: calc(227 * var(--k)); font: 400 calc(273.091 * var(--k)) / normal 'Geist Pixel Circle', monospace; letter-spacing: calc(-8.1927 * var(--k)); color: var(--orange); }
.at-abc { left: calc(248.75 * var(--k)); top: calc(462.89 * var(--k)); font: 400 calc(276.209 * var(--k)) / normal var(--f-serif); color: #fff; }
.at-sub {
  left: calc(443 * var(--k)); top: calc(746.82 * var(--k)); width: calc(540.844 * var(--k));
  transform: translateX(-50%); text-align: center;
  font: 400 calc(29.456 * var(--k)) / 1.58 var(--f-display); letter-spacing: calc(.2946 * var(--k)); color: #e5e5e5;
}

/* up / down */
.abc-nav { left: calc(841 * var(--k)); top: calc(412 * var(--k)); width: calc(53 * var(--k)); height: calc(256 * var(--k)); }
/* each button carries the whole up/down drawing, placed where the pair sits,
   and shows only its own circle — so each circle can grow on hover alone */
.abc-nav img { position: absolute; left: 50%; width: calc(257 * var(--k)); height: calc(54 * var(--k)); pointer-events: none; }
.abc-prev img { top: calc(128 * var(--k)); transform: translate(-50%, -50%) rotate(90deg); }
.abc-next img { top: calc(128 * var(--k) - 203 * var(--k)); transform: translate(-50%, -50%) rotate(90deg); }
.abc-nav button {
  all: unset; position: absolute; left: 0; width: 100%; height: calc(53 * var(--k));
  border-radius: 50%; cursor: pointer; transition: background .25s ease;
}
.abc-nav button { clip-path: circle(calc(27.5 * var(--k))); transition: scale .45s cubic-bezier(.42, 0, .58, 1); }
/* the up / down circles are 1.3× the frame's size, each kept on its own centre */
.abc-nav button { scale: 1.3; }
.abc-nav button:hover, .abc-nav button:focus-visible { scale: 1.43; }
.abc-nav button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
/* scoped like the rule above, or its all: unset wipes the placement and both
   buttons stack on the top circle */
.abc-nav .abc-prev { top: 0; }
.abc-nav .abc-next { bottom: 0; }
.abc-in  { left: calc(1078 * var(--k)); top: calc(503.48 * var(--k)); width: calc(69.75 * var(--k)); height: calc(11.046 * var(--k)); }
/* the out-arrow points at the headline from the right. Its head sits a fixed
   gap after the headline's end (--out, set by site.js), and its line runs on
   to the fold's edge, so no headline ever touches it, long or short */
.abc-out {
  left: calc(var(--out, 1673) * var(--k)); top: calc(503.48 * var(--k));
  right: calc((1920 * var(--k) - 100vw) / 2);
  height: calc(11.046 * var(--k));
  overflow: hidden;
}
.abc-out img { position: absolute; left: 0; top: 0; width: calc(247.75 * var(--k)); height: 100%; transform: rotate(180deg); }
.abc-out::after { content: ''; position: absolute; left: calc(247 * var(--k)); right: 0; top: calc(4.773 * var(--k)); height: calc(1.5 * var(--k)); background: var(--orange); }

/* the model in the slot — one state frame (866 × 767), set at (998, 369) */
.abc-detail { left: calc(998 * var(--k)); top: calc(369 * var(--k)); width: calc(866 * var(--k)); height: calc(767 * var(--k)); }
.ad { position: absolute; inset: 0; }
.ad > * { position: absolute; margin: 0; }
.ad-title { transform-origin: 0 50%; left: calc(189 * var(--k)); top: calc(92 * var(--k)); display: flex; align-items: flex-end; gap: calc(16 * var(--k)); white-space: nowrap; font-weight: 400; }
.ad-a { font: 400 calc(68.312 * var(--k)) / normal var(--f-serif); letter-spacing: calc(.6831 * var(--k)); color: #fff; }
.ad-b { font: 400 calc(57.746 * var(--k)) / normal 'Geist Pixel Circle', monospace; color: var(--orange); }
.ad-chip {
  padding: calc(5.932 * var(--k)) calc(17.409 * var(--k));
  border: max(calc(.576 * var(--k)), .5px) solid var(--orange);
  border-radius: calc(5.765 * var(--k));
  font: 400 calc(14.412 * var(--k)) / 1.58 var(--f-display); letter-spacing: calc(1.2971 * var(--k));
  color: var(--orange); white-space: nowrap;
}
.ad-text { left: calc(327 * var(--k)); width: calc(361 * var(--k)); font: 300 calc(16.63 * var(--k)) / 1.58 var(--f-display); letter-spacing: calc(.9978 * var(--k)); color: #e5e5e5; }
.ad-chart { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.ad-chart > * { position: absolute; }
.ad-glow { left: calc(327 * var(--k)); top: calc(469.16 * var(--k)); width: calc(395 * var(--k)); height: calc(73 * var(--k)); background: linear-gradient(187.755deg, #010101 51.866%, #491100 99.56%); }
.ad-grid { left: calc(327 * var(--k)); top: calc(472 * var(--k)); width: calc(305 * var(--k)); height: calc(70 * var(--k)); }
.ad-note { left: calc(327 * var(--k)); top: calc(542.16 * var(--k)); font: 300 calc(16.63 * var(--k)) / 1.58 var(--f-display); letter-spacing: calc(.9978 * var(--k)); color: var(--orange); white-space: nowrap; }

/* changing models: the old one leaves at once, the new one arrives piece by
   piece (--d), each rising a touch as it dissolves in; the curve draws itself */
.ad > [style*="--d"] { opacity: 0; translate: 0 calc(10 * var(--k)); transition: opacity .3s ease, translate .3s ease; }
.ad.is-on > [style*="--d"] {
  opacity: 1; translate: 0 0;
  transition: opacity .7s ease calc(.2s + var(--d) * .13s), translate .8s var(--ease) calc(.2s + var(--d) * .13s);
}
.ad-curve { clip-path: inset(0 100% 0 0); transition: clip-path .3s ease; }
.ad.is-on .ad-curve { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease) 1s; }

/* the fold's own entrance, once, when it scrolls into view */
.abc.will-enter .abc-title > span,
.abc.will-enter .abc-circle, .abc.will-enter .abc-ring, .abc.will-enter .abc-arc,
.abc.will-enter .abc-nav, .abc.will-enter .abc-in, .abc.will-enter .abc-out, .abc.will-enter .abc-detail {
  opacity: 0;
}

.abc.will-enter .abc-title > span { translate: 0 calc(18 * var(--k)); }
.abc.is-in .abc-title > span { opacity: 1; translate: 0 0; transition: opacity 1s ease, translate 1.1s var(--ease); }
.abc.is-in .at-abc { transition-delay: .12s; }
.abc.is-in .at-sub { transition-delay: .24s; }
.abc.is-in .abc-circle, .abc.is-in .abc-ring, .abc.is-in .abc-arc { opacity: 1; transition: opacity 1.4s ease .2s, transform 1s var(--ease); }
.abc.is-in .abc-nav, .abc.is-in .abc-in, .abc.is-in .abc-out { opacity: 1; transition: opacity .9s ease .6s; }
.abc.is-in .abc-out { transition: opacity .9s ease .6s, left 1s var(--ease); }
.abc.is-in .abc-detail { opacity: 1; transition: opacity 1s ease .7s; }

@media (prefers-reduced-motion: reduce) {
  .abc *, .abc *::before { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* ================= fold 5 — for who (Figma 811:2228) =================
   1920 × 1210, scaled with the window's width like the hero (a window
   taller than that just shows more night above); the night
   sky covers the whole fold and the orange runs on to its top and right
   edges, so a taller or wider window just shows more of both. */
.fw {
  --k: var(--u);
  height: max(100svh, calc(1210 * var(--u)));
  --ease: cubic-bezier(.65, 0, .35, 1);
  background: #010103;
}
/* the sky is laid exactly where Figma has it (its own portrait lines up with
   the cut-out one); the orange runs on past the frame to the fold's top and
   right edges, and sits over the kanji as in Figma */
.fw-stars { left: calc(-50 * var(--k)); top: calc(90 * var(--k)); width: calc(2013 * var(--k)); height: calc(1130 * var(--k));
  /* Figma's black band over the sky's top edge, fading out 88px down */
  -webkit-mask-image: linear-gradient(to bottom, transparent 1.87%, #000 7.79%); mask-image: linear-gradient(to bottom, transparent 1.87%, #000 7.79%); }
.fw-orange {
  left: calc(428 * var(--k));
  top: calc(209 * var(--k));
  right: calc((1920 * var(--k) - 100vw) / 2);
  bottom: 0;
  background: var(--orange);
}
.fw-stage {
  position: absolute; left: 50%; bottom: 0;
  width: calc(1920 * var(--k)); height: calc(1210 * var(--k));
  transform: translateX(-50%);
}
.fw-stage > * { position: absolute; margin: 0; }
.fw-kanji { left: calc(196 * var(--k)); top: calc(4 * var(--k)); width: calc(284 * var(--k)); height: calc(418 * var(--k)); }
.fw-woman { left: calc(61 * var(--k)); top: calc(275 * var(--k)); width: calc(691 * var(--k)); height: calc(945 * var(--k)); }
.fw-title { left: calc(778 * var(--k)); top: calc(310 * var(--k)); font: 400 calc(50 * var(--k)) / 1.45 var(--f-display); color: #000; white-space: nowrap; }
.fw-text {
  left: calc(1220 * var(--k)); top: calc(952 * var(--k)); width: calc(750 * var(--k));
  margin-left: calc(-375 * var(--k)); text-align: center;
  font: 400 calc(29.554 * var(--k)) / 1.58 var(--f-display); letter-spacing: calc(.2955 * var(--k)); color: #000;
}
.fw-abc { left: calc(1595 * var(--k)); top: calc(414 * var(--k)); font: 400 calc(280.146 * var(--k)) / normal var(--f-serif); color: #000; white-space: nowrap; }

.fw-card {
  width: calc(245.308 * var(--k)); height: calc(255.849 * var(--k));
  border-radius: calc(24.698 * var(--k));
  background: #fff; overflow: hidden;
  box-shadow: 0 0 calc(102.744 * var(--k)) rgba(0, 0, 0, .48);
}
.fw-card > *, .fw-card > div > * { position: absolute; display: block; }
.fw-card i { inset: 0; }
.fw-c1 { left: calc(816.9 * var(--k)); top: calc(520.26 * var(--k)); }
.fw-c1 > div { left: calc(-10.41 * var(--k)); top: calc(-27.74 * var(--k)); width: calc(266.162 * var(--k)); height: calc(286.385 * var(--k)); }
.fw-c1 img { left: 0; top: 0; width: 100%; height: calc(286.195 * var(--k)); }
.fw-c2 { left: calc(1035.23 * var(--k)); top: calc(486.67 * var(--k)); }
.fw-c2 > img { left: calc(-46.83 * var(--k)); top: calc(-20.66 * var(--k)); width: calc(317.374 * var(--k)); height: calc(304.667 * var(--k)); }
.fw-c3 { left: calc(1261.46 * var(--k)); top: calc(460 * var(--k)); }
.fw-c3 > div { left: calc(-36.77 * var(--k)); top: calc(-32.26 * var(--k)); width: calc(300.121 * var(--k)); height: calc(337.558 * var(--k)); }
.fw-c3 img { left: 0; top: calc(32.26 * var(--k)); width: calc(281.053 * var(--k) * .999); height: calc(316.111 * var(--k)); }

/* the profile cards live: each bobs and sways on its own slow loop, out of
   step with the others, and the portrait inside breathes a little (transform
   only, so it never fights the entrance, which uses translate and scale) */
@keyframes fw-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(calc(-10 * var(--k))) rotate(calc(var(--fr) * 1deg)); }
  66% { transform: translateY(calc(5 * var(--k))) rotate(calc(var(--fr) * -.6deg)); }
}
@keyframes fw-breathe {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.045) translate(calc(-4 * var(--k)), calc(-3 * var(--k))); }
}
.fw-card { animation: fw-bob var(--ft) ease-in-out var(--fd) infinite; }
.fw-c1 { --ft: 7s; --fd: -1s; --fr: -1.2; }
.fw-c2 { --ft: 8.5s; --fd: -4s; --fr: .9; }
.fw-c3 { --ft: 7.6s; --fd: -2.5s; --fr: 1.3; }
.fw-card > div, .fw-c2 > img { animation: fw-breathe 9s ease-in-out var(--fd) infinite; transform-origin: 50% 40%; }
.fw-c2 > img { animation-duration: 10s; }
@media (prefers-reduced-motion: reduce) {
  .fw-card, .fw-card > div, .fw-c2 > img { animation: none; }
}

/* anchored at its left end, as in Figma, so the capsules build from there */
.fw-chips { left: calc(741.32 * var(--k)); top: calc(844 * var(--k)); display: flex; align-items: center; }
.fw-chip { box-sizing: border-box; overflow: hidden; }
.fw-chip.is-gone { width: 0; padding-left: 0; padding-right: 0; opacity: 0; }
.fw-chip { position: relative; transform-origin: 0 50%; } /* capsules open and close from their left end */
.fw-chip {
  padding: calc(20.292 * var(--k)) calc(23.2 * var(--k));
  background: #000; color: #fff;
  border-radius: calc(7.527 * var(--k));
  font: 500 calc(16.722 * var(--k)) / 1 var(--f-display); letter-spacing: calc(.6689 * var(--k));
  white-space: nowrap;
}
.fw-chip.is-round { border-radius: calc(67.268 * var(--k)); }

/* entrance: everything waits at rest, then arrives on its own beat */
.fw.will-enter [style*="--n"] { opacity: 0; }
.fw.will-enter .fw-kanji, .fw.will-enter .fw-title, .fw.will-enter .fw-text, .fw.will-enter .fw-chip { translate: 0 calc(22 * var(--k)); }
.fw.will-enter .fw-woman { translate: 0 calc(40 * var(--k)); }
.fw.will-enter .fw-card { translate: 0 calc(46 * var(--k)); scale: .94; }
.fw.will-enter .fw-abc { translate: calc(60 * var(--k)) 0; }
.fw.is-in [style*="--n"] {
  opacity: 1; translate: 0 0; scale: 1;
  transition: opacity 1s ease calc(.1s + var(--n) * .14s),
              translate 1.1s var(--ease) calc(.1s + var(--n) * .14s),
              scale 1.1s var(--ease) calc(.1s + var(--n) * .14s);
}
.fw.is-in .fw-stars { transition-duration: 1.6s; }
/* the orange panel rises into place from the bottom of the fold, slowly,
   uncovering upward as it comes */
.fw.will-enter .fw-orange { opacity: 1; translate: 0 calc(180 * var(--k)); clip-path: inset(100% 0 0 0); }
.fw.is-in .fw-orange {
  translate: 0 0; clip-path: inset(0 0 0 0);
  transition: translate 2.2s cubic-bezier(.45, 0, .4, 1) .05s, clip-path 2.2s cubic-bezier(.45, 0, .4, 1) .05s;
}

@media (prefers-reduced-motion: reduce) {
  .fw [style*="--n"] { transition: none !important; }
}

/* ================= fold 6 — use winning proposals (Figma 811:2315) =================
   1920 × 2121: two screens tall, scaled with the window's width like the
   hero. Positions are the frame's own, each picture placed by its export's
   corner (shadows included). */
.pr { position: relative; height: calc(2254 * var(--u)); overflow: hidden; background: #fff; }
.pr-stage { position: absolute; inset: 0; }
.pr-stage > * { position: absolute; margin: 0; }
.pr-orange { left: 0; top: 0; width: 100%; height: calc(1566 * var(--u)); background: var(--orange); }
/* desktop: 200 more orange above the capsule; the whole stage moves down
   and the orange reaches up over the added band */
@media (min-width: 761px) {
  .pr { height: calc(2454 * var(--u)); }
  .pr-stage { inset: calc(200 * var(--u)) 0 auto 0; height: calc(2254 * var(--u)); }
  .pr-orange { top: calc(-200 * var(--u)); height: calc(1766 * var(--u)); }
}
.pr-black { left: 0; bottom: 0; width: 100%; height: calc(694 * var(--u)); background: #000; }
.pr-pill {
  left: 0; top: calc(1087 * var(--u)); width: 100%; height: calc(881 * var(--u));
  border-radius: calc(542 * var(--u));
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 881' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-1.7979e-14 42.792 -93.258 2.8916e-13 960 420.59)'><stop stop-color='rgba(218,218,218,1)' offset='0.37594'/><stop stop-color='rgba(255,255,255,1)' offset='1'/></radialGradient></defs></svg>") center / 100% 100%;
}
.pr-kanji { left: calc(1684.99 * var(--u)); top: calc(1032.09 * var(--u)); width: calc(235.97 * var(--u)); height: calc(346.99 * var(--u)); }
.pr-pro { left: calc(54 * var(--u)); top: calc(1702 * var(--u)); font: 400 calc(319.106 * var(--u)) / normal var(--f-serif); color: #000; white-space: nowrap; }
.pr-dollars { left: calc(1618 * var(--u)); top: calc(1583 * var(--u)); font: 400 calc(374.287 * var(--u)) / normal 'Geist Pixel Circle', monospace; letter-spacing: calc(-26.2001 * var(--u)); color: #000; white-space: nowrap; }
.pr-pre { left: calc(-38 * var(--u)); top: calc(1258.49 * var(--u)); font: 400 calc(231.148 * var(--u)) / normal 'Geist Pixel Circle', monospace; color: var(--orange); white-space: nowrap; }
.pr-pre span:nth-child(1) { letter-spacing: calc(-1.12 * var(--u)); }
.pr-pre span:nth-child(2) { letter-spacing: calc(-.64 * var(--u)); }
.pr-pre span:nth-child(3) { letter-spacing: calc(-6.9344 * var(--u)); }
/* the capsule (Figma 811:2323, now 1514 × 658 with two soft bubbles behind),
   its layers exported with 40 of air around them */
.pr-header { left: calc(198 * var(--u)); top: calc(91 * var(--u)); width: calc(1594 * var(--u)); height: calc(738 * var(--u)); }
.pr-header img { width: 100%; height: 100%; }
.pr-photo-tl { left: calc(182 * var(--u)); top: calc(992 * var(--u)); width: calc(240 * var(--u)); height: calc(229 * var(--u)); }
.pr-photo-br { left: calc(1444 * var(--u)); top: calc(1855 * var(--u)); width: calc(145 * var(--u)); height: calc(145 * var(--u)); }
.pr-quest { left: calc(134.145 * var(--u)); top: calc(1513.73 * var(--u)); width: calc(267 * var(--u)); height: calc(348 * var(--u)); }
.pr-text {
  left: calc(986 * var(--u)); top: calc(805 * var(--u)); width: calc(876 * var(--u));
  margin-left: calc(-438 * var(--u)) !important; text-align: center;
  font: 400 calc(26.6 * var(--u)) / 1.45 var(--f-display); letter-spacing: calc(.266 * var(--u)); color: #000;
  white-space: pre-wrap;
}

/* the editor and the three slides it can show (laid over its own slide) */
.pr-editor { left: calc(430.781 * var(--u)); top: calc(1145.757 * var(--u)); width: calc(1058 * var(--u)); height: calc(761 * var(--u)); }
.pr-editor > img { position: absolute; display: block; }
.pr-editor-frame { left: 0; top: 0; width: 100%; height: 100%; }
.pr-fonts { left: calc(142.896 * var(--u)); top: calc(130.113 * var(--u)); width: calc(285 * var(--u)); height: calc(38.333 * var(--u)); }
.pr-slide {
  left: calc((538.178 - 430.781) * var(--u)); top: calc((1164.262 - 1012.757) * var(--u));
  width: calc(895 * var(--u)); height: calc(528 * var(--u));
  opacity: 0; transition: opacity .7s ease, scale .7s cubic-bezier(.2, .8, .2, 1);
}
.pr-slide.is-on { opacity: 1; }
.pr-slide.is-landing { scale: 1.015; }

/* the panel of slides on the right */
.pr-panel { left: calc(1453.677 * var(--u)); top: calc(1017.017 * var(--u)); width: calc(243 * var(--u)); height: calc(544 * var(--u)); }
.pr-glass {
  position: absolute;
  left: calc((1479.4 - 1453.677) * var(--u)); top: calc((911 - 884.017) * var(--u));
  width: calc(188.774 * var(--u)); height: calc(488 * var(--u));
  border-radius: calc(36.963 * var(--u));
  border: calc(.559 * var(--u)) solid #fff;
  background: rgba(255, 255, 255, .15);
  box-shadow: 0 calc(2.234 * var(--u)) calc(41.337 * var(--u)) rgba(0, 0, 0, .1),
              inset 0 0 calc(14.524 * var(--u)) #fff, inset 0 0 calc(18.992 * var(--u)) rgba(255, 255, 255, .25);
}
.pr-thumb { position: absolute; left: 0; width: calc(243 * var(--u)); height: calc(233 * var(--u)); transition: opacity .3s ease, scale .2s ease; }
.pr-thumb-cover { top: 0; }
.pr-thumb-brand { top: calc((1039.502 - 884.017) * var(--u)); }
.pr-thumb-process { top: calc((1194.987 - 884.017) * var(--u)); }
.pr-thumb.is-pressed { scale: .95; }
.pr-thumb.is-lifted { opacity: .35; }
/* the copy the cursor carries */
.pr-ghost {
  position: absolute; left: 0; top: 0; z-index: 20; pointer-events: none;
  width: calc(243 * var(--u)); height: calc(233 * var(--u));
  filter: drop-shadow(0 calc(24 * var(--u)) calc(36 * var(--u)) rgba(0, 0, 0, .22));
}

/* the cursor */
.pr-cursor { left: 0; top: 0; z-index: 30; pointer-events: none; transform-origin: 0 0; opacity: 0; transition: opacity .5s ease; }
.pr.is-playing .pr-cursor { opacity: 1; }
.pr-cursor svg { display: block; width: calc(46 * var(--u)); height: calc(57.5 * var(--u)); filter: drop-shadow(0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .25)); transition: scale .15s ease; transform-origin: 0 0; }
.pr-cursor.is-down svg { scale: .88; }
.pr-cursor span {
  position: absolute; left: calc(30 * var(--u)); top: calc(48 * var(--u));
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  background: var(--orange); color: #fff;
  border-radius: calc(8 * var(--u));
  font: 500 calc(16 * var(--u)) / 1 var(--f-display); letter-spacing: calc(.3 * var(--u));
  white-space: nowrap;
}

/* the living surroundings: everything floats or drifts, slowly, out of step */
@keyframes pr-float {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 calc(-12 * var(--u) * var(--fa, 1)); rotate: calc(.6deg * var(--fa, 1)); }
}
@keyframes pr-drift {
  0%, 100% { translate: 0 0; }
  33% { translate: calc(10 * var(--u)) calc(-6 * var(--u)); }
  66% { translate: calc(-8 * var(--u)) calc(5 * var(--u)); }
}
.pr-float { animation: pr-float var(--ft, 10s) ease-in-out var(--fd, 0s) infinite; }
.pr-drift { animation: pr-drift var(--ft, 14s) ease-in-out var(--fd, 0s) infinite; }
.pr-thumb { animation: pr-float 7s ease-in-out var(--fd, 0s) infinite; --fa: .35; }

/* entrance: each piece arrives on its own beat as it scrolls in. It runs
   on transform and opacity, so it never fights the floating (translate,
   rotate) that keeps going underneath. The panel's glass opens downward and
   its slides drop in one after another. */
.pr { --pe: cubic-bezier(.2, .8, .2, 1); }
@keyframes pr-in { from { opacity: 0; transform: translateY(calc(48 * var(--u))) scale(var(--is, .97)); } }
@keyframes pr-drop { from { opacity: 0; transform: translateY(calc(-34 * var(--u))) scale(.92); } }
@keyframes pr-open { from { clip-path: inset(0 0 100% 0 round calc(36.963 * var(--u))); } to { clip-path: inset(0 0 0 0 round calc(36.963 * var(--u))); } }
.pr.will-enter [data-n]:not(.pr-panel):not(.is-in),
.pr.will-enter .pr-panel:not(.is-in) .pr-thumb { opacity: 0; }
.pr.will-enter .pr-panel:not(.is-in) .pr-glass { clip-path: inset(0 0 100% 0); }
.pr-text.is-in { animation: pr-in 1.2s var(--pe) calc(var(--n, 0) * .16s) backwards; }
.pr-float.is-in { animation: pr-float var(--ft, 10s) ease-in-out var(--fd, 0s) infinite, pr-in 1.2s var(--pe) calc(var(--n, 0) * .16s) backwards; }
.pr-drift.is-in { animation: pr-drift var(--ft, 14s) ease-in-out var(--fd, 0s) infinite, pr-in 1.4s var(--pe) calc(var(--n, 0) * .16s) backwards; }
.pr-panel.is-in { animation: pr-float var(--ft, 10s) ease-in-out var(--fd, 0s) infinite; }
.pr-panel.is-in .pr-glass { animation: pr-open 1.1s var(--pe) .15s backwards; }
.pr-panel.is-in .pr-thumb { animation: pr-float 7s ease-in-out var(--fd, 0s) infinite, pr-drop .9s var(--pe) calc(.55s + var(--i) * .24s) backwards; }
.pr-header { --is: .94; }

/* the "Use Winning Proposals" capsule is five layers (Figma 811:2323): the
   two outer rings, the picture, the dark pills and the words. They swell in
   one after another like bubbles, from the outside in, and on hover each
   leans toward the cursor by its own depth (site.js sets --hx / --hy) and
   puffs up a touch. Entrance on transform, lean on translate, puff on scale. */
.pr.will-enter .pr-header[data-n]:not(.pr-panel):not(.is-in) { opacity: 1; }
.pr.will-enter .pr-header:not(.is-in) .pc { opacity: 0; }
.pr-header.is-in { animation: pr-float var(--ft, 10s) ease-in-out var(--fd, 0s) infinite; }
.pc { position: absolute; inset: 0; display: block;
  translate: calc(var(--hx, 0) * var(--d) * var(--u)) calc(var(--hy, 0) * var(--d) * var(--u));
  transition: scale .7s cubic-bezier(.45, 0, .55, 1); }
.pc img { display: block; }
.pc-m, .pr-header .pt-join-v { display: none; }
.pc-back2 { --d: 12; } .pc-back1 { --d: 22; } .pc-outer { --d: 34; } .pc-middle { --d: 58; } .pc-img { --d: 84; } .pc-title { --d: 118; }
/* stronger again: the layers lean further apart; the words stay close to
   their pills so they never slide off them, and the puff is kept in check */
.pr-header:hover .pc { scale: calc(1 + var(--d) * .0009); }
@keyframes pc-bubble {
  0% { opacity: 0; transform: scale(.62); }
  45% { opacity: 1; }
  62% { transform: scale(1.028); }
  82% { transform: scale(.994); }
  100% { opacity: 1; transform: scale(1); }
}
.pr-header.is-in .pc:not(.pc-title) { animation: pc-bubble 1.6s cubic-bezier(.45, 0, .55, 1) calc(.1s + var(--o) * .16s) backwards; }
@media (prefers-reduced-motion: reduce) { .pr-header.is-in .pc { animation: none; } .pc { translate: none; } }
.pr-editor { --is: .95; }

@media (prefers-reduced-motion: reduce) {
  .pr-float, .pr-drift, .pr-thumb, .pr [data-n].is-in, .pr-panel.is-in .pr-glass, .pr-panel.is-in .pr-thumb { animation: none !important; }
}

/* ================= last fold — early sign-up and footer (Figma 811:2261) =================
   1920 × 1862, scaled with the window's width. The live lava fills the dark
   top; the orange footer runs under the "Beta" line, which is the same
   orange, so its feet melt into it. */
.bt { position: relative; height: calc(1862 * var(--u)); overflow: hidden; background: #010103; --pe: cubic-bezier(.2, .8, .2, 1); }
.bt-stage { position: absolute; inset: 0; }
.bt-stage > * { position: absolute; margin: 0; }
.bt-lava { left: 0; top: 0; width: 100%; height: calc(928 * var(--u)); background: #000; }
.bt-lava canvas { display: block; width: 100%; height: 100%; }
.bt-lava::after { /* a soft fall to black where the lava meets the top of the fold */
  content: ""; position: absolute; inset: 0 0 auto; height: calc(120 * var(--u));
  background: linear-gradient(#010103, rgba(1, 1, 3, 0)); pointer-events: none;
}
:where(.site) .bt-signup {
  /* Figma 811:2264, as redesigned: 723.89 × 105.37 at y 150, centred, with
     "early Invitation" in orange and an orange arrow */
  left: 50%; top: calc(150 * var(--u)); translate: calc(-50% + .5 * var(--u)) 0;
  box-sizing: border-box; height: calc(105.37 * var(--u));
  display: flex; align-items: center; gap: calc(24.004 * var(--u));
  padding: 0 calc(84.636 * var(--u));
  border: calc(1.412 * var(--u)) solid #ff3926; border-radius: calc(100.153 * var(--u));
  background: #000; color: #fff; text-decoration: none; white-space: nowrap;
  font: 400 calc(30.849 * var(--u)) / 1 var(--f-display); letter-spacing: calc(1.234 * var(--u));
  transition: background-color .4s ease, box-shadow .5s ease, scale .4s var(--pe);
}
.bt-signup em { font-style: normal; color: var(--orange); }
.bt-signup img { width: calc(30.784 * var(--u)); height: calc(30.784 * var(--u)); transition: translate .45s cubic-bezier(.45, 0, .55, 1); }
/* hover: like the Start buttons — 5% larger, the arrow steps 10 to the right,
   with the glow of the lava behind it */
:where(.site) .bt-signup { transition: scale .45s cubic-bezier(.45, 0, .55, 1), box-shadow .5s ease; }
.bt-signup:hover { scale: 1.05; box-shadow: 0 0 calc(40 * var(--u)) rgba(255, 60, 2, .45); }
.bt-signup:hover img { translate: calc(10 * var(--u)) 0; }
.bt-orange { left: 0; top: calc(928 * var(--u)); width: 100%; height: calc(934 * var(--u)); background: var(--orange); }
.bt-beta {
  left: calc(-228 * var(--u)); top: calc(628 * var(--u)); width: calc(2804 * var(--u));
  font: 400 calc(303.751 * var(--u)) / normal 'Geist Pixel Circle', monospace;
  letter-spacing: calc(-9.1125 * var(--u)); color: var(--orange); white-space: nowrap;
  pointer-events: none;
}
.bt-foot { inset: 0; pointer-events: none; } /* the footer layer covers the fold; only its pieces take the mouse, so the sign-up button above gets its hover */
.bt-foot > * { pointer-events: auto; }
.bt-foot > * { position: absolute; margin: 0; }

/* the menu again, in black on orange */
.bt-nav { left: calc(272 * var(--u)); top: calc(983 * var(--u)); width: calc(1375 * var(--u)); display: flex; align-items: center; gap: calc(40 * var(--u)); }
.bt-logo img { display: block; width: calc(198 * var(--u)); height: calc(50.199 * var(--u)); }
:where(.site) .bt-link { font: 400 calc(17 * var(--u)) / 1.45 var(--f-display); color: #000; text-decoration: none; white-space: nowrap; transition: opacity .3s ease; }
.bt-link:hover { opacity: .6; }
.bt-account { display: flex; gap: calc(37.652 * var(--u)); margin-left: auto; }
:where(.site) .bt-login, :where(.site) .bt-start {
  display: inline-flex; align-items: center; height: calc(54.142 * var(--u)); box-sizing: border-box;
  text-decoration: none; white-space: nowrap; transition: scale .3s var(--pe);
}
:where(.site) .bt-login {
  gap: calc(6.275 * var(--u)); padding: 0 calc(30 * var(--u)); border-radius: calc(16.32 * var(--u));
  background: #e93500; color: #000;
  font: 400 calc(17.571 * var(--u)) / 1 var(--f-ui); letter-spacing: calc(.1757 * var(--u));
}
.bt-login img { width: calc(23.846 * var(--u)); height: calc(23.846 * var(--u)); }
:where(.site) .bt-start {
  padding: 0 calc(30.121 * var(--u)); border-radius: calc(16.316 * var(--u));
  background: #000; color: var(--orange);
  font: 400 calc(18.826 * var(--u)) / 1 var(--f-ui); letter-spacing: calc(.753 * var(--u));
}
.bt-login:hover, .bt-start:hover { scale: 1.05; }

/* the questions */
.bt-faq {
  left: calc(272 * var(--u)); top: calc(1124 * var(--u)); width: calc(1375 * var(--u));
  display: grid; grid-template-columns: repeat(3, calc(433 * var(--u))); column-gap: calc(38 * var(--u)); row-gap: calc(43 * var(--u));
  align-items: start; color: #000;
}
.bt-q { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.bt-q h3 { margin: 0; font: 700 calc(15 * var(--u)) / 1.51 var(--f-display); text-transform: uppercase; }
.bt-q p { margin: 0; font: 400 calc(14 * var(--u)) / 1.51 var(--f-display); white-space: pre-line; }
.bt-copy {
  left: calc(50% - 324 * var(--u)); top: calc(1810 * var(--u)); width: calc(647 * var(--u));
  font: 400 calc(17 * var(--u)) / 1.45 var(--f-display); color: #000; text-align: center; white-space: nowrap;
}
.bt-copy b { font-weight: 700; }
/* the three policy links, small, on the copyright line's left (a designed
   version of them comes later) */
.bt-legal {
  left: calc(272 * var(--u)); top: calc(1810 * var(--u));
  display: flex; gap: calc(22 * var(--u));
  font: 400 calc(15 * var(--u)) / calc(17 * 1.45 * var(--u)) var(--f-display);
}
:where(.site) .bt-legal a { color: #000; text-decoration: none; opacity: .7; transition: opacity .2s ease; }
.bt-legal a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.bt-cat { left: calc(1691 * var(--u)); top: calc(1708.097 * var(--u)); width: calc(229 * var(--u)); height: calc(153.903 * var(--u)); transform-origin: 60% 90%; animation: bt-breathe 5s ease-in-out infinite; }
@keyframes bt-breathe { 0%, 100% { scale: 1 1; } 50% { scale: 1.012 1.03; } }

/* entrance: the sign-up, the menu and each question arrive on their own beat */
@keyframes bt-in { from { opacity: 0; transform: translateY(calc(36 * var(--u))); } }
.bt.will-enter [data-n]:not(.is-in) { opacity: 0; }
.bt [data-n].is-in { animation: bt-in 1.1s var(--pe) calc(var(--n, 0) * .12s) backwards; }
.bt.will-enter .bt-beta { opacity: 0; transform: translateX(calc(120 * var(--u))); }
.bt.is-in .bt-beta { opacity: 1; transform: none; transition: opacity 1.4s ease .2s, transform 1.8s var(--pe) .2s; }
.bt.will-enter .bt-lava canvas { opacity: 0; }
.bt.is-in .bt-lava canvas { opacity: 1; }
.bt-lava canvas { transition: opacity 1.6s ease .1s; }

@media (prefers-reduced-motion: reduce) {
  .bt [data-n].is-in, .bt-cat { animation: none !important; }
}

/* ================= every "Start free" button: hover =================
   the button grows 5% and, where it has one, its arrow steps 10px to the
   right — both with a soft ease in and out */
.hero-cta, .by-cta, .gm-start, .bt-start { --hover-ease: cubic-bezier(.45, 0, .55, 1); }
.hero-cta { transition: opacity .8s ease calc(.35s + var(--i, 0) * .18s), transform 1.4s cubic-bezier(.45, 0, .55, 1) calc(.35s + var(--i, 0) * .18s), scale .45s var(--hover-ease); }
.by-cta { transition: scale .45s var(--hover-ease); }
.gm.is-live .gm-account > a.gm-start, .gm-start { transition: scale .45s var(--hover-ease) !important; }
/* every Start button fills with orange on hover: a solid, straight-edged
   fill that sweeps in quickly from its right edge to its left, and back out
   to the right when the cursor leaves */
.gm-start, .by-cta, .bt-start { position: relative; }
.hero-cta, .by-cta, .gm-start, .bt-start { overflow: hidden; isolation: isolate; }
.hero-cta::before, .by-cta::before, .gm-start::before, .bt-start::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--orange);
  transform: translateX(101%);
  transition: transform .28s cubic-bezier(.45, 0, .55, 1);
}
.hero-cta:hover::before, .by-cta:hover::before, .gm-start:hover::before, .bt-start:hover::before,
.hero-cta:focus-visible::before, .by-cta:focus-visible::before, .gm-start:focus-visible::before, .bt-start:focus-visible::before { transform: none; }
/* the first fold's Start sits on orange, so it fills white instead, its
   words and arrow turning black */
.hero-cta::before { background: #fff; }
.hero-cta:hover, .hero-cta:focus-visible { color: #000; }
.hero-cta img { transition: translate .45s var(--hover-ease), filter .28s ease; }
.hero-cta:hover img, .hero-cta:focus-visible img { filter: invert(1); }
.hero.is-ready .hero-cta { transition: opacity .8s ease calc(.35s + var(--i, 0) * .18s), transform 1.4s cubic-bezier(.45, 0, .55, 1) calc(.35s + var(--i, 0) * .18s), scale .45s var(--hover-ease), color .28s ease; }
/* the footer's Start has orange words: they turn black as it fills */
:where(.site) .bt-start { transition: scale .45s var(--hover-ease), color .28s ease; }
.bt-start:hover { color: #000; }

/* the menu's Log in: turns orange on hover, no growing */
.gm-login { transition: color .3s ease; }
.gm-login .gm-ico { display: block; width: calc(23.846 * var(--u)); height: calc(23.846 * var(--u)); background: currentColor;
  -webkit-mask: url("/assets/site/icon-user.svg") center / contain no-repeat; mask: url("/assets/site/icon-user.svg") center / contain no-repeat; }
.gm-login:hover, .gm-login:focus-visible { color: var(--orange); }

.hero-cta:hover, .by-cta:hover, .gm-start:hover, .bt-start:hover { scale: 1.05; }
.hero-cta img, .by-cta img { transition: translate .45s var(--hover-ease); }
.hero-cta:hover img, .by-cta:hover img { translate: calc(10 * var(--u)) 0; }
@media (prefers-reduced-motion: reduce) {
  .hero-cta img, .by-cta img { transition: none; }
}

/* the logo's "back to the start": the hero hides at once, with no fade out */
.hero.is-resetting .hero-media, .hero.is-resetting [data-reveal] { transition: none !important; }

/* the black shape that turns the menu into the round mark (site.js) */
.gm-blob { position: fixed; z-index: 48; /* under the lockup, so the mark and its figure show on it */ display: none; background: #000; pointer-events: none; }

/* =====================================================================
   PHONES (≤ 760px wide)
   The desktop folds are drawn in the 1920 frame; on a phone each fold gets
   its own composition, laid out here. Same pieces, same animations — only
   their places and sizes change. Folds are added one by one.
   ===================================================================== */
@media (max-width: 760px) {
  :root { --m: calc(100vw / 837); }
  /* ---------- the opening lockup (Figma "Mobile Initial Menu") ----------
     one row: the mark, the Spica bubble and a box with "For designers" over
     an orange "By designers."; --m is one pixel of the 837-wide phone frame */
  .hero-lockup { --m: calc(100vw / 837); left: 0; width: 100%; height: calc(200 * var(--m)); }
  .hl-mark  { left: calc(50 * var(--m)); top: calc(62.21 * var(--m)); width: calc(113.82 * var(--m)); height: calc(113.82 * var(--m)); }
  .hl-join  { width: calc(12.52 * var(--m)); height: calc(27.78 * var(--m)); }
  .hl-join-a { left: calc(162 * var(--m)); top: calc(105.2 * var(--m)); }
  .hl-pill  { left: calc(174.3 * var(--m)); top: calc(62.21 * var(--m)); width: calc(303.27 * var(--m)); height: calc(114.46 * var(--m)); border-radius: calc(63.79 * var(--m)); }
  .hl-word  { left: calc(219 * var(--m)); top: calc(97.1 * var(--m)); width: calc(208.06 * var(--m)); height: calc(44.17 * var(--m)); }
  .hl-join-b { left: calc(472.5 * var(--m)); top: calc(105.2 * var(--m)); }
  .hl-box   { left: calc(483 * var(--m)); top: calc(59 * var(--m)); width: calc(286 * var(--m)); height: calc(115 * var(--m)); border-radius: calc(17.54 * var(--m)); }
  .hl-for, .hl-by { left: calc(521 * var(--m)); width: auto; height: calc(38.31 * var(--m)); font-size: calc(30.21 * var(--m)); line-height: calc(38.31 * var(--m)); }
  .hl-for { top: calc(77.5 * var(--m)); }
  .hl-by  { top: calc(116.6 * var(--m)); color: var(--orange); }
  .hl-caret { display: none; }

  /* ---------- the general menu (Figma "Mobile General Menu") ----------
     a bar the width of the lockup: the Spica word, a small "Start free!"
     and the menu button */
  .gm {
    --m: calc(100vw / 837);
    left: calc(50 * var(--m)); top: calc(59 * var(--m)); width: calc(737 * var(--m)); height: calc(114 * var(--m));
    transform: none; padding: 0 calc(24 * var(--m)); border-radius: calc(17.93 * var(--m));
  }
  .gm-links, .gm-login { display: none !important; }
  .gm-logo img { width: calc(309 * var(--m)); height: calc(59.6 * var(--m)); }
  .gm-account { gap: calc(27.4 * var(--m)); }
  .gm-start { box-sizing: border-box; width: calc(192.6 * var(--m)); height: calc(66.6 * var(--m)); padding: 0; border-radius: calc(110.39 * var(--m));
    font-size: calc(23 * var(--m)); letter-spacing: .04em; }
  .gs-long { display: none; } .gs-short { display: inline; }
  .gm-burger { display: block; width: calc(57 * var(--m)); height: calc(57 * var(--m)); padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
  .gm-burger svg { display: block; width: 100%; height: 100%; }

  /* ---------- the open menu (Figma "Mobile General open Menu") ----------
     a panel under the bar, joined to it by an upright connector; it opens
     like the lockup is built: the connector grows down out of the bar, the
     panel unrolls downward, then its words come in one after another */
  .gmp-join, .gmp { display: block; }
  .gmp-join { position: fixed; z-index: 50; left: calc(395 * var(--m)); top: calc(172 * var(--m)); width: calc(46 * var(--m)); height: calc(27 * var(--m));
    transform-origin: 50% 0; transform: scaleY(0); transition: transform .2s cubic-bezier(.65, 0, .35, 1) .38s; pointer-events: none; }
  .gmp {
    position: fixed; z-index: 50; left: calc(50 * var(--m)); top: calc(198 * var(--m)); width: calc(737 * var(--m)); height: calc(1112 * var(--m));
    max-height: calc(100svh - 198 * var(--m) - 16px);
    background: #000; color: #fff; border-radius: calc(17.93 * var(--m));
    clip-path: inset(0 0 100% 0 round calc(17.93 * var(--m)));
    transition: clip-path .5s cubic-bezier(.65, 0, .35, 1) .1s, visibility 0s linear .62s;
    visibility: hidden; pointer-events: none;
  }
  .gmp > * { position: absolute; margin: 0; }
  .gmp-close { right: calc(18 * var(--m)); top: calc(26 * var(--m)); width: calc(69 * var(--m)); height: calc(69 * var(--m)); padding: calc(10 * var(--m)); border: 0; background: none; color: #fff; cursor: pointer; }
  .gmp-close svg { display: block; width: 100%; height: 100%; }
  .gmp-links { left: calc(95 * var(--m)); top: calc(128 * var(--m)); display: flex; flex-direction: column; gap: calc(79.63 * var(--m)); }
  .gmp-links a, .gmp-login { font: 300 calc(37 * var(--m)) / 1 var(--f-display); letter-spacing: .02em; color: #fff; text-decoration: none; }
  .gmp-login { left: calc(95 * var(--m)); top: calc(785.7 * var(--m)); display: flex; align-items: center; gap: calc(13.7 * var(--m)); }
  .gmp-login .gm-ico { display: block; width: calc(52.1 * var(--m)); height: calc(52.1 * var(--m)); background: currentColor;
    -webkit-mask: url("/assets/site/icon-user.svg") center / contain no-repeat; mask: url("/assets/site/icon-user.svg") center / contain no-repeat; }
  .gmp-start { left: calc(95 * var(--m)); top: calc(931.3 * var(--m)); box-sizing: border-box; width: calc(338.91 * var(--m)); height: calc(99.7 * var(--m));
    display: flex; align-items: center; justify-content: center; border-radius: calc(30.04 * var(--m)); background: #fff; color: #000;
    font: 400 calc(34.66 * var(--m)) / 1 var(--f-ui); letter-spacing: .04em; text-decoration: none; }
  .gmp-close, .gmp-links a, .gmp-login, .gmp-start { opacity: 0; translate: calc(-24 * var(--m)) 0; transition: opacity .2s ease, translate .25s ease; }
  /* open */
  .gm-open .gmp-join { transform: scaleY(1); transition-delay: 0s; }
  .gm-open .gmp { clip-path: inset(0 0 0 0 round calc(17.93 * var(--m))); visibility: visible; pointer-events: auto; transition: clip-path .55s cubic-bezier(.65, 0, .35, 1) .16s, visibility 0s; }
  .gm-open .gmp-close, .gm-open .gmp-links a, .gm-open .gmp-login, .gm-open .gmp-start { opacity: 1; translate: 0 0;
    transition: opacity .4s ease calc(.5s + var(--gi, 0) * .07s), translate .5s cubic-bezier(.22, 1, .36, 1) calc(.5s + var(--gi, 0) * .07s); }
  .gmp-links a:nth-child(1) { --gi: 1; } .gmp-links a:nth-child(2) { --gi: 2; } .gmp-links a:nth-child(3) { --gi: 3; }
  .gmp-links a:nth-child(4) { --gi: 4; } .gmp-links a:nth-child(5) { --gi: 5; } .gmp-login { --gi: 6; } .gmp-start { --gi: 7; }

  /* ---------- fold 1: hero ----------
     The words stack at the top; the picture block (the desktop one, drawn
     at a phone scale) stands at the foot. The fold is exactly the
     window's visible height, the light band and the picture's foot included. */
  .hero {
    --au: calc(100vw / 1150);
    /* where the black line under the title ends, and the Start button's foot */
    --txb: calc(20px + 290 * (100vw - 32px) / 760 + 28px - 51px + 2 * 1.12 * var(--hfs, clamp(28px, 8.6vw, 44px)) + 18px + 68px);
    --btb: calc(var(--txb) + 22px + 54px);
  }
  /* as on desktop: the orange fills the browser window's visible height
     exactly, and the white strip at the foot sits just below it. The height
     is taken once (site.js sets --hvh), so a browser bar sliding away while
     scrolling (Firefox) does not grow the fold or its pictures */
  .fold.hero { height: calc(100vh + 92 * var(--au)); height: calc(var(--hvh, 100svh) + 92 * var(--au)); }
  /* the rays reach up as far as the black line under the title and fade out there */
  .hero-rays { -webkit-mask-image: linear-gradient(transparent var(--txb), #000 calc(var(--txb) + 70px)); mask-image: linear-gradient(transparent var(--txb), #000 calc(var(--txb) + 70px)); }
  .hero-ground::after { height: calc(92 * var(--au)); }
  /* the picture block is drawn 25% larger than the width alone would give,
     still standing on the fold's foot, so it grows upward; centred, its
     sides run off the screen a little */
  .hero-art, .hero-rays { --u: calc(var(--au) * 1.75); }
  /* it grows until the cat's ears almost touch the Start button
     of the Start button (the ears' tips are 222 units down the block) */
  .hero-art, .hero-rays { --u: min(calc(var(--au) * 1.75), calc((var(--hvh, 100svh) + 92 * var(--au) - var(--btb) - 8px) / 871)); }
  .hero-art { bottom: 0; }
  .hero-art, .hero-rays { right: calc(50vw - 593.5 * var(--u)); }
  .hero-title {
    /* phones: the title, line and button can be nudged up or down together (--hy) */
    --hy: -51px;
    /* 10px of extra air on the right, so the title never runs to the edge */
    left: 16px; top: calc(20px + 290 * (100vw - 32px) / 760 + 28px + var(--hy)); width: calc(100vw - 42px);
    /* always two rows: site.js sizes it (--hfs) to the widest that still fits */
    font-size: var(--hfs, clamp(28px, 8.6vw, 44px)); line-height: 1.12;
  }
  .hero-sub {
    --hy: -51px;
    left: 16px; width: min(345px, calc(100vw - 32px));
    top: calc(20px + 290 * (100vw - 32px) / 760 + 28px + var(--hy) + 2 * 1.12 * var(--hfs, clamp(28px, 8.6vw, 44px)) + 18px);
    font-size: 15.5px; letter-spacing: .25px;
  }
  .hero-cta {
    left: 16px; width: auto; height: 54px; padding: 0 26px; gap: 12px;
    --hy: -51px;
    top: calc(20px + 290 * (100vw - 32px) / 760 + 28px + var(--hy) + 2 * 1.12 * var(--hfs, clamp(28px, 8.6vw, 44px)) + 18px + 68px + 22px);
    font-size: 16px; letter-spacing: .6px; border-radius: 40px;
  }
  .hero-cta img { width: 18px; height: 18px; }
}

/* ================= fold 1 — pictures arriving and living =================
   On load each picture comes in on its own beat: a soft fade with a slight
   rise and a touch of scale, eased in and out. The Start button settles the
   same way. Once in, the pictures lean toward the cursor, each by its depth
   (--dp; site.js sets --mx / --my). Entrance uses transform, the lean uses
   translate, so they never fight. */
.hero { --hero-ease: cubic-bezier(.45, 0, .55, 1); }
.hero-art > *, .hero-rays {
  opacity: 0; transform: translateY(calc(28 * var(--u))) scale(.965);
  transition: opacity 1.5s var(--hero-ease) calc(.15s + var(--hd, 0) * .17s), transform 1.8s var(--hero-ease) calc(.15s + var(--hd, 0) * .17s);
  translate: calc(var(--mx, 0) * var(--dp, 0) * var(--u)) calc(var(--my, 0) * var(--dp, 0) * var(--u));
}
.hero-rays { transform: translateY(calc(28 * var(--u))); }
.hero.is-ready .hero-art > *, .hero.is-ready .hero-rays { opacity: 1; transform: none; }
/* the white lines come in out of focus, and the focus travels: from the
   point where they meet (behind the cat) up to the top edge, a soft wide
   front. Two copies of the lines: a blurred one, and a sharp one revealed
   by a mask that rises; the blurred one is hidden by the opposite mask. */
.ha-sweep { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-size: 100% 300%; mask-size: 100% 300%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0; mask-position: 0 0;
  transition: -webkit-mask-position 2.6s var(--hero-ease) calc(.15s + var(--hd, 2) * .17s), mask-position 2.6s var(--hero-ease) calc(.15s + var(--hd, 2) * .17s); }
.ha-sweep-sharp { -webkit-mask-image: linear-gradient(to top, #000 33.33%, transparent 66.67%); mask-image: linear-gradient(to top, #000 33.33%, transparent 66.67%); }
.ha-sweep-soft { -webkit-mask-image: linear-gradient(to top, transparent 33.33%, #000 66.67%); mask-image: linear-gradient(to top, transparent 33.33%, #000 66.67%); }
.ha-sweep-soft .ha-rays { filter: blur(calc(14 * var(--u))); }
.hero.is-ready .ha-sweep { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
/* and that meeting point is feathered for good: the lines fade in from it
   rather than starting in a bundle (it sits behind the cat's head) */
.ha-rays, .ha-sparks {
  -webkit-mask-image: radial-gradient(circle at 6.8% 99.2%, transparent calc(18 * var(--u)), #000 calc(95 * var(--u)));
  mask-image: radial-gradient(circle at 6.8% 99.2%, transparent calc(18 * var(--u)), #000 calc(95 * var(--u)));
}
.ha-paper { --hd: 0; --dp: 4; }
.ha-strip { --hd: 1; --dp: 5; }
.ha-collage-b { --hd: 1; --dp: 12; }
.ha-collage-a { --hd: 2; --dp: 10; }
.hero-rays { --hd: 2; --dp: 3; }
.ha-px { --hd: 3; --dp: 16; }
.ha-cat { --hd: 3; --dp: 8; }
.ha-star { --hd: 5; --dp: 8; } /* ride with the cat, so they stay on its eyes */
.ha-kanji { --hd: 4; --dp: 18; }
.hero-cta { transform: translateY(calc(16 * var(--u))) scale(.97); }
.hero.is-ready .hero-cta { transform: none; }
.hero.is-resetting .hero-art > *, .hero.is-resetting .hero-rays, .hero.is-resetting .ha-sweep, .hero.is-resetting .hero-cta { transition: none !important; }

/* stars that run out along the white lines, now and then (site.js) */
.ha-sparks { position: absolute; left: calc(702 * var(--u)); bottom: calc((1093 - 477.387) * var(--u)); width: calc(542.186 * var(--u)); height: calc(3576.387 * var(--u)); pointer-events: none; }
.ha-spark { position: absolute; left: 0; top: 0; width: 0; aspect-ratio: 1; translate: -50% -50%; opacity: 0; }
.ha-spark svg { display: block; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .hero-art > *, .hero-rays, .hero-cta { transition: none !important; transform: none !important; translate: none !important; }
  .ha-sweep-soft { display: none; }
  .ha-sweep-sharp { -webkit-mask-image: none; mask-image: none; }
  .ha-sparks { display: none; }
}

/* a fold being put back off screen (site.js rewind): nothing animates while
   it returns to its waiting state */
.is-rewinding, .is-rewinding *, .is-rewinding *::before, .is-rewinding *::after { transition: none !important; animation: none !important; }

/* general menu links: orange and 5% larger on hover, eased in and out */
body .gm.is-live .gm-links > a, .gm-links > a { transition: color .35s cubic-bezier(.45, 0, .55, 1), scale .35s cubic-bezier(.45, 0, .55, 1) !important; }
.gm-links > a:hover, .gm-links > a:focus-visible { color: var(--orange); scale: 1.05; }

/* fold 5 while its pictures trail the cursor: it lifts above the next fold
   and lets them out of its bottom edge (sides and top stay cut); the sky and
   the portrait, which run 10 past the frame, are trimmed to it meanwhile */
.fw.is-trailing { z-index: 5; overflow: visible; clip-path: inset(0 0 -400vh 0); }
.fw-stars, .fw-woman { clip-path: inset(0 0 calc(10 * var(--k)) 0); }

/* the round mark is also a way back to the top */
.hl-mark { pointer-events: auto; cursor: pointer; }

/* ---- the capsule's title (Figma 855:4344 and its second state 855:4383),
   live so it can be built and can change. Two capsules joined by a
   connector: "Use Winning" (round) + "Proposals" (square), which turns into
   "Proposals" (square) + "That Wins!" (round). In the header's own frame
   (1594 × 738, Figma's group less 40 of air): the title stands at 323, 300. */
.pt-box { position: absolute; left: calc(323.18 * var(--u)); top: calc(300.01 * var(--u)); width: calc(928.72 * var(--u)); height: calc(139 * var(--u)); }
.pt-box > * { position: absolute; top: 0; display: block; }
.pt-l, .pt-r { height: 100%; background: #010101; }
.pt-l { left: 0; width: calc(497 * var(--u)); border-radius: calc(77.787 * var(--u)); }
.pt-r { left: calc(508.72 * var(--u)); width: calc(420 * var(--u)); border-radius: calc(21.385 * var(--u)); }
.pr-header .pt-join { left: calc(494.5 * var(--u)); top: calc(52.93 * var(--u)); width: calc(15.26 * var(--u)); height: calc(33.88 * var(--u)); transform-origin: 0 50%; }
.pt-w { top: calc(23 * var(--u)); font: 400 calc(61.531 * var(--u)) / calc(86 * var(--u)) var(--f-display); color: #fff; white-space: nowrap; pointer-events: none; }
.pt-a1 { left: calc(57.56 * var(--u)); } .pt-a2 { left: calc(570.56 * var(--u)); }
.pt-b1 { left: calc(56.16 * var(--u)); } .pt-b2 { left: calc(517.16 * var(--u)); }
/* where the cursor turns it: the right side gives "Proposals That Wins!",
   the left side brings back "Use Winning Proposals"; the two sides stay put
   while the capsules move, so the cursor never sets off a change by itself */
.pt-hot { height: 100%; cursor: default; }
.pt-hot-l { left: 0; width: 50%; }
.pt-hot-r { left: 50%; width: 50%; }

/* the change: the words leave, the capsules slide and reshape into their new
   places (the round one swaps sides with the square one), the new words come
   in; and the same backwards */
.pt-l, .pt-r, .pr-header .pt-join { transition: left .7s cubic-bezier(.65, 0, .35, 1) .2s; }
.pt-w { transition: opacity .2s ease, translate .2s ease; }
.pt-a1, .pt-a2 { transition: opacity .35s ease .75s, translate .45s cubic-bezier(.22, 1, .36, 1) .75s; }
.pt-b1, .pt-b2 { opacity: 0; translate: calc(-14 * var(--u)) 0; }
/* the capsules keep their shapes and trade places: the round one slides
   right, the square one slides left */
.pr-header.is-alt .pt-l { left: calc(431.72 * var(--u)); }
.pr-header.is-alt .pt-r { left: 0; }
.pr-header.is-alt .pt-join { left: calc(418.96 * var(--u)); }
.pr-header.is-alt .pt-a1, .pr-header.is-alt .pt-a2 { opacity: 0; translate: calc(14 * var(--u)) 0; transition: opacity .2s ease, translate .2s ease; }
.pr-header.is-alt .pt-b1, .pr-header.is-alt .pt-b2 { opacity: 1; translate: 0 0; transition: opacity .35s ease .75s, translate .45s cubic-bezier(.22, 1, .36, 1) .75s; }

/* entrance, built like the opening lockup: the round capsule draws out from
   its left, its words slide in, the connector grows out of it, the square
   capsule draws out, its words slide in */
@keyframes pt-draw-l { from { clip-path: inset(0 100% 0 0 round calc(77.787 * var(--u))); } to { clip-path: inset(0 0 0 0 round calc(77.787 * var(--u))); } }
@keyframes pt-draw-r { from { clip-path: inset(0 100% 0 0 round calc(21.385 * var(--u))); } to { clip-path: inset(0 0 0 0 round calc(21.385 * var(--u))); } }
@keyframes pt-reach { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes pt-word { from { opacity: 0; transform: translateX(calc(-34 * var(--u))); } to { opacity: 1; transform: none; } }
.pr.will-enter .pr-header:not(.is-in) .pt-box > :not(.pt-hot) { visibility: hidden; }
.pr-header.is-in .pt-l { animation: pt-draw-l .55s cubic-bezier(.65, 0, .35, 1) 1.05s backwards; }
.pr-header.is-in .pt-a1 { animation: pt-word .5s cubic-bezier(.65, 0, .35, 1) 1.3s backwards; }
.pr-header.is-in .pt-join { animation: pt-reach .2s cubic-bezier(.65, 0, .35, 1) 1.55s backwards; }
.pr-header.is-in .pt-r { animation: pt-draw-r .55s cubic-bezier(.65, 0, .35, 1) 1.72s backwards; }
.pr-header.is-in .pt-a2 { animation: pt-word .5s cubic-bezier(.65, 0, .35, 1) 1.97s backwards; }
@media (prefers-reduced-motion: reduce) {
  .pr-header.is-in .pt-box > * { animation: none; }
  .pt-l, .pt-r, .pr-header .pt-join, .pt-w { transition: none !important; }
}

/* ================= phones: fold 2 — what it is =================
   stacked: the title in two large rows, the progress dots, the picture as
   wide as the screen, then the tabs, each scaled up to fill the width */
@media (max-width: 760px) {
  .fold.what { height: auto; min-height: 100svh; padding: 168px 0 106px; box-sizing: border-box; }
  .what-stage { position: static; width: auto; height: auto; transform: none;
    display: flex; flex-direction: column; align-items: center; padding: 0 16px; }
  .what-stage > * { position: static; }
  .what-title { order: 1; width: 100%; white-space: normal; text-wrap: balance;
    font-size: var(--wfs, 7.2vw); line-height: 1.12; margin-top: 35px; }
  .what-dots { order: 2; translate: none; margin-top: 63px; gap: 8px; }
  .what-dots .wd { width: 8px; height: 8px; }
  .what-dots .wd.is-on { width: 36px; }
  .what-art { order: 3; position: relative; left: 0; top: 0; --k: calc((100vw - 24px) / 981);
    width: calc(981 * var(--k)); height: calc(846 * var(--k)); margin-top: 66px; }
  .what-tabs { order: 4; --k: calc((100vw - 32px) / 631.712);
    width: calc(631.712 * var(--k)); margin-top: 66px; gap: 6px; }
  .wt { padding: 10px 6px 22px; border-bottom-width: 1px; }
  .wt-head { font-size: calc(59.8 * var(--k)); font-weight: 400; }
  .wt-head img { width: 21.6px; height: 21.6px; }
  .wt-inner p { width: auto; font-size: 17.25px; line-height: 1.45; margin-top: 12px; }
  .wt-inner { gap: 14px; }
  .wt-link { font-size: 13.8px; letter-spacing: .3px; padding: 8px 0; gap: 8px; border-bottom-width: 1px; }
  .wt-link img { width: 14.4px; height: 14.4px; }
}

/* ================= phones: fold 3 — by designers =================
   the running "For Designers" line twice as large; under it the white card
   and the search bar stacked, each scaled up to use the screen's width (the
   card stays flush with the left edge, the bar still runs off the right) */
@media (max-width: 760px) {
  /* the ground's gradient drawn wider (running on past the right edge), so
     on a tall phone fold it reads round rather than a narrow upright oval */
  .fold.by { height: auto; min-height: 100svh; background-size: 200% 100%; background-position: left center; }
  .by-marquee { top: calc(-148 * var(--u)); }
  .by-track span { font-size: calc(607.5 * var(--u)); letter-spacing: calc(-18.225 * var(--u)); }
  .by-stage { position: relative; top: auto; width: auto; height: auto; transform: none;
    display: flex; flex-direction: column; align-items: flex-start; gap: 94px;
    padding: calc(560 * var(--u) + 40px) 0 90px;
    min-height: 100svh; box-sizing: border-box; justify-content: center; }
  .by-stage > * { position: relative; }
  /* the card comes in from the left edge and stops well short of the right,
     a box pushed in from the side */
  .by-card { --u: calc((100vw - 64px) / 655); left: 0; top: 0; }
  .by-bar { --u: calc((100vw - 16px) / 1000); left: 15px; top: 0; flex: none; }
  /* the card's words read larger on a phone: headline +15%, line +30%,
     button +30%; the card grows to hold them */
  .by-card { height: auto; padding-bottom: calc(62.68 * var(--u)); }
  .by-card { padding: calc(62.68 * var(--u)) 0 calc(62.68 * var(--u)) calc(55 * var(--u)); gap: calc(31.13 * var(--u)); }
  .by-card h2 { width: calc(575 * var(--u)); height: auto; font-size: calc(58.182 * 1.15 * var(--u)); line-height: 1.18; }
  .by-card p { width: calc(575 * var(--u)); height: auto; font-size: calc(22.64 * 1.3 * var(--u)); line-height: 1.52; letter-spacing: calc(.2264 * 1.3 * var(--u)); }
  .by-card .by-cta { margin-top: 0; }
  .by-card .by-cta { --u: calc((100vw - 64px) / 655 * 1.3); }
  /* clouds: the picture is portrait at its source, so on a phone it stands
     upright and just covers the fold instead of being blown up sideways;
     it drifts further than on desktop */
  .by-texture { left: 0; top: 0; width: 100%; height: 100%; transform: none; display: block; }
  .by-texture > div { width: 100%; height: 100%; transform: none; }
  .by-texture img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; scale: 1.24; animation-name: by-cloud-a-m; }
  .by-texture-2 img { scale: 1.36; animation-name: by-cloud-b-m; }
  @keyframes by-cloud-a-m { from { translate: -11.76% 5.88%; } to { translate: 11.76% -5.88%; } }
  @keyframes by-cloud-b-m { from { translate: 17.64% -8.83%; } to { translate: -17.64% 10.29%; } }
  /* the typed prompt as large as the longest one allows, ending 15px short of
     the screen's right edge (site.js sets --tfs) */
  .by-typed { font-size: var(--tfs, calc(38.064 * var(--u))); top: 50%; translate: 0 -50%; line-height: 1; }
}

/* ================= the ABC fold holds still while you scroll =================
   (desktop and phones) the fold stands centred in the window while the page
   scrolls on, and that scrolling turns the wheel instead: four models, one
   after another; then the page carries on to the next fold. The fold is
   pinned inside a taller run (one screen plus 60% of one per model). */
.abc-pin { position: relative; height: calc(100vh + 4 * 60vh); height: calc(100svh + 4 * 60svh); }
.abc-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; }

/* phone: the ABC stacks — the headline, the arrows laid on their side, then
   the wheel rolling in from the screen's left edge with the model beside it.
   Each part keeps the frame's own drawing at its own scale:
   --kt the headline (fills the width, 16px each side), --kn the arrows,
   --kw the wheel (sized so the longest model name ends 16px from the right).
   The fold is taller than the screen; it pins once its foot reaches the
   screen's foot, so the wheel turns in full view. */
@media (max-width: 760px) {
  .abc-pin {
    --kt: calc((100vw - 32px) / 644);
    --kn: calc(var(--kt) * 1.2);
    --kw: calc((100vw - 15px) / 760);
    --t0: 130px;                                              /* headline top */
    --tb: calc(var(--t0) + 509 * var(--kt));                  /* headline foot */
    --nc: calc(var(--tb) + 70px + 36 * var(--kn));            /* arrows' centre line */
    --ys: calc(var(--nc) + 36 * var(--kn) + 70px);           /* the slot */
    --H: calc(var(--ys) + 420px);                             /* the fold */
    --wx: calc(-1000 * var(--kw));
    --wy: calc(var(--ys) - 509 * var(--kw));
    height: calc(var(--H) + 4 * 60svh);
  }
  .abc-sticky { height: var(--H); top: min(0px, calc(100svh - var(--H))); }
  .fold.abc { --k: var(--kw); height: var(--H); }
  .abc-stage { left: 0; top: 0; transform: none; height: var(--H); }
  .abc-circle, .abc-ring, .abc-slotmask, .abc-ringfade, .abc-arc, .abc-in, .abc-detail { translate: var(--wx) var(--wy); }
  .abc-out { display: none; }

  .abc-title { --k: var(--kt); translate: calc(16px - 173 * var(--kt)) calc(var(--t0) - 303 * var(--kt)); }

  .abc-nav { --k: var(--kn); left: 50vw; top: var(--nc); translate: -50% -50%; rotate: -90deg; }

  /* the model: its headline stays where the wheel hands it over; the rest
     reads down a column under it, in sizes made for a phone */
  .ad[hidden] { display: none; }
  .ad {
    display: flex; flex-direction: column; align-items: flex-start;
    box-sizing: border-box; right: auto;
    width: calc(100vw - 16px - 189 * var(--kw) + 189 * var(--kw));
    padding: calc(171 * var(--kw) + 18px) 0 0 calc(189 * var(--kw));
  }
  .ad > * { position: relative; left: auto !important; top: auto !important; flex: none; }
  .ad > .ad-title { position: absolute; left: calc(189 * var(--kw)) !important; top: calc(92 * var(--kw)) !important; }
  .ad-chip {
    font-size: 10.5px; letter-spacing: .9px; padding: 3px 10px; border-radius: 4px; border-width: 1px;
    margin-top: 20px;
  }
  .ad > .ad-chip:first-of-type { margin-top: 0; }
  .ad-text { width: calc(100vw - 15px - 189 * var(--kw)); margin-top: 8px; font-size: 13.5px; letter-spacing: .3px; line-height: 1.5; }
  .ad-chart { --k: calc(var(--kw) * 1.5); width: min(calc(395 * var(--k)), calc(100vw - 15px - 189 * var(--kw))); overflow: hidden; height: calc(73 * var(--k)); margin-top: 10px; }
  .ad-chart > * { translate: calc(-327 * var(--k)) calc(-469.16 * var(--k)); }
  .ad-note { margin-top: 6px; font-size: 13.5px; letter-spacing: .3px; white-space: normal; width: calc(100vw - 15px - 189 * var(--kw)); }
}

/* phone: For Who stacks — the headline, the three portraits large (in the
   frame's own staggered group), the job titles three to a row, the line of
   text, and at the foot the woman and the white calligraphy coming in from
   the screen's left edge over a strip of night sky, with the ABC on the
   orange beside her. The stage becomes a grid so each part takes its own
   row; the sky and the orange stay laid behind it. */
@media (max-width: 760px) {
  .fw { height: auto; min-height: 100svh; --kc: calc((100vw - 24px) / 690 * .8); }
  .fw-stage {
    position: relative; left: 0; bottom: auto; transform: none;
    width: 100%; height: auto;
    display: grid; grid-template-columns: 100%; justify-items: center;
    padding-top: 128px;
  }
  .fw-stage > .fw-title, .fw-stage > .fw-card, .fw-stage > .fw-chips, .fw-stage > .fw-text,
  .fw-stage > .fw-woman, .fw-stage > .fw-kanji, .fw-stage > .fw-abc { position: relative; left: auto; top: auto; grid-column: 1; }
  .fw-orange { left: 0; top: 0; right: 0; bottom: 0; }
  .fw-stars {
    left: 0; top: auto; bottom: 0; width: 44vw; height: calc(64vw * 945 / 691 + 14px);
    -webkit-mask-image: none; mask-image: none; clip-path: none;
    object-fit: cover; object-position: 0% 60%; z-index: 1;
  }

  .fw-title {
    grid-row: 1; width: calc(100vw - 32px); white-space: normal; text-align: center; text-wrap: balance;
    font-size: calc((100vw - 32px) / 10.6 * 1.2); line-height: 1.357;
  }
  /* the three portraits share one cell, each set off as in the frame */
  .fw-card { --k: var(--kc); grid-row: 2; justify-self: start; align-self: start; margin-top: 44px; }
  /* the group is centred: (100vw - 690k) / 2 in from the left */
  .fw-c1 { margin-left: calc((100vw - 690 * var(--k)) / 2); margin-top: calc(44px + 60.26 * var(--k)); }
  .fw-c2 { margin-left: calc((100vw - 690 * var(--k)) / 2 + 218.33 * var(--k)); margin-top: calc(44px + 26.67 * var(--k)); }
  .fw-c3 { margin-left: calc((100vw - 690 * var(--k)) / 2 + 444.56 * var(--k)); margin-top: 44px; }
  .fw-chips {
    grid-row: 3; margin-top: 40px;
    display: grid; grid-template-columns: repeat(3, max-content); justify-content: center; gap: 6px 4px;
  }
  /* a title too long for a third of the row breaks onto two lines inside its capsule */
  .fw-chips { align-items: stretch; max-width: calc(100vw - 30px); grid-template-columns: repeat(3, minmax(0, max-content)); }
  .fw-chip {
    font-size: 10.5px; letter-spacing: .3px; line-height: 1.25; padding: 10px 9px; border-radius: 6px;
    white-space: normal; text-align: center;
    display: flex; align-items: center; justify-content: center;
  }
  .fw-chip.is-round { border-radius: 40px; }
  .fw-text {
    grid-row: 4; margin: 34px 0 0; width: calc(100vw - 48px);
    font-size: 15px; letter-spacing: .15px; line-height: 1.55;
  }
  /* the foot: woman from the left edge, the calligraphy over the sky above
     her shoulder, the ABC on the orange to her right */
  .fw-woman {
    grid-row: 5; justify-self: start; margin: 36px 0 0 -6vw;
    width: 64vw; height: calc(64vw * 945 / 691); clip-path: none; z-index: 2;
  }
  .fw-kanji {
    grid-row: 5; justify-self: start; align-self: start; margin: 0 0 0 4vw;
    width: 22vw; height: calc(22vw * 418 / 284); translate: 0 0; z-index: 3;
  }
  .fw-abc {
    grid-row: 5; justify-self: end; align-self: center; margin-right: -9vw;
    font-size: 30vw; line-height: 1; z-index: 2;
  }
}

/* the question card's arrows are a phone thing */
.bt-faq-nav { display: none; }

/* phone: the last fold. The lava fills the screen, with a short sign-up
   button in its middle and a larger Beta line crossing into the orange; the
   footer under it is just the logo and Start, the questions as one card at
   a time (100px), the line of copy and the cat. */
@media (max-width: 760px) {
  .bt { height: auto; }
  .bt-stage { position: relative; display: flex; flex-direction: column; }
  .bt-lava { position: relative; height: 80vh; height: 80svh; }
  .bt-orange { top: 80vh; top: 80svh; bottom: 0; height: auto; }
  :where(.site) .bt-signup {
    top: 40vh; top: 40svh; translate: -50% -50%;
    height: 62px; padding: 0 28px; gap: 14px; border-width: 1.5px; border-radius: 40px;
    font-size: 19px; letter-spacing: .5px;
  }
  .bt-signup img { width: 22px; height: 22px; }
  .bt-lead { display: none; }
  .bt-signup em { color: #fff; }
  .bt-signup .bt-hl { color: var(--orange); }
  .bt-beta {
    left: -8vw; width: auto; font-size: 34vw; letter-spacing: -1vw;
    top: calc(80vh - 25vw); top: calc(80svh - 25vw); line-height: 1;
  }

  .bt-foot { position: relative; inset: auto; padding: calc(34vw - 25vw + 34px) 16px 0; display: flex; flex-direction: column; gap: 32px; z-index: 1; }
  .bt-foot > * { position: relative; left: auto; top: auto; width: auto; }
  .bt-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .bt-link, .bt-login { display: none !important; }
  .bt-logo img { width: 150px; height: calc(150px * 50.199 / 198); }
  :where(.site) .bt-start { height: 54px; padding: 0 24px; border-radius: 16px; font-size: 18px; letter-spacing: .6px; }

  /* the questions as a list: each opens its answer under it with its arrow;
     opening one closes the one before */
  .bt-faq { display: block; border-top: 1px solid rgba(0, 0, 0, .55); }
  .bt-faq-nav { display: none; }
  .bt-q { display: block; border-bottom: 1px solid rgba(0, 0, 0, .55); }
  .bt-q h3 {
    position: relative; padding: 15px 40px 15px 0; cursor: pointer;
    font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: 0; text-transform: none;
    -webkit-tap-highlight-color: transparent;
  }
  .bt-q h3::after {
    content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px;
    border: solid #000; border-width: 0 1.5px 1.5px 0;
    translate: 0 -70%; rotate: 45deg; transition: rotate .35s ease, translate .35s ease;
  }
  .bt-q.is-open h3::after { rotate: -135deg; translate: 0 -25%; }
  .bt-q p {
    display: grid; overflow: hidden; max-height: 0; opacity: 0;
    font-size: 13.5px; line-height: 1.5;
    transition: max-height .45s ease, opacity .35s ease, padding .45s ease;
  }
  .bt-q.is-open p { max-height: 420px; opacity: 1; padding-bottom: 16px; }

  .bt-copy { white-space: normal; text-align: center; font-size: 12px; line-height: 1.5; padding: 0 8px; }
  .bt-legal { justify-content: center; gap: 20px; font-size: 12px; line-height: 1.5; order: 0; }
  /* 250px more orange at the foot, the cat sitting in the middle of it */
  .bt-cat { align-self: center; width: 130px; height: calc(130px * 153.903 / 229); margin: 109px 0 141px; }
}

/* phone: fold 6, laid out from the mobile frame (Figma 878:5948, 837 wide,
   so --m is one frame pixel). The capsule is its own squarer bubble with
   the two pills stacked; they swap places and words every 3.5s (site.js).
   The editor, panel, cursor and ghost keep their inner desktop layout,
   each scaled by its own --u. */
@media (max-width: 760px) {
  .pr { height: calc(3341 * var(--m) + 200px); background: var(--orange); }
  .pr-orange { height: calc(2600 * var(--m) + 200px); }
  .pr-black { height: calc(758 * var(--m)); }
  .pr-header { left: calc(23 * var(--m)); top: calc(126 * var(--m)); width: calc(790 * var(--m)); height: calc(831 * var(--m)); --u: var(--m); }
  .pc:not(.pc-m):not(.pc-title) { display: none; }
  .pr-header .pc, .pr-header:hover .pc { scale: none; translate: none; }
  .pc-m { display: block; }
  .pr-header .pc-m img { position: absolute; left: calc(-23 * var(--m)); top: calc(-126 * var(--m)); width: calc(837 * var(--m)); height: calc(960 * var(--m)); }
  .pt-box { left: 0; top: 0; width: 100%; height: 100%; }
  .pt-box > .pt-l, .pt-box > .pt-r { height: calc(159 * var(--m)); transition: left .7s cubic-bezier(.65, 0, .35, 1) .2s, top .7s cubic-bezier(.65, 0, .35, 1) .2s; }
  .pt-l { left: calc(116.3 * var(--m)); top: calc(248 * var(--m)); width: calc(568.5 * var(--m)); border-radius: calc(88.97 * var(--m)); }
  .pt-r { left: calc(175.7 * var(--m)); top: calc(439 * var(--m)); width: calc(449.5 * var(--m)); border-radius: calc(24.46 * var(--m)); }
  .pr-header .pt-join { display: none; }
  .pt-box > .pt-join-v { display: block; left: calc(374.8 * var(--m)); top: calc(406 * var(--m)); width: calc(51.5 * var(--m)); height: calc(34 * var(--m)); }
  .pt-w { font-size: calc(70.38 * var(--m)); line-height: calc(159 * var(--m)); text-align: center; }
  .pt-a1, .pt-b2 { left: calc(116.3 * var(--m)); width: calc(568.5 * var(--m)); top: calc(248 * var(--m)); }
  .pt-a2, .pt-b1 { left: calc(175.7 * var(--m)); width: calc(449.5 * var(--m)); top: calc(439 * var(--m)); }
  .pt-b1 { top: calc(248 * var(--m)); }
  .pt-b2 { top: calc(439 * var(--m)); }
  .pr-header.is-alt .pt-l { left: calc(116.3 * var(--m)); top: calc(439 * var(--m)); }
  .pr-header.is-alt .pt-r { left: calc(175.7 * var(--m)); top: calc(248 * var(--m)); }
  .pr-header.is-in .pt-join-v { animation: pt-reach-v .2s cubic-bezier(.65, 0, .35, 1) 1.55s backwards; transform-origin: 50% 0; }
  .pt-hot { display: none; }
  .pr-text {
    left: calc(46 * var(--m)); top: calc(967 * var(--m) + 100px); width: calc(745 * var(--m)); /* 100px of orange above the words… */
    margin-left: 0 !important;
    font-size: calc(44.48 * var(--m)); line-height: 1.45; letter-spacing: calc(.44 * var(--m)); white-space: normal; text-wrap: pretty;
  }
  /* …and 100px below them: everything under the words moves down 200px */
  .pr-kanji { left: calc(-57 * var(--m)); top: calc(1495 * var(--m) + 200px); width: calc(203 * var(--m)); height: calc(298 * var(--m)); }
  .pr-photo-tl { left: calc(222 * var(--m)); top: calc(1535 * var(--m) + 200px); width: calc(282 * var(--m)); height: calc(268 * var(--m)); }
  .pr-panel, .pr-ghost { --u: calc(155.8 / 188.774 * var(--m)); }
  .pr-panel { left: calc(574.8 * var(--m)); top: calc(1574.7 * var(--m) + 200px); }
  .pr-pill {
    left: calc(-1 * var(--m)); top: calc(1698 * var(--m) + 200px); width: calc(838 * var(--m)); height: calc(1247 * var(--m));
    border-radius: calc(100 * var(--m)); background: linear-gradient(180deg, #fbfbfb 0%, #f1f1f1 55%, #919191 100%);
  }
  .pr-editor { --u: calc(865 / 1058 * var(--m)); left: calc(-18.5 * var(--m)); top: calc(1935 * var(--m) + 200px); }
  .pr-cursor { --u: calc(1.4 * var(--m)); }
  .pr-quest { left: calc(115 * var(--m)); top: calc(2433 * var(--m) + 200px); width: calc(292 * var(--m)); height: calc(381 * var(--m)); }
  .pr-dollars { left: calc(471 * var(--m)); top: calc(2510 * var(--m) + 200px); font-size: calc(337.6 * var(--m)); letter-spacing: calc(-23.63 * var(--m)); }
  .pr-pre { --u: calc(231.148 / 231.148 * var(--m)); left: calc(-225 * var(--m)); top: calc(2612 * var(--m) + 200px); font-size: calc(231 * var(--m)); }
  .pr-pro { left: calc(145 * var(--m)); top: calc(2772 * var(--m) + 200px); font-size: calc(224.9 * var(--m)); }
  .pr-photo-br { left: calc(444 * var(--m)); top: calc(2772 * var(--m) + 200px); width: calc(271 * var(--m)); height: calc(271 * var(--m)); }
  .pr-float, .pr-drift { --fa: .6; }
}
@keyframes pt-reach-v { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: none; } }

/* ================= fold 3 — the agenda (Figma 884:6785) =================
   1920 × 2110 on the page's grey, scaled with the window's width. */
.fold.ag { height: calc(2110 * var(--u)); background: #f8f8f8; color: #000; }
.ag-stage { position: absolute; inset: 0; }
.ag-stage > * { position: absolute; }
.ag-title {
  left: calc(468 * var(--u)); top: calc(231 * var(--u)); width: calc(984 * var(--u));
  margin: 0; text-align: center; text-wrap: balance;
  font: 500 calc(64.132 * var(--u)) / 1.5 var(--f-display);
}
.ag-text { left: calc(491 * var(--u)); top: calc(639 * var(--u)); width: calc(937 * var(--u)); }
.ag-text p { margin: 0; font: 400 calc(30.22 * var(--u)) / 1.97 var(--f-display); }
.ag-text b { font-weight: 600; }
/* the words three times over (site.js): sharp below the line 30% down the
   screen (--fy), a soft grey copy by the halfway line between it and the
   line 10% down (--fz), and a far blurrier one above that; each crossing
   over to the next. Both lines are measured from the top of the fold. */
.ag-words { position: absolute; inset: 0; --fm: calc((var(--fy, -9999px) + var(--fz, -9999px)) / 2); }
.ag-words > * { position: absolute; }
.ag-words.is-soft, .ag-words.is-softer { pointer-events: none; user-select: none; }
.ag-words.is-soft { color: #b3b3b3; filter: blur(3.75px); }
.ag-words.is-softer { color: #c6c6c6; filter: blur(12px); }
.ag-words:not(.is-soft):not(.is-softer) {
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--fm), #000 var(--fy, -9999px));
  mask-image: linear-gradient(to bottom, transparent var(--fm), #000 var(--fy, -9999px));
}
.ag-words.is-soft {
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--fz, -9999px), #000 var(--fm), transparent var(--fy, -9999px));
  mask-image: linear-gradient(to bottom, transparent var(--fz, -9999px), #000 var(--fm), transparent var(--fy, -9999px));
}
.ag-words.is-softer {
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--fz, -9999px), transparent var(--fm));
  mask-image: linear-gradient(to bottom, #000 var(--fz, -9999px), transparent var(--fm));
}
/* each paragraph rises a touch and dissolves in, slowly, as it comes up */
.ag.will-rise .ag-rise { opacity: 0; translate: 0 calc(34 * var(--u)); }
.ag.will-rise .ag-rise.is-up {
  opacity: 1; translate: 0 0;
  transition: opacity 1.6s ease calc(var(--r, 0) * .12s), translate 1.8s cubic-bezier(.22, 1, .36, 1) calc(var(--r, 0) * .12s);
}

/* the stickers live on their own layer laid over the fold (site.js keeps it
   on the fold), so they can be thrown in from, and onto, the folds above and
   below; only the window's sides cut them */
.stk-free {
  --k: var(--u);
  --ease: cubic-bezier(.65, 0, .35, 1);
  position: absolute; left: 0; width: 100%; z-index: 6;
  overflow-x: clip; overflow-y: visible; pointer-events: none;
}
.stk-free-stage { position: absolute; inset: 0; }
/* where the agenda meets By Designers: the two folds' edges fall on a
   part-pixel, which lets a hairline of the orange through while By Designers
   is still veiled in the same grey. A strip of grey lies over the seam until
   the veil lifts, then fades with it. */
.stk-free::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 5px;
  background: #f8f8f8; pointer-events: none;
}
.stk-free:has(+ .by:not(.will-enter))::after { display: none; }
.stk-free:has(+ .by.is-in)::after { opacity: 0; transition: opacity 1.8s cubic-bezier(.45, 0, .55, 1); }
.stk-free .stk { pointer-events: auto; }
/* stickers: Figma's own exports; emoji laid on top (exports drop them) */
.stk { position: absolute; z-index: 1; }
/* stickers can be picked up and moved around; held, they grow 15% */
.stk { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.stk.is-dragging, .stk.is-thrown { z-index: 5; }
.stk.is-dragging { cursor: grabbing; }
/* past the middle of the screen they go out of focus with the words, keeping their colours (site.js sets --g) */
.stk { filter: blur(calc(var(--g, 0) * 12px)); }
.stk.is-dragging { filter: none; }
.stk img { display: block; width: 100%; height: 100%; }
.st-emoji { position: absolute; line-height: normal; white-space: nowrap; display: flex; align-items: center; justify-content: center; }
/* at the frame's places. "Get yes. Faster!" is two stickers stuck together:
   picked up they move as one; dropped, they come apart and land apart */
.st-chemistry { left: calc(66 * var(--k)); top: calc(773.5 * var(--k)); width: calc(293 * var(--k)); height: calc(293 * var(--k)); }
.st-faster { left: calc(1489.7 * var(--k)); top: calc(486.7 * var(--k)); width: calc(325 * var(--k)); height: calc(215 * var(--k)); }
.st-gytop { left: calc(1551 * var(--k)); top: calc(438.3 * var(--k)); width: calc(332 * var(--k)); height: calc(171 * var(--k)); }
.st-gytop .st-emoji {
  left: calc(119.4 * var(--k)); top: calc(38.6 * var(--k));
  width: calc(83.5 * var(--k)); height: calc(83.5 * var(--k));
  font-size: calc(64 * var(--k)); transform: rotate(17deg);
}
.st-nofree { left: calc(105.6 * var(--k)); top: calc(1414.6 * var(--k)); width: calc(266 * var(--k)); height: calc(266 * var(--k)); }
.st-yes { left: calc(1573 * var(--k)); top: calc(1683 * var(--k)); width: calc(315 * var(--k)); height: calc(315 * var(--k)); }
@keyframes st-spin { to { rotate: 360deg; } }
.st-dragit > img { animation: st-spin 40s linear infinite; }
.st-dragit { left: calc(212 * var(--k)); top: calc(142 * var(--k)); width: calc(235 * var(--k)); height: calc(235 * var(--k)); }
.st-dragit .st-emoji { inset: 0; line-height: 1; font-size: calc(100 * var(--k)); }
/* the fold's entrance: the stickers are thrown in by site.js (on transform) */
.stk-free.will-enter .stk { opacity: 0; }
.stk-free.is-in .stk { opacity: 1; scale: 1; transition: none; }
/* the lower two wait out of sight until the page reaches them */
.stk-free .stk.is-waiting { opacity: 0; pointer-events: none; }
.stk-free.is-in .stk.was-dragged { transition: scale .25s var(--ease); }
/* a sticker grows 15% under the cursor, as it does when picked up */
.stk-free.is-in.is-settled .stk { transition: scale .7s var(--ease), transform .7s var(--ease); }
/* hovered: a little larger and tilted its own way (--hr, 2–3°), slowly */
.stk-free.is-in .stk:hover { scale: 1.15; transform: rotate(var(--hr, 2.5deg)); transition: scale .7s var(--ease), transform .7s var(--ease); }
.stk-free.is-in .stk.is-dragging { scale: 1.15; transition: scale .2s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .st-dragit > img { animation: none; }
  .stk-free * { transition-duration: 0s !important; transition-delay: 0s !important; }
  .ag.will-rise .ag-rise { opacity: 1; translate: none; }
}

/* phone: the agenda from its mobile frame (878:6403, 837 wide; --m is one
   frame pixel). The stickers are simply there from the start (no throw-in)
   and run off the screen's sides as the frame has them. */
@media (max-width: 760px) {
  .fold.ag { height: calc(5626 * var(--m)); }
  .ag-title { left: calc(114 * var(--m)); top: calc(617 * var(--m)); width: calc(626 * var(--m)); font-size: calc(97.73 * var(--m)); line-height: 1.49; }
  .ag-text { left: calc(78 * var(--m)); top: calc(1961 * var(--m)); width: calc(680 * var(--m)); }
  .ag-text p { font-size: calc(43 * var(--m)); line-height: 1.7; }
  .ag.will-rise .ag-rise { translate: 0 22px; }
  .stk-free { --k: var(--m); }
  .stk-free.will-enter .stk { opacity: 1; }
  .stk-free .st-faster, .stk-free .st-gytop { z-index: 2; }
  .st-chemistry { left: calc(-53.5 * var(--k)); top: calc(4914.5 * var(--k)); width: calc(425.4 * var(--k)); height: calc(425.4 * var(--k)); }
  .st-nofree { left: calc(-38.4 * var(--k)); top: calc(1633.6 * var(--k)); width: calc(318.7 * var(--k)); height: calc(318.7 * var(--k)); }
  .st-yes { left: calc(572.8 * var(--k)); top: calc(4785.8 * var(--k)); width: calc(377.4 * var(--k)); height: calc(377.4 * var(--k)); }
  .st-dragit { left: calc(-15.5 * var(--k)); top: calc(263.5 * var(--k)); width: calc(357 * var(--k)); height: calc(357 * var(--k)); }
  .st-dragit .st-emoji { font-size: calc(152 * var(--k)); }
  .st-faster { left: calc(355.7 * var(--k)); top: calc(1588.8 * var(--k)); width: calc(426.4 * var(--k)); height: calc(282.1 * var(--k)); }
  .st-gytop { left: calc(436 * var(--k)); top: calc(1525.1 * var(--k)); width: calc(435.6 * var(--k)); height: calc(224.4 * var(--k)); }
  .st-gytop .st-emoji { left: calc(156.7 * var(--k)); top: calc(50.6 * var(--k)); width: calc(109.5 * var(--k)); height: calc(109.5 * var(--k)); font-size: calc(84 * var(--k)); }
}

/* "Log out" when signed in: a button in a form, drawn exactly like the
   "Log in" link it replaces */
.site-out { display: contents; }
:where(.site-out) button { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.gmp .site-out .gmp-login { position: absolute; }