/* Diito marketing site.
 *
 * Structure of this file, in specificity order so nothing later cancels
 * something earlier by accident: reset, base type, layout primitives, the three
 * brand treatments, then one block per section of the page, then the legal-page
 * layout, then motion, then breakpoints.
 *
 * Vertical rhythm is set in exactly one place — `.band` — and never on an element
 * selector, so a section's spacing cannot be quietly overridden by the tag it
 * happens to use.
 */

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

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

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
figure,
figcaption,
dl,
dd,
dt {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

/* ------------------------------------------------------------------ base */

html {
  scroll-behavior: smooth;
  /* The sticky header would otherwise cover the top of a jumped-to section. */
  scroll-padding-top: 84px;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

p {
  color: var(--body);
  max-width: var(--measure);
}

a {
  color: var(--ink);
  text-decoration: none;
}

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

/* One focus treatment, red, on everything. Never removed. */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Visible to assistive technology only. Used where a heading or label is drawn
 * rather than set, so the accessible name is real text. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
  z-index: 20;
}

.skip:focus {
  left: 16px;
}

/* -------------------------------------------------------------- headings */

h1 {
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.08;
  /* Balancing is applied at the wider breakpoints only. In a 335px column the
   * headline is already four lines, and evening them out leaves a single word
   * stranded on its own line. */
  text-wrap: pretty;
}

h2 {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.2;
  text-wrap: pretty;
}

h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.1px;
  line-height: 1.35;
}

.accent {
  color: var(--red);
}

.lede {
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.55;
}

/* ------------------------------------------------- the three treatments */

/* 1. The eyebrow. The only label style on the site: every section, every card,
 *    and both halves of the mirror are titled by one. */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--label);
  max-width: none;
}

/* 2. The accent bar. Deliberately rare — the hero and the footer, and nowhere
 *    else, so it stays a signature rather than a section divider. */
.bar {
  width: 64px;
  height: 5px;
  background: var(--red);
  border-radius: 3px;
}

/* 3. The wordmark. Geometry is in partials/wordmark.html; this is its setting. */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  font-size: 26px;
}

/* The `ii` group carries its own spacing, because the mark's tracking is set
 * for letterforms and these two are drawn glyphs a fifth of their width. At
 * -0.04em the tracking after the `d` more than ate the 0.02em that used to sit
 * here, so the red `i` overlapped the bowl of the `d` and the grey one met the
 * `t` — at the footer's 26px that is half a pixel of overlap on a stem under
 * five wide, and the two thin colour slivers antialias into the black letters
 * either side of them. The mark read "dto".
 *
 * So: the tracking stops at the group's edge, and the left margin carries the
 * 0.04em back before adding real space. Asymmetric because the loss is — the
 * tracking lands after the `d`, and nothing takes anything off the right, where
 * the `t`'s own sidebearing does the work. In em, so it holds at 26px and at
 * the masthead's 52px alike. The internal gap is untouched: the two forms are a
 * mirrored pair and read as one. */
.wordmark .ii {
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
  letter-spacing: normal;
  margin-left: 0.09em;
  margin-right: 0.05em;
}

.wordmark .glyph-i {
  width: 0.18em;
  height: 0.74em;
  display: inline-block;
}

/* The reflected `i`, wherever it is set, dropped so its dot hangs below the
 * baseline. Left on the baseline like its upright twin, the dot butts into the
 * line and the pair reads as punctuation rather than as two letters. In em, so
 * it holds at every size the glyph is used at. */
.glyph-i-mirror {
  transform: translateY(0.11em);
}

/* ------------------------------------------------------ layout primitives */

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Every section's vertical rhythm, set here and nowhere else. */
.band {
  padding: clamp(56px, 8vw, 104px) 0;
  border-top: 1px solid var(--rule);
}

.band-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.band-head p {
  max-width: 62ch;
}

/* Money is the subject's material, so it gets its own voice and never sits in
 * prose type. Tabular figures so two amounts line up on the mirror's axis. */
.amount {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: none;
}

/* An unfilled slot: the business address if it is ever cleared, and any legal
 * section awaiting counsel's text. Nothing uses it today — the pages that did
 * were removed rather than shipped half-written — and it stays because an
 * unstyled slot is one that ships looking like published text. */
.slot {
  font-style: normal;
  color: var(--label);
  background: var(--tint-bg);
  border: 1px dashed var(--tint-br);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.9em;
}

/* ---------------------------------------------------------------- header */

.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(245, 243, 238, 0.92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

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

.masthead .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
}

/* The bar sets the mark well above the 26px base. Scoped here rather than raised
 * on .wordmark itself: the footer carries the same partial and is a sign-off,
 * not a masthead, so it keeps the base size.
 *
 * The em box is not the constraint the size looks like it is. .masthead .wrap
 * centres the mark in a 68px bar, so growth is split top and bottom, and the
 * tallest drawn thing is the 0.74em `i` glyph rather than the em box. Measured
 * clearance from the glyph to the bar's edges is 14px above and 17px below at
 * this size, and still 12px and 13px at 60px. So the bar takes anything up to
 * about 60px without min-height or `scroll-padding-top` moving; past that they
 * both have to. */
.masthead .wordmark {
  font-size: 52px;
}

.masthead-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  margin-left: auto;
}

.masthead-nav a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--body);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

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

/* Set by nav.js from the scroll position — the nav says which section you are
 * actually in, which is the only thing an anchor nav is for. */
.masthead-nav a.is-current {
  color: var(--ink);
  border-bottom-color: var(--red);
}

.chip {
  background: var(--ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: opacity 0.15s;
}

.chip:hover {
  opacity: 0.88;
}

.masthead-nav a.chip {
  border-bottom: none;
  color: #fff;
  /* Restated here, not on .chip: `.masthead-nav a` above is more specific than
   * `.chip` and would otherwise flatten the pill onto its own text. */
  padding: 9px 16px;
  flex: 0 0 auto;
}

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

.hero {
  padding: clamp(48px, 7vw, 92px) 0 clamp(56px, 8vw, 104px);
}

.hero .wrap {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.hero-copy h1 {
  margin-top: 4px;
}

.hero-copy .lede {
  max-width: 44ch;
}

/* ------------------------------------------------- the signature: mirror */

/* One hairline, the spend above it, the investment reflected below. It is the
 * wordmark's own logic — the two `i` forms are mirror images, one the spend and
 * one its reflection — and the product's mechanic, in a single object.
 *
 * The amount is under the default $25 ceiling, so the match equals the spend and
 * the glyphs below the axis are literally the same number flipped. The visual
 * device is the mechanic; nothing here is an invented figure. */
.mirror {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: clamp(26px, 3vw, 38px) clamp(20px, 2.4vw, 30px) clamp(34px, 4vw, 46px);
  position: relative;
  overflow: hidden;
}

.mirror-tag {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  /* Deliberately *not* an eyebrow: it sits on the same line as one, and two
   * letter-spaced caps labels side by side read as a pair of section titles
   * rather than a label and a caveat. */
  font-size: 12.5px;
  font-style: italic;
  color: var(--label);
}

/* The pair, mirrored across the vertical axis between them — the same axis the
 * wordmark's two `i` forms reflect across. Red is the spend and grey is the
 * investment, as the brand mark assigns them.
 *
 * Both amounts are set hard against the line so the reflection is a real
 * reflection and not two figures that happen to face each other. */
.mirror-pair {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
}

.mirror-half {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* The base .amount rule paints ink, for the 404's figure. Inside the pair the
 * colour is the half's: red for the spend, grey for the investment, as the brand
 * mark assigns them. */
.mirror-half .amount {
  color: inherit;
}

.mirror-spend {
  align-items: flex-end;
  text-align: right;
  color: var(--red);
}

.mirror-invest {
  align-items: flex-start;
  text-align: left;
  color: var(--mark-grey);
}

.mirror-line {
  align-self: stretch;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--rule) 12%,
    var(--field) 50%,
    var(--rule) 88%,
    transparent
  );
}

/* The <defs> carrier holds no drawing of its own. Without this it renders at an
 * inline svg's default 300x150 and pushes the whole card down. */
.glyph-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.amount-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The reflection: flipped across the vertical axis, then fading and softening
 * with distance from the line, so the eye reads depth rather than a second
 * figure printed backwards. */
.amount-reflection .amount-svg {
  transform: scaleX(-1);
  filter: blur(0.4px);
  /* to right, which looks backwards: the mask paints in the element's own box
   * and scaleX(-1) applies after it, so this is what keeps the reflection
   * strongest against the line and fades it away from it. */
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.82) 58%, #000);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.82) 58%, #000);
}

/* "i spend" / "i invest", with the logo's own glyph standing in for the letter.
 *
 * Not an .eyebrow: that treatment uppercases, which would turn the lowercase `i`
 * the mark is built on into a capital, and its 0.42em tracking pulls the glyph so
 * far from its word that the two stop reading as one label. Lowercase, modest
 * tracking, and a size chosen so the glyph's dot still registers. */
.mirror-label {
  font-size: 16px;
  font-weight: 600;
  /* Modest, so the word holds together and the glyph is what stands apart. */
  letter-spacing: 0.05em;
  color: var(--label);
  max-width: none;
}

.mirror-label .glyph-i {
  display: inline-block;
  vertical-align: baseline;
  /* Proportionally heavier than in the wordmark: at label size a letter-width
   * stem disappears, so the glyph is drawn as a lockup rather than as a letter. */
  width: 0.2em;
  height: 0.74em;
  /* A whole word space, not a letter space: "invest" begins with an `i` of its
   * own, and at a letter's distance the glyph reads as part of the word. */
  margin-right: 0.4em;
}

.mirror-who {
  font-size: 13.5px;
  color: var(--label);
  max-width: none;
}

/* -------------------------------------------------------------- waitlist */

.signup {
  width: 100%;
  max-width: 460px;
}

.signup-row {
  display: flex;
  gap: 10px;
}

.signup input[type='email'] {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 16px;
  padding: 15px 17px;
  border: 1.5px solid var(--field);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.15s;
}

.signup input[type='email']:focus {
  border-color: var(--red);
}

.signup button {
  font-family: inherit;
  /* White on --red is 3.55:1. That clears AA for large text (>=18.66px bold) and
   * not for normal text, so the label is set above the threshold rather than the
   * brand's primary red being darkened. */
  font-size: 19px;
  font-weight: 700;
  padding: 15px 24px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.signup button:hover {
  opacity: 0.88;
}

.consent {
  font-size: 13px;
  line-height: 1.5;
  color: var(--label);
  margin-top: 12px;
  max-width: 46ch;
}

/* Hidden from people, still submitted, and still reachable by a bot filling in
 * every field. Clipped in place rather than pushed off to left:-9999px, which
 * leaves a 10,000px-wide box in the layout and in every overflow audit. */
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.signup-done {
  display: none;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  background: var(--tint-bg);
  border: 1.5px solid var(--tint-br);
  border-radius: var(--radius);
  padding: 17px 19px;
  max-width: 460px;
}

.signup-done.is-shown {
  display: block;
}

.signup.is-hidden {
  display: none;
}

/* The repeated signup at the foot of the page, on its own panel. */
.enlist .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.enlist p {
  max-width: 48ch;
}

.enlist .consent {
  margin-left: auto;
  margin-right: auto;
}

/* -------------------------------------------------------- how it works */

.steps {
  display: grid;
  /* Explicit column counts, as .cards below: auto-fit at a 240px minimum lands
   * on three-plus-one between about 800px and 1075px and strands the fourth
   * card beside an empty cell painted in the grid's rule colour. One column,
   * then two by two, then four across once four of them actually fit. */
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.step {
  background: var(--cream);
  padding: clamp(22px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step-n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  /* 19px so the red clears the large-text contrast threshold; at 13px #FF3D00 on
   * cream is 3.2:1 against a 4.5:1 requirement. It also reads better as a marker
   * at this size, and the ink heading below it still leads on contrast. */
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--red);
  max-width: none;
}

.step p:not(.step-n) {
  font-size: 15px;
  max-width: none;
}

.kicker {
  margin-top: clamp(26px, 3vw, 36px);
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
  max-width: 42ch;
}

/* The mark, the line it names, and the example it names it with, as one column.
 * The card's own labels are "i spend" and "i invest" in these very glyphs, so the
 * mark reads as its caption rather than as a separate statement made twice. */
.mirror-frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.mirror-frame .wordmark {
  font-size: clamp(38px, 4vw, 52px);
}

.mirror-frame .mirror {
  width: 100%;
  margin-top: 6px;
}

/* Where the name comes from, set quietly under the heading it explains. Kept
 * because it is the one thing the glyphs cannot say on their own, and it is five
 * words rather than a paragraph. Its own line, not a bolded lead-in to the
 * paragraph below: that sentence is about the name and the next one is about
 * what to do, and running them together makes both read oddly. */
.mark-note {
  font-size: 14.5px;
  color: var(--label);
  max-width: none;
  margin-top: -6px;
}

/* Drawn in the mark's own glyphs, sized to the column rather than to a section
 * heading — it captions the card below it. */
.creed {
  font-size: clamp(23px, 2.3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.3;
  color: var(--ink);
  max-width: none;
}

/* Each clause is one inline-block so it cannot break between its glyph and its
 * word, and so the two clauses can be spaced apart from each other rather than
 * relying on a single word space. */
.creed .clause {
  display: inline-block;
  white-space: nowrap;
}

.creed .clause + .clause {
  margin-left: 0.62em;
}

.creed .glyph-i {
  display: inline-block;
  vertical-align: baseline;
  /* Slightly wider than in the wordmark so the stem carries the same weight as
   * the 800 text beside it, and given the side bearings a real letter would
   * have. */
  width: 0.17em;
  height: 0.66em;
  /* A word space, matching the card labels: the glyph stands in for the word "i",
   * so it needs the gap a word gets and not the one a letter gets. */
  margin: 0 0.34em 0 0.04em;
}

/* A block inside a band rather than a band of its own: Your controls now sits
 * under How it works, because the limits are part of how the thing works and the
 * nav is shorter for it. */
.subsection {
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: clamp(32px, 4vw, 44px);
  border-top: 1px solid var(--rule);
}

.subsection h3 {
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: -0.3px;
}

.subsection > p {
  margin: 12px 0 clamp(26px, 3vw, 34px);
  max-width: 62ch;
}

/* ------------------------------------------------------ about and contact */

/* The contact routes, condensed from the page they used to be. A description
 * list, because that is what they are: a purpose and the address for it. */
.reach {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.reach > div {
  background: var(--cream);
  padding: clamp(18px, 2.2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reach dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--label);
}

.reach dd {
  margin: 0;
}

.warn {
  margin-top: clamp(24px, 3vw, 32px);
  font-size: 15px;
  max-width: 78ch;
}

/* --------------------------------------------------------------- controls */

.grid-4 {
  display: grid;
  /* Explicit counts, for the reason given on .steps. */
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.control {
  background: var(--cream);
  padding: clamp(22px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.control h4 {
  margin-top: 2px;
  line-height: 1.35;
  letter-spacing: -0.1px;
  /* 19px so the red "Your" clears the large-text contrast threshold. #FF3D00 on
   * cream is 3.2:1: fine at this size and weight, short of AA below it. */
  font-size: 19px;
  font-weight: 700;
}

.control p {
  font-size: 15px;
  max-width: none;
}

.control-default {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--label);
  max-width: none;
}

.control-default b {
  color: var(--ink);
  font-weight: 700;
}

/* -------------------------------------------------------------------- faq */

.faq-group {
  margin-bottom: clamp(32px, 4vw, 48px);
  max-width: 720px;
}

.faq-group:last-child {
  margin-bottom: 0;
}

.faq-group > .eyebrow {
  padding-bottom: 12px;
}

details {
  border-top: 1px solid var(--rule);
}

.faq-group details:last-of-type {
  border-bottom: 1px solid var(--rule);
}

summary {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  font-size: 16.5px;
  font-weight: 650;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

/* The +/− is drawn, not an icon font or an SVG — one less thing to load. */
summary::after {
  content: '';
  margin-left: auto;
  flex: 0 0 13px;
  height: 13px;
  margin-top: 6px;
  background:
    linear-gradient(var(--red), var(--red)) center / 13px 2px no-repeat,
    linear-gradient(var(--red), var(--red)) center / 2px 13px no-repeat;
  transition: transform 0.18s;
}

details[open] > summary::after {
  background: linear-gradient(var(--red), var(--red)) center / 13px 2px no-repeat;
}

details > p {
  padding: 0 0 20px;
  font-size: 15.5px;
  max-width: 68ch;
}

details > p + p {
  padding-top: 0;
  margin-top: -8px;
}

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

.foot {
  border-top: 1px solid var(--rule);
  padding: clamp(48px, 6vw, 76px) 0 40px;
}

.foot-top {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 72px);
}

.foot-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 220px;
}

.foot-brand address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: var(--body);
}

.foot-brand address b {
  color: var(--ink);
  font-weight: 650;
}

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 56px);
  margin-left: auto;
}

.foot-nav ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.foot-nav li a {
  font-size: 14px;
  color: var(--body);
}

.foot-nav li a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.foot-nav .eyebrow {
  margin-bottom: 14px;
}

/* What Diito Inc. is not, under the footer's own rule and above the copyright.
 * Set at the address's size rather than the copyline's: it is a statement about
 * the company, and a reader who wants it should not have to hunt at 13px. */
.foot-status {
  border-top: 1px solid var(--rule);
  margin-top: clamp(24px, 3vw, 32px);
  padding-top: 22px;
  font-size: 14px;
  color: var(--body);
}

/* The copyline follows the status line, so the rule above it would be a second
 * one on the same edge. */
.foot-status + .copyline {
  border-top: 0;
  margin-top: 10px;
  padding-top: 0;
}

.copyline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  border-top: 1px solid var(--rule);
  margin-top: clamp(24px, 3vw, 32px);
  padding-top: 22px;
  font-size: 13px;
  color: var(--label);
}

.copyline a {
  color: var(--label);
}

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

/* ------------------------------------------------------- legal documents */

/* Privacy and terms: long, dry, revised on their own schedule, and read rather
 * than scanned. A single column at a comfortable measure and a last-updated
 * line.
 *
 * One column at every width, and deliberately not a two-column frame with a
 * table of contents down the side. Neither page is navigated: each is eight
 * sections of a paragraph or two, nothing links to the anchors, and the section
 * ids exist so a section can be cited rather than jumped to. The frame used to
 * reserve a 232px gutter for a contents list and hand every page a modifier to
 * opt out of it, which is how both legal pages came to render their body text
 * inside that gutter once the lists were cut. A layout no page wants is not the
 * one to make the default. /signups uses this same frame for the same reason. */
.doc {
  padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 96px);
}

.doc .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.doc-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: clamp(28px, 3vw, 40px);
  border-bottom: 1px solid var(--rule);
}

.doc-stamp {
  font-size: 13px;
  color: var(--label);
}

.doc-body {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4vw, 44px);
  min-width: 0;
}

.doc-body section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doc-body h2 {
  font-size: clamp(20px, 2.2vw, 24px);
}

.doc-body h2 span {
  font-family: var(--mono);
  font-size: 0.7em;
  font-weight: 700;
  color: var(--label);
  margin-right: 10px;
  letter-spacing: 0;
}

.doc-body p {
  font-size: 16px;
}

.pending {
  border: 1px dashed var(--tint-br);
  background: var(--tint-bg);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.pending p {
  font-size: 14.5px;
  color: var(--body);
}

/* -------------------------------------------------------- contact + 404 */

/* Explicit column counts rather than auto-fit: with four cards, auto-fit lands
 * on three-plus-one at desktop widths and strands the last one. Two columns is a
 * 2x2 block at every width above a phone. */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 24px);
}

@media (min-width: 620px) {
  .cards,
  .steps,
  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1080px) {
  .steps,
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card p {
  font-size: 15px;
  max-width: none;
}

.mail {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--red);
  padding-bottom: 1px;
  word-break: break-all;
}

.mail:hover {
  border-bottom-color: var(--ink);
}

.gone {
  padding: clamp(72px, 12vh, 140px) 0 clamp(72px, 12vh, 140px);
}

.gone .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.gone .amount {
  font-size: clamp(64px, 14vw, 132px);
  color: var(--red);
  line-height: 1;
}

.linkrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 6px;
}

.linkrow a {
  font-size: 15px;
  font-weight: 600;
  color: var(--body);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}

.linkrow a:hover {
  color: var(--ink);
  border-bottom-color: var(--red);
}

/* ---------------------------------------------------------------- signups */

/* The internal waitlist view (web/pages/signups.html). It borrows the legal
 * pages' .doc frame so it reads as part of the site rather than as a console,
 * and adds a table — the one on the site. Removed with the page at the launch
 * gate. */

/* Left to fill the full column the table is mostly dead space between a short
 * address and its date. This is wider than the legal pages' --measure, because a
 * table is not prose, and narrow enough that the two columns stay related. */
.signups-body {
  max-width: 820px;
}

/* Every state is in the markup and exactly one is shown, so the script never
 * builds a state and there is no half-rendered page between fetch and paint. */
.signups-state {
  display: none;
  color: var(--body);
}

.signups-state.is-shown {
  display: block;
}

/* The password prompt. Same visual language as the waitlist form's row —
 * an input and a button, side by side — since both are "one field, one
 * button" on the same site. */
.signups-login {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 420px;
}

.signups-login label {
  display: block;
  width: 100%;
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--label);
}

.signups-login input[type='password'] {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 16px;
  padding: 15px 17px;
  border: 1.5px solid var(--field);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.15s;
}

.signups-login input[type='password']:focus {
  border-color: var(--red);
}

.signups-login button {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  padding: 15px 20px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.signups-login button:hover {
  opacity: 0.88;
}

.signups-login .signups-note {
  flex-basis: 100%;
  margin-top: 0;
  color: var(--red);
}

.signups-count {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}

.signups-count .amount {
  font-size: clamp(48px, 9vw, 88px);
  color: var(--red);
  line-height: 1;
}

.signups-count-label {
  font-size: 15px;
  color: var(--label);
  margin: 0;
}

.signups-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

/* Matches the waitlist field's treatment, so the one input on this page and the
 * one input on the home page are visibly the same control. */
.signups-search {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 380px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--field);
  border-radius: var(--radius);
  padding: 11px 14px;
  -webkit-appearance: none;
  appearance: none;
}

.signups-search::placeholder {
  color: var(--label);
}

.signups-search:focus {
  outline: 2px solid var(--red);
  outline-offset: 1px;
  border-color: var(--red);
}

/* `hidden` has to win over anything that sets a display on these, or a note the
 * script has switched off keeps its space on the page. */
.signups-note[hidden],
.signups-nomatch[hidden] {
  display: none;
}

.signups-nomatch {
  margin-top: 22px;
  color: var(--body);
}

.signups-note {
  margin-top: 18px;
  font-size: 14px;
  color: var(--label);
}

/* The table scrolls inside its own box rather than widening the page: a long
 * address on a narrow phone would otherwise push the whole layout sideways. */
.signups-table-wrap {
  margin-top: 28px;
  overflow-x: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.signups-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.signups-table th {
  text-align: left;
  padding: 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

/* The whole header cell is the target, so the click area matches what a reader
 * takes to be the button — the column heading, not the few pixels of its text. */
.signups-table th .sort {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 14px 18px;
  cursor: pointer;
  text-align: left;
}

.signups-table th .sort:hover {
  color: var(--ink);
}

.signups-table th .sort:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

.signups-table th .sort.is-active {
  color: var(--ink);
}

/* The arrow is drawn from the button's state rather than written into the
 * markup, so the direction cannot disagree with the order the rows are in. */
.signups-table th .sort.is-active::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.signups-table th .sort.is-active[data-dir='up']::after {
  border-bottom: 5px solid var(--red);
}

.signups-table th .sort.is-active[data-dir='down']::after {
  border-top: 5px solid var(--red);
}

.signups-table td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}

.signups-table tr:last-child td {
  border-bottom: 0;
}

.signups-table .col-n {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--label);
  white-space: nowrap;
  width: 1%;
}

/* Monospaced, because these are addresses and a reader compares them character
 * by character. Breaking anywhere beats a long address forcing a scrollbar. */
.signups-table .col-email {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  word-break: break-all;
}

.signups-table .col-when {
  color: var(--body);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- motion */

/* One orchestrated moment on load, then the page is still: the spend rises, and
 * the reflection unfolds sideways from the line. Nothing else animates on
 * scroll. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes unfold-side {
  from {
    opacity: 0;
    transform: scaleX(0.25);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

.mirror-spend {
  animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.mirror-invest {
  /* From the line, which is the reflection's left edge. */
  transform-origin: left center;
  animation: unfold-side 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) 0.6s both;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------------------------------------- breakpoints */

@media (min-width: 760px) {
  h1,
  h2 {
    text-wrap: balance;
  }
}

/* Stacked, the card sits under the form and matches its width. Left to fill a
 * 690px column it is mostly empty to the right of the amount. */
@media (max-width: 899px) {
  .mirror {
    max-width: 460px;
  }
}

@media (min-width: 900px) {
  .hero .wrap {
    grid-template-columns: 0.92fr 1.08fr;
  }

}

@media (max-width: 760px) {
  /* The anchor nav goes; the wordmark and the one action stay. A section list
   * squeezed into a 375px bar is unreadable, and the page scrolls anyway. */
  .masthead-nav a:not(.chip) {
    display: none;
  }

  .signup-row {
    flex-direction: column;
  }

  .signup button {
    width: 100%;
  }

  .signups-table th,
  .signups-table td {
    padding-left: 12px;
    padding-right: 12px;
  }


  .foot-nav {
    margin-left: 0;
    width: 100%;
  }
}