:root {
  --cream:#f5f3e9;
  --ink:#232620;
  --lime:#d8f36a;
  --line:rgba(35,38,32,.22);
  --muted:#6d7066;
  --mono:"DM Mono",monospace;
  --display:"Bricolage Grotesque",sans-serif}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth}
body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--display);
  overflow-x:hidden}
.skip-link {
  position:absolute;
  left:-999px}
.skip-link:focus {
  left:1rem;
  top:1rem;
  background:var(--lime);
  padding:.7rem;
  z-index:10}
.site-header {
  height:84px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  padding:0 clamp(1.25rem,4vw,4.5rem);
  position:sticky;
  top:0;
  background:color-mix(in srgb,var(--cream) 90%,transparent);
  backdrop-filter:blur(15px);
  z-index:5}
.brand {
  display:flex;
  align-items:center;
  gap:.7rem;
  color:var(--ink);
  text-decoration:none;
  min-width:210px}
.brand-mark {
  width:37px;
  height:37px;
  border:1px solid var(--ink);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--lime);
  overflow:hidden}
.brand-mark img {
  width:26px;
  height:26px;
  object-fit:contain}
.brand-copy {
  display:grid;
  line-height:1}
.brand-copy strong {
  font-size:.83rem;
  letter-spacing:.08em}
.brand-copy small {
  font:10px var(--mono);
  margin-top:4px;
  color:var(--muted)}
.site-nav {
  display:flex;
  gap:2.5rem;
  margin:auto}
.site-nav a {
  color:var(--ink);
  font:12px var(--mono);
  text-decoration:none;
  text-transform:uppercase}
.site-nav a.active {
  border-bottom:2px solid var(--ink);
  padding-bottom:.35rem}
.site-nav a span {
  color:var(--muted);
  margin-left:.35rem}
.header-buy,.outline-button {
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  text-decoration:none;
  color:var(--ink);
  border:1px solid var(--ink);
  padding:.75rem 1rem;
  font:11px var(--mono);
  text-transform:uppercase}
.header-buy {
  background:var(--lime)}
.header-buy img,.outline-button img {
  width:16px;
  height:16px;
  object-fit:contain}
.menu-toggle {
  display:none;
  background:none;
  border:0}
.section-grid {
  max-width:1440px;
  margin:auto;
  padding:clamp(5rem,11vw,10rem) clamp(1.25rem,5vw,5.5rem);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4.5rem);
  align-items:center;
  min-height:calc(100vh - 84px);
  border-bottom:1px solid var(--line)}
.eyebrow,.phase-status,.art-meta,.console-top,.console-foot {
  font:10px var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase}
.eyebrow {
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:0 0 2.2rem;
  color:var(--muted)}
.eyebrow-dot {
  width:7px;
  height:7px;
  background:var(--lime);
  border-radius:50%;
  display:inline-block;
  border:1px solid var(--ink)}
h1,h2,h3,p {
  margin-top:0}
h1,h2 {
  font-size:clamp(3.6rem,7.7vw,8.8rem);
  line-height:.87;
  letter-spacing:-.09em;
  margin-bottom:2.2rem}
h1 em,h2 em {
  font-style:normal;
  color:transparent;
  -webkit-text-stroke:1.5px var(--ink)}
.hero-lede {
  font-size:1rem;
  line-height:1.55;
  max-width:430px;
  color:#4f524a}
.hero-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.65rem;
  margin-top:3.4rem;
  max-width:530px}
.action-card {
  display:grid;
  grid-template-columns:25px 1fr 20px;
  grid-template-rows:auto auto;
  column-gap:.65rem;
  border:1px solid var(--line);
  padding:1rem;
  text-decoration:none;
  color:var(--ink);
  transition:.25s;
  background:rgba(255,255,255,.12)}
.action-card:hover {
  background:var(--lime);
  border-color:var(--ink);
  transform:translateY(-3px)}
.action-card img {
  width:21px;
  height:21px;
  object-fit:contain;
  grid-row:1/3;
  align-self:center}
.action-card span {
  font-size:.88rem;
  font-weight:600}
.action-card small {
  font:9px var(--mono);
  color:var(--muted);
  margin-top:.3rem}
.action-card b {
  grid-column:3;
  grid-row:1/3;
  align-self:center;
  font-size:1.15rem;
  font-weight:400}
.hero-art {
  position:relative;
  max-width:620px;
  justify-self:end;
  width:100%;
  padding:1.8rem}
.art-meta {
  display:flex;
  justify-content:space-between;
  margin-bottom:.75rem;
  color:var(--muted)}
.dossier-frame {
  margin:0;
  position:relative;
  background:#222;
  padding:.7rem;
  box-shadow:11px 11px 0 var(--lime);
  transform:rotate(2.3deg)}
.dossier-frame img {
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  filter:saturate(.82) contrast(1.04)}
.dossier-frame figcaption {
  display:flex;
  justify-content:space-between;
  color:var(--cream);
  font:9px var(--mono);
  padding:.75rem .15rem .1rem}
.corner {
  position:absolute;
  width:30px;
  height:30px;
  border-color:var(--lime);
  z-index:1}
.corner-tl {
  left:-8px;
  top:-8px;
  border-left:2px solid;
  border-top:2px solid}
.corner-br {
  right:-8px;
  bottom:-8px;
  border-right:2px solid;
  border-bottom:2px solid}
.crosshair {
  position:absolute;
  top:36%;
  right:-.2rem;
  font-size:2rem}
.agent-stamp {
  position:absolute;
  bottom:0;
  left:-1rem;
  border:1px solid var(--ink);
  border-radius:50%;
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
  text-align:center;
  transform:rotate(-13deg);
  font:8px var(--mono);
  line-height:1.2;
  background:var(--cream)}
.agent-stamp strong {
  font-size:1.4rem}
.roadmap {
  align-items:start}
.section-intro h2,.chart-heading h2 {
  font-size:clamp(3.5rem,6vw,6.4rem)}
.section-intro>p:last-child,.chart-heading>p {
  max-width:360px;
  line-height:1.6;
  color:#5f625a}
.roadmap-list {
  border-top:1px solid var(--ink)}
.phase {
  display:grid;
  grid-template-columns:65px 1fr 40px;
  gap:1.5rem;
  padding:1.65rem 0;
  border-bottom:1px solid var(--line);
  transition:.25s}
.phase:hover {
  padding-left:.7rem;
  background:rgba(216,243,106,.22)}
.phase-index {
  font:12px var(--mono);
  padding-top:.35rem}
.phase-status {
  color:var(--muted);
  margin:0 0 .65rem}
.phase h3 {
  font-size:clamp(1.7rem,2.6vw,2.5rem);
  letter-spacing:-.06em;
  margin-bottom:.55rem}
.phase p:last-child {
  font-size:.9rem;
  line-height:1.5;
  max-width:410px;
  color:#5f625a;
  margin:0}
.phase-mark {
  font-size:1.4rem;
  justify-self:end}
.phase-active .phase-index,.phase-active .phase-mark {
  color:#779000}
.chart-section {
  min-height:90vh}
.outline-button {
  margin-top:2.3rem}
.outline-button span {
  font-size:1.2rem}
.chart-console {
  background:var(--ink);
  color:var(--cream);
  min-height:440px;
  padding:1rem;
  display:flex;
  flex-direction:column;
  box-shadow:12px 12px 0 var(--lime)}
.console-top,.console-foot {
  display:flex;
  justify-content:space-between;
  color:#adb1a2;
  padding:.35rem 0}
.console-top i {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--lime);
  margin-right:.4rem}
.chart-placeholder {
  border:1px solid #52574c;
  flex:1;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  padding:2rem;
  margin:.7rem 0;
  color:#aeb2a5}
.chart-placeholder strong {
  color:var(--cream);
  font-size:1.5rem;
  margin:.8rem 0 .5rem}
.chart-placeholder p {
  font:11px var(--mono);
  line-height:1.6;
  max-width:340px;
  margin:0}
.signal-icon {
  font-size:3rem;
  color:var(--lime)}
code {
  color:var(--lime)}
.chart-frame {
  width:100%;
  flex:1;
  border:1px solid #52574c;
  margin:.7rem 0;
  min-height:350px}
.site-footer {
  max-width:1440px;
  margin:auto;
  padding:2rem clamp(1.25rem,5vw,5.5rem);
  display:flex;
  align-items:center;
  gap:2rem}
.site-footer p {
  font:10px var(--mono);
  color:var(--muted);
  line-height:1.6;
  margin:0}
.back-top {
  margin-left:auto;
  color:var(--ink);
  border:1px solid var(--ink);
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  text-decoration:none}
.toast {
  position:fixed;
  bottom:1.5rem;
  left:50%;
  transform:translate(-50%,150%);
  background:var(--ink);
  color:var(--cream);
  padding:.9rem 1.1rem;
  font:11px var(--mono);
  transition:transform .3s;
  z-index:10}
.toast.show {
  transform:translate(-50%,0)}
.reveal {
  opacity:1;
  transform:translateY(24px);
  transition:opacity .75s ease,transform .75s ease}
.js .reveal {
  opacity:0}
.js .reveal.is-visible {
  opacity:1;
  transform:none}
.reveal-delay {
  transition-delay:.15s}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0)}
:focus-visible {
  outline:3px solid var(--lime);
  outline-offset:4px}
@media(max-width:780px) {
  .site-header {
  height:70px}
.menu-toggle {
  display:grid;
  gap:4px;
  margin-left:auto;
  margin-right:1rem;
  padding:.5rem}
.menu-toggle span {
  width:22px;
  height:1px;
  background:var(--ink)}
.site-nav {
  position:absolute;
  top:70px;
  left:0;
  right:0;
  background:var(--cream);
  border-bottom:1px solid var(--line);
  display:grid;
  gap:0;
  padding:0;
  visibility:hidden;
  transform:translateY(-130%);
  transition:transform .3s,visibility .3s}
.site-nav.is-open {
  visibility:visible;
  transform:translateY(0)}
.site-nav a {
  padding:1.2rem 1.25rem;
  border-bottom:1px solid var(--line)}
.header-buy {
  padding:.65rem;
  font-size:0}
.header-buy img {
  width:19px;
  height:19px}
.brand {
  min-width:0}
.section-grid {
  grid-template-columns:1fr;
  min-height:auto;
  padding-top:6rem;
  padding-bottom:6rem;
  gap:4rem}
.hero-art {
  justify-self:center}
.hero-actions {
  margin-top:2.3rem}
.site-footer {
  flex-wrap:wrap}
.site-footer p {
  order:3;
  width:100%}
h1 {
  font-size:clamp(3.2rem,15vw,6rem)}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
.reveal {
  opacity:1;
  transform:none;
  transition:none}
.dossier-frame,.action-card {
  transition:none}
}


[hidden] {
  display:none!important}

section {
  scroll-margin-top:84px}

.hero-copy {
  min-width:0}

h1 {
  font-size:clamp(2.8rem,6.7vw,6.9rem);
  font-weight:800;
  letter-spacing:-.065em;
  line-height:.95}

.hero-tagline {
  font:11px var(--mono);
  text-transform:uppercase;
  letter-spacing:.035em;
  margin-bottom:1.5rem}

.action-card img[src="assets/x.svg"] {
  filter:brightness(0)}

.toast {
  max-width:calc(100vw - 2rem);
  width:max-content;
  pointer-events:none;
  visibility:hidden}

.toast.show {
  visibility:visible}

:focus-visible {
  outline-color:#779000}

@media(max-width:780px) {
  h1 {
  font-size:clamp(2.8rem,9.5vw,5rem)}
.hero-art {
  max-width:540px;
  padding:1rem}
.art-meta {
  font-size:8px}
.section-grid {
  gap:3rem;
  padding-top:4rem;
  padding-bottom:4rem}
.hero-actions {
  max-width:100%}
.phase {
  grid-template-columns:30px minmax(0,1fr) 20px;
  gap:1rem}
.chart-console {
  min-width:0}
.hero-tagline {
  font-size:10px}
.action-card {
  padding:.8rem;
  column-gap:.4rem;
  grid-template-columns:21px minmax(0,1fr) 15px}
.action-card span {
  font-size:.8rem}
.action-card small {
  font-size:8px}
.site-header {
  gap:.5rem}
.site-nav a.active {
  padding-bottom:1.2rem}
.site-nav a {
  border-bottom:1px solid var(--line)}
html:not(.js) .site-nav {
  position:static;
  visibility:visible;
  transform:none;
  display:flex;
  flex-wrap:wrap;
  font-size:9px}
html:not(.js) .menu-toggle {
  display:none}
html:not(.js) .site-header {
  height:auto;
  flex-wrap:wrap;
  padding-top:1rem;
  padding-bottom:1rem}
}

@media(prefers-reduced-motion:reduce) {
  .js .reveal {
  opacity:1;
  transform:none}
.site-nav,.toast,.phase,.action-card {
  transition:none}
}


@media(max-width:780px) {
  .header-buy {font-size:10px;gap:.4rem;min-height:44px;}
  .menu-toggle {min-width:44px;min-height:44px;align-content:center;justify-content:center;margin-right:.3rem;}
  .back-top {width:44px;height:44px;}
}

.runtime-status {
  grid-column: 1 / -1;
  margin: .15rem 0 0;
  color: var(--muted);
  font: 10px var(--mono);
  line-height: 1.5;
}

.contract-strip {
  width: min(100%, 530px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  margin-top: .9rem;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.12);
}
.contract-label {
  color: var(--muted);
  font: 9px var(--mono);
  letter-spacing: .08em;
}
.contract-strip code {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font: 10px var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copy-contract {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
}
.copy-contract:hover { background: var(--lime); border-color: var(--ink); }
.copy-contract svg { width: 16px; height: 16px; }

@media(max-width:780px) {
  .contract-strip { width: 100%; margin-top: .9rem; }
}

[hidden] { display: none !important; }