/* Site shell in the home page's style: nav, menu, buttons, footer (home, terms, privacy, security,
   buyers), plus the home page's own sections. */
:root {
  --f-paper: #f7f6f2;
  --f-paper-2: #efede7;
  --f-ink: #141011;
  --f-ink-2: #4a4744;
  --f-mute: #8a8680;
  --f-line: #e0dcd4;
  --f-dark: #141313;
  --f-pad: clamp(16px, 4.5vw, 64px);
  --f-nav: 64px;
  --f-ease: cubic-bezier(.16, 1, .3, 1);
  --f-sans: "Inter", -apple-system, system-ui, sans-serif;
  --f-head: "Inter Tight", "Inter", -apple-system, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Erik, 6 Nov: pulling past the end of the page on a phone showed a white strip under the dark footer.
   The canvas behind the page is the footer's black, so overscroll stays black at either end; the page
   itself keeps its paper background and always fills the screen. */
html:has(> body.front) { background: #141313; }
body.front { min-height: 100vh; }
html.lenis, html.lenis body { height: auto; }
body.front { margin: 0; background: var(--f-paper); color: var(--f-ink); font: 400 16px/1.55 var(--f-sans); -webkit-font-smoothing: antialiased; }
body.front.is-locked { overflow: hidden; }
.front a { color: inherit; text-decoration: none; }
.front h1, .front h2, .front h3, .front h4, .front p { margin: 0; }
.front button { font: inherit; color: inherit; }

/* ---------- Nav ---------- */
.fn {
  position: sticky; top: 0; z-index: 40; height: var(--f-nav); padding: 0 var(--f-pad);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--f-paper); transition: box-shadow .3s;
}
.fn.is-scrolled { box-shadow: 0 1px 0 rgba(20, 16, 17, .06); }
.fn-brand { display: flex; align-items: center; gap: 10px; height: 34px; }
.fn-cube { width: 22px; height: 22px; flex: none; }
.fn-word { display: block; overflow: hidden; width: 112px; transition: width .6s var(--f-ease), opacity .4s; }
.fn-word svg { display: block; width: 112px; height: 16px; transition: transform .6s var(--f-ease); }
.fn.is-scrolled .fn-word { width: 0; opacity: 0; }
.fn.is-scrolled .fn-word svg { transform: translateX(-32px); }
.fn-right { display: flex; align-items: center; gap: 8px; flex: none; margin-left: 12px; }
.fn-pill, .fn-icon {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; border: 1px solid var(--f-line); background: var(--f-paper); border-radius: var(--r, 10px); cursor: pointer;
  transition: background .2s, border-color .2s;
}
.fn-pill { padding: 0 13px 0 15px; font-size: 15px; white-space: nowrap; }
.fn-pill:hover, .fn-icon:hover { background: var(--f-paper-2); }
.fn-icon { width: 34px; border-radius: 10px; }
.fn-icon svg { width: 18px; height: 18px; }
.fn-chev { width: 11px; height: 11px; transition: transform .3s var(--f-ease); }
.fn-drop { position: relative; }
.fn-drop.is-open .fn-chev { transform: rotate(180deg); }
.fn-dropmenu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 270px; padding: 6px;
  background: #fff; border: 1px solid var(--f-line); border-radius: 14px; box-shadow: 0 18px 50px rgba(20, 16, 17, .1);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity .2s, transform .3s var(--f-ease), visibility 0s .3s;
}
.fn-drop.is-open .fn-dropmenu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .3s var(--f-ease); }
.fn-dropmenu a { display: block; padding: 11px 13px; border-radius: 10px; }
.fn-dropmenu a:hover { background: var(--f-paper); }
.fn-dropmenu strong { display: block; font-weight: 500; font-size: 15.5px; }
.fn-dropmenu span { display: block; color: var(--f-mute); font-size: 14px; margin-top: 1px; }

/* ---------- Full-screen menu ---------- */
.fm {
  position: fixed; inset: 0; z-index: 60; background: var(--f-dark); color: #f4f2ee;
  display: flex; flex-direction: column; padding: 0 var(--f-pad) 36px;
  opacity: 0; visibility: hidden; transition: opacity .35s var(--f-ease), visibility 0s .35s;
}
.fm.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--f-ease); }
.fm-top { height: var(--f-nav); display: flex; align-items: center; justify-content: space-between; flex: none; }
.fm-logo svg { display: block; width: 24px; height: 24px; }
.fm-close { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #f4f2ee; }
.fm-close:hover { background: rgba(255, 255, 255, .12); }
.fm-list { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; }
.fm-list a {
  font: 500 clamp(38px, 5.6vw, 68px)/1.2 var(--f-head); letter-spacing: -.02em; color: #8f8a84;
  transform: translateY(24px); opacity: 0; transition: color .2s, transform .7s var(--f-ease), opacity .5s;
}
.fm-list a.is-current, .fm-list a:hover { color: #fbfaf7; }
.fm.is-open .fm-list a { transform: none; opacity: 1; }
.fm.is-open .fm-list a:nth-child(2) { transition-delay: 0s, .05s, .05s; }
.fm.is-open .fm-list a:nth-child(3) { transition-delay: 0s, .1s, .1s; }
.fm.is-open .fm-list a:nth-child(4) { transition-delay: 0s, .15s, .15s; }
.fm.is-open .fm-list a:nth-child(5) { transition-delay: 0s, .2s, .2s; }
.fm-foot { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; color: #8f8a84; flex: none; }
.fm-foot a:hover { color: #fbfaf7; }

/* ---------- Buttons ---------- */
.fb {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: var(--r, 10px);
  font: 400 16px/1 var(--f-sans); white-space: nowrap; border: 1px solid var(--f-ink); transition: background .2s, color .2s;
  cursor: pointer;
}
.fb-dark { background: var(--f-ink); color: #fbfaf7 !important; }
.fb-dark:hover { background: #2c2728; }
.fb-line { background: transparent; }
.fb-line:hover { background: var(--f-ink); color: #fbfaf7 !important; }

/* ---------- Home: hero ---------- */
.fh { padding: clamp(56px, 11vh, 128px) var(--f-pad) clamp(44px, 7vh, 72px); }
.fh-lede { font: 500 clamp(26px, 3.1vw, 46px)/1.18 var(--f-head); letter-spacing: -.025em; max-width: 42ch; }
.js [data-rise] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--f-ease), transform 1.1s var(--f-ease); }
.js.is-loaded [data-rise] { opacity: 1; transform: none; }

/* ---------- Home: corpus wall ---------- */
.fw { position: relative; height: 380vh; }
.fw-stage { position: sticky; top: var(--f-nav); height: calc(100vh - var(--f-nav)); padding: 0 var(--f-pad) var(--f-pad); }
.fw-box { position: relative; height: 100%; border-radius: 18px; background: var(--f-paper-2); overflow: hidden; contain: layout paint; }
.fw-tiles { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.fw-tile {
  position: absolute; left: -300px; top: -192px; width: 600px; height: 384px; overflow: hidden; background: #fff;
  border-radius: 16px; will-change: transform, opacity; opacity: 0; backface-visibility: hidden;
}
.fw-tile > svg, .fw-tile > img, .fw-tile > canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.fw-tile > svg { font-family: "Geist", -apple-system, system-ui, sans-serif; }
.fw-copy {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: min(520px, calc(100% - 48px)); transform: translate(-50%, -50%) scale(.4);
  padding: clamp(28px, 4vw, 44px); background: #fff; border-radius: 22px; box-shadow: 0 30px 80px rgba(20, 16, 17, .14), 0 2px 6px rgba(20, 16, 17, .05);
  text-align: center; opacity: 0; pointer-events: none;
}
.fw-copy.is-on { pointer-events: auto; }
.fw-copy h2 { font: 500 clamp(32px, 4vw, 54px)/1.08 var(--f-head); letter-spacing: -.02em; }
.fw-copy p { margin: 14px auto 24px; max-width: 40ch; font-size: clamp(17px, 1.4vw, 19px); color: var(--f-ink-2); }

/* ---------- Home: three ways in (stacked cards) ---------- */
.fs { position: relative; height: 340vh; margin-top: clamp(48px, 8vh, 96px); }
.fs-stage { position: sticky; top: var(--f-nav); height: calc(100vh - var(--f-nav)); padding: 0 var(--f-pad) var(--f-pad); }
.fs-card {
  position: absolute; left: var(--f-pad); right: var(--f-pad); top: 0; bottom: var(--f-pad);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(28px, 4vw, 56px); background: #fbfaf7; border: 1px solid var(--f-line); border-radius: 22px;
  box-shadow: 0 -12px 40px rgba(20, 16, 17, .06); transform-origin: 50% 0; will-change: transform;
}
.fs-text { max-width: 46ch; }
.fs-text h3 { font: 500 clamp(26px, 2.6vw, 36px)/1.15 var(--f-head); letter-spacing: -.02em; margin-bottom: 14px; }
.fs-text p { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--f-ink-2); margin-bottom: 28px; }
.fs-art { position: relative; height: 100%; min-height: 260px; border-radius: 16px; background: var(--f-paper-2); overflow: hidden; }
.fs-dim { position: absolute; inset: 0; border-radius: inherit; background: var(--f-ink); opacity: 0; pointer-events: none; will-change: opacity; }
/* Marketplace: a deck of corpus cards that deals itself out */
.fs-deck .dk { position: absolute; left: 50%; top: 50%; width: 600px; height: 384px; margin: -192px 0 0 -300px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(20, 16, 17, .1); will-change: transform; }
.fs-deck .dk > svg, .fs-deck .dk > img, .fs-deck .dk > canvas { display: block; width: 100%; height: 100%; object-fit: cover; font-family: "Geist", -apple-system, system-ui, sans-serif; }
/* Sell your data: apps feeding the extractor */
.fs-pipe svg.pp { position: absolute; inset: 0; width: 100%; height: 100%; }
.fs-pipe .app { position: absolute; left: 9%; width: 34%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #fff; border: 1px solid var(--f-line); border-radius: 12px; transform: translateY(-50%); font-size: 14.5px; contain: layout paint; }
.fs-pipe .app svg { width: 22px; height: 22px; flex: none; }
.fs-pipe .app b { font-weight: 500; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-pipe .app i { font-style: normal; font-size: 12.5px; color: var(--f-mute); font-variant-numeric: tabular-nums; }
.fs-pipe .app .bar { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; background: var(--f-line); border-radius: 2px; overflow: hidden; }
.fs-pipe .app .bar span { display: block; height: 100%; width: 100%; background: var(--f-ink); transform: scaleX(0); transform-origin: 0 50%; }
.fs-pipe .sink { position: absolute; right: 9%; top: 50%; width: 30%; transform: translateY(-50%); padding: 22px 18px; background: var(--f-ink); color: #f4f2ee; border-radius: 16px; text-align: center; contain: layout paint; }
.fs-pipe .sink svg { width: 34px; height: 34px; display: block; margin: 0 auto 12px; }
.fs-pipe .sink b { display: block; font-weight: 500; font-size: 15px; }
.fs-pipe .sink i { display: block; font-style: normal; font-size: 13px; color: #a7a19a; margin-top: 4px; font-variant-numeric: tabular-nums; }
/* Partners: globe */
.fs-globe canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Footer ---------- */
.ff { background: var(--f-dark); color: #b9b4ad; padding: clamp(56px, 8vh, 96px) var(--f-pad) 32px; }
.ff-inner { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.ff-logo { color: #f4f2ee; }
.ff-logo svg { display: block; width: 32px; height: 32px; }
.ff-cols { display: grid; grid-template-columns: repeat(3, minmax(140px, auto)); gap: 32px 64px; }
.ff-cols h4 { font: 400 14px/1 var(--f-sans); color: #77726c; margin: 0 0 18px; }
.ff-cols a { display: block; padding: 5px 0; font-size: 16px; transition: color .2s; }
.ff-cols a:hover { color: #fbfaf7; }
.ff-bar { margin-top: clamp(64px, 12vh, 140px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ff-word { width: min(480px, 70vw); height: auto; aspect-ratio: 1683 / 234; color: #f4f2ee; }
.ff-bar p { font-size: 14px; color: #77726c; }

/* ---------- Text pages (terms, privacy, security) ---------- */
.fp { padding: clamp(56px, 10vh, 120px) var(--f-pad) clamp(80px, 12vh, 140px); }
.fp-head { max-width: 760px; margin: 0 auto clamp(40px, 7vh, 72px); }
.fp-head h1 { font: 500 clamp(38px, 5vw, 64px)/1.08 var(--f-head); letter-spacing: -.02em; }
.fp-head p { margin-top: 16px; font-size: clamp(18px, 1.6vw, 21px); color: var(--f-ink-2); }
.fp-body { max-width: 760px; margin: 0 auto; font-size: 18px; line-height: 1.65; color: #2b2728; }
.fp-body h2 { font: 500 clamp(24px, 2.4vw, 30px)/1.25 var(--f-head); letter-spacing: -.01em; color: var(--f-ink); margin: 56px 0 14px; padding-top: 28px; border-top: 1px solid var(--f-line); }
.fp-body h3 { font: 600 18px/1.35 var(--f-sans); color: var(--f-ink); margin: 32px 0 10px; }
.fp-body p, .fp-body ul, .fp-body ol { margin: 0 0 16px; }
.fp-body ul, .fp-body ol { padding-left: 1.3em; }
.fp-body li { margin: 6px 0; }
.fp-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #b9b3aa; }
.fp-body a:hover { text-decoration-color: var(--f-ink); }
.fp-body strong { font-weight: 600; color: var(--f-ink); }
.fp-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 16px; }
.fp-body th, .fp-body td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--f-line); }
.fp-body th { font-weight: 600; color: var(--f-ink); }
.fp-close {
  max-width: 760px; margin: 72px auto 0; padding: 32px 0 0; border-top: 1px solid var(--f-line);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.fp-close h2 { font: 500 26px/1.25 var(--f-head); }
.fp-close p { margin-top: 6px; color: var(--f-ink-2); }
.fp-close a:not(.fb) { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Buyers request form ---------- */
.fq {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px);
  padding: clamp(56px, 10vh, 120px) var(--f-pad) clamp(80px, 12vh, 140px); max-width: 1320px; margin: 0 auto;
}
.fq h1 { font: 500 clamp(38px, 5vw, 64px)/1.08 var(--f-head); letter-spacing: -.02em; }
/* Bare bones (Erik, 9 Nov 2026): one column, the heading over the form. */
.fq.fq-bare { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 640px; }
.fq-bare .fq-done { margin-top: 0; border-top: 0; }
.fq-bare .fq-done h2 { margin-top: 0; }
.fq .fq-lede { margin-top: 16px; font-size: clamp(18px, 1.6vw, 21px); color: var(--f-ink-2); max-width: 36ch; }
.fq-points, .fq-done { margin-top: 40px; border-top: 1px solid var(--f-line); }
.fq-points p { padding: 16px 0; border-bottom: 1px solid var(--f-line); color: var(--f-ink-2); font-size: 16.5px; }
.fq-points strong, .fq-done h2 { font-weight: 500; color: var(--f-ink); }
.fq-done h2 { font: 500 26px/1.25 var(--f-head); margin: 24px 0 8px; }
.fq-done p { color: var(--f-ink-2); }
.fq-form { display: flex; flex-direction: column; gap: 22px; padding-top: 8px; }
.fq-field span { display: block; font-size: 15px; color: var(--f-ink-2); margin-bottom: 8px; }
.fq-field input, .fq-field textarea {
  width: 100%; padding: 13px 15px; font: 400 17px/1.4 var(--f-sans); color: var(--f-ink);
  background: #fff; border: 1px solid var(--f-line); border-radius: 12px; outline: none; resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}
.fq-field input:focus, .fq-field textarea:focus { border-color: var(--f-ink); box-shadow: 0 0 0 3px rgba(20, 16, 17, .06); }
.fq-field .invalid { border-color: #c4462f; }
.fq-error { color: #c4462f; font-size: 15px; }
.fq-submit { align-self: flex-start; height: 48px; padding: 0 28px; }
.fq-submit:disabled { opacity: .6; cursor: default; }
.fq-fine { font-size: 15px; color: var(--f-mute); }
.fq-fine a { text-decoration: underline; text-underline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  :root { --f-nav: 58px; }
  .fn-pill { padding: 0 11px 0 13px; font-size: 14.5px; }
  .fn-word, .fn-word svg { width: 100px; }
  .fn-word svg { height: 14px; }
  .fw { height: 340vh; }
  .fs { height: 320vh; }
  .fs-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: stretch; gap: 20px; padding: 22px; }
  .fs-text p { margin-bottom: 18px; font-size: 15.5px; }
  .fs-text h3 { margin-bottom: 8px; }
  .fs-art { min-height: 0; }
  .fs-pipe .app { left: 4%; width: 50%; font-size: 12.5px; padding: 7px 8px; gap: 7px; border-radius: 10px; }
  .fs-pipe .app svg { width: 18px; height: 18px; }
  .fs-pipe .app .bar { left: 8px; right: 8px; bottom: 4px; }
  .fs-pipe .app i { display: none; }
  .fs-pipe .sink { right: 4%; width: 36%; padding: 14px 4px; border-radius: 14px; }
  .fs-pipe .sink svg { width: 26px; height: 26px; margin-bottom: 8px; }
  .fs-pipe .sink b { font-size: 12px; white-space: nowrap; }
  .fs-pipe .sink i { font-size: 11px; }
  .ff-cols { grid-template-columns: 1fr 1fr; gap: 28px 40px; }
  .fp-body { font-size: 17px; }
  .fq { grid-template-columns: 1fr; }
}
/* Small phones: the wordmark shrinks before the "Sell your data" pill would have to wrap. */
@media (max-width: 380px) {
  .fn-brand { gap: 8px; }
  .fn-word, .fn-word svg { width: 84px; }
  .fn-word svg { height: 12px; }
  .fn-pill { padding: 0 9px 0 11px; font-size: 14px; gap: 5px; }
  .fn-right { gap: 6px; }
  .fs-pipe .sink b { font-size: 11px; }
  .fs-pipe .app { font-size: 12px; }
}
@media (max-width: 330px) {
  .fn-word { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-rise], .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Phones: the "Sell your data" pill never wraps (the wordmark gives way instead), and its menu
   spans the screen under the nav so it can't run off the left edge. */
.fn-pill { white-space: nowrap; flex: none; }
.fn-brand { min-width: 0; }
@media (max-width: 760px) {
  .fn-dropmenu { position: fixed; left: 12px; right: 12px; top: calc(var(--f-nav) + 4px); width: auto; transform-origin: top center; }
}
@media (max-width: 400px) {
  .fn-word, .fn-word svg { width: 86px; }
  .fn-word svg { height: 12px; }
}
@media (max-width: 350px) {
  .fn-word { width: 0; opacity: 0; }
}

/* Marketplace pop-up: heading and one centred button. */
.fw-copy { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.fw-copy .fb { align-self: center; margin: 0; }
@media (max-width: 760px) {
  .fh { padding: 28px var(--f-pad) 22px; }
  .fw-stage { height: calc(100svh - var(--f-nav)); }
}

/* Fit the sticky stages in the visible area even in in-app browsers (X, Instagram), whose toolbars
   make 100vh taller than what's on screen: use the small viewport height where supported. */
.fw-stage, .fs-stage { height: calc(100vh - var(--f-nav)); height: calc(100svh - var(--f-nav)); }
@media (max-width: 760px) {
  .fs-stage { padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .fs-card { padding: 18px; gap: 14px; }
  .fs-text h3 { font-size: clamp(22px, 6vw, 26px); }
  .fs-text p { font-size: 15px; line-height: 1.5; margin-bottom: 14px; }
}
@media (max-width: 760px) and (max-height: 680px) {
  .fs-text p { font-size: 14px; margin-bottom: 10px; }
  .fs-text .fb { height: 38px; font-size: 15px; }
}
.fw-copy .fb { max-width: 100%; }
.fw-copy p { margin: -8px auto 0; max-width: 32ch; }

/* Nav wordmark: slides out from behind the cube instead of being clipped on both sides. The box
   width and the slide share one duration and easing, so the word's right edge always sits on the
   box edge and only the cube side hides it. */
.fn-brand { gap: 0; }
.fn-cube { position: relative; z-index: 1; }
.fn-word { margin-left: 10px; transition: width .55s var(--f-ease), margin-left .55s var(--f-ease), opacity .35s ease .2s; }
.fn-word svg { transition: transform .55s var(--f-ease); }
.fn.is-scrolled .fn-word { margin-left: 0; opacity: 0; transition: width .55s var(--f-ease), margin-left .55s var(--f-ease), opacity .3s ease .25s; }
.fn.is-scrolled .fn-word svg { transform: translateX(-100%); }
/* Marketplace pop-up button: a wide rectangle, like the marketplace search box (Erik, 5 Nov). */
.fw-copy .fb-wide { min-width: min(320px, 100%); height: 52px; padding: 0 32px; border-radius: 8px; font-size: 17px; }
.fw-copy h2 { max-width: 20ch; margin-left: auto; margin-right: auto; font-size: clamp(28px, 3vw, 42px); }

/* Marketplace pop-up: a little motion behind it (Erik, 5 Nov). Soft colour fields in the data-mix
   colours drift slowly; still for anyone who prefers reduced motion. */
.fw-box::before {
  content: ""; position: absolute; inset: -20%; pointer-events: none; z-index: 0; opacity: .55;
  background:
    radial-gradient(28% 32% at 20% 30%, rgba(44, 110, 221, .35), transparent 70%),
    radial-gradient(24% 28% at 80% 25%, rgba(232, 160, 32, .32), transparent 70%),
    radial-gradient(26% 30% at 70% 80%, rgba(31, 168, 119, .30), transparent 70%),
    radial-gradient(22% 26% at 25% 78%, rgba(229, 90, 60, .26), transparent 70%);
  will-change: transform;
}
/* It only drifts while the marketplace card is up, so the rest of the page pays nothing for it. */
.fw-box:has(.fw-copy.is-on)::before { animation: fw-drift 18s ease-in-out infinite alternate; }
.fw-tiles { z-index: 1; }
@keyframes fw-drift {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(4%, -3%) rotate(8deg) scale(1.06); }
  100% { transform: translate(-4%, 3%) rotate(-6deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .fw-box::before { animation: none; } }
/* Phones: the headline and the button, no paragraph. */
@media (max-width: 760px) {
  .fw-copy p { display: none; }
  .fw-copy h2 { font-size: clamp(26px, 7.4vw, 32px); }
}
/* Desktop: the headline on one line (Erik, 5 Nov). Narrower screens wrap as before. */
@media (min-width: 1100px) {
  .fw-copy { width: max-content; max-width: calc(100% - 48px); }
  .fw-copy p { max-width: 54ch; }
  .fw-copy h2 { max-width: none; white-space: nowrap; font-size: clamp(36px, 3.6vw, 60px); }
}
/* Desktop: the lede on one line (Erik, 6 Nov). Narrower screens wrap as before. */
@media (min-width: 1100px) {
  .fh-lede { max-width: none; white-space: nowrap; font-size: min(72px, calc((100vw - 140px) * .0334)); letter-spacing: -.03em; }
}

/* Buyside pill beside "Sell your data" (Erik, 8 Nov). On phones the wordmark would be clipped,
   so the brand shows just the cube, as it does once the page is scrolled. */
@media (max-width: 480px) {
  .fn-word { display: none; }
}

/* Phones (Erik, 8 Nov: "remove the buy side button, it just gets too messy"): the header keeps the
   logo, "Sell your data" and the menu. Buyside stays one tap away as the menu's "Buyside" link. */
@media (max-width: 760px) {
  .fn-buy { display: none; }
}

/* "Get an evaluation" on phones (Erik, 8 Nov: "feels slightly badly proportioned on phone view"). The
   card's button runs the full width of the text, and the diagram turns on its side: the five sources
   as one row of icon tiles across the top, each with its progress bar, and the "Preparing" tile as a
   full-width bar along the bottom, so nothing is squeezed and the lines no longer cross. */
@media (max-width: 760px) {
  .fs-text { max-width: none; }
  .fs-text .fb { display: flex; width: 100%; justify-content: center; }
  .fs-pipe { --pp: 12px; --pg: 8px; }
  .fs-pipe .app { top: var(--pp) !important; transform: none; width: calc((100% - 2 * var(--pp) - 4 * var(--pg)) / 5); height: 52px; padding: 0; justify-content: center; }
  .fs-pipe .app:nth-of-type(1) { left: var(--pp); }
  .fs-pipe .app:nth-of-type(2) { left: calc(var(--pp) + (100% - 2 * var(--pp) - 4 * var(--pg)) / 5 + var(--pg)); }
  .fs-pipe .app:nth-of-type(3) { left: calc(var(--pp) + 2 * ((100% - 2 * var(--pp) - 4 * var(--pg)) / 5 + var(--pg))); }
  .fs-pipe .app:nth-of-type(4) { left: calc(var(--pp) + 3 * ((100% - 2 * var(--pp) - 4 * var(--pg)) / 5 + var(--pg))); }
  .fs-pipe .app:nth-of-type(5) { left: calc(var(--pp) + 4 * ((100% - 2 * var(--pp) - 4 * var(--pg)) / 5 + var(--pg))); }
  .fs-pipe .app svg { width: 22px; height: 22px; }
  .fs-pipe .app b, .fs-pipe .app i { display: none; }
  .fs-pipe .app .bar { left: 10px; right: 10px; bottom: 7px; }
  .fs-pipe .sink { left: var(--pp); right: var(--pp); top: auto; bottom: var(--pp); width: auto; transform: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left; border-radius: 12px; }
  .fs-pipe .sink svg { width: 24px; height: 24px; margin: 0; flex: none; }
  .fs-pipe .sink b { font-size: 15px; white-space: nowrap; }
  .fs-pipe .sink i { margin: 0 0 0 auto; font-size: 13px; white-space: nowrap; }
  .fs-art { border-radius: 14px; }
  /* On a tall phone the diagram keeps a compact height and sits in the middle of its panel. */
  .fs-pipe .app { top: max(var(--pp), calc(50% - 120px)) !important; }
  .fs-pipe .sink { bottom: max(var(--pp), calc(50% - 120px)); }
}