/* vibe collection engine - base system */

:root {
  /* The ground, the pale band, the accent, the deep accent for text and the ink
     are the five relationships the whole site is built from. The accent family
     is a clean emerald: --accent carries colour, --accent-deep is the only green
     that ever holds text, because it clears 4.5:1 on white and on the band. */
  --paper: #ffffff;
  --ground: #f4f8f6;
  --ground-2: #eaf3ee;
  --ink: #0f1419;
  --ink-2: #4c5a63;
  --ink-3: #5f6e77;
  --line: #e4ebe7;
  --line-2: #d2ddd7;
  --accent: #16bf86;
  --accent-hover: #0fa372;
  --accent-deep: #067a56;
  --tint: #e9f8f1;
  /* Sampled off the 3D mark render: --mint is its ground, averaged over the
     border the render's own vignette was flattened against, and --lime is the
     median of its glass face. Neither carries text or an outline. Measured
     against white the face is 1.60:1 and against --mint it is 1.15:1, so it
     never clears the 3:1 a mark's silhouette needs and the flat mark in the
     nav, the favicon and the footer keeps --accent. --lime is a glow. */
  --mint: #cfded4;
  --lime: #8ee303;
  --dark: #0d1512;
  --dark-2: #14201c;
  --dark-line: #24332e;
  --dark-text: #c2d1cb;
  --dark-dim: #9cb0a8;
  --ok: #14724a;
  --bad: #c22a2a;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 20px;
  /* large blur, low alpha, tinted to the ground rather than pure black */
  --shadow: 0 1px 2px rgba(15, 25, 20, .04), 0 18px 44px -20px rgba(15, 25, 20, .16);
  --shadow-lift: 0 2px 8px rgba(15, 25, 20, .05), 0 30px 64px -26px rgba(15, 25, 20, .26);
  /* The reference lays its content out on about 1296 px at a 1440 viewport.
     Ours sat on 1192, which is why every band read a size small next to it. */
  --wrap: 1320px;
  --font: "Geist", "Geist fallback", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* one easing family and three durations for the whole site */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 200ms;
  --t-mid: 360ms;
  --t-slow: 600ms;
}

/* Geist arrives over the network. The fallback is metric adjusted to it so the
   swap moves no line and the page keeps its CLS budget.

   The adjustment used to be one 96.5% rule for every weight, which ran the
   fallback narrow: measured against Geist, the same strings came back about 9%
   wider once the webfont landed, so headings that fitted on one line rewrapped
   onto two and pushed whole sections down. Segoe UI is not one ratio off Geist
   either: it runs about 6% narrow at 400 and about 12.5% narrow at 600, so the
   weights are adjusted apart. qa/font-metrics.mjs is the measurement.

   size-adjust also scales the font's own ascent and descent, so the overrides
   come down by the same factor and the em box stays where it was. */
@font-face {
  font-family: "Geist fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  font-weight: 400;
  size-adjust: 102.6%;
  ascent-override: 90.3%;
  descent-override: 22.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Geist fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  font-weight: 500 700;
  size-adjust: 108.6%;
  ascent-override: 85.3%;
  descent-override: 21.3%;
  line-gap-override: 0%;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "ss01" on, "cv01" on;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
/* width/height attributes reserve layout space; without this the attribute
   height wins over aspect-ratio and every art tile renders 1024px tall */
img { height: auto; }
a { color: inherit; }
/* .deflist rows and .bento cells set display, which beats the user agent rule
   for [hidden] and used to leave the collection contract row on the page as a
   label with nothing after it */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }

::selection { background: var(--tint); color: var(--ink); }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 200;
  border-radius: 0 0 var(--r-s) 0;
}
.skip:focus { left: 0; }

/* ---------- type ---------- */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.06;
}
/* display sizes sit at medium, not heavy: the size carries the weight */
h1, h2 { font-weight: 500; }

h1 { font-size: clamp(2.35rem, 5.2vw, 4.1rem); line-height: 1.12; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.7rem); line-height: 1.16; }
h3 { font-size: 1.16rem; letter-spacing: -.016em; line-height: 1.3; }

p { margin: 0; }

/* The accent lines of a headline carry the colour, at the same weight and the
   same upright cut as the ink line above them. Nothing on the site is italic. */
.accent-word {
  color: var(--accent-hover);
  font-style: normal;
  font-weight: inherit;
}

.eyebrow {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 500;
  margin: 0 0 18px;
}
.eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
}
/* the hero wears the eyebrow as a bordered pill, every other section wears it
   flat: one label style, two weights of presence */
.eyebrow-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px 7px 13px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
  margin-bottom: 26px;
}

.lede { font-size: 1.06rem; color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
.mono { font-family: var(--mono); }
.num {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--accent-deep);
  letter-spacing: .06em;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .925rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
/* the trailing arrow travels on hover, which is the only thing that moves: the
   button keeps its box, so a row of buttons never reflows */
.btn-go { display: inline-block; transition: transform var(--t-fast) var(--ease); }
.btn:hover .btn-go { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-primary:hover { background: var(--accent-hover); color: var(--ink); box-shadow: 0 10px 24px -14px rgba(6, 122, 86, .7); }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #26302c; }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-line:hover { border-color: var(--ink); background: var(--ground); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-sm { padding: 8px 16px; font-size: .84rem; }
.btn-block { width: 100%; justify-content: center; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-deep);
  font-weight: 600;
  text-decoration: none;
  font-size: .925rem;
}
.textlink:hover { text-decoration: underline; }

/* ---------- header ---------- */

/* A flat white bar across the full width with one hairline under it. It sits in
   the flow, so nothing beneath it is covered, and it carries no blur: the bar is
   opaque, which is why it stays legible over whatever scrolls past. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header-in {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 76px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex: none;
}
/* lockup per lab/NOTES.md: 28 px mark, Geist 600, tracking -0.02em. The mark is
   inlined rather than loaded as an image so its outline follows the ink of the
   surface it sits on and its face follows the site accent. */
.brand-mark { width: 28px; height: 28px; flex: none; color: var(--ink); }
.site-footer .brand-mark, .section-dark .brand-mark { color: #fff; }
.brandline .brand-mark { width: 26px; height: 26px; }
.brand-name {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
}
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
}
.nav a {
  position: relative;
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 999px;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav a:hover { color: var(--ink); background: rgba(14, 17, 16, .05); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; background: rgba(14, 17, 16, .06); }
.nav .audit-link { color: var(--accent-deep); font-weight: 600; }
.nav .audit-link:hover { background: var(--tint); }

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* The chip is a real state machine: it says it is checking, then it says what
   the RPC answered. site.js owns the three states and nothing else sets them. */
.net-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .6);
}
.led {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
  flex: none;
}
.led.on { background: var(--ok); box-shadow: 0 0 0 3px rgba(20, 114, 74, .14); }
.led.warn { background: var(--accent); }
.led.off { background: var(--line-2); }
/* the checking state is the only thing on the site that loops, and it stops the
   moment the RPC answers */
.led.checking { background: var(--accent); animation: ledpulse 1.4s var(--ease) infinite; }
@keyframes ledpulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* the chip is sized for the longest of its three labels from the first frame, so
   the answer arriving does not widen the header and push the row */
.net-chip [data-net-label] { display: inline-block; min-width: 10rem; }

.burger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.burger:hover { border-color: var(--ink); }
.burger span {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--ink);
  position: relative;
  transition: background var(--t-fast) var(--ease);
}
.burger span::before, .burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px; height: 1.5px;
  background: var(--ink);
  transition: transform var(--t-mid) var(--ease);
}
.burger span::before { top: -5px; }
.burger span::after { top: 5px; }
/* the two bars rotate into the cross rather than being swapped for a glyph */
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: relative;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 48px -28px rgba(11, 13, 12, .5);
  padding: 8px;
  overflow: hidden;
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 14px;
  border-radius: var(--r-s);
  text-decoration: none;
  font-weight: 500;
  color: var(--ink);
  transition: background var(--t-fast) var(--ease);
}
.mobile-nav a + a { border-top: 1px solid var(--line); border-radius: 0; }
.mobile-nav a:hover { background: var(--ground); }
.mobile-nav a span { color: var(--ink-3); }
.mobile-nav .m-actions { padding: 12px 6px 6px; display: grid; gap: 10px; }
html.js .mobile-nav.open a {
  animation: navin var(--t-mid) var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 34ms);
}
@keyframes navin { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1360px) { .header-right .net-chip { display: none; } }
@media (max-width: 1200px) {
  .nav, .header-right .btn-line { display: none; }
  .burger { display: flex; }
}

/* ---------- sections ---------- */

/* Bands alternate white and the pale band, with a lot of air on both edges. The
   rhythm is the layout: nothing between two bands needs a rule to separate it. */
.section { padding: 120px 0; }
.section-sm { padding: 68px 0; }
.section-ground { background: var(--ground); }
.section-tint { background: var(--ground); }
.section-dark { background: var(--dark); color: #fff; }
.section-dark .lede, .section-dark .muted { color: var(--dark-text); }
.section-dark .eyebrow { color: var(--accent); }

.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head h2 { margin-bottom: 16px; }
.split-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 44px;
}

/* ---------- cards ---------- */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 26px;
  box-shadow: var(--shadow);
}
.card-lift { transition: box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.card-lift:hover { box-shadow: var(--shadow-lift); border-color: var(--line-2); transform: translateY(-3px); }

.grid { display: grid; gap: 18px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 960px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-head { grid-template-columns: 1fr; gap: 18px; align-items: start; }
}
@media (max-width: 620px) {
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  /* six square art cards one per row is a long scroll for no gain: the worlds
     grid keeps two columns down to the narrowest phone */
  .grid.worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding: 56px 0; }
  .wrap { padding: 0 16px; }
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--ground-2);
  color: var(--ink-2);
}
.tag-accent { background: var(--tint); color: var(--accent-deep); }
.tag-dark { background: rgba(255, 255, 255, .08); color: #cfd9d5; }

.chip-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--tint);
  color: var(--accent-deep);
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 600;
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--dark);
  color: #fff;
  padding: 48px 0 26px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--dark-line);
}
.footer-tagline {
  color: var(--dark-text);
  font-size: .95rem;
  max-width: 28ch;
  margin-top: 14px;
}
.footer-h {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dark-dim);
  margin: 0 0 14px;
}
.footer-links { display: grid; gap: 9px; align-content: start; }
.footer-links a {
  text-decoration: none;
  color: var(--dark-text);
  font-size: .9rem;
  width: fit-content;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.footer-links a:hover { color: #fff; transform: translateX(2px); }
.footer-links-2 a span { color: var(--dark-dim); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  padding-top: 22px;
  font-size: .8rem;
  color: var(--dark-dim);
}
.brand-footer .brand-name { color: #fff; }

@media (max-width: 760px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 440px) {
  .footer-top { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- panels, tables, states ---------- */

.panel {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--paper);
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--ground);
}
.panel-body { padding: 22px; }

.deflist { display: grid; }
.deflist > div {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.deflist > div:last-child { border-bottom: 0; }
.deflist dt {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.deflist dd {
  margin: 0;
  font-family: var(--mono);
  font-size: .84rem;
  word-break: break-all;
}
@media (max-width: 620px) {
  .deflist > div { grid-template-columns: 1fr; gap: 4px; }
}

.state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  background: var(--paper);
}
.state[data-state="live"], .state[data-state="ready"], .state[data-state="done"] { border-color: #b9e0cc; color: var(--ok); background: #f0fbf5; }
.state[data-state="working"], .state[data-state="connecting"] { border-color: #b6e5cf; color: var(--accent-deep); background: var(--tint); }
.state[data-state="error"], .state[data-state="reverted"] { border-color: #f0c0c0; color: var(--bad); background: #fdf1f1; }

.notice {
  border-left: 3px solid var(--accent);
  background: var(--tint);
  padding: 14px 18px;
  border-radius: 0 var(--r-s) var(--r-s) 0;
  font-size: .88rem;
  color: var(--ink-2);
}
.notice b { color: var(--ink); }
.notice-plain { border-left-color: var(--line-2); background: var(--ground); }

.empty {
  text-align: center;
  padding: 52px 24px;
  color: var(--ink-2);
}
.empty-mark {
  width: 46px; height: 46px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--accent-deep);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}

/* ---------- forms ---------- */

label.field { display: block; margin-bottom: 18px; }
.field-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.field-label .count { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); font-weight: 400; }
textarea, input[type="text"], input[type="number"], select {
  width: 100%;
  font: inherit;
  font-size: .92rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  padding: 12px 14px;
}
textarea { resize: vertical; min-height: 104px; line-height: 1.5; }
textarea:focus, input:focus, select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--tint); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23626a67' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

.tabs {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  margin-bottom: 18px;
}
.tabs button {
  border: 0;
  background: transparent;
  padding: 8px 18px;
  border-radius: 7px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }

/* ---------- motion ---------- */

/* One easing family, transform and opacity only, 200 to 600 ms. The hidden
   start state is only applied once the observer is running, so the content is
   visible when scripting is off or blocked, and site.js releases anything the
   observer never reached. */
.reveal { transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
html.js .reveal { opacity: 0; transform: translateY(16px); }
html.js .reveal.in { opacity: 1; transform: none; }

/* children of a revealed group come in behind their parent, in order. The index
   is set by site.js so the markup carries no inline style. */
html.js .stagger > * { transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
html.js .stagger.reveal > * { opacity: 0; transform: translateY(12px); }
html.js .stagger.reveal.in > * {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  html.js .reveal, html.js .stagger.reveal > * { opacity: 1; transform: none; }
}

@media (max-width: 420px) {
  .brand-name { font-size: 1.12rem; }
  .header-in { gap: 8px; }
  .header-right { gap: 6px; }
  .header-right .btn-sm { padding: 8px 13px; font-size: .8rem; }
  .burger { width: 38px; height: 38px; }
}

/* ---------- v2 shared blocks ---------- */

/* A hairline rail: numbers and steps separated by one vertical line each,
   instead of a row of boxes. Used for the home step strip and the page stat
   strips. */
.rail {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.rail > * {
  min-width: 0;
  padding: 22px 26px;
  border-left: 1px solid var(--line);
  display: grid;
  gap: 4px;
  align-content: start;
}
.rail > *:first-child { border-left: 0; padding-left: 0; }
.rail b { font-size: .97rem; font-weight: 600; }
.rail .rail-note { font-size: .82rem; color: var(--ink-2); }
.rail-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rail-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .rail-4, .rail-3 { grid-template-columns: 1fr 1fr; }
  .rail > * { padding: 18px 20px; border-top: 1px solid var(--line); }
  .rail > *:nth-child(-n+2) { border-top: 0; }
  .rail > *:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 520px) {
  .rail-4, .rail-3 { grid-template-columns: 1fr; }
  .rail > * { border-left: 0; padding: 16px 0; border-top: 1px solid var(--line); }
  .rail > *:first-child { border-top: 0; }
}

/* Bento: a grid that is as long as its content, with one wide cell to break the
   repetition. Each cell declares its own span, so a grid with five items has
   five cells. */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.bento > * { grid-column: span 2; min-width: 0; }
.bento > .cell-wide { grid-column: span 3; }
.bento > .cell-lead { grid-column: span 4; }
.bento > .cell-full { grid-column: 1 / -1; }
.bento-art {
  display: block;
  border-radius: var(--r-s);
  aspect-ratio: 16 / 9;
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
  background: var(--ground);
}
.bento-art img { width: 100%; height: 100%; object-fit: cover; }
.cell-tint { background: var(--tint); border-color: #cdeade; }
.cell-row { display: flex; align-items: center; gap: 28px; }
.cell-row > span:last-child { min-width: 0; }
.bento-art-square { flex: none; width: 170px; aspect-ratio: 1; margin-bottom: 0; }
.cell-lead.cell-row { gap: 22px; }
@media (max-width: 620px) {
  .cell-row { display: block; }
  .bento-art-square { width: 100%; margin-bottom: 16px; }
}
.cell-ground { background: var(--ground); }
@media (max-width: 960px) { .bento > *, .bento > .cell-wide { grid-column: span 3; }
.bento > .cell-lead { grid-column: span 4; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .bento > *, .bento > .cell-wide { grid-column: 1 / -1; } }

/* A strip the reader flicks through, rather than a row of equal cards squeezed
   to fit. It scrolls sideways inside itself, which is why the overflow check
   skips anything under a scrollable parent. */
.snap-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(268px, 320px);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.snap-strip > * { scroll-snap-align: start; }
/* One centred block, wider measure than a card, used once per page at most. */
.manifesto {
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
}
.manifesto h2 { margin-bottom: 20px; text-wrap: balance; }
.manifesto .lede { max-width: 56ch; margin: 0 auto; }
.manifesto-wide { max-width: 56ch; }
.manifesto-rule {
  width: 52px;
  height: 2px;
  margin: 0 auto 26px;
  background: var(--accent);
  border-radius: 2px;
}

/* ---------- v3: footer tool grid ---------- */

/* The ecosystem column is a two column grid of dark tiles rather than a list of
   links: each one carries its name and what it is for. */
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tool {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--dark-line);
  border-radius: 12px;
  background: var(--dark-2);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.tool:hover { border-color: #37524a; background: #182924; transform: translateY(-1px); }
.tool-text { display: grid; gap: 1px; min-width: 0; }
.tool-text b { font-size: .84rem; font-weight: 600; color: #fff; }
.tool-text span { font-size: .72rem; color: var(--dark-dim); }
.tool-go { margin-left: auto; color: var(--accent); font-size: .78rem; flex: none; }
.footer-top { grid-template-columns: 1.15fr .75fr 1.5fr; }
@media (max-width: 760px) { .tool-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .tool-grid { grid-template-columns: 1fr; } }

/* the contract link in the nav carries the same green check the ribbon uses, so
   the two read as one claim */
.nav .audit-link { display: inline-flex; align-items: center; gap: 7px; }
.nav .audit-link::before {
  content: "";
  width: 15px; height: 15px;
  flex: none;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath d='M1.4 4.7l2 2 4.2-4.4' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px 9px no-repeat;
}