/* home page composition */

.ticker { font-family: var(--mono); text-transform: none; letter-spacing: 0; font-weight: 600; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: start;
}
/* equal halves, as a class so the single column rule below still wins on a
   phone. As an inline style it did not, and the second panel was cut off. */
.two-col-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Four columns of prose in the even split came out at about five characters a
   line. This pairing gives the panel the wider half. */
.two-col-panel { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); gap: 48px; }
@media (max-width: 900px) {
  .two-col, .two-col-even, .two-col-panel { grid-template-columns: 1fr; gap: 34px; }
}

/* ---------- security ribbon ---------- */

/* White, one hairline under it, a green check in front of the label: a line of
   record rather than a coloured banner. */
.ribbon {
  display: block;
  text-decoration: none;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.ribbon:hover { background: var(--ground); }
.ribbon-mark {
  width: 18px; height: 18px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
}
.ribbon-mark::after {
  content: "";
  position: absolute;
  left: 6px; top: 4px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 1.7px 1.7px 0;
  transform: rotate(42deg);
}
.ribbon-tag {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 500;
}
.ribbon-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 13px;
  padding-bottom: 13px;
  font-size: .86rem;
}
.ribbon-in b { font-weight: 600; }
.ribbon-sub { color: var(--ink-2); font-size: .8rem; }
.ribbon .textlink { margin-left: auto; }
@media (max-width: 1280px) { .ribbon-sub { display: none; } }
@media (max-width: 760px) { .ribbon-in b { font-size: .82rem; } .ribbon .textlink { margin-left: 0; } }

/* ---------- hero ---------- */

/* The pipeline hovers over a soft radial green glow rather than sitting on a
   panel: the cards carry their own shadow, the ground behind them carries the
   colour. */
.hero {
  padding: 112px 0 92px;
  background:
    radial-gradient(880px 660px at 73% 40%, #dff6ec 0%, rgba(223, 246, 236, 0) 68%),
    radial-gradient(940px 480px at 16% -14%, #eef9f4 0%, rgba(238, 249, 244, 0) 70%),
    var(--paper);
}
/* The top padding is planned for a 1440 viewport, where it is the air the
   reference's hero carries. On a phone the same figure is a blank screenful
   above the eyebrow. */
@media (max-width: 760px) {
  .hero { padding: 48px 0 60px; }
}
/* The reference splits the hero about 0.75 to 1 between the copy and the card
   cluster, with the cluster the wider half. Ours had them near even, which is
   what kept the cards small. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .755fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
}
/* The headline runs to three lines at 1440: one ink line, then the accent
   sentence over two, the same shape the reference holds. The scale is planned
   around the column it sits in, not around the viewport alone. */
.hero-copy h1 { font-size: clamp(2.3rem, 3.95vw, 3.56rem); margin-bottom: 26px; }
.hero-copy .lede { font-size: 1.02rem; line-height: 1.65; }
.hero-copy .lede b { font-weight: 600; color: var(--ink); }

/* two true figures on a hairline, nothing counted up and nothing invented */
.hero-figures {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 34px;
  margin: 30px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}
.hero-figures li { display: flex; align-items: baseline; gap: 7px; }
.hero-figures b { font-size: 1.32rem; font-weight: 600; letter-spacing: -.02em; }
.hero-figures span { font-size: .8rem; color: var(--ink-2); }

.hero-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 18px 0 0;
  padding: 0;
  font-size: .84rem;
  font-weight: 500;
}
.hero-facts li { display: flex; align-items: center; gap: 8px; }

/* ---------- the engine pipeline in the hero ----------
   Three white cards over a soft green glow, joined by arrows: the shape of one
   run. Every stage is an attribute on the figure, so the whole object animates
   through class changes and transform and opacity only, and assets/hero.js owns
   the timing and writes no style. */

.engine { margin: 0; display: grid; gap: 18px; position: relative; }
/* The reference runs the three cards at about 170, 214 and 240 px with a 45 px
   lane between each pair. The fr units below are those three numbers, so the
   cluster keeps the reference's proportions at any width the hero gives it. */
.engine-row {
  display: grid;
  grid-template-columns: minmax(0, 170fr) 30px minmax(0, 214fr) 30px minmax(0, 240fr);
  align-items: stretch;
  gap: 7px;
}
/* Staggered baselines: each card is set a little lower than the one before it,
   so the three top edges and the three bottom edges each step down to the
   right instead of sitting on one line. */
.engine-card-2 { margin-top: 10px; }
.engine-card-3 { margin-top: 22px; }
/* The middle card carries the render, so it is the one that opens up when the
   row is taller than its content: the slack spreads between its rows rather
   than pooling as white space under the last check. */
.engine-card-2 { align-content: space-between; }
.engine-arrow {
  align-self: center;
  color: var(--ink-3);
  font-size: 1.05rem;
  text-align: center;
  line-height: 1;
}
.engine-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 17px 20px;
  display: grid;
  gap: 14px;
  align-content: start;
  box-shadow: 0 2px 4px rgba(15, 25, 20, .03), 0 30px 60px -26px rgba(15, 25, 20, .32);
}
.engine-card-h {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.3;
}
.engine-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--accent-deep);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
}

/* card 1 */
.engine-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  border-radius: 12px;
  background: var(--ground);
}
.engine-tabs span {
  padding: 10px 6px;
  border-radius: 8px;
  font-size: .76rem;
  font-weight: 500;
  color: var(--ink-2);
  text-align: center;
  line-height: 1.25;
}
.engine-tabs .on { background: var(--tint); color: var(--accent-deep); font-weight: 600; }
.engine-quote {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 14px;
  font-size: .79rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.engine-drop {
  display: grid;
  gap: 11px;
  justify-items: start;
  align-content: center;
  border: 1px dashed var(--line-2);
  border-radius: 12px;
  padding: 16px 14px;
  color: var(--ink-3);
  font-size: .73rem;
  line-height: 1.5;
}

/* card 2 */
/* The reference's render sits a little taller than it is wide. The files are
   square, so the display box crops the sides rather than the subject. */
.engine-shot {
  width: 100%;
  aspect-ratio: 6 / 7;
  object-fit: cover;
  border-radius: 12px;
  background: var(--ground);
}
.engine-meter { display: flex; align-items: center; gap: 9px; }
.engine-meter-track {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: var(--ground-2);
  overflow: hidden;
}
.engine-meter-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-hover), var(--accent));
  transform-origin: left center;
  transform: scaleX(1);
}
.engine-meter-label { font-size: .68rem; color: var(--ink-2); flex: none; }
.engine-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.engine-checks li {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  font-size: .785rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.engine-check {
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
  margin-top: 1px;
}
.engine-check::after {
  content: "";
  position: absolute;
  left: 5px; top: 4px;
  width: 4px; height: 7px;
  border: solid #fff;
  border-width: 0 1.7px 1.7px 0;
  transform: rotate(42deg);
}

/* card 3. Two columns, so six real renders fill the widest card the way the
   reference's grid fills its own. The count follows the files that shipped, it
   is never padded out with repeats. */
.engine-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.engine-tile {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ground);
  aspect-ratio: 1;
}
.engine-tile img { width: 100%; height: 100%; object-fit: cover; }
.engine-tile-pick { outline: 2px solid var(--accent); outline-offset: 1px; }
.engine-stamp {
  position: absolute;
  inset: auto 0 0 0;
  padding: 4px 0 5px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .04em;
  text-align: center;
}
.engine-foot {
  display: flex;
  gap: 7px;
  align-items: baseline;
  font-size: .76rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.engine-glyph { color: var(--accent-deep); font-size: .85rem; }

.engine figcaption {
  font-size: .78rem;
  color: var(--ink-2);
  max-width: 58ch;
  padding-left: 2px;
}

/* the stages. Everything below moves transform and opacity only. */
html.js .engine-card { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
html.js .engine:not([data-stage="idle"]) .engine-card-1,
html.js .engine[data-stage="variants"] .engine-card-2,
html.js .engine[data-stage="traits"] .engine-card-2,
html.js .engine[data-stage="mint"] .engine-card-2,
html.js .engine[data-stage="mint"] .engine-card-3 { opacity: 1; transform: none; }

html.js .engine-arrow { opacity: 0; transition: opacity var(--t-mid) var(--ease); }
html.js .engine[data-stage="variants"] .engine-arrow:first-of-type,
html.js .engine[data-stage="traits"] .engine-arrow:first-of-type { opacity: 1; }
html.js .engine[data-stage="mint"] .engine-arrow { opacity: 1; }

html.js .engine-meter-fill { transform: scaleX(0); transition: transform 1500ms var(--ease); }
html.js .engine[data-stage="variants"] .engine-meter-fill,
html.js .engine[data-stage="traits"] .engine-meter-fill,
html.js .engine[data-stage="mint"] .engine-meter-fill { transform: scaleX(1); }

html.js .engine-checks li { opacity: 0; transform: translateY(5px); transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
html.js .engine[data-stage="traits"] .engine-checks li,
html.js .engine[data-stage="mint"] .engine-checks li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 220ms); }

html.js .engine-tile { opacity: 0; transform: scale(.86); transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
html.js .engine[data-stage="mint"] .engine-tile { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 85ms); }

html.js .engine-stamp { opacity: 0; transform: translateY(100%); transition: opacity var(--t-fast) var(--ease), transform var(--t-mid) var(--ease); }
html.js .engine[data-stage="mint"] .engine-stamp { opacity: 1; transform: none; transition-delay: 600ms; }
html.js .engine-tile-pick { outline-color: transparent; transition: outline-color var(--t-mid) var(--ease); }
html.js .engine[data-stage="mint"] .engine-tile-pick { outline-color: var(--accent); transition-delay: 600ms; }

/* The settled end state. A panel that is not walking shows the finished run
   rather than an empty frame: it is what reduced motion gets, what a paused
   panel holds, and what a full page capture sees. */
html.js .engine[data-settled] .engine-card,
html.js .engine[data-settled] .engine-arrow,
html.js .engine[data-settled] .engine-checks li,
html.js .engine[data-settled] .engine-tile,
html.js .engine[data-settled] .engine-stamp {
  opacity: 1;
  transform: none;
  transition-delay: 0ms;
}
html.js .engine[data-settled] .engine-meter-fill { transform: scaleX(1); }
html.js .engine[data-settled] .engine-tile-pick { outline-color: var(--accent); transition-delay: 0ms; }

@media (prefers-reduced-motion: reduce) {
  html.js .engine-card, html.js .engine-arrow, html.js .engine-checks li,
  html.js .engine-tile, html.js .engine-stamp { opacity: 1; transform: none; }
  html.js .engine-meter-fill { transform: scaleX(1); }
  html.js .engine-tile-pick { outline-color: var(--accent); }
}

@media (max-width: 860px) {
  .engine-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .engine-arrow { display: none; }
  .engine-card-2, .engine-card-3 { margin-top: 0; }
  .engine-card-3 { grid-column: 1 / -1; }
  .engine-card-3 .engine-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .engine-row { grid-template-columns: 1fr; }
  .engine-card-3 .engine-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- four step strip ---------- */

/* One white card holding the four steps, with an arrow between each pair. The
   arrows are drawn by the list itself, so the markup carries four items and
   nothing else. */
.strip { background: var(--paper); padding: 0 0 16px; }
.steps {
  list-style: none;
  margin: 0;
  padding: 26px 30px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow);
}
.steps li {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}
.steps li + li::before {
  content: "\2192";
  position: absolute;
  left: -21px;
  top: 4px;
  color: var(--ink-3);
  font-size: .95rem;
  line-height: 1.4;
}
.steps-text { display: grid; gap: 3px; min-width: 0; }
.steps-text b { font-size: .95rem; font-weight: 600; letter-spacing: -.012em; }
@media (max-width: 960px) {
  .steps { grid-template-columns: 1fr 1fr; gap: 24px 30px; padding: 22px; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; gap: 20px; }
  .steps li + li::before { display: none; }
}

/* ---------- the marquee of collections on this chain ---------- */

.marq {
  display: flex;
  width: 100%;
  overflow: hidden;
  gap: 14px;
  padding: 4px 0 10px;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marq-track {
  display: flex;
  gap: 14px;
  flex: none;
  padding-left: 14px;
}
html.js .marq-track { animation: marq 38s linear infinite; }
.marq:hover .marq-track, .marq:focus-within .marq-track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(calc(-100% - 14px)); } }
@media (prefers-reduced-motion: reduce) {
  html.js .marq-track { animation: none; }
}

.mini {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 268px;
  flex: none;
  padding: 13px 15px;
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow);
  transition: box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
a.mini:hover { box-shadow: var(--shadow-lift); border-color: var(--line-2); transform: translateY(-2px); }
.mini-text { display: grid; gap: 1px; min-width: 0; }
.mini-text b { font-size: .88rem; font-weight: 600; }
.mini-text span { font-size: .74rem; }
.mini-go { margin-left: auto; color: var(--ink-3); font-size: .78rem; flex: none; }

/* The avatars are drawn here in CSS, one silhouette each, so no image is copied
   from anywhere. */
.mini-face {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
}
[data-face="raccoon"] {
  background:
    radial-gradient(circle at 36% 44%, #f4f6f4 0 15%, transparent 15.5%),
    radial-gradient(circle at 64% 44%, #f4f6f4 0 15%, transparent 15.5%),
    radial-gradient(circle at 50% 68%, var(--accent) 0 9%, transparent 9.5%),
    linear-gradient(140deg, #1d2422, #3c4a45);
}
[data-face="script"] {
  background:
    linear-gradient(90deg, #12201b 0 55%, transparent 55%) 22% 34% / 56% 4px no-repeat,
    linear-gradient(90deg, #12201b 0 85%, transparent 85%) 22% 50% / 56% 4px no-repeat,
    linear-gradient(90deg, #12201b 0 40%, transparent 40%) 22% 66% / 56% 4px no-repeat,
    linear-gradient(140deg, #bff0dc, #7fd9b6);
}
[data-face="robacha"] {
  background:
    radial-gradient(circle at 50% 50%, var(--accent) 0 26%, transparent 26.5%),
    radial-gradient(circle at 50% 50%, transparent 0 40%, #1d2422 40% 46%, transparent 46.5%),
    linear-gradient(140deg, #eefaf4, #cdeade);
}
[data-face="robin"] {
  background:
    radial-gradient(circle at 50% 34%, #1d2422 0 20%, transparent 20.5%),
    linear-gradient(180deg, transparent 56%, #1d2422 56% 100%) 50% 0 / 48% 100% no-repeat,
    linear-gradient(140deg, #e7f1ec, #c7ddd3);
}

/* ---------- why list ---------- */
/* ---------- why list ---------- */

.why-list { list-style: none; margin: 0; padding: 0; display: grid; }
.why-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.why-list li:last-child { border-bottom: 1px solid var(--line); }
.why-list h3 { margin-bottom: 6px; }

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

.nft-card { padding: 10px; margin: 0; }
.nft-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.nft-card figcaption { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 6px 4px; gap: 10px; }

.band {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--paper);
}
.band > div { max-width: 62ch; }
.band b { display: block; margin-bottom: 4px; }

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

.ref-card { display: grid; gap: 12px; align-content: start; padding: 16px; }
.ref-art { display: block; aspect-ratio: 16 / 10; border-radius: var(--r-s); position: relative; overflow: hidden; }
.ref-art > span { position: absolute; inset: 0; }
[data-art="punk"] { background: linear-gradient(180deg, #7d93b3, #5f7796); }
[data-art="punk"] > span {
  image-rendering: pixelated;
  background:
    /* pixel hat brim and crown */
    linear-gradient(90deg, #241a12 0 100%) 50% 20% / 34% 5% no-repeat,
    linear-gradient(90deg, #241a12 0 100%) 50% 13% / 22% 9% no-repeat,
    /* two eyes */
    linear-gradient(90deg, #16110c 0 100%) 43% 46% / 5% 5% no-repeat,
    linear-gradient(90deg, #16110c 0 100%) 57% 46% / 5% 5% no-repeat,
    /* mouth */
    linear-gradient(90deg, #16110c 0 100%) 50% 62% / 11% 4% no-repeat,
    /* head block */
    linear-gradient(90deg, #8a6444 0 100%) 50% 44% / 30% 52% no-repeat;
}
[data-art="pudgy"] { background: linear-gradient(180deg, #bfe3f7, #8dc2e6); }
[data-art="pudgy"] > span {
  background:
    /* beak */
    radial-gradient(ellipse at 50% 53%, #f2a33c 0 6%, transparent 6.5%),
    /* pupils */
    radial-gradient(circle at 43% 43%, #14202b 0 4%, transparent 4.5%),
    radial-gradient(circle at 57% 43%, #14202b 0 4%, transparent 4.5%),
    /* white face patch */
    radial-gradient(ellipse at 50% 56%, #fbfdff 0 27%, transparent 27.5%),
    /* body */
    radial-gradient(ellipse at 50% 74%, #23303d 0 42%, transparent 42.5%),
    /* head */
    radial-gradient(circle at 50% 40%, #23303d 0 21%, transparent 21.5%);
}
[data-art="bayc"] { background: linear-gradient(180deg, #e9d9b4, #cbb082); }
[data-art="bayc"] > span {
  background:
    /* eyes */
    radial-gradient(circle at 42% 44%, #f6f1e6 0 6%, transparent 6.5%),
    radial-gradient(circle at 58% 44%, #f6f1e6 0 6%, transparent 6.5%),
    /* muzzle */
    radial-gradient(ellipse at 50% 64%, #c79a6d 0 19%, transparent 19.5%),
    /* head */
    radial-gradient(ellipse at 50% 52%, #6f5336 0 32%, transparent 32.5%),
    /* ears */
    radial-gradient(circle at 24% 42%, #6f5336 0 9%, transparent 9.5%),
    radial-gradient(circle at 76% 42%, #6f5336 0 9%, transparent 9.5%);
}

/* ---------- token ---------- */

.token-col { align-items: center; }
.token-panel { box-shadow: var(--shadow); }
.brandline { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; }
.ca-box {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 14px;
  font-size: .82rem;
  word-break: break-all;
  margin: 0 0 18px;
}

.chain-panel { background: var(--dark-2); border-color: var(--dark-line); }
.chain-panel .panel-head { background: transparent; border-bottom-color: var(--dark-line); }
.chain-panel .deflist > div { border-bottom-color: var(--dark-line); }
.chain-panel dt { color: var(--dark-dim); }
.chain-panel dd { color: #e8efec; }
.chain-panel a[aria-disabled="true"] { color: var(--dark-dim); }
.section-dark .panel-head b { color: #fff; }

/* ---------- v3 blocks ---------- */

/* a centred section head, as a class so the rule for a phone still wins */
.section-head-mid { margin-left: auto; margin-right: auto; text-align: center; max-width: 840px; }
.section-head-mid h2 { text-wrap: balance; }
.section-head-mid .lede { max-width: 58ch; margin-left: auto; margin-right: auto; }

/* the reference cards: art, kind, name, blurb, one true figure, one link row */
.ref-card { padding: 16px 16px 18px; gap: 10px; }
.ref-card .ref-art { margin-bottom: 4px; }
.ref-kind { font-size: .78rem; color: var(--accent-deep); font-weight: 500; }
.ref-figure {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 13px 15px;
  border-radius: var(--r-s);
  background: var(--tint);
}
.ref-figure b { font-size: 1.32rem; font-weight: 600; letter-spacing: -.02em; color: var(--accent-deep); }
.ref-figure span { font-size: .76rem; color: var(--ink-2); }

/* the value grid: four cards, a numbered chip each, one example line under a
   hairline */
.value-col { align-items: start; }
.value-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.value-card { display: grid; gap: 10px; align-content: start; padding: 22px; }
.value-card h3 { margin-top: 2px; }
.value-eg {
  margin-top: 6px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: .8rem;
  color: var(--accent-deep);
}
@media (max-width: 620px) { .value-grid { grid-template-columns: 1fr; } }

/* the same small cards as the home marquee, standing still in a grid */
.mini-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mini-grid .mini { width: auto; }
@media (max-width: 960px) { .mini-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .mini-grid { grid-template-columns: 1fr; } }

/* On a phone the row is a stack: a track that slides sideways would put half of
   every card past the edge, and there is no sideways room to give it. */
@media (max-width: 700px) {
  .marq { display: block; mask-image: none; -webkit-mask-image: none; padding: 0 16px; }
  .marq .marq-track:last-child { display: none; }
  html.js .marq-track { animation: none; }
  .marq-track { display: grid; gap: 12px; padding-left: 0; }
  .marq .mini { width: auto; }
}

/* Cards in a row carry different amounts of blurb. The blurb takes the slack so
   the figure box and the link row line up across the row rather than floating at
   whatever height the text above them ended. */
.ref-card { display: flex; flex-direction: column; }
.ref-card .muted { flex: 1; }
.ref-card > * + * { margin-top: 10px; }
.value-card { display: flex; flex-direction: column; }
.value-card .muted { flex: 1; }
.value-card > * + * { margin-top: 10px; }

/* The hero is one column below 1100: the copy column would otherwise be narrow
   enough to clip a button label. This rule was lost when the hero object was
   rebuilt, which is what put the pipeline beside the copy at 390. */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .engine figcaption { max-width: none; }
}
@media (max-width: 480px) {
  .cta-row { display: grid; }
  .cta-row .btn { width: 100%; justify-content: center; }
}