/* respons — the site.
 *
 * White, and quiet, with one dark object on it: the tape. A tape is a screen,
 * and a screen is dark, so making it the single dark thing on a white page is
 * the honest way round rather than a style choice — it reads as an instrument
 * sitting on a sheet of paper.
 *
 * The lime is the chain's, and it is spent on one job: something that is
 * happening right now. Everything static is grey. So when the page shows lime
 * it means a number moved, not that a brand wanted to be noticed. Lime is never
 * text on white — at 14px on a white sheet it cannot be read at all — so on
 * paper it only ever appears as a filled block, and it is only allowed to be
 * type on the tape, where the ground is nearly black and it is the brightest
 * thing on the screen.
 *
 * No font is loaded from anywhere. No script is loaded from anywhere. Both are
 * checked by the tests, because a page that promises it is not watching you and
 * then pulls a font off somebody's CDN has handed the visitor's IP to a third
 * party on the first paint.
 */

:root {
  --paper:     #ffffff;
  --paper-2:   #f7faf7;
  --sunk:      #f0f5f1;
  --rule:      #e6ece7;
  --rule-2:    #d3ded5;

  --ink:       #0d1410;
  --ink-2:     #59665c;
  --ink-3:     #8a978d;

  /* The house colour is the chain's acid lime. It is a block colour, not a
     text colour: lime type on white cannot be read, so lime is always
     something you stand on and black is always the thing you read. On the
     tape, where the ground is nearly black, the rule inverts and lime is the
     brightest thing on the screen. */
  --lime:      #ccfa00;
  --green:     #ccfa00;     /* filled blocks, and anything on the dark tape */
  --green-ink: #0d1410;     /* the accent as text on white: black */
  --green-soft:#f2ffbb;     /* a tint, for the one thing that is live */
  --red:       #b8412a;

  /* the tape: the only dark surface on the page */
  --tape:      #08120c;
  --tape-2:    #0c1a11;
  --tape-ink:  #e7eee2;
  --tape-dim:  #8b9a86;
  --tape-faint:#4a5647;

  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'DejaVu Sans Mono', monospace;

  --col: 78rem;
  --lab: .68rem;
  --r: 16px;
  --lift: 0 1px 2px rgba(13,20,16,.04), 0 14px 34px -20px rgba(13,20,16,.26);
  --ease: cubic-bezier(.22,.7,.24,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--green-ink); outline-offset: 3px; border-radius: 6px;
}

.wrap { width: min(100% - 2.6rem, var(--col)); margin-inline: auto; }

.lab { font: 400 var(--lab)/1 var(--mono); letter-spacing: .2em;
       text-transform: uppercase; color: var(--ink-3); }

/* A section's name, set in the house colour. Lime cannot be read as text on
   white, so it is the ground and the black is the type — which is the same way
   round the mark works, and the only place the brand colour appears on paper. */
.lab.mark { display: inline-block; background: var(--lime); color: var(--ink);
            padding: .52em .78em .46em; border-radius: 5px; letter-spacing: .18em; }

/* the live dot: the only thing on the page that pulses */
.dot { display: inline-block; width: .5em; height: .5em; border-radius: 50%;
       background: var(--ink); margin-right: .6em; vertical-align: .04em;
       animation: beat 2.4s ease-out infinite; }
@keyframes beat {
  0%   { box-shadow: 0 0 0 0 rgba(0,200,5,.45); }
  70%  { box-shadow: 0 0 0 .6em rgba(0,200,5,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,200,5,0); }
}

/* ─────────────────────────────────────────────────────── the progress rule
 * How far down the page you are, drawn as the one continuous green line.
 */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%;
            transform-origin: 0 50%; transform: scaleX(0);
            background: var(--ink); z-index: 60; }

/* ─────────────────────────────────────────────────────────────── the strip */
.strip { border-bottom: 1px solid var(--rule); font: 400 .74rem/1 var(--mono);
         color: var(--ink-2); background: var(--paper); }
.strip .wrap { display: flex; gap: 1.5rem; align-items: center;
               justify-content: space-between; padding: .9rem 0; }
.strip b { color: var(--green-ink); font-weight: 400; }
.strip code { color: var(--ink); word-break: break-all; }
.strip button { font: inherit; border: 0; background: none; color: var(--ink-3);
                cursor: pointer; padding: 0 0 0 .6rem; }
.strip button:hover { color: var(--green-ink); }
@media (max-width: 780px) { .strip .right { display: none; } }

/* ────────────────────────────────────────────────────────────────── the bar */
.bar { position: sticky; top: 0; z-index: 50; padding: .85rem 0;
       background: rgba(255,255,255,.86); backdrop-filter: blur(10px);
       border-bottom: 1px solid transparent;
       transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.bar.stuck { border-bottom-color: var(--rule); box-shadow: var(--lift); }
.bar .wrap { display: flex; align-items: center; gap: 1.1rem; }
.brand { display: flex; align-items: center; gap: .6rem; }
.brand img { width: 36px; height: 30px; display: block; object-fit: contain; }
.brand b { font: 400 1rem/1 var(--mono); letter-spacing: .26em;
           text-transform: uppercase; }
.bar nav { margin-left: auto; display: flex; align-items: center; gap: .1rem;
           padding: .26rem .32rem; border: 1px solid var(--rule-2);
           border-radius: 999px; background: var(--paper); }
.bar nav a { font: 400 .82rem/1 var(--sans); color: var(--ink-2);
             padding: .52rem .8rem; border-radius: 999px;
             transition: color .2s, background .2s; }
.bar nav a:hover, .bar nav a.on { color: var(--ink); background: var(--sunk); }
.bar nav a.social { display: inline-flex; align-items: center; justify-content: center;
                    width: 2rem; height: 2rem; padding: 0; color: var(--ink); }
.bar nav a.social svg { display: block; width: .95rem; height: .95rem; fill: currentColor; }
.bar nav a.social:hover { color: var(--ink); background: var(--sunk); }
@media (max-width: 1040px) { .bar nav .hide-sm { display: none; } }
@media (max-width: 660px) { .bar nav { display: none; } }

/* ────────────────────────────────────────────────────────────── the docked
 * Once the tape has scrolled out of the hero it does not stop being live, so it
 * follows: the newest line and the running total, in a slim bar under the nav.
 */
.dock { position: fixed; left: 0; right: 0; top: 0; z-index: 45;
        background: var(--tape); color: var(--tape-ink);
        transform: translateY(-100%); transition: transform .45s var(--ease);
        border-bottom: 1px solid rgba(0,200,5,.22); }
.dock.up { transform: translateY(0); }
.dock .wrap { display: flex; align-items: center; gap: 1.2rem; padding: .58rem 0;
              font: 400 .76rem/1 var(--mono); }
.dock .line { color: var(--tape-dim); white-space: nowrap; overflow: hidden;
              text-overflow: ellipsis; }
.dock .line b { color: var(--tape-ink); font-weight: 400; }
.dock .tot { margin-left: auto; color: var(--green); white-space: nowrap; }
.dock .dot { background: var(--green); }
@media (max-width: 720px) { .dock .line { display: none; } }

/* ───────────────────────────────────────────────────────────────── buttons */
.btn { display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px;
       padding: .76rem 1.45rem; font: 500 .92rem/1 var(--sans);
       background: var(--ink); color: #fff; border: 1px solid var(--ink);
       cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s,
                                    background .18s; }
.btn:hover { transform: translateY(-1px); background: #000; box-shadow: var(--lift); }
.btn.go { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.btn.go:hover { background: #00b104; border-color: #00b104;
                box-shadow: 0 10px 30px -12px rgba(0,200,5,.7); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn.ghost:hover { border-color: var(--ink); background: var(--paper); }
.btn.small { padding: .5rem 1rem; font-size: .82rem; }

/* ──────────────────────────────────────────────────────────────────── hero */
.hero { padding: 3rem 0 3.6rem; }
.hero .grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: 3rem;
              align-items: center; }
@media (max-width: 1060px) { .hero .grid { grid-template-columns: 1fr; gap: 2.4rem; } }

h1 { margin: 1.3rem 0 0; font: 300 clamp(2.3rem, 5.4vw, 3.7rem)/1.06 var(--sans);
     text-wrap: balance;
     letter-spacing: -.042em; max-width: 13ch; }
/* The house colour, doing the one job it is good at on paper: being the ground
   rather than the type. `box-decoration-break` keeps the block whole when the
   headline wraps, which it does at every width the hero is read at. */
h1 em { font-style: normal; color: var(--ink); background: var(--lime);
        padding: .04em .18em; margin: 0 -.04em; border-radius: 4px;
        -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero .lede { margin: 1.4rem 0 0; font-size: 1.05rem; color: var(--ink-2);
              max-width: 34em; }
.hero .lede b { color: var(--ink); font-weight: 500; }

.acts { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* ───────────────────────────────────────────────────────────────── the tape
 * The centrepiece, and the one dark surface on the page.
 */
.tape { border-radius: var(--r); background: var(--tape); overflow: hidden;
        box-shadow: 0 2px 6px rgba(13,20,16,.08),
                    0 40px 80px -44px rgba(13,20,16,.5); }
.tape .top { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.1rem;
             border-bottom: 1px solid rgba(255,255,255,.07);
             font: 400 .66rem/1 var(--mono); letter-spacing: .18em;
             text-transform: uppercase; color: var(--tape-dim); }
.tape .top .now { margin-left: auto; color: var(--green); }
pre.rows { margin: 0; padding: .9rem 1.1rem 1.1rem; overflow: hidden;
           font-family: var(--mono); font-size: clamp(9.5px, 1.02vw, 12.5px);
           line-height: 1.62; white-space: pre; color: var(--tape-faint); }
pre.rows b { color: var(--green); font-weight: 400; }    /* what just happened */
pre.rows i { color: var(--tape-ink); font-style: normal; }
pre.rows u { color: var(--tape-dim); text-decoration: none; }
pre.rows s { color: #24382b; text-decoration: none; }    /* receding */
.tape .foot { display: grid; grid-template-columns: repeat(3, 1fr);
              border-top: 1px solid rgba(255,255,255,.07); }
.tape .foot div { padding: .95rem 1.1rem; border-left: 1px solid rgba(255,255,255,.07); }
.tape .foot div:first-child { border-left: 0; }
.tape .foot .lab { color: var(--tape-faint); }
.tape .foot b { display: block; margin-top: .45rem; font: 400 1.28rem/1.1 var(--mono);
                color: var(--tape-ink); font-variant-numeric: tabular-nums; }
.tape .foot b.on { color: var(--green); }

/* ───────────────────────────────────────────────────────────── the readings */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
         margin-top: 2.8rem; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }
.tile { background: var(--paper); border: 1px solid var(--rule);
        border-radius: var(--r); padding: 1.25rem 1.3rem 1.4rem;
        box-shadow: var(--lift);
        transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.tile:hover { transform: translateY(-3px);
              box-shadow: 0 2px 6px rgba(13,20,16,.05),
                          0 26px 48px -26px rgba(13,20,16,.34); }
.tile .v { margin-top: .75rem; font: 300 1.9rem/1.05 var(--sans);
           letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tile .v em { font-style: normal; font-size: .44em; color: var(--ink-3);
              letter-spacing: .04em; margin-left: .3rem; }
.tile .v.on { color: var(--green-ink); }
.tile small { display: block; margin-top: .5rem; color: var(--ink-3);
              font: .77rem/1.5 var(--mono); }

.status { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
          background: var(--paper-2); }
.status .wrap { padding: .9rem 0; font: 400 .76rem/1.5 var(--mono);
                color: var(--ink-3); text-align: center; }
.status b { color: var(--green-ink); font-weight: 400; }

/* ──────────────────────────────────────────────────────────────── sections */
section { padding: 5rem 0; }
section + section { border-top: 1px solid var(--rule); }
.head { margin-bottom: 2.6rem; max-width: 46rem; }
h2 { margin: .9rem 0 0; font: 300 clamp(1.9rem, 4vw, 2.8rem)/1.06 var(--sans);
     letter-spacing: -.038em; }
/* the same colour, quieter: a marker line under the word rather than behind it,
   because a section heading that shouts as loud as the hero is a heading that
   has stopped being a heading */
h2 em { font-style: normal; color: var(--ink);
        background: linear-gradient(transparent 62%, var(--lime) 62%); }
.head p { margin: 1rem 0 0; color: var(--ink-2); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--paper); border: 1px solid var(--rule);
        border-radius: var(--r); padding: 1.6rem 1.5rem; box-shadow: var(--lift);
        display: flex; flex-direction: column;
        transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.card:hover { transform: translateY(-3px);
              box-shadow: 0 2px 6px rgba(13,20,16,.05),
                          0 26px 48px -26px rgba(13,20,16,.34); }
.card .n { font: 400 .66rem/1 var(--mono); letter-spacing: .2em;
           color: var(--green-ink); }
.card h3 { margin: 1rem 0 .5rem; font: 500 1.16rem/1.28 var(--sans);
           letter-spacing: -.015em; }
.card p { margin: 0; color: var(--ink-2); font-size: .94rem; }
.card pre { margin: auto 0 0; padding: 1.1rem 1rem 0; font: .76rem/1.7 var(--mono);
            color: var(--ink-3); white-space: pre-wrap; }
.card pre b { color: var(--green-ink); font-weight: 400; }

/* ────────────────────────────────────────────────────────────── the panels */
.panel { border: 1px solid var(--rule); border-radius: var(--r);
         background: var(--paper); overflow: hidden; box-shadow: var(--lift); }
.panel .cap { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center;
              padding: .85rem 1.2rem; border-bottom: 1px solid var(--rule);
              background: var(--paper-2); font: 400 .68rem/1 var(--mono);
              letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.panel .cap b { color: var(--ink); font-weight: 400; }
.panel .cap .right { margin-left: auto; }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 48rem;
        font: 400 .84rem/1.5 var(--mono); }
th, td { text-align: right; padding: .72rem 1rem; border-bottom: 1px solid var(--rule);
         white-space: nowrap; font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; padding-left: 1.2rem; }
th:last-child, td:last-child { padding-right: 1.2rem; }
th { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
     color: var(--ink-3); background: var(--paper-2); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .16s; }
tbody tr:hover td { background: var(--paper-2); }
td.addr { color: var(--ink-2); }
td .dim { color: var(--ink-3); }
td .on { color: var(--green-ink); }
.tag { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
       color: var(--ink-3); }
.tag.live { color: var(--green-ink); }
.tag.back { color: var(--red); }

/* ────────────────────────────────────────────────────────────────── lookup */
.look { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
        background: var(--paper); border: 1px solid var(--rule-2);
        border-radius: 999px; padding: .4rem .4rem .4rem 1.3rem; max-width: 46rem;
        box-shadow: var(--lift); transition: border-color .2s, box-shadow .2s; }
.look:focus-within { border-color: var(--green-ink);
                     box-shadow: 0 0 0 4px rgba(0,200,5,.1); }
.look input { flex: 1 1 17rem; font: 400 .92rem/1.4 var(--mono); padding: .6rem 0;
              border: 0; background: transparent; color: var(--ink); min-width: 0; }
.look input:focus { outline: 0; }
.look input::placeholder { color: var(--ink-3); }
.note { margin-top: 1rem; color: var(--ink-3); font-size: .86rem; max-width: 48em; }
.note a { color: var(--green-ink); border-bottom: 1px solid var(--rule-2); }
.note code { font: .9em var(--mono); color: var(--ink-2); }
.bad { color: var(--red); }

.slip { margin-top: 1.8rem; }
.figures { display: grid; grid-template-columns: repeat(4, 1fr);
           border-bottom: 1px solid var(--rule); }
@media (max-width: 780px) { .figures { grid-template-columns: repeat(2, 1fr); } }
.figures div { padding: 1.15rem 1.2rem; border-left: 1px solid var(--rule); }
.figures div:first-child { border-left: 0; }
.figures b { display: block; margin-top: .5rem; font: 400 1.4rem/1.1 var(--mono);
             font-variant-numeric: tabular-nums; }
.figures b.on { color: var(--green-ink); }

/* ───────────────────────────────────────────────────────────────── the flow */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 1000px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .flow { grid-template-columns: 1fr; } }
.node { background: var(--paper); border: 1px solid var(--rule);
        border-radius: var(--r); padding: 1.4rem 1.3rem; box-shadow: var(--lift);
        position: relative; }
.node span { font: 400 .64rem/1 var(--mono); letter-spacing: .18em;
             text-transform: uppercase; color: var(--green-ink); }
.node b { display: block; margin-top: .6rem; font: 500 1.04rem/1.25 var(--sans); }
.node p { margin: .4rem 0 0; color: var(--ink-2); font-size: .87rem; }
.node::after { content: '→'; position: absolute; right: -1.05rem; top: 50%;
               transform: translateY(-50%); color: var(--rule-2); z-index: 2; }
.node:last-child::after { content: none; }
@media (max-width: 1000px) { .node::after { content: none; } }

/* ──────────────────────────────────────────────────────────────────── misc */
ul.plain { list-style: none; padding: 0; margin: 2.4rem 0 0; display: grid; gap: 1rem; }
ul.plain li { padding-left: 1.6rem; position: relative; color: var(--ink-2);
              max-width: 48em; }
ul.plain li::before { content: '›'; position: absolute; left: .2em; top: -.02em;
                      color: var(--green-ink); }
ul.plain strong { color: var(--ink); font-weight: 500; }
code { font: .9em var(--mono); }

.close-out { text-align: center; padding: 5rem 0 5.6rem; }
.close-out img { width: 84px; height: 84px; }
.close-out h2 { max-width: 20ch; margin-inline: auto; }
.close-out p { margin: 1.1rem auto 0; color: var(--ink-2); max-width: 34em; }
.close-out .acts { justify-content: center; }

footer { border-top: 1px solid var(--rule); padding: 2.4rem 0 3.2rem;
         color: var(--ink-3); font: 400 .84rem/1.6 var(--sans);
         background: var(--paper-2); }
footer .row { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center;
              font: 400 .78rem/1 var(--mono); letter-spacing: .06em; }
footer .row a:hover { color: var(--green-ink); }
footer .fine { margin-top: 1.5rem; max-width: 48em; }

/* ──────────────────────────────────────────────────────── movement on scroll
 * Four variants, so a page of identical fades does not read as a template. Each
 * one moves in the direction the thing would have come from, and every one of
 * them stops the moment the reader has arrived. Nothing here moves a number.
 */
[data-in] { opacity: 0; transition: opacity .75s var(--ease),
                                    transform .75s var(--ease); will-change: transform; }
[data-in="up"]    { transform: translateY(26px); }
[data-in="left"]  { transform: translateX(-26px); }
[data-in="right"] { transform: translateX(26px); }
[data-in="scale"] { transform: scale(.965) translateY(18px); }
[data-in].seen { opacity: 1; transform: none; }

/* a group whose children arrive one after another rather than all at once */
[data-stagger] > * { opacity: 0; transform: translateY(22px);
                     transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-stagger].seen > * { opacity: 1; transform: none; }
[data-stagger].seen > *:nth-child(2) { transition-delay: .09s; }
[data-stagger].seen > *:nth-child(3) { transition-delay: .18s; }
[data-stagger].seen > *:nth-child(4) { transition-delay: .27s; }
[data-stagger].seen > *:nth-child(5) { transition-delay: .36s; }

/* the table fills in row by row as it comes into view */
tbody.arrive tr { opacity: 0; transform: translateY(10px);
                  transition: opacity .5s var(--ease), transform .5s var(--ease); }
tbody.arrive.seen tr { opacity: 1; transform: none; }
/* The CA-pending message is content, not a data row; keep it readable even
   while the surrounding section is entering the viewport. */
tbody.arrive.waiting tr { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-in], [data-stagger] > *, tbody.arrive tr {
    opacity: 1 !important; transform: none !important; transition: none !important; }
  .dot { animation: none; }
  .dock { transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ──────────────────────────────────────────────────────────────────── docs */
.doc { display: grid; grid-template-columns: 15rem 1fr; gap: 3.6rem;
       padding: 2.8rem 0 5rem; }
@media (max-width: 900px) { .doc { grid-template-columns: 1fr; gap: 2rem; } }
.toc { position: sticky; top: 5rem; align-self: start; font-size: .88rem; }
@media (max-width: 900px) { .toc { position: static; } }
.toc ol { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .5rem;
          counter-reset: t; }
.toc li { counter-increment: t; }
.toc a { color: var(--ink-2); }
.toc a:hover { color: var(--green-ink); }
.toc a::before { content: counter(t, decimal-leading-zero); margin-right: .7rem;
                 color: var(--ink-3); font: .72rem var(--mono); }
.doc article { max-width: 42rem; }
.doc h2 { margin: 3rem 0 0; font-size: clamp(1.45rem, 2.6vw, 1.9rem);
          padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.doc h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.doc h3 { margin: 1.9rem 0 .4rem; font: 500 1.02rem/1.35 var(--sans); }
.doc p { color: var(--ink-2); }
.doc strong { color: var(--ink); font-weight: 500; }
.doc pre { overflow-x: auto; background: var(--tape); color: var(--tape-ink);
           border-radius: 12px; padding: 1rem 1.15rem; font: .8rem/1.65 var(--mono);
           margin: 1.1rem 0; }
.doc pre b { color: var(--green); font-weight: 400; }
.doc table { min-width: 0; font-size: .82rem; }
.doc th, .doc td { white-space: normal; }
.doc td:first-child { color: var(--green-ink); white-space: nowrap; padding-left: 0; }
.doc th:first-child { padding-left: 0; }
.doc th { background: transparent; }

/* ------------------------------------------------------------------ the sum

   The page goes up before the coin does, and for that stretch every figure the
   engine can honestly print is zero. This is the part that is true anyway: one
   number times another one, done in the page, reading nothing. It is the only
   thing here a visitor can put their own numbers into. */
.calc { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 1px;
        background: var(--rule); border: 1px solid var(--rule);
        border-radius: var(--r); overflow: hidden; box-shadow: var(--lift); }
.calc > * { background: var(--paper); padding: 1.5rem 1.6rem; }

.calc-in label { display: block; font: 400 var(--lab)/1 var(--mono);
                 letter-spacing: .2em; text-transform: uppercase;
                 color: var(--ink-3); margin-bottom: .9rem; }
.calc-in input, .calc-in select {
  font: 400 1.5rem/1.1 var(--mono); color: var(--ink); background: transparent;
  border: 0; border-bottom: 2px solid var(--rule-2); padding: 0 0 .45rem;
  width: 100%; border-radius: 0; -webkit-appearance: none; appearance: none;
  transition: border-color .18s var(--ease); }
.calc-in input:focus, .calc-in select:focus {
  outline: 0; border-bottom-color: var(--ink); }
.calc-in .pair { display: flex; gap: .9rem; align-items: flex-end; }
.calc-in .pair input { flex: 0 1 5.5rem; }
.calc-in .pair select { flex: 1 1 auto; font-size: 1rem; color: var(--ink-2);
                        cursor: pointer; }

.calc-out { background: var(--lime); }
.calc-out .lab { color: rgba(13,20,16,.62); }
.calc-out b { display: block; margin: .85rem 0 .3rem; font: 400 2rem/1 var(--mono);
              letter-spacing: -.01em; color: var(--ink);
              font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calc-out .unit { font: 400 var(--lab)/1 var(--mono); letter-spacing: .16em;
                  text-transform: uppercase; color: rgba(13,20,16,.62); }

.calc-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
              margin-top: 1.6rem; }
.calc-notes .lab { display: block; margin-bottom: .55rem; }
.calc-notes b { font: 400 1.05rem/1.2 var(--mono); color: var(--ink);
                font-variant-numeric: tabular-nums; }
.calc-notes p { margin: .5rem 0 0; color: var(--ink-2); font-size: .875rem;
                line-height: 1.62; }

@media (max-width: 900px) {
  .calc { grid-template-columns: 1fr; }
  .calc-notes { grid-template-columns: 1fr; gap: 1.15rem; }
}

/* ------------------------------------------------------- nothing there yet

   An empty table is the moment a launch page is most tempted to invent a row.
   These say what is missing and why, in the same voice as everything else, and
   they take up the room the data will take so the page does not jump when it
   arrives. */
td.hollow { padding: 3.2rem 1.4rem !important; text-align: center; }
td.hollow.waiting-state {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(214,255,52,.12), transparent 13rem),
    linear-gradient(180deg, rgba(247,249,242,.7), transparent 75%);
}
td.hollow .chip { display: inline-block; background: var(--lime); color: var(--ink);
                  font: 400 var(--lab)/1 var(--mono); letter-spacing: .18em;
                  text-transform: uppercase; padding: .52em .78em .46em;
                  border-radius: 5px; }
td.hollow b { display: block; margin: 1rem 0 .4rem; font: 400 1.15rem/1.3 var(--sans);
              color: var(--ink); letter-spacing: -.01em; }
/* a colspan cell in an auto-layout table sizes to its content, so this needs a
   width rather than a max-width or the sentence runs off the side of the table */
td.hollow span.why { display: block; width: 34rem; max-width: 100%;
                     margin-inline: auto; white-space: normal;
                     color: var(--ink-2); font-size: .875rem; line-height: 1.62; }

/* the strip, before there is an address to put in it */
.strip .soon { color: var(--ink-2); }
.strip .soon b { color: var(--ink); font-weight: 400; }

/* ═══════════════════════════════════════════════════════════════════ the hero

   Everything else on this page moves when you scroll to it. The hero cannot —
   it is already there when the page opens — so it has its own entrance, and it
   runs once.

   The order is the order somebody reads in: the line that says where this is,
   then the headline a word at a time, then the marker drawn under the unit, then
   the sentence, then the two things you can do, then the tape. The marker takes
   exactly one second to draw, which is the only piece of timing on the page that
   is also a statement about the mechanism.

   None of it runs for a reader who has asked for less motion: the block at the
   bottom hands every element its finished state instead. */

.hero { position: relative; overflow: hidden; }

/* one tick a second, along the foot */
.hero .ticks {
  position: absolute; left: 0; right: 0; bottom: 0; height: 13px;
  /* two rulings, one on top of the other: a short tick a second and a tall one
     every fifth, which is how a ruler tells you where you are without numbers */
  background:
    repeating-linear-gradient(to right, #c0cfc4 0 1px, transparent 1px 12px)
      bottom left / 100% 7px no-repeat,
    repeating-linear-gradient(to right, var(--ink-3) 0 1px, transparent 1px 60px)
      bottom left / 100% 13px no-repeat;
  pointer-events: none;
}

/* the headline, one word at a time */
h1 .w { display: inline-block; }
/* The marker is a gradient rather than a background colour, because a colour
   cannot be drawn and a gradient can: `background-size` goes from nothing to
   full width and the block wipes in left to right. The colour above has to be
   cleared or it paints the whole box regardless of the size. */
h1 em { display: inline; background-color: transparent;
        background-image: linear-gradient(var(--lime), var(--lime));
        background-repeat: no-repeat; background-position: 0 0;
        background-size: 100% 100%; }

.hero-in .hero .ticks { animation: ticks 1.5s var(--ease) .15s both; }
.hero-in h1 .w { animation: word .72s var(--ease) both;
                 animation-delay: calc(.18s + var(--i) * .075s); }
.hero-in h1 em { animation: marker 1s cubic-bezier(.4,.1,.2,1) both;
                 animation-delay: var(--mark, .8s); }
.hero-in .lede-col .lab { animation: rise .7s var(--ease) .05s both; }
.hero-in .hero .lede { animation: rise .8s var(--ease) var(--after, 1.1s) both; }
.hero-in .hero .acts { animation: rise .8s var(--ease) calc(var(--after, 1.1s) + .1s) both; }
.hero-in .hero-tape { animation: panel .95s var(--ease) .34s both; }

@keyframes word  { from { opacity: 0; transform: translateY(.46em) }
                   to   { opacity: 1; transform: none } }
@keyframes rise  { from { opacity: 0; transform: translateY(14px) }
                   to   { opacity: 1; transform: none } }
@keyframes panel { from { opacity: 0; transform: translateX(34px) scale(.985) }
                   to   { opacity: 1; transform: none } }
@keyframes ticks { from { clip-path: inset(0 100% 0 0) }
                   to   { clip-path: inset(0 0 0 0) } }
/* drawn left to right, and only after the word it sits under has landed */
@keyframes marker { from { background-size: 0% 100% } to { background-size: 100% 100% } }

@media (prefers-reduced-motion: reduce) {
  .hero-in .hero .ticks, .hero-in h1 .w, .hero-in h1 em,
  .hero-in .lede-col .lab, .hero-in .hero .lede,
  .hero-in .hero .acts, .hero-in .hero-tape { animation: none; }
}