/* Infrared Project. The type scale is the sequence the radar is drawn from:
   8, 13, 21, 34, 55, 89. Cold green at rest, heat where the beam has just passed. */
:root {
  --rail: 320px;
  --cold: #00cc44;
  --burn: #ff6600;
  --red: #ff2200;
  --hot: #ffeed2;
  --text: #e4ede6;
  --haze: rgba(228, 237, 230, 0.68);
  --halo: 0 1px 2px rgba(0, 6, 4, 0.92), 0 0 21px rgba(0, 8, 5, 0.85);
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 45%, #041a12 0%, #04100c 45%, #030505 100%);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Scanline texture, carried over from the first build. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.05) 3px,
    rgba(0, 0, 0, 0.05) 4px
  );
}

#thermal,
#radar {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#thermal { z-index: 0; }
#radar { z-index: 1; pointer-events: none; }

.stage {
  position: fixed;
  inset: 0;
  z-index: 2;
}

/* Everything the beam can light carries --lit, written per frame from site.js. */
[data-lit] { --lit: 0; }

a { color: inherit; }

/* ---------- nav ---------- */

.nav {
  position: absolute;
  top: 34px;
  right: 34px;
  display: flex;
  align-items: center;
  gap: 21px;
  pointer-events: auto;
}

.nav a {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--haze);
  text-shadow: var(--halo);
  transition: color 180ms ease;
}

.nav a:hover { color: var(--text); }

.nav .nav__signal {
  padding: 8px 13px;
  border: 1px solid rgba(0, 204, 68, 0.32);
  color: var(--cold);
  background: rgba(0, 204, 68, 0.05);
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.nav .nav__signal:hover {
  border-color: rgba(255, 102, 0, 0.7);
  background: rgba(255, 102, 0, 0.08);
  color: var(--burn);
}

/* ---------- left rail: the instrument panel ---------- */

.rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--rail);
  padding: 34px 34px 34px 55px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 34px;
  /* Keeps the micro type legible when a hot pocket drifts underneath it. */
  background: linear-gradient(90deg, rgba(2, 8, 6, 0.76), rgba(2, 8, 6, 0.36) 62%, transparent);
}

.mark {
  display: block;
  text-decoration: none;
}

.mark h1 {
  margin: 0;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.98;
  text-shadow: var(--halo), 0 0 calc(var(--lit) * 26px) rgba(255, 238, 210, calc(var(--lit) * 0.6));
}

.mark__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--cold);
  box-shadow: 0 0 10px var(--cold), 0 0 22px rgba(0, 204, 68, 0.4);
  animation: pulse 3s ease-in-out infinite;
  vertical-align: middle;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.mark__kind,
.method__index,
.status span,
.readout span,
.datum span,
.hero__eyebrow,
.hero__signal,
.target__meta,
.eyebrow,
.founder__index,
.founder__role,
.founder__links dt,
.team-end a {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.mark__kind {
  margin: 13px 0 0;
  color: var(--cold);
  opacity: calc(0.66 + var(--lit) * 0.34);
  text-shadow: var(--halo);
}

.method {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.method li {
  padding-left: 13px;
  border-left: 1px solid rgba(0, 204, 68, calc(0.18 + var(--lit) * 0.72));
  transition: border-color 120ms linear;
}

.method__index {
  display: block;
  color: var(--cold);
  opacity: calc(0.55 + var(--lit) * 0.45);
  text-shadow: var(--halo);
}

.method h2 {
  margin: 8px 0 5px;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
  text-shadow: var(--halo), 0 0 calc(var(--lit) * 22px) rgba(255, 238, 210, calc(var(--lit) * 0.55));
}

.method p,
.status p {
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--haze);
  opacity: calc(0.74 + var(--lit) * 0.26);
  text-shadow: var(--halo);
}

.status p + p { margin-top: 8px; }

.status span {
  display: block;
  color: var(--cold);
  opacity: 0.66;
}

/* ---------- hero: set inside the 89 square, placed by site.js ---------- */

.hero {
  position: absolute;
  max-width: 620px;
}

/* A soft pocket of cold under the statement, so a passing bloom cannot swallow it. */
.hero::before {
  content: "";
  position: absolute;
  inset: -34px -55px -34px -34px;
  z-index: -1;
  background: radial-gradient(110% 90% at 25% 45%, rgba(2, 8, 6, 0.78), rgba(2, 8, 6, 0.3) 55%, transparent 78%);
}

.hero__eyebrow {
  margin: 0 0 21px;
  color: var(--cold);
  opacity: calc(0.7 + var(--lit) * 0.3);
  text-shadow: var(--halo);
}

.hero__statement {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-shadow: var(--halo), 0 0 calc(var(--lit) * 34px) rgba(255, 238, 210, calc(var(--lit) * 0.45));
}

/* The hottest word on the page. */
.hero__statement em {
  display: block;
  font-style: italic;
  padding-left: 0.34em;
  color: var(--red);
  text-shadow: 0 0 34px rgba(255, 34, 0, 0.5), 0 0 89px rgba(255, 102, 0, 0.25);
}

.hero__body {
  margin: 21px 0 0;
  max-width: 34em;
  font-size: 12px;
  line-height: 1.85;
  color: var(--haze);
  opacity: calc(0.8 + var(--lit) * 0.2);
  text-shadow: var(--halo);
}

.hero__signal {
  display: inline-block;
  margin-top: 21px;
  padding-bottom: 5px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 204, 68, calc(0.3 + var(--lit) * 0.5));
  pointer-events: auto;
  text-shadow: var(--halo);
}

.hero__signal span {
  margin-left: 8px;
  display: inline-block;
  transition: transform 200ms ease;
}

.hero__signal:hover span { transform: translateX(5px); }

/* ---------- products, plotted on the spiral ---------- */

.targets__label {
  position: absolute;
  margin: 0;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cold);
  opacity: 0.7;
  text-shadow: var(--halo);
  white-space: nowrap;
}

.target {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  text-decoration: none;
  pointer-events: auto;
  white-space: nowrap;
  text-shadow: var(--halo);
}

button.target { cursor: pointer; }

.target__name {
  display: block;
  font-family: var(--display);
  font-size: 21px;
  line-height: 1;
  color: var(--text);
  transition: color 180ms ease;
}

.target__meta {
  display: block;
  margin-top: 6px;
  font-size: 8px;
  color: var(--burn);
  opacity: calc(0.62 + var(--lit) * 0.38);
}

.target:hover .target__name,
.target:focus-visible .target__name { color: var(--burn); }

/* ---------- products on the spiral ----------
   A product sits ON the curve rather than beside it: its mark replaces the
   blip the radar would otherwise draw, and the label reads outward from it.
   site.js centres .target--badge on its spiral point and flips the label to
   whichever side has room. */
.target--badge {
  display: flex;
  align-items: center;
  gap: 11px;
}

.target__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 96, 48, calc(0.30 + var(--lit) * 0.55));
  background: rgba(10, 6, 4, 0.72);
  border-radius: 2px;
  transition: border-color 180ms ease, transform 180ms ease;
}

.target--badge:hover .target__mark,
.target--badge:focus-visible .target__mark {
  border-color: var(--burn);
  transform: scale(1.08);
}

/* The mark keeps its own brand colour, so the product reads as itself even
   while the studio's thermal palette runs behind it. */

.target__text { display: block; }

/* ---------- sheets ---------- */

.sheet {
  margin: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  width: min(620px, calc(100vw - 42px));
  max-height: calc(100vh - 42px);
  overflow: visible;
}

.sheet::backdrop {
  background: rgba(1, 6, 4, 0.74);
  backdrop-filter: blur(3px);
}

.sheet__body {
  position: relative;
  padding: 44px 44px 34px;
  max-height: calc(100vh - 42px);
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(4, 12, 9, 0.97), rgba(2, 7, 5, 0.98));
  border: 1px solid rgba(0, 204, 68, 0.28);
  box-shadow: 0 0 89px rgba(0, 0, 0, 0.6), 0 0 55px rgba(255, 72, 0, 0.07) inset;
}

/* The full thermal spectrum, carried over from the first build. */
.sheet__body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #0055ee, #00bbcc, #00cc44, #aaee00, #ff6600, #ff2200);
}

.sheet__close {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(0, 204, 68, 0.2);
  background: none;
  color: var(--haze);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}

.sheet__close:hover {
  color: var(--burn);
  border-color: rgba(255, 102, 0, 0.6);
}

.sheet__eyebrow {
  margin: 0 0 13px;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cold);
  opacity: 0.8;
}

.sheet__title {
  margin: 0 0 21px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 42px;
  line-height: 1;
}

.sheet__lede {
  margin: 0;
  font-size: 12px;
  line-height: 1.85;
  color: var(--haze);
}

.sheet__list {
  margin: 21px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.sheet__list li {
  display: flex;
  gap: 13px;
  padding-top: 13px;
  border-top: 1px solid rgba(0, 204, 68, 0.14);
}

.sheet__list span {
  flex-shrink: 0;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--cold);
  opacity: 0.7;
  padding-top: 4px;
}

.sheet__list p {
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--haze);
}

.sheet__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 21px;
  margin-top: 34px;
  padding-top: 21px;
  border-top: 1px solid rgba(0, 204, 68, 0.16);
}

.sheet__signal {
  padding: 12px 18px;
  border: 1px solid rgba(0, 204, 68, 0.35);
  background: rgba(0, 204, 68, 0.05);
  color: var(--cold);
  text-decoration: none;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.sheet__signal span {
  margin-left: 8px;
  display: inline-block;
  transition: transform 200ms ease;
}

.sheet__signal:hover {
  border-color: rgba(255, 102, 0, 0.7);
  background: rgba(255, 102, 0, 0.08);
  color: var(--burn);
}

.sheet__signal:hover span { transform: translateX(4px); }

.sheet__note {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--haze);
  opacity: 0.6;
}

/* ---------- annotations ---------- */

.datum {
  position: absolute;
  margin: 0;
  font-size: 8px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cold);
  opacity: calc(0.6 + var(--lit) * 0.4);
  text-shadow: var(--halo);
  white-space: nowrap;
}

.datum span {
  color: var(--text);
  opacity: 0.75;
  margin-right: 8px;
}

/* Units keep their own case: uppercase turns µ into a Greek capital. */
.asis {
  text-transform: none !important;
  letter-spacing: 0.2em;
}

.readout {
  position: absolute;
  left: var(--rail);
  right: 34px;
  bottom: 21px;
  display: flex;
  gap: 34px;
  justify-content: flex-end;
  color: var(--haze);
  opacity: 0.62;
  text-shadow: var(--halo);
}

/* ---------- team page ---------- */

body.page-doc {
  overflow-y: auto;
}

body.page-doc .stage {
  position: relative;
  inset: auto;
  min-height: 100vh;
  padding: 34px 55px 55px;
  display: flex;
  flex-direction: column;
  gap: 55px;
}

body.page-doc .nav { position: fixed; }
body.page-doc #radar { opacity: 0.4; }

.page-intro {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 55px;
  align-items: end;
  padding-top: 89px;
  border-bottom: 1px solid rgba(0, 204, 68, 0.14);
  padding-bottom: 34px;
}

.eyebrow {
  display: block;
  margin: 0 0 21px;
  color: var(--cold);
  opacity: 0.72;
  text-shadow: var(--halo);
}

.page-intro h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 76px);
  line-height: 0.94;
  letter-spacing: -0.01em;
  text-shadow: var(--halo);
}

.page-intro h1 em {
  display: block;
  font-style: italic;
  color: var(--red);
  text-shadow: 0 0 34px rgba(255, 34, 0, 0.45);
}

.page-intro p {
  margin: 0;
  max-width: 42em;
  font-size: 12px;
  line-height: 1.85;
  color: var(--haze);
  text-shadow: var(--halo);
}

.page-intro strong {
  color: var(--text);
  font-weight: 400;
}

.founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(0, 204, 68, 0.14);
  border: 1px solid rgba(0, 204, 68, 0.14);
}

.founder {
  position: relative;
  overflow: hidden;
  background: rgba(3, 8, 6, 0.72);
  min-height: 520px;
}

.founder__thermal {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 62%;
  transform: translate(-50%, -50%) scale(1.06);
  opacity: 0.16;
  transition: opacity 700ms ease, transform 700ms ease;
}

.founder__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3, 8, 6, 0.98) 20%, rgba(3, 8, 6, 0.82) 55%, rgba(3, 8, 6, 0.5) 100%);
  transition: opacity 600ms ease;
}

.founder__bloom {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 85%, rgba(255, 72, 0, 0.22) 0%, rgba(255, 40, 0, 0.08) 42%, transparent 70%);
  transition: opacity 600ms ease;
}

.founder:hover .founder__thermal,
.founder:focus-within .founder__thermal {
  opacity: 0.62;
  transform: translate(-50%, -50%) scale(1);
}

.founder:hover .founder__veil,
.founder:focus-within .founder__veil { opacity: 0.72; }

.founder:hover .founder__bloom,
.founder:focus-within .founder__bloom { opacity: 1; }

.founder__body {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 34px;
  display: flex;
  flex-direction: column;
}

.founder__index {
  display: block;
  color: var(--cold);
  opacity: calc(0.5 + var(--lit) * 0.5);
  margin-bottom: auto;
}

.founder__name {
  margin: 34px 0 8px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 42px;
  line-height: 1;
  text-shadow: var(--halo), 0 0 calc(var(--lit) * 26px) rgba(255, 238, 210, calc(var(--lit) * 0.5));
}

.founder__role {
  margin: 0 0 21px;
  color: var(--burn);
  opacity: 0.85;
}

.founder__bio {
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--haze);
  text-shadow: var(--halo);
}

.founder__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 21px 0 0;
  padding: 0;
  list-style: none;
}

.founder__tags li {
  padding: 5px 10px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--haze);
  border: 1px solid rgba(0, 204, 68, 0.22);
}

.founder__links {
  margin: 21px 0 0;
  padding-top: 13px;
  border-top: 1px solid rgba(0, 204, 68, 0.16);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.founder__links div {
  display: flex;
  align-items: baseline;
  gap: 13px;
}

.founder__links dt {
  width: 72px;
  flex-shrink: 0;
  color: var(--cold);
  opacity: 0.7;
}

.founder__links dd {
  margin: 0;
  font-size: 11px;
}

.founder__links a {
  color: var(--haze);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 204, 68, 0.2);
  transition: color 180ms ease, border-color 180ms ease;
}

.founder__links a:hover {
  color: var(--burn);
  border-color: rgba(255, 102, 0, 0.6);
}

.team-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  padding-top: 8px;
}

.team-end p {
  margin: 0;
  max-width: 42em;
  font-size: 12px;
  line-height: 1.8;
  color: var(--haze);
  text-shadow: var(--halo);
}

.team-end a {
  padding: 10px 16px;
  border: 1px solid rgba(0, 204, 68, 0.32);
  color: var(--cold);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.team-end a:hover {
  border-color: rgba(255, 102, 0, 0.7);
  background: rgba(255, 102, 0, 0.08);
  color: var(--burn);
}

.page-foot {
  margin-top: auto;
  padding-top: 21px;
  border-top: 1px solid rgba(0, 204, 68, 0.14);
  display: flex;
  justify-content: space-between;
  gap: 21px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--haze);
  opacity: 0.6;
}

/* ---------- product page ---------- */

.band {
  padding-top: 34px;
}

/* The first band takes its rule from the page intro above it. */
.band + .band {
  border-top: 1px solid rgba(0, 204, 68, 0.14);
}

.band__title {
  margin: 0 0 34px;
  max-width: 20em;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.02;
  text-shadow: var(--halo);
}

.band__title em {
  font-style: italic;
  color: var(--burn);
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  /* Takes however many steps the section has, four or three. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: rgba(0, 204, 68, 0.14);
  border: 1px solid rgba(0, 204, 68, 0.14);
}

.steps li {
  background: rgba(3, 8, 6, 0.72);
  padding: 21px;
}

.steps b {
  display: block;
  margin-bottom: 13px;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.34em;
  color: var(--cold);
  opacity: 0.7;
}

.steps h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1;
}

.steps p {
  margin: 0;
  font-size: 11px;
  line-height: 1.75;
  color: var(--haze);
}

.steps .agent {
  display: block;
  margin-top: 13px;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--burn);
  opacity: 0.7;
}

.band__lede {
  margin: -13px 0 34px;
  max-width: 46em;
  font-size: 12px;
  line-height: 1.85;
  color: var(--haze);
  text-shadow: var(--halo);
}

/* A single record from the product, rendered in the studio's own palette. */
.card {
  padding: 21px;
  background: linear-gradient(180deg, rgba(5, 14, 10, 0.94), rgba(2, 7, 5, 0.96));
  border: 1px solid rgba(0, 204, 68, 0.22);
}

.call {
  margin-top: 21px;
  max-width: 720px;
}

.transcript {
  margin: 17px 0 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.transcript div {
  display: flex;
  gap: 13px;
}

.transcript dt {
  flex-shrink: 0;
  width: 76px;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cold);
  opacity: 0.75;
  padding-top: 4px;
}

.transcript div:nth-child(even) dt {
  color: var(--haze);
  opacity: 0.55;
}

.transcript dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text);
}

.transcript div:nth-child(even) dd { color: var(--haze); }

.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 21px;
}

.card__name {
  margin: 0;
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
}

.card__meta {
  margin: 5px 0 0;
  font-size: 8px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--haze);
  opacity: 0.7;
}

.card__score {
  margin: 0;
  text-align: right;
  font-size: 26px;
  line-height: 1;
  color: var(--burn);
}

.card__score span {
  display: block;
  margin-bottom: 5px;
  font-size: 8px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cold);
  opacity: 0.7;
}

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 17px 0 0;
  padding: 0;
  list-style: none;
}

.card__tags li {
  padding: 4px 8px;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--haze);
  border: 1px solid rgba(0, 204, 68, 0.2);
}

.card__subject {
  margin: 17px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.1;
}

.card__why,
.card__draft {
  margin: 13px 0 0;
  font-size: 11px;
  line-height: 1.75;
  color: var(--haze);
}

.card__why span {
  color: var(--cold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 8px;
  margin-right: 8px;
}

.card__draft {
  padding: 13px;
  color: var(--text);
  border-left: 1px solid rgba(255, 102, 0, 0.5);
  background: rgba(255, 102, 0, 0.05);
}

.crew {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(0, 204, 68, 0.14);
  border: 1px solid rgba(0, 204, 68, 0.14);
}

.crew li {
  background: rgba(3, 8, 6, 0.72);
  padding: 21px;
}

.crew dt {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--burn);
  margin-bottom: 8px;
}

.crew dd {
  margin: 0;
  font-size: 11px;
  line-height: 1.75;
  color: var(--haze);
}

.trades {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 21px;
  padding: 0;
  list-style: none;
}

.trades li {
  padding: 8px 13px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--haze);
  border: 1px solid rgba(0, 204, 68, 0.22);
}

.origin {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 55px;
  align-items: start;
}

.origin p {
  margin: 0 0 13px;
  font-size: 12px;
  line-height: 1.85;
  color: var(--haze);
  text-shadow: var(--halo);
}

.origin strong {
  color: var(--text);
  font-weight: 400;
}

.origin__note {
  padding: 21px;
  border: 1px solid rgba(0, 204, 68, 0.16);
  font-size: 11px;
  line-height: 1.8;
  color: var(--haze);
}

.trades + .origin__note {
  max-width: 48em;
}

.origin__note b {
  display: block;
  margin-bottom: 8px;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cold);
  opacity: 0.75;
}

/* ---------- mailing list ---------- */

.signup__form {
  display: flex;
  gap: 8px;
  max-width: 500px;
}

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

.signup__form input {
  flex: 1;
  min-width: 0;
  padding: 13px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(0, 204, 68, 0.24);
  transition: border-color 180ms ease;
}

.signup__form input::placeholder { color: rgba(228, 237, 230, 0.32); }

.signup__form input:focus {
  outline: none;
  border-color: rgba(0, 204, 68, 0.7);
}

.signup__form button {
  padding: 13px 21px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cold);
  background: rgba(0, 204, 68, 0.05);
  border: 1px solid rgba(0, 204, 68, 0.35);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.signup__form button:hover:not(:disabled) {
  border-color: rgba(255, 102, 0, 0.7);
  background: rgba(255, 102, 0, 0.08);
  color: var(--burn);
}

.signup__form button:disabled { opacity: 0.4; cursor: default; }

.signup__state {
  margin: 13px 0 0;
  min-height: 1.4em;
  font-size: 11px;
  color: var(--haze);
}

.signup__state[data-tone="done"] { color: var(--cold); }
.signup__state[data-tone="warn"] { color: var(--burn); }

/* ---------- narrow screens ---------- */

body[data-compact="true"] { overflow-y: auto; }

body[data-compact="true"] #radar { opacity: 0.5; }

body[data-compact="true"] .stage {
  position: relative;
  inset: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 55px;
  padding: 89px 21px 21px;
}

body[data-compact="true"] .stage::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(2, 8, 6, 0.82), rgba(2, 8, 6, 0.62));
}

body[data-compact="true"] .nav {
  position: fixed;
  top: 21px;
  right: 21px;
  left: 21px;
  justify-content: flex-end;
  z-index: 3;
}

/* The rail dissolves so its blocks reflow into one column. */
body[data-compact="true"] .rail {
  display: contents;
}

body[data-compact="true"] .hero,
body[data-compact="true"] .readout,
body[data-compact="true"] .targets__label,
body[data-compact="true"] .target {
  position: static;
  width: auto;
  max-width: none;
}

body[data-compact="true"] .mark { order: 1; }
body[data-compact="true"] .hero { order: 2; }
body[data-compact="true"] .targets { order: 3; }
body[data-compact="true"] .method { order: 4; }
body[data-compact="true"] .status { order: 5; }

body[data-compact="true"] .targets {
  display: flex;
  flex-direction: column;
  gap: 21px;
}

body[data-compact="true"] .targets__label { margin-bottom: 0; }

body[data-compact="true"] .method p,
body[data-compact="true"] .hero__body {
  max-width: 58ch;
}

body[data-compact="true"] .readout {
  order: 6;
  flex-wrap: wrap;
  gap: 13px 21px;
  justify-content: flex-start;
  margin-top: auto;
}

body[data-compact="true"] .datum { display: none; }

body[data-compact="true"] .sheet__body { padding: 34px 21px 21px; }
body[data-compact="true"] .sheet__title { font-size: 32px; }
body[data-compact="true"] .sheet__foot { flex-direction: column; align-items: flex-start; gap: 13px; }

body[data-compact="true"].page-doc .stage { padding: 89px 21px 21px; }
body[data-compact="true"] .page-intro,
body[data-compact="true"] .origin { grid-template-columns: 1fr; gap: 21px; }
body[data-compact="true"] .steps { grid-template-columns: 1fr; }
body[data-compact="true"] .signup__form { flex-direction: column; }
body[data-compact="true"] .crew { grid-template-columns: 1fr; }
body[data-compact="true"] .founders { grid-template-columns: 1fr; }
body[data-compact="true"] .founder { min-height: 0; }
body[data-compact="true"] .founder__thermal { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
body[data-compact="true"] .founder__bloom { opacity: 0.7; }
body[data-compact="true"] .founder__name { margin-top: 21px; font-size: 34px; }
body[data-compact="true"] .team-end { flex-direction: column; align-items: flex-start; gap: 21px; }
body[data-compact="true"] .page-foot { flex-direction: column; gap: 8px; }

/* ---------------------------------------------------------------------------
   writeHand: the two hires, and who each one is for.
   --------------------------------------------------------------------------- */

.hires {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: rgba(0, 204, 68, 0.14);
  border: 1px solid rgba(0, 204, 68, 0.14);
}

.hire {
  background: rgba(3, 8, 6, 0.72);
  padding: 25px 21px;
  display: flex;
  flex-direction: column;
}

/* The bundle is the recommendation, so it carries the warm edge rather than
   a badge that would have to say so in words. */
.hire--pair {
  background: rgba(10, 6, 3, 0.78);
  box-shadow: inset 0 1px 0 var(--burn);
}

.hire__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.hire__head h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--hot);
}

/* Three glyphs are always rendered; the unearned ones are dimmed, so the tiers
   read as a scale at a glance instead of as three unrelated prices. */
.hire__cost {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--burn);
  white-space: nowrap;
}

.hire__cost i {
  font-style: normal;
  opacity: 0.22;
}

.hire__line {
  margin: 0 0 13px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cold);
}

.hire__body {
  margin: 0 0 17px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--haze);
}

.hire__does {
  margin: 0 0 21px;
  padding: 0;
  list-style: none;
}

.hire__does li {
  position: relative;
  padding-left: 17px;
  margin-bottom: 7px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text);
}

.hire__does li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 1px;
  background: var(--burn);
}

.hire__for {
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid rgba(0, 204, 68, 0.14);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--haze);
}

.fits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: rgba(0, 204, 68, 0.14);
  border: 1px solid rgba(0, 204, 68, 0.14);
  margin-bottom: 21px;
}

.fit {
  background: rgba(3, 8, 6, 0.72);
  padding: 21px;
}

.fit b {
  display: block;
  margin-bottom: 9px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--burn);
}

.fit p {
  margin: 0 0 17px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--haze);
}

.fit .trades {
  margin-bottom: 0;
}

/* Roadmap as a thermal read: what is hot is shipping, what is cold is coming. */
.scope {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: rgba(0, 204, 68, 0.14);
  border: 1px solid rgba(0, 204, 68, 0.14);
}

.scope li {
  background: rgba(3, 8, 6, 0.72);
  padding: 21px;
  position: relative;
}

.scope li::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
}

.scope--hot::before { background: var(--burn); }
.scope--warm::before { background: var(--cold); opacity: 0.7; }
.scope--cold::before { background: var(--haze); opacity: 0.28; }

.scope__sig {
  display: inline-block;
  margin-bottom: 11px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.scope--hot .scope__sig { color: var(--burn); }
.scope--warm .scope__sig { color: var(--cold); }
.scope--cold .scope__sig { color: var(--haze); opacity: 0.6; }

.scope b {
  display: block;
  margin-bottom: 9px;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 400;
  color: var(--hot);
}

.scope p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--haze);
}

.hero__cta {
  display: inline-block;
  margin-left: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burn);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 102, 0, 0.42);
  padding-bottom: 2px;
  white-space: nowrap;
}

.hero__cta:hover { border-bottom-color: var(--burn); }

/* ---------------------------------------------------------------------------
   Legal page. Four documents, one page. The index reads as instrument panels;
   each one opens the document in the sheet the site already had.
   --------------------------------------------------------------------------- */

.legal-index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(0, 204, 68, 0.14);
  border: 1px solid rgba(0, 204, 68, 0.14);
}

/* Now an <a> rather than a <button>: the anchor default would underline the
   whole card, and the card itself is the affordance. */
.legal-card {
  text-decoration: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 34px;
  min-height: 233px;
  text-align: left;
  background: rgba(3, 8, 6, 0.72);
  border: 0;
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 300;
  cursor: pointer;
  transition: background 200ms ease;
}

/* The sweep lights the card the same way it lights everything else. */
.legal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    145deg,
    rgba(255, 102, 0, calc(var(--lit, 0) * 0.09)),
    rgba(255, 34, 0, calc(var(--lit, 0) * 0.02)) 60%,
    transparent
  );
}

.legal-card:hover,
.legal-card:focus-visible {
  background: rgba(6, 14, 10, 0.86);
  outline: none;
}

.legal-card__index {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.34em;
  color: var(--cold);
  opacity: 0.7;
}

.legal-card__name {
  font-family: var(--display);
  font-size: 34px;
  line-height: 1;
  text-shadow: var(--halo);
  transition: color 200ms ease;
}

.legal-card:hover .legal-card__name,
.legal-card:focus-visible .legal-card__name { color: var(--burn); }

.legal-card__note {
  max-width: 34ch;
  font-size: 12px;
  line-height: 1.8;
  color: var(--haze);
}

.legal-card__stamp {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid rgba(0, 204, 68, 0.14);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--haze);
  opacity: 0.55;
}

/* One contact block for all four documents, instead of four copies of it. */
.legal-contact {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 55px;
  padding-top: 8px;
}

.legal-contact p {
  margin: 0;
  max-width: 46em;
  font-size: 12px;
  line-height: 1.8;
  color: var(--haze);
  text-shadow: var(--halo);
}

.legal-contact address {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 21px;
  border: 1px solid rgba(0, 204, 68, 0.2);
  font-style: normal;
  font-size: 12px;
  color: var(--haze);
  white-space: nowrap;
}

.legal-contact address a {
  color: var(--cold);
  text-decoration: none;
  transition: color 180ms ease;
}

.legal-contact address a:hover { color: var(--burn); }

/* ---------- the documents themselves ---------- */

.sheet--legal { width: min(760px, calc(100vw - 42px)); }

.legal-doc__meta {
  margin: 0 0 21px;
  padding-bottom: 21px;
  border-bottom: 1px solid rgba(0, 204, 68, 0.16);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--haze);
  opacity: 0.7;
}

.legal-doc {
  font-size: 12px;
  line-height: 1.85;
  color: var(--haze);
}

.legal-doc h3 {
  margin: 34px 0 13px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.21em;
  text-transform: uppercase;
  color: var(--cold);
  text-shadow: var(--halo);
}

.legal-doc p { margin: 0 0 13px; }

.legal-doc ul {
  margin: 0 0 13px;
  padding: 0 0 0 21px;
  list-style: none;
}

.legal-doc li {
  position: relative;
  margin-bottom: 8px;
}

.legal-doc li::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 9px;
  width: 3px;
  height: 3px;
  background: var(--cold);
  opacity: 0.6;
}

.legal-doc strong {
  color: var(--text);
  font-weight: 400;
}

.legal-doc a {
  color: var(--cold);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 204, 68, 0.3);
  transition: color 180ms ease, border-color 180ms ease;
}

.legal-doc a:hover {
  color: var(--burn);
  border-color: rgba(255, 102, 0, 0.6);
}

/* The one clause that should stop the eye. */
.legal-doc__pull {
  margin: 0 0 13px;
  padding: 13px 21px;
  border-left: 2px solid var(--burn);
  background: rgba(255, 102, 0, 0.05);
  color: var(--text);
}

.legal-doc__seealso {
  margin: 34px 0 0;
  padding-top: 21px;
  border-top: 1px solid rgba(0, 204, 68, 0.16);
  font-size: 11px;
}

/* The four documents are their own pages now, so the contact block legal.html carries has
   to travel with them: each one sends the reader to "the bottom of this page". */
.legal-doc + .legal-contact { margin-top: 34px; }

/* ---------- the opt-in replica, sms-terms.html ----------
   Number setup lives behind a sign-in, so a carrier reviewing the campaign cannot walk
   the consent flow themselves. These blocks restate it on the open web: the same screen,
   the same disclosure text, the same gated button. Drawn in the studio's palette rather
   than the app's, so it reads as documentation and not as a live product surface. */

.legal-doc .optin-note {
  margin: 0 0 21px;
  padding: 13px 21px;
  border: 1px solid rgba(0, 204, 68, 0.16);
  border-left: 2px solid var(--cold);
  background: rgba(0, 0, 0, 0.28);
  font-size: 11px;
  color: var(--haze);
}

.optin-flow {
  counter-reset: optin;
  margin: 0 0 21px;
  padding: 0;
  list-style: none;
}

.legal-doc .optin-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 21px;
  margin-bottom: 34px;
}

/* The step number is counted rather than written, so it cannot drift out of step with
   the markup. It takes over the pseudo-element the document gives every other list
   item as a bullet, which is why the bullet's own properties are all unset here. */
.legal-doc .optin-step::before {
  counter-increment: optin;
  content: counter(optin, decimal-leading-zero);
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 34px;
  border: 1px solid rgba(0, 204, 68, 0.24);
  background: none;
  opacity: 1;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--cold);
}

.optin-step__body { min-width: 0; }

.optin-step__body h4 {
  margin: 8px 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text);
}

.optin-step__body > p {
  margin: 0 0 13px;
  font-size: 11px;
  color: var(--haze);
}

.optin-screen,
.optin-thread {
  max-width: 420px;
  border: 1px solid rgba(0, 204, 68, 0.16);
  background: rgba(3, 8, 6, 0.72);
}

.legal-doc .optin-screen__bar {
  margin: 0;
  padding: 8px 13px;
  border-bottom: 1px solid rgba(0, 204, 68, 0.16);
  background: rgba(0, 204, 68, 0.04);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--haze);
  opacity: 0.7;
}

.optin-screen__body { padding: 21px; }

.optin-screen__label {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--haze);
  opacity: 0.7;
}

.legal-doc .optin-screen__field {
  margin: 0 0 21px;
  padding: 13px;
  border: 1px solid rgba(0, 204, 68, 0.24);
  background: rgba(0, 0, 0, 0.35);
  font-size: 12px;
  color: var(--text);
}

.optin-consent {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px;
  border: 1px solid rgba(0, 204, 68, 0.24);
  background: rgba(0, 0, 0, 0.35);
}

.optin-consent input {
  flex-shrink: 0;
  margin: 2px 0 0;
  width: 13px;
  height: 13px;
  accent-color: var(--cold);
}

.optin-consent__text {
  font-size: 11px;
  line-height: 1.75;
  color: var(--haze);
}

/* Cut from the same pattern as the signup button, so the one control in the document
   reads as this site's and not as a second design. */
.optin-cta {
  width: 100%;
  margin-top: 21px;
  padding: 13px 21px;
  border: 1px solid rgba(0, 204, 68, 0.35);
  background: rgba(0, 204, 68, 0.05);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cold);
  cursor: default;
  transition: opacity 180ms ease;
}

.optin-cta:disabled { opacity: 0.32; }

.legal-doc .optin-hint {
  margin: 13px 0 0;
  font-size: 10px;
  color: var(--haze);
  opacity: 0.7;
}

.optin-thread { padding: 13px; }

.legal-doc .optin-thread__from {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--haze);
  opacity: 0.7;
}

/* What the agent sends sits cold on the left. What you send back carries the heat. */
.legal-doc .optin-bubble {
  margin: 0 0 8px;
  padding: 13px;
  border: 1px solid rgba(0, 204, 68, 0.16);
  background: rgba(0, 204, 68, 0.05);
  font-size: 11px;
  line-height: 1.75;
  color: var(--haze);
}

.legal-doc .optin-bubble:last-child { margin-bottom: 0; }

.legal-doc .optin-bubble--out {
  margin-left: 55px;
  border-color: rgba(255, 102, 0, 0.3);
  background: rgba(255, 102, 0, 0.06);
  color: var(--text);
}

body[data-compact="true"] .legal-doc .optin-step {
  grid-template-columns: 1fr;
  gap: 8px;
}

body[data-compact="true"] .legal-doc .optin-step::before { width: 34px; }
body[data-compact="true"] .legal-doc .optin-bubble--out { margin-left: 21px; }

/* A cross-reference reads as a link but swaps the open sheet, so it is a button. */
.legal-jump {
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 204, 68, 0.3);
  background: none;
  color: var(--cold);
  font-family: var(--mono);
  font-size: inherit;
  font-weight: 300;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}

.legal-jump:hover {
  color: var(--burn);
  border-color: rgba(255, 102, 0, 0.6);
}

body[data-compact="true"] .legal-index { grid-template-columns: 1fr; }
body[data-compact="true"] .legal-card { padding: 21px; min-height: 0; }
body[data-compact="true"] .legal-card__name { font-size: 28px; }
body[data-compact="true"] .legal-contact { flex-direction: column; gap: 21px; }
body[data-compact="true"] .legal-contact address { white-space: normal; }
body[data-compact="true"] .legal-doc h3 { margin-top: 27px; }

/* The legal link sits in the footer rule, quiet until you go looking for it. */
.page-foot a {
  color: inherit;
  text-decoration: none;
  letter-spacing: inherit;
  transition: color 180ms ease;
}

.page-foot a:hover { color: var(--cold); }

/* ---------- legal links ----------
   The four legal documents are their own pages, and every page has to reach
   them. Laid out two-by-two rather than as one four-wide row so the block
   stays compact at the foot of the page and does not crowd the copyright
   line it sits beside. Sized from whichever footer hosts it, so it matches
   its neighbours instead of introducing a third type size. */
.legal-links {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 5px 20px;
  align-items: baseline;
  font-size: inherit;
  letter-spacing: inherit;
}

/* The home readout and the product-page footers set their small caps on
   span, which these links are not, so the treatment is restated here. */
.readout .legal-links,
.end .legal-links {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.legal-links a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 204, 68, 0.4);
  letter-spacing: inherit;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.legal-links a:hover {
  color: var(--cold);
  text-decoration-color: currentColor;
}

/* Keep the readout on one line per group rather than wrapping mid-block. */
.readout {
  flex-wrap: wrap;
  gap: 12px 22px;
}

/* On the document pages the row sits under the footer rule, so it takes its
   own spacing rather than a second border. */
nav.page-foot.legal-links {
  border-top: 0;
  padding-top: 10px;
  margin-top: 0;
  justify-content: flex-start;
}

/* The single link to the legal hub, on pages that do not list the four
   documents individually. Underlined so it reads as the way in. */
.legal-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 204, 68, 0.45);
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.legal-link:hover {
  color: var(--cold);
  text-decoration-color: currentColor;
}