/* The page: layout and rhythm only. Every colour, face and radius comes from
   tokens.css; the hero image has its own sheet, hero.css. One considered
   sheet, read top to bottom — no nav, nothing that loops. */

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

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

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
  padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: calc(var(--radius) * 0.6);
}

/* ── Masthead. The wordmark is type; .mark-slot is the one place a mark drops
   in later, and it takes no room until something is put in it. */
.masthead {
  padding-block: max(1.25rem, env(safe-area-inset-top)) 0;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.01em;
}

.mark-slot:empty {
  display: none;
}

/* ── Hero: copy and waitlist, then the image — beneath on a phone, beside on
   a wide screen. */
.hero {
  display: grid;
  gap: 2.5rem;
  padding-block: 1.75rem 4rem;
}

.hero h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(2rem, 1.35rem + 2.9vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lede {
  margin: 1rem 0 0;
  max-width: 34rem;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  color: var(--muted-foreground);
  text-wrap: pretty;
}

/* A soft halo of the class hues behind the phone: many kinds of things, one
   place. Still, and clipped by main so it never widens the page. */
main {
  overflow-x: clip;
}

.hero-image {
  position: relative;
}

.hero-image::before {
  content: "";
  position: absolute;
  inset: 8% 4% 28%;
  border-radius: 999px;
  background: conic-gradient(from 200deg, var(--class-cash), var(--class-crypto), var(--class-private), var(--class-realestate), var(--class-collectibles), var(--class-public), var(--class-metals), var(--class-cash));
  filter: blur(72px);
  opacity: 0.32;
}

.hero-image .phone {
  position: relative;
}

/* ── The waitlist: one field, one button, one line. */
.waitlist {
  margin-top: 1.5rem;
  max-width: 30rem;
  /* The form's own height, held when the line of thanks replaces it, so the
     image beneath does not move. */
  min-height: 9.75rem;
  /* The closing call to action returns here: to the top of the page, not to a
     form pressed against the top edge. */
  scroll-margin-top: 100vh;
}

.waitlist form {
  display: grid;
  gap: 0.625rem;
}

.waitlist input[type="email"] {
  width: 100%;
  min-width: 0;
  height: 3rem;
  padding: 0 0.875rem;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--card-foreground);
  font: inherit;
  /* 16px keeps iOS from zooming the page when the field takes focus. */
  font-size: 1rem;
}

.waitlist input::placeholder {
  color: var(--muted-foreground);
  opacity: 1;
}

/* The one place brass is spent. */
.waitlist button {
  height: 3rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--brand-foreground);
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.waitlist form[aria-busy="true"] button {
  opacity: 0.55;
  cursor: default;
}

.waitlist-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* The App Store slot: words in an outline until the official badge may be used. */
.store-note {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin: 1.25rem 0 0;
  padding: 0.5rem 0.875rem 0.5rem 0.625rem;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
}

.store-note small {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted-foreground);
}

/* A field a person never sees and a form-filling script completes. */
.decoy {
  position: absolute;
  left: -200vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Confirmed and failed. With JavaScript the container's data-state decides;
   without it the function sends the browser back to #joined or #retry and
   :target shows the same line in the same place. */
.waitlist-done,
.waitlist-failed {
  display: none;
  margin: 0;
  /* Arriving at #joined or #retry must not scroll the headline — or, on a
     failure, the form — out of view: the margin asks for more room above than
     the page has, so the browser stays at the top. */
  scroll-margin-top: 100vh;
}

.waitlist-done {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.35;
}

.waitlist-failed {
  margin-top: 0.625rem;
  font-size: 0.875rem;
}

.waitlist[data-state="confirmed"] form,
.waitlist:not([data-state]):has(#joined:target) form {
  display: none;
}

.waitlist[data-state="confirmed"] .waitlist-done,
.waitlist:not([data-state]) .waitlist-done:target,
.waitlist[data-state="failed"] .waitlist-failed,
.waitlist:not([data-state]) .waitlist-failed:target {
  display: block;
}

.waitlist-done:focus,
.waitlist-failed:focus {
  outline: none;
}

@media (min-width: 30rem) {
  .waitlist {
    min-height: 5rem;
  }

  .waitlist form {
    grid-template-columns: 1fr auto;
  }
}

/* ── Sections: full-width bands on alternating surfaces, so the sheet has
   depth; inside each, a heading in the margin and the matter beside it. */
.band-section,
.closing {
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.surface-raised {
  background: var(--card);
}

.surface-sunk {
  background: var(--muted);
}

/* Each section is a text column and a visual column. On a phone they stack,
   text first; on a wide screen they sit side by side and swap sides down the
   page (split--flip), so the eye moves left, right, left. */
.split {
  display: grid;
  gap: 2rem;
}

.split-text > :last-child {
  margin-bottom: 0;
}

.band-section .split-text h2 {
  margin-bottom: 1.5rem;
}

.split-visual {
  margin: 0;
  min-width: 0;
}

/* Stacked, a section may want its drawing straight after the heading rather
   than after everything else: the text column dissolves and its heading steps
   ahead of the visual. */
.split--visual-early > .split-text {
  display: contents;
}

.band-section .split--visual-early > .split-text > h2 {
  order: -2;
  margin-bottom: 0;
}

.split--visual-early > .split-visual {
  order: -1;
}

/* A wash of one class hue (or all of them) in a corner of a section, so the
   sheet is not one flat ground. The hue comes from the section's --wash; the
   shape is a blurred disc, still, behind the matter and clipped to its band. */
.washed {
  position: relative;
  overflow: clip;
}

.washed::before {
  content: "";
  position: absolute;
  top: var(--wash-top, -12rem);
  right: var(--wash-right, -8rem);
  bottom: var(--wash-bottom, auto);
  left: var(--wash-left, auto);
  width: min(38rem, 90vw);
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--wash);
  filter: blur(96px);
  opacity: var(--wash-strength, 0.22);
  pointer-events: none;
}

.washed > .wrap {
  position: relative;
}

.wash-holds {
  --wash: conic-gradient(var(--class-crypto), var(--class-private), var(--class-realestate), var(--class-crypto));
}

.wash-ways {
  --wash: var(--class-cash);
  --wash-top: auto;
  --wash-bottom: -14rem;
  --wash-right: auto;
  --wash-left: -10rem;
}

.wash-time {
  --wash: var(--class-public);
  --wash-top: 2rem;
}

.wash-closing {
  --wash: conic-gradient(from 200deg, var(--class-cash), var(--class-crypto), var(--class-private), var(--class-realestate), var(--class-collectibles), var(--class-public), var(--class-metals), var(--class-cash));
  --wash-top: -16rem;
  --wash-right: -4rem;
  --wash-strength: 0.3;
}

.band-section h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.section-lede {
  margin: 0 0 1.5rem;
  max-width: 36rem;
  color: var(--muted-foreground);
}

.holds,
.ways,
.honest {
  list-style: none;
  margin: 0;
  padding: 0;
}

.holds li,
.ways li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  row-gap: 0.125rem;
  align-items: center;
  padding-block: 1rem;
  border-top: 1px solid var(--border);
}

/* Each line's mark: a glyph on a tint of its own hue (ink where it has none). */
.tile {
  position: relative;
  display: grid;
  place-items: center;
  grid-row: 1 / span 2;
  align-self: start;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--hue, var(--foreground));
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0.18;
}

.subtracts .tile {
  color: var(--muted-foreground);
}

.glyph {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.holds li:first-child,
.ways li:first-child {
  border-top: 0;
  padding-top: 0;
}


.item-name {
  font-family: var(--font-heading);
  font-size: 1.3125rem;
  line-height: 1.25;
}

.item-text {
  grid-column: -2 / -1;
  color: var(--muted-foreground);
}

.holds .subtracts {
  border-top-color: var(--input);
}

.pledge {
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--input);
  max-width: 36rem;
  font-family: var(--font-heading);
  font-size: 1.3125rem;
  line-height: 1.35;
}

.honest {
  display: grid;
  gap: 1.25rem;
}

.honest li {
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-heading);
  font-size: 1.375rem;
  line-height: 1.3;
  text-wrap: balance;
}

/* The go-live sort: add data-coming to a feature's line and it says so. */
[data-feature][data-coming] > .item-name::after,
[data-feature][data-coming]:not(:has(> .item-name))::after {
  content: " · coming";
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--muted-foreground);
}

/* ── Ways in, drawn: four ways converge on one ledger, every arrow one way. */

.flow-in {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin-inline: auto;
  color: var(--foreground);
}

.flow-thread,
.flow-arrow {
  fill: none;
  stroke: var(--muted-foreground);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.7;
}

.flow-node,
.flow-card {
  fill: var(--card);
  stroke: var(--input);
  vector-effect: non-scaling-stroke;
}

.flow-figure {
  fill: var(--foreground);
  opacity: 0.85;
}

.flow-seg {
  fill: var(--hue);
}

.flow-rule {
  fill: var(--muted-foreground);
  opacity: 0.3;
}

/* ── Honest by design, shown: a specimen of the ledger being straight with you. */
.specimen {
  margin: 0;
  padding: 1.25rem 1.25rem 1rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.8);
  background: var(--card);
  color: var(--card-foreground);
}

.spec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.spec-label,
.spec-currency,
.spec-figure,
.spec-flag {
  margin: 0;
}

.spec-label {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.spec-currency {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}

.spec-currency span {
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
}

.spec-currency .is-on {
  background: var(--muted);
  color: var(--foreground);
}

.spec-figure {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}

.spec-flag {
  margin-top: 0.625rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--destructive);
  font-size: 0.875rem;
}

.spec-rows {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.spec-rows li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.75rem;
  border-top: 1px solid var(--border);
}

.spec-name {
  flex: 1;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  line-height: 1.25;
}

.spec-name small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.spec-value {
  font-variant-numeric: tabular-nums;
}

.specimen figcaption {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--muted-foreground);
}

/* ── Over time. */
.trend-figure {
  margin: 0;
}

.trend {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.trend-line {
  fill: none;
  stroke: var(--foreground);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.trend-mark {
  fill: var(--foreground);
}

.trend-area {
  fill: var(--foreground);
  opacity: 0.06;
}

.trend-figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--muted-foreground);
}

/* ── Closing: the band of hues once more, the idea in five words, and the way
   back to the one form. The button is ink — brass stays spent once, above. */
.closing-band {
  display: flex;
  gap: 3px;
  height: 0.5rem;
  max-width: 22rem;
  margin-bottom: 2rem;
}

.closing-band span {
  flex: var(--w) 1 0;
  border-radius: 999px;
  background: var(--hue);
}

.closing h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(2rem, 1.35rem + 2.9vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.closing-note {
  margin: 1rem 0 1.75rem;
  max-width: 34rem;
  color: var(--muted-foreground);
}

.cta {
  display: inline-flex;
  align-items: center;
  height: 3rem;
  padding: 0 1.5rem;
  border-radius: var(--radius);
  background: var(--foreground);
  color: var(--background);
  font-weight: 500;
  text-decoration: none;
}

/* ── Footer. */
.colophon {
  padding-block: 2.5rem max(2.5rem, env(safe-area-inset-bottom));
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.colophon ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.specimen .spec-currency {
  margin: 0.5rem 0 0.875rem -0.5rem;
}

.credit {
  margin: 1.25rem 0 0;
  max-width: 44rem;
  font-size: 0.6875rem;
  line-height: 1.5;
}

@media (min-width: 40rem) {
  .wrap {
    padding-inline: 2rem;
  }

  .holds li {
    grid-template-columns: auto 12rem 1fr;
  }

  .holds .tile {
    grid-row: auto;
    align-self: center;
  }

  .holds .item-text {
    grid-column: auto;
  }
}

@media (min-width: 60rem) {
  .masthead {
    padding-top: 2rem;
  }

  .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 4rem;
    padding-block: 3.5rem 6rem;
  }

  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 5rem;
  }

  .split--wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
    gap: 4rem;
  }

  .split--flip > .split-text {
    order: 2;
  }

  .split--flip > .split-visual {
    order: 1;
  }

  /* Side by side, the text column is a column again. */
  .split--visual-early > .split-text {
    display: block;
  }

  .band-section .split--visual-early > .split-text > h2 {
    margin-bottom: 1.5rem;
  }
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}