/* Money Hamster — money.koldun.one
   World: a split-flap departures board. Emerald board, flat painted flaps
   with a hinge line, cream characters, coin-gold amounts. Depth comes only
   from tiles overlapping the board, never from shading. Red is reserved for
   one thing: a budget past its limit. */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("/fonts/big-shoulders-display.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Overpass";
  src: url("/fonts/overpass.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

:root {
  --hall: #0b3b30;
  --board: #072d24;
  --tile: #11473a;
  --tile-blank: #0d3c31;
  --hinge: #04211a;
  --line: #17503f;

  --ink: #f6efdc;
  --ink-2: #cfe0d8;
  --ink-3: #93b8ab;
  --gold: #ffd978;
  --gold-hover: #ffe49b;
  --over: #ff9a8a;

  --paper: #f7f2e6;
  --paper-2: #efe7d4;
  --paper-ink: #14271f;
  --paper-link: #0c6650;

  --sign: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --text: "Overpass", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--hall);
  color: var(--ink);
  font: 400 18px/1.6 var(--text);
}

::selection {
  background: var(--gold);
  color: var(--hall);
}

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

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -60px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--gold);
  color: var(--hall);
  font-weight: 700;
  border-radius: 4px;
}

.skip:focus {
  top: 12px;
}

/* ------------------------------------------------------------------ flaps */
/* One flap = one character. --cw sets the cell width; height, glyph size
   and the hinge follow it. board.js builds the cells from data-flap. */

.flaps {
  --cw: 22px;
  display: flex;
  gap: max(2px, calc(var(--cw) * 0.12));
  margin: 0;
  font: 800 calc(var(--cw) * 1.08) / 1 var(--sign);
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: pre;
}

/* without board.js the row is plain signage text in the same face */
.flaps:not([data-built]) {
  letter-spacing: 0.18em;
  line-height: 1.2;
}

.flaps:not([data-built]) + .flaps:not([data-built]) {
  margin-left: 0.4em;
}

.f {
  position: relative;
  flex: none;
  width: var(--cw);
  height: calc(var(--cw) * 1.4);
  line-height: calc(var(--cw) * 1.4);
  text-align: center;
  background: var(--tile);
  border-radius: max(2px, calc(var(--cw) * 0.09));
  perspective: calc(var(--cw) * 10);
  isolation: isolate;
  z-index: 0;
}

.f.blank {
  background: var(--tile-blank);
}

/* the hinge: a dark seam across the middle of every flap, painted under the
   character so a G never loses its bar to it */
.f::after {
  content: "";
  z-index: -1;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: max(1px, calc(var(--cw) * 0.05));
  transform: translateY(-50%);
  background: var(--hinge);
}

/* the top half folding down as the character changes; two class names
   with identical animations let each step restart it without a reflow */
.f.tick::before,
.f.tock::before {
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  background: var(--tile);
  border-radius: inherit;
  transform-origin: 50% 100%;
  animation: fold 80ms ease-in forwards;
}

.f.tock::before {
  animation-name: fold-again;
}

/* a cell landing blank folds in the blank shade, not the tile's */
.f.blank.tick::before,
.f.blank.tock::before {
  background: var(--tile-blank);
}

@keyframes fold {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(-90deg);
  }
}

@keyframes fold-again {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(-90deg);
  }
}

.gold .f {
  color: var(--gold);
}

.over .f {
  color: var(--over);
}

.dim .f {
  color: var(--ink-3);
}

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

/* the header is a translucent layer: content scrolls under it */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(23, 80, 63, 0.85);
  background: rgba(9, 50, 41, 0.74);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  view-transition-name: topbar;
}

@media (prefers-reduced-transparency: reduce) {
  .top {
    background: var(--hall);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

section[id] {
  scroll-margin-top: 84px;
}

.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  min-height: 72px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font: 800 26px/1 var(--sign);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brand img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .nav .wide {
    display: none;
  }
}

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

.hero {
  padding: clamp(28px, 5vw, 56px) 0 clamp(40px, 6vw, 72px);
}

.said {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 32px;
  flex-wrap: wrap;
  margin: 0 0 clamp(18px, 2.4vw, 28px);
}

.said p {
  flex: 1 1 520px;
  display: flex;
  gap: 16px;
  align-items: baseline;
  margin: 0;
  font-size: clamp(22px, 3.2vw, 38px);
  font-weight: 300;
  line-height: 1.25;
  color: var(--ink-2);
}

.said p::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  outline: 6px solid rgba(255, 217, 120, 0.16);
  transform: translateY(-0.12em);
}

.said b {
  color: var(--gold);
  font-weight: 500;
}

.said .caret {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 2px;
  background: var(--gold);
  vertical-align: -0.08em;
  visibility: hidden;
}

.said.typing .caret {
  visibility: visible;
}

.state {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.state b {
  color: var(--ink);
}

.state b[data-state="listening"] {
  color: var(--gold);
}

/* the board panel */
.board {
  background: var(--board);
  border-radius: 12px;
  padding: clamp(16px, 2.6vw, 34px);
}

.board h1 {
  --cw-title: clamp(17px, 5.4vw, 60px);
  display: grid;
  gap: max(4px, calc(var(--cw-title) * 0.16));
  margin: 0 0 clamp(20px, 3vw, 34px);
}

.board h1 .flaps {
  --cw: var(--cw-title);
}

/* "It's" and "tracked." share a line on wide boards and stack on phones,
   where three short rows let the headline outgrow the phrase above it */
.board h1 .title-line {
  display: flex;
  gap: max(2px, calc(var(--cw-title) * 0.12));
}

@media (max-width: 560px) {
  .board h1 {
    --cw-title: 8.8vw;
  }
  .board h1 .title-line {
    flex-direction: column;
    gap: max(4px, calc(var(--cw-title) * 0.16));
  }
}

.heads,
.entry {
  display: grid;
  grid-template-columns: max-content max-content max-content 1fr max-content;
  align-items: center;
  column-gap: clamp(14px, 2vw, 28px);
}

.heads,
.entries {
  --cw-row: clamp(12px, 1.55vw, 21px);
}

.heads {
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* header cells take the width of the flaps beneath them */
.heads > span:nth-child(1) {
  width: calc(var(--cw-row) * 5 + max(2px, calc(var(--cw-row) * 0.12)) * 4);
}

.heads > span:nth-child(2),
.heads > span:nth-child(3) {
  width: calc(var(--cw-row) * 9 + max(2px, calc(var(--cw-row) * 0.12)) * 8);
}

.heads .amount {
  justify-self: end;
}

.heads > span:nth-child(5) {
  width: calc(var(--cw-row) * 7 + max(2px, calc(var(--cw-row) * 0.12)) * 6);
}

.entries {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.entry .flaps {
  --cw: var(--cw-row);
}

.entry .amount {
  justify-self: end;
}

.entry .meta {
  display: none;
}

/* narrow boards: what + amount on one line, the rest as a quiet line */
@media (max-width: 760px) {
  .heads {
    display: none;
  }
  .entries {
    --cw-row: clamp(12px, 3.6vw, 22px);
    gap: 18px;
  }
  .entry {
    grid-template-columns: 1fr max-content;
    row-gap: 8px;
  }
  .entry .when,
  .entry .cat,
  .entry .status {
    display: none;
  }
  .entry .meta {
    display: block;
    grid-column: 1 / -1;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
}

.boarding {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 24px;
  margin-top: clamp(22px, 3vw, 32px);
  padding-top: clamp(18px, 2.6vw, 26px);
  border-top: 1px solid var(--line);
}

.boarding p {
  margin: 0;
  max-width: 38em;
  text-wrap: pretty;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.5;
}

.boarding p strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font: 800 24px/1.15 var(--sign);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 26px 15px;
  border-radius: 6px;
  background: var(--gold);
  color: var(--hall);
  font: 800 22px/1 var(--sign);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.btn:hover {
  background: var(--gold-hover);
}

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* sample phrase chips under the board */
.replay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 18px 0 0;
}

.replay > span {
  margin-right: 4px;
  font-size: 14px;
  color: var(--ink-3);
}

.chip {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  padding: 10px 15px 8px;
  border-radius: 999px;
  font: 500 15px/1.2 var(--text);
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out),
    background-color 160ms var(--ease-out);
}

.chip:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

.chip[aria-pressed="true"] {
  background: var(--tile);
  border-color: var(--tile);
  color: var(--ink);
}

.counters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 16px;
}

.counters b {
  margin-right: 8px;
  color: var(--gold);
  font: 800 26px/1 var(--sign);
}

/* ------------------------------------------------------------------ sections */

.section {
  padding: clamp(56px, 8vw, 104px) 0;
  border-top: 1px solid var(--line);
}

.section h2 {
  margin: 0 0 16px;
  font: 800 clamp(40px, 6.4vw, 84px) / 0.95 var(--sign);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.section .lede {
  margin: 0 0 clamp(28px, 4vw, 44px);
  max-width: 36em;
  color: var(--ink-2);
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.55;
}

/* how it works: a route with three stops beside the real review screen */
.route-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}

.route {
  --cw-stop: 34px;
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.route::before {
  content: "";
  position: absolute;
  left: calc(var(--cw-stop) / 2 - 1px);
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line);
}

.route li {
  position: relative;
  display: grid;
  grid-template-columns: var(--cw-stop) 1fr;
  gap: 22px;
}

.route .flaps {
  --cw: var(--cw-stop);
}

.route h3 {
  margin: 6px 0 8px;
  font: 800 32px/1 var(--sign);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.route p {
  margin: 0;
  max-width: 34em;
  color: var(--ink-2);
}

.note {
  margin: clamp(28px, 4vw, 40px) 0 0;
  max-width: 40em;
  color: var(--ink-3);
  font-size: 15px;
}

/* phone frames: a flat bezel, no shadow */
.phone {
  margin: 0;
}

.phone .glass {
  padding: 8px;
  background: var(--hinge);
  border-radius: 44px;
}

.phone img {
  width: 100%;
  border-radius: 37px;
  background: var(--paper);
}

.phone figcaption {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.45;
}

.phone figcaption b {
  display: block;
  color: var(--ink);
  font: 800 21px/1.2 var(--sign);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .route-grid {
    grid-template-columns: 1fr;
  }
  .route-grid .phone {
    max-width: 290px;
  }
}

/* the real app: four screens, staggered like flaps settling */
.screens {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.screens li:nth-child(even) {
  margin-top: clamp(24px, 5vw, 64px);
}

@media (max-width: 860px) {
  .screens {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: min(66vw, 270px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-right: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 14px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .screens li {
    scroll-snap-align: start;
  }
  .screens li:nth-child(even) {
    margin-top: 0;
  }
}

.sample {
  margin: 22px 0 0;
  color: var(--ink-3);
  font-size: 15px;
}

/* status boards: budgets and the privacy facts */
.status-board {
  --cw: clamp(15px, 1.45vw, 20px);
  display: grid;
  gap: 14px;
  margin: 0;
  padding: clamp(16px, 2.2vw, 26px);
  background: var(--board);
  border-radius: 12px;
  list-style: none;
}

.status-board li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
}

.status-board li + li {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.status-board .flaps {
  --cw: inherit;
}

/* phones: every budget row reads the same way, name above amount */
@media (max-width: 640px) {
  #budgets .status-board li {
    flex-direction: column;
    align-items: flex-start;
  }
}

.status-board small {
  display: block;
  width: 100%;
  font-size: 15px;
  color: var(--ink-3);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}

.split .lede {
  margin-bottom: 22px;
}

.split ul.plain {
  margin: 0 0 24px;
  padding-left: 20px;
  max-width: 34em;
  color: var(--ink-2);
}

.split ul.plain li + li {
  margin-top: 8px;
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }
}

.more {
  font-weight: 700;
  color: var(--gold);
}

/* the second boarding call, near the end of the page */
.board-compact .call {
  --cw: clamp(15px, 1.7vw, 24px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
}

.board-compact .call .flaps {
  --cw: inherit;
}

/* developer plate */
.plate {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
  margin: 0;
}

.plate div {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.plate dt {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.plate dd {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.plate .legal {
  grid-column: 1 / -1;
}

.plate .legal dd {
  font: 800 clamp(28px, 4vw, 44px) / 1.05 var(--sign);
  letter-spacing: 0.03em;
}

@media (max-width: 640px) {
  .plate {
    grid-template-columns: 1fr;
  }
}

/* placeholders that still need real values: the Dockerfile refuses to build
   while any page carries data-todo, so the site cannot ship with them */
.todo {
  padding: 0 6px;
  border-radius: 4px;
  background: var(--gold);
  color: var(--hall);
  font-family: var(--text);
  font-weight: 700;
  letter-spacing: 0;
}

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

.foot {
  padding: 28px 0 44px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 15px;
}

.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

/* ------------------------------------------------------------------ reading pages */
/* Privacy and Support: the board stays a header; the body is set on paper at
   a held measure, with section keys hanging in the margin. */

.page-title {
  padding: clamp(28px, 5vw, 56px) 0 clamp(28px, 4vw, 44px);
}

.page-title h1 {
  margin: 0;
}

.page-title .rosette-title {
  width: 640px;
  right: -120px;
  top: -200px;
  opacity: 0.38;
}

.page-title .flaps {
  --cw: clamp(26px, 8.6vw, 64px);
}

.page-title p {
  margin: 18px 0 0;
  max-width: 40em;
  color: var(--ink-2);
}

.paper {
  padding: clamp(36px, 6vw, 72px) 0 clamp(56px, 8vw, 96px);
  background: var(--paper);
  color: var(--paper-ink);
  color-scheme: light;
}

.paper ::selection {
  background: var(--hall);
  color: var(--ink);
}

.paper a {
  color: var(--paper-link);
}

.paper :focus-visible {
  outline-color: var(--hall);
}

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

.reading > p,
.reading > ul,
.reading section > p,
.reading section > ul {
  max-width: 66ch;
}

.reading section {
  position: relative;
  margin-top: clamp(34px, 4vw, 46px);
  padding-left: 72px;
}

.reading section .key {
  --cw: 22px;
  position: absolute;
  left: 0;
  top: 2px;
}

.reading section .key .f {
  background: var(--hall);
  color: var(--ink);
}

.reading section .key .f::after {
  background: var(--board);
}

.reading h2 {
  margin: 0 0 10px;
  font: 800 32px/1.05 var(--sign);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.reading h3 {
  margin: 26px 0 6px;
  font-size: 19px;
  font-weight: 700;
}

.reading p,
.reading li {
  font-size: 18px;
  line-height: 1.65;
}

.reading ul {
  padding-left: 20px;
}

.reading li + li {
  margin-top: 8px;
}

.reading .summary {
  max-width: none;
  margin: 0;
  padding: 22px 24px;
  border-radius: 12px;
  background: var(--paper-2);
}

.reading .summary strong {
  margin-right: 6px;
  font: 800 23px/1 var(--sign);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reading .todo {
  color: var(--paper-ink);
}

.reading.unkeyed section {
  padding-left: 0;
}

/* phones: the key stays on its heading's line instead of becoming a label
   above it */
@media (max-width: 640px) {
  .reading section {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    padding-left: 0;
  }
  .reading section > * {
    grid-column: 1 / -1;
  }
  .reading section .key {
    position: static;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
  .reading section .key + h2 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    align-self: center;
  }
  .reading section h2 + * {
    margin-top: 10px;
  }
}

@media (prefers-color-scheme: dark) {
  .paper {
    --paper: #0e3329;
    --paper-2: #123c31;
    --paper-ink: #ece6d4;
    --paper-link: #ffd978;
    color-scheme: dark;
  }
  .reading section .key .f {
    background: var(--tile);
  }
  .reading .todo {
    color: var(--hall);
  }
  .paper ::selection {
    background: var(--gold);
    color: var(--hall);
  }
  .paper :focus-visible {
    outline-color: var(--gold);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .f.tick::before,
  .f.tock::before {
    display: none;
  }
  .btn,
  .chip {
    transition: none;
  }
}

/* =================================================================== layers
   Money in the background, the board and the phone in front. Each scene has
   its own money material behind it (a banknote underprint, receipts, coins,
   engraved wave bands); motion.js drifts those layers against the scroll. */

body {
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(47, 165, 136, 0.16), transparent 62%),
    var(--hall);
}

[data-scene] {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.art {
  position: absolute;
  display: block;
  max-width: none;
  will-change: transform;
}

/* hero: a banknote rosette behind the phone, microprint along a line, coins */
.hero .rosette {
  width: min(1000px, 92vw);
  right: -14%;
  top: -22%;
  opacity: 0.6;
}

/* the microprint runs behind the phone, clear of the text on the left */
.hero .micro {
  left: 45%;
  bottom: 18%;
  width: 70%;
  height: 240px;
}

.coin {
  width: 80px;
}

.hero .coin-far {
  width: 62px;
  right: 3%;
  top: 6%;
  filter: blur(4px);
  opacity: 0.4;
}

.hero .coin-mid {
  width: 120px;
  left: -34px;
  bottom: 14%;
  filter: blur(1.5px);
  opacity: 0.75;
  rotate: -18deg;
}

/* the hero is the board on the left and a live phone in front of its edge */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.hero .board {
  padding-right: calc(clamp(16px, 2.6vw, 34px) + 60px);
}

.hero .board h1 {
  --cw-title: clamp(17px, 3.3vw, 50px);
}

.hero .heads,
.hero .entry {
  grid-template-columns: max-content max-content 1fr max-content;
}

.hero .heads > span:first-child,
.hero .entry .when {
  display: none;
}

.hero .heads,
.hero .entries {
  --cw-row: clamp(12px, 1.2vw, 18px);
}

.device {
  --s: 0.78;
  position: relative;
  z-index: 2;
  margin: 64px 0 0 -60px;
}

.device-glass {
  position: relative;
  width: calc(402px * var(--s) + 20px);
  height: calc(874px * var(--s) + 20px);
  padding: 10px;
  border-radius: calc(54px * var(--s) + 10px);
  background: var(--hinge);
  box-shadow: 0 40px 70px -28px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(246, 239, 220, 0.07);
}

.device-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(54px * var(--s));
}

.device.is-live .device-shot {
  display: none;
}

.device figcaption {
  max-width: calc(402px * var(--s) + 20px);
  margin-top: 16px;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 1080px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero .board {
    padding-right: clamp(16px, 2.6vw, 34px);
  }
  .hero .board h1 {
    --cw-title: clamp(17px, 5.4vw, 60px);
  }
  .hero .heads,
  .hero .entries {
    --cw-row: clamp(12px, 1.9vw, 21px);
  }
  .device {
    --s: 0.72;
    justify-self: center;
    margin: 40px 0 0;
  }
}

@media (max-width: 760px) {
  .hero .entries {
    --cw-row: clamp(12px, 3.6vw, 22px);
  }
}

@media (max-width: 560px) {
  .hero .board h1 {
    --cw-title: 8.8vw;
  }
}

@media (max-width: 400px) {
  .device {
    --s: 0.66;
  }
}

/* the logged rows on their way from the board into the phone */
.fly {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  display: flex;
  gap: 14px;
  padding: 9px 14px 7px;
  border-radius: 8px;
  background: var(--tile);
  color: var(--ink);
  font: 800 18px/1 var(--sign);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
  will-change: transform;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6);
}

.fly span {
  color: var(--gold);
}

.fly.land {
  opacity: 0;
  transition: opacity 200ms ease-out;
}

/* how it works: receipts the app saves you from keeping */
.receipt {
  position: absolute;
  width: 210px;
  padding: 20px 18px 28px;
  background: #f3ead5;
  color: #3a3a34;
  font: 600 13px/1.6 ui-monospace, "SF Mono", Menlo, monospace;
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 14px 51% repeat-x;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 14px 51% repeat-x;
}

.receipt b {
  display: block;
  text-align: center;
  font: 800 18px/1 var(--sign);
  letter-spacing: 0.2em;
}

.receipt i {
  display: block;
  margin: 8px 0;
  border-top: 2px dashed #a49f8e;
}

.receipt p {
  display: flex;
  justify-content: space-between;
  margin: 0;
}

/* receipts sit around the phone, never under the text column */
.receipt.r1 {
  right: calc(50% - 600px + 140px);
  top: 3%;
  rotate: 9deg;
  filter: blur(3px);
  opacity: 0.4;
  scale: 0.85;
}

.receipt.r2 {
  right: calc(50% - 600px + 250px);
  top: 50%;
  rotate: -7deg;
  filter: blur(1px);
  opacity: 0.8;
}

.receipt.r3 {
  right: calc(50% - 600px - 130px);
  top: 34%;
  rotate: 6deg;
  opacity: 0.95;
}

.phone.lifted {
  position: relative;
}

.phone.lifted .glass {
  box-shadow: 0 40px 70px -28px rgba(0, 0, 0, 0.6);
}

@media (max-width: 860px) {
  .receipt.r1,
  .receipt.r2 {
    display: none;
  }
  .receipt.r3 {
    right: -70px;
    top: auto;
    bottom: 22%;
    opacity: 0.6;
    filter: blur(1px);
  }
  .hero .micro {
    left: 0;
    width: 100%;
    bottom: 14%;
  }
}

/* the real app: engraved wave bands above and below the reel */
.waves {
  left: 0;
  width: 100%;
  height: 220px;
  opacity: 0.5;
}

.waves-top {
  top: -40px;
}

.waves-bottom {
  bottom: -70px;
  scale: 1 -1;
}

.waves-plate {
  top: 8%;
  height: 340px;
  opacity: 0.28;
}

/* budgets: coins at three depths, the nearest one behind the board's edge */
#budgets .coin-b1 {
  width: 58px;
  left: 6%;
  top: 12%;
  filter: blur(4px);
  opacity: 0.4;
}

#budgets .coin-b2 {
  width: 104px;
  left: 36%;
  bottom: 6%;
  filter: blur(1.5px);
  opacity: 0.7;
  rotate: 24deg;
}

#budgets .coin-b3 {
  width: 168px;
  right: -36px;
  top: 4%;
  rotate: -12deg;
}

@media (max-width: 860px) {
  #budgets .coin-b1,
  #budgets .coin-b2 {
    display: none;
  }
  #budgets .coin-b3 {
    width: 120px;
    right: -46px;
    top: auto;
    bottom: 5%;
  }
}

/* beta: a rosette and a coin that drops onto the board */
#beta .rosette-beta {
  width: 760px;
  left: -260px;
  top: -160px;
  opacity: 0.32;
}

.board-compact {
  position: relative;
}

.drop-coin {
  position: absolute;
  right: 22%;
  top: -36px;
  width: 64px;
  opacity: 0;
  translate: 0 -260px;
  rotate: -40deg;
}

.drop-coin.is-in {
  animation: coin-drop 900ms cubic-bezier(0.3, 0, 0.2, 1) forwards;
}

.drop-coin.is-still {
  animation: none;
  opacity: 1;
  translate: 0 0;
  rotate: 0deg;
}

@keyframes coin-drop {
  0% {
    opacity: 0;
    translate: 0 -260px;
    rotate: -40deg;
  }
  15% {
    opacity: 1;
  }
  62% {
    translate: 0 4px;
    rotate: 6deg;
  }
  80% {
    translate: 0 -12px;
    rotate: -2deg;
  }
  100% {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
  }
}

/* section headings settle in once: each letter fades up and folds down from
   its top edge, a soft wave across the word (motion.js arms and triggers it) */
.fw {
  display: inline-block;
  white-space: nowrap;
  perspective: 700px;
}

.fl {
  display: inline-block;
  transform-origin: 50% 0;
}

.is-armed .fl {
  opacity: 0;
  transform: translateY(0.22em) rotateX(-42deg);
}

.is-armed.is-in .fl {
  animation: settle-in 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes settle-in {
  from {
    opacity: 0;
    transform: translateY(0.22em) rotateX(-42deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* =================================================================== reel */

.reel {
  position: relative;
  border-radius: 12px;
}

.reel-track {
  display: flex;
  gap: clamp(18px, 2.4vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.reel-track > li {
  flex: none;
  width: min(270px, 68vw);
  scroll-snap-align: start;
}

.reel.is-live {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
  mask-image: linear-gradient(90deg, #000 82%, transparent);
}

.reel.is-live .reel-track {
  overflow: visible;
  scroll-snap-type: none;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  will-change: transform;
}

.reel.is-dragging .reel-track {
  cursor: grabbing;
}

.reel.is-live .reel-track > li .phone {
  transition: opacity 300ms var(--ease-out), scale 300ms var(--ease-out);
  opacity: 0.72;
  scale: 0.95;
  transform-origin: 50% 0;
}

.reel.is-live .reel-track > li.is-current .phone {
  opacity: 1;
  scale: 1;
}

.reel-track img {
  -webkit-user-drag: none;
  pointer-events: none;
}

.reel-ctl {
  display: none;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  color: var(--ink-2);
  font: 800 18px/1 var(--sign);
  letter-spacing: 0.12em;
}

.reel.is-live .reel-ctl {
  display: flex;
}

.reel-ctl button {
  appearance: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}

.reel-ctl button:hover {
  border-color: var(--gold);
}

.reel-ctl button:active {
  background: var(--tile);
}

.reel-ctl button:disabled {
  opacity: 0.35;
  cursor: default;
}

.reel-ctl svg {
  width: 18px;
  height: 18px;
}

/* =================================================================== the live phone
   Laid out at the iPhone's own 402 x 874 points and scaled into the bezel, so
   it keeps the app's proportions at every size. Its look is the app's (iOS
   system type, white cards, the app's colours), not the site's. */

.app {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 402px;
  height: 874px;
  overflow: hidden;
  transform: scale(var(--s));
  transform-origin: 0 0;
  border-radius: 54px;
  background: #f2f2f7;
  color: #000;
  font: 400 17px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
  text-transform: none;
}

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

:where(.app) button {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.app svg {
  display: block;
}

.app :focus-visible {
  outline: 3px solid #007aff;
  outline-offset: 2px;
}

.app .sb {
  position: absolute;
  inset: 0 0 auto;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 54px;
  padding: 14px 34px 0 48px;
  font-size: 17px;
  pointer-events: none;
}

.app .sb b {
  font-weight: 600;
}

.app .sb-r {
  display: flex;
  align-items: center;
  gap: 6px;
}

.app .sb-r svg {
  height: 12px;
  width: auto;
  fill: currentColor;
}

.app .scr {
  position: absolute;
  inset: 0;
  padding: 60px 16px 130px;
  overflow-y: auto;
  scrollbar-width: none;
}

.app .scr::-webkit-scrollbar {
  display: none;
}

.app .scr.enter {
  animation: scr-in 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes scr-in {
  from {
    opacity: 0;
  }
}

.app .pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 16px;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 16px rgba(0, 0, 0, 0.06);
}

/* quick add */
.app .qa-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.app .acct {
  gap: 8px;
  padding: 0 12px;
  white-space: nowrap;
}

.app .acct .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #30b0c7;
}

.app .acct > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.app .acct b {
  font-size: 14.5px;
  font-weight: 600;
}

.app .acct small {
  font-size: 11px;
  color: #8e8e93;
}

.app .acct .chev {
  width: 14px;
  height: 14px;
  color: #8e8e93;
}

.app .dir {
  display: flex;
  gap: 8px;
}

.app .dir-b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 50px;
  height: 50px;
  border-radius: 25px;
  background: #fff;
  color: #3a3a3c;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 16px rgba(0, 0, 0, 0.06);
}

.app .dir-b svg {
  width: 20px;
  height: 20px;
}

.app .dir-b.on {
  padding: 0 18px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}

.app .dir-b.on.out {
  background: #f2453d;
}

.app .dir-b.on.in {
  background: #34c759;
}

.app .qa-amt {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  margin: 30px 0 22px;
  font-weight: 700;
}

.app .qa-amt .cur {
  font-size: 36px;
  color: #8e8e93;
}

.app .qa-amt .num {
  font-size: 74px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #f2453d;
}

.app .qa-amt.in .num {
  color: #34c759;
}

.app .qa-chips {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.app .chip-s {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 18px;
  background: #fff;
  font-size: 15px;
  color: #3a3a3c;
}

.app .chip-s svg {
  width: 18px;
  height: 18px;
  color: #8e8e93;
}

.app .qa-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.app .cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 60px;
  border-radius: 16px;
  background: #fff;
  color: #1c1c1e;
  transition: transform 100ms ease-out;
}

.app .cat svg {
  width: 26px;
  height: 26px;
  color: var(--c);
}

.app .cat span {
  max-width: 86px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app .cat:active,
.app .key:active,
.app .go:active,
.app .tabbar button:active,
.app .sh-save:active {
  transform: scale(0.96);
}

.app .cat.nudge {
  animation: nudge 320ms ease-out;
}

@keyframes nudge {
  25% {
    transform: translateX(-4px);
  }
  50% {
    transform: translateX(4px);
  }
  75% {
    transform: translateX(-2px);
  }
}

.c-groceries { --c: #34c759; }
.c-cafes { --c: #ff9500; }
.c-transport { --c: #0a84ff; }
.c-housing { --c: #5e5ce6; }
.c-health { --c: #ff2d55; }
.c-shopping { --c: #bf5af2; }
.c-fun { --c: #ff6482; }
.c-more { --c: #8e8e93; }
.c-salary { --c: #34c759; }
.c-freelance { --c: #0a84ff; }
.c-gifts { --c: #ff9500; }
.c-other { --c: #8e8e93; }

.app .qa-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 12px;
}

.app .qa-note > span {
  flex: 1;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 18px;
  border-radius: 24px;
  background: #fff;
  color: #8e8e93;
  font-size: 16px;
}

.app .go {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #f2453d;
  color: #fff;
  transition: transform 100ms ease-out;
}

.app .go.in {
  background: #34c759;
}

.app .go svg {
  width: 24px;
  height: 24px;
}

.app .qa-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.app .key {
  display: grid;
  place-items: center;
  height: 50px;
  border-radius: 16px;
  background: #fff;
  font-size: 27px;
  transition: transform 100ms ease-out, background-color 100ms ease-out;
}

.app .key:active {
  background: #d1d1d6;
}

.app .key svg {
  width: 28px;
  height: 28px;
}

/* the floating tab bar */
.app .tabbar {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 7;
  display: flex;
  gap: 4px;
  padding: 6px;
  translate: -50% 0;
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.app .tabbar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 96px;
  height: 58px;
  border-radius: 29px;
  font-size: 11px;
  color: #1c1c1e;
  transition: transform 100ms ease-out, background-color 160ms ease-out;
}

.app .tabbar svg {
  width: 26px;
  height: 26px;
}

.app .tabbar button.on {
  background: rgba(0, 0, 0, 0.06);
  color: #007aff;
}

.app .tabbar button.bump svg {
  animation: bump 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bump {
  30% {
    transform: scale(1.18) translateY(-2px);
  }
}

/* operations */
.app .ops-head {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  margin: 4px 0 10px;
}

.app .ops-head > b {
  font-size: 17px;
  font-weight: 600;
}

.app .ops-head .sel {
  position: absolute;
  right: 0;
  height: 44px;
  padding: 0 16px;
  gap: 8px;
  color: #007aff;
}

.app .ops-head .sel svg {
  width: 22px;
  height: 22px;
}

.app .ops-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.app .pill-s {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 12px;
  border-radius: 18px;
  background: #e5e5ea;
  font-size: 15px;
  font-weight: 500;
}

.app .pill-s svg {
  width: 16px;
  height: 16px;
}

.app .seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 18px;
  padding: 3px;
  border-radius: 18px;
  background: #e5e5ea;
}

.app .seg span {
  padding: 7px 0;
  text-align: center;
  font-size: 15px;
  color: #636366;
}

.app .seg .on {
  border-radius: 15px;
  background: #fff;
  color: #000;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.app .ops-month {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
}

.app .ops-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.app .ops-cards > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff;
}

.app .ops-cards small {
  font-size: 15px;
  color: #8e8e93;
}

.app .ops-cards b {
  font-size: 21px;
  font-weight: 700;
}

.app .neg {
  color: #f2453d;
}

.app .pos {
  color: #34c759;
}

.app .kept {
  margin: 12px 4px 16px;
  font-size: 15px;
  font-weight: 600;
}

.app .day {
  display: flex;
  justify-content: space-between;
  margin: 14px 6px 8px;
  font-size: 17px;
  font-weight: 600;
  color: #8e8e93;
}

.app .rows {
  margin: 0;
  padding: 0 14px;
  list-style: none;
  border-radius: 18px;
  background: #fff;
}

.app .rows li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  border-bottom: 1px solid #e5e5ea;
}

.app .rows li:last-child {
  border-bottom: 0;
}

.app .rows li.fresh {
  animation: fresh-in 520ms cubic-bezier(0.16, 1, 0.3, 1), fresh-glow 1800ms ease-out;
}

@keyframes fresh-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes fresh-glow {
  0%,
  30% {
    background: rgba(255, 217, 120, 0.4);
  }
  100% {
    background: rgba(255, 217, 120, 0);
  }
}

.app .ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffe4e1;
  color: #f2453d;
}

.app .ico.inc {
  background: #dff6e5;
  color: #34c759;
}

.app .ico svg {
  width: 20px;
  height: 20px;
}

.app .rows li > span {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.app .rows li b {
  font-size: 17px;
  font-weight: 500;
}

.app .rows li small {
  font-size: 13px;
  color: #8e8e93;
}

.app .rows em {
  font-size: 17px;
  font-style: normal;
  font-weight: 600;
  color: #f2453d;
}

.app .rows em.inc {
  color: #34c759;
}

/* accounts */
.app .acc-top {
  display: flex;
  justify-content: space-between;
  margin: 4px 0 12px;
}

.app .acc-top .pill {
  gap: 6px;
  color: #007aff;
}

.app .acc-top .pill svg {
  width: 20px;
  height: 20px;
}

.app .acc-top .icons {
  gap: 18px;
}

.app .acc-top .icons svg {
  width: 28px;
  height: 28px;
}

.app .big {
  margin: 0 0 14px;
  font-size: 34px;
  font-weight: 700;
}

.app .worth {
  margin-bottom: 20px;
  padding: 16px 18px 14px;
  border-radius: 22px;
  background: #fff;
}

.app .worth-h {
  display: flex;
  justify-content: space-between;
}

.app .worth-h b {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #636366;
}

.app .worth-h small {
  display: block;
  font-size: 13px;
  color: #8e8e93;
}

.app .worth-h em {
  height: fit-content;
  padding: 4px 10px;
  border-radius: 12px;
  background: #dff6e5;
  color: #34c759;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}

.app .worth strong {
  display: block;
  margin: 10px 0;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.app .worth .bar {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: #ff375f;
}

.app .worth .leg {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  color: #636366;
}

.app .worth .leg i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff375f;
}

.app .worth .leg span {
  color: #8e8e93;
}

.app .sec {
  display: flex;
  justify-content: space-between;
  margin: 0 4px 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #636366;
}

.app .acard {
  display: flex;
  flex-direction: column;
  min-height: 150px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border-radius: 22px;
  color: #fff;
}

.app .acard.teal {
  background: linear-gradient(135deg, #2b8aa1, #3cc0d8);
}

.app .acard.green {
  background: linear-gradient(135deg, #279a49, #3bd06b);
}

.app .acard-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app .acard-top i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.app .acard-top i svg {
  width: 22px;
  height: 22px;
  color: #fff;
}

.app .acard-top b {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
}

.app .acard-top em {
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.app .acard small {
  margin-top: 28px;
  font-size: 14px;
  opacity: 0.85;
}

.app .acard strong {
  font-size: 30px;
  font-weight: 700;
}

/* the voice review sheet */
.app .sheet-scrim {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.app .sheet-scrim.open {
  opacity: 1;
}

.app .sheet {
  position: absolute;
  inset: 64px 8px 8px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  padding: 18px 16px 16px;
  border-radius: 44px;
  background: #f2f2f7;
  transform: translateY(105%);
  transition: transform 520ms cubic-bezier(0.32, 0.72, 0, 1);
}

.app .sheet.open {
  transform: none;
}

.app .sh-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.app .circ {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.app .circ svg {
  width: 22px;
  height: 22px;
}

.app .sh-head b {
  margin-left: 14px;
  font-size: 17px;
  font-weight: 600;
}

.app .sh-said {
  display: flex;
  gap: 10px;
  min-height: 70px;
  margin: 8px 6px 14px;
  font-size: 16px;
  line-height: 1.4;
  color: #8e8e93;
}

.app .sh-said svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.app .sh-rows {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app .sh-rows li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 20px;
  background: #fff;
  animation: row-in 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes row-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.app .tile {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 84px;
  height: 58px;
  border-radius: 14px;
  background: var(--c);
  color: #fff;
  font-size: 12px;
  font-style: normal;
}

.app .tile svg {
  width: 24px;
  height: 24px;
}

.app .sh-rows li > span {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app .sh-rows .amt {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  width: fit-content;
  padding: 2px 10px;
  border-radius: 10px;
  background: #f2f2f7;
  font-size: 28px;
  font-weight: 700;
  color: #f2453d;
}

.app .sh-rows .amt small {
  font-size: 16px;
  color: #8e8e93;
}

.app .sh-rows li > span > small {
  font-size: 12px;
  color: #8e8e93;
}

.app .tick {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #007aff;
  color: #fff;
  font-style: normal;
}

.app .tick svg {
  width: 16px;
  height: 16px;
}

.app .sh-save {
  margin-top: auto;
  height: 58px;
  border-radius: 29px;
  background: #007aff;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  transition: transform 100ms ease-out, opacity 200ms ease-out;
}

.app .sh-save:disabled {
  opacity: 0.35;
  cursor: default;
}

.app .toast {
  position: absolute;
  left: 50%;
  top: 58px;
  z-index: 12;
  padding: 10px 16px;
  border-radius: 20px;
  background: rgba(28, 28, 30, 0.88);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  translate: -50% -20px;
  pointer-events: none;
}

.app .toast.show {
  animation: toast 2400ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes toast {
  0% {
    opacity: 0;
    translate: -50% -20px;
  }
  12%,
  82% {
    opacity: 1;
    translate: -50% 0;
  }
  100% {
    opacity: 0;
    translate: -50% -10px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .app .tabbar {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* =================================================================== page transitions
   Same-origin navigations morph: the header stays put and the page title
   travels between the board on the home page and the legal pages. */

@view-transition {
  navigation: auto;
}

.hero .board h1,
.page-title h1 {
  view-transition-name: page-title;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-group(page-title) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  .scr.enter,
  .rows li.fresh,
  .sh-rows li,
  .toast.show,
  .tabbar button.bump svg,
  .cat.nudge {
    animation-duration: 1ms !important;
  }
  .sheet,
  .sheet-scrim {
    transition: none;
  }
  .reel.is-live .reel-track > li .phone {
    transition: none;
  }
  .art {
    will-change: auto;
  }
}