/* ==========================================================================
   WTH — What the hook
   Editorial explainer for a Uniswap v4 swap rebate hook.
   Light by default, dark by toggle. One accent: pink.
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */

:root {
  /* surfaces — warm neutral, a whisper of pink */
  --paper:    #F7F4F6;
  --paper-2:  #EFE9ED;
  --paper-3:  #E5DDE2;

  /* ink */
  --ink:      #141014;
  --ink-2:    #4F474D;
  --ink-3:    #70666D;

  /* rules */
  --rule:     #E1D8DE;
  --rule-2:   #CCC0C8;

  /* accent — the brand pink (sampled from the logo) is a marker, not a text colour */
  --pink:     #F91C91;
  --pink-2:   #D90F79;          /* pressed / hover */
  --pink-soft:#FBDCEC;
  --berry:    #B80D6B;          /* contrast-safe pink for small text on paper */
  --on-pink:  #1D0713;          /* near-black on pink, always */

  /* liquid glass */
  --glass-bg:   color-mix(in srgb, var(--paper) 55%, transparent);
  --glass-tint: rgba(255, 255, 255, .42);
  --glass-edge: color-mix(in srgb, var(--ink) 12%, transparent);
  --glass-spec: rgba(255, 255, 255, .55);
  --dot:        color-mix(in srgb, var(--ink) 5%, transparent);
  --wash-a:     color-mix(in srgb, var(--pink) 5%, transparent);
  --wash-b:     color-mix(in srgb, var(--pink) 3.5%, transparent);

  /* type */
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --serif:   "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --t-body:  1.1875rem;
  --t-h2:    1.9rem;
  --t-small: .8125rem;
  --lh-body: 1.6;

  /* space */
  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem; --s4: 2rem;
  --s5: 3rem;   --s6: 4.5rem; --s7: 7rem;   --s8: 10rem;

  /* geometry + motion */
  --col:      620px;
  --col-page: 1240px;
  --r:        5px;
  --r-lg:     10px;
  --dur:      .18s;
  --ease:     cubic-bezier(.16, .84, .44, 1);

  color-scheme: light;
}

:root[data-theme="dark"] {
  /* true black, like the logo and the whitepaper cover */
  --paper:    #000000;
  --paper-2:  #0D090C;
  --paper-3:  #161014;
  --ink:      #F4EFF2;
  --ink-2:    #AFA6AC;
  --ink-3:    #82787E;
  --rule:     #241C22;
  --rule-2:   #382D35;
  --pink:     #FF2E9C;
  --pink-2:   #FF63B4;
  --pink-soft:#2E0E20;
  --berry:    #FF7CC0;
  --on-pink:  #1D0713;

  --glass-bg:   color-mix(in srgb, var(--paper-2) 56%, transparent);
  --glass-tint: rgba(255, 255, 255, .05);
  --glass-edge: rgba(255, 255, 255, .10);
  --glass-spec: rgba(255, 255, 255, .13);
  --dot:        color-mix(in srgb, var(--ink) 3.5%, transparent);
  --wash-a:     color-mix(in srgb, var(--pink) 7%, transparent);
  --wash-b:     color-mix(in srgb, var(--pink) 5%, transparent);
  color-scheme: dark;
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  transition: background .3s var(--ease), color .3s var(--ease);
}

/* Ambient layer: an engineering-paper dot grid plus one faint pink wash.
   It exists mostly so the glass surfaces have something real to refract as
   content scrolls over it. Fixed, so the sampled region shifts with scroll. */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(780px 460px at 88% -6%, var(--wash-a), transparent 72%),
    radial-gradient(720px 560px at -6% 104%, var(--wash-b), transparent 74%),
    radial-gradient(var(--dot) 1px, transparent 1.4px);
  background-size: auto, auto, 30px 30px;
}

/* On black, broad washes read as a grey-pink film. Small concentrated glows
   read as lights — a few pink lamps scattered around the page instead. */
:root[data-theme="dark"] body::before {
  background-image:
    radial-gradient(360px 280px at 85% 6%, color-mix(in srgb, var(--pink) 11%, transparent), transparent 70%),
    radial-gradient(300px 240px at 6% 38%, color-mix(in srgb, var(--pink) 8%, transparent), transparent 70%),
    radial-gradient(320px 260px at 80% 78%, color-mix(in srgb, var(--pink) 9%, transparent), transparent 70%),
    radial-gradient(240px 200px at 22% 92%, color-mix(in srgb, var(--pink) 7%, transparent), transparent 70%),
    radial-gradient(var(--dot) 1px, transparent 1.4px);
  background-size: auto, auto, auto, auto, 30px 30px;
}

html, body { overflow-x: clip; }
a, button { -webkit-tap-highlight-color: transparent; }

.mono { font-family: var(--mono); font-variant-ligatures: none; }

::selection { background: var(--pink); color: var(--on-pink); }

a { color: inherit; }

/* Highlighter on paper: a soft pink band under the x-height. Full-strength
   pink under running text is loud — the pastel band marks without shouting. */
mark {
  background: linear-gradient(transparent 58%, var(--pink-soft) 58%, var(--pink-soft) 94%, transparent 94%);
  color: inherit;
  padding: 0 .06em;
}
:root[data-theme="dark"] mark {
  background: var(--pink-soft);
  color: var(--ink);
  border-radius: 3px;
  padding: .02em .16em;
}

/* the 2px reading-progress line pinned to the very top of the viewport */
.scanline {
  position: fixed; inset: 0 auto auto 0;
  height: 2px; width: 0%;
  background: var(--pink);
  z-index: 90;
  transition: width .1s linear;
}

/* ── 3. Chrome ─────────────────────────────────────────────────────────── */

.chrome {
  position: fixed; top: 2px; left: 0; right: 0;
  z-index: 70;
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s4);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: height var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
body.scrolled .chrome { height: 52px; border-bottom-color: var(--rule); }

.brand {
  display: flex; align-items: baseline; gap: .55rem;
  text-decoration: none;
}
.hook-mark { width: 13px; height: 21px; align-self: center; overflow: visible; }
.hk { fill: none; stroke: var(--pink); stroke-width: 8; stroke-linecap: round; }
.brand-word {
  font-family: var(--display);
  font-weight: 700; font-size: 1.15rem; letter-spacing: -.03em;
}
.brand-sub {
  font-family: var(--mono);
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
body.scrolled .brand-sub { opacity: 0; transition: opacity var(--dur) var(--ease); }

.chrome-right { display: flex; align-items: center; gap: var(--s3); }

.chrome-link {
  font-family: var(--display);
  font-size: .84rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.chrome-link:hover { color: var(--ink); }

.theme-toggle {
  font-size: .68rem; letter-spacing: .1em;
  background: none; border: 1px solid var(--rule-2); color: var(--ink-2);
  border-radius: 100px; padding: .34em .8em;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.theme-toggle:hover { border-color: var(--ink); color: var(--ink); }

.icon-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--rule-2); border-radius: 100px;
  color: var(--ink-2); text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { border-color: var(--ink); color: var(--ink); }
.icon-btn svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── 4. Topbar — network + contract band under the chrome ──────────────── */

.topbar {
  margin-top: 62px;                    /* clears the fixed chrome */
  display: flex; align-items: center; justify-content: center;
  gap: var(--s3); flex-wrap: wrap;
  padding: .5rem var(--s3);
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}

.pill {
  font-size: .6rem; letter-spacing: .12em; font-weight: 700;
  padding: .32em .75em;
  border-radius: 100px;
  background: var(--pink); color: var(--on-pink);
}

.contract { display: inline-flex; align-items: center; gap: .7rem; min-width: 0; }
.ct { font-size: .58rem; letter-spacing: .14em; color: var(--ink-3); }
.addr { font-size: .74rem; color: var(--ink-2); }
.copy {
  font-size: .6rem; letter-spacing: .12em; font-weight: 700;
  padding: .5em .85em;
  background: transparent;
  border: 1px solid var(--rule-2); border-radius: 3px;
  color: var(--ink-2); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.copy:hover { border-color: var(--ink); color: var(--ink); }
.copy.ok { background: var(--pink); border-color: var(--pink); color: var(--on-pink); }

/* ── 4b. Falling coins — a light drizzle of WTH behind the page ────────── */

.coins {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.coin {
  position: absolute; top: 0; left: var(--x);
  width: var(--s); height: var(--s);
  transform: translateY(-160px);
  animation: coinfall var(--d) linear infinite;
  animation-delay: var(--dl, 0s);
  will-change: transform;
}
.coin img {
  display: block; width: 100%; height: 100%;
  transform: rotate(var(--r, 0deg));
}
.coin.flip img { animation: coinflip var(--fd, 3.4s) linear infinite; }
.coin.mid { opacity: .7; }
.coin.far { opacity: .45; filter: blur(1.5px); }

@keyframes coinfall {
  to { transform: translateY(calc(100vh + 160px)); }
}
@keyframes coinflip {
  from { transform: rotateY(0)      rotate(var(--r, 0deg)); }
  to   { transform: rotateY(360deg) rotate(var(--r, 0deg)); }
}

/* ── 5. Buttons + links ────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600;
  font-size: .88rem; letter-spacing: -.01em;
  padding: .62em 1.15em;
  border-radius: var(--r);
  border: 1px solid var(--rule-2);
  background: transparent; color: var(--ink);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px); }

.btn-pink {
  background: var(--pink); border-color: var(--pink); color: var(--on-pink);
}
.btn-pink:hover { background: var(--pink-2); border-color: var(--pink-2); }

.btn-lg { font-size: 1rem; padding: .8em 1.5em; }

.scene-cta {
  display: inline-flex; align-items: center; gap: .4em;
  margin-top: var(--s2);
  font-family: var(--display); font-weight: 600; font-size: .9rem;
  color: var(--berry); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.scene-cta:hover { color: var(--ink); }
.scene-cta .arr { transition: transform var(--dur) var(--ease); }
.scene-cta:hover .arr { transform: translateX(4px); }

.chip {
  display: inline-block;
  font-size: .64rem; letter-spacing: .12em; font-weight: 700;
  padding: .32em .7em; border-radius: 3px;
  border: 1px solid var(--rule-2); color: var(--ink-2);
}
.chip-pink { background: var(--pink); border-color: var(--pink); color: var(--on-pink); }

/* ── 6. Hero ───────────────────────────────────────────────────────────── */

.hero {
  max-width: var(--col-page);
  margin: 0 auto;
  padding: var(--s7) var(--s4);
  text-align: center;
}

.eyebrow {
  font-size: .68rem; letter-spacing: .18em; color: var(--ink-3);
  margin: 0 0 var(--s5);
}

/* the logo front and centre, with a soft pink halo behind it.
   The artwork is transparent; drop-shadow follows its silhouette, which is
   what keeps the white letters readable on light paper — no box, no border. */
.hero-badge { position: relative; display: inline-block; }
.hero-badge::before {
  content: ""; position: absolute; inset: -34%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pink) 15%, transparent), transparent 74%);
  z-index: -1;
}
.hero-logo {
  display: block;
  width: clamp(204px, 31vw, 300px);
  height: auto;
  filter: drop-shadow(0 1px 1px rgba(29, 7, 19, .32))
          drop-shadow(0 14px 30px rgba(29, 7, 19, .22));
}
:root[data-theme="dark"] .hero-logo {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .6))
          drop-shadow(0 16px 36px color-mix(in srgb, var(--pink) 40%, transparent));
}

.hero-expand {
  font-family: var(--mono);
  font-size: clamp(.95rem, 2.7vw, 1.5rem);
  font-weight: 500;
  letter-spacing: .4em; text-transform: uppercase;
  color: var(--ink);
  margin: var(--s4) 0 0;
  padding-left: .4em;
}

/* the wordmark art: white letters need a silhouette shadow on light paper,
   and a soft pink glow on black */
.wordmark {
  display: block;
  width: clamp(280px, 40vw, 480px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 1px 1px rgba(29, 7, 19, .35))
          drop-shadow(0 10px 24px rgba(29, 7, 19, .22));
}
:root[data-theme="dark"] .wordmark {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .5))
          drop-shadow(0 12px 30px color-mix(in srgb, var(--pink) 30%, transparent));
}


.hero-lead {
  max-width: 33em;
  margin: var(--s5) auto 0;
  font-size: 1.28rem; line-height: 1.55;
  color: var(--ink-2);
}
.hero-lead mark { color: var(--ink); }

.hero-ctas {
  display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap;
  margin-top: var(--s5);
}

.scroll-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: .7rem;
  margin-top: var(--s7);
  text-decoration: none; color: var(--ink-3);
  transition: color var(--dur) var(--ease);
}
.scroll-cue:hover { color: var(--ink); }
.scroll-cue span { font-size: .6rem; letter-spacing: .18em; }
.scroll-cue svg {
  width: 12px; height: 34px;
  fill: none; stroke: currentColor; stroke-width: 1.2;
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { transform: translateY(0); }
  55%      { transform: translateY(5px); }
}

/* ── 7. Scene layout ───────────────────────────────────────────────────── */

.scene {
  max-width: var(--col-page);
  margin: 0 auto;
  padding: var(--s7) var(--s4);
  text-align: center;
}
.scene + .scene { border-top: 1px solid var(--rule); }

/* the boards keep their own left-aligned innards */
.flowboard, .ticket { text-align: left; margin-inline: auto; }

.scene-text { max-width: 34em; margin: 0 auto; }
.scene-text h2 {
  font-family: var(--display);
  font-size: var(--t-h2); font-weight: 600; letter-spacing: -.028em;
  line-height: 1.15;
  margin: 0 0 var(--s3);
}
.scene-text p { margin: 0 0 var(--s2); color: var(--ink-2); }
.scene-text p:last-of-type { margin-bottom: 0; }
.scene-text mark { color: var(--ink); }

.diagram { margin: var(--s4) auto 0; width: 100%; }
.diagram svg { display: block; width: 100%; height: auto; overflow: visible; }
.diagram figcaption {
  font-family: var(--display);
  font-size: var(--t-small); font-weight: 500; line-height: 1.45;
  color: var(--ink-3);
  margin: var(--s3) auto 0;
  max-width: 46em;
}
.diagram figcaption em { font-style: italic; color: var(--ink-2); }

/* ── 8. Flow boards — the project's boards, rebuilt in the site language ──
   Same steps, icons, and percentages as the four source boards; site type,
   site colours, theme-aware, and animated with the shared .lift primitive. */

.flowboard { max-width: 600px; font-family: var(--display); }

.fnode {
  display: flex; align-items: center; gap: var(--s2);
  padding: 1rem 1.15rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}

.fico {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--pink-soft); color: var(--berry);
  display: grid; place-items: center;
}
.fico svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.fico.xs { width: 34px; height: 34px; }
.fico.xs svg { width: 18px; height: 18px; }

.fnum {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--pink); color: var(--on-pink);
  font-size: .7rem; font-weight: 700;
  display: grid; place-items: center;
}

.fbody { min-width: 0; }
.ftitle { font-weight: 600; font-size: .95rem; letter-spacing: -.01em; line-height: 1.35; color: var(--ink); }
.fsub { font-size: .8rem; font-weight: 500; color: var(--ink-3); line-height: 1.4; margin-top: 2px; }

/* connectors — quiet ink lines with a small arrowhead */
.fdrop, .ffork, .fjoin { position: relative; }

.fdrop { height: 30px; }
.fdrop::before {
  content: ""; position: absolute; left: 50%; top: 3px; bottom: 8px;
  width: 1px; background: var(--ink-3);
}
.fdrop::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--ink-3);
}
.ah {
  position: absolute; bottom: 3px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--ink-3);
}

/* one line splitting into two column centres */
.ffork { height: 36px; }
.ffork::before {
  content: ""; position: absolute; left: 25%; right: 25%; top: 15px; bottom: 8px;
  border: 1px solid var(--ink-3); border-bottom: none;
  border-radius: 10px 10px 0 0;
}
.ffork::after {
  content: ""; position: absolute; left: 50%; top: 3px; height: 12px;
  width: 1px; background: var(--ink-3);
}
.ffork .ah:nth-of-type(1) { left: 25%; }
.ffork .ah:nth-of-type(2) { left: 75%; }

/* two columns joining back into one */
.fjoin { height: 36px; }
.fjoin::before {
  content: ""; position: absolute; left: 25%; right: 25%; top: 3px; bottom: 15px;
  border: 1px solid var(--ink-3); border-top: none;
  border-radius: 0 0 10px 10px;
}
.fjoin::after {
  content: ""; position: absolute; left: 50%; top: calc(100% - 15px); height: 7px;
  width: 1px; background: var(--ink-3);
}
.fjoin .ah { left: 50%; }

.fsplit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.fnode.sm { align-items: flex-start; }
.fnode.sm .fico { width: 38px; height: 38px; }
.fnode.sm .fico svg { width: 19px; height: 19px; }

.pct { font-family: var(--mono); font-weight: 700; font-size: 1.02rem; color: var(--ink); }

/* crisp hover on any card — instant, technical; mouse only, so taps on
   touch screens don't leave cards stuck in their hover state */
@media (hover: hover) and (pointer: fine) {
  .fnode:hover, .sitem:hover, .ticket:hover {
    border-color: var(--rule-2);
    box-shadow: 0 12px 26px -20px rgba(8, 10, 8, .55);
  }
}

/* the capture moment — soft pink fill, pink outline; emphatic, not loud */
.fnode.hot { background: var(--pink-soft); border-color: var(--pink); }
.fnode.hot .ftitle { color: var(--ink); }
.fnode.hot .fico {
  background: color-mix(in srgb, var(--pink) 15%, transparent);
  color: var(--berry);
}

/* the outcome — closes a flow with the same soft-pink emphasis as the capture */
.fnode.end { background: var(--pink-soft); border-color: var(--pink); }
.fnode.end .ftitle { color: var(--ink); }
.fnode.end .fsub { color: var(--ink-2); }
.fnode.end .fico {
  background: color-mix(in srgb, var(--pink) 15%, transparent);
  color: var(--berry);
}

/* a small pulse travelling down a connector */
.pd {
  position: absolute; left: 50%; top: 2px;
  width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%;
  background: var(--pink-2);
  animation: pd 2.6s linear infinite;
}
@keyframes pd {
  0%   { top: 2px; opacity: 0; }
  18%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { top: calc(100% - 10px); opacity: 0; }
}

/* ── 8b. The user-flow board as a swap ticket ─────────────────────────── */

.ticket {
  max-width: 560px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.25rem 1.25rem;
  font-family: var(--display);
}
.ticket-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: .7rem; margin-bottom: .2rem;
  border-bottom: 1px solid var(--rule);
}
.tt { font-size: .62rem; letter-spacing: .16em; color: var(--ink-3); font-weight: 500; }

.trow { display: flex; align-items: center; gap: .8rem; padding: .85rem 0; }
.trow + .trow { border-top: 1px dashed var(--rule-2); }
.ttext { flex: 1; font-weight: 600; font-size: .92rem; letter-spacing: -.01em; line-height: 1.35; color: var(--ink); }
.ticon { flex: none; color: var(--berry); display: grid; place-items: center; }
.ticon svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* the tear line with punched notches */
.tear { position: relative; height: 0; border-top: 1px dashed var(--rule-2); margin: .9rem -1.25rem 1.1rem; }
.tear::before, .tear::after {
  content: ""; position: absolute; top: -8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.tear::before { left: -9px; }
.tear::after { right: -9px; }

.tsplit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.tcol { min-width: 0; }
.tcol + .tcol { border-left: 1px dashed var(--rule-2); padding-left: var(--s3); }
.tcol-head { margin-bottom: .5rem; }
.tline {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  padding: .5rem 0;
  font-size: .8rem; font-weight: 500; color: var(--ink-2);
}
.tline + .tline { border-top: 1px solid var(--rule); }
.tpct { font-size: 1.45rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.tfoot {
  margin: 1.1rem -1.25rem -1.25rem;
  padding: .7rem 1.25rem;
  border-top: 1px dashed var(--rule-2);
  font-size: .58rem; letter-spacing: .14em;
  color: var(--ink-3); text-align: center;
}

/* the WTH-token share chips */
.fsplit.wchips .fnode { flex-direction: column; align-items: flex-start; gap: .35rem; }
.fsplit.wchips .tpct { font-size: 2rem; line-height: 1; margin-top: .4rem; }

/* ── 8c. The integration path as an airy numbered list ────────────────── */

.steps { border-top: 1px solid var(--rule); }
.strow {
  display: flex; align-items: center; gap: var(--s3);
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
.snum {
  flex: none; width: 1.5em;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--berry);
}
.stext { flex: 1; font-weight: 600; font-size: .95rem; letter-spacing: -.01em; line-height: 1.4; color: var(--ink); }

/* ── 8e. Four-part architecture grid + safeguards ─────────────────────── */

.quad {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2);
  margin-bottom: var(--s3);
}
.quad .fnode { align-items: flex-start; }
.quad .fnum { margin-top: 2px; }

.safe {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .55rem 0;
  font-size: .86rem; font-weight: 500; line-height: 1.45; color: var(--ink-2);
}
.safe + .safe { border-top: 1px solid var(--rule); }
.safe .dot {
  flex: none; width: 6px; height: 6px; margin-top: .5em;
  border-radius: 50%; background: var(--pink);
}
.fnode.wide .stage-cap { margin-bottom: .6rem; }

/* ── 8d. At-a-glance steps on a centre spine, alternating sides ───────── */

.spineflow { position: relative; padding: 4px 0; }
.spineflow::before {
  content: ""; position: absolute; left: calc(50% - .5px); top: 6px; bottom: 6px;
  width: 1px;
  background: repeating-linear-gradient(var(--rule-2) 0 5px, transparent 5px 10px);
}
.sitem {
  position: relative;
  width: calc(50% - 28px);
  padding: .85rem 1rem 1rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.sitem + .sitem { margin-top: var(--s3); }
.sitem.right { margin-left: auto; }
.sitem::after {
  content: ""; position: absolute; top: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--pink); border: 1px solid var(--berry);
  transform: translateY(-50%);
}
.sitem.left::after { right: -33px; }
.sitem.right::after { left: -33px; }
.sitem-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.sitem .ftitle { font-size: .9rem; }
.sitem .fsub { margin-top: 3px; }

/* soft ping on the spine dots once the scene is revealed */
.in .sitem::after {
  animation: ping 3.4s var(--ease) infinite;
  animation-delay: calc(var(--i, 0) * .45s);
}
@keyframes ping {
  0%, 18% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pink) 55%, transparent); }
  60%     { box-shadow: 0 0 0 7px transparent; }
  100%    { box-shadow: 0 0 0 0 transparent; }
}

/* a step's number sharpens as you pass over it */
.strow { transition: none; }
.strow:hover .snum { color: var(--ink); }

/* wide node with three columns (integration, final step) */
.fnode.wide { display: block; padding: 1.25rem 1.4rem 1.4rem; }
.fhead { display: flex; align-items: center; gap: var(--s2); }
.fcols3 {
  display: grid; grid-template-columns: .8fr 1fr 1.25fr; gap: var(--s3);
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--rule);
}
.fcolm { min-width: 0; }
.fcolm-head {
  display: flex; align-items: flex-start; gap: .5rem;
  font-weight: 600; font-size: .84rem; line-height: 1.3; color: var(--ink);
  margin-bottom: .4rem;
  min-height: 2.6em;          /* two head lines, so the rows below align across columns */
}
.fcolm-head svg { margin-top: 1px; }
.fcolm .fitem span:last-child { white-space: nowrap; }
.fcolm .fsub { margin-top: .5rem; }
.fcolm-head svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--berry); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.fitem {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .3rem 0;
  font-size: .8rem; font-weight: 500; color: var(--ink-2);
}
.fitem .pct { font-size: .8rem; min-width: 2.6em; }
.fito { color: var(--ink-3); }

/* ── 11. Motion ────────────────────────────────────────────────────────── */

/* No scroll-reveals — content is always visible. Motion is ambient and
   gentle instead: the hook glyph traces itself, pulses travel the
   connectors, icon chips breathe out of phase, the capture card glows. */

/* a) trace — the brand hook drawing itself (hero on load, close on approach) */
.js .trace { stroke-dasharray: var(--len, 900); stroke-dashoffset: var(--len, 900); }
.js .in .trace {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s var(--ease) calc(var(--i, 0) * 90ms);
}

/* b) breathe — icon chips swell almost imperceptibly, each out of phase */
.fico {
  animation: breathe 5.2s var(--ease) infinite;
  animation-delay: calc(var(--i, 0) * -.9s);
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* c) a slow pink glow on the capture card */
.fnode.hot { animation: hotglow 4.2s var(--ease) infinite; }
@keyframes hotglow {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 8px 26px -6px color-mix(in srgb, var(--pink) 26%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .trace { stroke-dashoffset: 0; }
  .js .in .trace { transition: none; }
  .scanline { transition: none; }
  .pd { animation: none; display: none; }
  .in .sitem::after { animation: none; }
  .scroll-cue svg { animation: none; }
  .fico, .fnode.hot { animation: none; }
  .coins { display: none; }
}

/* ── 12. Close + footer ────────────────────────────────────────────────── */

/* the finale: full-bleed, warming into pink, with the unicorn rising */
.close {
  position: relative;
  overflow: hidden;
  padding: var(--s8) var(--s4);
  text-align: center;
  border-top: 1px solid var(--rule);
}
.close::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 95% at 50% 120%, color-mix(in srgb, var(--pink) 30%, transparent), transparent 64%),
    linear-gradient(to bottom, transparent 25%, color-mix(in srgb, var(--pink) 12%, transparent) 100%);
}
/* the unicorn, rising bottom-right behind the closing words — blended into
   the bloom: dimmed, slightly desaturated, melting away toward its base */
.uni {
  position: absolute; z-index: 0;
  right: clamp(-44px, 2vw, 48px);
  bottom: -7%;
  width: clamp(250px, 30vw, 440px);
  height: auto;
  opacity: .62;
  filter: saturate(.9) drop-shadow(0 0 30px color-mix(in srgb, var(--pink) 30%, transparent));
  mask-image: linear-gradient(200deg, #000 45%, transparent 97%);
  -webkit-mask-image: linear-gradient(200deg, #000 45%, transparent 97%);
  pointer-events: none;
}
.close > :not(.uni) { position: relative; z-index: 1; }
.wordmark-close { width: clamp(250px, 36vw, 430px); }
.close-lead {
  max-width: 26em; margin: var(--s4) auto 0;
  font-size: 1.24rem; line-height: 1.5; color: var(--ink-2);
}

.foot {
  border-top: 1px solid var(--rule);
  padding: var(--s4);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
  font-family: var(--display);
  font-size: var(--t-small);
  color: var(--ink-3);
}
.foot .mono { font-size: .62rem; letter-spacing: .14em; }
.foot-mid { flex: 1; min-width: 14em; }
.foot-links { display: flex; gap: var(--s3); }
.foot-links a { text-decoration: none; transition: color var(--dur) var(--ease); }
.foot-links a:hover { color: var(--ink); }

/* ── 13. Small screens ─────────────────────────────────────────────────── */

@media (max-width: 860px) {
  :root { --t-h2: 1.6rem; --t-body: 1.0625rem; --s7: 4.5rem; --s8: 6rem; }

  .chrome { padding: 0 var(--s3); height: 54px; }
  body.scrolled .chrome { height: 50px; }
  .brand-sub { display: none; }
  .hide-sm { display: none; }
  .chrome-right { gap: .55rem; }

  /* comfortable thumb targets */
  .icon-btn { width: 38px; height: 38px; }
  .icon-btn svg { width: 15px; height: 15px; }
  .theme-toggle { padding: .55em 1em; min-height: 38px; }
  .copy { padding: .65em 1.05em; font-size: .62rem; min-height: 38px; }

  /* fewer, smaller coins on a small screen */
  .coin { width: calc(var(--s) * .75); height: calc(var(--s) * .75); }
  .coin.far { display: none; }

  .topbar { margin-top: 56px; padding: .5rem var(--s3); row-gap: .35rem; }

  .hero { padding: var(--s6) var(--s3); }
  .hero-lead { font-size: 1.08rem; }

  .contract { flex-wrap: wrap; justify-content: center; row-gap: .5rem; max-width: 100%; }
  .addr { font-size: .62rem; flex-basis: 100%; text-align: center; order: 3; }

  .scene { padding: var(--s6) var(--s3); }

  .flowboard .fnode { padding: .85rem .9rem; }
  .flowboard .fnode.wide { padding: 1rem 1rem 1.1rem; }
  .fnode.sm { flex-direction: column; gap: .6rem; }
  .fsplit { gap: var(--s1); }
  .fcols3 { grid-template-columns: 1fr; }
  .fcolm-head { min-height: 0; }

  .quad { grid-template-columns: 1fr; }

  .ticket { padding: .9rem 1rem 1rem; }
  .tear { margin: .8rem -1rem 1rem; }
  .tfoot { margin: 1rem -1rem -1rem; padding: .65rem 1rem; }
  .tsplit { grid-template-columns: 1fr; }
  .tcol + .tcol {
    border-left: 0; padding-left: 0;
    border-top: 1px dashed var(--rule-2);
    padding-top: var(--s2); margin-top: var(--s2);
  }
  .tpct { font-size: 1.25rem; }

  .snum { font-size: 1.2rem; }
  .strow { gap: var(--s2); }

  /* the spine moves to the left edge on phones */
  .spineflow::before { left: 4px; }
  .sitem, .sitem.right { width: auto; margin-left: 22px; }
  .sitem.left::after, .sitem.right::after { left: -23px; right: auto; }

  .uni { width: 230px; right: -36px; bottom: -4%; opacity: .5; }

  .foot { flex-direction: column; align-items: flex-start; }
}

/* ── 14. Liquid glass ──────────────────────────────────────────────────────
   Applied only where content genuinely passes behind a surface: the fixed
   chrome, the parameter strip, and the outline buttons. The pink primary
   stays solid — it is the brand mark, not glass.
   Recipe: translucent paper + blur/saturate backdrop, a top sheen gradient,
   and a 1px specular inside the upper edge. */

.chrome,
.btn:not(.btn-pink),
.theme-toggle,
.icon-btn {
  background:
    linear-gradient(var(--glass-tint), transparent 46%),
    var(--glass-bg);
  backdrop-filter: blur(18px) saturate(1.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.55);
  box-shadow: inset 0 1px 0 var(--glass-spec);
}

.btn:not(.btn-pink), .theme-toggle, .icon-btn { border-color: var(--glass-edge); }
.btn:not(.btn-pink):hover, .theme-toggle:hover, .icon-btn:hover { border-color: var(--ink); }

/* honest solids where glass is unavailable or unwanted */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chrome { background: color-mix(in srgb, var(--paper) 94%, transparent); }
  .btn:not(.btn-pink), .theme-toggle, .icon-btn { background: var(--paper-2); }
}
@media (prefers-reduced-transparency: reduce) {
  .chrome, .btn:not(.btn-pink), .theme-toggle, .icon-btn {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--paper-2);
  }
}

/* ── 14b. Promo video ──────────────────────────────────────────────────── */

/* 1080p master: 800px shows it as a clean downscale on every density —
   1600 device px from 1920 on 2x screens, never upscaled */
.promo {
  display: block;
  width: min(100%, 800px);
  height: auto;              /* the height attr must not win — no letterbox bars */
  aspect-ratio: 16 / 9;
  max-height: 72vh;
  margin: 0 auto;
  background: #000;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 48px -32px rgba(8, 4, 7, .7);
}

/* ── 15. Phone niceties ────────────────────────────────────────────────── */

/* notched phones: keep the fixed bars clear of the safe-area insets */
@supports (padding: max(0px)) {
  .chrome, .topbar, .foot {
    padding-left: max(var(--s4), env(safe-area-inset-left));
    padding-right: max(var(--s4), env(safe-area-inset-right));
  }
  @media (max-width: 860px) {
    .chrome, .topbar, .foot {
      padding-left: max(var(--s3), env(safe-area-inset-left));
      padding-right: max(var(--s3), env(safe-area-inset-right));
    }
  }
}

/* mobile browsers with a collapsing URL bar: measure the fall in dvh */
@supports (height: 100dvh) {
  @keyframes coinfall {
    to { transform: translateY(calc(100dvh + 160px)); }
  }
}