/* styles.css
 *
 * One accent colour, one off-white, one black.
 * To change the accent, change the single --accent line below.
 * Everything else on the page derives from it.
 * No gradients live in this file. The only gradients on the site are
 * inside the chrome photographs.
 */

/* ---------- fonts, served from this site so a slow phone loads once ---------- */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrainsmono-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- the whole palette ---------- */

:root {
  --accent: #1a3bd2;
  --steel: linear-gradient(100deg, #b6b9bf 0%, #e9ebee 32%, #c9ccd2 58%, #f0f1f3 100%);
  --steel-lines: repeating-linear-gradient(90deg, rgba(0,0,0,0.045) 0 1px, rgba(255,255,255,0) 1px 3px);

  --paper: #f2f2f4;
  --ink: #0a0a0a;

  --rule-on-paper: #d5d7db;
  --rule-on-ink: #2b2b2e;
  --quiet-on-paper: #5f636a;
  --quiet-on-ink: #9a9da3;

  /* Derived from the accent so one line changes the lot. */
  --accent-on-ink: color-mix(in srgb, var(--accent) 58%, #ffffff);
  --accent-wash: color-mix(in srgb, var(--accent) 9%, #ffffff);

  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --gut: 20px;
  --wide: 1120px;
}

/* ---------- reset ---------- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.45;
  overflow-x: hidden;
}

/* The width and height attributes on an image hold the space while it
   loads. Height goes back to auto here so the picture keeps its shape. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ---------- bands ---------- */

.band { padding: 56px 0 64px; position: relative; overflow: hidden; }

/* The top bar is sticky and 64px tall, so every in-page anchor needs to
   stop short of it, or the first line of the section it jumped to sits
   under the bar. Added 4 September 2026 after Adam tapped Join and lost
   the heading. */
html { scroll-padding-top: 84px; }
section[id], [id] { scroll-margin-top: 84px; }

/* The join section can always be brought to the top of a phone screen,
   even though it is the last thing on the page. Without this the browser
   stops scrolling early and the form is left half way down. */
#join { min-height: calc(100svh - 64px); }

/* The pot and the feed take their room before their figures arrive, so
   the page does not grow by a screen and a half under somebody who has
   already tapped Join. While they are pending they are invisible, not
   absent. */
.js-pot-block.pending, .js-feed-block.pending { visibility: hidden; }
.js-pot-block { min-height: 420px; }
.js-feed-block { min-height: 360px; }
.js-pot-block[hidden], .js-feed-block[hidden] { display: none; }

/* A short phone: the join form still ends with its button on screen. */
@media (max-height: 720px) {
  #join { padding-top: 28px; }
  #join .lede { margin-top: 8px; font-size: 16px; line-height: 1.35; }
  .signup { margin-top: 12px; }
  .signup .field { height: 52px; font-size: 16px; }
  .signup .field-row { margin-bottom: 8px; }
  .signup .field-name { margin-bottom: 5px; font-size: 13px; }
  .signup .form-note { margin-top: 8px; }
}
.band-ink { background: var(--ink); color: var(--paper); }
.band-paper { background: var(--paper); color: var(--ink); }

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gut);
  position: relative;
  z-index: 2;
}

/* ---------- type ---------- */

.display {
  font-family: var(--sans);
  font-weight: 700;
  font-stretch: 78%;
  text-transform: uppercase;
  letter-spacing: -0.018em;
  line-height: 0.86;
  margin: 0;
  font-size: clamp(3.4rem, 15.5vw, 6.4rem);
}

.display-small {
  font-family: var(--sans);
  font-weight: 700;
  font-stretch: 80%;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.9;
  margin: 0;
  font-size: clamp(2.6rem, 11vw, 4.4rem);
}

.lede {
  font-size: 1.0625rem;
  line-height: 1.4;
  margin: 18px 0 0;
  max-width: 30ch;
}

.band-ink .lede { color: var(--quiet-on-ink); }
.band-paper .lede { color: var(--quiet-on-paper); }

/* The few small capital lines on the site. Kept at 14px so they read on a
   cheap phone, and used sparingly. */
.cap {
  font-family: var(--mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* ---------- the bar at the top ---------- */

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

.wordmark { line-height: 1; text-decoration: none; display: inline-flex; flex-direction: column; align-items: flex-start; }
.wordmark-logo { width: 128px; height: auto; display: block; }
/* The one line under the wordmark. It is a sentence, not a label, so the
   letters are not pushed apart the way the old second word was. */
.wordmark-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  display: block;
  margin-top: 4px;
  color: var(--quiet-on-paper);
}
.band-ink .wordmark-tag { color: var(--quiet-on-ink); }

/* Shown only to somebody who has already signed up on this phone. */
.returning {
  display: none;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  margin-top: 18px;
}

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

.hero { padding-top: 26px; padding-bottom: 40px; }
/* The headline starts below the chrome ring, never under it. */
.hero h1 { margin-top: 12px; }
/* The hero paragraph says what Vantum is, so it is a paragraph and not a
   strapline. It gets the width a paragraph needs to be read. */
.hero .lede { max-width: 40ch; }

/* ---------- the door ----------
   Shown instead of the sign-up form to somebody who arrived without an
   invitation. It sits exactly where the form would have been. */

.door {
  margin-top: 26px;
  max-width: 520px;
  border-top: 1px solid var(--rule-on-paper);
  padding-top: 18px;
}
.band-ink .door { border-top-color: var(--rule-on-ink); }

.door-head {
  display: block;
  color: var(--accent);
}
.band-ink .door-head { color: var(--accent-on-ink); }

.door-line {
  margin: 10px 0 0;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--quiet-on-paper);
}
.band-ink .door-line { color: var(--quiet-on-ink); }

/* ---------- what is coming ----------
   Brand lanes as words on a rule. No picture and no price, because there
   is no product yet and a drawn one would be a promise. */

.lanes {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  max-width: 640px;
}

.lane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--rule-on-paper);
}
.lane:last-child { border-bottom: 1px solid var(--rule-on-paper); }
.band-ink .lane { border-top-color: var(--rule-on-ink); }
.band-ink .lane:last-child { border-bottom-color: var(--rule-on-ink); }

.lane-text { min-width: 0; }

.lane-name {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-stretch: 82%;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.lane-line {
  display: block;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
  color: var(--quiet-on-paper);
}
.band-ink .lane-line { color: var(--quiet-on-ink); }

.lane-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding-top: 3px;
  white-space: nowrap;
  color: var(--quiet-on-paper);
}
.band-ink .lane-tag { color: var(--quiet-on-ink); }

.chrome {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  user-select: none;
}

/* The chrome pictures on black are rendered on pure black, so screen
   blending drops their background out of the way completely. */
.chrome-on-ink { mix-blend-mode: normal; } /* the black images are keyed to the exact band colour, so no blend is needed and none is used */

/* Each object sits in the top right corner, above the words. Nothing on
   this site is printed over a picture. */






/* The capsule only appears on wide screens, in the empty space beside the
   ranks table. On a phone that space does not exist. */
.chrome-capsule { display: none; }

/* ---------- the bonus lines: under the figures and by the join form ---------- */
.hero-bonus { margin: 18px 0 0; padding: 12px 14px; border-left: 4px solid var(--accent); font-size: 16px; line-height: 1.4; font-weight: 600; max-width: 60ch; }
.join-bonus { margin: 14px 0 0; padding: 12px 14px; border-left: 4px solid var(--accent); font-size: 16px; line-height: 1.4; font-weight: 600; max-width: 40ch; }

/* ---------- the three figures under the headline ---------- */

.figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 30px 0 0;
  border-top: 1px solid var(--rule-on-paper);
}

.figures > div {
  padding: 14px 10px 0 0;
}

.fig-value {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.5rem, 7vw, 2.2rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fig-unit {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--quiet-on-paper);
  margin-top: 4px;
}

.fig-cap {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.25;
  color: var(--quiet-on-paper);
  margin-top: 8px;
  letter-spacing: 0.02em;
}

/* ---------- the sign-up form ---------- */

.signup { margin-top: 32px; }

.field-row { position: relative; margin-bottom: 12px; }

.field-name {
  display: block;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.05em;
  margin-bottom: 7px;
  color: var(--quiet-on-paper);
}
.band-ink .field-name { color: var(--quiet-on-ink); }

.field {
  width: 100%;
  height: 60px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 17px;
  padding: 0 16px;
  outline: none;
}

.field::placeholder { color: #9aa0a8; }
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }

.field-with-icon { padding-left: 52px; }

.wa-mark {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  color: var(--ink);
  pointer-events: none;
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.btn {
  width: 100%;
  min-height: 62px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  padding: 0 20px;
}

.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.55; cursor: default; }

.btn-quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.band-ink .btn-quiet { color: var(--paper); border-color: var(--paper); }

.btn-done {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.form-note {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--quiet-on-paper);
  margin-top: 12px;
}
.band-ink .form-note { color: var(--quiet-on-ink); }

/* Errors are said in words on a plain surface. No red anywhere. It sits
   above the button, so it is on screen when the button is. */
.problem {
  display: none;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--ink);
  border-left-width: 5px;
  border-radius: 6px;
  background: #ffffff;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
}
.problem.on { display: block; }

/* ---------- the six levels ---------- */

.rows { margin-top: 26px; border-top: 1px solid var(--rule-on-ink); }

.band-paper .rows { border-top-color: var(--rule-on-paper); }

.rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule-on-ink);
  font-family: var(--mono);
  font-size: 15px;
}

.band-paper .rows > div { border-bottom-color: var(--rule-on-paper); }

.rows .slash { color: var(--quiet-on-ink); }
.band-paper .rows .slash { color: var(--quiet-on-paper); }

.rows .right { text-align: right; font-weight: 700; }

.rank-head {
  margin: 40px 0 0;
  font-family: var(--sans);
  font-weight: 700;
  font-stretch: 82%;
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
}

.rank-note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--quiet-on-ink);
  margin: 8px 0 0;
}
.band-paper .rank-note { color: var(--quiet-on-paper); }

.rank-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; }
.rank-row .team { color: var(--quiet-on-ink); min-width: 52px; text-align: right; }
.band-paper .rank-row .team { color: var(--quiet-on-paper); }
.rank-row .paid { min-width: 78px; text-align: right; font-weight: 700; }

/* ---------- the calculator ---------- */

.calc-card {
  margin-top: 26px;
  background: var(--accent);
  color: #ffffff;
  border-radius: 14px;
  padding: 24px 20px 26px;
}

.slider { margin-top: 6px; }
.slider + .slider { margin-top: 22px; }

.slider-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}

.slider-top b { font-size: 19px; font-variant-numeric: tabular-nums; }

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  margin: 0;
  touch-action: none;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.42);
  border-radius: 2px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -13px;
  border-radius: 999px;
  background: #ffffff;
  border: 0;
  cursor: pointer;
}

input[type=range]::-moz-range-track { height: 3px; background: rgba(255, 255, 255, 0.42); }
input[type=range]::-moz-range-thumb {
  width: 30px; height: 30px; border: 0; border-radius: 999px; background: #ffffff;
}

.calc-lines { margin-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.34); }

.calc-lines > div {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
  font-family: var(--mono);
  font-size: 14px;
}

.calc-lines .amount { font-weight: 700; font-variant-numeric: tabular-nums; }

.calc-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 20px;
}

.calc-total .cap { color: rgba(255, 255, 255, 0.8); }

.calc-total .sum {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(2.4rem, 12vw, 3.6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.calc-foot {
  font-family: var(--mono);
  font-size: 13px;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- bonuses ---------- */

.bonus {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--rule-on-ink);
  border-radius: 12px;
  padding: 18px 18px;
  margin-top: 12px;
}

.band-paper .bonus { border-color: var(--rule-on-paper); }

.bonus .amount {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.9rem, 9vw, 2.6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.bonus .what {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.35;
  color: var(--quiet-on-ink);
}
.band-paper .bonus .what { color: var(--quiet-on-paper); }

/* ---------- live ---------- */

.block { margin-top: 38px; }

.block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--rule-on-paper);
  padding-bottom: 10px;
}

.band-ink .block-head { border-bottom-color: var(--rule-on-ink); }

.lb-line {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-on-paper);
  font-family: var(--mono);
  font-size: 15px;
}

.band-ink .lb-line { border-bottom-color: var(--rule-on-ink); }

.lb-line .pos { color: var(--quiet-on-paper); font-variant-numeric: tabular-nums; }
.band-ink .lb-line .pos { color: var(--quiet-on-ink); }
.lb-line .score { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.band-ink .lb-line .score { color: var(--accent-on-ink); }

.joined {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-on-paper);
  font-family: var(--mono);
  font-size: 14px;
}

.joined .ago { color: var(--quiet-on-paper); white-space: nowrap; }

.empty {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--quiet-on-paper);
  padding: 16px 0;
}

.clock {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 16px;
  border: 1px solid var(--rule-on-paper);
  border-radius: 12px;
  padding: 16px 10px;
}

.clock > div { text-align: center; }
.clock-note { margin: 14px 0 0; font-size: 15px; line-height: 1.4; color: var(--quiet-on-ink); max-width: 44ch; }

.clock .n {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.6rem, 8vw, 2.4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.clock .u {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--quiet-on-paper);
  margin-top: 6px;
}

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

.foot {
  border-top: 1px solid var(--rule-on-paper);
  margin-top: 44px;
  padding-top: 18px;
  padding-bottom: 40px;
}

.foot p {
  font-family: var(--mono);
  font-size: 13px;
  margin: 0 0 10px;
}

.foot a { color: var(--quiet-on-paper); font-size: 13px; font-family: var(--mono); display: inline-block; padding: 12px 0; }
.foot-disclaimer, .foot .foot-disclaimer { font-family: var(--mono); font-size: 11px; color: var(--quiet-on-paper); margin: 18px 0 0; max-width: 60ch; }

/* ---------- founder page ---------- */

.big-number {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(4.5rem, 26vw, 9rem);
  line-height: 0.82;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 6px 0 0;
}

.link-box {
  margin-top: 10px;
  border: 1px solid var(--rule-on-ink);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 14px;
  word-break: break-all;
  line-height: 1.4;
}

.band-paper .link-box { border-color: var(--rule-on-paper); background: #ffffff; }

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }

.stat-box {
  border: 1px solid var(--rule-on-ink);
  border-radius: 12px;
  padding: 16px;
}
.band-paper .stat-box { border-color: var(--rule-on-paper); }

.stat-box .n {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.8rem, 9vw, 2.4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-box .u {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--quiet-on-ink);
  margin-top: 8px;
  line-height: 1.3;
}
.band-paper .stat-box .u { color: var(--quiet-on-paper); }

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

.card-preview {
  margin-top: 16px;
  border: 1px solid var(--rule-on-paper);
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink);
}

/* The frame holds the picture's shape before it has been drawn, so the
   page does not jump when it arrives. */
.card-preview-portrait { aspect-ratio: 4 / 5; }
.card-preview-wide { aspect-ratio: 40 / 21; }

.card-preview img,
.card-preview canvas { width: 100%; height: auto; display: block; }
.card-preview img[src=""], .card-preview img:not([src]) { visibility: hidden; }

/* Status or wide. Two small buttons, the chosen one filled in. */
.card-formats { display: inline-flex; gap: 6px; }

.card-formats button {
  min-height: 44px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  padding: 12px 16px;
  cursor: pointer;
}

.card-formats button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------- terms ---------- */

.prose { max-width: 62ch; margin-top: 26px; }
.prose h2 {
  font-size: 1.05rem;
  font-weight: 700;
  font-stretch: 84%;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 26px 0 6px;
}
.prose p { margin: 0; font-size: 16px; line-height: 1.5; color: #33363b; }






/* ---------- section heads: text beside a chrome object ----------
   The object is a flex item, never absolutely positioned over type. On a
   phone it takes its own row above the headline, tucked to the right edge;
   from 600px it sits beside the headline in its own column. Overlap is
   impossible by construction, whatever the words or the width. */
.head { display: flex; flex-direction: column; align-items: flex-end; }
.head .txt { align-self: stretch; min-width: 0; order: 2; }
.head .chrome {
  position: static;
  display: block;
  order: 1;
  width: 34vw;
  max-width: 220px;
  height: auto;
  margin: -6vw -10vw 10px 0;
}
.hero .head .chrome { width: 42vw; max-width: 260px; margin: 6px -8vw 0 0; }
/* On the founder page the mark sits small in the top right corner of the
   head and takes no room of its own, so there is no empty band under the
   hold line. */
body[data-page="founder"] .head { position: relative; }
body[data-page="founder"] .head .chrome { position: absolute; top: 34px; right: 0; width: 56px; max-width: 56px; margin: 0; }
@media (min-width: 600px) {
  .head { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 24px; }
  .head .txt { flex: 1 1 auto; order: 1; }
  .head .chrome { flex: 0 0 auto; order: 2; width: 22vw; max-width: 300px; margin: -3vw -4vw 0 0; }
  .hero .head .chrome { width: 32vw; max-width: 460px; margin: -2vw -2vw 0 0; }
}
/* The capsule beside the ranks stays absolute and only exists where the
   ranks table (760px wide at most) leaves real empty space beside it. */
.chrome-capsule { display: none; }
@media (min-width: 1200px) {
  .chrome-capsule { display: block; width: 20vw; max-width: 300px; right: 4vw; bottom: 40px; top: auto; }
}

/* ---------- the six level tree ----------
   One SVG, sized by its viewBox so it scales with the column. Every word
   in it is real text, styled here, so the accent stays in one place and
   nothing is baked into the drawing. */

.tree-caption {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  color: var(--quiet-on-ink);
  margin: 26px 0 0;
  max-width: 52ch;
}
.band-paper .tree-caption { color: var(--quiet-on-paper); }

.tree { margin-top: 18px; }

.tree svg {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
}

.t-line { stroke: var(--rule-on-ink); stroke-width: 1; fill: none; }
.t-you { fill: var(--accent-on-ink); }
.t-node { fill: var(--paper); }
.t-bar { fill: var(--accent-on-ink); }

.t-label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  fill: var(--quiet-on-ink);
}

.t-count {
  font-family: var(--mono);
  font-size: 13px;
  fill: var(--paper);
}

.t-pct {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  fill: var(--paper);
}

.t-rand {
  font-family: var(--mono);
  font-size: 13px;
  fill: var(--accent-on-ink);
}

.tree-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  max-width: 520px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-on-ink);
}

.band-paper .tree-total { border-top-color: var(--rule-on-paper); }
.tree-total .cap { color: var(--quiet-on-ink); }

.tree-total .sum {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.7rem, 8.5vw, 2.6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--accent-on-ink);
  white-space: nowrap;
}

.tree-note {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  color: var(--quiet-on-ink);
  margin: 16px 0 0;
  max-width: 52ch;
}
.band-paper .tree-note { color: var(--quiet-on-paper); }

/* ---------- the rank ladder ----------
   Six rungs, each bar wider than the one above it. It stays an ordered
   list, so the order survives without the styling. */

.ladder {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  max-width: 640px;
}

.rung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule-on-ink);
}
.band-paper .rung { border-bottom-color: var(--rule-on-paper); }

.rung-left { min-width: 0; }

.rung-name {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-stretch: 82%;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.rung-track {
  display: block;
  height: 8px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--rule-on-ink);
}
.band-paper .rung-track { background: var(--rule-on-paper); }

.rung-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--quiet-on-ink);
}
.band-paper .rung-fill { background: var(--quiet-on-paper); }

.rung-here {
  display: block;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.band-ink .rung-here { color: var(--accent-on-ink); }

.rung-right { text-align: right; }

.rung-team {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--quiet-on-ink);
  white-space: nowrap;
}
.band-paper .rung-team { color: var(--quiet-on-paper); }

.rung-pay {
  display: block;
  margin-top: 5px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The rung a founder is standing on, lit on their own page. */
.rung.on .rung-name { color: var(--accent-on-ink); }
.rung.on .rung-fill { background: var(--accent-on-ink); }
.rung.on .rung-pay { color: var(--accent-on-ink); }
.band-paper .rung.on .rung-name { color: var(--accent); }
.band-paper .rung.on .rung-fill { background: var(--accent); }
.band-paper .rung.on .rung-pay { color: var(--accent); }

.rally {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
  color: var(--quiet-on-ink);
  margin: 18px 0 0;
  max-width: 52ch;
}
.band-paper .rally { color: var(--quiet-on-paper); }

/* ---------- the founder box ---------- */

.box-card {
  margin-top: 26px;
  max-width: 560px;
  border: 1px solid var(--rule-on-paper);
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
}

.box-art { background: var(--paper); }

.box-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  display: block;
}

.box-text { padding: 20px 20px 22px; }

.box-head {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-stretch: 82%;
  text-transform: uppercase;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.box-line {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.45;
}

.box-price {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--quiet-on-paper);
}

/* What is in the box is not decided, and the card says so. */
.box-note {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  color: var(--quiet-on-paper);
}

.box-link {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

/* ---------- the five ways the plan pays ---------- */

.ways {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  max-width: 640px;
}

.way {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--rule-on-ink);
}
.way:last-child { border-bottom: 1px solid var(--rule-on-ink); }
.band-paper .way { border-top-color: var(--rule-on-paper); }
.band-paper .way:last-child { border-bottom-color: var(--rule-on-paper); }

.way-n {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.6rem, 7vw, 2.1rem);
  line-height: 1;
  min-width: 30px;
  color: var(--accent-on-ink);
  font-variant-numeric: tabular-nums;
}
.band-paper .way-n { color: var(--accent); }

.way-text { min-width: 0; }

.way-name {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-stretch: 82%;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.way-what {
  display: block;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
  color: var(--quiet-on-ink);
}
.band-paper .way-what { color: var(--quiet-on-paper); }

/* ---------- the team right now ---------- */

.feed-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-on-paper);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.35;
}
.band-ink .feed-line { border-bottom-color: var(--rule-on-ink); }

.feed-line .what { min-width: 0; }
.feed-line .ago { color: var(--quiet-on-paper); white-space: nowrap; }
.band-ink .feed-line .ago { color: var(--quiet-on-ink); }

/* ---------- the founder pot ----------
   The one number people watch: what is left of the money Adam has set
   aside for founders. It counts down on load, so somebody who comes back
   tomorrow sees it fall again. Built from the pieces already on the page:
   the big mono sum of the tree total, the track and fill of a rank rung,
   and the rows of the live feed. */

/* The size of the pot sits opposite the heading. The gap is so a large
   figure that has to wrap onto a second line never touches the words on
   the left of it. */
.pot-block-head { gap: 16px; }

.pot-sum {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(2.6rem, 13vw, 4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  margin: 20px 0 0;
}
.band-ink .pot-sum { color: var(--accent-on-ink); }

.pot-word {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--quiet-on-paper);
  margin: 9px 0 0;
}
.band-ink .pot-word { color: var(--quiet-on-ink); }

.pot-track {
  height: 8px;
  margin-top: 18px;
  border-radius: 999px;
  background: var(--rule-on-paper);
  overflow: hidden;
}
.band-ink .pot-track { background: var(--rule-on-ink); }

.pot-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--accent);
}
.band-ink .pot-fill { background: var(--accent-on-ink); }

/* The bar drains to what is left the moment the figures arrive, in step
   with the number above it. A phone set to reduce motion is simply shown
   the finished figure. */
@media (prefers-reduced-motion: no-preference) {
  .pot-fill { transition: width 800ms ease-out; }
}

.pot-figs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 20px;
}

.pot-n {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pot-cap {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--quiet-on-paper);
  margin-top: 7px;
}
.band-ink .pot-cap { color: var(--quiet-on-ink); }

.pot-note {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  color: var(--quiet-on-paper);
  margin: 20px 0 0;
  max-width: 52ch;
}
.band-ink .pot-note { color: var(--quiet-on-ink); }

.pot-feed-head { margin-top: 26px; }

.pay-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-on-paper);
  font-family: var(--mono);
  font-size: 14px;
}
.band-ink .pay-line { border-bottom-color: var(--rule-on-ink); }

.pay-line .who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pay-line .paid {
  font-weight: 700;
  text-align: right;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.band-ink .pay-line .paid { color: var(--accent-on-ink); }

.pay-line .ago { color: var(--quiet-on-paper); white-space: nowrap; }
.band-ink .pay-line .ago { color: var(--quiet-on-ink); }

/* ---------- the admin payment page ----------
   Adam's own page, on a phone, one thumb, standing in a queue. Nothing
   new is invented here: it is the site's own fields, buttons and rows,
   held to one narrow column. */

.admin { max-width: 560px; }

/* The heading is deliberately not the display size the public pages use.
   This is a tool Adam opens standing in a queue, not a pitch, so it gets
   a working heading and the room goes to the fields. */
.admin-head {
  margin: 26px 0 0;
  font-family: var(--sans);
  font-weight: 700;
  font-stretch: 82%;
  text-transform: uppercase;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

/* The founders the search box found. An empty list takes up no room. */
.picks {
  margin-top: 8px;
  border: 1px solid var(--rule-on-paper);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}
.picks:empty { display: none; }

.pick {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 0;
  border-bottom: 1px solid var(--rule-on-paper);
  background: #ffffff;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.pick:last-child { border-bottom: 0; }
.pick .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick .num { color: var(--quiet-on-paper); font-variant-numeric: tabular-nums; }

.chosen {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--accent);
  margin: 9px 0 0;
}

/* The size of the pot: one field and one button on one line. */
.pot-set {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}
.pot-set .btn { width: auto; min-height: 60px; padding: 0 24px; }

/* One recorded payment. Two lines on a phone: who and how much on top,
   the note and the time under it with the undo on the right. */
.paid-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 14px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-on-paper);
  font-family: var(--mono);
  font-size: 15px;
}

.paid-row .who {
  min-width: 0;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paid-row .sum {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.paid-row .meta {
  grid-column: 1;
  font-size: 12px;
  line-height: 1.4;
  color: var(--quiet-on-paper);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Small on purpose. It is an undo for a typo, not a thing to reach for,
   and it asks before it does anything. */
.paid-row .drop {
  grid-column: 2;
  justify-self: end;
  min-height: 44px;
  padding: 7px 14px;
  border: 1px solid var(--rule-on-paper);
  border-radius: 999px;
  background: #ffffff;
  color: var(--quiet-on-paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.paid-row .drop[disabled] { opacity: 0.55; cursor: default; }

/* The tree on the admin page. One row a founder, indented by depth, the
   whole row a button that opens the people under it. */
.tree-list { margin-top: 10px; }
.tree-row { border-bottom: 1px solid var(--rule-on-paper); }
.tree-row.hold .who { color: var(--quiet-on-paper); }
.tree-head {
  display: grid;
  grid-template-columns: 18px auto minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: baseline;
  width: 100%;
  padding: 11px 0 11px calc(var(--depth, 0) * 18px);
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--mono);
  font-size: 14px;
  color: inherit;
  cursor: pointer;
}
.tree-head .tree-mark { color: var(--quiet-on-paper); }
.tree-head .num { font-weight: 700; font-variant-numeric: tabular-nums; }
.tree-row.cert .num::after { content: ' \2713'; color: var(--accent); }
.tree-cert { margin: 0 0 10px calc(var(--depth, 0) * 18px + 28px); min-height: 34px; padding: 6px 12px; font-size: 12px; }
.tree-head .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-head .fig { font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tree-head .meta {
  grid-column: 2 / -1;
  font-size: 12px;
  line-height: 1.4;
  color: var(--quiet-on-paper);
}

/* One house link on the admin page: who it is for and how many people
   came in on it, the whole link under that, and the two buttons under
   that again. A retired one stays in the list, greyed. */
.house-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 14px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-on-paper);
  font-family: var(--mono);
  font-size: 15px;
}

.house-row.off { opacity: 0.78; }
.house-row.off .who { text-decoration: line-through; }

.house-row .who {
  min-width: 0;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.house-row .uses {
  text-align: right;
  white-space: nowrap;
  font-size: 12px;
  color: var(--quiet-on-paper);
}

.house-row .link {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.4;
  color: var(--quiet-on-paper);
  word-break: break-all;
}

.house-row .acts {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.house-row .pill {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--rule-on-paper);
  border-radius: 999px;
  background: #ffffff;
  color: var(--quiet-on-paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.house-row .pill[disabled] { opacity: 0.55; cursor: default; }

/* ---------- the founders room ---------- */

.certify { margin: 22px 0 0; max-width: 520px; font-size: 15px; line-height: 1.4; color: var(--paper); border-left: 4px solid var(--accent); padding: 8px 12px; }
.certify.done { color: var(--quiet-on-ink); border-left-color: var(--quiet-on-ink); }
.room { margin-top: 10px; max-width: 520px; }

.room-btn {
  min-height: 56px;
  padding: 14px 18px;
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-align: center;
}

.room-line {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--quiet-on-paper);
  margin: 10px 0 0;
}
.band-ink .room-line { color: var(--quiet-on-ink); }

/* A sponsor code that came in on a link is shown but cannot be edited. */
.field-locked { background: var(--paper); }

/* ---------- wider screens ---------- */

@media (min-width: 780px) {
  .band { padding: 84px 0 96px; }
  .hero { padding-top: 34px; }
  body { font-size: 18px; }
  .lede { font-size: 1.25rem; max-width: 34ch; }
  .hero .lede { max-width: 44ch; }
  /* Lists stop well short of the right edge so the chrome objects sit in
     open space and never cross a line of type. */
  .rows, .js-bonuses, .block { max-width: 760px; }
  .signup, .stack, .link-box { max-width: 520px; }
  /* On wide screens every object sits in the open corner beside the
     headline, above the first row of type, never over a list. */

    .fig-cap { font-size: 12px; }
  .clock { max-width: 560px; }
  .two-up { max-width: 560px; }
  .card-preview-portrait { max-width: 340px; }
  .card-preview-wide { max-width: 520px; }
}

/* The forty-eight hour hold, one quiet line under the name. */
.hold { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: var(--quiet-on-ink); max-width: 34ch; }
.ask { margin: 14px 0 0; font-size: 18px; line-height: 1.35; font-weight: 600; color: var(--paper); max-width: 30ch; }

/* The mark. Drawn in SVG so it takes the band's own colour: ink on paper,
   paper on ink. The chrome renders it replaced are gone. */
.mark { display: block; order: 0; }
.block-head h2.cap, h1.big-number { margin: 0; }

/* The mark sits small and whole, top right of the head. The section
   ornaments the chrome renders used to fill are gone. */
.head .mark, .hero .head .mark { width: 64px; height: 64px; max-width: none; margin: 8px 0 0 0; flex: 0 0 auto; order: 2; }
body[data-page="founder"] .head .mark { width: 72px; height: 72px; margin-top: 30px; }
@media (min-width: 760px) {
  .head .mark, .hero .head .mark { width: 96px; height: 96px; margin: 0; }
}
.mark.chrome-levels, .mark.chrome-calc, .mark.chrome-bonus, .mark.chrome-live, .mark.chrome-capsule { display: none; }
.js-hold-list .row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line, #d9dbe0); }

/* ---------- the parent company page ---------- */
.kicker { margin: 34px 0 14px; color: var(--accent); }
.band-ink .kicker { color: var(--accent-on-ink); }
.grid-2, .grid-3 { display: grid; gap: 28px; }
@media (min-width: 760px) {
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 48px; }
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
}
.plan-grid, .live-grid { margin-top: 28px; align-items: start; }
.house-block { border-top: 1px solid var(--rule-on-ink); padding-top: 14px; }
.house-name { margin: 0 0 10px; }
.house-text { margin: 0; font-size: 17px; line-height: 1.45; color: var(--paper); max-width: 40ch; }

/* The brand cards. A brand is another company: white card, its own colour,
   its own type. The one line under it is Vantum's. */
.brands { display: grid; gap: 18px; margin-top: 28px; }
@media (min-width: 760px) { .brands { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.brand-card {
  --brand: #0f766e;
  background: #ffffff;
  border: 1px solid #dcdee3;
  border-top: 6px solid var(--brand);
  border-radius: 6px;
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; min-height: 260px;
  box-shadow: 0 10px 30px rgba(10, 10, 10, 0.06);
}
.brand-dim { opacity: 0.55; }
.brand-top { display: flex; justify-content: space-between; align-items: center; }
.brand-mark {
  width: 54px; height: 54px; border-radius: 10px; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 0.02em;
}
.brand-status { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--brand); }
.brand-name {
  margin: 22px 0 4px; font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-weight: 500;
  font-size: 30px; letter-spacing: -0.01em; line-height: 1; color: #111;
}
.brand-sub { margin: 0; font-size: 15px; color: #555; }
.brand-lane { margin: 10px 0 0; font-size: 15px; color: #111; }
.brand-endorse { margin-top: auto; padding-top: 22px; color: var(--quiet-on-paper); font-size: 11px; }
.brands-rule { margin: 22px 0 0; font-size: 14px; line-height: 1.5; color: var(--quiet-on-paper); max-width: 70ch; }

/* ---------- desktop sizing ---------- */
@media (min-width: 760px) {
  :root { --gut: 48px; }
  .lede { font-size: 1.3rem; line-height: 1.4; max-width: 46ch; }
  .house-text { font-size: 1.15rem; max-width: 44ch; }
  .band { padding: 84px 0 92px; }
  .block { margin-top: 48px; }
}
@media (min-width: 1100px) {
  :root { --gut: 64px; }
}

/* ---------- the identity: sharp edges, blue, steel ---------- */
.btn, .field, .link-box { border-radius: 4px; }

/* Brand panels, redrawn to the identity. Brand one is a royal blue panel
   with the mark; the ones in development are brushed steel. No rounded
   cards, no shadows, no pastel bars. */
.brand-card {
  border: 0; border-radius: 0; box-shadow: none; padding: 26px 26px 0; min-height: 320px;
  background: var(--steel-lines), var(--steel); color: #15171b;
  position: relative;
}
.brand-live { background: var(--accent); color: #ffffff; }
.brand-dim { opacity: 1; }
.brand-dim .brand-name, .brand-dim .brand-lane { color: #3a3d44; }
.brand-dim .brand-sub, .brand-dim .brand-status { color: #5b5f67; }
.brand-top { align-items: flex-start; }
.brand-mark {
  width: 44px; height: 64px; border-radius: 0; background: transparent; color: inherit;
  font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: 0.14em;
  align-items: flex-end; justify-content: flex-start; padding-bottom: 2px;
}
.brand-mark::before {
  content: ""; position: absolute; top: 22px; left: 26px; width: 40px; height: 64px;
  background: currentColor;
  clip-path: polygon(0 4%, 44% 9%, 44% 62%, 0 57%, 0 4%);
}
.brand-mark::after {
  content: ""; position: absolute; top: 22px; left: 26px; width: 40px; height: 64px;
  background: currentColor;
  clip-path: polygon(56% 34%, 100% 39%, 100% 96%, 56% 91%);
}
.brand-live .brand-mark { color: #ffffff; }
.brand-status { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: inherit; opacity: 0.85; }
.brand-name {
  margin: 34px 0 6px; font-family: var(--sans); font-weight: 700; font-stretch: 80%;
  text-transform: uppercase; letter-spacing: -0.01em; font-size: 40px; color: inherit;
}
.brand-sub { color: inherit; opacity: 0.8; font-size: 15px; }
.brand-lane { margin: 14px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: inherit; }
.brand-endorse {
  margin: auto -26px 0; padding: 12px 26px; font-size: 11px; letter-spacing: 0.16em;
  background: rgba(0,0,0,0.22); color: #ffffff;
}
.brand-dim .brand-endorse { background: #0a0a0a; color: #f2f2f4; }
.brands-rule { font-size: 15px; }
@media (min-width: 760px) { .brands { grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; } .brand-live { min-height: 380px; } }

/* ---------- the top bar ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--rule-on-paper); }
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo-nav { width: 112px; height: auto; }
.nav-word { font-family: var(--sans); font-weight: 700; font-stretch: 80%; font-size: 22px; letter-spacing: 0.02em; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.nav-links a.nav-cta { background: var(--accent); color: #fff; padding: 13px 18px; border-radius: 4px; }
@media (max-width: 759px) { .nav-links a:not(.nav-cta) { display: none; } }

/* ---------- the hero with the picture ---------- */
.hero .head { display: none; }
.hero-grid { display: grid; gap: 28px; margin-top: 28px; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; margin-top: 48px; } }
.hero-txt .kicker { margin-top: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-actions .btn { width: auto; min-width: 220px; }
.hero-pic { margin: 0; }
.hero-pic img { display: block; width: 100%; height: auto; border-radius: 4px; }
.hero .display { font-size: clamp(3rem, 9vw, 5.6rem); }

/* ---------- the product ---------- */
.product-grid { align-items: center; }
.product-pic { margin: 0; }
.product-pic img { display: block; width: 100%; height: auto; border-radius: 4px; }
.product-txt .kicker { margin-top: 0; }
.card-lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; border-top: 1px solid var(--rule-on-ink); padding-top: 18px; }
.card-line { display: flex; flex-direction: column; gap: 6px; }
.card-label { color: var(--accent-on-ink); }
.card-value { font-family: var(--mono); font-weight: 700; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1; color: var(--paper); }
.card-note { font-family: var(--mono); font-size: 12px; color: var(--quiet-on-ink); }
.product-note { margin: 18px 0 0; font-size: 15px; line-height: 1.45; color: var(--quiet-on-ink); max-width: 44ch; }
.product-status { margin-top: 22px; color: var(--paper); }

/* ---------- how it works ---------- */
.steps { margin-top: 28px; }
.step { border-top: 2px solid var(--ink); padding-top: 16px; }
.step-n { margin: 0; font-family: var(--mono); font-weight: 700; font-size: 44px; line-height: 1; color: var(--accent); }
.step-name { margin: 14px 0 8px; }
.step-text { margin: 0; font-size: 16px; line-height: 1.45; color: #2b2d31; max-width: 38ch; }

/* ---------- join and the foot ---------- */
.join-grid { align-items: start; }
.calc-row { margin-top: 56px; }
.foot-grid { display: grid; gap: 18px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--rule-on-paper); }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr 1fr; } }
.foot-brand { font-family: var(--sans); font-weight: 700; font-stretch: 80%; font-size: 20px; margin: 0 0 6px; }

/* ---------- the intuitive pass ---------- */
.zulu { margin: 12px 0 0; font-family: var(--mono); font-size: 14px; color: var(--quiet-on-paper); }
.gets { margin-top: 28px; }
.get { background: #111214; border-top: 3px solid var(--accent); }
.get-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.get-big { margin: 18px 18px 6px; font-family: var(--sans); font-weight: 700; font-stretch: 80%; font-size: 30px; line-height: 0.95; color: var(--paper); text-transform: uppercase; }
.get-line { margin: 0 18px 20px; font-size: 16px; line-height: 1.4; color: var(--quiet-on-ink); }
.steps .step-text { font-size: 17px; }
.more { margin-top: 0; }
.more summary { list-style: none; cursor: pointer; display: inline-flex; width: auto; min-width: 260px; }
.more summary::-webkit-details-marker { display: none; }
.more[open] summary { margin-bottom: 40px; }
.more-body .rank-head { margin-top: 40px; }
.hero .display { font-size: clamp(2.7rem, 8.4vw, 5.2rem); }
.hero-actions .btn { min-width: 260px; font-size: 16px; }

#fullplan { padding-top: 40px; padding-bottom: 48px; }
#fullplan .more summary { color: var(--paper); border-color: var(--paper); }