/* ==========================================================================
   PixZClaw — dual-rail landing page
   Aesthetic: technical documentation editorial / engineering zine.

   COLOUR SYSTEM — one blue family, one gradient, one warning.
   The rule the page can defend in prose: THE RAIL A MACHINE CAN VERIFY IS THE
   ONE THAT GETS COLOUR. Everything else is the same blue or no colour at all.
   The page documents this legend to the reader (see .clegend, section 01).

     blue   #3B9EFF  --accent  PixZClaw itself: the mark, the CTAs, our claims
     sky    #7DD3FC  --zc      ZeroClaw, the host runtime: agent, cron, wasm
                               — a lighter tint of the SAME hue, not a rival
     slate  #94A3B8  --pix     the PIX rail, deliberately drained of colour:
                               no software on this page can confirm that rail,
                               so it does not get to look confirmed. AA-safe
                               (7.5:1 on --bg, 6.8:1 on --surface).
     grad   #9945FF → #14F195  --sol-a/--sol-b  Solana, and ONLY Solana.
                               The page's single moment of colour, and it is
                               the sponsor chain's real brand asset. It never
                               appears as decoration — no ambient purple, no
                               purple section rules.
     amber  #F5A623  --amber   a warning STATE, never an actor (UNDERPAID, and
                               the private-key callout, which is the same
                               state wearing a different label)

   RECURRING DETAIL — the "double rail": two stacked hairlines, the upper one
   the neutral PIX slate, the lower one our blue, both fading out to the right.
   It is the mark's two pincers flattened into a rule, and it marks every
   section head and every section kicker.
   ========================================================================== */

:root {
  --bg: #0B0E14;
  --bg-2: #0E131C;
  --surface: #131A26;
  --surface-2: #161E2C;
  --border: #1E2836;
  --rule: #182130;
  --rule-soft: rgba(232, 236, 241, 0.07);

  --accent: #3B9EFF;
  --accent-soft: rgba(59, 158, 255, 0.12);
  --accent-hi: #6DB6FF;                     /* hover/pressed tint of --accent */
  --zc: #7DD3FC;
  --zc-light: #BAE6FD;
  --zc-soft: rgba(125, 211, 252, 0.10);
  --pix: #94A3B8;
  --pix-soft: rgba(148, 163, 184, 0.12);
  --sol-a: #9945FF;
  --sol-b: #14F195;

  --text: #E8ECF1;
  --text-dim: #8A94A6;
  --text-faint: #7B8698; /* AA-safe against --bg and --surface at small sizes */
  --code-bg: #0D1420;
  --code-text: #C9D4E3;
  --amber: #F5A623;

  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --max-w: 1160px;
  --gutter: 1.35rem;
  --r: 12px;
  --r-sm: 7px;

  /* --- glass, derived from OUR palette -------------------------------------
     The reference this was ported from stacked pure white on zinc-950. Pure
     white glass goes cold against our blue, so the tint here is --text
     (#E8ECF1) at a very low alpha over our own #0B0E14: it lifts the surface
     without introducing another hue. --glass-solid is the no-backdrop-filter fallback and is
     the *default* value; the blur is layered on top inside @supports.
     Glass is used in exactly two places: the two hero badges and the proof
     band. Everything else on this page stays flat and editorial on purpose. */
  --glass-solid: #141C27;
  --glass-tint: rgba(232, 236, 241, 0.05);
  --glass-brd: rgba(232, 236, 241, 0.12);
  --glass-hi: rgba(255, 255, 255, 0.085);
  --glass-shadow: 0 26px 50px -26px rgba(0, 0, 0, 0.92);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* `overflow-x: hidden` on <body> propagates to the viewport (html is visible),
   so body itself stays a non-scroll-container and position:sticky survives.
   Where `clip` exists that is guaranteed rather than inferred — clip never
   creates a scroll container, so the pinned flow stage in section 01 cannot
   be broken by this line. */
@supports (overflow: clip) {
  body { overflow-x: clip; }
}

/* --- grain: the page should not read as flat paint --- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 0.55em;
  color: var(--text);
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.85rem, 1.1rem + 2.9vw, 3.15rem);
  letter-spacing: -0.042em;   /* display voice: hard negative tracking */
  word-spacing: 0.02em;
}
h3 { font-size: 1.02rem; letter-spacing: -0.012em; }

p { margin: 0 0 1em; color: var(--text-dim); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* emphasis is neutral by default; it only takes a colour when it names an actor */
em { font-style: normal; color: var(--text); font-weight: 600; }
.em-sol { color: var(--sol-b); font-weight: 500; }
.em-pix { color: var(--pix); font-weight: 500; }

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--code-text);
}

/* Actor tokens (.zc / .sol / .pix) live at the very bottom of this file so they
   win over the local `code { color: inherit }` rules inside individual blocks. */

/* ==========================================================================
   The double rail — the page's recurring typographic detail.
   Two hairlines: the neutral PIX slate above, our blue below, both running
   out to the right. Applied at .kicker__rule (small), .sec-head::before and
   .rem::before (full width) and .footer__fx::before (page close).
   ========================================================================== */

/* ==========================================================================
   The mark — two pincers (one per rail) closing on one invoice.
   Drawn as two circular arcs with a hook, plus a filled rhombus at the pinch.
   Mono for favicon/UI chrome, bicolour where the thesis is being made.
   ========================================================================== */

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.mark { display: block; width: 100%; height: 100%; }
.mark .mk-arc { fill: none; stroke-width: 3.8; stroke-linecap: round; }
.mark--mono .mk-arc { stroke: currentColor; }
.mark--mono .mk-node { fill: currentColor; }
.mark--duo .mk-pix { stroke: var(--pix); }
.mark--duo .mk-sol { stroke: url(#pzSol); }
.mark--duo .mk-node { fill: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 9500;
  background: var(--accent);
  color: #0B0E14;
  padding: 0.6em 1.1em;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ============================== Topbar ============================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(11, 14, 20, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.topbar__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0.55rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; color: var(--text); }
.brand__mark {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  color: var(--accent);
  align-self: center;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }
.brand__ver {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.66rem;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

.topnav { display: none; }
@media (min-width: 1024px) {
  .topnav {
    display: flex;
    gap: 1.35rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
  }
  .topnav a {
    color: var(--text-dim);
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid transparent;
  }
  .topnav a:hover { color: var(--text); text-decoration: none; border-bottom-color: var(--accent); }
  .topnav i { font-style: normal; color: var(--text-faint); font-size: 0.68rem; }
  .topnav a:hover i { color: var(--accent); }
}

.topbar__actions { display: flex; align-items: center; gap: 0.85rem; flex-shrink: 0; }

.lang-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.lang-btn {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-btn.is-active { background: var(--accent); color: #0B0E14; }
.lang-btn:not(.is-active):hover { color: var(--text); background: rgba(255,255,255,0.04); }

.gh-link { color: var(--text-dim); display: inline-flex; transition: color 0.15s ease; }
.gh-link:hover { color: var(--text); }

/* ============================== Buttons ============================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8em 1.5em;
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.93rem;
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--accent); color: #0B0E14; }
.btn--primary:hover { background: var(--accent-hi); transform: translateY(-1px); }
.btn--ghost { border-color: var(--border); color: var(--text); background: rgba(255,255,255,0.015); }
.btn--ghost:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }

/* ============================== Hero ============================== */

.hero {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.hero__rails {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}
/* the rails are atmosphere, not content — pull them back where the column is narrow
   and the copy would otherwise be crossed by a line */
@media (max-width: 979px) { .hero__rails { opacity: 0.26; } }
.hero__rails svg { width: 100%; height: 100%; }
.hrail { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.hrail--pix {
  stroke: var(--pix);
  stroke-dasharray: 5 9;
  filter: drop-shadow(0 0 5px rgba(148,163,184,0.28));
  animation: railflow 14s linear infinite;
}
.hrail--sol {
  stroke: url(#solgrad);
  stroke-dasharray: 5 9;
  filter: drop-shadow(0 0 5px rgba(20,241,149,0.26));
  animation: railflow 18s linear infinite reverse;
}
@keyframes railflow { to { stroke-dashoffset: -140; } }

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.4rem;
}
@media (min-width: 980px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
  .hero__copy { padding-top: 1rem; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.73rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.32em 0.85em;
  margin: 0 0 1.4rem;
  background: rgba(255,255,255,0.015);
}
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot--pix { background: var(--pix); }
.dot--sol { background: linear-gradient(90deg, var(--sol-a), var(--sol-b)); margin-left: -0.25rem; }

.hero h1 {
  font-size: clamp(2.35rem, 1rem + 6.2vw, 4.9rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-bottom: 0.5em;
}
.hero h1 em { color: var(--accent); font-style: italic; }
/* the hero column gets tight between 980 and 1200 — don't let the display type shred */
@media (min-width: 980px) and (max-width: 1199px) {
  .hero h1 { font-size: clamp(2.6rem, 4.7vw, 3.7rem); }
}

.hero__sub {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
  max-width: 44ch;
  color: var(--text-dim);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 1.7rem 0 2.4rem;
}

.spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.spec > div {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.7rem 0.85rem;
  min-width: 0;
}
@media (min-width: 620px) { .spec { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.spec dt {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  margin-bottom: 0.3rem;
}
.spec dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text);
  overflow-wrap: anywhere;
}
.spec__zero { color: var(--accent); font-weight: 700; }  /* our claim → our colour */
.spec dd.zc { color: var(--zc); }                        /* the host runtime */

/* ---- Telegram mock ---- */

.hero__chat { min-width: 0; }

.chat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 34px 70px -28px rgba(0,0,0,0.85), 0 2px 0 rgba(255,255,255,0.02) inset;
}

.chat__bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  background: #0F1622;
  border-bottom: 1px solid var(--border);
}
.chat__avatar {
  background: #1A2432;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 34px; height: 34px;
  padding: 6px;
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat__id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.chat__name { font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; }
.chat__status { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-faint); }
.chat__tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-faint);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.1em 0.4em;
}

.chat__body {
  padding: 0.9rem 0.75rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background:
    radial-gradient(120% 60% at 12% 0%, rgba(59,158,255,0.06), transparent 60%),
    radial-gradient(120% 70% at 90% 100%, rgba(148,163,184,0.05), transparent 60%),
    var(--bg);
}

.msg {
  position: relative;
  max-width: 92%;
  font-size: 0.86rem;
  line-height: 1.5;
  padding: 0.55em 0.75em 1.15em;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  min-width: 0;
}
.msg p { margin: 0; color: inherit; }
.msg__time {
  position: absolute;
  right: 0.65em;
  bottom: 0.35em;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: rgba(232,236,241,0.82);  /* AA over both bubble fills at this size */
}
.msg--out {
  align-self: flex-end;
  background: #2A5278;
  color: #EAF1FA;
  border-radius: 12px 12px 3px 12px;
}
.msg--in {
  align-self: flex-start;
  background: #172432;
  color: var(--text);
  border-radius: 12px 12px 12px 3px;
  width: 100%;
}
.msg--card { padding: 0.7em 0.75em 1.2em; }

.inv__top { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3em; }
.inv__mark { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent); }
.inv__title { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; letter-spacing: -0.015em; }
.inv__amount {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--text);
  margin-bottom: 0.7em;
  display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.inv__amount strong { color: var(--pix); font-weight: 700; }
.inv__sep { color: var(--text-faint); }

.inv__rails {
  border-left: 2px solid transparent;
  border-image: linear-gradient(180deg, var(--pix) 0 48%, var(--sol-a) 52% 76%, var(--sol-b) 100%) 1;
  padding-left: 0.7rem;
  margin-bottom: 0.7em;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.railrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.railrow__chip {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 0.2em 0.5em;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.railrow--pix .railrow__chip { border-color: rgba(148,163,184,0.55); color: var(--pix); background: var(--pix-soft); }
.railrow--sol .railrow__chip {
  background: linear-gradient(#141F2C, #141F2C) padding-box,
              linear-gradient(90deg, var(--sol-a), var(--sol-b)) border-box;
  color: #A9EFD0;
}
.railrow__meta { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-faint); }

.inv__code {
  display: block;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.4em 0.55em;
  font-size: 0.66rem;
  color: var(--code-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inv__note { font-size: 0.8rem; color: var(--text); margin-bottom: 0.45em !important; }
.inv__lock { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); margin-bottom: 0.6em !important; }
.inv__action {
  font-family: var(--font-mono);
  font-size: 0.73rem;
  text-align: center;
  color: var(--accent);
  border: 1px solid rgba(59,158,255,0.4);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 0.45em 0.5em;
}

.chat__gap {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin: 0.15rem 0;
  text-align: center;
}
.chat__gap span {
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
  padding: 0.25em 0;
  display: inline-block;
}

.msg--paid { border: 1px solid rgba(20,241,149,0.28); }
.paid__head { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 0.45em; }
.paid__badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #0B0E14;
  background: var(--sol-b);
  border-radius: 4px;
  padding: 0.12em 0.45em;
}
.paid__title { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; }
.paid__line {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text);
  margin: 0 0 0.2em !important;
  overflow-wrap: anywhere;
}
.paid__line--link { color: var(--sol-b); }
.paid__line--dim { color: var(--text-faint); }

/* ==========================================================================
   The device — the Telegram mock is now held in a phone.
   Ported by hand from a React/Tailwind reference into plain CSS: bezel with a
   double inset ring, machined side buttons, Dynamic Island, diagonal screen
   glare and the home bar. The hardware is deliberately neutral metal — it is
   an object, not an actor, so it takes no colour from the legend. The one
   coloured pixel on it is the island's live dot, and that is blue because
   blue means PixZClaw and PixZClaw is what is running.
   ========================================================================== */

.stage {
  position: relative;
  --device-w: min(100%, clamp(240px, 84vw, 336px));
}

/* atmosphere behind the phone: our blue, plus a whisper of the lighter host
   tint. No purple bloom anywhere — purple on this page belongs to Solana,
   and Solana never shows up as wallpaper. */
.stage__glow {
  position: absolute;
  inset: -8% -6% -4%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(38% 30% at 26% 18%, rgba(59, 158, 255, 0.17), transparent 70%),
    radial-gradient(40% 34% at 78% 82%, rgba(125, 211, 252, 0.09), transparent 72%);
  filter: blur(34px);
}

.device {
  position: relative;
  z-index: 1;
  width: var(--device-w);
  aspect-ratio: 9 / 19.2;
  margin: 0 auto;
  border-radius: 2.75rem;
  background-color: #111;
  box-shadow:
    inset 0 0 0 2px #52565F,
    inset 0 0 0 7px #000,
    0 40px 80px -15px rgba(0, 0, 0, 0.9),
    0 15px 25px -5px rgba(0, 0, 0, 0.7);
  transform: perspective(1200px);
  will-change: transform;
}

.device__btn {
  position: absolute;
  width: 3px;
  left: -3px;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg, #404040 0%, #171717 100%);
  box-shadow:
    -2px 0 5px rgba(0, 0, 0, 0.8),
    inset -1px 0 1px rgba(255, 255, 255, 0.15),
    inset 1px 0 2px rgba(0, 0, 0, 0.8);
}
.device__btn--silent { top: 15%;  height: 4.2%; }
.device__btn--volup  { top: 22.5%; height: 7%; }
.device__btn--voldn  { top: 31.5%; height: 7%; }
.device__btn--power {
  left: auto;
  right: -3px;
  top: 25%;
  height: 11%;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(270deg, #404040 0%, #171717 100%);
  box-shadow:
    2px 0 5px rgba(0, 0, 0, 0.8),
    inset 1px 0 1px rgba(255, 255, 255, 0.15),
    inset -1px 0 2px rgba(0, 0, 0, 0.8);
}

.device__screen {
  position: absolute;
  inset: 7px;
  border-radius: 2.35rem;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding-top: 2.55rem;
}

.device__island {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: min(56%, 100px);
  height: 28px;
  border-radius: 999px;
  background: #000;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 11px;
}
.device__live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);   /* blue = PixZClaw is the thing that is live */
  animation: livepulse 2.6s ease-out infinite;
}
@keyframes livepulse {
  0%        { box-shadow: 0 0 0 0 rgba(59, 158, 255, 0.5); }
  70%, 100% { box-shadow: 0 0 0 6px rgba(59, 158, 255, 0); }
}

.device__glare {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 45%);
}
.device__home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: min(38%, 120px);
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 5;
}

/* the chat becomes the screen: it loses its own frame and gains the phone's */
.device .chat {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.device .chat__bar { flex-shrink: 0; padding: 0.5rem 0.6rem; }
.device .chat__avatar { width: 28px; height: 28px; padding: 5px; }
.device .chat__name { font-size: 0.82rem; }
.device .chat__status { font-size: 0.62rem; }
.device .chat__tag { font-size: 0.62rem; }

/* the only scroll on the phone: subtle, on the Y axis, keyboard reachable */
.device .chat__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0.75rem 0.6rem 1.7rem;
  gap: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 236, 241, 0.16) transparent;
}
/* a real chat sits on the bottom of the screen. `margin-top:auto` on the first
   child does that without breaking the scroll (unlike justify-content:flex-end,
   which can push overflow out of reach). */
.device .chat__body > :first-child { margin-top: auto; }
.device .chat__body::-webkit-scrollbar { width: 4px; }
.device .chat__body::-webkit-scrollbar-thumb {
  background: rgba(232, 236, 241, 0.16);
  border-radius: 999px;
}
.device .chat__body:focus-visible { outline-offset: -3px; }

/* type scale inside the handset — the copy is identical, only the size drops */
.device .msg { font-size: 0.8rem; padding: 0.5em 0.65em 1.05em; max-width: 96%; }
.device .msg--card { padding: 0.62em 0.65em 1.1em; }
.device .inv__title { font-size: 0.83rem; }
.device .inv__amount { font-size: 0.79rem; margin-bottom: 0.6em; }
.device .inv__rails { padding-left: 0.55rem; }
.device .railrow__chip { font-size: 0.63rem; padding: 0.18em 0.42em; }
.device .railrow__meta { font-size: 0.61rem; }
.device .inv__code { font-size: 0.6rem; }
.device .inv__note { font-size: 0.75rem; }
.device .inv__lock { font-size: 0.65rem; }
.device .inv__action { font-size: 0.69rem; }
.device .chat__gap { font-size: 0.58rem; }
.device .paid__badge { font-size: 0.63rem; }
.device .paid__title { font-size: 0.79rem; }
.device .paid__line { font-size: 0.68rem; }
.device .msg__time { font-size: 0.58rem; }

/* ---- floating glass badges ----
   Two facts, both already proven elsewhere on this page: the on-chain amount
   check (section 05) and the self-deleting reminder (section 03). No metric
   is invented here. */

.stage__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.3rem;
}

.gbadge {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  position: relative;
  z-index: 6;
  padding: 0.6rem 0.85rem;
  border-radius: 13px;
  max-width: 17rem;
  background: var(--glass-solid);           /* fallback first, blur is opt-in */
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
.gbadge__k {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.gbadge__v {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: -0.012em;
  color: var(--text);
  line-height: 1.3;
}
.gbadge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* the dot names the actor, exactly like the colour legend in section 01 */
.gbadge__dot--sol { background: linear-gradient(135deg, var(--sol-a), var(--sol-b)); }
.gbadge__dot--zc  { background: var(--zc); }

@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .gbadge {
    background: var(--glass-tint);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
    backdrop-filter: blur(22px) saturate(135%);
  }
}

/* On desktop the badges leave the flow and float off the phone's corners.
   They hang over the bezel, never over the screen: nothing they cover is
   information. Below 980px they drop back into a row under the device. */
@media (min-width: 980px) {
  /* the padding is what keeps the badges clear of the screen: each one is
     roughly as tall as the band reserved for it, so it lands on the bezel's
     rounded corner and nowhere near a message */
  .stage { padding: 3.7rem 0 3.9rem; }
  .stage__badges { margin-top: 0; position: static; }
  .gbadge {
    position: absolute;
    max-width: 15.5rem;
    animation: gfloat 7s ease-in-out infinite;
  }
  .gbadge--verify { top: 0; left: 0; }
  .gbadge--remind { bottom: 0; right: 0; animation-delay: -3.5s; }
}
@keyframes gfloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ============================== Proof band ============================== */

.proof {
  border-bottom: 1px solid var(--rule);
  background:
    linear-gradient(90deg, rgba(59,158,255,0.06), transparent 45%, rgba(59,158,255,0.04));
  padding: clamp(1.8rem, 4vw, 2.8rem) 0 1.6rem;
}
/* the one raised surface in the document body: the four verifiable claims sit
   on glass so they read as evidence pinned above the page, not as body copy */
.proof__list {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 1.15rem 1.3rem;
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--r);
  background: var(--glass-solid);           /* fallback first, blur is opt-in */
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
/* the diffuse corner glow — our blue, at the lowest alpha that still registers */
.proof__list::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -60px;
  top: -70px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(59, 158, 255, 0.16), transparent);
  filter: blur(30px);
  pointer-events: none;
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .proof__list {
    background: var(--glass-tint);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    backdrop-filter: blur(20px) saturate(130%);
  }
}
.proof__list li {
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
  min-width: 0;
}
.proof__list li:first-child { border-top: 0; }
@media (min-width: 560px) {
  .proof__list { grid-template-columns: 1fr 1fr; }
  .proof__list li { padding: 0.9rem 1.2rem 0.9rem 0; }
  .proof__list li:nth-child(2) { border-top: 0; }
}
@media (min-width: 900px) {
  .proof__list { grid-template-columns: 0.85fr 1fr 1.25fr 1.05fr; }
  .proof__list li {
    border-top: 0;
    border-left: 1px solid var(--rule);
    padding: 0 1.3rem;
  }
  .proof__list li:first-child { border-left: 0; padding-left: 0; }
}
.proof__num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2.1rem, 1.2rem + 3vw, 3.3rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
  margin-bottom: 0.25rem;
}
.proof__num--zc a { color: var(--zc); }        /* the PR lives in ZeroClaw's repo */
.proof__num--zc a:hover { color: var(--zc-light); }
.proof__num--zero { color: var(--accent); }    /* our claim about our own code */
.proof__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}
.proof__note {
  display: block;
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.45;
}
.proof__note code, .proof__label code { font-size: 0.85em; color: inherit; }
.proof__foot {
  margin: 1.4rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  text-transform: uppercase;
}

/* ============================== Section chrome ============================== */

.section {
  padding: clamp(3.2rem, 7vw, 6rem) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 1.6rem;
}
.kicker__num { color: var(--accent); font-weight: 700; }
/* the double rail, miniaturised: the section marker reuses the mark's geometry */
.kicker__rule {
  width: 2.4rem;
  flex-shrink: 0;
  align-self: center;
  background-image: linear-gradient(90deg, var(--pix), rgba(148, 163, 184, 0));
  background-size: 100% 1px;
  background-position: 0 0;
  background-repeat: no-repeat;
  height: 5px;
}
.kicker__rule::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 3px;
  background-image: linear-gradient(90deg, var(--accent), rgba(59, 158, 255, 0) 92%);
}

.sec-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 3rem;
  margin-bottom: 2.6rem;
  padding-top: 1.9rem;
}
/* full-width double rail above every section head — the page's signature */
.sec-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background-image:
    linear-gradient(90deg, var(--pix) 0, rgba(148, 163, 184, 0.12) 62%, rgba(148, 163, 184, 0) 100%),
    linear-gradient(90deg, var(--accent) 0, rgba(59, 158, 255, 0.35) 38%, rgba(59, 158, 255, 0) 100%);
  background-size: 100% 1px, 100% 1px;
  background-position: 0 0, 0 4px;
  background-repeat: no-repeat;
}
@media (min-width: 900px) {
  .sec-head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: end; }
  .sec-head h2 { margin-bottom: 0; }
}
.sec-head--tight { grid-template-columns: minmax(0, 1fr); }
.sec-lead { font-size: 1rem; color: var(--text-dim); margin: 0; max-width: 58ch; }

/* ============================== 01 — diagram ============================== */

/* --------------------------------------------------------------------------
   The pinned flow stage.

   `.pin` is nothing but scroll travel. `.pin__stage` is what the reader looks
   at: it sticks to the top of the viewport and centres the headline, the lead
   and the diagram, so the claim is still on screen while the rails draw
   themselves underneath it.

   BOTH the tall height and the sticky are gated behind `.js-pin`, a class
   script.js adds only after it has decided to run the effect (JS present,
   motion allowed, viewport ≥ 1020px). Without that class this is an ordinary
   block: no 300vh void, no dead scroll, diagram complete. That is also the
   state under prefers-reduced-motion and on phones, and the media queries
   backing it are live — script.js re-evaluates on change, without a reload.

   Nothing between `.pin__stage` and the viewport may clip: `.section` is
   position:relative only, `.wrap` has no overflow, and <body>'s overflow-x is
   switched to `clip` where supported (see the top of this file). Scroll is
   never intercepted — no wheel or touch handler exists. It is a pin, not a
   hijack.
   -------------------------------------------------------------------------- */

.pin { position: relative; }
.pin__stage { position: relative; }

.js-pin .pin { height: 320vh; }
.js-pin .pin__stage {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4.6rem 0 3rem;
}
/* align-items:center would otherwise shrink-to-fit the measure column */
.js-pin .pin__stage > .wrap { width: 100%; }
/* short laptop screens: give the stage its height back from the padding */
@media (max-height: 760px) {
  .js-pin .pin__stage { padding: 3.4rem 0 1.8rem; }
  .js-pin .pin__stage .sec-head { margin-bottom: 1.8rem; }
}
/* the pin only ever engages at >=1020px (script.js explains the number), so
   this is the narrowest band that can ever see it: shorten the travel there */
@media (max-width: 1180px) {
  .js-pin .pin { height: 300vh; }
}

.diagram { margin: 0 0 3rem; }
.js-pin .pin__stage .diagram { margin-bottom: 0; }
.diagram__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.014), transparent 40%),
    var(--bg-2);
  padding: 1.1rem 1rem;
}
.diagram__svg {
  display: block;
  width: 100%;
  min-width: 940px;
  height: auto;
}
.dg-box { fill: var(--surface); stroke: var(--border); stroke-width: 1; }
.dg-box--src { fill: #17202E; stroke: rgba(59,158,255,0.5); }
.dg-box--pix { stroke: rgba(148,163,184,0.45); }
.dg-box--sol { stroke: rgba(20,241,149,0.4); }
.dg-box--ghost { fill: transparent; stroke: rgba(148,163,184,0.35); stroke-dasharray: 4 4; }
.dg-box--out { fill: #17202E; stroke: rgba(20,241,149,0.55); }

.dg-t { font-family: var(--font-mono); font-size: 12.5px; fill: var(--text); }
.dg-t--strong { font-family: var(--font-display); font-weight: 700; font-size: 15px; fill: var(--text); }
.dg-t--dim { font-size: 10.5px; fill: var(--text-faint); }
.dg-rail {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
}
.dg-rail--pix { fill: var(--pix); }
.dg-rail--sol { fill: var(--sol-b); }

.dg-line { fill: none; stroke-width: 1.6; }
.dg-line--pix { stroke: var(--pix); }
.dg-line--sol { stroke: url(#dgSol); }
.dg-line--dash { stroke-dasharray: 5 5; opacity: 0.75; }

/* --------------------------------------------------------------------------
   The money-flow draw-on-scroll.

   The technique is ported from the "Gemini effect" (framer-motion animating
   pathLength on a <motion.path>, plus a blurred twin underneath for the
   diffuse light). Here there is no React and no framer-motion: each connector
   sits in a <g> revealed by its own SVG <mask>, and the mask's path is what
   carries stroke-dasharray / stroke-dashoffset. One attribute write per
   connector per frame therefore reveals three things at once — the sharp
   line, its blurred twin and the arrowhead — and the PIX legs keep their
   literal 5-5 dash pattern the whole time, because the dash that means
   "a human has to confirm this" is never the dash doing the animating.

   No colour is invented: the glow of a rail is that rail's own colour. The
   extra richness comes from weight, opacity, blur radius and entry timing.

   The masks ship wide open in index.html; the un-drawn state exists only
   while script.js is running. No JS, or prefers-reduced-motion, or a screen
   narrow enough that the diagram is mostly scrolled off — full diagram.
   -------------------------------------------------------------------------- */

.dg-mask {
  fill: none;
  stroke: #fff;
  stroke-width: 26;      /* wide enough that the blurred twin is not clipped */
  stroke-linecap: butt;  /* butt keeps the drawing front crisp along the path */
  stroke-linejoin: round;
}

/* the blurred twin — same geometry, same colour, no arrowhead */
.dg-line--glow { stroke-width: 3.6; opacity: 0.42; filter: blur(3px); }
/* the verified rail carries more light than the one that needs a human */
.dg-line--sol.dg-line--glow { stroke-width: 4.4; opacity: 0.55; }
.dg-line--dash.dg-line--glow { stroke-width: 3.2; opacity: 0.22; filter: blur(4px); }

/* ---- node pills ----------------------------------------------------------
   Every node's caption rides just outside its box as a pill, in the page's
   existing chip idiom: small mono, hairline border, barely-there fill. The
   border takes the colour of the rail the node belongs to, so the pills are
   readable as a sequence even before anything animates. */

.dg-pill rect {
  fill: rgba(232, 236, 241, 0.028);
  stroke: var(--rule);
  stroke-width: 1;
  transition: stroke 0.45s ease, fill 0.45s ease;
}
.dg-pill text {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--text-dim);
  transition: fill 0.45s ease, opacity 0.45s ease;
}
.dg-pill--brand rect { stroke: rgba(59, 158, 255, 0.45); }
.dg-pill--pix   rect { stroke: rgba(148, 163, 184, 0.45); }
.dg-pill--sol   rect { stroke: rgba(20, 241, 149, 0.4); }
.dg-pill--out   rect { stroke: rgba(20, 241, 149, 0.55); }
/* the operator pill echoes its ghost box: dashed, because it is not automatic */
.dg-pill--ghost rect { stroke: rgba(148, 163, 184, 0.32); stroke-dasharray: 3 3; }

/* ---- pill entrance ----
   A pill does not brighten on arrival, it ARRIVES: it fades up and settles
   the moment its own connector lands, staggered by nothing more than each
   pill's own data-lit threshold. `transform-box: fill-box` makes the
   transform local to the group, so the 6-unit lift and the 4% scale read the
   same wherever the pill sits inside the 1090-wide viewBox — without it the
   origin would be the SVG's own corner and the pills would swing.

   `.is-dim` is the un-entered state and is applied by script.js only, never
   in the markup: with no JS every pill ships already arrived. Under
   prefers-reduced-motion the script never applies it at all, and the global
   motion query below collapses the duration anyway. */
.dg-pill {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.5s cubic-bezier(0.22, 0.7, 0.25, 1),
    transform 0.5s cubic-bezier(0.22, 0.7, 0.25, 1);
}
.dg-pill.is-dim {
  opacity: 0;
  transform: translateY(6px) scale(0.96);
}
/* the ghost pill keeps its dashed stroke through every state — the dash is
   the point, not a decoration, so only the colour is neutralised on the way in */
.dg-pill.is-dim rect { stroke: var(--rule); fill: transparent; }
.dg-pill.is-dim text { fill: var(--text-faint); }

.scroll-hint {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin: 0.6rem 0 0;
}
@media (max-width: 759px) { .scroll-hint { display: block; } }

.diagram__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-faint);
}
.lg { display: inline-flex; align-items: center; gap: 0.5rem; }
.lg::before {
  content: "";
  width: 26px; height: 0;
  border-top: 2px solid var(--sol-b);  /* solid = machine-verified = the Solana rail */
  flex-shrink: 0;
}
.lg--dash::before { border-top-style: dashed; border-top-color: var(--pix); }

/* ============================== colour legend ============================== */

.clegend {
  margin: 0 0 3rem;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--rule);
}
.clegend__h {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 0.85rem;
}
.clegend__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem 2rem;
}
@media (min-width: 620px) { .clegend__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .clegend__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.clegend__list li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.79rem;
  line-height: 1.45;
  color: var(--text-dim);
  min-width: 0;
}
.clegend__list b { font-weight: 600; color: var(--text); }
.sw {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 2px;
  transform: translateY(1px);
}
.sw--brand { background: var(--accent); }
.sw--zc    { background: var(--zc); }
.sw--pix   { background: var(--pix); }
.sw--sol   { background: linear-gradient(135deg, var(--sol-a), var(--sol-b)); }

/* ---- editorial steps ---- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
.steps li {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  padding-left: 3.2rem;
}
@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
  .steps li {
    border-bottom: 0;
    border-left: 1px solid var(--rule);
    padding: 1.6rem 1.6rem 1.6rem 3.4rem;
  }
  .steps li:first-child { border-left: 0; padding-left: 2.6rem; }
}
.steps__n {
  position: absolute;
  left: 0;
  top: 1.35rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
  opacity: 0.85;
}
@media (min-width: 820px) { .steps li:not(:first-child) .steps__n { left: 1.6rem; } }
.steps h3 { margin-bottom: 0.4em; }
.steps p { margin: 0; font-size: 0.93rem; }

/* ============================== 02 — tools ============================== */

.tool {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.016), transparent 30%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.5rem 1.3rem;
  min-width: 0;
}
.tool--feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem;
  margin-bottom: 1.2rem;
  border-color: rgba(59,158,255,0.28);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
@media (min-width: 900px) {
  .tool--feature { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 2.4rem; align-items: start; }
}
.tool__side { min-width: 0; }
.tool__out { min-width: 0; }

.tool__head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.45rem; }
.tool__name { font-family: var(--font-mono); font-size: 1rem; color: var(--text); font-weight: 500; }
.tool--feature .tool__name { font-size: 1.22rem; }
.tool__tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  margin-bottom: 0.9em;
}
.tool__desc { font-size: 0.94rem; margin-bottom: 1.1em; }

.tier {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2em 0.5em;
  border-radius: 4px;
  position: relative;
  letter-spacing: 0.05em;
}
.tier--t1 { border: 1px solid var(--accent); color: var(--accent); background: var(--accent-soft); }
.tier--t0 { border: 1px solid var(--pix); color: var(--pix); background: var(--pix-soft); cursor: help; }

.tip {
  position: absolute;
  bottom: 135%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--code-bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.7rem;
  padding: 0.3em 0.55em;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
  z-index: 5;
}
.tier--t0:hover .tip, .tier--t0:focus-visible .tip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

.facts { list-style: none; margin: 0 0 0.3rem; padding: 0; border-top: 1px solid var(--rule); }
.facts li {
  border-bottom: 1px solid var(--rule);
  padding: 0.6rem 0 0.6rem 1.5rem;
  position: relative;
  font-size: 0.87rem;
  color: var(--text-dim);
}
.facts li::before {
  content: "→";
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  color: var(--accent);
}
.facts code { color: var(--text); }

.verdicts { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.vd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.83rem;
  color: var(--text-dim);
  border-left: 2px solid var(--border);
  padding-left: 0.65rem;
}
.vd b { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.03em; }
.vd--paid { border-left-color: var(--sol-b); }
.vd--paid b { color: var(--sol-b); }
.vd--under { border-left-color: var(--amber); }
.vd--under b { color: var(--amber); }
.vd--over { border-left-color: var(--accent); }
.vd--over b { color: var(--accent); }

.out-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  margin: 0 0 0.45rem;
}

.tool-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
@media (min-width: 900px) {
  .tool-pair { grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); align-items: start; }
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.85em 0.95em;
  overflow-x: auto;
  font-size: 0.74rem;
  line-height: 1.55;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}
pre code { color: var(--code-text); font-family: var(--font-mono); white-space: pre; }

/* ============================== 03 — reminder ==============================
   This section is about ZeroClaw's native cron, so the host colour leads here. */

.rem {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.2rem;
  padding-top: 1.9rem;
}
.rem::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background-image:
    linear-gradient(90deg, var(--pix) 0, rgba(148, 163, 184, 0.12) 62%, rgba(148, 163, 184, 0) 100%),
    linear-gradient(90deg, var(--accent) 0, rgba(59, 158, 255, 0.35) 38%, rgba(59, 158, 255, 0) 100%);
  background-size: 100% 1px, 100% 1px;
  background-position: 0 0, 0 4px;
  background-repeat: no-repeat;
}
@media (min-width: 900px) {
  .rem { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
}
.rem__copy h2 { margin-bottom: 0.6em; }

/* "new in vX" chip — the host runtime ships it, so it wears the host colour */
.vbadge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zc);
  border: 1px solid rgba(125, 211, 252, 0.4);
  background: var(--zc-soft);
  border-radius: 999px;
  padding: 0.3em 0.75em;
  margin: 0 0 1rem;
}
.rem__offer {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--accent);
  border: 1px dashed rgba(59,158,255,0.45);
  background: var(--accent-soft);
  border-radius: 7px;
  padding: 0.7em 0.9em;
  margin: 1.4rem 0;
  display: inline-block;
}
.rem__silence {
  font-size: 0.95rem;
  border-left: 2px solid var(--accent);
  padding-left: 1rem;
  margin: 0;
}
.rem__silence strong { color: var(--accent); }

/* the timeline IS the cron job: host blue until the on-chain check lands (green) */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.5rem;
  bottom: 1.4rem;
  width: 1px;
  background: linear-gradient(180deg, var(--zc) 0, var(--zc) 55%, var(--sol-b) 100%);
  opacity: 0.6;
}
.timeline li {
  position: relative;
  padding: 0 0 1.35rem 1.9rem;
  min-width: 0;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52rem;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--zc);
}
.timeline li.is-hit::before { border-color: var(--sol-b); background: var(--sol-b); box-shadow: 0 0 0 4px rgba(20,241,149,0.12); }
.timeline__k {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.2rem;
}
.timeline li.is-hit .timeline__k { color: var(--sol-b); }
.timeline p { margin: 0; font-size: 0.93rem; }

/* ============================== 04 — what it doesn't do ============================== */

.nots {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .nots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nots .not:nth-child(odd) { border-right: 1px solid var(--rule); padding-right: 2rem; }
  .nots .not:nth-child(even) { padding-left: 2rem; }
}
.not {
  border-bottom: 1px solid var(--rule);
  padding: 1.6rem 0;
  position: relative;
  min-width: 0;
}
.not__x {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--accent);
  border: 1px solid rgba(59,158,255,0.35);
  border-radius: 4px;
  width: 1.7rem; height: 1.7rem;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 0.8rem;
}
.not h3 { font-size: 1.22rem; margin-bottom: 0.45em; }
.not p { margin: 0; font-size: 0.93rem; max-width: 46ch; }

.nots__close {
  margin: 2rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.5rem);
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 40ch;
  line-height: 1.3;
}

/* ============================== 05 — trust ============================== */

.trust { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.trust li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}
@media (min-width: 820px) {
  .trust li {
    grid-template-columns: 3rem minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: baseline;
    padding: 1.7rem 0;
  }
  .trust h3 { grid-column: 2; margin: 0; }
  .trust p { grid-column: 3; margin: 0; }
  .trust__i { grid-row: 1 / span 2; }
}
.trust__i {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  letter-spacing: 0.08em;
}
.trust h3 { font-size: 1.15rem; margin-bottom: 0.25em; }
.trust p { font-size: 0.94rem; margin: 0; }
.trust li:hover .trust__i { color: var(--accent); }

/* ============================== thesis / breathing band ==============================
   The one place the mark appears large. Asymmetric on purpose — never centred. */

.thesis {
  border-bottom: 1px solid var(--rule);
  padding: clamp(3rem, 7vw, 5.5rem) 0;
  background:
    radial-gradient(70% 120% at 14% 50%, rgba(59, 158, 255, 0.055), transparent 62%),
    var(--bg-2);
}
.thesis__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.8rem;
  align-items: center;
}
@media (min-width: 820px) {
  .thesis__grid { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); }
}
.thesis__mark {
  width: clamp(116px, 24vw, 208px);
  height: clamp(116px, 24vw, 208px);
}
.thesis__copy h2 {
  font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
  letter-spacing: -0.045em;
  margin-bottom: 0.5em;
}
.thesis__copy p { font-size: 1rem; max-width: 52ch; margin: 0 0 1rem; }
.thesis__foot {
  font-family: var(--font-mono);
  font-size: 0.7rem !important;
  line-height: 1.6;
  color: var(--text-faint);
  margin: 0 !important;
  max-width: 56ch;
}

/* ============================== 06 — where it runs ============================== */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--rule);
}
.where {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  text-align: left;
}
.where th, .where td {
  padding: 1.15rem 1.2rem 1.15rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.where thead th {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  font-weight: 500;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.where tbody th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text);
  width: 30%;
}
.where tbody th span {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  margin-top: 0.15rem;
}
.where__cost {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: var(--text);
  white-space: nowrap;
  width: 22%;
}
.where__cost i {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--text-faint);
  letter-spacing: 0.06em;
}
.where__cost--free { color: var(--text); font-weight: 700; }
.where td:last-child { color: var(--text-dim); font-size: 0.9rem; }

.fineprint {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--text-faint);
  margin: 1.2rem 0 0;
  max-width: 62ch;
}

/* ============================== 07 — install ============================== */

.inst { border-top: 1px solid var(--rule); }
.inst__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}
@media (min-width: 900px) {
  .inst__row { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: 2.5rem; align-items: start; }
}
.inst__label { display: flex; gap: 0.8rem; align-items: baseline; min-width: 0; }
.inst__label p { margin: 0; color: var(--text); font-size: 0.95rem; }
.inst__n {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
  flex-shrink: 0;
}

.code-block { position: relative; min-width: 0; }
.code-block pre { padding-right: 5rem; }
/* fade the code out under the copy button while the block is scrolled sideways */
.code-block::after {
  content: "";
  position: absolute;
  top: 1px; right: 1px; bottom: 1px;
  width: 5.6rem;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: linear-gradient(90deg, rgba(13, 20, 32, 0) 0%, var(--code-bg) 42%);
  pointer-events: none;
  z-index: 1;
}
.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  padding: 0.28em 0.6em;
  border-radius: 4px;
  cursor: pointer;
  z-index: 2;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent); }
.copy-btn.is-copied { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* the release tag inside the install command is injected from one constant in script.js */
[data-version-tag] { color: var(--zc); }

/* the second and last use of amber on this page. Amber is never an actor —
   it is the warning STATE, and this callout is the same state as UNDERPAID
   wearing a different label: "you are about to paste the wrong kind of key". */
.callout {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  border-radius: var(--r-sm);
  padding: 0.85em 1em;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  background: rgba(245,166,35,0.07);
  border: 1px solid rgba(245,166,35,0.3);
  color: #F0D3A4;
}
.callout p { margin: 0; color: inherit; }
.callout code { background: rgba(0,0,0,0.3); padding: 0.1em 0.35em; border-radius: 3px; color: inherit; }
.callout__mark { flex-shrink: 0; }

/* ============================== 08 — FAQ ============================== */

.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.18rem);
  letter-spacing: -0.015em;
  color: var(--text);
  position: relative;
  transition: color 0.15s ease;
}
.faq__item summary:hover { color: var(--accent); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 1.55rem;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__a { padding: 0 0 1.3rem; max-width: 70ch; }
.faq__a p { margin: 0; font-size: 0.95rem; }

/* ============================== Footer ============================== */

.footer { padding: clamp(2.5rem, 5vw, 4rem) 0 2.2rem; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 820px) {
  .footer__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 3rem; }
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  margin: 0 0 0.7rem;
  letter-spacing: -0.02em;
}
.footer__mark { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); }
.footer__ver {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}
.footer__credit { font-size: 0.88rem; max-width: 52ch; margin-bottom: 0.6rem; }
.footer__license { font-size: 0.8rem; color: var(--text-faint); margin: 0 0 0.6rem; }
.footer__tm {
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--text-faint);
  margin: 0;
  max-width: 52ch;
}
.footer__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
.footer__nav li { border-bottom: 1px solid var(--rule); }
.footer__nav a {
  display: block;
  padding: 0.6rem 0;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.79rem;
}
.footer__nav a:hover { color: var(--accent); text-decoration: none; }
/* the page closes on the same double rail it opens every section with */
.footer__fx {
  position: relative;
  margin: 2.4rem 0 0;
  padding-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-faint);
}
.footer__fx::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background-image:
    linear-gradient(90deg, var(--pix) 0, rgba(148, 163, 184, 0.12) 62%, rgba(148, 163, 184, 0) 100%),
    linear-gradient(90deg, var(--accent) 0, rgba(59, 158, 255, 0.35) 38%, rgba(59, 158, 255, 0) 100%);
  background-size: 100% 1px, 100% 1px;
  background-position: 0 0, 0 4px;
  background-repeat: no-repeat;
}

/* ============================== Motion ============================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================== Narrow-screen hardening ============================== */

@media (max-width: 420px) {
  :root { --gutter: 1.05rem; }
  .eyebrow { font-size: 0.65rem; letter-spacing: 0.06em; padding: 0.32em 0.7em; }
  .hero__ctas .btn { width: 100%; }
  .sec-head, .rem { padding-top: 1.5rem; }
  .tool { padding: 1.2rem 1rem; }
  .rem__offer { font-size: 0.8rem; }
  .msg { max-width: 100%; }
  .stage { --device-w: min(100%, 300px); }
  /* a hair taller on the smallest screens so the whole conversation still
     lands inside the screen instead of being cut at the home bar */
  .device { aspect-ratio: 9 / 20.2; }
  .device .chat__body { padding: 0.65rem 0.5rem 1.65rem; gap: 0.44rem; }
  .gbadge { padding: 0.5rem 0.72rem; max-width: 100%; }
  .gbadge__v { font-size: 0.81rem; }
  .gbadge__k { font-size: 0.6rem; letter-spacing: 0.07em; }
  .proof__list { padding: 1rem 1.05rem; }
  .inv__title { font-size: 0.84rem; }
  .proof__num { font-size: 2.1rem; }
  .not__x { margin-bottom: 0.6rem; }
  pre { font-size: 0.68rem; }
  .topnav { display: none; }
  .brand__name { font-size: 0.95rem; }
  .clegend__list li { font-size: 0.76rem; }
  .thesis__mark { width: 108px; height: 108px; }
}

/* ==========================================================================
   Actor tokens — LAST in the cascade on purpose.
   A word only takes a colour when it names an actor of the system; several
   blocks above neutralise <code> with `color: inherit`, and these must win.
   ========================================================================== */

.zc, code.zc   { color: var(--zc); font-style: normal; }   /* ZeroClaw, the host */
.sol, code.sol { color: var(--sol-b); font-style: normal; } /* the Solana rail   */
.pix, code.pix { color: var(--pix); font-style: normal; }   /* the PIX rail      */