/*
  pinnacle feed: an integration drawn as a sequence diagram.
  Two lifelines, your code and the feed, run the length of every page. Requests are
  solid arrows with filled heads, returns are dashed with open heads, pushes are
  solid with open heads, the way a developer sketches a protocol on a whiteboard.
*/

@font-face {
  font-family: "Martian Mono";
  src: url("/assets/fonts/martian-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
}

@font-face {
  font-family: "Plex";
  src: url("/assets/fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Plex";
  src: url("/assets/fonts/ibm-plex-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --paper: #f3f4f0;
  --sheet: #ffffff;
  --ink: #14181b;
  --ink-2: #4e575e;
  --signal: #c7361a;
  --signal-deep: #a8331a;
  --string: #2b6150;
  --hair: rgba(20, 24, 27, 0.2);
  --mid: rgba(20, 24, 27, 0.5);

  --mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sans: "Plex", "Segoe UI", sans-serif;

  /* three fixed sizes, one leading each; headings, body and lede are fluid */
  --fs-xs: 0.75rem;
  --fs-s: 0.875rem;
  --fs-l: 1.25rem;
  --lh-xs: 1.5;
  --lh-s: 1.6;
  --lh-l: 1.3;

  /* spacing: 4 8 12 16 24 32 48 64 */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;

  --line: 2px;
  --thin: 1px;

  --ll: 4rem;
  --lr: 4rem;
  --lane-pad: 2rem;
  --seq-max: 74rem;
  color-scheme: light;
}

html {
  background: var(--paper);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

:is(p, li, td, dd) a {
  text-decoration-line: underline;
  text-decoration-color: var(--signal);
}

:is(p, li, td, dd) a:hover {
  color: var(--signal-deep);
}

code,
pre,
kbd,
samp {
  font-family: var(--mono);
  font-stretch: 87.5%;
}

:not(pre) > code {
  font-size: 0.88em;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

h1,
h2,
h3 {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(2rem, 1.25rem + 2.1vw, 3.05rem);
  line-height: 1.04;
  font-stretch: 100%;
}

h2 {
  font-size: clamp(1.35rem, 1.05rem + 1vw, 1.9rem);
  line-height: 1.18;
  font-stretch: 87.5%;
}

h3 {
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  font-weight: 600;
  font-stretch: 87.5%;
  letter-spacing: 0;
}

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

.skip-link {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s2) var(--s4);
  font-family: var(--mono);
  font-size: var(--fs-s);
  line-height: var(--lh-s);
}

/* ---------- masthead ---------- */

.site-head {
  justify-content: space-between;
  padding-block: var(--s4) var(--s3);
  font-family: var(--mono);
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  font-stretch: 87.5%;
  border-bottom: var(--line) solid var(--ink);
  --v-cluster-gap: var(--s2) var(--s5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-l);
  line-height: var(--lh-l);
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.brand svg {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
}

.site-nav {
  --v-cluster-gap: var(--s1) var(--s5);
}

.site-nav a {
  text-decoration: none;
  padding-block: var(--s1);
  border-bottom: var(--line) solid transparent;
}

.site-nav a[aria-current="page"] {
  border-bottom-color: var(--signal);
}

.site-nav .nav-key {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s2) var(--s3);
  border-bottom: 0;
}

.site-nav .nav-key:hover {
  background: var(--signal-deep);
}

/* ---------- the diagram canvas ---------- */

.seq {
  position: relative;
  isolation: isolate;
  inline-size: min(calc(100% - (2 * var(--v-gutter))), var(--seq-max));
  margin-inline: auto;
  padding-block: 0 var(--v-space-4);
}

.seq::before,
.seq::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3.25rem;
  bottom: 0;
  border-left: 2px dashed var(--mid);
}

.seq::before {
  left: calc(var(--ll) - 1px);
}

.seq::after {
  right: calc(var(--lr) - 1px);
}

.heads {
  display: flex;
  justify-content: space-between;
  padding-top: var(--s5);
  margin-inline: calc(var(--ll) - 4rem) calc(var(--lr) - 4rem);
}

.head {
  inline-size: 8rem;
  white-space: nowrap;
  padding: var(--s1) var(--s2);
  background: var(--sheet);
  border: var(--line) solid var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-stretch: 87.5%;
  font-weight: 600;
  text-align: center;
}

.head small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--ink-2);
}

.lane {
  padding-inline: calc(var(--ll) + var(--lane-pad)) calc(var(--lr) + var(--lane-pad));
}

/* A movement: a note on one side, the subject material on the other. */
.act {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--v-space-2) var(--v-space-3);
  align-items: start;
  padding-block: var(--v-space-2);
}

.act--flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.act--flip > .note {
  order: 2;
}

.act--wide {
  grid-template-columns: minmax(0, 1fr);
}

.note > * + * {
  margin-block-start: var(--s4);
}

.note p {
  margin: 0;
  max-inline-size: 60ch;
}

.note h2 + p {
  margin-block-start: var(--s3);
}

.kicker {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-stretch: 87.5%;
  font-weight: 500;
  color: var(--ink-2);
  text-transform: lowercase;
}

.kicker b {
  color: var(--signal);
  font-weight: 600;
}

/* ---------- messages ---------- */

.msg {
  position: relative;
  margin-inline: var(--ll) var(--lr);
  padding-block: var(--s3) 0;
  font-family: var(--mono);
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  font-stretch: 87.5%;
}

.msg__label {
  max-inline-size: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s3);
  padding-inline: var(--s4);
  margin: 0 0 var(--s1);
}

.msg__label strong {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.msg__label .verb {
  color: var(--sheet);
  background: var(--ink);
  padding: 0 var(--s2);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
}

.msg__label .status {
  color: var(--signal-deep);
  font-weight: 600;
}

.msg__label .aside {
  color: var(--ink-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
}

.msg__line {
  position: relative;
  height: var(--s3);
}

.msg__line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 6px;
  top: 50%;
  border-top: 2px solid var(--ink);
  translate: 0 -1px;
}

.msg__line::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 12px;
  height: 12px;
  translate: 0 -50%;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* return: dashed, open head, pointing at your code */
.msg--back .msg__label,
.msg--push .msg__label {
  justify-content: flex-end;
  text-align: right;
}

.msg--back .msg__line::before {
  left: 2px;
  right: 0;
  border-top-style: dashed;
}

.msg--back .msg__line::after,
.msg--push .msg__line::after {
  left: 3px;
  right: auto;
  width: 10px;
  height: 10px;
  background: none;
  clip-path: none;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  rotate: 45deg;
}

/* push: solid, open head, in the signal colour */
.msg--push .msg__line::before {
  left: 2px;
  right: 0;
  border-top-color: var(--signal);
}

.msg--push .msg__line::after {
  border-color: var(--signal);
}

/* your reply on an open stream: solid, open head, pointing at the feed */
.msg--reply .msg__line::after {
  right: 3px;
  width: 10px;
  height: 10px;
  background: none;
  clip-path: none;
  border-right: 2px solid var(--ink);
  border-top: 2px solid var(--ink);
  rotate: 45deg;
}

.msg__detail {
  max-inline-size: none;
  margin: var(--s1) 0 0;
  padding-inline: var(--s4);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
}

.msg__detail code {
  font-size: var(--fs-xs);
  color: var(--ink);
}

/* a call: request and return bracket an activation bar on the feed lifeline */
.call {
  position: relative;
}

.call > .msg {
  margin-inline-end: calc(var(--lr) + 6px);
}

.activation {
  position: absolute;
  right: calc(var(--lr) - 7px);
  top: 2.25rem;
  bottom: var(--s2);
  width: 14px;
  background: var(--sheet);
  border: var(--line) solid var(--ink);
}

/* ---------- payloads: the carrier material ---------- */

.payload {
  margin: 0;
  background: var(--sheet);
  border: var(--line) solid var(--ink);
}

.payload figcaption,
.code__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  max-inline-size: none;
  padding: var(--s2) var(--s4);
  border-bottom: var(--thin) solid var(--hair);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-stretch: 87.5%;
  color: var(--ink-2);
}

.payload pre,
.code pre {
  margin: 0;
  padding: var(--s4);
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  font-stretch: 87.5%;
  overflow-x: auto;
  tab-size: 2;
}

pre code {
  font-size: inherit;
  font-stretch: inherit;
}

.k {
  color: var(--ink);
}

.s {
  color: var(--string);
}

.n {
  color: var(--signal);
  font-weight: 600;
}

.c {
  color: var(--ink-2);
}

.p {
  color: var(--ink-2);
}

.hl {
  color: var(--signal-deep);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ---------- combined fragments: loop / alt ---------- */

.frag {
  --frag-inset: calc(var(--s5) - var(--line));
  position: relative;
  margin-inline: calc(var(--ll) - var(--s5)) calc(var(--lr) - var(--s5));
  margin-block: var(--v-space-2);
  padding: var(--s7) 0 var(--s4);
  border: var(--line) solid var(--ink);
}

.frag__tag {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0;
  max-inline-size: none;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-stretch: 87.5%;
}

.frag__tag b {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s1) var(--s5) var(--s1) var(--s3);
  font-weight: 600;
  clip-path: polygon(0 0, 100% 0, 100% 55%, calc(100% - 12px) 100%, 0 100%);
}

.frag__tag span {
  color: var(--ink-2);
}

.frag .msg {
  margin-inline: var(--frag-inset);
}

.frag .call > .msg {
  margin-inline-end: calc(var(--frag-inset) + 6px);
}

.frag .activation {
  right: calc(var(--frag-inset) - 7px);
}

.frag--tight {
  margin-block: 0;
}

.frag .lane {
  padding-inline: calc(var(--s5) + var(--lane-pad));
}

.frag__split {
  margin-block: var(--s4) 0;
  padding-top: var(--s2);
  border-top: var(--line) dashed var(--ink);
}

.frag__guard {
  display: block;
  padding-inline: var(--s3);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-stretch: 87.5%;
  color: var(--ink-2);
}

/* ---------- actions ---------- */

.send {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  font-weight: 600;
  font-stretch: 87.5%;
  text-decoration: none;
  border: var(--line) solid var(--ink);
}

.send svg {
  width: 2.5rem;
  height: 0.75rem;
  flex: none;
  transition: translate 160ms ease-out;
}

.send:hover {
  background: var(--signal-deep);
  border-color: var(--signal-deep);
}

.send:hover svg {
  translate: var(--s1) 0;
}

.send--ghost {
  background: var(--sheet);
  color: var(--ink);
}

.send--ghost:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.terms {
  margin: 0;
  max-inline-size: 60ch;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-stretch: 87.5%;
  color: var(--ink-2);
}

.terms b {
  color: var(--ink);
  font-weight: 600;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
}

/* ---------- opening ---------- */

.opening {
  padding-block: var(--v-space-3) var(--v-space-2);
}

.opening__intro .kicker {
  margin-bottom: var(--s4);
}

.opening__intro h1 {
  max-inline-size: 16em;
}

.lede {
  margin: 0;
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  max-inline-size: 46ch;
}

.exchange {
  margin-top: var(--v-space-3);
}

.exchange__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--v-space-2) var(--v-space-3);
  align-items: start;
  padding-top: var(--s4);
}

.exchange__cta {
  display: grid;
  gap: var(--s4);
  align-content: start;
}

.exchange__cta .send {
  justify-self: start;
}

.exchange__cta .lede {
  margin-bottom: var(--s2);
}

/* ---------- facts, tables ---------- */

.grid-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  background: var(--sheet);
  border: var(--line) solid var(--ink);
}

.grid-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-stretch: 87.5%;
  color: var(--ink-2);
  padding: 0 0 var(--s2);
}

.grid-table th,
.grid-table td {
  padding: var(--s2) var(--s3);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--thin) solid var(--hair);
}

.grid-table thead th {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-stretch: 87.5%;
  font-weight: 600;
  color: var(--ink-2);
  border-bottom: var(--line) solid var(--ink);
}

.grid-table .num {
  font-family: var(--mono);
  font-stretch: 87.5%;
  text-align: right;
  white-space: nowrap;
}

.grid-table tbody th {
  font-weight: 600;
}

.sports {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--sheet);
  border: var(--line) solid var(--ink);
}

.sports li {
  display: grid;
  grid-template-columns: var(--s6) 1fr;
  align-items: baseline;
  column-gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-bottom: var(--thin) solid var(--hair);
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  max-inline-size: none;
}

.sports li b {
  grid-row: span 2;
  font-family: var(--mono);
  font-size: var(--fs-l);
  line-height: var(--lh-l);
  font-weight: 600;
  font-stretch: 87.5%;
  color: var(--signal);
}

.sports li small {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-stretch: 87.5%;
  color: var(--ink-2);
}

.limits {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--line) solid var(--ink);
}

.limits li {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: var(--thin) solid var(--hair);
  max-inline-size: none;
}

.limits li > span:last-child {
  max-inline-size: 64ch;
}

.limits .no {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-stretch: 87.5%;
  font-weight: 600;
  color: var(--signal-deep);
  padding-top: var(--s1);
}

/* ---------- rate lanes: plans drawn as request density ---------- */

.rates {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--line) solid var(--ink);
}

.rate {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr) 8rem;
  gap: var(--s2) var(--s5);
  align-items: center;
  padding: var(--s4) 0;
  border-bottom: var(--thin) solid var(--hair);
  max-inline-size: none;
}

.rate__name {
  margin: 0;
  font-family: var(--mono);
  font-weight: 600;
  font-stretch: 87.5%;
  font-size: var(--fs-s);
  line-height: var(--lh-s);
}

.rate__name small {
  display: block;
  font-weight: 400;
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--ink-2);
}

.rate__price {
  margin: 0;
  font-family: var(--mono);
  font-stretch: 87.5%;
  text-align: right;
  font-size: var(--fs-l);
  line-height: var(--lh-l);
  font-weight: 600;
}

.rate__price small {
  display: block;
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 400;
  color: var(--ink-2);
}

.lanes {
  display: grid;
  gap: var(--s1);
}

.lanebar {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  align-items: center;
  gap: var(--s3);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-stretch: 87.5%;
  color: var(--ink-2);
}

.ticks {
  --per-window: 3.3333;
  height: var(--s4);
  border-inline: var(--line) solid var(--ink);
  background-image: linear-gradient(90deg, var(--ink) 0 2px, transparent 2px);
  background-size: calc(100% / var(--per-window)) 100%;
  background-repeat: repeat-x;
}

.ticks--dense {
  --per-window: 100;
  background-image: linear-gradient(90deg, var(--ink) 0 1px, transparent 1px);
}

.ticks--denser {
  --per-window: 300;
  background-image: linear-gradient(90deg, var(--ink) 0 1px, transparent 1px);
}

.ticks--push {
  background-image:
    linear-gradient(90deg, var(--signal) 0 3px, transparent 3px),
    linear-gradient(90deg, var(--signal) 0 3px, transparent 3px),
    linear-gradient(90deg, var(--signal) 0 3px, transparent 3px);
  background-size: 3px 100%;
  background-position: 9% 0, 41% 0, 83% 0;
  background-repeat: no-repeat;
}

.ticks--none {
  border-color: var(--hair);
  background: linear-gradient(var(--hair), var(--hair)) center / 100% 1px no-repeat;
}

.ticks--addon {
  border-color: var(--mid);
  background-image: repeating-linear-gradient(135deg, var(--mid) 0 1px, transparent 1px 6px);
  background-size: auto;
  background-repeat: repeat;
}

.rate-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  max-inline-size: none;
  margin: var(--s4) 0 0;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-stretch: 87.5%;
  color: var(--ink-2);
}

/* ---------- term switch (pricing) ---------- */

.term {
  display: inline-flex;
  gap: var(--thin);
  margin: 0;
  padding: 0;
  background: var(--ink);
  border: var(--line) solid var(--ink);
  font-family: var(--mono);
  font-stretch: 87.5%;
  font-size: var(--fs-s);
  line-height: var(--lh-s);
}

.term legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.term [role="radio"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s2) var(--s4);
  border: 0;
  border-radius: 0;
  background: var(--sheet);
  color: inherit;
  font: inherit;
  font-stretch: inherit;
  cursor: pointer;
}

.term [role="radio"][aria-checked="true"] {
  background: var(--ink);
  color: var(--paper);
}

.term [role="radio"]:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
  z-index: 1;
}

/* ---------- code blocks on companion routes ---------- */

.code {
  margin: 0;
  background: var(--sheet);
  border: var(--line) solid var(--ink);
}

.copy {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--s6);
  padding: var(--s1) var(--s3);
  border: var(--line) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-stretch: 87.5%;
  font-weight: 600;
  cursor: pointer;
}

.copy:hover {
  background: var(--ink);
  color: var(--paper);
}

.copy[data-state="done"] {
  background: var(--paper);
  color: var(--signal-deep);
  border-color: var(--signal-deep);
}

.copy-status {
  margin: 0;
  padding: var(--s2) var(--s4);
  border-top: var(--thin) solid var(--hair);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-stretch: 87.5%;
  color: var(--signal-deep);
  max-inline-size: none;
}

.steps {
  counter-reset: step;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--line) solid var(--ink);
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: var(--s7) minmax(0, 1fr);
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: var(--thin) solid var(--hair);
  max-inline-size: none;
}

.steps li > span {
  max-inline-size: 60ch;
}

/* keep the list's heavy top rule from reading as an underline on the heading */
.note > .steps {
  margin-block-start: var(--s5);
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-stretch: 87.5%;
  font-weight: 600;
  color: var(--signal);
}

/* sheet preview (Google Sheets route) */

.sheetgrid {
  inline-size: 100%;
  border-collapse: collapse;
  background: var(--sheet);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-variant-numeric: tabular-nums;
  border: var(--line) solid var(--ink);
}

.sheetgrid th,
.sheetgrid td {
  border: var(--thin) solid var(--hair);
  padding: var(--s1) var(--s2);
  text-align: left;
  white-space: nowrap;
}

.sheetgrid thead th,
.sheetgrid tbody th {
  background: var(--paper);
  color: var(--ink-2);
  font-weight: 500;
  text-align: center;
}

.sheetgrid tbody th {
  inline-size: var(--s6);
}

.sheetgrid .hdr td {
  font-weight: 600;
}

.sheetgrid td.num {
  text-align: right;
  color: var(--signal-deep);
  font-weight: 600;
}

/* timeline (official API route) */

.dates {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: var(--line) solid var(--ink);
}

.dates li {
  position: relative;
  padding: 0 0 var(--s5) var(--s5);
  max-inline-size: 64ch;
}

.dates li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
}

.dates li.now::before {
  background: var(--signal);
  border-color: var(--signal);
}

.dates .when {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-stretch: 87.5%;
  font-weight: 600;
  color: var(--signal-deep);
}

/* ---------- closing ---------- */

.closing {
  padding-block: var(--v-space-3) 0;
}

.closing__body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--v-space-2) var(--v-space-3);
  align-items: end;
  padding: var(--v-space-2) calc(var(--lr) + var(--lane-pad)) 0 calc(var(--ll) + var(--lane-pad));
}

.closing__body h2 {
  font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.75rem);
}

.closing__body p {
  margin: var(--s3) 0 0;
  max-inline-size: 60ch;
}

.endcap {
  display: flex;
  justify-content: space-between;
  margin-inline: calc(var(--ll) - 8px) calc(var(--lr) - 8px);
  margin-top: var(--v-space-3);
}

.endcap span {
  width: var(--s4);
  height: var(--s4);
  background: var(--ink);
}

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

.site-foot {
  padding-block: var(--v-space-3);
  border-top: var(--line) solid var(--ink);
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  color: var(--ink-2);
}

.site-foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: var(--v-space-2) var(--v-space-3);
}

.site-foot h2 {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: var(--s2);
}

.site-foot ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-foot li + li {
  margin-top: var(--s1);
}

.site-foot p {
  margin: 0;
  max-inline-size: 64ch;
}

.site-foot p + p {
  margin-top: var(--s3);
}

.site-foot a {
  text-decoration-line: underline;
  text-decoration-color: var(--mid);
  text-decoration-thickness: 1px;
}

.site-foot a:hover {
  color: var(--ink);
  text-decoration-color: var(--signal);
}

/* ---------- page heads on companion routes ---------- */

.pagehead {
  padding-block: var(--v-space-3) var(--v-space-2);
}

.pagehead .lede {
  margin-top: var(--s4);
  max-inline-size: 52ch;
}

.pagehead .kicker {
  margin-bottom: var(--s4);
}

.qa {
  margin: 0;
  border-top: var(--line) solid var(--ink);
}

.qa > div {
  padding: var(--s3) 0 var(--s4);
  border-bottom: var(--thin) solid var(--hair);
}

.qa dt {
  font-family: var(--mono);
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  font-weight: 600;
  font-stretch: 87.5%;
}

.qa dd {
  margin: var(--s1) 0 0;
}

.qa dd p {
  margin: 0;
  max-inline-size: 64ch;
}

/* ---------- pricing board ---------- */

.plan-board {
  margin-top: var(--v-space-2);
}

.plan-board__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  margin-bottom: var(--s4);
}

.rates--board .rate {
  grid-template-columns: 10rem minmax(0, 1fr) 11rem max-content;
}

.rate__price > span {
  display: inline;
}

.rate__price > span.na {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 400;
  color: var(--ink-2);
}

.pick {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s2) var(--s3);
  border: var(--line) solid var(--ink);
  background: var(--sheet);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  font-stretch: 87.5%;
  text-decoration: none;
  text-align: center;
}

.pick:hover,
.pick--key {
  background: var(--ink);
  color: var(--paper);
}

.pick--key:hover {
  background: var(--signal-deep);
  border-color: var(--signal-deep);
}

/* term switch: the chosen term (kept in a hidden input) decides which figure shows */
.plan-board .t3,
.plan-board .t6,
.rate-legend .t3,
.rate-legend .t6 {
  display: none;
}

main:has(#term[value="3"]) :is(.plan-board, .rate-legend) :is(.t1, .t6),
main:has(#term[value="6"]) :is(.plan-board, .rate-legend) :is(.t1, .t3) {
  display: none;
}

main:has(#term[value="3"]) :is(.plan-board, .rate-legend) :is(span, b).t3,
main:has(#term[value="6"]) :is(.plan-board, .rate-legend) :is(span, b).t6 {
  display: inline;
}

main:has(#term[value="3"]) .rate__price small.t3,
main:has(#term[value="6"]) .rate__price small.t6 {
  display: block;
}

.frag__title {
  margin-bottom: var(--s4);
}

.fit {
  margin: 0;
  border-top: var(--line) dashed var(--ink);
}

.fit > div {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s2) var(--s6);
  padding: var(--s4) calc(var(--s5) + var(--lane-pad));
}

.fit > div + div {
  border-top: var(--line) dashed var(--ink);
}

.fit dt {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-stretch: 87.5%;
  color: var(--ink-2);
}

.fit dd {
  margin: 0;
  max-inline-size: 60ch;
}

/* ---------- mid widths: one column inside the lane ---------- */

@media (max-width: 68rem) {
  .act,
  .act--flip,
  .exchange__grid,
  .closing__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .act--flip > .note {
    order: 0;
  }

  .rates--board .rate {
    grid-template-columns: 10rem minmax(0, 1fr) 9rem;
  }

  .rates--board .pick {
    grid-column: 3;
  }
}

/* ---------- phone: lifelines move to the screen edges, notes sit over both ---------- */

@media (max-width: 43rem) {
  :root {
    --ll: 0.5rem;
    --lr: 0.5rem;
    --lane-pad: 0px;
  }

  body {
    font-size: 1rem;
  }

  .seq {
    inline-size: 100%;
  }

  .site-head {
    --v-cluster-gap: var(--s2) var(--s4);
  }

  .site-nav {
    --v-cluster-gap: 0 var(--s4);
  }

  .site-nav .nav-key {
    display: none;
  }

  .heads {
    margin-inline: 0;
    padding-top: var(--s4);
  }

  .head {
    inline-size: auto;
    padding: var(--s1) var(--s2);
  }

  .head small {
    display: none;
  }

  .lane {
    padding-inline: var(--s5);
  }

  .act > :is(.payload, .code, .grid-wrap, .sports, .limits, .rates, figure),
  .exchange__grid > :is(.payload, .code, .sheet, figure) {
    margin-inline: calc(var(--s3) * -1);
  }

  .msg {
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
  }

  .msg__label,
  .msg__detail {
    padding-inline: var(--s3);
  }

  .payload pre,
  .code pre {
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-stretch: 75%;
    padding: var(--s3);
  }

  .payload figcaption,
  .code__bar {
    padding-inline: var(--s3) var(--s2);
  }

  .frag {
    --frag-inset: calc(var(--ll) - var(--line));
    margin-inline: 0;
  }

  .frag .lane {
    padding-inline: calc(var(--s5) - var(--line));
  }

  .rate,
  .rates--board .rate {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .rate .lanes {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .rates--board .pick {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .lanebar {
    grid-template-columns: var(--s8) minmax(0, 1fr);
  }

  .limits li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s1);
  }

  .sports {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .closing__body {
    padding-inline: var(--s5);
  }

  .site-foot__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .site-foot__grid > :first-child {
    grid-column: 1 / -1;
  }

  .send {
    inline-size: 100%;
  }

  .grid-table th,
  .grid-table td {
    padding: var(--s2);
  }

  .fit > div {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: calc(var(--s5) - var(--line));
  }

  .plan-board__top .term {
    display: flex;
    inline-size: 100%;
  }

  .term [role="radio"] {
    flex: 1;
    padding-inline: var(--s2);
  }
}

.grid-table tbody th small {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-stretch: 87.5%;
  font-weight: 400;
  color: var(--ink-2);
}

.table-note {
  margin-bottom: var(--s2);
}

/* sheet preview */

.sheet {
  margin: 0;
  background: var(--sheet);
  border: var(--line) solid var(--ink);
}

.sheet__scroll {
  overflow-x: auto;
}

.sheet .sheetgrid {
  border: 0;
  font-size: var(--fs-s);
  line-height: var(--lh-s);
}

.sheetgrid td.more {
  color: var(--ink-2);
  text-align: center;
}

.table-note--after {
  margin-top: var(--s2);
}

@media (max-width: 43rem) {
  .sheetgrid th,
  .sheetgrid td {
    white-space: normal;
    padding: var(--s1);
  }

  .sheetgrid {
    font-size: var(--fs-xs);
  }
}

/* a request that no longer reaches its lifeline */
.msg--refused .msg__line::before {
  right: 36%;
  border-top-style: dotted;
}

.msg--refused .msg__line::after {
  right: calc(36% - 8px);
  width: 16px;
  height: 16px;
  background: var(--signal);
  clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%);
}

.msg--refused .msg__label strong {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--signal);
}

.timeline__title {
  margin-bottom: var(--s4);
}

.compare td {
  max-inline-size: none;
}

.compare tbody tr > td:last-child {
  font-weight: 600;
}

.idmap {
  max-inline-size: 26rem;
}

@media (max-width: 43rem) {
  .wide {
    display: none;
  }
}

.exchange__note {
  margin-top: var(--s4);
}

@media (max-width: 43rem) {
  .exchange__grid:has(.exchange__cta--split) {
    display: flex;
    flex-direction: column;
  }

  .exchange__cta--split {
    display: contents;
  }

  .exchange__cta--split > .lede {
    order: 1;
  }

  .exchange__cta--split > .send {
    order: 2;
  }

  .exchange__grid:has(.exchange__cta--split) > .code {
    order: 3;
  }

  .exchange__cta--split > .exchange__note {
    order: 4;
  }
}

/* ---------- focus, everywhere ---------- */

:is(.send, .pick, .copy, .nav-key, .site-nav a, .brand):focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}

/* ---------- CTA transitions ---------- */

.send,
.pick,
.copy,
.nav-key {
  transition: background-color 160ms ease-out, color 160ms ease-out,
    border-color 160ms ease-out;
}

/* ---------- figure polish: a sheet of paper on the desk ---------- */

.payload,
.code,
.sheet,
.grid-table {
  box-shadow: 0 2px 0 rgba(20, 24, 27, 0.08);
}

.payload pre,
.code pre {
  line-height: 1.65;
}

.payload figcaption,
.code__bar {
  letter-spacing: 0.01em;
}

/* ---------- reveal on scroll: diagram movements surface as you reach them ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal-on .movement,
  .reveal-on .closing {
    opacity: 0;
    translate: 0 1.25rem;
    transition: opacity 480ms ease-out, translate 480ms ease-out;
  }

  .reveal-on .movement.is-in,
  .reveal-on .closing.is-in {
    opacity: 1;
    translate: 0 0;
  }
}

/* ---------- live frames: the wire, fed by the hub ---------- */

.wire {
  padding-block: var(--v-space-2) 0;
}

.wire[hidden] {
  display: none;
}

.payload--wire {
  border-color: var(--signal);
}

.wire__rate {
  color: var(--signal-deep);
  font-weight: 600;
}

.wire__note {
  margin: 0;
  max-inline-size: none;
  padding: var(--s3) var(--s4);
  border-bottom: var(--thin) solid var(--hair);
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  color: var(--ink-2);
}

.spinner {
  --spinner-ink: var(--signal);
  --spinner-track: var(--hair);
}

.wire__status .spinner {
  vertical-align: -0.2em;
}

.wire__status {
  margin: 0;
  padding: var(--s3) var(--s4);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-stretch: 87.5%;
  color: var(--signal-deep);
}

.wire__list {
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding: var(--s3) var(--s4) var(--s4);
  list-style: none;
}

.wire__list:empty {
  padding: 0;
}

.wire__frame {
  margin: 0;
  max-inline-size: none;
  border: var(--thin) solid var(--hair);
  background: var(--paper);
}

.wire__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s1) var(--s3);
  margin: 0;
  padding: var(--s1) var(--s3);
  border-bottom: var(--thin) solid var(--hair);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-stretch: 87.5%;
  color: var(--ink-2);
}

.wire__meta time {
  color: var(--signal-deep);
  font-weight: 600;
}

.wire__json {
  margin: 0;
  padding: var(--s2) var(--s3);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-stretch: 87.5%;
  overflow-x: auto;
  tab-size: 1;
}

.wire__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s4);
  padding: var(--s3) var(--s4);
  border-top: var(--line) solid var(--ink);
}

.send--small {
  padding: var(--s2) var(--s4);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
}

@media (max-width: 43rem) {
  .wire__json {
    font-stretch: 75%;
  }

  .wire__cta {
    justify-content: stretch;
  }
}

/* underline cleanup: keep highlights, drop link underlines in footers and emphasis marks */
.hl{text-decoration:none}
.site-foot a{text-decoration-line:none}
.site-foot a:hover{text-decoration:none}

/* no-wrap actions */
.pick,.send,.copy,.nav-key{white-space:nowrap}