/* --------------------------------------------------------------------------
   AGENTGOD - Design System
   Creator and Destroyer of Agents
   --------------------------------------------------------------------------
    1. Tokens            13. Quote                 24. Status Bar
    2. Reset             14. Terminal              25. Nav Panel
    3. Atmosphere        15. Orchestration Diagram 26. Address
    4. Chrome            16. Grids & Cards         27. Notice
    5. Layout Primitives 17. CTA                   28. Notify
    6. Typography        18. Footer                29. Countdown
    7. Nav               19. Scroll Reveal         30. Utilities
    8. Buttons           20. Page Header           31. State Chip
    9. Asset Slots       21. Docs                  32. Ten-Second Block
   10. Hero              22. Editorial / Philosophy 33. Flags
   11. Marquee           23. Responsive            34. Ledger
   12. Section Head                                35. Vesting
                                                   36. Seals
                                                   37. Eras
                                                   38. Access Tiers
                                                   39. Grid Shrink Fix

   23 is the responsive block for sections 1-22. Everything from 24 on is
   launch work and carries its own media queries inline, so a component and
   the rules that reshape it stay in one place.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces - a light, faintly warm paper. Cards sit on it in plain white,
     which is what gives the hairline borders something to describe. */
  --void:        #F6F7F5;   /* the page */
  --ink:         #FFFFFF;   /* raised: cards, panels, code */
  --surface:     #FFFFFF;

  /* The dark bands. The page is light, but the hero, the pull quote, the
     terminal, the closing call and the footer are cut out of near-black -
     that alternation is most of the rhythm of this design. */
  --dark:        #0A0C0B;
  --dark-2:      #121614;

  --text:        #0C0E0D;
  --text-dim:    #5C645F;
  --text-faint:  #8B938D;

  /* Hairlines. Solid rather than alpha, so a card border reads the same on
     white as it does on the page. */
  --line:        #E4E8E5;
  --line-strong: #D3D9D5;

  /* Green carries creation, links, active state and every affirmative mark.
     Deep on light, bright on dark - the same idea at two exposures. */
  --create:      #12805A;
  --create-dim:  #E4F6EC;
  --mint:        #3FDD97;

  /* Ember still means termination, and nothing else. */
  --destroy:     #C9552B;
  --destroy-dim: rgba(201, 85, 43, 0.10);

  /* Tints used by the card footer strips */
  --tint-green:  #E7F7EE;
  --tint-blue:   #E8F1FE;
  --tint-amber:  #FCF4E2;
  --ink-green:   #14654A;
  --ink-blue:    #1D4ED8;
  --ink-amber:   #92610E;

  /* Shape */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(12, 14, 13, 0.05);
  --shadow-md: 0 1px 2px rgba(12, 14, 13, 0.04), 0 4px 16px rgba(12, 14, 13, 0.05);

  /* Type */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid type scale */
  --t-h1:    clamp(1.875rem, 3.6vw, 3.375rem);
  --t-h2:    clamp(1.5rem, 2.4vw, 2.125rem);
  --t-h3:    clamp(1.0625rem, 1.25vw, 1.1875rem);
  --t-quote: clamp(1.25rem, 2.2vw, 2.125rem);
  --t-body:  clamp(0.875rem, 0.9vw, 0.9375rem);
  --t-micro: 0.625rem;

  /* Space */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.875rem;
  --s-4:  1.25rem;
  --s-5:  2rem;
  --s-6:  3rem;
  --s-7:  3.25rem;
  --s-8:  4.5rem;
  --s-9:  6rem;
  --s-10: 7.5rem;

  /* Layout */
  --gutter:    clamp(1.25rem, 5vw, 5rem);
  --measure:   1440px;
  --measure-n: 1120px;
  --prose:     62ch;

  /* Motion - slow, cinematic, no bounce */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur:      0.6s;
  --dur-slow: 1.1s;

  --nav-h: 72px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--s-5));
}

body {
  background: var(--void);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

::selection { background: var(--create); color: var(--void); }

:focus-visible { outline: 1px solid var(--create); outline-offset: 3px; }

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

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

/* --------------------------------------------------------------------------
   3. ATMOSPHERE - grain + vignette, fixed above the page
   -------------------------------------------------------------------------- */

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
}

.atmosphere__grain {
  position: absolute;
  inset: -50%;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 800ms steps(4) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

.atmosphere__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(125% 95% at 50% 40%, transparent 52%, rgba(0, 0, 0, 0.3) 100%);
}

/* --------------------------------------------------------------------------
   4. CHROME - skip link, sound toggle
   -------------------------------------------------------------------------- */

/* Invisible until tabbed to, then the first thing in the tab order. */
.skip {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 1000;
  padding: var(--s-3) var(--s-4);
  background: var(--create);
  color: var(--void);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: translateY(-250%);
  transition: transform var(--dur) var(--ease);
}

.skip:focus { transform: none; }

/* The skip target takes focus programmatically; it should not draw a ring. */
main:focus { outline: none; }

/* Background audio runs on every page, so it needs a way off on every page.
   It lives in the nav so it never lands on content. Rendered by JS only - the
   markup ships hidden, so a visitor without script is never shown a control
   that cannot work. */
.sound {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  height: 34px;
  padding: 0 var(--s-3) 0 var(--s-4);
  border: 1px solid var(--line);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.sound[hidden] { display: none; }

.sound:hover { color: var(--text); border-color: var(--line-strong); }

.sound__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
}

.sound__bars i {
  width: 2px;
  height: 100%;
  background: var(--create);
  transform-origin: bottom;
  animation: eq 1.1s var(--ease-io) infinite;
}

.sound__bars i:nth-child(2) { animation-delay: 0.18s; }
.sound__bars i:nth-child(3) { animation-delay: 0.36s; }

@keyframes eq {
  0%, 100% { transform: scaleY(0.28); }
  50%       { transform: scaleY(1); }
}

/* Muted reads as three flat ticks - the control still says what it is. */
.sound.is-muted .sound__bars i {
  animation: none;
  height: 2px;
  background: var(--text-faint);
}

@media (max-width: 860px) {
  .sound__label { display: none; }
  .sound { padding-inline: var(--s-3); }
}

/* --------------------------------------------------------------------------
   5. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: var(--measure-n); }

.section {
  position: relative;
  padding-block: var(--s-9);
  border-top: 1px solid var(--line);
}

.section--tight { padding-block: var(--s-8); }
.section--tall  { padding-block: var(--s-10); }
.section--seam  { border-top: 0; }

.prose { max-width: var(--prose); }

.rule { height: 1px; background: var(--line); border: 0; }

.stack-5 { display: flex; flex-direction: column; gap: var(--s-5); }

/* Two equal columns that collapse on small screens */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6) var(--s-7);
  align-items: start;
}

/* Utilities - deliberately few */
.line { display: block; }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.w-34 { max-width: 34ch; }
.w-42 { max-width: 42ch; }

/* --------------------------------------------------------------------------
   6. TYPOGRAPHY
   -------------------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.eyebrow--bare::after { display: none; }
.eyebrow__index { color: var(--create); }

.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.display--1 { font-size: var(--t-h1); }

.heading {
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.lede {
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.6;
  color: var(--text-dim);
}

/* Inline code - used in prose on every page, not just the docs */
code {
  font-family: var(--font-mono);
  font-size: 0.8125em;
  padding: 0.15em 0.4em;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--create);
  white-space: nowrap;
}

.body-dim   { color: var(--text-dim); }
.body-faint { color: var(--text-faint); }
.ink-create  { color: var(--create); }
.ink-destroy { color: var(--destroy); }
.italic { font-style: italic; }

/* --------------------------------------------------------------------------
   7. NAV
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 800;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.nav.is-stuck {
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}

.nav__inner {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.wordmark { display: flex; flex-direction: column; gap: 2px; line-height: 1; }

.wordmark__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.wordmark__sub {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.nav__links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
}

.nav__link {
  position: relative;
  padding-block: 4px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color var(--dur) var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--create);
  transition: width var(--dur) var(--ease);
}

.nav__link:hover { color: var(--text); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { width: 100%; }
.nav__link[aria-current="page"] { color: var(--text); }

.nav__toggle {
  display: none;
  position: relative;
  width: 40px; height: 40px;
  margin-right: -8px;
}

.nav__toggle span {
  position: absolute;
  left: 9px;
  width: 22px; height: 1px;
  background: var(--text);
  transition: transform var(--dur) var(--ease);
}

.nav__toggle span:nth-child(1) { top: 16px; }
.nav__toggle span:nth-child(2) { top: 23px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   8. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  min-width: 15rem;
  width: fit-content;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--create);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease);
}

.btn:hover { color: var(--void); border-color: var(--create); }
.btn:hover::before { transform: translateY(0); }

.btn__arrow { flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost {
  min-width: 0;
  gap: var(--s-3);
  padding-inline: 0;
  border-color: transparent;
  color: var(--text-dim);
}

.btn--ghost::before { display: none; }
.btn--ghost:hover { color: var(--create); border-color: transparent; }

.btn--compact { min-width: 0; gap: var(--s-4); padding: 0.625rem var(--s-4); }

/* --------------------------------------------------------------------------
   9. ASSET SLOTS
   Drop a file at the given src and it replaces the frame automatically.
   -------------------------------------------------------------------------- */

.slot {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}

.slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}

/* Placeholder state - applied by JS when the file is absent */
.slot.is-empty {
  background:
    repeating-linear-gradient(-45deg, transparent 0 11px, rgba(237, 235, 231, 0.022) 11px 12px),
    var(--surface);
}

/* visibility, not display: a lazy-loading image with no box never enters the
   viewport, so it would never load, so it would never leave this state. */
.slot.is-empty img { visibility: hidden; }

.slot.is-empty::after {
  content: attr(data-slot);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  text-align: center;
  white-space: pre-line;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 2.1;
}

/* Corner ticks — reads as a camera frame */
.slot::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) left  top    / 14px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) left  top    / 1px 14px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right top    / 14px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right top    / 1px 14px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) left  bottom / 14px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) left  bottom / 1px 14px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right bottom / 14px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right bottom / 1px 14px no-repeat;
}

.slot--bare::before { display: none; }

/* Aspect variants */
.slot--21x9 { aspect-ratio: 21 / 9; }
.slot--16x9 { aspect-ratio: 16 / 9; }
.slot--4x3  { aspect-ratio: 4 / 3; }
.slot--1x1  { aspect-ratio: 1 / 1; }
.slot--3x4  { aspect-ratio: 3 / 4; }
.slot--2x3  { aspect-ratio: 2 / 3; }
.slot--3x1  { aspect-ratio: 3 / 1; }

/* --------------------------------------------------------------------------
   10. HERO

   A poster, not a header - and the art already carries the biggest word on
   the page, so the copy must never sit on it.

   Measured from assets/hero-img.png (1145x1373): the glowing artwork runs
   from f=0.277 to f=0.619 of the image height, with the eye at f=0.430.
   Placing the plate at top:-19% and height:105% of the hero maps that band
   to 10%..46% of the viewport, eye at 26% - clear of the nav above and the
   copy below. Change one of those numbers and you must change the other.

   The copy then lives in its own grid row that starts at 46svh, so it cannot
   climb into the artwork no matter how long the headline gets.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--void);

  /* row 1  the artwork's bright band, reserved and kept empty
     row 2  the copy
     row 3  the proof strip */
  display: grid;
  grid-template-rows: minmax(46svh, auto) 1fr auto;
}

.hero__stage { position: absolute; inset: 0; z-index: 0; }

.hero__stage .slot {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  background: transparent;
  aspect-ratio: auto;
  overflow: visible;
}

.hero__stage .slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
  filter: saturate(0.84) contrast(1.06) brightness(0.96);
  animation: driftIn 3.2s var(--ease) both;
}

@keyframes driftIn {
  from { transform: scale(1.08); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* --- Landscape: the whole plate, centred, over a wash of itself --------- */
@media (min-aspect-ratio: 1 / 1) {
  /* The plate is portrait and the screen is not, so its sides would be dead
     black. Fill them with an out-of-focus copy of the same frame. */
  .hero__stage::before {
    content: "";
    position: absolute;
    inset: -8%;
    z-index: 0;
    background: url("../assets/hero-img.webp") center 38% / cover no-repeat;
    filter: blur(34px) saturate(1.15) brightness(0.44);
  }

  .hero__stage .slot img {
    inset: auto;
    top: -19%;
    left: 50%;
    width: auto;
    max-width: none;
    height: 105%;
    object-fit: contain;
    object-position: center top;
    animation: driftInCentred 3.2s var(--ease) both;
    /* Melt into the wash rather than ending on a vertical seam. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 13%, #000 87%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 13%, #000 87%, transparent);
  }

  @keyframes driftInCentred {
    from { transform: translateX(-50%) scale(1.06); opacity: 0; }
    to   { transform: translateX(-50%) scale(1); opacity: 1; }
  }
}

/* --- Portrait: the art is a band, the copy runs underneath -------------- */
@media (max-aspect-ratio: 1 / 1) {
  .hero { grid-template-rows: auto 1fr auto; }

  .hero__stage {
    position: relative;
    inset: auto;
    grid-row: 1;
    height: 54svh;
    min-height: 20rem;
  }

  .hero__stage .slot img { object-position: center 20%; }

  .hero__body { margin-top: calc(-1 * var(--s-6)); }
}

/* Grade the plate into the page: open across the artwork, heavy under it so
   the copy has ground without the whole frame being dimmed. */
.hero__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to top,
      var(--void) 0%,
      rgba(8, 8, 10, 0.92) 14%,
      rgba(8, 8, 10, 0.55) 34%,
      rgba(8, 8, 10, 0.06) 52%,
      rgba(8, 8, 10, 0.34) 100%),
    radial-gradient(52% 36% at 50% 26%, rgba(169, 198, 228, 0.10), transparent 72%);
}

.hero__body {
  grid-row: 2;
  align-self: end;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: var(--s-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__body::before {
  content: "";
  position: absolute;
  inset: -14% -18% -24%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(56% 64% at 50% 44%,
    rgba(8, 8, 10, 0.90), rgba(8, 8, 10, 0.52) 54%, transparent 78%);
}

.hero__kicker {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.hero__title {
  margin-top: var(--s-4);
  font-size: clamp(2rem, 4.4vw, 4.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-shadow: 0 2px 40px rgba(8, 8, 10, 0.9);
}

.hero__lede {
  margin-top: var(--s-4);
  max-width: 56ch;
  font-size: clamp(0.9375rem, 1.15vw, 1.125rem);
  color: var(--text-dim);
}

.hero__lede strong { color: var(--text); font-weight: 500; }

.hero__actions {
  margin-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
}

/* Proof strip along the fold */
.hero__meta {
  grid-row: 3;
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  background: rgba(8, 8, 10, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero__meta-inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.metric {
  padding: var(--s-4) var(--s-4);
  border-left: 1px solid var(--line);
  text-align: center;
}

.metric:first-child { border-left: 0; }

.metric__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.7vw, 1.625rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.metric__key {
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   11. MARQUEE — one signature strip, kept quiet
   -------------------------------------------------------------------------- */

.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: var(--s-3);
  background: var(--ink);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: slide 46s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding-right: var(--s-6);
  flex: none;
}

.marquee__item {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.marquee__star { color: var(--create); opacity: 0.5; }

@keyframes slide { to { transform: translateX(-50%); } }
/* --------------------------------------------------------------------------
   12. SECTION HEAD — shared two-column intro
   -------------------------------------------------------------------------- */

.head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-5) var(--s-7);
  align-items: start;
}

.head__eyebrow { grid-column: 1 / -1; margin-bottom: var(--s-4); }
.head__title { grid-column: 1; }
.head__aside { grid-column: 2; padding-top: var(--s-2); }

.head--stack { grid-template-columns: 1fr; max-width: 60ch; }
.head--stack .head__title,
.head--stack .head__aside { grid-column: 1; }

/* Control band. The prose here is max-width capped, so a 1fr/1fr split left a
   dead channel down the middle with the portrait stranded on the far gutter.
   A fixed, narrower image column inside a narrower shell closes that up, and
   centring balances the portrait against a much taller text column. */
.control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
  gap: var(--s-7);
  align-items: center;
}

/* --------------------------------------------------------------------------
   13. QUOTE
   -------------------------------------------------------------------------- */

.quote {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
}

.quote__stage { position: absolute; inset: 0; z-index: 0; }

.quote__stage .slot { position: absolute; inset: 0; border: 0; aspect-ratio: auto; }
.quote__stage .slot img { filter: saturate(0.62) contrast(1.08) brightness(0.88); }

.quote__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(8, 8, 10, 0.86) 0%, rgba(8, 8, 10, 0.5) 45%, rgba(8, 8, 10, 0.14) 100%);
}

.quote__body { position: relative; z-index: 1; padding-block: var(--s-10); }

/* Set as a title card rather than a literary pull quote: the face has no
   business being italic, and the restraint is what makes the line land. */
.quote__mark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-quote);
  line-height: 1.32;
  letter-spacing: -0.02em;
  max-width: 30ch;
  text-wrap: balance;
}

.quote__coda {
  display: block;
  margin-top: var(--s-4);
  font-weight: 500;
  color: var(--create);
}

.quote__cite {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  max-width: 26ch;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   14. TERMINAL
   -------------------------------------------------------------------------- */

.terminal {
  border: 1px solid var(--line);
  background: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 2;
}

.terminal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.terminal__bar > span { display: flex; align-items: center; gap: var(--s-2); }

.terminal__dot {
  flex: none;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--create);
  box-shadow: 0 0 8px var(--create);
  animation: pulse 2.4s var(--ease-io) infinite;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.terminal__log {
  padding: var(--s-4);
  min-height: 17rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.terminal__line { display: flex; gap: var(--s-3); color: var(--text-dim); }
.terminal__line > .caret { flex: none; color: var(--create); }
.terminal__line[data-tone="create"]  { color: var(--create); }
.terminal__line[data-tone="destroy"] { color: var(--destroy); }
.terminal__line[data-tone="destroy"] > .caret { color: var(--destroy); }
.terminal__line[data-tone="dim"] { color: var(--text-faint); }

.terminal__cursor {
  display: inline-block;
  width: 6px; height: 1em;
  background: var(--create);
  vertical-align: text-bottom;
  animation: blink 1.1s steps(2) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* --------------------------------------------------------------------------
   15. ORCHESTRATION DIAGRAM

   You, the architect, the workers it writes, and the question at the end.
   It sits directly on the page - no frame, no plate - and reads top to
   bottom the way the run does. One dark node: the architect.
   -------------------------------------------------------------------------- */

.diagram {
  display: grid;
  place-items: center;
  gap: var(--s-2);
  padding: var(--s-5) 0;
}

.node {
  display: grid;
  place-items: center;
  gap: 3px;
  min-width: 13rem;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--ink);
  text-align: center;
}

/* The architect is the only plain node in the diagram, and the only dark one. */
.diagram > .node:not(.node--you) {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
}

.node__name {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.node__role {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim);
}

.diagram > .node:not(.node--you) .node__role { color: #A7B0AA; }

.node--you {
  min-width: 0;
  padding-inline: var(--s-4);
  border-style: dashed;
  border-color: var(--line-strong);
  background: transparent;
}

.node--you .node__role { color: var(--text-faint); }

.wire { width: 1px; height: var(--s-5); background: var(--line-strong); }
.wire--destroy { background: var(--destroy); }

.fanout {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4);
  padding-top: var(--s-5);
}

.fanout::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: var(--line-strong);
}

.worker {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--s-2);
  padding-top: var(--s-4);
}

.worker::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--s-5));
  left: 50%;
  width: 1px;
  height: calc(var(--s-5) + var(--s-4));
  background: var(--line-strong);
}

.worker__box {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--ink);
  color: var(--text-dim);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.worker:hover .worker__box { color: var(--create); border-color: var(--create); }

.worker__label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

.terminated {
  margin-top: var(--s-2);
  display: grid;
  place-items: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--destroy);
}

.terminated span:last-child { color: var(--text-faint); }

/* --------------------------------------------------------------------------
   16. GRIDS & CARDS
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: var(--s-7);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--void);
  padding: var(--s-5) clamp(1.125rem, 1.9vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: background var(--dur) var(--ease);
}

.card:hover { background: var(--ink); }
.card--wide { grid-column: span 2; }

/* .grid paints its own hairlines through 1px gaps — avoid doubling */
.grid > .slot { border: 0; }

.card__index {
  margin-bottom: var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  color: var(--text-faint);
}

.card__title { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.005em; }
.card__text  { color: var(--text-dim); font-size: 0.9375rem; }

.assertions {
  margin-top: var(--s-5);
  max-width: 46ch;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.assertions li {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.assertions__key {
  flex: none;
  width: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  color: var(--create);
}

/* --------------------------------------------------------------------------
   17. CTA
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  text-align: center;
}

.cta__stage { position: absolute; inset: 0; z-index: 0; }
.cta__stage .slot { position: absolute; inset: 0; border: 0; aspect-ratio: auto; }
.cta__stage .slot img { filter: saturate(0.85) contrast(1.02) brightness(1); }

.cta__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 50% 60%, rgba(169, 198, 228, 0.08), transparent 70%),
    linear-gradient(to bottom,
      var(--void) 0%,
      rgba(8, 8, 10, 0.26) 13%,
      rgba(8, 8, 10, 0.07) 45%,
      rgba(8, 8, 10, 0.26) 87%,
      var(--void) 100%);
}

/* Local pool behind the centred copy — same tactic as the hero. Buys back
   contrast for the text without dimming the plate again. */
.cta__body::before {
  content: "";
  position: absolute;
  inset: 6% -12%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(46% 64% at 50% 50%, rgba(8, 8, 10, 0.8), rgba(8, 8, 10, 0.34) 56%, transparent 76%);
}

.cta__body {
  position: relative;
  z-index: 1;
  padding-block: var(--s-10);
  /* The closing panel should feel like a held frame, not a strip. Height is
     driven by the viewport so it stays proportionate on any screen. */
  min-height: 78svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--s-5);
}

.cta__title { max-width: 22ch; }

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */

.footer { border-top: 1px solid var(--line); padding-block: var(--s-7) var(--s-5); }

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}

.footer__col { display: flex; flex-direction: column; gap: var(--s-4); }

.footer__heading {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.footer__col a {
  width: fit-content;
  color: var(--text-dim);
  font-size: 0.875rem;
  transition: color var(--dur) var(--ease);
}

.footer__col a:hover { color: var(--create); }

.footer__note { color: var(--text-faint); font-size: 0.8125rem; max-width: 30ch; }

.footer__bottom {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.socials { display: flex; gap: var(--s-4); }

.socials a {
  color: var(--text-faint);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.socials a:hover { color: var(--text); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   19. SCROLL REVEAL
   -------------------------------------------------------------------------- */

/* Scoped to .js so content is never hidden if the script fails to load */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   20. PAGE HEADER (interior pages)
   -------------------------------------------------------------------------- */

.pagehead {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + var(--s-8));
  padding-bottom: var(--s-8);
}

.pagehead::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  background: var(--line);
}

.pagehead--flush::after { display: none; }

.pagehead__title { margin-top: var(--s-5); max-width: 22ch; }
.pagehead__lede  { margin-top: var(--s-5); max-width: 52ch; }

/* --------------------------------------------------------------------------
   21. DOCS
   -------------------------------------------------------------------------- */

.docs {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--s-7) var(--s-8);
  align-items: start;
  padding-block: var(--s-8);
}

.docs__nav {
  position: sticky;
  top: calc(var(--nav-h) + var(--s-5));
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.docs__group { display: flex; flex-direction: column; gap: var(--s-3); }

.docs__group a {
  font-size: 0.875rem;
  color: var(--text-dim);
  padding-left: var(--s-4);
  border-left: 1px solid var(--line);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.docs__group a:hover,
.docs__group a.is-active { color: var(--text); border-left-color: var(--create); }

.docs__main { min-width: 0; display: flex; flex-direction: column; gap: var(--s-8); }

.doc-block { display: flex; flex-direction: column; gap: var(--s-4); scroll-margin-top: calc(var(--nav-h) + var(--s-5)); }
.doc-block p { color: var(--text-dim); max-width: var(--prose); }
.doc-block h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.02em; }
.doc-block h3 { font-size: 1.0625rem; font-weight: 500; margin-top: var(--s-3); }

.doc-block em { font-style: italic; color: var(--text); }

.code { border: 1px solid var(--line); background: var(--ink); overflow: hidden; }

.code__bar {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.code pre {
  margin: 0;
  padding: var(--s-4);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--text-dim);
  tab-size: 2;
}

.code .k { color: var(--create); }
.code .s { color: #C8C0A8; }
.code .c { color: var(--text-faint); font-style: italic; }
.code .d { color: var(--destroy); }

.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

.table th, .table td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.table th {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 400;
}

.table td { color: var(--text-dim); }
.table td:first-child {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--create);
  white-space: nowrap;
}

.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.table-wrap .table td, .table-wrap .table th { border-bottom-color: var(--line); }
.table-wrap .table tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   22. EDITORIAL / PHILOSOPHY
   -------------------------------------------------------------------------- */

.essay {
  display: grid;
  grid-template-columns: 10rem minmax(0, var(--prose));
  gap: var(--s-6) var(--s-7);
  align-items: start;
}

.essay__mark {
  padding-top: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.essay__body { display: flex; flex-direction: column; gap: var(--s-4); }
.essay__body p { color: var(--text-dim); }
.essay__body strong { color: var(--text); font-weight: 500; }

.pull {
  margin-block: var(--s-3);
  padding-left: var(--s-5);
  border-left: 1px solid var(--create);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3125rem, 2.2vw, 1.75rem);
  line-height: 1.34;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   23. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  :root { --s-9: 7rem; --s-10: 8.5rem; }

  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .docs { grid-template-columns: 1fr; }
  .docs__nav { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--s-5); }
  .essay { grid-template-columns: 1fr; gap: var(--s-3); }
}

@media (max-width: 860px) {
  :root { --nav-h: 68px; --s-9: 5.5rem; --s-10: 6.5rem; }

  .nav__toggle { display: block; }

  .wordmark__name { font-size: 1.5rem; }
  .wordmark__sub { font-size: 0.5625rem; }

  .sound { margin-left: auto; }

  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-4) var(--gutter) var(--s-6);
    background: rgba(8, 8, 10, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }

  .nav__links.is-open { transform: none; opacity: 1; visibility: visible; }

  .nav__link {
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--line);
    font-size: 0.75rem;
  }

  .nav__link:last-child { border-bottom: 0; margin-top: var(--s-4); }
  .nav__link.btn { justify-content: space-between; width: 100%; border: 1px solid var(--line-strong); padding: var(--s-4); }

  .head, .split, .control, .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .card--wide { grid-column: auto; }
  .control > .slot { max-width: 17rem; }
  .head__title, .head__aside { grid-column: 1; }

  .hero__meta-inner { grid-template-columns: 1fr 1fr; }
  .metric:nth-child(odd) { border-left: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

  .quote__stage::after {
    background: linear-gradient(to top, rgba(8, 8, 10, 0.88) 10%, rgba(8, 8, 10, 0.46) 60%, rgba(8, 8, 10, 0.28) 100%);
  }

  .node { min-width: 0; width: 100%; max-width: 18rem; }
  .fanout { gap: var(--s-2); }
  .worker__box { width: 42px; height: 42px; }
}

@media (max-width: 520px) {
  .wordmark__sub { display: none; }
  .btn { width: 100%; min-width: 0; }
  .hero__actions { gap: var(--s-4); }
  .footer__top { grid-template-columns: 1fr; }
  .metric__value { font-size: 1.25rem; }
}

/* --------------------------------------------------------------------------
   24. STATUS BAR

   The launch state, on every page. Its job is that a visitor who lands deep -
   on the philosophy essay, on a docs anchor, on a 404 from a mistyped link -
   still knows what the token is doing and still has one step to the truth.
   Those deep pages are where the highest-conviction readers are, and without
   this they were dead ends.

   It sits at the bottom rather than under the nav for three reasons: the hero
   is a poster and nothing is allowed to push it down, a bottom bar is inside
   thumb reach on the phones most launch traffic arrives on, and it keeps the
   top of every page clean for the art. Body gains matching bottom padding so
   it never covers the last line of the footer.
   -------------------------------------------------------------------------- */

:root { --status-h: 46px; }

body { padding-bottom: var(--status-h); }

.status {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 790;
  min-height: var(--status-h);
  display: flex;
  align-items: center;
  background: rgba(8, 8, 10, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--line);
}

.status__inner {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--s-2) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* A held breath, not an alarm. Slow, and it stops entirely for anyone who
   has asked motion to stop. */
.status__dot {
  flex: none;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-faint);
  animation: status-pulse 3.2s var(--ease-io) infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

.status__text {
  color: var(--text-dim);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
}

.status__text strong { color: var(--text); font-weight: 400; }

.status__link {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--create);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.status__link:hover { border-bottom-color: var(--create); }

/* --- Live state ---------------------------------------------------------
   Deliberately carries no price and no percentage change. A red number in a
   bar that appears on every page is a tax the site would pay on exactly its
   worst days, and the chart already lives on launch.html.
   ---------------------------------------------------------------------- */

.status__flag { flex: none; color: var(--text); }
.status__chain { color: var(--text-faint); }

.status__addr,
.status__buy {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  padding-inline: var(--s-3);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.status__addr:hover,
.status__buy:hover { color: var(--text); border-color: var(--text-faint); }

.status__addr-text { color: var(--text); font-variant-numeric: tabular-nums; }
.status__addr-label { color: var(--text-faint); }
.status__addr.is-copied .status__addr-label { color: var(--create); }

.status__buy { color: var(--text); border-color: var(--create); }

@media (max-width: 860px) {
  :root { --status-h: 52px; }
  .status__inner { gap: var(--s-2); }
  .status__text { letter-spacing: 0.1em; text-transform: none; font-size: 0.6875rem; }
  .status__link { letter-spacing: 0.1em; }
}

@media (max-width: 520px) {
  .status__inner { padding-inline: var(--s-4); }
  /* The bar must never wrap to two lines on a phone - it would cover content
     it is meant to sit beneath. The tail is the first thing to go. */
  .status__tail { display: none; }
}

/* --------------------------------------------------------------------------
   25. NAV PANEL

   The primary nav was already five items wide. The token pages would have
   made it eleven, so they group behind one disclosure.

   A disclosure and not a hover menu: hover does not exist on the phones this
   traffic arrives on, and a hover menu is unreachable by keyboard. It opens
   on click, closes on Escape or an outside click, and inside the mobile
   drawer it is simply a flat indented list.
   -------------------------------------------------------------------------- */

.nav__group { position: relative; }

.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
}

.nav__trigger::before {
  content: "";
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.nav__trigger[aria-expanded="true"]::before { transform: translateY(1px) rotate(-135deg); }

.nav__panel {
  position: absolute;
  top: calc(100% + var(--s-4));
  left: 50%;
  transform: translateX(-50%);
  z-index: 810;
  min-width: 13rem;
  display: flex;
  flex-direction: column;
  padding: var(--s-2) 0;
  background: rgba(8, 8, 10, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line);
}

.nav__panel-link {
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.nav__panel-link:hover { color: var(--text); background: rgba(237, 235, 231, 0.04); }
.nav__panel-link[aria-current="page"] { color: var(--text); }
.nav__panel-link--lead { color: var(--create); }

/* A page inside the group is still a current page, so the group reads as
   active too - otherwise the nav claims nothing is selected while the visitor
   is standing on a token page. */
.nav__group:has([aria-current="page"]) .nav__trigger { color: var(--text); }
.nav__group:has([aria-current="page"]) .nav__trigger::after { width: 100%; }

@media (max-width: 860px) {
  .nav__group { width: 100%; }

  .nav__trigger {
    width: 100%;
    justify-content: space-between;
    flex-direction: row-reverse;
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--line);
    font-size: 0.75rem;
  }

  /* Inside the drawer it is a list, not a floating panel. */
  .nav__panel {
    position: static;
    transform: none;
    min-width: 0;
    padding: 0 0 var(--s-2) var(--s-4);
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav__panel-link { padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   26. ADDRESS

   One component, identical markup wherever it appears. Address-swap is the
   most common way money is lost on a launch day, so the address is never
   retyped into a page - it is rendered from the single SITE constant, and a
   check asserts every copy of it is byte-identical before launch.

   Pre-launch it renders the absence honestly and carries no copy button,
   because there is nothing to copy and a disabled control invites a retry.
   -------------------------------------------------------------------------- */

.addr {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--line);
  background: var(--ink);
}

.addr__key {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.addr__value {
  font-family: var(--font-mono);
  font-size: clamp(0.8125rem, 1.6vw, 1rem);
  line-height: 1.5;
  word-break: break-all;
  color: var(--text);
}

.addr__value--empty { color: var(--text-dim); word-break: normal; }

.addr__note {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 52ch;
}

.addr__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --------------------------------------------------------------------------
   27. NOTICE

   Risk disclosure and the anti-impersonation block. Hairline-bounded and
   quiet - never a coloured alert box. A page that shouts about safety reads
   like a page with something to hide, and this audience has seen every
   variation of the shouting version.
   -------------------------------------------------------------------------- */

.notice {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-left: 1px solid var(--line-strong);
}

.notice__title {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-4);
}

.notice p {
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--text-dim);
  max-width: var(--prose);
}

.notice p + p { margin-top: var(--s-3); }
.notice strong { color: var(--text); font-weight: 500; }

.notice__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.notice__list li {
  display: flex;
  gap: var(--s-3);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-dim);
}

.notice__list li::before {
  content: "";
  flex: none;
  width: 4px; height: 4px;
  margin-top: 0.6em;
  background: var(--text-faint);
}

.notice__key {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex: none;
  min-width: 7rem;
}

.notice--verify { border-left-color: var(--destroy); }

/* A domain or a handle is one unbreakable token, and beside a fixed-width key
   in a flex row it sets a min-content width the phone cannot honour - which
   is how this block put 44px of horizontal scroll on the page. On narrow
   screens the key stacks above its value and long tokens are allowed to
   break. */
.notice__val { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .notice { padding: var(--s-4); }
  .notice__list li { flex-direction: column; gap: var(--s-1); }
  .notice__list li::before { display: none; }
  .notice__key { min-width: 0; }
}

/* --------------------------------------------------------------------------
   28. NOTIFY

   What a launch page is before there is a launch. No email capture, because
   no list is operated - offering one would be collecting addresses with
   nowhere to send from. The three real actions are follow, join, and install
   the thing that already ships.
   -------------------------------------------------------------------------- */

.notify { display: flex; flex-direction: column; gap: var(--s-5); }

.notify__state {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.notify__title {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.notify__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* --------------------------------------------------------------------------
   29. COUNTDOWN

   Only ever rendered against a committed UTC target - see initCountdown.
   No flip, no bounce, no borrowed urgency. The digits change and that is all.
   -------------------------------------------------------------------------- */

.countdown { display: flex; flex-wrap: wrap; gap: var(--s-5); }

.countdown__unit { display: flex; flex-direction: column; gap: var(--s-2); }

.countdown__value {
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.countdown__label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   30. UTILITIES
   -------------------------------------------------------------------------- */

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

/* The [hidden] attribute is a UA rule of the lowest possible specificity, so
   any class that sets display beats it and the element stays on screen. Every
   component here that toggles with `hidden` also sets display: flex, so
   without this the attribute is silently decorative. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .status__dot { animation: none; opacity: 0.7; }
}

/* --------------------------------------------------------------------------
   31. STATE CHIP

   One chip for every state on the site - a seal, a security row, an era, an
   access tier. Sharing it means a visitor learns the vocabulary once.

   The chip always carries its state as a WORD. Colour is a second channel and
   never the only one: a colourblind trader has to be able to read SEALED, and
   at 10px a colour difference is not a difference at all.
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 3px var(--s-3) 4px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-faint);
}

.chip::before {
  content: "";
  width: 4px; height: 4px;
  background: currentColor;
}

/* Withheld, and dim because of it. A sealed thing has earned no colour yet. */
.chip--sealed { color: var(--text-faint); }

/* Straining against the restriction. The only place ember appears on a chip,
   because containment is the destruction half of the argument. */
.chip--containment { color: var(--destroy); border-color: rgba(201, 85, 43, 0.4); }

/* Out. Cold light is creation, and a released capability is the one thing on
   these pages that actually exists. */
.chip--released,
.chip--complete,
.chip--resolved { color: var(--create); border-color: rgba(169, 198, 228, 0.4); }

.chip--active { color: var(--text); border-color: var(--text-faint); }

/* Not a failure state - an unfinished one, and it must not look alarming. */
.chip--pending { color: var(--text-faint); border-style: dotted; }

/* A seal that was abandoned. It stays on the page: deleting it would be worse
   than admitting it. */
.chip--broken { color: var(--text-faint); text-decoration: line-through; }

/* --------------------------------------------------------------------------
   32. TEN-SECOND BLOCK

   Three lines, and the only place on the site where the myth stands aside.
   A visitor arriving from a link has about eight seconds; the rest of the
   site can be cinematic because this block is not.
   -------------------------------------------------------------------------- */

.tensec {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  max-width: 58ch;
}

.tensec__line {
  display: flex;
  align-items: baseline;
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line);
}

.tensec__index {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  color: var(--create);
}

.tensec__text {
  font-size: clamp(1.0625rem, 1.9vw, 1.375rem);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--text);
}

.tensec__text code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--create);
}

@media (max-width: 520px) {
  .tensec__line { gap: var(--s-4); padding-block: var(--s-4); }
}

/* --------------------------------------------------------------------------
   33. FLAGS

   The four highest-signal rug red flags, inverted. Analysis of 500 verified
   rug pulls found 91% had a wallet holding over 15% of supply; the other
   three are unlocked liquidity, sell-blocking contract code, and an anonymous
   team making big promises.

   Every row carries a third-party link, because the point of the block is
   that none of it rests on our own word. Pre-launch every row is PENDING and
   says so - an unanswerable question answered honestly still builds more
   trust than one quietly skipped.
   -------------------------------------------------------------------------- */

.flags {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  margin-top: var(--s-5);
}

.flags__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--s-3) var(--s-5);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.flags__claim { font-size: 0.9375rem; line-height: 1.55; color: var(--text); }

.flags__note {
  grid-column: 1 / -1;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 60ch;
}

.flags__proof {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--create);
}

@media (max-width: 520px) {
  .flags__row { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   34. LEDGER

   Supply allocation. Framed as a genesis ledger because the product runs on
   the same law: nothing exists before you ask, and nothing is added after.

   The bar is a second reading of the same table, not decoration - a share of
   supply is a proportion, and a proportion is faster to see than to read.
   -------------------------------------------------------------------------- */

.ledger { display: flex; flex-direction: column; gap: var(--s-5); }

.ledger__bar {
  display: flex;
  width: 100%;
  height: 10px;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.ledger__seg { background: var(--text-faint); min-width: 2px; }

/* Liquidity is the one allocation that protects the buyer rather than the
   project, so it is the one that gets the light. */
.ledger__seg--lp { background: var(--create); }
.ledger__seg--pending { background: transparent; }

.ledger__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ledger__key { display: inline-flex; align-items: center; gap: var(--s-2); }
.ledger__swatch { width: 8px; height: 8px; background: var(--text-faint); }
.ledger__swatch--lp { background: var(--create); }

/* --------------------------------------------------------------------------
   35. VESTING

   The unlock calendar, drawn rather than described. Publishing it is itself
   the trust signal - most projects bury it, and cliff unlocks average a 25%
   drop on the day they land, so a buyer is entitled to see every one coming.
   -------------------------------------------------------------------------- */

.vest { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-5); }

.vest__track {
  position: relative;
  display: flex;
  align-items: center;
  height: 1px;
  background: var(--line-strong);
  margin-block: var(--s-6) var(--s-5);
}

.vest__tick {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}

.vest__dot { width: 7px; height: 7px; background: var(--text-faint); }

/* A cliff is the dangerous one - a single date on which a large tranche can
   hit the market at once. It is marked in ember and never softened. */
.vest__tick--cliff .vest__dot { background: var(--destroy); }

.vest__label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.vest__note { font-size: 0.8125rem; line-height: 1.7; color: var(--text-dim); max-width: var(--prose); }

/* --------------------------------------------------------------------------
   36. SEALS

   A sealed capability is a thing straining against containment, not a
   roadmap bullet. The card states what is NOT available today in the same
   breath as what it will do, which is what keeps the page honest while it
   does the work of a teaser.

   No card ever carries a date. It carries a CONDITION.
   -------------------------------------------------------------------------- */

.seal {
  background: var(--void);
  padding: var(--s-5) clamp(1.125rem, 1.9vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transition: background var(--dur) var(--ease);
}

.seal:hover { background: var(--ink); }

.seal__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }

.seal__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.seal--sealed .seal__name { color: var(--text-dim); }
.seal--released .seal__name { color: var(--text); }

.seal__intent { font-size: 0.9375rem; line-height: 1.6; color: var(--text-dim); }

.seal__unlock {
  display: flex;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-dim);
}

.seal__unlock-key {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-top: 0.25em;
}

.seal__link {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--create);
}

/* --------------------------------------------------------------------------
   37. ERAS

   A roadmap in eras rather than quarters. A date you miss costs more than a
   date you never gave, and this project's roadmap is its product
   architecture - so the eras map onto the real pipeline, not onto a calendar.
   -------------------------------------------------------------------------- */

.era {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: var(--s-5) var(--s-7);
  padding-block: var(--s-7);
  border-bottom: 1px solid var(--line);
}

.era:first-of-type { border-top: 1px solid var(--line); }

.era__head { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }

.era__name {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.era__list { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }

/* Block, not flex. A flex container turns every inline child into its own
   flex item, so a sentence carrying two <code> spans lays them out as three
   un-wrappable items in a row - which is how this list put 500px of
   horizontal scroll on a phone. The bullet is positioned instead. */
.era__list li {
  position: relative;
  padding-left: var(--s-4);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-dim);
}

.era__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 4px; height: 4px;
  background: var(--text-faint);
}

.era__list--shipped li::before { background: var(--create); }

.era__sub {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-2);
}

@media (max-width: 860px) {
  .era { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-6); }
}

/* --------------------------------------------------------------------------
   38. ACCESS TIERS

   What holding the token would unlock. The category's central failure is
   agent revenue that never reaches the token, so the threshold and the thing
   it buys sit on the same card - and every tier that is not live says so.
   -------------------------------------------------------------------------- */

.tier {
  background: var(--void);
  padding: var(--s-5) clamp(1.125rem, 1.9vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.tier__threshold {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.tier__name {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.tier__unlocks { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }

.tier__unlocks li {
  position: relative;
  padding-left: var(--s-4);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-dim);
}

.tier__unlocks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 4px; height: 4px;
  background: var(--text-faint);
}

/* --------------------------------------------------------------------------
   39. GRID SHRINK FIX

   A `1fr` track carries an implicit `min-width: auto`, so it refuses to shrink
   below the min-content width of what is inside it. The track then grows past
   its own container and the children spill out sideways rather than wrapping -
   which is how a table on the press kit and a list of eras each put several
   hundred pixels of horizontal scroll on a 375px screen while their containers
   measured a correct 335px.

   `minmax(0, 1fr)` is the same track with permission to shrink. Every grid on
   this site wants that behaviour; none of them wants the default.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .docs, .essay { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .head,
  .head--stack,
  .split,
  .control,
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* A scroll container can only scroll if it is allowed to be narrower than the
   thing it holds. */
.table-wrap { min-width: 0; }

/* code is nowrap by design so an identifier never splits mid-token, but a long
   one still must not widen the page. It may break at last resort. */
.era__list code,
.notice__val code,
.tier__unlocks code { white-space: normal; overflow-wrap: anywhere; }

/* ==========================================================================
   40. THE LIGHT SYSTEM

   The page is paper. Five things are cut out of near-black - the hero, the
   pull quote, the terminal, the closing call and the footer - and that
   alternation carries most of the rhythm.

   Rather than restate a dark palette inside each of those, they redefine the
   same tokens locally. Every descendant then inherits the right values with
   no per-element overriding, so a card, a button or a chip behaves correctly
   on either ground without knowing which one it is standing on.
   ========================================================================== */

.hero,
.cta,
.footer,
.quote,
.terminal,
.on-dark {
  --void:        var(--dark);
  --ink:         var(--dark-2);
  --surface:     var(--dark-2);
  --text:        #F2F4F2;
  --text-dim:    #A7B0AA;
  --text-faint:  #6E7772;
  --line:        rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.20);
  --create:      var(--mint);
  --create-dim:  rgba(63, 221, 151, 0.14);

  background-color: var(--dark);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   40.1 BASE
   -------------------------------------------------------------------------- */

body {
  background: var(--void);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* The grain and vignette belonged to the film treatment. On paper they read
   as dirt, so the layer stays in the DOM (JS and markup both expect it) and
   simply stops painting. */
.atmosphere { display: none; }

::selection { background: var(--create-dim); color: var(--create); }

/* --------------------------------------------------------------------------
   40.2 NAV
   -------------------------------------------------------------------------- */

.nav {
  height: 76px;
  background: rgba(246, 247, 245, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
}

.nav.is-stuck {
  background: rgba(246, 247, 245, 0.92);
  border-bottom-color: var(--line);
}

.nav__inner { gap: var(--s-4); }

.wordmark__name {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}

.wordmark__sub { display: none; }

/* The mark. A small dark tile with the A, matching the cube in the artwork. */
.wordmark::before {
  content: "A";
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  margin-right: 0;
  border-radius: var(--r-sm);
  background: var(--dark);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9375rem;
}

.wordmark {
  flex-direction: row;
  align-items: center;
  gap: var(--s-3);
}

/* Links sit in the middle of the bar rather than hard right. */
.nav__links {
  margin: 0 auto;
  gap: var(--s-2);
}

.nav__link,
.nav__trigger {
  padding: 7px var(--s-3) 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim);
}

.nav__link::after { display: none; }

.nav__link:hover,
.nav__trigger:hover { color: var(--text); background: rgba(12, 14, 13, 0.04); }

/* The current section is a soft green pill, not an underline. */
.nav__link[aria-current="page"],
.nav__group:has([aria-current="page"]) .nav__trigger {
  color: var(--create);
  background: var(--create-dim);
}

.nav__group:has([aria-current="page"]) .nav__trigger::after { width: 0; }

.nav__trigger::before {
  width: 4px; height: 4px;
  border-width: 0 1.5px 1.5px 0;
  opacity: 0.7;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-left: auto;
}

.nav__panel {
  top: calc(100% + 10px);
  min-width: 15rem;
  padding: var(--s-2);
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

.nav__panel-link {
  padding: 9px var(--s-3);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.nav__panel-link:hover { background: rgba(12, 14, 13, 0.045); color: var(--text); }
.nav__panel-link[aria-current="page"] { color: var(--create); background: var(--create-dim); }
.nav__panel-link--lead { color: var(--create); }

.nav__toggle span { background: var(--text); }

/* --------------------------------------------------------------------------
   40.3 BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  min-height: 46px;
  padding: 0 var(--s-4);
  gap: var(--s-3);
  border: 1px solid var(--dark);
  border-radius: var(--r-md);
  background: var(--dark);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn::before,
.btn::after { display: none; }

.btn:hover {
  background: #1B211E;
  border-color: #1B211E;
  color: #fff;
  transform: translateY(-1px);
}

.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--ghost {
  background: #fff;
  border-color: var(--line-strong);
  color: var(--text);
}

.btn--ghost:hover { background: #fff; border-color: var(--text-faint); color: var(--text); transform: translateY(-1px); }

.btn--compact {
  min-height: 40px;
  padding: 0 var(--s-4);
  font-size: 0.875rem;
}

/* On a dark band the primary action inverts to mint. */
.cta .btn,
.on-dark .btn {
  background: var(--mint);
  border-color: var(--mint);
  color: #05231A;
}

.cta .btn:hover,
.on-dark .btn:hover { background: #5BE8AB; border-color: #5BE8AB; color: #05231A; }

.hero .btn { background: var(--dark); border-color: rgba(255,255,255,0.16); color: #fff; }
.hero .btn:hover { background: #1B211E; border-color: rgba(255,255,255,0.3); }
.hero .btn--ghost { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); color: #fff; }
.hero .btn--ghost:hover { background: rgba(255,255,255,0.12); }

/* --------------------------------------------------------------------------
   40.4 BADGE - the small pill above a page title
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px var(--s-3) 7px;
  border-radius: var(--r-pill);
  background: var(--create-dim);
  color: var(--create);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   40.5 TYPE
   -------------------------------------------------------------------------- */

.display {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.display--1 { font-size: clamp(2rem, 4.2vw, 3.25rem); }

.pagehead__title,
.phero__title { font-size: clamp(2.5rem, 6vw, 4.5rem); }

.lede { color: var(--text-dim); font-size: clamp(1rem, 1.15vw, 1.0625rem); line-height: 1.62; }

.eyebrow {
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  color: var(--text-faint);
}

.eyebrow::after { background: var(--line); }
.eyebrow__index { color: var(--create); }

.ink-create  { color: var(--create); }
.ink-destroy { color: var(--destroy); }

/* On the light ground the accent word in a headline is deep green. */
.hero .ink-destroy { color: var(--mint); }

/* --------------------------------------------------------------------------
   40.6 SECTION HEAD - centred, the way every band in the reference reads
   -------------------------------------------------------------------------- */

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: var(--s-8);
}

.section-head__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.section-head__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.section-head__sub { color: var(--text-dim); font-size: 1.0625rem; line-height: 1.62; }

/* --------------------------------------------------------------------------
   40.7 CARDS

   The hairline-gap grid becomes separated cards: white, bordered, rounded,
   with a shadow light enough to read as a lift rather than a drop.
   -------------------------------------------------------------------------- */

.grid {
  gap: var(--s-4);
  background: none;
  border: 0;
  margin-top: var(--s-6);
}

.card,
.seal,
.tier {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.card:hover,
.seal:hover,
.tier:hover {
  background: #fff;
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card__index {
  color: var(--create);
  font-family: var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.card__title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
.card__text  { color: var(--text-dim); font-size: 0.9375rem; line-height: 1.62; }

/* --- Feature card: icon, title, check list, tinted footer strip ---------- */

.fcard {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.fcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.fcard__head { display: flex; align-items: center; gap: var(--s-3); }

.fcard__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--create-dim);
  color: var(--create);
  font-size: 1.25rem;
}

.fcard__icon--green { background: #16A46B; color: #fff; }
.fcard__icon--blue  { background: #2563EB; color: #fff; }
.fcard__icon--amber { background: #E0A82E; color: #fff; }
.fcard__icon--round { border-radius: var(--r-pill); }
.fcard__icon--plain { background: var(--tint-blue); color: var(--ink-blue); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; width: auto; padding-inline: var(--s-3); }

.fcard__title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.fcard__sub   { font-size: 0.8125rem; color: var(--text-dim); margin-top: 2px; }

.fcard__list { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }

.fcard__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-dim);
}

.fcard__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 13px; height: 8px;
  border-left: 2px solid var(--create);
  border-bottom: 2px solid var(--create);
  transform: rotate(-45deg);
}

.fcard__strip {
  margin-top: auto;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--tint-green);
  color: var(--ink-green);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

.fcard__strip--blue  { background: var(--tint-blue);  color: var(--ink-blue); }
.fcard__strip--amber { background: var(--tint-amber); color: var(--ink-amber); }

/* --------------------------------------------------------------------------
   40.8 STEPS - the horizontal run from prompt to result
   -------------------------------------------------------------------------- */

.steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-7);
}

.step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  text-align: center;
}

.step__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--text);
}

.step__name { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; }
.step__text { font-size: 0.8125rem; line-height: 1.5; color: var(--text-dim); max-width: 15ch; }

.step__arrow {
  flex: none;
  margin-top: 16px;
  color: var(--text-faint);
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   40.9 STATS - the small proof row under a hero
   -------------------------------------------------------------------------- */

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.stats .metric { border: 0; padding: 0; }
.stats .metric + .metric { padding-left: var(--s-6); border-left: 1px solid var(--line); }

.metric__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--text);
}

.metric__key {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   40.10 PRODUCT HERO - two columns: the argument, and the diagram
   -------------------------------------------------------------------------- */

.phero {
  padding-top: calc(76px + var(--s-8));
  padding-bottom: var(--s-9);
}

.phero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: var(--s-8);
}

.phero__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); }
.phero__title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; }
.phero__lede  { color: var(--text-dim); font-size: 1.0625rem; line-height: 1.65; max-width: 34rem; }
.phero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --------------------------------------------------------------------------
   40.12 CLOSING CALL - a dark band with a green horizon under it
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-10) calc(var(--s-10) + var(--s-8));
  text-align: center;
}

.cta__stage { opacity: 0.30; }
.cta__stage img { object-position: center bottom; }

/* The horizon. A wide, low green glow, the way the reference lights the
   bottom edge of its closing band. */
.cta::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -58%;
  width: 150%;
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(63, 221, 151, 0.55), rgba(63, 221, 151, 0.10) 62%, transparent 78%);
  pointer-events: none;
}

.cta__body { position: relative; z-index: 1; align-items: center; text-align: center; }

.cta__title {
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}

.cta .lede { color: #B9C2BC; margin-inline: auto; }
.cta .eyebrow { color: var(--text-faint); }

/* --------------------------------------------------------------------------
   40.13 FOOTER
   -------------------------------------------------------------------------- */

.footer { border-top: 0; padding-block: var(--s-8) var(--s-7); }
.footer__heading { color: #fff; }
.footer__note { color: #98A29C; }
.footer a { color: #98A29C; }
.footer a:hover { color: var(--mint); }
.footer__bottom { border-top-color: rgba(255,255,255,0.10); color: #7C857F; }
.footer .wordmark::before { background: #fff; color: var(--dark); }

/* --------------------------------------------------------------------------
   40.14 STATUS BAR
   -------------------------------------------------------------------------- */

.status {
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.status__text { color: var(--text-dim); text-transform: none; letter-spacing: 0; font-size: 0.8125rem; font-family: var(--font-sans); }
.status__text strong { color: var(--text); font-weight: 600; }
.status__dot { background: var(--create); }
.status__link { color: var(--create); font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* --------------------------------------------------------------------------
   40.15 THE REST, RETHEMED
   -------------------------------------------------------------------------- */

.pagehead { padding-top: calc(76px + var(--s-8)); }

.chip { border-radius: var(--r-pill); font-family: var(--font-mono); }
.chip--released, .chip--complete, .chip--resolved { background: var(--create-dim); border-color: transparent; }
.chip--containment { background: rgba(201, 85, 43, 0.10); border-color: transparent; }
.chip--pending { background: rgba(12, 14, 13, 0.04); border-color: transparent; border-style: solid; }
.chip--sealed  { background: rgba(12, 14, 13, 0.04); border-color: transparent; }

.addr, .notice, .code, .table-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.notice { border-left: 1px solid var(--line); }
.notice--verify { border-left: 3px solid var(--destroy); }

.addr__value { color: var(--text); }
.tensec { border-top-color: var(--line); }
.tensec__line { border-bottom-color: var(--line); }
.tensec__text code { color: var(--create); }

.flags { border-top-color: var(--line); }
.flags__row { border-bottom-color: var(--line); }

.era { border-bottom-color: var(--line); }
.era:first-of-type { border-top-color: var(--line); }

.ledger__bar { border-radius: var(--r-pill); overflow: hidden; border-color: var(--line); background: var(--line); }
.ledger__seg { background: var(--text-faint); }
.ledger__seg--lp { background: var(--create); }
.ledger__swatch--lp { background: var(--create); }

.vest__track { background: var(--line-strong); }
.vest__dot { background: var(--text-faint); border-radius: 50%; }
.vest__tick--cliff .vest__dot { background: var(--destroy); }

.seal__unlock { border-top-color: var(--line); }
.seal__link { color: var(--create); }

.marquee { background: #fff; border-block: 1px solid var(--line); }
.marquee__star { color: var(--create); opacity: 1; }

.quote { border-radius: 0; }
.terminal { border-radius: var(--r-md); overflow: hidden; border: 1px solid rgba(255,255,255,0.10); }

.docs__group a:hover, .docs__group a.is-active { border-left-color: var(--create); }
.doc-block p { color: var(--text-dim); }

.slot { background: var(--ink); border-radius: var(--r-md); overflow: hidden; }
.slot--bare { border-radius: 0; }

.assertions { border-top-color: var(--line); }
.assertions li { border-bottom-color: var(--line); }
.assertions__key { color: var(--create); }

.node, .worker__box { border-radius: var(--r-md); }

/* --------------------------------------------------------------------------
   40.16 RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .phero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
}

@media (max-width: 900px) {
  .steps { flex-wrap: wrap; row-gap: var(--s-6); }
  .step { flex: 1 1 40%; }
  .step__arrow { display: none; }
}

@media (max-width: 860px) {
  .nav { height: 68px; }
  .nav__links {
    margin: 0;
    inset: 68px 0 auto 0;
    padding: var(--s-3) var(--gutter) var(--s-5);
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
  }
  .nav__link, .nav__trigger { border-radius: var(--r-sm); font-size: 0.9375rem; }
  .nav__link { padding-block: var(--s-3); border-bottom: 0; }
  .nav__panel { box-shadow: none; border: 0; padding: 0 0 var(--s-2) var(--s-4); }
  .phero { padding-top: calc(68px + var(--s-7)); }
  .pagehead { padding-top: calc(68px + var(--s-7)); }


  .stats { gap: var(--s-5); }
  .stats .metric + .metric { padding-left: var(--s-5); }
}

@media (max-width: 640px) {
  .step { flex: 1 1 100%; }
  .step__text { max-width: 28ch; }
  .stats { flex-direction: column; gap: var(--s-4); }
  .stats .metric + .metric { padding-left: 0; border-left: 0; }
}

/* --------------------------------------------------------------------------
   41. INTERIOR PAGE HEADS

   These were built as document headers - a numbered eyebrow, a title, a
   paragraph - which is the right shape for a reader and the wrong one for
   somebody arriving from a link with a wallet open. They now open the way the
   product pages do: a pill, a headline at hero scale, and one line under it.
   -------------------------------------------------------------------------- */

.pagehead .shell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
}

.pagehead__title { margin: 0; max-width: 18ch; }

.pagehead__lede {
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  line-height: 1.6;
  max-width: 40rem;
  color: var(--text-dim);
}

/* Section heads keep their index - it is part of the original identity - but
   the title carries more weight so a scan lands on it first. */
.head__title { font-size: clamp(1.625rem, 3vw, 2.25rem); letter-spacing: -0.03em; }
.head__eyebrow { margin-bottom: var(--s-2); }

.section { padding-block: var(--s-9); }
.section--seam { border-top: 1px solid var(--line); }

.phero__art { position: relative; min-width: 0; }

/* --------------------------------------------------------------------------
   42. TIGHTENING

   Three things still read as documentation rather than as a product page:
   numbered section labels, a vertical rhythm built for reading rather than
   scanning, and a two-column head that leaves half the row empty whenever a
   section has no aside. A trader scans; none of those survive a scan.
   -------------------------------------------------------------------------- */

/* The index was a nice detail in a document. It is a chapter number, and
   chapter numbers are the single strongest "this is a manual" signal. */
.eyebrow__index { display: none; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Closer to the reference, which runs about a third tighter than this did. */
.section { padding-block: clamp(3.25rem, 5.5vw, 5rem); }
.pagehead { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }

.head { gap: var(--s-5) var(--s-7); }
.head--stack { gap: var(--s-4); }
.head__aside { max-width: 46rem; }

/* A head with nothing in the right column should not reserve the column. */
.head:not(:has(.head__aside)) { grid-template-columns: minmax(0, 1fr); }

.stack-5 { gap: var(--s-4); }

/* --- Nav chevron sits after the label, as a disclosure should ------------ */
.nav__trigger { flex-direction: row-reverse; gap: var(--s-2); }
.nav__trigger::before { margin-left: 0; }

/* --- The sound control is a utility, not an action ----------------------- */
.sound {
  border: 0;
  background: none;
  padding: 6px;
  color: var(--text-faint);
  opacity: 0.75;
}

.sound:hover { color: var(--text); opacity: 1; }
.sound__label { display: none; }
.sound__bars i { background: currentColor; }

@media (max-width: 860px) {
  .nav__trigger { flex-direction: row; justify-content: space-between; }
}

/* --------------------------------------------------------------------------
   43. MOTION - the step row and the badge
   -------------------------------------------------------------------------- */

/* The step row gets the same treatment at a much lower volume: the arrows
   drift toward the next step, which is the only hint of direction it needs. */
.step__arrow { animation: arrow-nudge 3.6s var(--ease-io) infinite; }
.steps .step__arrow:nth-of-type(2) { animation-delay: -0.6s; }
.steps .step__arrow:nth-of-type(3) { animation-delay: -1.2s; }
.steps .step__arrow:nth-of-type(4) { animation-delay: -1.8s; }
.steps .step__arrow:nth-of-type(5) { animation-delay: -2.4s; }

@keyframes arrow-nudge {
  0%, 100% { transform: translateX(0);   opacity: 0.55; }
  50%      { transform: translateX(3px); opacity: 1; }
}

/* The badge pill gets a slow sheen so the top of the page has one live pixel. */
.badge { position: relative; overflow: hidden; }

.badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: badge-sheen 7s var(--ease-io) infinite;
}

@keyframes badge-sheen {
  0%, 82%, 100% { transform: translateX(-100%); }
  94%           { transform: translateX(100%); }
}

/* None of this is load-bearing, so all of it stops on request. */
@media (prefers-reduced-motion: reduce) {
    .step__arrow,
  .badge::after { animation: none; }

}

/* --------------------------------------------------------------------------
   44. THE SEAM

   On a page that opens with the dark poster, a light bar sitting on top of it
   draws a hard line across the art. The bar starts transparent over the hero
   and only becomes paper once the page has been scrolled - which is exactly
   the state the nav already tracks.
   -------------------------------------------------------------------------- */

body:has(.hero) .nav:not(.is-stuck) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body:has(.hero) .nav:not(.is-stuck) .wordmark__name,
body:has(.hero) .nav:not(.is-stuck) .nav__link,
body:has(.hero) .nav:not(.is-stuck) .nav__trigger { color: #E8EDEA; }

body:has(.hero) .nav:not(.is-stuck) .nav__link:hover,
body:has(.hero) .nav:not(.is-stuck) .nav__trigger:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }

body:has(.hero) .nav:not(.is-stuck) .wordmark::before { background: #fff; color: var(--dark); }
body:has(.hero) .nav:not(.is-stuck) .nav__toggle span { background: #E8EDEA; }

body:has(.hero) .nav:not(.is-stuck) .btn--compact {
  background: #fff;
  border-color: #fff;
  color: var(--dark);
}

body:has(.hero) .nav:not(.is-stuck) .btn--compact:hover { background: var(--mint); border-color: var(--mint); }

/* Ember still means termination. Green on that word would say the opposite of
   what the word says - it is the one place the accent must not follow the
   rest of the palette. Lifted a little so it holds against near-black. */
.hero { --destroy: #E8703F; }
.hero .ink-destroy { color: var(--destroy); }

/* The closing plate is the photograph the band was built around, so it is
   allowed to read as one. Only enough of a scrim to hold the type - graded
   from the top and bottom edges rather than laid flat across the middle,
   which is what was previously drowning it. */
.cta__stage { opacity: 0.72; }

.cta__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    var(--dark) 0%, rgba(10, 12, 11, 0.30) 26%,
    rgba(10, 12, 11, 0.30) 68%, var(--dark) 100%);
}

/* The horizon steps back so it lights the plate instead of replacing it. */
.cta::after { bottom: -58%; opacity: 0.55; }
.cta__title { max-width: 22ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   46. THE CURSOR

   Two parts: a dot on the true position, and a ring easing toward it. The gap
   between them is the effect. Both are inert to hit-testing, so nothing about
   clicking changes.

   The native cursor is only hidden once the custom one has actually been
   drawn - if the script never runs, the pointer is still a pointer.
   -------------------------------------------------------------------------- */

.cursor,
.cursor__dot {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  will-change: transform;
}

.cursor {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--create);
  border-radius: 50%;
  transition: opacity 0.25s var(--ease), width 0.3s var(--ease), height 0.3s var(--ease),
              background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.cursor__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--create);
}

html.cursor-on .cursor,
html.cursor-on .cursor__dot { opacity: 1; }

/* Over something clickable the ring swells and fills faintly. */
.cursor.is-hover {
  width: 58px; height: 58px;
  background: var(--create-dim);
  border-color: var(--create);
}

/* Over a scene it becomes a label, because the useful information there is
   that the thing responds at all. */
.cursor.is-scene {
  width: 86px; height: 86px;
  background: rgba(63, 221, 151, 0.10);
  border-color: var(--mint);
}

.cursor__label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mint);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.cursor.is-scene .cursor__label { opacity: 1; }
.cursor.is-down { transform-origin: center; background: var(--create-dim); }

/* Only claim the pointer on a device that has one, and only once drawn. */
@media (pointer: fine) {
  html.has-cursor.cursor-on,
  html.has-cursor.cursor-on * { cursor: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor, .cursor__dot { display: none; }
}



/* --------------------------------------------------------------------------
   47. THE CLOSING BAND, WITHOUT THE GREEN

   The plate under this band is a warm photograph. Mint sat against it as a
   second, unrelated light source and flattened the whole thing. Green is the
   product accent and it belongs on the product pages; here the picture is the
   accent, and the action just needs to be legible on top of it.
   -------------------------------------------------------------------------- */

.cta::after { display: none; }

.cta .btn {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #0C0E0D;
}

.cta .btn:hover { background: #F0F2F0; border-color: #F0F2F0; color: #0C0E0D; }

.cta code {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
  color: #E8EDEA;
}

/* --------------------------------------------------------------------------
   48. DIAGRAMS

   One vocabulary for the technical diagrams across the site. They are inline
   SVG and every colour, weight and stroke below is a token, so a diagram is
   the page's own type and rules drawn in a different shape - not an asset
   placed on it.

   No frame, no plate, no shadow. One dark node per diagram, one accent, and
   ember only where the site already means termination.
   -------------------------------------------------------------------------- */

.dgm-section .dgm-head { max-width: 46rem; margin-bottom: var(--s-6); }
.dgm-title { margin-top: var(--s-2); }
.dgm-lede { margin-top: var(--s-3); max-width: 40rem; }
.dgm-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-block: var(--s-2); }

.dgm {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--font-sans);
}

.dgm--hero { max-width: 560px; margin-inline: auto; }
.dgm--cycle { max-width: 380px; }

.dgm text { font-family: inherit; }

/* type */
.dgm .t     { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; fill: var(--text); }
.dgm .s     { font-size: 11px; fill: var(--text-dim); }
.dgm .m     { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--text-faint); }
.dgm .idx   { fill: var(--create); }
.dgm .tiny  { font-size: 9px; letter-spacing: 0.14em; }
.dgm .mono  { font-family: var(--font-mono); font-size: 12px; fill: #fff; }
.dgm .aq    { font-size: 14px; font-weight: 500; fill: var(--text-dim); }
.dgm .word  { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; fill: var(--text); }
.dgm .mark  { font-family: var(--font-display); font-size: 30px; font-weight: 800; }
.dgm .msg   { font-size: 12px; font-weight: 600; fill: var(--text); }
.dgm .http  { font-family: var(--font-mono); font-weight: 700; }
.dgm .fact  { fill: var(--text); font-weight: 500; }
.dgm .ember { fill: var(--destroy); }
.dgm .green { fill: var(--create); }
.dgm .core-l { fill: var(--text-dim); }

/* nodes */
.dgm .box { fill: var(--ink); stroke: var(--line-strong); stroke-width: 1; }
.dgm .k-anchor .box { fill: var(--dark); stroke: var(--dark); }
.dgm .k-anchor .t { fill: #fff; }
.dgm .k-anchor .s { fill: #A7B0AA; }
.dgm .k-anchorlite .box { stroke: var(--text-faint); }
.dgm .k-gate .box { stroke: var(--create); stroke-width: 1.5; stroke-dasharray: 4 3; }
.dgm .k-out .box { fill: var(--create-dim); stroke: var(--create); }
.dgm .k-code .box { fill: var(--dark); stroke: var(--dark); }
.dgm .k-small .box { fill: var(--ink); stroke: var(--line-strong); }
.dgm .k-small .mono { fill: var(--text-dim); font-size: 10px; }
.dgm .st-sealed .box { stroke: var(--text-faint); }
.dgm .st-cont .box { stroke: var(--destroy); }
.dgm .st-rel .box { fill: var(--create-dim); stroke: var(--create); }
.dgm .st-broken .box { stroke: var(--text-faint); stroke-dasharray: 3 3; }
.dgm .st-broken .t { fill: var(--text-dim); }
.dgm .pill-r { fill: var(--create-dim); }
.dgm .pill-t { fill: var(--create); letter-spacing: 0.14em; }

/* lanes and lines */
.dgm .lane  { fill: none; stroke: var(--line); stroke-dasharray: 3 4; }
.dgm .edge  { fill: none; stroke: var(--line-strong); stroke-width: 1.25; stroke-linecap: round; }
.dgm .flow  { stroke: var(--create); stroke-dasharray: 2 5; animation: dgm-flow 3.4s linear infinite; }
.dgm .loop  { stroke: var(--text-faint); stroke-dasharray: 3 4; }
.dgm .life  { fill: none; stroke: var(--line-strong); stroke-dasharray: 2 4; }
.dgm .act   { fill: var(--create-dim); stroke: var(--create); stroke-width: 1; }
.dgm .wave  { stroke: var(--text-faint); stroke-width: 1.25; }
.dgm .plate { fill: var(--void); }
.dgm .arrow { fill: var(--line-strong); }
.dgm .arrow-g { fill: var(--create); }
.dgm .arrow-f { fill: var(--text-faint); }
.dgm .arrow-e { fill: var(--destroy); }
.dgm .era-done { stroke: var(--create); }

/* the moving parts */
.dgm .pulse { fill: var(--create); }
.dgm .ring  { fill: none; stroke: var(--create); stroke-width: 1.5; opacity: 0; }
.dgm .stop-c { fill: var(--ink); stroke: var(--line-strong); stroke-width: 1.25; }
.dgm .stop-end .stop-c { stroke: var(--destroy); }
.dgm .era-c { fill: var(--ink); stroke: var(--line-strong); stroke-width: 1.25; }
.dgm .era-complete .era-c { fill: var(--create); stroke: var(--create); }
.dgm .era-active .era-c { stroke: var(--create); stroke-width: 1.75; }
.dgm .era-sealed .era-c { stroke: var(--text-faint); stroke-dasharray: 2 2; }
.dgm .era-ring { fill: none; stroke: var(--create); stroke-width: 1; opacity: 0; }
.dgm .era-active .m { fill: var(--create); }
.dgm .rotor { transform-box: fill-box; transform-origin: center; animation: dgm-rotor 9s linear infinite; }

/* groups that exist only to carry a reveal */
.dgm .dn, .dgm .eg, .dgm .lbl, .dgm .lane-g, .dgm .actor, .dgm .caption, .dgm .foot,
.dgm .tile, .dgm .core, .dgm .iso, .dgm .lifelines, .dgm .stop, .dgm .era-stop,
.dgm .facts, .dgm .pill { pointer-events: none; }

@keyframes dgm-flow  { to { stroke-dashoffset: -14; } }
@keyframes dgm-rotor { to { transform: rotate(360deg); } }

/* wide diagrams pan on a phone rather than shrinking below legibility */
@media (max-width: 640px) {
  .dgm--wide { min-width: 600px; }
}

@media (prefers-reduced-motion: reduce) {
  .dgm .flow { animation: none; stroke-dasharray: none; }
  .dgm .pulse, .dgm .ring, .dgm .era-ring { display: none; }
  .dgm .rotor { animation: none; }
  .dgm .stop-c { animation: none !important; }
}

/* the default kind and the isometric variant carry no rules of their own */
.dgm .k-node .box { fill: var(--ink); }
.dgm--iso { overflow: visible; }

/* pulses exist only where a motion path can move them - see boot() */
.dgm .pulse { display: none; }
.has-offset .dgm .pulse { display: block; }

/* the hero diagrams render at ~72% on a phone, so their type runs one size up */
.dgm--hero .t { font-size: 14px; }
.dgm--hero .s { font-size: 12px; }
.dgm--hero .aq { font-size: 15px; }

/* reduced motion outranks the capability class, whatever order the rules land in */
@media (prefers-reduced-motion: reduce) {
  .has-offset .dgm .pulse { display: none; }
}