/*
 * avocando.workshown.com
 *
 * The ground is the skin of a ripe avocado, almost black with a little plum
 * in it. Type is warm white. The flesh's pale green is an accent only (links,
 * the logo, one line of the statement, a budget bar), and the pit's copper
 * marks money. Type is SF Pro Rounded where the device has it (every Apple
 * device, which is everyone the app is for) and the system face elsewhere.
 * Nothing is loaded from another server: GSAP and Lenis are in assets/vendor.
 */

:root {
  color-scheme: dark;

  --ground: #121013;
  --ground-2: #1b181c;
  --ground-3: #262228;
  --line: rgb(245 240 230 / 0.09);
  --line-strong: rgb(245 240 230 / 0.17);

  --text: #f5f2ea;
  --text-2: #b8b1a8;
  --text-3: #8b847c;
  --prose: #d9d4cb;

  --flesh: #e3e9b4;
  --pit: #d39a5e;
  --warn: #e8b964;

  --paper: #f5f2e7;
  --paper-ink: #2b2a22;
  --paper-faint: #8a8676;

  --radius-card: 22px;
  --radius-control: 14px;

  --display: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont,
    system-ui, 'Segoe UI', Roboto, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto,
    'Helvetica Neue', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --gutter: clamp(20px, 5vw, 40px);
  --measure: 1160px;
  --header: 72px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection {
  background: rgb(211 154 94 / 0.38);
  color: var(--text);
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--flesh);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--flesh);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--text);
  color: var(--ground);
  font-weight: 600;
  z-index: 30;
}

.skip:focus {
  top: 12px;
}

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

/* Anything site.js animates in on load starts hidden, so it never shows and
   then jumps. boot.js sets .js only when motion is allowed, and takes it away
   again if the animation code never arrives. */
.js [data-reveal] {
  visibility: hidden;
}

/* A heading's lines rise out of masks (site.js). The masks reach below the
   line box so descenders are not cut off on the way up. */
.split-line-mask {
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}

/* ---------- Header and footer ---------- */

/* Translucent at all times, so content scrolling under it reads as under it.
   At the top of the page it is the same colour as the ground. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--header);
  display: flex;
  align-items: center;
  background: rgb(18 16 19 / 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
  view-transition-name: site-header;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
}

.brand:hover {
  color: var(--text);
}

.brand svg {
  width: 30px;
  height: 30px;
  transition: transform 0.5s var(--ease-out);
}

.brand:hover svg {
  transform: rotate(-12deg) scale(1.06);
}

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 15px;
}

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

.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}

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

.nav a:hover::after,
.nav a[aria-current='page']::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-footer {
  margin-top: 120px;
  padding: 40px 0 56px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 14px;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.site-footer a {
  color: var(--text-2);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--text);
}

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

h1,
h2,
h3 {
  font-family: var(--display);
  margin: 0;
  text-wrap: balance;
}

.lede {
  color: var(--text-2);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.5;
  max-width: 34ch;
  margin: 0;
}

.soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--ground-2);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}

.soon::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--flesh);
  box-shadow: 0 0 0 4px rgb(227 233 180 / 0.16);
}

/* ---------- Home: hero ---------- */

.hero {
  position: relative;
  padding: clamp(32px, 7vw, 88px) 0 clamp(64px, 10vw, 120px);
  /* The glow may spill up and down, never sideways into a scrollbar. */
  overflow-x: clip;
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
}

.hero-copy {
  display: grid;
  gap: 28px;
  justify-items: start;
}

.hero h1 {
  color: var(--text);
  font-weight: 800;
  font-size: clamp(44px, 5.4vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.hero h1 > span {
  display: block;
}

/* Two lines, never four: each half of the headline stays whole. */
@media (min-width: 480px) {
  .hero h1 > span {
    white-space: nowrap;
  }
}

/* The receipt being read. */

.scan-demo {
  position: relative;
  justify-self: center;
  width: min(100%, 360px);
  padding-bottom: 72px;
}

/* Copper and flesh light behind the receipt. */
.scan-demo::before {
  content: '';
  position: absolute;
  inset: -22% -38% -6%;
  background:
    radial-gradient(closest-side at 38% 40%, rgb(211 154 94 / 0.34), transparent 72%),
    radial-gradient(closest-side at 68% 66%, rgb(227 233 180 / 0.16), transparent 72%);
  z-index: 0;
  pointer-events: none;
}

.receipt {
  position: relative;
  z-index: 1;
  margin: 0 18px;
  padding: 26px 24px 30px;
  background: var(--paper);
  color: var(--paper-ink);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  transform: rotate(-2.5deg);
  box-shadow: 0 30px 60px rgb(0 0 0 / 0.5);
  overflow: hidden;
}

/* Torn bottom edge. */
.receipt::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 10px;
  background: linear-gradient(-45deg, var(--ground) 5px, transparent 0) 0 0 /
      10px 10px repeat-x,
    linear-gradient(45deg, var(--ground) 5px, transparent 0) 0 0 / 10px 10px
      repeat-x;
}

.receipt p {
  margin: 0;
}

.r-shop {
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
}

.r-meta {
  text-align: center;
  color: var(--paper-faint);
  margin-bottom: 14px !important;
}

.r-lines {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  border-top: 1px dashed rgb(43 42 34 / 0.35);
  border-bottom: 1px dashed rgb(43 42 34 / 0.35);
}

.r-lines li,
.r-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 6px;
  margin: 0 -6px;
  border-radius: 4px;
}

/* The figure that matters, outlined in copper once it has been read. */
.r-total {
  margin-top: 12px;
  padding-top: 2px;
  padding-bottom: 2px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: inset 0 0 0 2px var(--pit);
}

.r-foot {
  margin-top: 16px !important;
  text-align: center;
  color: var(--paper-faint);
  letter-spacing: 0.06em;
}

/* The scanner's light, swept down the paper by site.js. */
.r-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 56px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgb(211 154 94 / 0.22) 70%,
    rgb(211 154 94 / 0.7) 100%
  );
  opacity: 0;
  pointer-events: none;
}

/* The entry the receipt becomes, drawn the way the app draws it. */
.txn {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: rgb(27 24 28 / 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.45);
}

.bubble {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgb(227 233 180 / 0.12);
  color: var(--flesh);
}

.bubble svg {
  width: 20px;
  height: 20px;
}

.txn-main {
  flex: 1;
  min-width: 0;
}

.txn-title {
  font-weight: 600;
  font-size: 16px;
}

.txn-sub {
  color: var(--text-2);
  font-size: 13px;
}

.amount {
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.txn .amount {
  font-size: 18px;
}

/* ---------- Home: the statement ---------- */

.statement {
  padding: clamp(48px, 10vw, 140px) 0;
}

.statement p {
  text-wrap: balance;
  margin: 0 auto;
  max-width: 21em;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text);
}

.statement p + p {
  margin-top: 0.6em;
  color: var(--flesh);
}

/* ---------- Home: features ---------- */

.features {
  display: grid;
  gap: clamp(72px, 12vw, 150px);
}

.feature .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 6vw, 88px);
}

.feature-copy {
  display: grid;
  gap: 18px;
  max-width: 30em;
}

.feature h2 {
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--text);
}

.feature p {
  margin: 0;
  color: var(--text-2);
  font-size: 18px;
}

/* App components, drawn as the app draws them. */
.panel {
  display: grid;
  gap: 16px;
  padding: 22px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--ground-2);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
}

.panel-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.panel-row + .panel-row {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.grow {
  flex: 1;
  min-width: 0;
}

.muted {
  color: var(--text-2);
  font-size: 14px;
}

.title {
  font-weight: 600;
}

/* Budget */
.budget-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.budget-head .amount {
  font-size: 17px;
}

.bar {
  height: 10px;
  border-radius: 999px;
  background: var(--ground-3);
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--flesh);
}

.warn {
  color: var(--warn);
  font-size: 14px;
}

/* Household */
.shared-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.shared-total .amount {
  font-size: 28px;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: var(--ground-3);
  border: 1px solid var(--line);
  font-size: 15px;
}

.pill .amount {
  font-size: 15px;
  color: var(--text-2);
}

.avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  color: var(--ground);
}

/* Recurring */
.tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgb(232 185 100 / 0.14);
  color: var(--warn);
  font-size: 13px;
  font-weight: 600;
}

.add-bill {
  color: var(--flesh);
  font-size: 14px;
  font-weight: 600;
}

/* Your data. The thumb slides between the options in site.js; without it the
   selected option carries its own background. */
.segmented {
  position: relative;
  display: flex;
  gap: 5px;
  padding: 4px;
  border-radius: 999px;
  background: var(--ground-3);
}

.segmented span {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.segmented .on {
  color: var(--text);
  background: #353037;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
}

.segmented .seg-thumb {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  min-height: 0;
  padding: 0;
  background: #353037;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
  visibility: hidden;
}

.segmented.has-thumb .on {
  background: transparent;
  box-shadow: none;
}

.segmented.has-thumb .seg-thumb {
  visibility: visible;
}

/* Foreign currency */
.fx {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text-2);
}

.fx .amount {
  color: var(--text);
  font-size: 17px;
}

.fx-arrow {
  width: 18px;
  height: 18px;
  color: var(--text-3);
}

/* ---------- Home: privacy and closing ---------- */

.promise {
  padding-top: clamp(96px, 14vw, 180px);
}

.promise .wrap {
  display: grid;
  gap: 20px;
  justify-items: center;
  text-align: center;
}

.promise h2 {
  font-weight: 800;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--text);
}

.promise p {
  margin: 0;
  max-width: 36em;
  color: var(--text-2);
}

.closing {
  padding-top: clamp(96px, 14vw, 180px);
}

.closing .wrap {
  display: grid;
  justify-items: center;
  gap: 24px;
  text-align: center;
}

.closing svg {
  width: 64px;
  height: 64px;
}

.closing h2 {
  font-weight: 800;
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: -0.03em;
  color: var(--text);
}

.closing p {
  margin: 0;
  color: var(--text-2);
}

/* ---------- Support and legal pages ---------- */

.page-head {
  padding: clamp(40px, 7vw, 88px) 0 clamp(32px, 5vw, 56px);
}

.page-head h1 {
  color: var(--text);
  font-weight: 800;
  font-size: clamp(42px, 6.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.page-head p {
  margin: 20px 0 0;
  color: var(--text-2);
  font-size: 19px;
  max-width: 38em;
}

.prose {
  max-width: 44rem;
}

.prose h2 {
  margin: 2.4em 0 0.6em;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
  scroll-margin-top: calc(var(--header) + 24px);
}

.prose h3 {
  margin: 1.8em 0 0.4em;
  font-size: 19px;
  color: var(--text);
}

.prose p,
.prose li {
  color: var(--prose);
}

.prose p {
  margin: 0 0 1em;
}

.prose ul,
.prose ol {
  margin: 0 0 1em;
  padding-left: 1.3em;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose strong {
  color: var(--text);
}

.prose .meta {
  color: var(--text-3);
  font-size: 15px;
}

.table-scroll {
  overflow-x: auto;
  margin: 0 0 1.4em;
}

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

.prose th,
.prose td {
  text-align: left;
  vertical-align: top;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--line);
}

.prose th {
  color: var(--text);
  font-weight: 600;
}

.prose td {
  color: var(--prose);
}

.toc {
  margin: 0 0 8px;
  padding: 20px 24px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--ground-2);
}

.toc p {
  margin: 0 0 8px;
  color: var(--text);
  font-weight: 600;
}

.toc ol {
  margin: 0;
  padding-left: 1.3em;
  columns: 2 16rem;
  column-gap: 32px;
}

.toc li {
  margin: 0 0 4px;
  break-inside: avoid;
}

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

.toc a:hover {
  color: var(--text);
}

/* Support FAQ. With site.js the answer's height animates open and shut; the
   chevron follows .is-open, which turns as soon as the row is tapped. */
.faq {
  display: grid;
  gap: 10px;
  max-width: 48rem;
}

.faq details {
  border-radius: var(--radius-control);
  border: 1px solid var(--line);
  background: var(--ground-2);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.faq details:hover,
.faq details[open] {
  border-color: var(--line-strong);
}

.faq details[open] {
  background: #1f1c20;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
}

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

.faq summary::after {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-3);
  border-bottom: 2px solid var(--text-3);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.45s var(--ease-out), border-color 0.25s ease;
}

.faq summary:hover::after {
  border-color: var(--text);
}

.faq details[open] summary::after,
.faq details.is-open summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.js .faq details[open]:not(.is-open) summary::after {
  transform: translateY(-3px) rotate(45deg);
}

.faq .answer {
  padding: 0 22px 20px;
  color: var(--prose);
  overflow: hidden;
}

.faq .answer p {
  margin: 0 0 0.8em;
}

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

.faq .answer ul {
  margin: 0 0 0.8em;
  padding-left: 1.3em;
}

.faq .answer li + li {
  margin-top: 0.4em;
}

.faq .answer strong {
  color: var(--text);
}

.contact {
  margin-top: 56px;
  display: grid;
  gap: 10px;
  max-width: 48rem;
  padding: 28px;
  border-radius: var(--radius-card);
  background: var(--ground-2);
  border: 1px solid var(--line);
}

.contact h2 {
  font-size: 26px;
  color: var(--text);
}

.contact p {
  margin: 0;
  color: var(--text-2);
}

.contact a {
  justify-self: start;
  font-size: 20px;
  font-weight: 600;
}

/* ---------- Motion that needs no script ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Pages cross-fade into each other; the header stays put. */
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.35s;
  }

  .soon::before {
    animation: pulse 2.4s ease-in-out infinite;
  }

  .scan-demo::before {
    animation: drift 16s ease-in-out infinite alternate;
  }
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgb(227 233 180 / 0.16);
  }
  50% {
    box-shadow: 0 0 0 7px rgb(227 233 180 / 0.04);
  }
}

@keyframes drift {
  from {
    transform: translate3d(-4%, -3%, 0) scale(1);
  }
  to {
    transform: translate3d(5%, 4%, 0) scale(1.1);
  }
}

/* Lenis (smooth scrolling), from its own stylesheet. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 860px) {
  .hero .wrap,
  .feature .wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero h1 {
    font-size: clamp(40px, 9.6vw, 72px);
  }

  .hero-copy {
    justify-items: start;
  }

  .scan-demo {
    width: min(100%, 340px);
  }

  .nav {
    gap: 18px;
  }
}

@media (max-width: 420px) {
  :root {
    --header: 64px;
  }

  .nav .hide-narrow {
    display: none;
  }

  .segmented span {
    padding: 0 6px;
    font-size: 13px;
  }
}