/* 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%; }
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; }
.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; }
}

/* ---------- One look across the site (Erik, 6 Nov 2026: "keep the vibe that we have on the
   marketplace ... uniform across the entire website"; he chose the marketplace look) ----------
   The marketplace's white page, DM Sans, #222 ink and hairline greys; its header (the wordmark on
   the left, plain text links on the right, a hairline under it); its light footer. Everything the
   home page animates stays as it was. */
:root {
  --f-paper: #ffffff;
  --f-paper-2: #f7f7f7;
  --f-ink: #222222;
  --f-ink-2: #6a6a6a;
  --f-mute: #8a8a8a;
  --f-line: #ebebeb;
  --f-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-head: var(--f-sans);
  --f-nav: 72px;
}
.fn { border-bottom: 1px solid var(--f-line); }
.fn.is-scrolled { box-shadow: none; }
/* The wordmark alone, always shown, as on the marketplace. */
.fn-cube { display: none; }
.fn-word, .fn.is-scrolled .fn-word { margin-left: 0; width: 122px; opacity: 1; }
.fn-word svg, .fn.is-scrolled .fn-word svg { width: 122px; height: 17px; transform: none; }
.fn-links { display: flex; align-items: center; gap: 4px; }
.fn-links a { padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; transition: background .2s; }
.fn-links a:hover, .fn-links a[aria-current] { background: var(--f-paper-2); }
.fn-drop { display: none; }
.fn-right > .fn-icon { display: none; }
@media (max-width: 900px) {
  .fn-links { display: none; }
  .fn-right > .fn-icon { display: inline-flex; }
  .fn-word, .fn.is-scrolled .fn-word, .fn-word svg, .fn.is-scrolled .fn-word svg { width: 104px; }
  .fn-word svg, .fn.is-scrolled .fn-word svg { height: 14.5px; }
}
.fh-lede, .fw-copy h2, .fs-text h3, .fp-head h1, .fq h1 { font-weight: 600; letter-spacing: -.03em; }
.fs-card { background: #fff; }
.fb { font-weight: 600; }
.fb-dark:hover { background: #000; }
.fb-line:hover { background: var(--f-paper-2); color: var(--f-ink) !important; }
.fp-body { color: #3a3a3a; }
.fp-body a { text-decoration-color: #c4c4c4; }

/* Phone menu: white, like the rest of the site. */
.fm { background: #fff; color: var(--f-ink); }
.fm-close { background: #fff; border-color: var(--f-line); color: var(--f-ink); }
.fm-close:hover { background: var(--f-paper-2); }
.fm-list a { color: #b0b0b0; font-weight: 600; letter-spacing: -.03em; }
.fm-list a.is-current, .fm-list a:hover { color: var(--f-ink); }
.fm-foot { color: var(--f-ink-2); }
.fm-foot a:hover { color: var(--f-ink); }

/* Footer: the marketplace's light footer. */
.ff { background: var(--f-paper-2); color: var(--f-ink); border-top: 1px solid #dddddd; padding: 44px var(--f-pad) 0; }
.ff-logo { display: none; }
.ff-inner { justify-content: flex-start; }
.ff-cols { grid-template-columns: repeat(3, minmax(160px, 1fr)); width: 100%; gap: 24px; }
.ff-cols h4 { font: 600 14px/1 var(--f-sans); color: var(--f-ink); margin-bottom: 14px; }
.ff-cols a { padding: 0; margin: 0 0 12px; font-size: 14px; }
.ff-cols a:hover { color: var(--f-ink); text-decoration: underline; }
.ff-bar { margin-top: 24px; padding: 24px 0; border-top: 1px solid #dddddd; }
.ff-word { display: none; }
.ff-bar p { font-size: 14px; color: var(--f-ink); }