/* Original crumbless homepage hero, nav and close: extracted verbatim from src/lib/styles/landing-mockup.css and the built SiteNav css. Do not restyle. */
html[data-theme]:not([data-shell='app']){
  --canvas:#faf9f6;
  --canvas-deep:#f1f0eb;
  --ink:#0a0a0a;
  --ink-soft:#1f1f1f;
  --grey-1:#3a3a3a;
  --grey-2:#6b6b6b;
  --grey-3:#9a9a9a;
  --grey-4:#c4c4c4;
  --hairline:rgba(10,10,10,0.10);
  --hairline-strong:rgba(10,10,10,0.16);

  --glass-bg:#ffffff;
  --glass-bg-strong:#ffffff;
  --glass-bg-soft:#f5f4f0;
  --glass-border:rgba(255,255,255,0.85);
  --glass-border-soft:rgba(255,255,255,0.6);
  --glass-spec:rgba(255,255,255,0.95);
  --glass-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 0 0 1px rgba(255,255,255,0.35) inset,
    0 30px 70px -28px rgba(20,20,30,0.18),
    0 8px 22px -8px rgba(20,20,30,0.08);

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SF Mono,Menlo,monospace;
  --serif-italic:'Newsreader',Georgia,'Times New Roman',serif;

  --gold:#c9a661;
  --gold-deep:#a3863e;
  --gold-soft:rgba(201,166,97,0.16);

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-pop:cubic-bezier(.34,1.5,.64,1);
}
em, i, .italic, [class*="italic"]{
  font-family:var(--serif-italic);
  font-style:italic;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html:not([data-shell='app']){
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","kern","liga","calt","tnum";
  scroll-behavior:smooth;
}
html:not([data-shell='app']) body{
  background:var(--canvas);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.5;letter-spacing:-0.01em;
  min-height:100vh;overflow-x:hidden;position:relative;
}
::selection{background:rgba(10,10,10,0.12)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}

/* Mono mesh ─────────────────── */
.mesh{position:fixed;inset:-12vh -12vw;z-index:-1;pointer-events:none}
.mesh-orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:0.7}
.orb-a{width:60vw;height:60vw;left:-12%;top:-15%;background:radial-gradient(circle,rgba(255,255,255,0.85) 0%,transparent 70%);animation:drift-a 38s ease-in-out infinite alternate}
.orb-b{width:50vw;height:50vw;right:-12%;top:25%;background:radial-gradient(circle,rgba(0,0,0,0.06) 0%,transparent 65%);animation:drift-b 46s ease-in-out infinite alternate}
.orb-c{width:55vw;height:55vw;left:18%;top:55%;background:radial-gradient(circle,rgba(255,255,255,0.7) 0%,transparent 70%);animation:drift-c 52s ease-in-out infinite alternate}
.orb-d{width:48vw;height:48vw;right:6%;bottom:-8%;background:radial-gradient(circle,rgba(0,0,0,0.04) 0%,transparent 70%);animation:drift-d 58s ease-in-out infinite alternate}
@keyframes drift-a{0%{transform:translate(0,0) scale(1)}100%{transform:translate(8vw,6vh) scale(1.06)}}
@keyframes drift-b{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-8vw,8vh) scale(1.04)}}
@keyframes drift-c{0%{transform:translate(0,0) scale(1)}100%{transform:translate(6vw,-5vh) scale(1.05)}}
@keyframes drift-d{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-5vw,-7vh) scale(1.03)}}

/* ─────────────────────────────────────────────
   0. PRELUDE — twin-monad mark + tagline + scroll cue
   ───────────────────────────────────────────── */
.prelude-section{
  min-height:100vh;
  min-height:100dvh;
  padding:130px 28px 90px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;position:relative;
}
.prelude-stack{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(10px,1vw,18px);
  width:100%;max-width:1100px;
}

/* Hero lockup — Nucleus mark floating above the crumbless wordmark */
.hero-lockup{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(12px,1.4vw,22px);
  opacity:0;transform:translateY(14px);
  transition:opacity 1100ms var(--ease-out),transform 1100ms var(--ease-out);
}
.hero-lockup.show{opacity:1;transform:translateY(0)}
.hero-mark{
  width:clamp(96px,10vw,160px);
  height:clamp(96px,10vw,160px);
  flex:0 0 auto;
  color:var(--ink);
  display:block;
}
/* Per-element pulse via SMIL on circle attributes — works through SVG filter
   without creating CSS compositing layers that would block the warp. */
@media (prefers-reduced-motion: reduce){
  .hero-mark animate,.hero-mark feTurbulence animate{display:none}
}
.hero-word{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(28px,3.4vw,52px);
  letter-spacing:-0.04em;line-height:0.94;
  color:var(--ink);margin:0;
  background:linear-gradient(180deg,#0a0a0a 0%,#1f1f1f 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-word .dot{
  -webkit-text-fill-color:var(--grey-2);color:var(--grey-2);
}
@media (max-width: 760px){
  /* On a phone the lockup is the whole first screen, as it is on desktop. */
  .hero-lockup{gap:14px}
  .hero-mark{width:clamp(140px,44vw,220px);height:clamp(140px,44vw,220px)}
  .hero-word{font-size:clamp(44px,14.5vw,72px)}
}

/* Bookend lines around the monad mark — short, conversational, ellipses imply the unfinished thought */
.prelude-pre,
.prelude-tagline{
  font-family:var(--sans);
  letter-spacing:-0.012em;line-height:1.3;
  margin:0;text-align:center;
  opacity:0;transform:translateY(8px);
  transition:opacity 1000ms var(--ease-out),transform 1000ms var(--ease-out);
}
.prelude-pre.show,
.prelude-tagline.show{opacity:1;transform:translateY(0)}

.prelude-pre{
  font-weight:400;
  font-size:clamp(18px,1.9vw,26px);
  color:var(--grey-2);
  transform:translateY(-8px);
}
.prelude-pre.show{transform:translateY(0)}

.prelude-tagline{
  font-weight:500;
  font-size:clamp(13px,1.3vw,18px);
  color:var(--ink);
  max-width:46ch;
  min-height:1.4em;
  /* Plain text container — gradient is on the typer span only so the caret stays solid */
}
.tagline-typer{
  display:inline;
  background:linear-gradient(180deg,#0a0a0a,#1f1f1f);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.tagline-caret{
  display:inline-block;
  width:2px;height:0.92em;
  margin-left:3px;border-radius:1px;
  background-color:var(--ink);
  vertical-align:-0.14em;
  animation:caret-blink 1s steps(2) infinite;
}
@keyframes caret-blink{
  0%,49%{opacity:0.92}
  50%,100%{opacity:0.06}
}

/* Bottom-pinned foot — scroll indicator */
.prelude-foot{
  position:absolute;
  left:50%;bottom:clamp(20px,3vh,40px);
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
  gap:14px;
  pointer-events:none;
}
.prelude-foot a,.prelude-foot button{pointer-events:auto}

/* Scroll arrow — gentle bounce to invite scrolling */
.scroll-down{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  color:var(--grey-3);
  text-decoration:none;
  opacity:0;
  transition:opacity 700ms var(--ease-out),color 200ms ease;
  cursor:pointer;
}
.scroll-down.show{opacity:1;animation:scroll-bounce 2.4s ease-in-out infinite}
.scroll-down:hover{color:var(--ink)}
.scroll-down svg{width:14px;height:14px;display:block}
@keyframes scroll-bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(5px)}
}
@media (prefers-reduced-motion: reduce){
  .scroll-down.show{animation:none}
}
.rainbow-text{
  display:inline-block;
  background:linear-gradient(90deg,#c9a661 0%,#EF6F5B 18%,#8B6FC9 36%,#4D7FD1 54%,#3E9B6B 72%,#c9a661 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:rainbow-shift 9s linear infinite;
}
@keyframes rainbow-shift{
  0%{background-position:0% 50%}
  100%{background-position:280% 50%}
}

@media (max-width: 760px){
  .prelude-section{padding:96px 22px 120px;min-height:100vh;min-height:100dvh}
  .prelude-stack{gap:28px}
  .prelude-tagline{font-size:17px}
}
.close-min{min-height:80vh;padding:160px 28px 64px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.close-stack{display:flex;flex-direction:column;align-items:center;gap:28px;max-width:560px;width:100%}
.close-eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink);
  display:inline-flex;align-items:center;gap:10px;margin:0;
  padding:7px 14px;border-radius:999px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  border:1px solid var(--glass-border-soft);
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 12px -6px rgba(20,20,30,0.08);
  opacity:0;transform:translateY(6px);
  transition:opacity 800ms var(--ease-out),transform 800ms var(--ease-out);
}
.close-eyebrow.show{opacity:1;transform:translateY(0)}
.close-eyebrow .led{width:6px;height:6px;border-radius:50%;background:var(--ink);animation:online 2.2s ease-in-out infinite}
.close-eyebrow .count{color:var(--grey-2);font-weight:400}

.close-headline{font-family:var(--sans);font-weight:600;font-size:clamp(44px,5.6vw,80px);letter-spacing:-0.04em;line-height:1.04;color:var(--ink);margin:0;background:linear-gradient(180deg,#0a0a0a,#1f1f1f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:0;transform:translateY(10px);transition:opacity 1000ms var(--ease-out),transform 1000ms var(--ease-out)}
.close-headline.show{opacity:1;transform:translateY(0)}
.close-body{font-family:var(--sans);font-weight:400;font-size:clamp(15px,1.2vw,17px);color:var(--grey-1);line-height:1.55;letter-spacing:-0.005em;margin:0;max-width:42ch;opacity:0;transform:translateY(10px);transition:opacity 1000ms var(--ease-out),transform 1000ms var(--ease-out)}
.close-body.show{opacity:1;transform:translateY(0)}
.close-body .accent{color:var(--ink);font-weight:500}

/* The close is an input, not a button island. It reveals on the same curve as
   .close-actions so the two read as one block arriving. */
.close-audit{
  margin-top:14px;display:flex;gap:9px;flex-wrap:wrap;justify-content:center;align-items:stretch;
  width:min(520px,100%);
  opacity:0;transform:translateY(10px);
  transition:opacity 1000ms var(--ease-out),transform 1000ms var(--ease-out);
  transition-delay:120ms;
}
/* The close reveal stamps .show on each ELEMENT, not on the section, so this
   has to match the element. A `.close-min.show .close-audit` selector looks
   right and never fires. */
.close-audit.show{opacity:1;transform:none}
.close-field{
  flex:1 1 250px;min-width:0;display:flex;align-items:center;
  background:var(--glass-bg);border:1px solid var(--hairline-strong);border-radius:999px;
  padding-left:20px;box-shadow:0 1px 2px rgba(10,10,10,0.05);
}
.close-field span{font-family:var(--mono);font-size:13px;color:var(--grey-3)}
.close-field input{
  flex:1 1 auto;min-width:0;border:0;background:none;outline:none;
  font-family:var(--mono);font-size:14px;font-weight:500;color:var(--ink);
  padding:15px 18px 15px 2px;
}
.close-field input::placeholder{color:var(--grey-3);font-weight:400}
.close-field:focus-within{border-color:var(--gold-deep);box-shadow:0 0 0 3px var(--gold-soft)}
.close-audit .close-cta{border:0;cursor:pointer;font-family:var(--sans);flex:0 0 auto}
@media (max-width:560px){
  .close-audit{width:100%}
  .close-audit .close-cta{width:100%;justify-content:center}
}
.close-actions{margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:16px;opacity:0;transform:translateY(10px);transition:opacity 1000ms var(--ease-out),transform 1000ms var(--ease-out)}
.close-actions.show{opacity:1;transform:translateY(0)}
.close-cta{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;font-weight:500;font-size:15px;padding:15px 26px;border-radius:999px;letter-spacing:-0.005em;box-shadow:0 12px 28px -10px rgba(10,10,10,0.4),0 4px 10px -4px rgba(10,10,10,0.2);transition:transform 220ms var(--ease-out),background 220ms ease,box-shadow 220ms var(--ease-out)}
.close-cta:hover{transform:translateY(-1px);background:#000;box-shadow:0 16px 36px -10px rgba(10,10,10,0.5),0 6px 14px -4px rgba(10,10,10,0.25)}
.close-cta .arrow{display:inline-block;transition:transform 220ms var(--ease-out)}
.close-cta:hover .arrow{transform:translateX(3px)}
.close-secondary{font-family:var(--sans);font-size:13.5px;color:var(--grey-2);font-weight:500;letter-spacing:-0.005em;border-bottom:1px solid var(--hairline);padding:6px 2px 4px;transition:color 200ms ease,border-color 200ms ease}
.close-secondary:hover{color:var(--ink);border-bottom-color:var(--ink)}
.close-foot{margin-top:96px;display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;max-width:880px;padding-top:24px;border-top:1px solid var(--hairline);font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--grey-3)}
.close-foot .brand{color:var(--ink);font-weight:500}

/* Reveal-on-scroll ─────── */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 800ms var(--ease-out),transform 800ms var(--ease-out)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal.delay-1{transition-delay:80ms}.reveal.delay-2{transition-delay:180ms}.reveal.delay-3{transition-delay:280ms}

@media (prefers-reduced-motion: reduce){
  /* Targeted opt-in: only motion-heavy decorative loops are crushed.
     Brand-critical animations (rainbow letters, knows warp, intel bars, flow particles,
     equation reveals, typewriter caret) all keep their original timing. */
  .scroll-down,.knows-scroll,.cube,.flywheel-svg .pulse,.flywheel-svg .chip-dot,
  .monad-svg .core,.monad-svg .core-small,.monad-svg .ring-big,.monad-svg .ring-small,.monad-svg .orbit-group,
  .hero-mark animate,.hero-mark feTurbulence animate,.brand-mark .mark-core{
    animation-duration:0.001s !important;transition-duration:0.001s !important;
  }
}
@media (max-width: 920px){
  .action-section,.flywheel-section{padding:120px 22px}
  .exchange{padding:30px 22px 120px}
  #knows,#action{padding:clamp(54px,7vh,90px) 22px 12px}
  #action + .exchange{padding:8px 22px 70px}
  .close-min{padding:120px 22px 48px}
  .flywheel-receipts{font-size:11.5px}
  .flywheel-receipts .recv{grid-template-columns:60px 88px 1fr auto;gap:10px}
}
@media (max-width: 600px){
  .hero-line{font-size:clamp(38px,9.5vw,60px)}
  .chat-stream{font-size:13.5px;min-height:380px}
  .bubble{font-size:13.5px}
  .close-headline{font-size:clamp(38px,10vw,56px)}
  .flywheel-receipts .recv{grid-template-columns:54px 1fr;gap:8px}
  .flywheel-receipts .recv .desc,.flywheel-receipts .recv .delta{grid-column:2}
  .flywheel-receipts .recv .surf{grid-column:1 / -1;font-size:9.5px}
  .close-foot{flex-direction:column;align-items:flex-start;gap:8px}
}

/* Hero MCP affordance (original) */
.mcp-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 4px;
  padding: 8px 15px 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 8px 22px -12px rgba(20, 20, 30, 0.16);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--grey-1);
  cursor: pointer;
  /* .prelude-foot is absolutely positioned and centred, so it sizes to its content rather than
     the viewport; without this the label breaks over two lines and the pill grows a second row. */
  white-space: nowrap;
  transition: border-color 220ms var(--ease-out), color 220ms var(--ease-out);
  /* The ported script reveals the prelude on a JS timeline (mark 200ms, tagline 900ms, arrow
     1600ms) and then types the phrase from 1400ms for roughly two seconds. This lands after the
     phrase has finished, so it never competes with the typing. Done from CSS rather than by
     editing that script, so the port stays byte-faithful. */
  animation: mcpIn 900ms var(--ease-out) 3600ms both;
}
@keyframes mcpIn { from { opacity: 0; transform: translateY(8px); } }
.mcp-cta:hover { border-color: rgba(201, 166, 97, 0.5); color: var(--ink); }
.mcp-cta:focus-visible { outline: 2px solid rgba(201, 166, 97, 0.65); outline-offset: 3px; }

.mcp-cta .mcp-mark { width: 15px; height: 15px; flex: 0 0 auto; color: var(--ink); }
.mcp-cta .mcp-sep { width: 1px; height: 12px; background: var(--hairline-strong); }
/* The protocol name is the signal for people who know it, and quiet for people who do not. */
.mcp-cta .mcp-note {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--grey-3);
}

@media (max-width: 560px) {
  .mcp-cta { font-size: 12.5px; padding: 7px 12px 7px 10px; gap: 8px; }
}