/* Webill Green public site.
   Grammar: solid is metered, dashed is not yet. Emerald signals state; ink carries everything else.
   Width carries hierarchy: wide for claims, regular for prose, condensed for figures. */

:root {
  --ground: #eef3f0;
  --ground-2: #e4ece8;
  --paper: #ffffff;
  --ink: #212a34;
  --ink-2: #47535f;
  --ink-3: #5c6874;
  --rule: #c9d5cf;
  --rule-soft: #dbe4df;
  --readout: #047857;
  --signal: #059669;
  --live: #10b981;
  --teal: #0d9488;
  --deep: #064e3b;
  --mint: #d1fae5;
  --line: #a7f3d0;
  --line-strong: #6ee7b7;
  --wash: #ecfdf5;
  --mark: #009857;
  --amber: #a85106;
  --amber-wash: #fff7e8;
  --tou-off: #cfe8dc;
  --tou-std: #6fcca8;
  --tou-peak: #0b5e48;
  --gradient: linear-gradient(135deg, #059669 0%, #10b981 55%, #0d9488 100%);
  --hatch: repeating-linear-gradient(135deg, rgb(33 42 52 / 0.32) 0 1.5px, transparent 1.5px 6px);

  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --container: 1320px;
  --gutter: clamp(20px, 3.2vw, 44px);
  --col-gap: clamp(16px, 2vw, 32px);
  --radius-doc: 6px;
  --radius-plate: 14px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --header-h: 72px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  font-stretch: 100%;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--readout);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--deep);
}

p {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2.5px solid var(--signal);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--mint);
  color: var(--deep);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: 12px;
  color: #fff;
}

.skip-link:hover {
  color: #fff;
}

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}

.section {
  padding-block: clamp(84px, 10vw, 156px);
}

.section--paper {
  background: var(--paper);
}

.section--tight {
  padding-block: clamp(64px, 7vw, 104px);
}

.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 22px;
  margin-bottom: clamp(44px, 5vw, 72px);
}

.section-head > .h-section {
  grid-column: 1 / span 9;
}

.section-head > .lede {
  grid-column: 1 / span 7;
}

.section-head--split > .lede {
  grid-column: 8 / span 5;
  grid-row: 1;
  align-self: end;
}

.section-head--split > .h-section {
  grid-column: 1 / span 7;
}

/* ---------- Type ---------- */

.h-display {
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(44px, 6.5vw, 98px);
  line-height: 0.95;
  letter-spacing: -0.038em;
  text-wrap: balance;
}

.h-section {
  font-stretch: 125%;
  font-weight: 780;
  font-size: clamp(32px, 4.1vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.h-sub {
  font-stretch: 112%;
  font-weight: 720;
  font-size: clamp(21px, 1.9vw, 27px);
  line-height: 1.16;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.h-minor {
  font-stretch: 106%;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.008em;
}

.lede {
  font-size: clamp(18.5px, 1.42vw, 21.5px);
  line-height: 1.52;
  color: var(--ink-2);
  max-width: 36em;
  text-wrap: pretty;
}

.prose {
  max-width: 38em;
  color: var(--ink-2);
  text-wrap: pretty;
}

.prose > * + * {
  margin-top: 1em;
}

.prose strong {
  color: var(--ink);
  font-weight: 650;
}

.small {
  font-size: 15px;
  line-height: 1.5;
}

.label {
  font-stretch: 87.5%;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-3);
  letter-spacing: 0.004em;
}

.num {
  font-variant-numeric: tabular-nums lining-nums;
}

.figure-xl {
  font-stretch: 70%;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(42px, 4.8vw, 70px);
  line-height: 0.92;
  letter-spacing: -0.02em;
}

.source {
  font-stretch: 87.5%;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-3);
  max-width: 60em;
}

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

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font-weight: 620;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.002em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease),
    box-shadow 200ms var(--ease), transform 120ms var(--ease);
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.97);
}

.btn--ink {
  background: var(--ink);
  color: #fff;
}

.btn--ink:hover {
  color: #fff;
  background: var(--gradient);
  box-shadow: 0 10px 22px -10px rgb(5 150 105 / 0.65);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgb(33 42 52 / 0.28);
}

.btn--ghost:hover {
  color: var(--deep);
  border-color: var(--signal);
  background: var(--wash);
}

.btn--small {
  min-height: 40px;
  padding: 8px 18px;
  font-size: 15px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.text-link {
  font-weight: 620;
  color: var(--readout);
  text-decoration: underline;
  text-decoration-color: rgb(4 120 87 / 0.35);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 160ms var(--ease);
}

.text-link:hover {
  text-decoration-color: currentColor;
}

/* ---------- Status chips (honest framing) ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 11px 3px 9px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--rule);
  font-stretch: 87.5%;
  font-size: 13.5px;
  font-weight: 620;
  line-height: 1.35;
  color: var(--ink-2);
  background: var(--paper);
  white-space: nowrap;
}

.chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.chip--built {
  border-color: var(--line-strong);
  background: var(--wash);
  color: var(--readout);
}

.chip--live::before {
  background: var(--live);
  box-shadow: 0 0 0 0 rgb(16 185 129 / 0.55);
  animation: pulse 2s ease-out infinite;
}

.chip--simulated,
.chip--waiting,
.chip--planned {
  border-style: dashed;
}

.chip--simulated {
  color: var(--ink-2);
  border-color: rgb(33 42 52 / 0.38);
}

.chip--simulated::before {
  background: transparent;
  border: 1.5px solid currentColor;
}

.chip--waiting,
.chip--planned {
  color: var(--amber);
  border-color: #e9b46d;
  background: var(--amber-wash);
}

.chip--waiting::before,
.chip--planned::before {
  background: transparent;
  border: 1.5px dashed currentColor;
}

.chip--person {
  color: var(--deep);
  border-color: var(--signal);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(16 185 129 / 0.5);
  }
  70% {
    box-shadow: 0 0 0 8px rgb(16 185 129 / 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(16 185 129 / 0);
  }
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--ground);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 6px 0;
}

.brand img {
  height: 25px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.site-nav a {
  position: relative;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink);
  font-weight: 540;
  font-size: 15.5px;
  text-decoration: none;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}

.site-nav a:hover {
  background: rgb(5 150 105 / 0.08);
  color: var(--deep);
}

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

.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--signal);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgb(33 42 52 / 0.28);
  background: transparent;
  font-weight: 600;
  cursor: pointer;
}

.menu-toggle__bars {
  display: grid;
  gap: 4px;
  width: 16px;
}

.menu-toggle__bars span {
  display: block;
  height: 1.75px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) {
  transform: translateY(5.75px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) {
  transform: translateY(-5.75px) rotate(-45deg);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: #e6ece9;
  padding-block: 72px 40px;
}

.site-footer a {
  color: #e6ece9;
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 40px;
}

.site-footer__brand {
  grid-column: 1 / span 5;
}

.site-footer__mark {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.site-footer__mark img {
  width: 40px;
  height: 40px;
}

.site-footer__name {
  font-stretch: 125%;
  font-weight: 760;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: #fff;
}

.site-footer__tagline {
  margin-top: 18px;
  font-size: 15.5px;
  color: #b9c6c0;
  max-width: 28em;
}

.site-footer__cols {
  grid-column: 7 / span 6;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.site-footer__cols h2 {
  font-size: 14px;
  font-stretch: 100%;
  font-weight: 600;
  color: #9fb0a8;
  margin-bottom: 12px;
}

.site-footer__cols li {
  list-style: none;
  font-size: 15.5px;
  line-height: 1.4;
}

.site-footer__cols li + li {
  margin-top: 9px;
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font-size: 14px;
  color: #9fb0a8;
}

/* ---------- Hero ---------- */

.hero {
  padding-top: clamp(28px, 4.4vw, 56px);
  padding-bottom: clamp(56px, 6vw, 88px);
}

.hero__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 28px;
  align-items: end;
}

.hero__title {
  grid-column: 1 / span 9;
}

.hero__clock {
  grid-column: 10 / span 3;
  align-self: start;
  padding-top: 6px;
}

.hero__lede {
  grid-column: 1 / span 6;
}

.hero__ctas {
  grid-column: 8 / span 5;
  justify-self: end;
}

.clock__city {
  font-stretch: 100%;
  font-weight: 560;
  font-size: 15px;
  color: var(--ink-2);
}

.clock__time {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 2px;
  font-stretch: 70%;
  font-weight: 700;
  font-size: clamp(46px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums lining-nums;
}

.clock__zone {
  font-size: 17px;
  font-stretch: 87.5%;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--ink-3);
}

.clock__lines {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.clock__line {
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-2);
}

.clock__line strong {
  color: var(--ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.clock__line--now {
  display: flex;
  gap: 9px;
  align-items: baseline;
}

.clock__line--now::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live);
  transform: translateY(-1px);
  animation: pulse 2s ease-out infinite;
}

.clock__honest {
  margin-top: 4px;
  font-stretch: 87.5%;
  font-size: 13.5px;
  color: var(--ink-3);
}

/* ---------- The trading day instrument ---------- */

.day {
  margin-top: clamp(40px, 4.6vw, 64px);
}

.day__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 28px;
  margin-bottom: 40px;
}

.day__title {
  font-weight: 620;
  font-size: 16px;
}

.day__title span {
  color: var(--ink-3);
  font-weight: 450;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-stretch: 87.5%;
  font-size: 13.5px;
  color: var(--ink-2);
}

.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.swatch {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}

.swatch--matched {
  background: var(--readout);
}

.swatch--surplus {
  background: var(--line-strong);
}

.swatch--short {
  background: var(--hatch), #fff;
  outline: 1px solid rgb(33 42 52 / 0.3);
}

.swatch--demand {
  height: 0;
  border-top: 2.5px solid var(--ink);
}

.swatch--forecast {
  background: transparent;
  border: 1.5px dashed var(--ink-3);
}

.day__chart {
  position: relative;
  height: clamp(180px, 19vw, 248px);
  border-bottom: 1.5px solid var(--ink);
}

.day__cols {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: clamp(3px, 0.45vw, 7px);
}

.day__col {
  position: relative;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  transition: background-color 160ms var(--ease);
}

.day__col:hover {
  background: rgb(5 150 105 / 0.07);
}

.day__col[aria-pressed="true"] {
  background: rgb(33 42 52 / 0.055);
}

.day__col:focus-visible {
  outline-offset: 0;
}

.bar {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 0;
  display: flex;
  flex-direction: column-reverse;
  transform-origin: bottom;
}

.bar__matched,
.bar__surplus {
  display: block;
  width: 100%;
}

.bar__matched {
  background: var(--readout);
}

.bar__surplus {
  background: var(--line-strong);
  border-radius: 3px 3px 0 0;
}

.bar__matched:only-child,
.bar__matched:last-child {
  border-radius: 3px 3px 0 0;
}

.bar__short {
  position: absolute;
  left: 14%;
  right: 14%;
  background: var(--hatch);
  box-shadow: inset 0 0 0 1px rgb(33 42 52 / 0.18);
}

.day__col.is-future .bar__matched,
.day__col.is-future .bar__surplus {
  background: transparent;
  border: 1.5px dashed rgb(33 42 52 / 0.42);
}

.day__col.is-future .bar__matched {
  border-top-width: 0;
}

.day__col.is-future .bar__matched:last-child {
  border-top-width: 1.5px;
}

.day__col.is-future .bar__short {
  background: transparent;
  box-shadow: none;
}

.day__col.is-now .bar {
  overflow: hidden;
}

.day__col.is-now .bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--undone, 100%);
  background: rgb(255 255 255 / 0.72);
  border-bottom: 1.5px dashed rgb(33 42 52 / 0.5);
}

.day__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.day__demand {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.25;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.day__demand--future {
  stroke-dasharray: 5 4;
  stroke: rgb(33 42 52 / 0.62);
}

.day__marker {
  position: absolute;
  top: -10px;
  bottom: 0;
  width: 0;
  pointer-events: none;
}

.day__marker::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-left: 1.5px dashed var(--ink-3);
}

.day__marker--now::before {
  border-left: 2px solid var(--live);
}

.day__marker-label {
  position: absolute;
  top: -22px;
  left: 6px;
  font-stretch: 87.5%;
  font-size: 13px;
  font-weight: 620;
  white-space: nowrap;
  color: var(--ink-2);
  background: var(--ground);
  padding-right: 4px;
}

.day__marker--now .day__marker-label {
  color: var(--readout);
}

.day__marker--flip .day__marker-label {
  left: auto;
  right: 6px;
  padding-right: 0;
  padding-left: 4px;
}

.day__axis {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: clamp(3px, 0.45vw, 7px);
  margin-top: 8px;
}

.day__hour {
  text-align: center;
  font-stretch: 75%;
  font-size: 13px;
  font-weight: 560;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.day__hour {
  border-radius: var(--radius-pill);
  padding-block: 1px;
}

.day__hour.is-selected {
  background: var(--ink);
  color: #fff;
  font-weight: 700;
}

.day__tou {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  margin-top: 8px;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}

.tou--offpeak {
  background: var(--tou-off);
}

.tou--standard {
  background: var(--tou-std);
}

.tou--peak {
  background: var(--tou-peak);
}

.day__tou-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 10px;
  font-stretch: 87.5%;
  font-size: 13.5px;
  color: var(--ink-2);
}

.day__tou-key .swatch {
  height: 8px;
}

/* Hour working panel */

.working {
  margin-top: clamp(28px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 28px;
  background: var(--paper);
  border-radius: var(--radius-plate);
  padding: clamp(22px, 2.6vw, 36px);
  box-shadow: 0 1px 0 rgb(33 42 52 / 0.06), 0 0 0 1px rgb(33 42 52 / 0.06);
}

.working.is-future {
  background: transparent;
  box-shadow: none;
  outline: 1.5px dashed rgb(33 42 52 / 0.32);
  outline-offset: -1.5px;
}

.working__head {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
}

.working__when {
  font-stretch: 112%;
  font-weight: 720;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.working__when .num {
  font-stretch: 100%;
}

.working__state {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.working__energy {
  grid-column: 1 / span 5;
}

.working__money {
  grid-column: 7 / span 6;
}

.working h3 {
  font-size: 15px;
  font-weight: 650;
  color: var(--ink-2);
  margin-bottom: 10px;
}

.steps {
  list-style: none;
}

.steps li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 10px 0;
  border-top: 1px solid var(--rule-soft);
}

.steps li:first-child {
  border-top: 0;
  padding-top: 2px;
}

.steps__what {
  font-size: 15.5px;
  line-height: 1.35;
}

.steps__value {
  font-stretch: 75%;
  font-weight: 650;
  font-size: 18px;
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
  white-space: nowrap;
}

.steps__formula {
  grid-column: 1 / -1;
  font-stretch: 75%;
  font-size: 14.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums;
}

.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
}

.ledger th,
.ledger td {
  padding: 9px 0;
  border-top: 1px solid var(--rule-soft);
  text-align: left;
  vertical-align: baseline;
  font-weight: 450;
}

.ledger thead th {
  border-top: 0;
  padding-top: 0;
  font-stretch: 87.5%;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-3);
}

.ledger td + td,
.ledger th + th {
  padding-left: 14px;
}

.ledger .amt {
  text-align: right;
  font-stretch: 75%;
  font-weight: 640;
  font-size: 17px;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.ledger .why {
  color: var(--ink-3);
  font-stretch: 87.5%;
  font-size: 14px;
}

.amt--pos {
  color: var(--readout);
}

.ledger tfoot td {
  border-top: 2px solid var(--ink);
  padding-top: 11px;
  font-weight: 650;
}

.sigma {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sigma__tick {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--readout);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.working__note {
  grid-column: 1 / -1;
  font-stretch: 87.5%;
  font-size: 14px;
  color: var(--ink-3);
  max-width: 70em;
}

.working.is-future .ledger .amt,
.working.is-future .steps__value {
  color: var(--ink-3);
}

/* ---------- Market rewiring ---------- */

.rewire {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 56px;
}

.rewire__copy {
  grid-column: 1 / span 5;
}

.rewire__chart {
  grid-column: 7 / span 6;
}

.bars {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: end;
  gap: clamp(6px, 1vw, 16px);
  height: 300px;
  border-bottom: 1.5px solid var(--ink);
}

.bars__col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.bars__bar {
  background: var(--ink);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transform-origin: bottom;
}

.bars__col--lit .bars__bar {
  background: var(--readout);
}

.bars__value {
  margin-bottom: 6px;
  text-align: center;
  font-stretch: 75%;
  font-weight: 650;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.bars__axis {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(6px, 1vw, 16px);
  margin-top: 8px;
}

.bars__axis span {
  text-align: center;
  font-stretch: 75%;
  font-size: 14px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.bars__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 18px;
}

.total {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.total .figure-xl {
  color: var(--ink);
}

.timeline {
  grid-column: 1 / -1;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1.5px solid var(--ink);
}

.timeline li {
  position: relative;
  padding: 22px 18px 0 0;
}

.timeline li::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
}

.timeline li.is-ahead::before {
  background: var(--ground);
  border: 1.5px dashed var(--ink);
}

.timeline__date {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.timeline__what {
  margin-top: 4px;
  font-size: 15.5px;
  line-height: 1.42;
  color: var(--ink-2);
}

.timeline li.is-ahead .timeline__date {
  color: var(--amber);
}

.contrast {
  grid-column: 1 / -1;
  width: 100%;
  border-collapse: collapse;
}

.contrast caption {
  text-align: left;
  margin-bottom: 18px;
}

.contrast th,
.contrast td {
  text-align: left;
  vertical-align: top;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}

.contrast thead th {
  border-top: 0;
  padding: 0 0 12px;
  font-weight: 600;
  font-size: 14px;
  font-stretch: 87.5%;
  color: var(--ink-3);
}

.contrast td:first-child,
.contrast th:first-child {
  width: 42%;
  padding-right: 32px;
}

.contrast td:first-child {
  color: var(--ink-3);
  font-size: 17px;
}

.contrast td:last-child {
  font-size: 17px;
  color: var(--ink);
}

.contrast td:last-child strong {
  font-weight: 650;
}

/* ---------- Lifecycle spine ---------- */

.spine {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}

.spine__rail {
  grid-column: 1 / span 4;
  position: relative;
}

.spine__rail-inner {
  position: sticky;
  top: calc(var(--header-h) + 40px);
}

.spine__stops {
  list-style: none;
  position: relative;
  padding-left: 34px;
}

.spine__stops::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--rule);
}

.spine__progress {
  position: absolute;
  left: 9px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--gradient);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 300ms var(--ease);
}

.spine__stop {
  position: relative;
}

.spine__stop a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  text-decoration: none;
  color: var(--ink-3);
  transition: color 200ms var(--ease);
}

.spine__stop a:hover {
  color: var(--ink);
}

.spine__stop::before {
  content: "";
  position: absolute;
  left: -31px;
  top: 50%;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  border-radius: 50%;
  background: var(--ground);
  border: 2.5px solid var(--rule);
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease), transform 200ms var(--ease);
}

.spine__stop.is-past::before {
  border-color: var(--signal);
  background: var(--signal);
}

.spine__stop.is-current::before {
  border-color: var(--signal);
  background: var(--paper);
  transform: scale(1.2);
}

.spine__stop.is-current a,
.spine__stop.is-past a {
  color: var(--ink);
}

.spine__num {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 15px;
  width: 1.2em;
  font-variant-numeric: tabular-nums;
}

.spine__name {
  font-stretch: 112%;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.012em;
  line-height: 1.2;
}

.spine__stop.is-current .spine__name {
  color: var(--deep);
}

.spine__after {
  margin-top: 20px;
  padding-left: 34px;
  font-size: 15px;
  color: var(--ink-3);
  max-width: 22em;
}

.spine__panels {
  grid-column: 6 / span 7;
}

.stage {
  min-height: 64vh;
  padding-block: 8px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stage:last-child {
  padding-bottom: 0;
  min-height: 50vh;
}

.stage__num {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 16px;
  color: var(--readout);
  font-variant-numeric: tabular-nums;
}

.stage__title {
  margin-top: 4px;
}

.stage__copy {
  margin-top: 14px;
  max-width: 34em;
  color: var(--ink-2);
}

.stage__where {
  margin-top: 14px;
  font-size: 15px;
  color: var(--ink-3);
}

.stage__where strong {
  color: var(--ink);
  font-weight: 600;
}

.artifact {
  margin-top: 28px;
  background: var(--paper);
  border-radius: var(--radius-plate);
  padding: 22px 24px;
  box-shadow: 0 0 0 1px rgb(33 42 52 / 0.07);
}

.artifact__cap {
  font-stretch: 87.5%;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: 14px;
}

/* artifact: meter strip */
.meterstrip {
  display: grid;
  grid-template-columns: repeat(72, minmax(0, 1fr));
  align-items: end;
  gap: 1.5px;
  height: 64px;
}

.meterstrip span {
  background: var(--readout);
  border-radius: 1px 1px 0 0;
}

.meterstrip span.is-pending {
  background: transparent;
  outline: 1px dashed rgb(33 42 52 / 0.35);
  outline-offset: -1px;
}

.meterstrip__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-stretch: 75%;
  font-size: 13px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.meterplate {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-bottom: 18px;
}

.meterplate div {
  display: grid;
}

.meterplate dt {
  font-stretch: 87.5%;
  font-size: 13px;
  color: var(--ink-3);
}

.meterplate dd {
  margin: 0;
  font-stretch: 75%;
  font-weight: 650;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

/* artifact: status rail */
.rail {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.rail li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rail li + li::before {
  content: "";
  width: 16px;
  height: 1.5px;
  background: var(--rule);
}

.rail__pill {
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--rule);
  font-stretch: 87.5%;
  font-weight: 650;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  background: var(--paper);
}

.rail__pill--done {
  background: var(--wash);
  border-color: var(--line-strong);
  color: var(--readout);
}

.rail__pill--now {
  background: var(--readout);
  border-color: var(--readout);
  color: #fff;
}

.ref {
  display: inline-block;
  margin-top: 16px;
  font-stretch: 75%;
  font-weight: 650;
  font-size: 16px;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.ref-note {
  margin-top: 4px;
  font-size: 14.5px;
  color: var(--ink-3);
}

/* artifact: tiers */
.tiers {
  display: flex;
  height: 46px;
  border-radius: 6px;
  overflow: hidden;
  gap: 2px;
}

.tiers span {
  display: flex;
  align-items: center;
  padding-inline: 10px;
  font-stretch: 87.5%;
  font-size: 13.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
}

.tier--priority {
  background: var(--deep);
  color: #fff;
}

.tier--prorata {
  background: var(--readout);
  color: #fff;
}

.tier--fixed {
  background: var(--tou-std);
  color: var(--deep);
}

.tier--surplus {
  background: var(--paper);
  color: var(--ink-2);
  outline: 1.5px dashed rgb(33 42 52 / 0.38);
  outline-offset: -1.5px;
}

.tiers-key {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
  margin-top: 16px;
  font-size: 14.5px;
  color: var(--ink-2);
}

.tiers-key strong {
  color: var(--ink);
  font-weight: 650;
}

/* artifact: nomination row */
.nomrow {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 2px;
}

.nomrow span {
  height: 44px;
  border-radius: 3px;
  background: var(--mint);
  position: relative;
}

.nomrow span i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--readout);
  border-radius: 0 0 3px 3px;
}

/* artifact: market clock */
.mclock {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 2px solid var(--ink);
}

.mclock li {
  position: relative;
  padding: 16px 12px 0 0;
}

.mclock li::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
}

.mclock li.is-gate::before {
  background: var(--signal);
  box-shadow: 0 0 0 4px var(--mint);
}

.mclock time {
  display: block;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.mclock span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-2);
}

/* artifact: pipeline */
.pipeline {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

.pipeline li {
  flex: 1 1 0;
  min-width: 96px;
  padding: 12px 12px 14px;
  border-radius: 10px;
  background: var(--ground);
}

.pipeline li:last-child {
  background: var(--wash);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}

.pipeline b {
  display: block;
  font-stretch: 75%;
  font-size: 14px;
  color: var(--readout);
}

.pipeline strong {
  display: block;
  font-stretch: 106%;
  font-weight: 700;
  font-size: 16.5px;
}

.pipeline small {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink-3);
}

/* artifact: statement snippet */
.stmt-mini {
  border-top: 3px solid var(--mark);
  padding-top: 14px;
}

.stmt-mini__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 15.5px;
}

.stmt-mini__row span:last-child {
  font-stretch: 75%;
  font-weight: 650;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.stmt-mini__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.hash {
  font-stretch: 75%;
  font-size: 14px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.stamp {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 2px solid var(--readout);
  border-radius: 6px;
  color: var(--readout);
  font-stretch: 112%;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
}

/* ---------- Route + statement ---------- */

.route {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-plate);
  padding: clamp(22px, 3vw, 40px);
  box-shadow: 0 0 0 1px rgb(33 42 52 / 0.06);
}

.route__line {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: stretch;
  position: relative;
}

.route__line::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 34px;
  height: 3px;
  background: var(--ink);
  border-radius: 3px;
}

.node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
  appearance: none;
  border: 0;
  background: none;
  cursor: default;
}

button.node {
  cursor: pointer;
}

.node__symbol {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

.node__symbol svg {
  width: 34px;
  height: 34px;
}

.node--network .node__symbol {
  border-radius: 16px;
}

button.node:hover .node__symbol {
  border-color: var(--signal);
  background: var(--wash);
}

button.node[aria-pressed="true"] .node__symbol {
  border-color: var(--readout);
  background: var(--readout);
  color: #fff;
  box-shadow: 0 0 0 6px var(--mint);
}

.node__name {
  margin-top: 14px;
  font-stretch: 106%;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
}

.node__sub {
  margin-top: 3px;
  font-size: 14.5px;
  color: var(--ink-3);
  line-height: 1.35;
}

.node__charges {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.node__charges span {
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--ground);
  font-stretch: 87.5%;
  font-size: 13.5px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.statement {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 32px;
}

.doc {
  background: var(--paper);
  border-radius: var(--radius-doc);
  padding: clamp(22px, 2.8vw, 40px);
  box-shadow: 0 1px 2px rgb(33 42 52 / 0.06), 0 12px 32px -18px rgb(33 42 52 / 0.25);
}

.statement__doc {
  grid-column: 1 / span 8;
}

.statement__side {
  grid-column: 9 / span 4;
}

.doc__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--mark);
}

.doc__title {
  font-stretch: 112%;
  font-weight: 760;
  font-size: 22px;
  letter-spacing: -0.012em;
}

.doc__meta {
  margin-top: 4px;
  font-size: 15px;
  color: var(--ink-3);
}

.doc__terms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0 26px;
}

.doc__terms dt {
  font-stretch: 87.5%;
  font-size: 13.5px;
  color: var(--ink-3);
}

.doc__terms dd {
  margin: 2px 0 0;
  font-stretch: 75%;
  font-weight: 650;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.doc h3 {
  font-size: 15px;
  font-weight: 650;
  color: var(--ink-2);
  margin: 0 0 6px;
}

.doc .ledger + h3,
.doc h3 + .ledger + h3 {
  margin-top: 28px;
}

.ledger tbody tr[data-pair] {
  cursor: pointer;
  transition: background-color 140ms var(--ease);
}

.ledger tbody tr[data-pair]:hover td {
  background: var(--wash);
}

.ledger tbody tr.is-lit td {
  background: var(--mint);
}

.ledger tbody tr.is-dim td {
  opacity: 0.38;
}

.doc .ledger tr > :first-child {
  padding-left: 8px;
}

.doc .ledger tr > :last-child {
  padding-right: 8px;
}

.doc__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.explain {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.explain__box {
  background: var(--wash);
  border-radius: var(--radius-plate);
  padding: 22px 24px;
  box-shadow: inset 0 0 0 1.5px var(--line);
}

.explain__box h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--deep);
}

.explain__formula {
  margin-top: 12px;
  font-stretch: 75%;
  font-weight: 650;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.35;
}

.explain__text {
  font-size: 15.5px;
  color: var(--ink-2);
}

.statuses {
  margin-top: 28px;
}

.statuses .rail {
  margin-top: 10px;
}

.statuses p {
  margin-top: 12px;
  font-size: 15px;
  color: var(--ink-2);
}

/* ---------- Rooms ---------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border-radius: var(--radius-pill);
  background: var(--ground);
  width: fit-content;
}

.tab {
  appearance: none;
  border: 0;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: transparent;
  font-weight: 620;
  font-size: 16px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease);
}

.tab:hover {
  color: var(--ink);
  background: rgb(255 255 255 / 0.7);
}

.tab[aria-selected="true"] {
  background: var(--paper);
  color: var(--deep);
  box-shadow: 0 1px 2px rgb(33 42 52 / 0.1), inset 0 0 0 1.5px var(--line-strong);
}

.rooms {
  margin-top: 32px;
}

.room-panel {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 28px;
  align-items: start;
}

.room-panel[hidden] {
  display: none;
}

.room-panel__list {
  grid-column: 1 / span 4;
  list-style: none;
}

.room-panel__list li {
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}

.room-panel__list li:first-child {
  border-top: 0;
  padding-top: 4px;
}

.room-panel__list strong {
  display: block;
  font-stretch: 106%;
  font-weight: 700;
  font-size: 18px;
}

.room-panel__list span {
  display: block;
  margin-top: 3px;
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.45;
}

.room-panel__shot {
  grid-column: 5 / span 8;
}

.plate {
  margin: 0;
}

.plate__frame {
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgb(33 42 52 / 0.12), 0 24px 48px -28px rgb(33 42 52 / 0.35);
}

.plate__frame img {
  width: 100%;
  height: auto;
}

.plate figcaption {
  margin-top: 12px;
  font-stretch: 87.5%;
  font-size: 14px;
  color: var(--ink-3);
}

.plate figcaption strong {
  color: var(--ink-2);
  font-weight: 620;
}

/* ---------- Roles directory ---------- */

.roles {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 36px;
}

.roles__list {
  grid-column: 1 / span 5;
  list-style: none;
  border-top: 1.5px solid var(--ink);
}

.role-btn {
  appearance: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  padding: 16px 4px 16px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink-3);
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}

.role-btn__name {
  font-stretch: 118%;
  font-weight: 740;
  font-size: clamp(21px, 2vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.role-btn__job {
  font-stretch: 87.5%;
  font-size: 14.5px;
  font-weight: 560;
  white-space: nowrap;
}

.role-btn:hover {
  color: var(--ink);
}

.role-btn[aria-selected="true"] {
  color: var(--ink);
  padding-left: 16px;
  padding-right: 16px;
  background: var(--wash);
  border-bottom-color: var(--line-strong);
}

.role-btn[aria-selected="true"] .role-btn__job {
  color: var(--readout);
}

.roles__detail {
  grid-column: 7 / span 6;
}

.role-panel[hidden] {
  display: none;
}

.role-panel__job {
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 48px);
  letter-spacing: -0.032em;
  line-height: 1.02;
  color: var(--deep);
}

.role-panel__problem {
  margin-top: 18px;
  color: var(--ink-2);
  max-width: 34em;
}

.role-panel__gets {
  margin-top: 26px;
  list-style: none;
  display: grid;
  gap: 0;
}

.role-panel__gets li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-top: 1px solid var(--rule);
  font-size: 16.5px;
  line-height: 1.45;
}

.role-panel__gets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 19px;
  width: 14px;
  height: 8px;
  border-left: 2.5px solid var(--signal);
  border-bottom: 2.5px solid var(--signal);
  transform: rotate(-45deg);
}

.role-panel__where {
  margin-top: 20px;
  font-size: 15px;
  color: var(--ink-3);
}

.role-panel__where strong {
  color: var(--ink);
  font-weight: 620;
}

.role-panel__go {
  margin-top: 26px;
}

/* ---------- Carbon teaser ---------- */

.carbon {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 40px;
  align-items: center;
}

.carbon__copy {
  grid-column: 1 / span 5;
}

.carbon__chart {
  grid-column: 7 / span 6;
}

.rate-chart {
  width: 100%;
  height: auto;
  overflow: visible;
}

.rate-chart .axis {
  stroke: var(--ink);
  stroke-width: 1.5;
}

.rate-chart .grid-line {
  stroke: var(--rule);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.rate-chart .path-past {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.rate-chart .path-ahead {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-dasharray: 7 6;
  stroke-linecap: round;
}

.rate-chart .dot {
  fill: var(--ink);
}

.rate-chart .dot--now {
  fill: var(--signal);
  stroke: var(--mint);
  stroke-width: 6;
  paint-order: stroke;
}

.rate-chart .dot--ahead {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 2;
}

.rate-chart text {
  font-family: var(--font);
  font-stretch: 75%;
  font-size: 15px;
  font-weight: 620;
  fill: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.rate-chart text.val {
  fill: var(--ink);
  font-weight: 700;
  font-size: 16px;
}

.rate-chart text.val--now {
  fill: var(--readout);
  font-size: 22px;
}

.formula-strip {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  list-style: none;
}

.formula-strip li {
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgb(33 42 52 / 0.08);
  font-size: 15px;
  line-height: 1.3;
}

.formula-strip li b {
  display: block;
  font-stretch: 75%;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.formula-strip .op {
  padding: 0;
  background: none;
  box-shadow: none;
  font-weight: 700;
  font-size: 20px;
  color: var(--ink-3);
}

/* ---------- Honest status board ---------- */

.status-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--col-gap);
}

.status-col {
  border-top: 3px solid var(--ink);
  padding-top: 18px;
}

.status-col--dashed {
  border-top-style: dashed;
}

.status-col h3 {
  margin-top: 14px;
  font-stretch: 112%;
  font-weight: 720;
  font-size: 21px;
  letter-spacing: -0.012em;
  line-height: 1.2;
}

.status-col > p {
  margin-top: 6px;
  font-size: 15px;
  color: var(--ink-3);
}

.status-col ul {
  margin-top: 16px;
  list-style: none;
}

.status-col li {
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  font-size: 15.5px;
  line-height: 1.42;
}

/* ---------- Never list ---------- */

.never {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 32px;
}

.never__copy {
  grid-column: 1 / span 5;
}

.never__list {
  grid-column: 7 / span 6;
  list-style: none;
  counter-reset: none;
}

.never__list li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 15px 0;
  border-top: 1px solid var(--rule);
  font-stretch: 112%;
  font-weight: 660;
  font-size: clamp(19px, 1.6vw, 23px);
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.never__list li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--ink-3);
  transform: translateY(-5px);
}

/* ---------- Rating plate ---------- */

.nameplate {
  position: relative;
  background: linear-gradient(180deg, #fbfcfb, #f1f5f3);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 44px);
  box-shadow: inset 0 0 0 1.5px rgb(33 42 52 / 0.16), inset 0 0 0 9px #fbfcfb, inset 0 0 0 10px rgb(33 42 52 / 0.1);
}

.nameplate__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 4px 6px 22px;
  border-bottom: 1.5px solid var(--ink);
}

.nameplate__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nameplate__brand img {
  width: 44px;
  height: 44px;
}

.nameplate__title {
  font-stretch: 125%;
  font-weight: 780;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.nameplate__type {
  font-size: 15px;
  color: var(--ink-3);
}

.nameplate__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--col-gap);
  margin: 0;
  padding: 6px 6px 0;
}

.nameplate__grid div {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.nameplate__grid dt {
  font-stretch: 87.5%;
  font-size: 14px;
  color: var(--ink-3);
}

.nameplate__grid dd {
  margin: 3px 0 0;
  font-stretch: 87.5%;
  font-weight: 650;
  font-size: 18.5px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.screw {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #c5cfca 60%, #a3afa9);
  box-shadow: inset 0 0 0 1px rgb(33 42 52 / 0.2);
}

.screw::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  background: rgb(33 42 52 / 0.35);
  transform: rotate(35deg);
}

.screw--tl {
  top: 14px;
  left: 14px;
}

.screw--tr {
  top: 14px;
  right: 14px;
}

.screw--bl {
  bottom: 14px;
  left: 14px;
}

.screw--br {
  bottom: 14px;
  right: 14px;
}

/* ---------- Contact ---------- */

.contact {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 40px;
}

.contact__copy {
  grid-column: 1 / span 5;
}

.contact__form {
  grid-column: 7 / span 6;
}

.contact__links {
  margin-top: 28px;
  list-style: none;
}

.contact__links li {
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}

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

.page-hero {
  padding-top: clamp(40px, 6vw, 88px);
  padding-bottom: clamp(56px, 7vw, 104px);
}

.page-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 26px;
  align-items: end;
}

.page-hero__who {
  grid-column: 1 / -1;
  font-weight: 560;
  font-size: 17px;
  color: var(--ink-2);
}

.page-hero__who a {
  color: inherit;
}

.page-hero__title {
  grid-column: 1 / span 10;
}

.page-hero__lede {
  grid-column: 1 / span 7;
}

.page-hero__aside {
  grid-column: 9 / span 4;
  justify-self: end;
}

/* ---------- Instruments (calculators etc.) ---------- */

.instrument {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 28px;
  background: var(--paper);
  border-radius: var(--radius-plate);
  padding: clamp(22px, 3vw, 44px);
  box-shadow: 0 0 0 1px rgb(33 42 52 / 0.06);
}

.instrument__controls {
  grid-column: 1 / span 5;
  display: grid;
  gap: 22px;
  align-content: start;
}

.instrument__result {
  grid-column: 7 / span 6;
}

.instrument__note {
  grid-column: 1 / -1;
  font-stretch: 87.5%;
  font-size: 14px;
  color: var(--ink-3);
}

.slider {
  display: grid;
  gap: 8px;
}

.slider__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.slider__top label {
  font-size: 15.5px;
  font-weight: 600;
}

.slider__value {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.slider__hint {
  font-size: 14px;
  color: var(--ink-3);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
  --fill: 50%;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--signal) 0 var(--fill), var(--rule) var(--fill) 100%);
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 6px;
  background: var(--rule);
}

input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 6px;
  background: var(--signal);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  box-shadow: 0 2px 6px rgb(33 42 52 / 0.2);
  transition: transform 120ms var(--ease), border-color 120ms var(--ease);
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--paper);
  border: 2.5px solid var(--ink);
}

input[type="range"]:hover::-webkit-slider-thumb {
  border-color: var(--signal);
  transform: scale(1.08);
}

input[type="range"]:focus-visible {
  outline: none;
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgb(5 150 105 / 0.25);
  border-color: var(--signal);
}

.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--ground);
}

.segmented button {
  appearance: none;
  border: 0;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: transparent;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}

.segmented button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--deep);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}

.result-big {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
}

.result-big .figure-xl {
  color: var(--deep);
}

.result-big__unit {
  font-size: 17px;
  color: var(--ink-2);
}

.build-up {
  margin-top: 22px;
  list-style: none;
}

.build-up li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 11px 0;
  border-top: 1px solid var(--rule-soft);
  font-size: 15.5px;
}

.build-up li.is-total {
  border-top: 2px solid var(--ink);
  font-weight: 650;
}

.build-up .v {
  font-stretch: 75%;
  font-weight: 650;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.build-up .f {
  grid-column: 1 / -1;
  font-weight: 450;
  font-stretch: 75%;
  font-size: 14.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.compare-bar {
  margin-top: 24px;
  display: grid;
  gap: 10px;
}

.compare-bar__row {
  display: grid;
  grid-template-columns: 130px 1fr 74px;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}

.compare-bar__track {
  height: 14px;
  border-radius: 7px;
  background: var(--ground);
  overflow: hidden;
}

.compare-bar__fill {
  height: 100%;
  border-radius: 7px;
  background: var(--ink);
}

.compare-bar__fill--green {
  background: var(--readout);
}

.compare-bar__v {
  text-align: right;
  font-stretch: 75%;
  font-weight: 650;
  font-size: 16.5px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Feature rows (subpages) ---------- */

.feature-rows {
  display: grid;
  gap: clamp(64px, 8vw, 120px);
}

.feature-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 28px;
  align-items: center;
}

.feature-row__copy {
  grid-column: 1 / span 5;
}

.feature-row__media {
  grid-column: 6 / span 7;
}

.feature-row--flip .feature-row__copy {
  grid-column: 8 / span 5;
  grid-row: 1;
}

.feature-row--flip .feature-row__media {
  grid-column: 1 / span 7;
  grid-row: 1;
}

.feature-row__copy .h-sub + .prose {
  margin-top: 14px;
}

.feature-row__copy .prose + .chip,
.feature-row__copy .prose + .text-link {
  margin-top: 18px;
  display: inline-flex;
}

.checklist {
  margin-top: 18px;
  list-style: none;
}

.checklist li {
  position: relative;
  padding: 9px 0 9px 28px;
  border-top: 1px solid var(--rule);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-2);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 16px;
  width: 12px;
  height: 7px;
  border-left: 2.25px solid var(--signal);
  border-bottom: 2.25px solid var(--signal);
  transform: rotate(-45deg);
}

.checklist li strong {
  color: var(--ink);
  font-weight: 620;
}

/* Steps strip (Sales desk, Procurement desk) */
.desk-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.desk-steps li {
  position: relative;
  padding: 18px 18px 20px;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgb(33 42 52 / 0.07);
}

.desk-steps b {
  display: block;
  font-stretch: 75%;
  font-size: 16px;
  color: var(--readout);
}

.desk-steps strong {
  display: block;
  margin-top: 6px;
  font-stretch: 106%;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
}

.desk-steps span {
  display: block;
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.42;
  color: var(--ink-2);
}

/* Deal-type matrix */
.matrix {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border-radius: var(--radius-plate);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgb(33 42 52 / 0.07);
}

.matrix th,
.matrix td {
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--rule-soft);
}

.matrix thead th {
  border-top: 0;
  background: var(--ground);
  font-weight: 620;
  font-size: 15px;
}

.matrix tbody th {
  font-stretch: 106%;
  font-weight: 700;
  font-size: 16.5px;
  width: 30%;
}

.matrix tbody th small {
  display: block;
  font-stretch: 87.5%;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-3);
}

.matrix td {
  font-size: 15px;
  color: var(--ink-2);
}

.matrix code {
  font-family: inherit;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink);
}

/* Glossary */
.glossary {
  columns: 2;
  column-gap: calc(var(--col-gap) * 2);
}

.glossary div {
  break-inside: avoid;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}

.glossary dt {
  font-stretch: 106%;
  font-weight: 700;
  font-size: 17.5px;
}

.glossary dd {
  margin: 4px 0 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Month rhythm */
.month {
  display: grid;
  grid-template-columns: repeat(31, minmax(0, 1fr));
  gap: 3px;
  margin-top: 18px;
}

.month span {
  aspect-ratio: 1 / 1.25;
  border-radius: 4px;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgb(33 42 52 / 0.06);
  display: grid;
  place-items: end center;
  padding-bottom: 4px;
  font-stretch: 75%;
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.month span.is-job {
  background: var(--ink);
  color: #fff;
  font-weight: 700;
}

.month-key {
  margin-top: 22px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--col-gap);
}

.month-key li {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  font-size: 15.5px;
  line-height: 1.42;
  color: var(--ink-2);
}

.month-key b {
  flex: none;
  width: 3.4em;
  font-stretch: 75%;
  font-size: 17px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Integrations list */
.integrations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--col-gap);
  list-style: none;
}

.integrations li {
  padding: 20px 0 22px;
  border-top: 1.5px solid var(--ink);
}

.integrations strong {
  display: block;
  font-stretch: 112%;
  font-weight: 720;
  font-size: 20px;
  letter-spacing: -0.012em;
}

.integrations p {
  margin-top: 6px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.integrations .chip {
  margin-top: 12px;
}

/* VW greedy fill toy */
.tank {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 8px;
}

.tank__meter {
  display: grid;
  gap: 8px;
}

.tank__glass {
  position: relative;
  height: 150px;
  border-radius: 0 0 14px 14px;
  border: 2px solid var(--ink);
  border-top: 0;
  background: var(--paper);
  overflow: hidden;
}

.tank__need {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 2px dashed var(--ink-3);
}

.tank__fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--readout);
}

.tank__label {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
}

.tank__label b {
  font-stretch: 75%;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

/* Allocation cascade */
.cascade {
  display: grid;
  gap: 12px;
}

.cascade__row {
  display: grid;
  grid-template-columns: 170px 1fr 120px;
  align-items: center;
  gap: 14px;
}

.cascade__who strong {
  display: block;
  font-weight: 650;
  font-size: 15.5px;
}

.cascade__who span {
  font-stretch: 87.5%;
  font-size: 13.5px;
  color: var(--ink-3);
}

.cascade__track {
  position: relative;
  height: 22px;
  border-radius: 6px;
  background: var(--ground);
  overflow: hidden;
}

.cascade__need {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-right: 2px dashed var(--ink-3);
}

.cascade__got {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 6px;
}

.cascade__v {
  text-align: right;
  font-stretch: 75%;
  font-weight: 650;
  font-size: 16.5px;
  font-variant-numeric: tabular-nums;
}

.conserve {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-stretch: 75%;
  font-weight: 650;
  font-size: 17.5px;
  font-variant-numeric: tabular-nums;
}

/* Hours fit (traders) */
.fit {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  align-items: end;
  gap: 3px;
  height: 200px;
  border-bottom: 1.5px solid var(--ink);
  position: relative;
}

.fit__col {
  position: relative;
  height: 100%;
}

.fit__supply {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  background: var(--line-strong);
  border-radius: 3px 3px 0 0;
}

.fit__matched {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  background: var(--readout);
}

.fit__short {
  position: absolute;
  left: 12%;
  right: 12%;
  background: var(--hatch);
  box-shadow: inset 0 0 0 1px rgb(33 42 52 / 0.2);
}

.fit__need {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2.5px solid var(--ink);
}

.fit-axis {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 3px;
  margin-top: 6px;
}

.fit-axis span {
  text-align: center;
  font-stretch: 75%;
  font-size: 12.5px;
  color: var(--ink-3);
}

.fit-sum {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--col-gap);
}

.fit-sum div {
  border-top: 1.5px solid var(--ink);
  padding-top: 10px;
}

.fit-sum dt {
  font-stretch: 87.5%;
  font-size: 14px;
  color: var(--ink-3);
}

.fit-sum dd {
  margin: 2px 0 0;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}

/* Chain (traders) */
.chain {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.chain__party {
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgb(33 42 52 / 0.08);
}

.chain__party strong {
  display: block;
  font-stretch: 106%;
  font-weight: 700;
  font-size: 17px;
}

.chain__party span {
  display: block;
  margin-top: 4px;
  font-size: 14.5px;
  color: var(--ink-3);
}

.chain__party b {
  display: block;
  margin-top: 10px;
  font-stretch: 75%;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.chain__party--trader {
  background: var(--wash);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}

.chain__link {
  display: grid;
  justify-items: center;
  gap: 2px;
  font-stretch: 75%;
  font-size: 13.5px;
  color: var(--ink-3);
  font-weight: 620;
}

.chain__link::before {
  content: "";
  width: 46px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
}

/* Certificates */
.certs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.cert {
  width: 60px;
  height: 76px;
  border-radius: 6px;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--readout);
  display: grid;
  place-items: center;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 13px;
  color: var(--readout);
  position: relative;
}

.cert::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  height: 3px;
  border-radius: 2px;
  background: var(--readout);
}

.cert--carry {
  box-shadow: none;
  outline: 2px dashed var(--ink-3);
  outline-offset: -2px;
  color: var(--ink-3);
  overflow: hidden;
}

.cert--carry::before {
  display: none;
}

.cert--carry i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--mint);
}

.cert--carry em {
  position: relative;
  font-style: normal;
}

/* ---------- Motion: one orchestrated hero load ----------
   Bars rest fully drawn. The draw-in is a CSS animation started at load, so nothing
   waits on a scroll observer or a frame callback to become visible. */

@keyframes wg-rise {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes wg-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.day__col .bar__short {
  transform-origin: bottom;
}

.day.is-animating .day__col .bar,
.day.is-animating .day__col .bar__short {
  animation: wg-rise 520ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 34ms);
}

.day.is-animating .day__overlay,
.day.is-animating .day__marker {
  animation: wg-fade 500ms var(--ease) 760ms both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  html {
    scroll-behavior: auto;
  }

}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .site-nav a {
    padding: 8px 9px;
    font-size: 15px;
  }

  .hero__title {
    grid-column: 1 / -1;
  }

  .hero__clock {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 36px;
    align-items: end;
    padding-top: 0;
  }

  .hero__clock .clock__lines {
    margin-top: 0;
  }

  .hero__lede {
    grid-column: 1 / span 8;
    grid-row: 2;
  }

  .hero__ctas {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: start;
  }
}

@media (max-width: 1024px) {
  .site-nav,
  .site-header__actions .btn--ghost {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .site-header__actions {
    margin-left: auto;
  }

  .site-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--header-h);
    padding: 12px var(--gutter) 24px;
    background: var(--ground);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 24px 40px -24px rgb(33 42 52 / 0.3);
  }

  .site-nav.is-open a {
    padding: 14px 4px;
    font-size: 18px;
    border-bottom: 1px solid var(--rule-soft);
    border-radius: 0;
  }

  .site-nav.is-open a[aria-current="page"]::after {
    display: none;
  }

  .rewire__copy,
  .rewire__chart,
  .carbon__copy,
  .carbon__chart,
  .never__copy,
  .never__list,
  .contact__copy,
  .contact__form,
  .roles__list,
  .roles__detail,
  .room-panel__list,
  .room-panel__shot,
  .statement__doc,
  .statement__side,
  .feature-row__copy,
  .feature-row__media,
  .feature-row--flip .feature-row__copy,
  .feature-row--flip .feature-row__media,
  .instrument__controls,
  .instrument__result,
  .working__energy,
  .working__money,
  .page-hero__title,
  .page-hero__lede,
  .page-hero__aside {
    grid-column: 1 / -1;
  }

  .feature-row--flip .feature-row__copy,
  .feature-row--flip .feature-row__media {
    grid-row: auto;
  }

  .page-hero__aside {
    justify-self: start;
  }

  .section-head > .h-section,
  .section-head > .lede,
  .section-head--split > .lede,
  .section-head--split > .h-section {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .spine__rail {
    display: none;
  }

  .spine__panels {
    grid-column: 1 / -1;
  }

  .stage {
    min-height: 0;
    padding-block: 0 72px;
  }

  .timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 28px;
  }

  .status-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
  }

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

  .site-footer__brand,
  .site-footer__cols {
    grid-column: 1 / -1;
  }

  .explain {
    position: static;
  }

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

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

}

@media (max-width: 720px) {
  body {
    font-size: 16.5px;
  }

  :root {
    --header-h: 64px;
  }

  .brand img {
    height: 21px;
  }

  .site-header__actions .btn--ink {
    display: none;
  }

  .hero__lede {
    grid-column: 1 / -1;
  }

  .hero__clock {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  .day__axis .day__hour:nth-child(odd) {
    visibility: hidden;
  }

  .day__marker-label {
    font-size: 12px;
  }

  .legend {
    font-size: 13px;
  }

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

  .route__line {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }

  .route__line::before {
    left: 50%;
    right: auto;
    top: 30px;
    bottom: 30px;
    width: 3px;
    height: auto;
    margin-left: -1.5px;
  }

  .node__symbol {
    width: 60px;
    height: 60px;
  }

  .ledger .why {
    display: none;
  }

  .timeline {
    grid-template-columns: 1fr 1fr;
  }

  .contrast,
  .contrast tbody,
  .contrast tr,
  .contrast td {
    display: block;
    width: 100%;
  }

  .contrast thead {
    display: none;
  }

  .contrast td:first-child {
    width: 100%;
    padding: 18px 0 4px;
    padding-right: 0;
    font-size: 15.5px;
  }

  .contrast td:last-child {
    border-top: 0;
    padding-top: 0;
  }

  .status-board,
  .nameplate__grid,
  .integrations,
  .month-key,
  .glossary {
    grid-template-columns: 1fr;
    columns: 1;
  }

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

  .tiers-key,
  .fit-sum {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tiers span {
    font-size: 12px;
    padding-inline: 6px;
  }

  .mclock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 20px;
    border-top: 0;
  }

  .mclock li {
    border-top: 2px solid var(--ink);
  }

  .desk-steps {
    grid-template-columns: 1fr;
  }

  .chain {
    grid-template-columns: 1fr;
  }

  .chain__link::before {
    width: 2.5px;
    height: 24px;
  }

  .cascade__row {
    grid-template-columns: 1fr 96px;
  }

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

  .compare-bar__row {
    grid-template-columns: 100px 1fr 64px;
  }

  .fit-axis span:nth-child(odd) {
    visibility: hidden;
  }

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

  .matrix tbody th {
    width: auto;
  }

  .matrix,
  .matrix tbody,
  .matrix tr,
  .matrix th,
  .matrix td {
    display: block;
    width: 100%;
  }

  .matrix thead {
    display: none;
  }

  .matrix td {
    border-top: 0;
    padding-top: 0;
  }

  .matrix td::before {
    content: attr(data-label) ": ";
    font-weight: 650;
    color: var(--ink);
  }
}

/* ---------- Seat-page additions ---------- */

.gap-grid {
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: 4px;
  margin-top: 6px;
}

.gap-grid span {
  aspect-ratio: 1;
  border-radius: 3px;
  outline: 1.5px dashed rgb(33 42 52 / 0.32);
  outline-offset: -1.5px;
  transition: background-color 160ms var(--ease), outline-color 160ms var(--ease);
}

.gap-grid span.is-sold {
  background: var(--readout);
  outline-color: transparent;
}

.gap-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
  font-stretch: 87.5%;
  font-size: 14px;
  color: var(--ink-2);
}

.result-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--col-gap);
  margin-top: 22px;
}

.result-pair div {
  border-top: 1.5px solid var(--ink);
  padding-top: 10px;
}

.result-pair dt {
  font-stretch: 87.5%;
  font-size: 14px;
  color: var(--ink-3);
}

.result-pair dd {
  margin: 2px 0 0;
}

.result-pair .figure-xl {
  font-size: clamp(36px, 3.6vw, 54px);
}

.result-pair .f {
  margin-top: 4px;
  font-stretch: 75%;
  font-size: 14.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.cascade__got--priority {
  background: var(--deep);
}

.cascade__got--prorata {
  background: var(--readout);
}

.cascade__got--fixed {
  background: var(--tou-std);
}

.cascade__got--surplus {
  background: transparent;
  outline: 1.5px dashed rgb(33 42 52 / 0.5);
  outline-offset: -1.5px;
}

.cascade__note {
  margin-top: 14px;
  font-size: 15.5px;
  color: var(--ink-2);
  min-height: 3em;
}

.instrument__head {
  grid-column: 1 / -1;
}

.instrument__head p {
  margin-top: 6px;
  color: var(--ink-2);
  max-width: 46em;
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 560;
  cursor: pointer;
}

.check input {
  width: 18px;
  height: 18px;
  accent-color: var(--signal);
}

.doc-mini {
  background: var(--paper);
  border-radius: var(--radius-doc);
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgb(33 42 52 / 0.06), 0 12px 32px -18px rgb(33 42 52 / 0.25);
}

.doc-mini__head {
  padding-bottom: 12px;
  border-bottom: 3px solid var(--mark);
  font-stretch: 106%;
  font-weight: 700;
  font-size: 17px;
}

.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 32px;
  align-items: start;
}

.split__a {
  grid-column: 1 / span 5;
}

.split__b {
  grid-column: 7 / span 6;
}

.stack-l > * + * {
  margin-top: 18px;
}

.page-next {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--col-gap);
  list-style: none;
}

.page-next a {
  display: block;
  padding: 22px 0 24px;
  border-top: 1.5px solid var(--ink);
  text-decoration: none;
  color: var(--ink);
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}

.page-next a:hover {
  color: var(--deep);
  border-color: var(--signal);
}

.page-next strong {
  display: block;
  font-stretch: 118%;
  font-weight: 740;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.page-next span {
  display: block;
  margin-top: 6px;
  font-size: 15.5px;
  color: var(--ink-2);
}

.cta-band {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 24px;
  align-items: end;
}

.cta-band .h-section {
  grid-column: 1 / span 8;
}

.cta-band .btn-row {
  grid-column: 9 / span 4;
  justify-self: end;
}

.cta-band .lede {
  grid-column: 1 / span 7;
}

.dayline-list {
  list-style: none;
}

.dayline-list li {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  font-size: 15.5px;
}

.dayline-list time {
  flex: none;
  width: 7.5em;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 17px;
}

@media (max-width: 1024px) {
  .split__a,
  .split__b,
  .cta-band .h-section,
  .cta-band .btn-row,
  .cta-band .lede {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .page-next {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 720px) {
  .gap-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .result-pair {
    grid-template-columns: 1fr;
  }

  .tank {
    gap: 12px;
  }
}

@media (max-width: 720px) {
  .chip {
    white-space: normal;
  }

  .doc,
  .doc-mini,
  .instrument,
  .working,
  .route {
    padding: 18px 16px;
  }

  .doc .ledger,
  .doc-mini .ledger,
  .working .ledger {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ledger td + td,
  .ledger th + th {
    padding-left: 10px;
  }

  .ledger .amt {
    font-size: 15.5px;
  }
}

.status-board--3,
.mclock--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .status-board--3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .mclock--3 {
    grid-template-columns: 1fr;
  }
}

/* ---------- The market: history and what's coming ---------- */

.rewire__more {
  grid-column: 1 / -1;
  margin-top: -24px;
}

.shapes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--col-gap);
}

.shape {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding-top: 18px;
  border-top: 3px solid var(--ink);
}

.shape:last-child {
  border-top-color: var(--readout);
}

.shape__years {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.shape__svg {
  width: 100%;
  height: auto;
  margin-block: 8px 4px;
  overflow: visible;
}

.shape__svg text {
  font-family: var(--font);
  font-stretch: 87.5%;
  font-size: 12.5px;
  font-weight: 560;
  fill: var(--ink-2);
}

.shape__svg .t-strong {
  font-stretch: 106%;
  font-weight: 750;
  font-size: 14px;
  fill: var(--ink);
}

.shape__svg .t-soft {
  fill: var(--ink-3);
  font-weight: 500;
}

.shape__svg .t-ahead {
  fill: var(--amber);
  font-weight: 700;
}

.shape__svg .t-band {
  fill: var(--deep);
  font-weight: 650;
  font-size: 12px;
}

.shape__svg .box {
  fill: var(--wash);
  stroke: var(--line-strong);
  stroke-width: 1.5;
}

.shape__svg .band {
  fill: var(--mint);
}

.shape__svg .dash {
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

.shape__svg .l,
.shape__svg .mesh line {
  stroke: var(--ink);
  stroke-width: 1.5;
}

.shape__svg .mesh line {
  stroke: rgb(33 42 52 / 0.38);
}

.shape__svg .n {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 2;
}

.shape__svg .n--sig {
  fill: var(--readout);
  stroke: var(--readout);
}

.shape__svg .n--trader {
  fill: var(--mint);
  stroke: var(--deep);
}

.shape__note {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--col-gap);
  margin-top: clamp(56px, 7vw, 96px);
}

.facts li {
  display: grid;
  align-content: start;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 17px;
  line-height: 1.45;
}

.facts strong {
  font-stretch: 75%;
  font-weight: 750;
  font-size: 1.35em;
  font-variant-numeric: tabular-nums;
  color: var(--deep);
}

.eras {
  display: grid;
  gap: clamp(56px, 7vw, 96px);
}

.era {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 24px;
  align-items: start;
}

.era__head {
  grid-column: 1 / span 4;
  position: sticky;
  top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 28px);
  display: grid;
  gap: 10px;
}

.era__years {
  font-stretch: 70%;
  font-weight: 700;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--readout);
  font-variant-numeric: tabular-nums;
}

.era__sum {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
}

.era__list,
.coming {
  list-style: none;
  position: relative;
}

.era__list {
  grid-column: 6 / span 7;
  border-left: 2px solid var(--ink);
}

.era__list li {
  position: relative;
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  gap: 4px 20px;
  padding: 14px 0 14px 28px;
}

.era__list li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 21px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 4px var(--ground);
}

.era__list time,
.coming__when {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.era__list p {
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 40em;
}

.era-today {
  display: flex;
  justify-content: flex-start;
  padding-left: calc((100% + var(--col-gap)) * 5 / 12);
}

.coming {
  display: grid;
  border-left: 2px dashed rgb(33 42 52 / 0.45);
  margin-left: 4px;
}

.coming__item {
  position: relative;
  display: grid;
  grid-template-columns: 12em minmax(0, 1fr) auto;
  gap: 8px 28px;
  align-items: start;
  padding: 26px 0 26px 30px;
  border-top: 1px solid var(--rule);
}

.coming__item:first-child {
  border-top: 0;
}

.coming__item::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 33px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px dashed var(--ink);
}

.coming__when {
  color: var(--amber);
  padding-top: 4px;
}

.coming__body {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 44em;
}

.coming__body > p {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.coming__means strong {
  color: var(--ink);
  font-weight: 650;
}

.coming__item > .chip {
  margin-top: 6px;
}


@media (max-width: 1024px) {
  .shapes {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }

  .shape {
    max-width: 560px;
  }

  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
  }

  .era__head,
  .era__list {
    grid-column: 1 / -1;
  }

  .era__head {
    position: static;
  }

  .era-today {
    padding-left: 0;
  }

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

  .coming__item > .chip {
    justify-self: start;
    margin-top: 0;
  }
}

@media (max-width: 720px) {
  .facts {
    grid-template-columns: 1fr;
  }

  .era__list li {
    grid-template-columns: 1fr;
    padding-left: 22px;
  }
}

@media (min-width: 1025px) {
  .shape {
    grid-row: span 4;
    grid-template-rows: subgrid;
  }
}

/* ---------- Why Webill Green: the whole chain ---------- */

.section--wash {
  background: var(--wash);
}

.cover {
  margin: 0;
}

.cover__grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: 8px;
  row-gap: 12px;
}

.cover__field {
  grid-row: 1;
  align-self: end;
  position: relative;
  padding: 0 4px 10px;
  border-bottom: 2px solid var(--ink-3);
  font-stretch: 87.5%;
  font-size: 13.5px;
  font-weight: 620;
  line-height: 1.3;
  color: var(--ink-2);
}

.cover__field::before,
.cover__field::after {
  content: "";
  position: absolute;
  bottom: -8px;
  width: 2px;
  height: 8px;
  background: var(--ink-3);
}

.cover__field::before {
  left: 0;
}

.cover__field::after {
  right: 0;
}

.cover__field--mo {
  border-bottom-style: dashed;
  color: var(--amber);
}

.cover__steps {
  grid-row: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  list-style: none;
}

.cover__steps li {
  min-width: 0;
  padding: 14px 12px 16px;
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgb(33 42 52 / 0.08);
}

.cover__steps strong {
  display: block;
  font-stretch: 112%;
  font-weight: 720;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.cover__steps small {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink-3);
}

.cover__steps li.is-planned {
  background: transparent;
  box-shadow: none;
  outline: 1.5px dashed rgb(33 42 52 / 0.45);
  outline-offset: -1.5px;
}

.cover__also {
  display: none;
}

.cover__bar {
  grid-row: 3;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}

.cover__bar-live {
  grid-column: 1 / 10;
  padding: 12px 18px;
  border-radius: 10px 0 0 10px;
  background: var(--readout);
  color: #fff;
  font-weight: 650;
  font-size: 15.5px;
}

.cover__bar-planned {
  grid-column: 10 / 11;
  border-radius: 0 10px 10px 0;
  border: 2px dashed var(--readout);
}

.cover__cap {
  margin-top: 18px;
  max-width: 70em;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

.reasons {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px var(--col-gap);
  margin-top: clamp(56px, 7vw, 96px);
}

.reasons li {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-top: 18px;
  border-top: 1.5px solid var(--ink);
}

.reasons p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
}

.reasons .text-link {
  justify-self: start;
  font-size: 15.5px;
}

.ahead__scale {
  margin-top: 44px;
  font-size: 15px;
  color: var(--ink-3);
}

@media (max-width: 1024px) {
  .reasons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .cover__grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .cover__field,
  .cover__bar-planned {
    display: none;
  }

  .cover__steps {
    display: grid;
    gap: 8px;
  }

  .cover__also {
    display: block;
    margin-top: 6px;
    font-stretch: 87.5%;
    font-size: 13.5px;
    color: var(--ink-2);
  }

  .cover__bar {
    display: block;
    order: -1;
  }

  .cover__bar-live {
    display: block;
    border-radius: 10px;
  }
}

@media (max-width: 720px) {
  .reasons {
    grid-template-columns: 1fr;
  }
}

/* ---------- The Webill edge: nav pill and page ---------- */

.site-nav a.site-nav__edge {
  margin-left: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--mint);
  color: var(--deep);
  font-weight: 650;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}

.site-nav a.site-nav__edge:hover {
  background: var(--line);
  color: var(--deep);
}

.site-nav a.site-nav__edge[aria-current="page"] {
  background: var(--readout);
  color: #fff;
  box-shadow: none;
}

.site-nav a.site-nav__edge[aria-current="page"]::after {
  display: none;
}

.ahead__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  margin-top: 44px;
}

.ahead__foot .ahead__scale {
  margin-top: 0;
}

.edge-rows {
  display: grid;
  gap: clamp(48px, 6vw, 88px);
}

.edge-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 24px;
  align-items: start;
}

.edge-row__copy {
  grid-column: 1 / span 5;
  display: grid;
  gap: 14px;
  align-content: start;
}

.edge-row__copy p {
  color: var(--ink-2);
  max-width: 34em;
}

.edge-row__copy .text-link {
  justify-self: start;
}

.edge-row__proof {
  grid-column: 7 / span 6;
  margin-top: 0;
  min-width: 0;
}

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags li {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--wash);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font-stretch: 87.5%;
  font-size: 14.5px;
  font-weight: 620;
  color: var(--deep);
}

.tags--solid li {
  background: var(--readout);
  box-shadow: none;
  color: #fff;
}

.tags--never li {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--rule);
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: rgb(33 42 52 / 0.35);
}

.edge-sum {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  font-stretch: 87.5%;
  font-weight: 650;
  font-size: 16px;
}

.charges {
  margin: 0;
  display: grid;
}

.charges div {
  display: grid;
  grid-template-columns: 11em minmax(0, 1fr);
  gap: 4px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--rule-soft);
}

.charges div:first-child {
  border-top: 0;
  padding-top: 0;
}

.charges dt {
  font-weight: 650;
}

.charges dd {
  margin: 0;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.ready {
  list-style: none;
  display: grid;
}

.ready li {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--rule-soft);
  font-size: 15.5px;
}

.ready li:first-child {
  border-top: 0;
  padding-top: 0;
}

.ready .chip {
  justify-self: start;
}

.coming--compact .coming__item {
  grid-template-columns: 7.5em minmax(0, 1fr) auto;
  padding-block: 16px;
}

.coming--compact .coming__item::before {
  top: 22px;
}

.coming--compact .coming__body p {
  font-size: 16px;
}

@media (max-width: 1180px) {
  .site-nav a.site-nav__edge {
    margin-left: 4px;
    padding: 7px 11px;
  }
}

@media (max-width: 1024px) {
  .site-nav.is-open a.site-nav__edge {
    margin: 10px 0 0;
    padding: 12px 16px;
    border-radius: 12px;
    border-bottom: 0;
  }

  .edge-row__copy,
  .edge-row__proof {
    grid-column: 1 / -1;
  }

  .coming--compact .coming__item {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .charges div,
  .ready li {
    grid-template-columns: 1fr;
  }
}

/* ---------- Roll-out ---------- */

.travels {
  display: grid;
  gap: 12px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.rollout {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--col-gap);
}

.market {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding-top: 16px;
  border-top: 2px dashed rgb(33 42 52 / 0.45);
}

.market--live {
  border-top: 3px solid var(--readout);
}

.market .chip {
  justify-self: start;
}

.market__step {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 16px;
  color: var(--readout);
  font-variant-numeric: tabular-nums;
}

.grain {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
  height: 18px;
  margin-top: 6px;
}

.grain span {
  border-radius: 3px;
  background: var(--readout);
}

.market:not(.market--live) .grain span {
  background: transparent;
  outline: 1.5px dashed rgb(4 120 87 / 0.6);
  outline-offset: -1.5px;
}

.grain--fine {
  gap: 2px;
}

.grain__label {
  font-stretch: 87.5%;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.35;
}

.market__what,
.market__brings {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

.market__brings strong {
  color: var(--ink);
  font-weight: 650;
}

.rollout__note {
  margin-top: 40px;
  max-width: 60em;
  font-size: 15px;
  color: var(--ink-3);
}

@media (max-width: 1180px) {
  .rollout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 44px;
  }
}

@media (max-width: 720px) {
  .rollout {
    grid-template-columns: 1fr;
  }
}

/* ---------- HubSpot walkthrough form ---------- */

.hs-card {
  background: var(--paper);
  border-radius: var(--radius-plate);
  padding: clamp(22px, 2.8vw, 36px);
  box-shadow: 0 0 0 1px rgb(33 42 52 / 0.07);
  min-height: 220px;
}

.hs-card__status {
  font-size: 15.5px;
  color: var(--ink-3);
}

.hs-card__status--error {
  color: var(--amber);
  font-weight: 560;
}

.hs-embed iframe {
  width: 100% !important;
  border: 0;
}