@import url("/ds1/one.css");
@import url("/ds1/controls.css");
@import url("/ds1/prose.css");

/* Olivetti Dot draws amounts and their currency signs, nothing else: the
   prices, and the figures in Money's drawn screens (marked .amt). Headlines,
   dates and counts keep GT America. */
@font-face {
  font-family: "Olivetti Dot";
  src: url("/number-font/OlivettiDot-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Money numbers";
  src: url("/number-font/OlivettiDot-Regular.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  unicode-range: U+0024-0025, U+002B-002E, U+0030-0039, U+00A2-00A5, U+0E3F, U+20A6, U+20A9, U+20AC, U+20B1, U+20B8-20BA, U+20BD, U+20BF, U+2212;
}

/* Panels after Ezo's store landing: each the window's whole width, in its
   own colour whatever the reader's theme, every measure the page's square.
   A title on three rows at three times the text size, its line on two at
   one and a half, the picture standing on the panel's foot. */
:root {
  --sf: 1;
  --ds-sf: var(--sf);
  --u: calc(20px * var(--sf));
  color-scheme: light dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background);
  color: var(--text-color);
  font-family: "Inter Arrows", "GT-America-Standard-Regular", sans-serif;
  font-size: calc(14px * var(--sf));
  line-height: var(--u);
}
h1, h2, p, figure, ul { margin: 0; padding: 0; font-weight: 400; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 2px; }
.ds-button { text-decoration: none; }
.brand { display: inline-flex; align-items: center; gap: calc(10px * var(--sf)); text-decoration: none; white-space: nowrap; }

/* The bar: forty pixels, two squares, over the first panel. */
.bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--u);
  height: calc(2 * var(--u));
  padding-inline: var(--u);
  background: color-mix(in srgb, var(--slate) 92%, transparent);
  color: #ffffff;
  color-scheme: dark;
  backdrop-filter: blur(calc(20px * var(--sf)));
}
/* The links stand exactly in the middle, whatever the name and the button weigh. */
.bar .brand { justify-self: start; }
.bar nav { display: flex; gap: var(--u); justify-self: center; }
.bar > .ds-button { justify-self: end; }
.bar nav a { text-decoration: none; color: #b3b3b3; }
.bar nav a:hover { color: #ffffff; }

.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(3 * var(--u)) var(--u) 0;
  overflow: clip;
  text-align: center;
  scroll-margin-top: calc(2 * var(--u));
}
[data-tone="light"] { --panel: #ffffff; color-scheme: light; --text-color: #1e1e1e; --ds-text-color: #1e1e1e; --dim: #797979; --rule: #e6e6e6; --paper: #ffffff; background: #ffffff; color: #1e1e1e; }
[data-tone="grey"] { --panel: color-mix(in srgb, var(--slate-light) 50%, #ffffff); color-scheme: light; --text-color: #1e1e1e; --ds-text-color: #1e1e1e; --dim: #797979; --rule: #dcdcdc; --paper: #ffffff; background: color-mix(in srgb, var(--slate-light) 50%, #ffffff); color: #1e1e1e; }
[data-tone="dark"] { --panel: #1e1e1e; color-scheme: dark; --text-color: #ffffff; --ds-text-color: #ffffff; --dim: #999999; --rule: #3c3c3c; --paper: #2a2a2a; background: #1e1e1e; color: #ffffff; }
.dim { color: var(--dim); }
.kicker { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) / 2); color: var(--dim); }
/* Design system 1's rounded icons as app-icon tiles: the same rounding at
   every size, a quarter of the side, in one of the palette's colours. */
.badge {
  display: grid;
  place-items: center;
  width: calc(2 * var(--u));
  height: calc(2 * var(--u));
  border-radius: 25%;
  color: #1e1e1e;
}
.badge svg { width: calc(24px * var(--sf)); height: calc(24px * var(--sf)); }
.badge[data-hue="green"] { background: var(--apple-green); }
.badge[data-hue="blue"] { background: var(--zenith-blue); }
.badge[data-hue="orange"] { background: var(--orange); }
.badge[data-hue="pink"] { background: var(--pink); }
.badge[data-hue="yellow"] { background: var(--yellow); }
/* The panels' words are prose (data-ds-prose); the display title keeps the
   store panel's size and stands straight under its kicker. */
.title {
  margin-top: 0;
  font-weight: 400;
  max-width: calc(40 * var(--u));
  font-family: "Inter Arrows", "GT-America-Standard-Medium", sans-serif;
  font-size: calc(42px * var(--sf));
  line-height: calc(3 * var(--u));
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* Titles are plain GT America Medium (Joachim, 17 October 2026: normal letters, no engraving). */

/* An amount anywhere on the page: its digits and sign in dots, its words in letters. */
.amt { font-family: "Inter Arrows", "Money numbers", "GT-America-Standard-Regular", sans-serif; white-space: nowrap; }
/* A price in plain letters, never broken across lines. */
[data-price], [data-plus-month], [data-plus-year] { white-space: nowrap; }
/* Behind the hero: threads, the super-fine engraving of a banknote. A weave
   of waves over the panel and one wide rosette behind the headline, drawn
   by scripts/hero-threads.mjs from shared/threads.ts, under a grain. They
   fade out before the app's picture, and the weave slides slowly by
   transform alone, standing still for reduced motion. */
.hero { position: relative; isolation: isolate; }
.hero > :not(.money-bg) { position: relative; z-index: 1; }
.money-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.money-defs { position: absolute; }
.money-grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .07; mix-blend-mode: overlay; }
.threads {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #ffffff;
  mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 70%);
}
.threads .weave { opacity: .09; animation: weave 40s linear infinite alternate; }
.threads .rose { opacity: .12; }
@keyframes weave { to { transform: translateX(-90px); } }
.line {
  margin-top: calc(var(--u) / 2);
  max-width: calc(32 * var(--u));
  color: var(--dim);
  font-size: calc(21px * var(--sf));
  line-height: calc(2 * var(--u));
  text-wrap: balance;
}
.line [data-price] { color: var(--text-color); }
.actions { display: flex; align-items: center; gap: var(--u); margin-top: var(--u); }
.more { text-decoration: none; color: var(--sharp-blue); }
[data-tone="dark"] .more { color: var(--zenith-blue); }

/* The pictures: Money's iPhone screens, drawn in HTML with made-up figures
   (scripts/phones.mjs), in Ezo's iPhone frame. A screen is fourteen of the
   phone's squares (--pu) wide, as the app is on a phone; the frame's picture
   is measured from its screen. The phones stand on the panel's foot, cut
   below the middle of their screens. */
.art {
  --pu: 20px;
  --screen: calc(14 * var(--pu));
  --frame-w: calc(var(--screen) * 1819 / 1622);
  --frame-h: calc(var(--frame-w) * 1855 / 910);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(2 * var(--pu));
  width: 100%;
  height: calc(var(--frame-h) * 0.78);
  margin-top: calc(3 * var(--u));
  overflow: clip;
  text-align: left;
  animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* Three in a row: the middle one forward, those beside it a little lower. */
.trio .phone:not(:nth-child(2)) { margin-top: calc(3 * var(--pu)); }
.phone { position: relative; flex: none; width: var(--frame-w); height: var(--frame-h); }
.glass {
  position: absolute;
  top: calc(var(--screen) * 60 / 1622);
  left: calc(var(--screen) * 98 / 1622);
  width: var(--screen);
  height: calc(var(--screen) * 2.212);
  overflow: hidden;
  border-radius: calc(2 * var(--pu));
  background: #f4f4f4;
  color: #2a2a2a;
  color-scheme: light;
}
.phone :is(.status, .frame) { position: absolute; display: block; max-width: none; pointer-events: none; }
.phone .status { z-index: 2; top: calc(var(--screen) * 60 / 1622); left: calc(var(--screen) * 98 / 1622); width: var(--screen); }
.phone .frame { z-index: 3; top: 0; left: 0; width: 100%; filter: drop-shadow(0 var(--pu) calc(2 * var(--pu)) rgb(0 0 0 / 0.3)); }
.home { position: absolute; bottom: calc(0.4 * var(--pu)); left: 50%; width: calc(5 * var(--pu)); height: calc(0.2 * var(--pu)); margin-left: calc(-2.5 * var(--pu)); border-radius: 999px; background: #1e1e1e; }

/* Inside the screen, the app's own measures: text at seven tenths of a
   square, small at a half, titles at about one, the balance at one and
   four tenths; every line on its square. */
.scr {
  position: absolute;
  inset: calc(2 * var(--pu)) var(--pu) 0;
  font-family: "Inter Arrows", "GT-America-Standard-Regular", sans-serif;
  font-size: calc(0.7 * var(--pu));
  line-height: var(--pu);
}
.scr :where(p) { margin: 0; }
.scr .dim { color: #797979; }
.scr small { font-size: calc(0.5 * var(--pu)); }
.scr .amt.in { color: #529d36; }
.scr .danger { color: #de0331; }
.scr svg { display: block; }
.s-top { display: flex; justify-content: flex-end; height: var(--pu); margin-bottom: var(--pu); }
.s-avatar { display: grid; place-items: center; width: var(--pu); height: var(--pu); border-radius: 50%; background: #e6e6e6; color: #5f5f5f; font-size: calc(0.4 * var(--pu)); }
.s-title { display: flex; align-items: center; gap: calc(0.5 * var(--pu)); height: calc(2 * var(--pu)); font-size: calc(1.05 * var(--pu)); }
.s-title > span:first-child { margin-right: calc(0.5 * var(--pu)); }
.s-round { display: grid; place-items: center; width: calc(0.8 * var(--pu)); height: calc(0.8 * var(--pu)); border-radius: 50%; background: #e6e6e6; color: #5f5f5f; }
.s-round svg { width: calc(0.6 * var(--pu)); height: calc(0.6 * var(--pu)); }
.s-round[data-on] { background: #2a2a2a; color: #f4f4f4; }
.s-figure { display: flex; align-items: center; height: calc(2 * var(--pu)); font-size: calc(1.4 * var(--pu)); }
.s-note, .s-quiet { font-size: calc(0.5 * var(--pu)); }
.s-gap { height: var(--pu); }
.s-gap3 { height: calc(3 * var(--pu)); }
.s-day { padding-top: var(--pu); }
.s-head { height: var(--pu); border-bottom: 1px solid #d8d8d8; }
.s-row, .s-sub, .s-line { display: flex; align-items: center; gap: calc(0.2 * var(--pu)); white-space: nowrap; }
.s-row, .s-line { height: var(--pu); }
.s-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.s-line.small { gap: calc(0.5 * var(--pu)); font-size: calc(0.5 * var(--pu)); }
.s-line.small > span:first-child:not(:last-child) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Money's icon on its category's colour, in a tile sixteen square in its square. */
.t { display: grid; flex: none; place-items: center; width: var(--pu); height: var(--pu); }
.t svg { box-sizing: border-box; width: calc(0.8 * var(--pu)); height: calc(0.8 * var(--pu)); padding: calc(0.15 * var(--pu)); border-radius: calc(0.2 * var(--pu)); background: #e6e6e6; box-shadow: inset 0 0 0 1px rgb(42 42 42 / 0.12); color: #1e1e1e; }
.t[data-hue] svg { padding: calc(0.1 * var(--pu)); }
.t[data-hue="green"] svg { background: var(--apple-green); }
.t[data-hue="chartreuse"] svg { background: var(--chartreuse-green); }
.t[data-hue="yellow"] svg { background: var(--yellow); }
.t[data-hue="orange"] svg { background: var(--orange); }
.t[data-hue="pink"] svg { background: var(--pink); }
.t[data-hue="lavender"] svg { background: var(--zenith-blue); }
.s-two { display: flex; align-items: flex-start; gap: calc(0.2 * var(--pu)); height: calc(2 * var(--pu)); border-bottom: 1px solid #e6e6e6; }
.s-two > div { flex: 1; min-width: 0; }
.s-two.plain { height: auto; min-height: calc(2 * var(--pu)); }
.s-section { height: var(--pu); margin-block: var(--pu); }
/* How much of a budget is spent: a bar on the line colour, past it in red;
   it fills by transform as the picture rises. */
.s-meter { position: relative; flex: 1; height: calc(0.2 * var(--pu)); background: #e6e6e6; overflow: hidden; }
.s-meter::after { content: ""; position: absolute; inset: 0; background: #2a2a2a; transform-origin: left; transform: scaleX(var(--v)); animation: fill 1.2s 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.s-meter.over::after { background: var(--tuned-red); }
/* The page allows no inline styles: each fill its class (scripts/phones.mjs). */
.v5 { --v: .05; } .v24 { --v: .24; } .v40 { --v: .4; } .v48 { --v: .48; } .v50 { --v: .5; }
.v62 { --v: .62; } .v90 { --v: .9; } .v100 { --v: 1; }
.s-sub { height: calc(2 * var(--pu)); }
.s-sub .s-name { flex: 0 1 auto; }
.s-sub .s-fill { flex: 1; }
.s-leaf { display: flex; flex: none; flex-direction: column; align-items: center; width: calc(2 * var(--pu)); line-height: var(--pu); }
.s-display { height: calc(2 * var(--pu)); font-size: calc(1.05 * var(--pu)); line-height: calc(2 * var(--pu)); }
.s-buttons { display: flex; gap: calc(0.5 * var(--pu)); height: var(--pu); margin-bottom: var(--pu); }
.s-button { display: inline-flex; align-items: center; height: var(--pu); padding-inline: calc(0.3 * var(--pu)); border-radius: calc(0.2 * var(--pu)); background: #e6e6e6; }
.s-button svg { width: calc(0.7 * var(--pu)); height: calc(0.7 * var(--pu)); }
/* A month in hairline boxes three squares tall, the date at the top right. */
.s-cal { margin-top: calc(0.5 * var(--pu)); border-bottom: 1px solid rgb(42 42 42 / 0.28); }
.s-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.s-week:first-child small { height: var(--pu); padding-left: calc(0.15 * var(--pu)); }
.s-week:not(:first-child) { border-right: 1px solid rgb(42 42 42 / 0.28); }
.s-box { display: flex; flex-direction: column; align-items: flex-start; height: calc(3 * var(--pu)); border-top: 1px solid rgb(42 42 42 / 0.28); border-left: 1px solid rgb(42 42 42 / 0.28); }
.s-box[data-out] > * { opacity: 0.4; }
.s-date { align-self: flex-end; height: var(--pu); padding-right: calc(0.15 * var(--pu)); color: #797979; }
.s-date.today { display: grid; place-items: center; width: calc(0.9 * var(--pu)); height: calc(0.9 * var(--pu)); margin: calc(0.05 * var(--pu)); padding: 0; border-radius: 50%; background: var(--signal-red); color: #ffffff; font-size: calc(0.45 * var(--pu)); }
.s-spent { display: flex; flex-direction: column; align-items: flex-end; align-self: stretch; margin-top: auto; padding: 0 calc(0.1 * var(--pu)) calc(0.1 * var(--pu)); font-size: calc(0.45 * var(--pu)); line-height: calc(0.6 * var(--pu)); }

/* Figures stand alone, each with a caption of a few words. */
.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(2 * var(--u));
  padding: calc(6 * var(--u)) var(--u);
  text-align: center;
}
.figures > div { display: flex; flex-direction: column; align-items: center; }
.figures .badge { margin-bottom: var(--u); }
.figures strong {
  display: block;
  font-family: "Inter Arrows", "GT-America-Standard-Medium", sans-serif;
  font-weight: 400;
  font-size: calc(120px * var(--sf));
  line-height: calc(7 * var(--u));
}
.figures span { color: var(--dim); }

/* Pricing: the visitor's price, large, then the board of every currency. */
.pricing { padding-bottom: calc(4 * var(--u)); }
.price { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) / 2); margin-top: calc(2 * var(--u)); }
.price > span:not(.flaps) { color: var(--dim); font-size: calc(21px * var(--sf)); line-height: calc(2 * var(--u)); }
.price [data-place], .price [data-plus-year] { color: var(--text-color); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The plan switch: Money or the Plus plan, radio buttons drawn as Design
   system 1's buttons, the chosen one in the accent. Money is chosen until
   the Plus plan is. */
.plans { position: relative; display: flex; gap: calc(var(--u) / 2); margin-top: calc(2 * var(--u)); }
.plan-input { position: absolute; inset: 0 auto auto 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.plans .ds-button { cursor: pointer; --ds-button-background: var(--ds-button-background-color-secondary); }
.pricing:not(:has(#plan-plus:checked)) label[for="plan-money"],
#plan-plus:checked + label {
  --ds-button-background: var(--ds-button-background-color-primary);
  --ds-button-color: var(--ds-button-text-color-on-accent);
}
.plan-input:focus-visible + label { outline: 2px solid var(--sharp-blue); outline-offset: 2px; }
.pricing:not(:has(#plan-plus:checked)) .for-plus,
.pricing:has(#plan-plus:checked) .for-money { display: none; }

/* Every currency's price, each its own small card on the paper, showing the
   chosen plan's price. */
.board {
  display: grid;
  grid-template-columns: repeat(6, calc(7 * var(--u)));
  gap: calc(var(--u) / 2);
  width: max-content;
  max-width: 100%;
  margin-top: calc(3 * var(--u));
  list-style: none;
}
.board a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(3 * var(--u));
  border-radius: calc(4px * var(--sf));
  background: var(--paper);
  text-decoration: none;
  transition: background-color 0.2s, transform 0.2s;
}
.board a:hover { background: var(--rule); }
.board a:active { transform: scale(0.97); }
.board strong {
  font-family: "Inter Arrows", "GT-America-Standard-Medium", sans-serif;
  font-weight: 400;
  font-size: calc(20px * var(--sf));
  line-height: calc(1.5 * var(--u));
}
.board span { color: var(--dim); font-size: calc(10px * var(--sf)); }
.board [aria-current] { background: var(--apple-green); color: var(--slate); }
.board [aria-current] span { color: var(--slate); }

/* The price itself on split flaps, as at an airport: every character a flap
   with a seam across its middle, its reel (shared/flaps.ts) holding the
   characters it turns through, the last one landing. All of it in dots,
   the currency's letters too. */
.flaps { display: inline-flex; gap: .08em; font-family: "Inter Arrows", "Olivetti Dot", "GT-America-Standard-Medium", sans-serif; }
.f {
  --h: 1.4em;
  position: relative;
  display: inline-block;
  width: .74em;
  height: var(--h);
  overflow: clip;
  border-radius: .12em;
  background: linear-gradient(#303030 50%, #282828 50%);
  line-height: var(--h);
  text-align: center;
  perspective: 3em;
}
.f::before { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; margin-top: -.5px; background: #0d0d0d; z-index: 2; }
/* The falling flap: a shade over the top half, so the character shows through as it turns. */
.f::after { content: ""; position: absolute; inset: 0 0 50%; background: linear-gradient(rgb(255 255 255 / .06), rgb(0 0 0 / .45)); transform-origin: bottom; opacity: 0; }
.r { display: block; white-space: pre; transform: translateY(calc(-3 * var(--h))); }
.flaps.big { font-size: min(calc(64px * var(--sf)), calc((100vw - 4 * var(--u)) / 8)); }
.flaps.big .f { color: var(--apple-green); }
@keyframes roll { from { transform: translateY(0); } to { transform: translateY(calc(-3 * var(--h))); } }
@keyframes drop { from { transform: rotateX(0); opacity: 1; } to { transform: rotateX(-90deg); opacity: 0; } }
@keyframes roll-switch { from { transform: translateY(0); } to { transform: translateY(calc(-3 * var(--h))); } }
@keyframes drop-switch { from { transform: rotateX(0); opacity: 1; } to { transform: rotateX(-90deg); opacity: 0; } }
/* Each flap's place along the price, so it settles left to right. */
.flaps .f:nth-child(1) { --n: 1; } .flaps .f:nth-child(2) { --n: 2; } .flaps .f:nth-child(3) { --n: 3; }
.flaps .f:nth-child(4) { --n: 4; } .flaps .f:nth-child(5) { --n: 5; } .flaps .f:nth-child(6) { --n: 6; }
.flaps .f:nth-child(7) { --n: 7; } .flaps .f:nth-child(8) { --n: 8; } .flaps .f:nth-child(9) { --n: 9; }
.flaps .f:nth-child(10) { --n: 10; } .flaps .f:nth-child(11) { --n: 11; } .flaps .f:nth-child(12) { --n: 12; }
.flaps .f:nth-child(13) { --n: 13; } .flaps .f:nth-child(14) { --n: 14; }
@media (prefers-reduced-motion: no-preference) {
  /* Scrolling down turns the flaps: each reel steps through its characters
     as the price comes up the screen, a flap dropping at every step. */
  @supports (animation-timeline: view()) {
    .pricing .f .r {
      animation: roll linear both;
      animation-timing-function: steps(4, jump-none);
      animation-timeline: view();
      animation-range: entry calc(10% + var(--n, 0) * 6%) cover calc(10% + var(--n, 0) * 1%);
    }
    .pricing .f::after {
      animation: drop linear 3 forwards;
      animation-timeline: view();
      animation-range: entry calc(10% + var(--n, 0) * 6%) cover calc(10% + var(--n, 0) * 1%);
    }
  }
  /* Choosing a plan turns its price over at once. */
  .pricing .for-plus .f .r,
  .pricing:has(#plan-money:checked) .for-money .f .r {
    animation: roll-switch .36s steps(4, jump-none) both;
    animation-delay: calc(var(--n, 0) * 45ms);
  }
  .pricing .for-plus .f::after,
  .pricing:has(#plan-money:checked) .for-money .f::after {
    animation: drop-switch .12s linear 3 forwards;
    animation-delay: calc(var(--n, 0) * 45ms);
  }
}
.pricing .note { box-sizing: border-box; width: 100%; max-width: calc(24 * var(--u)); margin: calc(2 * var(--u)) auto 0; align-self: center; text-align: center; color: var(--dim); text-wrap: balance; }

/* The account pages: sign in, wait for a purchase, not open yet. One column of
   sixteen squares, the brand above, the form straight on the paper. */
.account { min-height: 100vh; padding-bottom: calc(3 * var(--u)); }
.account .brand { margin-bottom: calc(3 * var(--u)); }
.account-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--u) / 2);
  width: min(100%, calc(16 * var(--u)));
  margin-top: calc(2 * var(--u));
  text-align: left;
}
.account-form .ds-button { align-self: start; margin-top: calc(var(--u) / 2); }
/* Two choices side by side, as on the consent page for an assistant. */
.account-actions { display: flex; flex-wrap: wrap; gap: calc(var(--u) / 2); margin-top: calc(var(--u) / 2); }
.account-actions .ds-button { margin-top: 0; }
.account form:not(.account-form) { margin-top: calc(2 * var(--u)); }
/* Create account and Sign in: Continue with Apple, then Google, stacked at the
   form's sixteen squares, then "or with your email" over the form. */
.account-social {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) / 2);
  width: min(100%, calc(16 * var(--u)));
  margin-top: calc(2 * var(--u));
  --ds-button-width: 100%;
  --ds-button-align: center;
}
.account-social .ds-button { text-decoration: none; }
.account .or { margin-top: var(--u); color: var(--dim); line-height: var(--u); }
.account .or + .account-form { margin-top: calc(var(--u) / 2); }
.notice { margin-top: var(--u); color: var(--tuned-red); }
.quiet { margin-top: var(--u); color: var(--dim); }
.start { margin-top: calc(2 * var(--u)); }
/* invite.moneymoneymoney.app: the gift's box on its square inside the form, then who is
   invited, one square a row on its rule, Withdraw at the row's end. */
.invite-gift { display: flex; align-items: flex-end; gap: calc(var(--u) / 4); min-height: var(--u); line-height: calc(16px * var(--sf)); }
.invite-heading { margin: calc(2 * var(--u)) 0 0; font: inherit; font-weight: 500; line-height: var(--u); }
.invite-list { list-style: none; margin: 0; padding: 0; width: min(100%, calc(32 * var(--u))); }
.invite-list li { display: flex; align-items: flex-end; gap: var(--u); min-height: var(--u); padding-top: 3px; line-height: calc(16px * var(--sf)); border-bottom: 1px solid var(--rule); }
.invite-list .invite-who { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.invite-list .invite-state { color: var(--dim); }
.account .invite-list form { margin: 0; }
/* The letter builder: the fields a column of 28 squares, the letter's own width; the message
   eight rows; the letter as it arrives, light then dark, each in a frame 30 squares wide. */
.invite-form { width: min(100%, calc(28 * var(--u))); }
.invite-form textarea.ds-input { --ds-textarea-rows: 8; resize: vertical; }
.invite-form textarea.invite-signoff { --ds-textarea-rows: 2; }
.invite-form .invite-hint { margin-top: 0; }
.invite-letters { display: flex; flex-direction: column; gap: var(--u); width: min(100%, calc(30 * var(--u))); margin-top: var(--u); }
.invite-letter { margin: 0; }
.invite-letter figcaption { color: var(--dim); line-height: var(--u); }
.invite-letter iframe { display: block; width: 100%; height: calc(36 * var(--u)); border: 1px solid var(--rule); border-radius: 4px; background: #ffffff; }

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--u);
  padding: var(--u);
  background: #1e1e1e;
  color: #999999;
  color-scheme: dark;
  border-top: 1px solid #3c3c3c;
  font-size: calc(10px * var(--sf));
}
.foot .brand { color: #ffffff; font-size: calc(14px * var(--sf)); }

@keyframes rise { from { opacity: 0; transform: translateY(calc(40px * var(--sf))); } }
@keyframes fill { from { transform: scaleX(0); } }
@keyframes grow { from { transform: scaleY(0); } }

/* Narrower than the phones side by side: they stand on a rail that slides
   sideways, each stopping in the middle, the first in the middle at once. */
@media (max-width: 1100px) {
  .art.trio { --pu: 18px; }
}
@media (max-width: 900px) {
  .art {
    justify-content: flex-start;
    width: calc(100% + 2 * var(--u));
    margin-inline: calc(-1 * var(--u));
    padding-inline: calc(50% + var(--u) - var(--frame-w) / 2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .art::-webkit-scrollbar { display: none; }
  .phone { scroll-snap-align: center; }
  .trio .phone:nth-child(2) { order: -1; }
  .trio .phone:not(:nth-child(2)) { margin-top: 0; }
  .board { grid-template-columns: repeat(3, minmax(0, calc(7 * var(--u)))); }
}
@media (max-width: 600px) {
  .bar nav { display: none; }
  .bar { grid-template-columns: 1fr auto; }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .title { font-size: calc(28px * var(--sf)); line-height: calc(2 * var(--u)); }
  .line { font-size: calc(14px * var(--sf)); line-height: var(--u); }
  .panel { padding-top: calc(2 * var(--u)); }
  .art, .art.trio { --pu: 16px; margin-top: calc(2 * var(--u)); }
  .figures { grid-template-columns: 1fr; padding-block: calc(3 * var(--u)); }
  .figures strong { font-size: calc(80px * var(--sf)); line-height: calc(5 * var(--u)); }
}
/* Where the browser can, each picture rises as it scrolls into view. */
@supports (animation-timeline: view()) {
  .panel:not(.hero) .art { animation-timeline: view(); animation-range: entry 0% cover 25%; animation-duration: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .threads .weave { animation: none; }
  html { scroll-behavior: auto; }
  .art, .s-meter::after { animation: none; }
}
@media (pointer: coarse) { :root { --sf: clamp(.75, calc(100vw / 280px), 2); } }

/* The feeds guide (/bots): one reading column of thirty-two squares on the
   paper, steps numbered, code in Iosevka on a quiet ground. */
.guide {
  /* Instructions read in letters throughout; no digit in a sentence turns to dots. */
  font-family: "Inter Arrows", "GT-America-Standard-Regular", sans-serif;
  max-width: calc(32 * var(--u));
  margin: 0 auto;
  padding: calc(3 * var(--u)) var(--u) calc(4 * var(--u));
}
.guide-intro .title { margin-top: calc(var(--u) / 2); }
.guide-intro .line { color: var(--ds-text-color-muted, #797979); }
.guide section { scroll-margin-top: calc(2 * var(--u)); }
.guide section + section { margin-top: calc(3 * var(--u)); }
.guide h2 { font-family: "Inter Arrows", "GT-America-Standard-Medium", sans-serif; font-weight: 400; font-size: calc(21px * var(--sf)); line-height: calc(2 * var(--u)); margin: 0 0 calc(var(--u) / 2); }
.guide h3 { font-family: "Inter Arrows", "GT-America-Standard-Medium", sans-serif; font-weight: 400; font-size: inherit; margin: var(--u) 0 0; }
.guide p, .guide li { line-height: var(--u); }
.guide ol, .guide ul { padding-left: calc(1.5 * var(--u)); margin: calc(var(--u) / 2) 0; }
.guide li + li { margin-top: calc(var(--u) / 2); }
.guide code { font-family: var(--typeface-mono); font-size: calc(12px * var(--sf)); }
.guide pre {
  overflow-x: auto;
  margin: calc(var(--u) / 2) 0;
  padding: calc(var(--u) / 2);
  border-radius: calc(4px * var(--sf));
  background: light-dark(var(--slate-light), var(--slate-dark));
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.guide .fields { margin: calc(var(--u) / 2) 0; }
.guide .fields div { display: grid; grid-template-columns: calc(6 * var(--u)) minmax(0, 1fr); gap: calc(var(--u) / 2); border-bottom: 1px solid light-dark(var(--slate-light), var(--slate-dark)); padding-block: calc(var(--u) / 4); }
.guide .fields dt, .guide .fields dd { margin: 0; }
.guide a { color: var(--sharp-blue); }
@media (max-width: 600px) {
  .guide .fields div { grid-template-columns: 1fr; gap: 0; }
}

/* The owner's dashboard (/dash): the guide's reading type on a wider page of
   forty-eight squares, tables one square a row that scroll sideways on a
   phone rather than squeeze. */
.guide.dash { max-width: calc(48 * var(--u)); }
.dash .table { overflow-x: auto; margin: calc(var(--u) / 2) 0; }
.dash table { border-collapse: collapse; width: 100%; min-width: calc(40 * var(--u)); }
.dash th, .dash td { text-align: left; vertical-align: top; padding: calc(var(--u) / 4) calc(var(--u) / 2) calc(var(--u) / 4) 0; line-height: var(--u); border-bottom: 1px solid light-dark(var(--slate-light), var(--slate-dark)); }
.dash th { font-family: "Inter Arrows", "GT-America-Standard-Medium", sans-serif; font-weight: 400; white-space: nowrap; }
.dash td.num { font-family: "Money numbers", "Inter Arrows", "GT-America-Standard-Regular", sans-serif; white-space: nowrap; }
.dash tr.ours td { background: light-dark(var(--slate-light), var(--slate-dark)); }
.dash .no { color: var(--ds-text-color-muted, #797979); }
.dash .source { color: var(--ds-text-color-muted, #797979); }
/* /dash, Logos: every brand's tile, as it stands beside a name in the app. */
.dash .logo-list { columns: calc(12 * var(--u)); column-gap: calc(2 * var(--u)); list-style: none; padding: 0; margin: var(--u) 0; }
.dash .logo-list li { display: flex; align-items: center; gap: calc(4px * var(--sf)); height: var(--u); margin: 0; break-inside: avoid; min-width: 0; }
.dash .logo-list img, .dash .logo-none { flex: none; width: calc(16px * var(--sf)); height: calc(16px * var(--sf)); border-radius: calc(4px * var(--sf)); }
.dash .logo-none { background: color-mix(in srgb, currentColor 8%, transparent); }
.dash .logo-list span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash .flag-list { list-style: none; padding: 0; margin: var(--u) 0; }
.dash .flag-list li { display: flex; align-items: center; gap: var(--u); min-height: var(--u); margin: 0; }
.dash .flag-list form { margin: 0; }
.dash .flag-list code { color: var(--dim); }

.dash .email { margin: var(--u) 0 calc(2 * var(--u)); }
.dash .email figcaption { line-height: var(--u); margin-bottom: calc(var(--u) / 2); }
.dash .email iframe { display: block; width: 100%; max-width: calc(32 * var(--u)); height: calc(26 * var(--u)); border: 1px solid rgb(0 0 0 / 0.12); border-radius: 4px; background: #f4f4f4; }
/* The landing (Joachim, 17 October 2026): white paper, no header, as in the
   app; plain GT America; one quiet line art behind everything, fading down
   from the top; one column of the app's width, a part for each thing Money
   does, its phones beneath. */
.landing { --paper: #f4f4f4; }
.lineart {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/threads/lines-ink.svg") 0 0 / 28px 28px;
  opacity: .08;
  /* The pattern runs the whole page, top to foot (Joachim, 18 October 2026). */
}
.landing main { max-width: calc(48 * var(--u)); margin: 0 auto; padding: calc(3 * var(--u)) var(--u) calc(2 * var(--u)); }
.landing .intro, .landing .part { padding-block: calc(3 * var(--u)); }
/* No lines between the parts (Joachim, 18 October 2026): the space alone divides them. */
.landing h2.title { font-size: calc(28px * var(--sf)); line-height: calc(2 * var(--u)); }
.landing .line + .line { margin-top: var(--u); }
.landing .actions { gap: calc(var(--u) / 2); }
.landing .art { margin-top: calc(2 * var(--u)); justify-content: flex-start; }
.landing .price { align-items: flex-start; margin-top: var(--u); }
.landing .price > span { color: var(--dim); font-size: calc(21px * var(--sf)); line-height: calc(2 * var(--u)); }
.landing .price strong { color: var(--text-color); font-family: "Inter Arrows", "GT-America-Standard-Medium", sans-serif; font-weight: 400; font-size: calc(42px * var(--sf)); line-height: calc(3 * var(--u)); }
.landing .board { margin-top: calc(2 * var(--u)); }
.landing .note { margin-top: var(--u); color: var(--dim); }
.landing .foot { background: transparent; color: var(--dim); color-scheme: light; border-top: 1px solid var(--rule); max-width: calc(48 * var(--u)); margin: 0 auto; }
@media (max-width: 900px) {
  .landing .art { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .landing h1.title { font-size: calc(28px * var(--sf)); line-height: calc(2 * var(--u)); }
  .landing .price strong { font-size: calc(28px * var(--sf)); line-height: calc(2 * var(--u)); }
}

/* The docs (/docs, docs/*.html; written by scripts/docs.mjs): the landing's
   column of forty-eight squares on the reader's own paper, light or dark,
   the guide's words in a reading column of thirty-two squares (Design system
   1's prose), and Money's screens drawn whole in their phones. */
.docs {
  --dim: light-dark(#797979, #999999);
  --rule: light-dark(var(--slate-light), var(--slate-dark));
  background: var(--background);
  color: var(--text-color);
}
.docs-top,
.docs-main,
.docs-foot { max-width: calc(48 * var(--u)); margin-inline: auto; }
/* One row of one square, a square round it: the name, Docs, then Open Money at the end, on the sixteen. */
.docs-top {
  display: flex;
  align-items: flex-end;
  gap: var(--u);
  min-height: calc(3 * var(--u));
  padding: var(--u);
  line-height: calc(16px * var(--sf));
}
.docs-top a:not(.ds-button) { text-decoration: none; }
.docs-top [aria-current="page"] { text-decoration: underline 1px; text-underline-offset: calc(3px * var(--sf)); }
.docs-top .ds-button { margin-left: auto; }
.docs-main { padding: 0 var(--u) calc(2 * var(--u)); }
.docs-intro { padding-top: calc(2 * var(--u)); }
.docs-intro .line { margin-top: 0; }
/* The rule takes one pixel of the first square, so what follows stays on the grid. */
.docs-part { margin-top: calc(3 * var(--u)); padding-top: calc(3 * var(--u) - 1px); border-top: 1px solid var(--rule); }
.docs-h2 { font-family: "Inter Arrows", "GT-America-Standard-Medium", sans-serif; font-size: calc(21px * var(--sf)); line-height: calc(2 * var(--u)); }
.docs-lede { max-width: calc(32 * var(--u)); color: var(--dim); }
.docs strong { font-family: "Inter Arrows", "GT-America-Standard-Medium", sans-serif; font-weight: 400; }
.nowrap { white-space: nowrap; }

/* The three people: each phone cut below its first days, the person under it. */
.cast, .shots .art {
  --pu: 18px;
  --screen: calc(14 * var(--pu));
  --frame-w: calc(var(--screen) * 1819 / 1622);
  --frame-h: calc(var(--frame-w) * 1855 / 910);
}
.cast { display: flex; gap: var(--u); margin-top: calc(2 * var(--u)); }
.person { flex: none; width: var(--frame-w); }
.person .shot { height: round(calc(var(--frame-h) * 0.6), var(--u)); overflow: clip; }
.person figcaption { margin-top: var(--u); }

/* A guide's screens, whole, side by side; one alone in the words. */
.shots { margin-top: calc(2 * var(--u)); }
/* As tall as the phone, rounded up to whole squares, so the words after it stay on the grid. */
.shots .art { justify-content: flex-start; height: round(up, var(--frame-h), var(--u)); margin-top: 0; overflow: visible; }
.shots figcaption { max-width: calc(32 * var(--u)); margin-top: var(--u); }
.docs-text .shots { margin-block: calc(2 * var(--u)); }
.docs-text { max-width: calc(32 * var(--u)); margin-top: calc(3 * var(--u)); }
.table-scroll { overflow-x: auto; }
.conversion tfoot th, .conversion tfoot td { border-bottom: 0; font-family: "Inter Arrows", "GT-America-Standard-Medium", sans-serif; }

/* The guides, one press each: the name on one square, what it covers on the next. */
.docs-guides { max-width: calc(32 * var(--u)); margin-top: var(--u); }
.docs-guides ul { margin: 0; padding: 0; list-style: none; }
.docs-guides li { margin: 0; }
.docs-guides .ds-row { width: 100%; padding-inline: var(--ds-row-padding, calc(4px * var(--sf))); }
.docs-guides .ds-row span { display: block; padding-top: calc(4px * var(--sf)); line-height: calc(16px * var(--sf)); }
.docs-guides .ds-row span.dim { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.docs-foot { background: transparent; color: var(--dim); color-scheme: inherit; border-top: 1px solid var(--rule); }
.docs-foot .brand { color: var(--text-color); }

/* Screens only the docs draw: Settings, a transaction's sheet, connecting an assistant. */
.s-set-head { display: flex; align-items: center; gap: calc(0.2 * var(--pu)); height: var(--pu); margin-top: var(--pu); font-family: "Inter Arrows", "GT-America-Standard-Medium", sans-serif; }
.s-row .s-button, .s-set-head .s-button, .s-app .s-button { flex: none; height: calc(0.8 * var(--pu)); }
.s-button.primary { background: #2a2a2a; color: #f4f4f4; }
.s-gap-top { margin-top: calc(0.5 * var(--pu)); }
.s-gap2 { margin-top: calc(2 * var(--pu)); }
.s-app { display: flex; align-items: center; gap: calc(0.5 * var(--pu)); margin-top: calc(0.5 * var(--pu)); }
.s-app > div { flex: 1; min-width: 0; }
.s-quiet, .s-wrap { white-space: normal; }
.s-scrim { position: absolute; inset: calc(-2 * var(--pu)) calc(-1 * var(--pu)) 0; z-index: 1; background: rgb(0 0 0 / 0.25); }
.s-sheet { position: absolute; right: calc(-1 * var(--pu)); bottom: 0; left: calc(-1 * var(--pu)); z-index: 1; padding: 0 var(--pu) calc(2 * var(--pu)); border-radius: calc(0.6 * var(--pu)) calc(0.6 * var(--pu)) 0 0; background: #ffffff; }
.s-handle { position: relative; display: block; height: var(--pu); }
.s-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: calc(2 * var(--pu)); height: calc(0.2 * var(--pu)); margin: calc(-0.1 * var(--pu)) 0 0 calc(-1 * var(--pu)); border-radius: calc(0.1 * var(--pu)); background: #d0d0d0; }
.s-dl { margin: 0; }
.s-dl > div { display: flex; align-items: center; height: var(--pu); border-bottom: 1px solid #e6e6e6; }
.s-dl dt { flex: none; width: calc(4 * var(--pu)); }
.s-dl dd { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  .cast, .shots .art {
    width: calc(100% + 2 * var(--u));
    margin-inline: calc(-1 * var(--u));
    padding-inline: var(--u);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--u);
    scrollbar-width: none;
  }
  .cast::-webkit-scrollbar { display: none; }
  .person, .shots .phone { scroll-snap-align: start; }
  .shots .art.pair, .shots .art { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .cast, .shots .art { --pu: 16px; }
  .docs-top { gap: calc(var(--u) / 2); }
  /* On a phone the row keeps the name and Docs; Open Money waits at the page's foot. */
  .docs-top .ds-button { display: none; }
  .docs-h2 { font-size: calc(17px * var(--sf)); }
}

/* Links between the landing, the docs and the guides crossfade (Joachim, 18 October 2026). */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none;
  }
}

/* The song at the landing's end: the column's width, sixteen by nine, a picture's 4px corners. */
.landing .song .video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: calc(4px * var(--sf));
  background: #1e1e1e;
}
.landing .song iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The landing opens with the mark alone, small (Joachim, 18 October 2026): MMM in Olivetti Dot,
   one square high on the sixteen, as the app's sidebar draws it; the name stays for screen readers. */
.landing .intro-mark {
  height: var(--u);
  padding-top: calc(var(--u) - 16px * var(--sf));
  font-family: "Olivetti Dot", sans-serif;
  font-size: calc(16px * var(--sf));
  line-height: calc(16px * var(--sf));
  font-weight: 400;
}
.landing .intro-mark + .line { margin-top: var(--u); }

/* The landing in Ezo's computer measure (Joachim, 18 October 2026): one column of twenty-eight
   squares, the app's own width, with its pictures running on to the window's end edge. */
body.landing { overflow-x: clip; }
.landing main { max-width: calc(30 * var(--u)); }
.landing .foot { max-width: calc(30 * var(--u)); }

/* Money on an iPhone and a Mac, as the 0001 site shows its work: Design system 1's carousel strip of
   cards, from the column to the window's edge, each a tinted card with its title, its picture
   cut by the card's foot (and a Mac's by its end edge, as a window seen up close). */
.landing .land-slide {
  --ds-unit: var(--u);
  --ds-radius-card: calc(16px * var(--sf));
  --ds-carousel-after: calc((100vw - 100%) / 2);
  margin-top: calc(2 * var(--u));
}
.landing .land-card {
  --ds-card-width: calc(14 * var(--u));
  --ds-card-height: calc(22 * var(--u));
  --pu: calc(15px * var(--sf));
  --screen: calc(14 * var(--pu));
  --frame-w: calc(var(--screen) * 1819 / 1622);
  --frame-h: calc(var(--frame-w) * 1855 / 910);
  text-align: left;
}
.landing .land-card--wide { --ds-card-width: calc(28 * var(--u)); }
.landing .land-card .ds-card__title { min-height: calc(3 * var(--u)); }
.landing .land-card .phone { margin-top: calc(var(--frame-w) * -16 / 910); }
@supports (corner-shape: squircle) {
  .landing .land-card { corner-shape: squircle; }
}

/* A Mac's window round Money's desktop page: the title bar with its three lights and the
   address, the page at the phones' scale beneath. */
.mac {
  position: relative;
  flex: none;
  width: calc(40 * var(--pu));
  height: calc(34 * var(--pu));
  overflow: hidden;
  border-radius: calc(0.7 * var(--pu));
  background: #f4f4f4;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12), 0 var(--pu) calc(2 * var(--pu)) rgb(0 0 0 / 0.16);
  color: #2a2a2a;
  color-scheme: light;
}
.mac-bar {
  display: flex;
  align-items: center;
  gap: calc(0.4 * var(--pu));
  height: calc(1.8 * var(--pu));
  padding-inline: calc(0.8 * var(--pu));
  background: #ececec;
  border-bottom: 1px solid rgb(0 0 0 / 0.08);
}
.mac-bar i { flex: none; width: calc(0.6 * var(--pu)); height: calc(0.6 * var(--pu)); border-radius: 50%; background: #ff5f57; }
.mac-bar i:nth-child(2) { background: #febc2e; }
.mac-bar i:nth-child(3) { background: #28c840; }
.mac-bar span { flex: 1; margin-right: calc(2.6 * var(--pu)); color: #797979; font-size: calc(0.55 * var(--pu)); text-align: center; }
.mac .mac-scr {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: calc(8 * var(--pu)) calc(22 * var(--pu));
  column-gap: calc(2 * var(--pu));
  align-items: start;
  padding: calc(2 * var(--pu)) calc(2 * var(--pu)) 0;
}
.m-drop {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  height: calc(11 * var(--pu));
  margin-top: calc(3 * var(--pu));
  padding: var(--pu);
  border-radius: calc(0.5 * var(--pu));
  background: url("/threads/lines-ink.svg") 0 0 / calc(1.4 * var(--pu)) calc(1.4 * var(--pu)), color-mix(in srgb, var(--apple-green) 30%, #ffffff);
  font-size: calc(0.55 * var(--pu));
  line-height: calc(0.75 * var(--pu));
  text-align: center;
}
.m-nav { display: flex; align-items: center; gap: calc(0.3 * var(--pu)); height: var(--pu); margin-bottom: calc(2 * var(--pu)); }
.m-mark { margin-right: calc(0.3 * var(--pu)); font-family: "Olivetti Dot", sans-serif; font-size: calc(0.8 * var(--pu)); }
.m-pill { display: inline-flex; align-items: center; gap: calc(0.2 * var(--pu)); color: #797979; }
.m-pill svg { width: calc(0.8 * var(--pu)); height: calc(0.8 * var(--pu)); border-radius: calc(0.2 * var(--pu)); }
.m-pill[data-on] { color: #2a2a2a; }
.m-pill[data-on] svg { background: #e6e6e6; }
.m-head { display: flex; align-items: flex-end; justify-content: space-between; height: calc(2 * var(--pu)); font-size: calc(1.05 * var(--pu)); }
.m-head .amt { font-size: calc(1.6 * var(--pu)); line-height: 1; }

/* Each part's phones in a strip that slides, from the column to the window's end edge. */
@media (min-width: 901px) {
  .landing .art {
    --pu: 18px;
    width: auto;
    margin-right: calc((100% - 100vw) / 2);
    padding-right: var(--u);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .landing .art::-webkit-scrollbar { display: none; }
  .landing .art .phone { scroll-snap-align: start; }
}

/* An assistant's or a brand's own logo in a sentence, twenty square, on the line's sixteen. */
.landing .logo {
  display: inline-block;
  width: calc(20px * var(--sf));
  height: calc(20px * var(--sf));
  margin-right: calc(4px * var(--sf));
  vertical-align: calc(-4px * var(--sf));
  border-radius: calc(4px * var(--sf));
}

/* Scan to get Money (Joachim, 18 October 2026), as Wise's page has it. On a computer, a box of
   the words and a code five squares wide that opens the app on the phone; on a wide window it
   stands where the app's drop zone stands, from 1100 wide a card eight squares wide five squares
   from the top, three squares left of the column (src/style.css, .jump-drop), and stays there as the page scrolls. On a phone, which is
   already there, the same box says how to keep Money on the Home Screen. */
.landing .scan {
  display: flex;
  align-items: center;
  gap: var(--u);
  width: min(100%, calc(18 * var(--u)));
  margin-top: calc(2 * var(--u));
  padding: var(--u);
  border: 1px solid var(--line, rgb(0 0 0 / 0.12));
  border-radius: calc(16px * var(--sf));
  background: #ffffff;
  color: var(--dim);
  text-decoration: none;
}
.landing .scan-words { width: calc(4 * var(--u)); line-height: var(--u); }
.landing .scan-code { display: block; width: calc(5 * var(--u)); height: calc(5 * var(--u)); fill: var(--text-color); }
.landing .scan-phone { display: flex; flex-direction: column; line-height: var(--u); }
.landing .scan-phone strong { color: var(--text-color); font-weight: 400; }
@media (max-width: 900px) {
  .landing .scan-words,
  .landing .scan-code { display: none; }
}
@media (min-width: 901px) {
  .landing .scan { width: max-content; }
  .landing .scan-phone { display: none; }
}
@media (min-width: 1100px) {
  .landing .scan {
    position: fixed;
    z-index: 5;
    top: calc(5 * var(--u));
    left: max(var(--u), calc(50% - 25 * var(--u)));
    flex-direction: column-reverse;
    align-items: flex-start;
    width: calc(8 * var(--u));
    margin: 0;
  }
  .landing .scan-code { width: calc(6 * var(--u)); height: calc(6 * var(--u)); }
  .landing .scan-words { width: auto; }
}
@supports (corner-shape: squircle) {
  .landing .scan { corner-shape: squircle; }
}

/* Who Money is for, as Wise's cards (Joachim, 18 October 2026): a picture of their Money on
   a coloured card, then who in a line and why in two. */
.landing .who { width: calc(14 * var(--u)); scroll-snap-align: start; }
.landing .who-pic { --ds-card-height: calc(18 * var(--u)); }
.landing .who-title {
  margin: var(--u) 0 0;
  font: inherit;
  font-size: calc(21px * var(--sf));
  line-height: calc(2 * var(--u));
}
.landing .who-line { margin: 0; color: var(--dim); }

/* Privacy, terms, support and 特定商取引法, under the landing and the docs (Joachim, 18 October 2026). */
.docs-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--u); line-height: var(--u); }
/* The landing's foot, as Ezo's: one row of one square, the copyright, the links apart by a short
   hairline, and the place the price is shown for at the end on a grey chip; on a phone each
   on its own row, from the start. Money's name is set in Olivetti Dot (Joachim, 18 October 2026). */
.legal-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--u) calc(2 * var(--u));
  padding: calc(4 * var(--u)) calc(2 * var(--u)) calc(3 * var(--u));
  line-height: calc(16px * var(--sf));
  color: var(--dim);
}
.legal-foot p { margin: 0; }
.foot-name { font-family: "Olivetti Dot", "GT-America-Standard-Regular", sans-serif; color: var(--text-color); }
.legal-foot nav { display: flex; flex-wrap: wrap; align-items: flex-end; font-size: calc(12px * var(--sf)); }
.legal-foot nav a + a { margin-left: calc(10px * var(--sf)); padding-left: calc(10px * var(--sf)); border-left: 1px solid var(--rule); }
.foot-place {
  margin-left: auto;
  padding: 0 calc(4px * var(--sf));
  border-radius: calc(4px * var(--sf));
  background: color-mix(in srgb, var(--slate-light) 80%, transparent);
  color: var(--text-color) !important;
  text-decoration: none;
}
@media (max-width: 700px) {
  .legal-foot { flex-direction: column; align-items: flex-start; padding-inline: var(--u); }
  .foot-place { margin-left: 0; }
}
.legal-foot a, .docs-legal a { color: var(--dim); text-decoration: none; }
.legal-foot a:hover, .docs-legal a:hover { color: var(--text-color); }

/* The parts' pictures (Joachim, 18 October 2026: fewer phones), drawn at the page's own square
   by scripts/phones.mjs with made-up figures: a sum, a receipt, a word to the assistant, the
   budget in squares and a month of renewals. Rows are one square, their words, icons and
   amounts on its lower sixteen; a tile takes the first sixteen of its square. */
.ill {
  --pu: var(--u);
  --sixteen: calc(16px * var(--sf));
  margin: calc(2 * var(--u)) 0 0;
  color: var(--text-color);
}
.ill ul { margin: 0; padding: 0; list-style: none; }
.ill li, .ill .read-row, .ill .sum-total, .ill .sum-in {
  display: flex;
  align-items: flex-end;
  min-height: var(--u);
  margin: 0;
  line-height: var(--sixteen);
}
.ill .t { place-items: end start; }
.ill .ill-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ill small { color: var(--dim); font-size: calc(10px * var(--sf)); line-height: 1; }
.ill .dim { color: var(--dim); }

/* Total balance: each account in its own currency, then in yen, added up. */
.sum { width: min(100%, calc(24 * var(--u))); }
.sum .ill-own { width: calc(6 * var(--u)); color: var(--dim); text-align: right; }
.sum li > .amt:last-child { width: calc(6 * var(--u)); text-align: right; }
.sum .sum-total {
  justify-content: space-between;
  min-height: calc(3 * var(--u));
  border-bottom: 1px solid var(--rule);
  padding-bottom: calc(4px * var(--sf));
}
.sum ul { border-bottom: 1px solid var(--text-color); }
.sum .sum-total span { color: var(--dim); }
.sum .sum-total .amt { font-size: calc(42px * var(--sf)); line-height: calc(2 * var(--u)); }
.sum .sum-in { gap: calc(4px * var(--sf)); margin-top: calc(var(--u) / 2); color: var(--dim); }
.sum .sum-in span { margin-right: calc(4px * var(--sf)); }
.sum .sum-in > .amt, .sum .sum-in b {
  display: inline-grid;
  place-items: center;
  min-width: var(--sixteen);
  height: var(--sixteen);
  padding: 0 calc(4px * var(--sf));
  border-radius: calc(4px * var(--sf));
  box-shadow: inset 0 0 0 1px var(--rule);
  font-weight: 400;
}
.sum .sum-in b { background: var(--apple-green); box-shadow: none; color: var(--slate); }

/* Transactions: the paper as it was snapped, beside the line Money makes of it. */
.receipt { display: flex; flex-wrap: wrap; align-items: flex-start; gap: calc(2 * var(--u)); }
.receipt .paper {
  width: calc(12 * var(--u));
  padding: var(--u);
  background: #ffffff;
  color: #1e1e1e;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 calc(10px * var(--sf)) calc(30px * var(--sf)) rgb(0 0 0 / 0.08);
  transform: rotate(-1.5deg);
  font-size: calc(12px * var(--sf));
}
.receipt .paper li { justify-content: space-between; gap: var(--u); }
.receipt .paper-head { margin: 0 0 var(--u); text-align: center; line-height: var(--u); }
.receipt .paper-total {
  display: flex;
  justify-content: space-between;
  margin: calc(var(--u) / 2) 0 0;
  padding-top: calc(var(--u) / 2 - 1px);
  border-top: 1px dashed rgb(0 0 0 / 0.3);
  line-height: var(--u);
}
.receipt .read { flex: 1 1 calc(14 * var(--u)); max-width: calc(18 * var(--u)); padding-top: var(--u); }
.receipt .read-day, .receipt .read-head { margin: 0; padding-top: calc(4px * var(--sf)); line-height: var(--sixteen); color: var(--dim); }
.receipt .read-head { margin-top: var(--u); }
.receipt .read-row small { margin-left: calc(4px * var(--sf)); }

/* Your assistant: what you say, and what it did. */
.chat { display: flex; flex-direction: column; gap: calc(var(--u) / 2); width: min(100%, calc(24 * var(--u))); }
.chat p { margin: 0; padding: calc(var(--u) / 2) calc(var(--u) / 2); border-radius: calc(var(--u) / 2); line-height: var(--u); }
.chat .you { align-self: flex-end; background: color-mix(in srgb, var(--zenith-blue) 60%, #ffffff); }
.chat .it { align-self: flex-start; max-width: calc(20 * var(--u)); background: #ffffff; box-shadow: inset 0 0 0 1px var(--rule); }

/* Budget: each category's plan in squares, one square each drawn a pixel short, the part spent
   in the ink and anything over it in red. */
.meters { width: min(100%, calc(36 * var(--u))); }
.meters .ill-name { flex: none; width: calc(8 * var(--u)); }
.meters .squares { display: flex; flex: none; align-items: flex-end; }
.meters .squares i { width: calc(var(--u) - 1px); height: var(--sixteen); margin-right: 1px; background: rgb(0 0 0 / 0.07); }
.meters .squares i[data-on] { background: var(--text-color); }
.meters .squares i[data-over] { background: var(--tuned-red); }
.meters .ill-left { flex: 1; min-width: calc(7 * var(--u)); color: var(--dim); text-align: right; }
.meters li[data-over] .ill-left { color: var(--ds-danger-color, #de0331); }
.meters li + li { margin-top: calc(var(--u) / 2); }
@media (max-width: 700px) {
  .meters li { flex-wrap: wrap; }
  .meters .ill-name { flex: 1; width: auto; }
  .meters .ill-left { flex: none; min-width: 0; }
  .meters .squares { order: 4; width: 100%; padding-left: var(--u); margin-top: calc(4px * var(--sf)); }
  .meters .squares i { width: calc(var(--u) * 0.6 - 1px); }
}

/* Subscriptions: October, Monday first, each renewal on its day. */
.month { width: min(100%, calc(35 * var(--u))); }
.month .week, .month .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month .week small { padding: 0 calc(4px * var(--sf)); line-height: var(--u); }
.month .days { border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.month .day {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: calc(4 * var(--u));
  min-width: 0;
  padding: 0 calc(4px * var(--sf)) calc(4px * var(--sf));
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: #ffffff;
}
.month .day[data-out] { background: transparent; }
.month .date { align-self: flex-end; line-height: var(--u); color: var(--dim); }
.month .day[data-today] .date {
  display: grid;
  place-items: center;
  width: var(--sixteen);
  height: var(--sixteen);
  margin-top: calc(2px * var(--sf));
  border-radius: 50%;
  background: var(--tuned-red);
  color: #ffffff;
  font-size: calc(10px * var(--sf));
}
.month .day small { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: calc(var(--u) / 2); }
.month .day > .amt { font-size: calc(10px * var(--sf)); }
@media (max-width: 700px) {
  .month .day { min-height: calc(3 * var(--u)); padding-inline: calc(2px * var(--sf)); }
  .month .day small, .month .day > .amt { display: none; }
}

/* Long, faint washes behind some parts (Joachim, 18 October 2026), as Ezo's panels wear their
   colour, only quieter: zenith blue behind the assistant and the price, a green behind who it
   is for and the budget. Each runs across the window's width and ten squares past its part at
   both ends, from the paper into the tint and back, so they fade into one another. They sit
   with the line pattern, under every part's words and pictures. */
.landing .part[data-wash] { position: relative; }
.landing .part[data-wash]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-10 * var(--u)) calc(50% - 50vw);
  background: linear-gradient(to bottom, transparent, var(--wash) 40%, var(--wash) 60%, transparent);
  pointer-events: none;
}
.landing [data-wash="blue"] { --wash: color-mix(in srgb, var(--zenith-blue) 24%, transparent); }
.landing [data-wash="green"] { --wash: color-mix(in srgb, var(--apple-green) 14%, transparent); }
.landing .pricing[data-wash]::before { inset-block: calc(-14 * var(--u)) 0; }

/* And the rest of Money: a bento as Ezo's (Joachim, 18 October 2026), on Design system 1's Bento
   (19 October 2026). Grey tiles with a card's corners, half a square (10px) apart, each one thing
   drawn above its name and a line. On a wide window the bento is in squares mode, 46 squares wider
   than the column and centred on it, in three rows of two of different widths (22 and 23, 27 and
   18, 21 and 24 squares), each tile 18 squares high and two squares inside; narrower, one tile a row as Bento's flow. */
.bento {
  --ds-bento-unit: var(--u);
  --ds-bento-padding: calc(2 * var(--u));
  --ds-bento-columns: 46;
  --ds-bento-row: calc(15 * var(--u));
  margin-top: calc(2 * var(--u));
}
.bento-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--u);
  border-radius: var(--ds-radius-card, calc(16px * var(--sf)));
  background: color-mix(in srgb, var(--slate-light) 50%, #ffffff);
  color: var(--text-color);
}
.bento-words h3 { margin: 0; font-family: "Inter Arrows", "GT-America-Standard-Medium", sans-serif; font-weight: 400; font-size: calc(36px * var(--sf)); line-height: calc(2 * var(--u)); letter-spacing: -0.01em; text-wrap: balance; }
.bento-words p { margin: calc(var(--u) / 2) 0 0; max-width: calc(16 * var(--u)); color: var(--dim); font-size: calc(18px * var(--sf)); line-height: var(--u); text-wrap: pretty; }
.bento-words .big { display: block; font-size: calc(64px * var(--sf)); line-height: calc(4 * var(--u)); letter-spacing: -0.02em; }
.bento-pic { display: flex; justify-content: center; }

/* Every day: a week of spending in squares, today in red. */
.bars { display: flex; align-items: flex-end; gap: 1px; height: calc(4 * var(--u)); }
.bars .bar { display: flex; flex-direction: column; gap: 1px; width: calc(2 * var(--u) - 1px); }
.bars i { display: block; height: calc(var(--u) - 1px); background: var(--text-color); }
.bars [data-today] i { background: var(--tuned-red); }
.bars-days { display: flex; gap: 1px; margin-top: calc(4px * var(--sf)); color: var(--dim); }
.bars-days span { width: calc(2 * var(--u) - 1px); text-align: center; line-height: var(--u); }
.bars-days [data-today] { color: #ffffff; background: var(--tuned-red); border-radius: 50%; width: var(--u); margin-inline: calc(var(--u) / 2 - 1px); }
.b-days .bento-pic { flex-direction: column; align-items: center; }

/* Any currency: a small list, the chosen one in the accent. */
.mini { width: calc(8 * var(--u)); margin: 0; padding: 0; list-style: none; background: #ffffff; border-radius: calc(4px * var(--sf)); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.mini li { display: flex; align-items: flex-end; gap: calc(4px * var(--sf)); height: var(--u); padding: 0 calc(4px * var(--sf)); line-height: calc(16px * var(--sf)); border-top: 1px solid var(--rule); }
.mini li:first-child { border-top: 0; }
.mini li[data-on] { background: var(--apple-green); }

/* Tap to hide: the total in dashes. */
.hidden-total { display: flex; flex-direction: column; align-items: center; margin: 0; color: var(--dim); }
.hidden-total .amt { color: var(--text-color); font-size: calc(42px * var(--sf)); line-height: calc(3 * var(--u)); }

/* Swipe for business: a row slid left over its band. */
.swipe { position: relative; width: calc(12 * var(--u)); height: var(--u); overflow: clip; border-radius: calc(4px * var(--sf)); background: var(--text-color); }
.swipe-band { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 calc(4px * var(--sf)); color: #ffffff; line-height: calc(16px * var(--sf)); }
.swipe-row { position: absolute; inset: 0 calc(5 * var(--u)) 0 0; display: flex; align-items: flex-end; gap: 0; margin: 0; padding-right: calc(4px * var(--sf)); background: #ffffff; line-height: calc(16px * var(--sf)); box-shadow: inset 0 0 0 1px var(--rule); }
.swipe-row .t { --pu: var(--u); place-items: end start; }
.swipe-row span:not(.t):not(.amt) { flex: 1; }

/* Drop a statement: the receipt icon, large. */
.big-icon svg { display: block; width: calc(5 * var(--u)); height: calc(5 * var(--u)); color: var(--text-color); }

/* The page runs no script, so the places placeBentos() would read from each tile's data-place
   (scripts/phones.mjs) are written out here, with the sides that reach towards a neighbour. */
@media (min-width: 980px) {
  .bento { margin-inline: calc((100% - 46 * var(--u)) / 2); }
  .b-days { --ds-bento-x: 0; --ds-bento-y: 0; --ds-bento-w: 22; --ds-bento-h: 18; --ds-bento-end: 1; --ds-bento-bottom: 1; }
  .b-currency { --ds-bento-x: 23; --ds-bento-y: 0; --ds-bento-w: 23; --ds-bento-h: 18; --ds-bento-start: 1; --ds-bento-bottom: 1; }
  .b-hide { --ds-bento-x: 0; --ds-bento-y: 19; --ds-bento-w: 27; --ds-bento-h: 18; --ds-bento-top: 1; --ds-bento-end: 1; --ds-bento-bottom: 1; flex-direction: row-reverse; align-items: center; }
  .b-swipe { --ds-bento-x: 28; --ds-bento-y: 19; --ds-bento-w: 18; --ds-bento-h: 18; --ds-bento-start: 1; --ds-bento-top: 1; --ds-bento-bottom: 1; }
  .b-add { --ds-bento-x: 0; --ds-bento-y: 38; --ds-bento-w: 21; --ds-bento-h: 18; --ds-bento-top: 1; --ds-bento-end: 1; justify-content: flex-end; }
  .b-drop { --ds-bento-x: 22; --ds-bento-y: 38; --ds-bento-w: 24; --ds-bento-h: 18; --ds-bento-start: 1; --ds-bento-top: 1; flex-direction: row-reverse; align-items: flex-end; }
  .b-hide .bento-words, .b-drop .bento-words { flex: 1; }
  .b-hide .bento-pic, .b-drop .bento-pic { flex: none; }
}
/* Narrower than the 46 squares, squares mode gives way to Bento's flow in one column. */
@media (width < 980px) {
  .bento[data-squares] {
    width: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(var(--ds-bento-row), auto);
    gap: var(--ds-bento-gap);
  }
  .bento[data-squares] > .bento-tile { grid-column: auto; grid-row: auto; }
}