/* Landing page. One responsive page: desktop is the 1440 design, and
   the max-width: 760px block follows the 390 mobile design. */

:root {
  --ink: #14161b;
  --indigo: #5145d9;
  --pink: #ffb8d2;
  --yellow: #ffe45c;
  --lilac: #eeedfd;
  --mist: #f4f5f8;
  --white: #ffffff;
  --body: #4a4f5c;
  --muted: #667082;
  --dim: #d7d9e0;
  --dim-2: #b4b8c2;
  --rule: #3a3f4b;
  --error: #b02a24;
  --ok-bg: #e2f5ef;
  --ok: #0d6e5c;
  --font: "Figtree", system-ui, sans-serif;
  --mono: "IBM Plex Mono", system-ui, sans-serif;
}

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

[hidden] {
  display: none !important;
}

html {
  overflow-x: clip;
  /* Keeps anchor targets clear of the sticky nav (96px tall, 72px on mobile). */
  scroll-padding-top: 112px;
}

body {
  max-width: 1440px;
  margin: 0 auto;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ol {
  margin: 0;
}

a {
  color: inherit;
}

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

:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
}

/* Copy and blocks that only appear on one layout. */
.mob {
  display: none;
}

.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;
}

/* Tags and buttons */

.tag {
  display: inline-block;
  align-self: flex-start;
  padding: 5px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  font: 800 13px/16px var(--font);
  color: var(--ink);
  rotate: var(--tilt, 0deg);
}

.tag--pink {
  background: var(--pink);
}

.tag--yellow {
  background: var(--yellow);
}

.tag--lilac {
  background: var(--lilac);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: 800 17px/22px var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn--solid {
  background: var(--indigo);
  color: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
}

.btn--shadow {
  box-shadow: 4px 4px 0 var(--ink);
}

.btn:disabled {
  opacity: 0.45;
  cursor: progress;
}

.btn--nav {
  min-height: 0;
  padding: 11px 20px;
  font-size: 16px;
  line-height: 20px;
}

.btn--nav.btn--solid {
  box-shadow: 4px 4px 0 var(--ink);
}

.btn--demo {
  min-height: 48px;
}

.mark {
  display: block;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  overflow: visible;
}

.wordmark {
  font: 900 20px/24px var(--font);
  letter-spacing: -0.03em;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* Waitlist forms */

.waitlist {
  width: 552px;
  max-width: 100%;
}

.field {
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 22px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: 500 16px/22px var(--font);
}

.field::placeholder {
  color: var(--muted);
  opacity: 1;
}

.field:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 4px #5145d940;
}

.field[aria-invalid="true"] {
  border-color: var(--error);
}

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

.waitlist-row .field {
  flex: 1 1 auto;
}

.waitlist-row .btn {
  flex-shrink: 0;
}

.hero-cta .waitlist-row .field {
  flex: 0 0 360px;
}

.waitlist-status {
  margin-top: 10px;
  text-align: left;
}

.form-error {
  font: 700 14px/18px var(--font);
  color: var(--error);
}

.spinner {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.form-success {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.ok-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ok-bg);
  box-shadow: 3px 3px 0 var(--ink);
}

.success-title {
  font: 900 30px/34px var(--font);
  letter-spacing: -0.045em;
}

.success-copy {
  font: 500 16px/24px var(--font);
  color: var(--body);
}

.success-copy a {
  color: var(--indigo);
  font-weight: 800;
  text-decoration: underline;
}

.form-already {
  padding: 16px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--lilac);
  box-shadow: 3px 3px 0 var(--ink);
  font: 700 16px/24px var(--font);
}

/* Nav */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 56px;
  border-bottom: 2px solid var(--ink);
}

.nav .mark {
  width: 34px;
  height: 34px;
}

.nav .wordmark {
  font-size: 24px;
  line-height: 30px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  font: 600 16px/20px var(--font);
  color: var(--ink);
  text-decoration: none;
}

.nav-links .btn {
  font-weight: 800;
}

.nav-links .btn--solid {
  color: var(--white);
}

/* Hero */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 88px 56px 56px;
  text-align: center;
}

.hero .tag {
  --tilt: -2deg;
  padding: 6px 14px;
  font-size: 14px;
  line-height: 18px;
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font: 900 88px/96px var(--font);
  letter-spacing: -0.045em;
}

.hero-hl {
  padding: 0 16px;
  border-radius: 14px;
  background: var(--yellow);
  rotate: -1.5deg;
}

.lede {
  max-width: 640px;
  font: 500 20px/30px var(--font);
  color: var(--body);
}

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding-top: 8px;
}

.hero-alt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hero-note {
  font: 500 15px/22px var(--font);
  color: var(--body);
}

/* Product shot */

.shot {
  position: relative;
  container-type: inline-size;
  display: flex;
  justify-content: center;
  padding: 56px 56px 96px;
  overflow: hidden;
}

.window {
  display: flex;
  flex-direction: column;
  width: min(1220px, 100%);
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 10px 10px 0 var(--ink);
}

.window-bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 2px solid var(--ink);
  background: var(--lilac);
}

.dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 99px;
}

.dot--pink {
  background: var(--pink);
}

.dot--yellow {
  background: var(--yellow);
}

.dot--white {
  background: var(--white);
}

.window-url {
  padding-left: 16px;
  font: 400 13px/16px var(--mono);
  color: var(--body);
}

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

.sticker {
  position: absolute;
  padding: 10px 20px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  font: 900 18px/22px var(--font);
  color: var(--ink);
  transform-origin: 0 0;
}

.sticker--csv {
  left: 52px;
  top: 150px;
  background: var(--yellow);
  rotate: -8deg;
}

.sticker--pdf {
  right: 70px;
  top: 14px;
  background: var(--pink);
  rotate: 7deg;
}

/* Pinned to the screenshot, not the page: it hangs off the window's right
   edge in the gap between the household card and the chart card, so it never
   covers a clickable part of the picture. 100cqw is .shot's content width,
   --win the window width, and 0.3625 that gap's height as a share of it
   (y 521 of 853 at 1706/2880). */
.sticker--ofx {
  --win: min(1220px, 100cqw);
  right: calc(56px + (100cqw - var(--win)) / 2 - var(--win) * 0.072);
  top: calc(56px + 44px + var(--win) * 0.3625 - var(--win) * 0.02);
  /* Shrinks with the window so it stays in the gap on narrower screens. */
  padding: 0.55em 1.1em;
  font-size: calc(var(--win) * 0.01475);
  line-height: 1.22;
  background: var(--lilac);
  rotate: -5deg;
}

.shot-note {
  position: absolute;
  left: 120px;
  bottom: 52px;
  font: 600 13px/16px var(--font);
  color: var(--indigo);
}

.shot-row {
  display: none;
}

/* Features intro */

.intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  padding: 64px 112px 24px;
  border-top: 2px solid var(--ink);
}

.intro-title {
  font: 900 60px/64px var(--font);
  letter-spacing: -0.04em;
}

.intro-copy {
  flex-shrink: 0;
  width: 380px;
  font: 400 18px/28px var(--font);
  color: var(--body);
}

/* Feature bands (desktop) and cards (mobile). Each .feature sets --accent
   (the mobile card shadow and image shadow), --tilt (the tag tilt) and
   --img-tilt (the image tilt). */

.features {
  display: contents;
}

.feature {
  display: flex;
  align-items: center;
  gap: 72px;
  padding: 72px 112px;
  background: var(--white);
}

.feature--import {
  --accent: var(--yellow);
  --tilt: -2deg;
  --img-tilt: 1.5deg;
}

.feature--reconcile {
  --accent: var(--pink);
  --tilt: 2deg;
  --img-tilt: -1.5deg;
}

.feature--recurring {
  --accent: var(--indigo);
  --tilt: -2deg;
  --img-tilt: 1deg;
}

.feature--safe {
  --accent: var(--ink);
  --tilt: -2deg;
  gap: 96px;
  padding: 112px;
  background: var(--indigo);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.feature-text {
  display: flex;
  flex: 0 0 440px;
  flex-direction: column;
  gap: 18px;
  width: 440px;
}

.feature--safe .feature-text {
  flex: 1 1 0;
  width: auto;
}

.feature .tag {
  rotate: var(--tilt);
}

.feature-title {
  font: 900 44px/48px var(--font);
  letter-spacing: -0.035em;
}

.feature-copy {
  font: 400 17px/27px var(--font);
  color: var(--body);
}

.feature-img {
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  align-self: center;
  border: 2px solid var(--ink);
  border-radius: 20px;
  box-shadow: 8px 8px 0 var(--accent);
  rotate: var(--img-tilt);
}

.feature--safe .feature-title {
  color: var(--white);
  font-size: 56px;
  line-height: 60px;
  letter-spacing: -0.04em;
}

.feature--safe .feature-copy {
  color: #e6e4ff;
  font-size: 18px;
  line-height: 28px;
}

.receipt {
  display: flex;
  flex: 0 0 440px;
  flex-direction: column;
  width: 440px;
  padding: 30px 30px 26px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--white);
  box-shadow: 8px 8px 0 var(--ink);
  font-family: var(--mono);
  rotate: -2.5deg;
}

.receipt-title {
  font: 600 14px/20px var(--mono);
  letter-spacing: 0.08em;
  text-align: center;
}

.receipt-sub {
  padding: 10px 0 16px;
  border-bottom: 2px dashed var(--ink);
  font: 400 12px/18px var(--mono);
  color: var(--body);
  text-align: center;
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font: 400 15px/22px var(--mono);
}

.receipt-row--first {
  padding-top: 12px;
}

.receipt-row--rule {
  padding-bottom: 14px;
  border-bottom: 2px dashed var(--ink);
}

.receipt-row--neg span:last-child {
  color: #a8462a;
}

.receipt-total {
  align-items: baseline;
  padding: 14px 0 10px;
}

.receipt-total strong {
  font: 600 16px/22px var(--mono);
}

.receipt-total output {
  padding: 0 6px;
  background: var(--yellow);
  font: 600 26px/34px var(--mono);
}

.receipt-note {
  margin-top: 6px;
  font: 400 12px/18px var(--mono);
  color: var(--body);
}

/* More features */

.more {
  padding: 112px;
  background: var(--white);
}

.more-title {
  margin-bottom: 48px;
  font: 900 44px/48px var(--font);
  letter-spacing: -0.035em;
}

.more-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  display: flex;
  flex: 0 0 389px;
  flex-direction: column;
  gap: 12px;
  padding: 28px 26px 30px;
  border: 2px solid var(--ink);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 6px 6px 0 var(--ink);
  rotate: var(--tilt, 0deg);
}

/* Hero screenshot hotspots: transparent buttons placed over parts of the
   picture (percent boxes), so cards and controls highlight on hover. Any click
   except Home and the live widgets below opens the "demo goes live soon"
   panel over a blurred app. */
.app-shot {
  position: relative;
}

.hot {
  position: absolute;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition:
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.hot:hover,
.hot:focus-visible {
  outline: none;
  background: rgb(81 69 217 / 0.06);
  box-shadow:
    0 0 0 2px var(--indigo),
    0 10px 24px rgb(20 22 27 / 0.18);
}

.hot--nav,
.hot--here {
  border-radius: 999px;
}

.hot--here {
  cursor: default;
}

.soon {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(255 255 255 / 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.soon[hidden] {
  display: none;
}

/* The hero window's scroll blur would also blur the panel, menu or tooltip;
   switch it off while one is open (!important beats the running animation). */
.window:has(.soon:not([hidden]), .scope-menu:not([hidden]), .chart-tip:not([hidden])) {
  filter: none !important;
}

.soon-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  padding: 28px 30px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 8px 8px 0 var(--ink);
  rotate: -1.5deg;
}

.soon-kicker {
  font: 600 12px/14px var(--mono);
  letter-spacing: 0.08em;
  color: var(--indigo);
}

.soon-title {
  font: 900 30px/34px var(--font);
  letter-spacing: -0.03em;
}

.soon-copy {
  font: 400 16px/24px var(--font);
  color: var(--body);
}

.soon-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-top: 6px;
}

.soon-close {
  padding: 0;
  border: 0;
  background: none;
  font: 700 15px/20px var(--font);
  color: var(--ink);
  text-decoration: underline;
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .soon:not([hidden]) {
    animation: soon-in 220ms ease both;
  }

  .soon:not([hidden]) .soon-card {
    animation: soon-card-in 320ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  }
}

@keyframes soon-in {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }
}

@keyframes soon-card-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.92);
  }
}

/* Phones: the screenshot is only ~200px tall, so the panel keeps just the
   title and the two actions. */
@media (max-width: 760px) {
  .soon {
    padding: 10px;
  }

  .soon-card {
    gap: 8px;
    padding: 12px 14px 14px;
    border-radius: 14px;
    box-shadow: 4px 4px 0 var(--ink);
  }

  .soon-kicker,
  .soon-copy {
    display: none;
  }

  .soon-title {
    font-size: 18px;
    line-height: 22px;
  }

  .soon-actions {
    gap: 12px;
    padding-top: 0;
  }

  .soon-actions .btn {
    padding: 8px 14px;
    font-size: 14px;
    line-height: 18px;
  }

  .soon-close {
    font-size: 13px;
  }
}

/* Live hero widgets: real HTML laid over the screenshot in percent boxes of
   the 1440x853 grid. Sizes in cqw track the picture's width so drawn text
   lines up with the text it covers. Figures are synthetic. */
.app-shot {
  container-type: inline-size;
}

.dim,
.scope-text,
.chart-live,
.chart-hit,
.chart-x,
.chart-tip,
.tabs,
.tab,
.chart-view {
  position: absolute;
}

.app-shot [hidden] {
  display: none !important;
}

/* A card outside the scope fades to grey. */
.dim {
  border-radius: 14px;
  background: rgb(255 255 255 / 0.62);
  -webkit-backdrop-filter: grayscale(1);
  backdrop-filter: grayscale(1);
  pointer-events: none;
}

/* New scope name painted over the pill's own text. */
.scope-text {
  display: flex;
  align-items: center;
  gap: 0.35cqw;
  overflow: hidden;
  background: var(--white);
  font: 800 1.04cqw/1 var(--font);
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
}

.scope-text::after {
  content: "▾";
  font-size: 0.7em;
}

.scope-menu {
  position: absolute;
  top: calc(5.744% + 6px);
  left: 8.333%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
}

.scope-item {
  padding: 8px 12px 8px 30px;
  border: 0;
  border-radius: 9px;
  background: none;
  font: 800 14px/18px var(--font);
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.scope-item span {
  font-weight: 500;
  color: var(--muted);
}

.scope-item:hover,
.scope-item:focus-visible {
  outline: none;
  background: var(--lilac);
}

.scope-item[aria-checked="true"] {
  background: no-repeat 10px 50% / 12px 12px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' fill='none' stroke='%2314161b' stroke-width='2'/%3E%3C/svg%3E");
}

.scope-item[aria-checked="true"]:hover,
.scope-item[aria-checked="true"]:focus-visible {
  background-color: var(--lilac);
}

.chart-live {
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.chart-hit {
  border-radius: 10px;
  cursor: crosshair;
}

.chart-hit:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

.chart-x {
  top: 69.4%;
  width: 0;
  height: 18.6%;
  border-left: 1.5px solid var(--ink);
  pointer-events: none;
}

.chart-dot {
  position: absolute;
  width: max(8px, 0.9cqw);
  height: max(8px, 0.9cqw);
  border: 2px solid var(--ink);
  border-radius: 99px;
  translate: -50% -50%;
  pointer-events: none;
}

.chart-dot--business {
  background: var(--indigo);
}

.chart-dot--household {
  background: #eb83a9;
}

.chart-tip {
  top: 69.9%;
  z-index: 2;
  display: grid;
  gap: 2px;
  padding: 6px 9px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 3px 3px 0 var(--ink);
  font: 500 max(11px, 0.9cqw) / 1.3 var(--font);
  color: var(--body);
  white-space: nowrap;
  pointer-events: none;
}

.chart-tip b {
  font-weight: 800;
  color: var(--ink);
}

.chart-tip span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.chart-tip data {
  font-family: var(--mono);
  color: var(--ink);
}

.chart-tip .under {
  color: var(--error);
}

/* Tabs: invisible over the drawn Forecast tabs; once another tab is picked
   the row is painted white and the tabs are drawn for real. */
.tab {
  top: 15.8%;
  height: 68.4%;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 700 0.972cqw/1 var(--font);
  color: transparent;
  cursor: pointer;
}

.tab:hover,
.tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--indigo);
}

.tabs-note {
  display: none;
}

.tabs[data-drawn] {
  background: var(--white);
}

.tabs[data-drawn] .tab {
  color: var(--ink);
}

.tabs[data-drawn] .tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--white);
}

.tabs[data-drawn] .tabs-note {
  position: absolute;
  top: 50%;
  right: 1.5%;
  display: block;
  translate: 0 -50%;
  font: 500 0.83cqw/1 var(--font);
  color: var(--muted);
}

.chart-view {
  left: 26.806%;
  top: 68.699%;
  width: 70.556%;
  height: 24.853%;
  padding: 0 1.2cqw;
  overflow: hidden;
  background: var(--white);
  font: 500 max(8px, 0.97cqw) / 1.3 var(--font);
  color: var(--body);
}

.chart-view table {
  width: 100%;
  border-collapse: collapse;
}

.chart-view th {
  padding: 0.3cqw 0.6cqw 0.5cqw;
  border-bottom: 2px solid var(--ink);
  font: 600 0.9em/1.2 var(--mono);
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.chart-view td {
  padding: 0.55cqw 0.6cqw;
  border-bottom: 1.5px dashed var(--dim-2);
  font-family: var(--mono);
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}

.chart-view th:first-child,
.chart-view td:first-child {
  font-family: var(--font);
  text-align: left;
}

.chart-view td:first-child b {
  font-weight: 800;
}

.chart-view td small {
  display: block;
  font: 500 0.85em/1.3 var(--font);
  color: var(--muted);
}

.chart-view .under,
.chart-view .out {
  color: var(--error);
}

.chart-view .in {
  color: var(--ok);
}

.chart-view tr[data-off] {
  opacity: 0.35;
}

.chip {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.5em;
  border: 2px solid var(--ink);
  border-radius: 3px;
  vertical-align: -0.1em;
}

.chip--business {
  background: var(--indigo);
}

.chip--household {
  background: var(--white);
}

.chart-view caption {
  caption-side: bottom;
  padding-top: 0.6cqw;
  font-size: 0.85em;
  color: var(--muted);
  text-align: left;
}

@media (prefers-reduced-motion: no-preference) {
  .dim,
  .scope-item {
    transition: background-color 160ms ease;
  }
}

/* Phones: the picture is ~350px wide, so tables drop their secondary
   columns and footnotes; the tooltip shows the values only. */
@media (max-width: 760px) {
  .chart-view {
    padding: 0 6px;
  }

  .chart-view {
    line-height: 1.15;
  }

  .chart-view th,
  .chart-view td {
    padding: 1px 3px;
    border-bottom-width: 1px;
  }

  .chip {
    border-width: 1px;
  }

  .chart-view .wide,
  .chart-view caption,
  .chart-view td small,
  .chart-tip b {
    display: none;
  }

  .chart-tip {
    padding: 3px 6px;
    border-radius: 7px;
    box-shadow: 2px 2px 0 var(--ink);
    font-size: 10px;
  }

  .scope-item {
    padding: 6px 10px 6px 28px;
    font-size: 13px;
  }
}

/* Full-bleed band: land flush under the nav instead of 16px below it. */
#beta {
  scroll-margin-top: -16px;
}

/* Everything drawn tilted straightens on hover: tags, the hero highlight,
   stickers, cards, the receipt, the read-only sticker, the coming-soon panel
   and the logo mark. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tag,
  .hero-hl,
  .sticker,
  .sticker-mini,
  .card,
  .receipt,
  .ro-sticker,
  .soon-card,
  .mark g {
    transition:
      rotate 220ms ease,
      transform 220ms ease;
  }
}

@media (hover: hover) {
  .tag:hover,
  .hero-hl:hover,
  .sticker:hover,
  .sticker-mini:hover,
  .card:hover,
  .receipt:hover,
  .ro-sticker:hover,
  .soon-card:hover {
    rotate: 0deg;
  }

  /* The mark's tilt is an SVG transform attribute; a CSS transform replaces it. */
  .brand:hover .mark g {
    transform: none;
  }
}

.card--yellow {
  background: var(--yellow);
  --tilt: -1deg;
}

.card--pink {
  background: var(--pink);
  --tilt: -0.5deg;
}

.card--lilac {
  background: var(--lilac);
  --tilt: 0.5deg;
}

.card--ink {
  background: var(--ink);
  box-shadow: 6px 6px 0 var(--indigo);
  --tilt: 1deg;
}

.card-title {
  font: 900 24px/30px var(--font);
  letter-spacing: -0.02em;
}

.card-copy {
  font: 400 16px/24px var(--font);
  color: var(--body);
}

.card--ink .card-title {
  color: var(--white);
}

.card--ink .card-copy {
  color: var(--dim);
}

/* Read-only */

.readonly {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 112px;
  background: var(--ink);
  text-align: center;
}

.ro-sticker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  padding: 22px 40px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--yellow);
  box-shadow: 8px 8px 0 var(--indigo);
  rotate: -2deg;
}

.ro-title {
  font: 900 64px/68px var(--font);
  letter-spacing: -0.03em;
  color: var(--ink);
}

.ro-sub {
  font: 700 15px/18px var(--font);
  color: var(--ink);
}

.ro-copy {
  width: 640px;
  font: 400 19px/30px var(--font);
  color: var(--dim);
}

.ro-cards {
  display: flex;
  gap: 24px;
  width: 1216px;
  max-width: 100%;
}

.ro-card {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border: 2px solid var(--rule);
  border-radius: 20px;
  text-align: left;
}

.ro-card h3 {
  font: 800 19px/24px var(--font);
  color: var(--white);
}

.ro-card p {
  font: 400 16px/24px var(--font);
  color: var(--dim-2);
}

@media (hover: hover) {
  .ro-card {
    transition: background-color 180ms ease, border-color 180ms ease;
  }

  .ro-card:hover {
    background: var(--indigo);
    border-color: var(--indigo);
  }

  .ro-card:hover p {
    color: var(--dim);
  }
}

/* Take it for a spin */

.spin {
  display: flex;
  align-items: center;
  gap: 72px;
  padding: 112px;
  background: var(--mist);
  border-bottom: 2px solid var(--ink);
}

.spin-main {
  display: flex;
  flex: 0 0 480px;
  flex-direction: column;
  gap: 24px;
  width: 480px;
}

.spin-main .tag {
  --tilt: -2deg;
}

.spin-title {
  font: 900 56px/58px var(--font);
  letter-spacing: -0.04em;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  list-style: none;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font: 400 18px/27px var(--font);
}

.step strong {
  font-weight: 800;
}

.step-num {
  display: flex;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 99px;
  background: var(--indigo);
  color: var(--white);
  font: 800 14px/18px var(--font);
}

.spin-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-top: 8px;
}

.spin-cta .caption {
  font: 400 15px/22px var(--font);
  color: var(--body);
}

.spin-frame {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.frame {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 10px 10px 0 var(--ink);
}

.frame .window-bar {
  padding: 12px 18px;
}

.frame .window-bar .window-url {
  font-size: 13px;
}

.frame img {
  display: block;
  width: 100%;
  height: auto;
}

.frame-note {
  font: 600 13px/16px var(--font);
  color: var(--indigo);
}

/* Two ways in */

.ways {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 112px;
  background: var(--yellow);
  border-bottom: 2px solid var(--ink);
}

.ways-title {
  font: 900 72px/76px var(--font);
  letter-spacing: -0.045em;
}

.ways-grid {
  display: flex;
  gap: 32px;
  width: 1216px;
  max-width: 100%;
}

.way {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  padding: 36px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 8px 8px 0 var(--ink);
}

.kicker {
  font: 600 13px/16px var(--mono);
  letter-spacing: 0.08em;
  color: var(--indigo);
}

.way-title {
  font: 900 36px/40px var(--font);
  letter-spacing: -0.035em;
}

.way-copy {
  font: 400 17px/27px var(--font);
  color: var(--body);
}

.way-fine {
  font: 500 14px/20px var(--font);
  color: var(--body);
}

.way .btn {
  align-self: flex-start;
}

.way .waitlist-row {
  flex-wrap: wrap;
}

.way .waitlist-row .field {
  flex: 1 1 220px;
  width: auto;
  min-width: 0;
}

/* Live demo card: dashed outline, hazard tape and a stamp while it's built. */
.way--demo {
  position: relative;
  overflow: hidden;
  padding-top: 52px;
  border-style: dashed;
  background: var(--mist);
  box-shadow: none;
}

.tape {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18px;
  border-bottom: 2px solid var(--ink);
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 14px, var(--ink) 14px 28px);
}

.build-stamp {
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 14px;
  border: 2px dashed var(--ink);
  border-radius: 999px;
  font: 600 13px/16px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  rotate: -3deg;
}

.way-actions {
  padding-top: 6px;
}

/* Footer */

/* No top border: the Get in early band above already draws the rule. */
.footer {
  background: var(--white);
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 40px 112px;
}

.footer-title {
  font: 900 28px/34px var(--font);
  letter-spacing: -0.03em;
}

.footer .btn {
  min-height: 54px;
  font: 700 16px/20px var(--font);
}

.footer-back {
  padding: 0 20px;
}

.footer-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 112px 32px;
}

.footer-brand .mark {
  width: 34px;
  height: 34px;
}

.footer-brand .wordmark {
  font: 900 24px/30px var(--font);
}

.footer-tagline {
  font: 400 16px/22px var(--font);
  color: var(--body);
}

.fine {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 112px 28px;
  border-top: 2px solid var(--ink);
  font: 400 13px/20px var(--font);
}

@media (min-width: 761px) and (max-width: 1200px) {
  .footer-top {
    flex-wrap: wrap;
  }
}

/* Full-bleed bands: body is capped at 1440px, so these paint their
   background and rules out to the viewport edges behind the content. */

.nav,
.feature--safe,
.readonly,
.spin,
.ways {
  position: relative;
  isolation: isolate;
  border-block-color: transparent;
  background-clip: padding-box;
}

/* The band keeps its border width for layout but paints it transparent;
   the pseudo-element covers the border box and draws the one visible rule. */
.nav::before,
.feature--safe::before,
.readonly::before,
.spin::before,
.ways::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  border-block-style: inherit;
  border-block-width: inherit;
  border-block-color: var(--ink);
  background: inherit;
}

.nav::before,
.spin::before,
.ways::before {
  bottom: -2px;
}

.feature--safe::before {
  top: -2px;
  bottom: -2px;
}

/* The nav stays on screen; its band (::before) paints the white behind it. */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--white);
}

/* Mobile: the 390 design */

@media (max-width: 760px) {
  html {
    scroll-padding-top: 88px;
  }

  .desk {
    display: none !important;
  }

  .mob {
    display: revert;
  }

  .nav {
    padding: 16px 20px;
  }

  .nav .mark {
    width: 28px;
    height: 28px;
  }

  .nav .wordmark {
    font-size: 20px;
    line-height: 24px;
  }

  .btn--nav {
    padding: 8px 14px;
    font-size: 14px;
    line-height: 18px;
  }

  .btn--nav.btn--solid {
    box-shadow: 3px 3px 0 var(--ink);
  }

  .hero {
    align-items: flex-start;
    gap: 20px;
    padding: 40px 24px;
    text-align: left;
  }

  .hero .tag {
    padding: 5px 12px;
    font-size: 12px;
    line-height: 14px;
  }

  .hero-title {
    align-items: flex-start;
    gap: 4px;
    font-size: 50px;
    line-height: 52px;
  }

  .hero-hl {
    padding: 0 10px;
    border-radius: 12px;
  }

  .lede {
    max-width: none;
    font-size: 17px;
    line-height: 26px;
  }

  .hero-cta {
    align-items: stretch;
    gap: 12px;
    padding-top: 8px;
  }

  .waitlist {
    width: 100%;
    max-width: none;
  }

  .waitlist-row {
    flex-direction: column;
    align-items: stretch;
  }

  .waitlist-row .field,
  .waitlist-row .btn {
    width: 100%;
  }

  .hero-cta .waitlist-row .field,
  .way .waitlist-row .field {
    flex-basis: auto;
  }

  .hero-alt {
    align-items: stretch;
    gap: 10px;
  }

  .hero-alt .btn {
    width: 100%;
  }

  .hero-note {
    text-align: center;
  }

  .shot {
    flex-direction: column;
    gap: 12px;
    padding: 8px 24px 56px;
    overflow: visible;
  }

  .window {
    width: 100%;
    border-radius: 18px;
    box-shadow: 6px 6px 0 var(--ink);
  }

  .window-bar {
    gap: 6px;
    padding: 9px 12px;
  }

  .dot {
    width: 10px;
    height: 10px;
  }

  .shot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .shot-note {
    position: static;
    font-size: 12px;
    line-height: 16px;
  }

  .sticker-mini {
    padding: 4px 10px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--yellow);
    font: 900 12px/14px var(--font);
    rotate: -4deg;
  }

  .intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 48px 24px 16px;
  }

  .intro-title {
    font-size: 40px;
    line-height: 42px;
    letter-spacing: -0.035em;
  }

  .intro-copy {
    width: auto;
    font-size: 16px;
    line-height: 25px;
  }

  .features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 8px 24px 48px;
  }

  .feature {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 22px 20px;
    border: 2px solid var(--ink);
    border-radius: 20px;
    box-shadow: 6px 6px 0 var(--accent);
  }

  .feature--safe {
    padding: 22px 20px;
    border-inline: 0;
    border-radius: 0;
    box-shadow: none;
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    background: var(--indigo);
  }

  .feature-text {
    flex: none;
    width: auto;
    gap: 10px;
  }

  .feature .tag {
    rotate: 0deg;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 14px;
  }

  .feature-title {
    font-size: 26px;
    line-height: 30px;
    letter-spacing: -0.03em;
  }

  .feature-copy {
    font-size: 15px;
    line-height: 23px;
  }

  .feature--safe .feature-title {
    font-size: 30px;
    line-height: 33px;
  }

  .feature--safe .feature-copy {
    font-size: 15px;
    line-height: 23px;
  }

  .more {
    padding: 48px 24px;
    border-top: 2px solid var(--ink);
    background: var(--mist);
  }

  .more-title {
    margin-bottom: 16px;
    font-size: 32px;
    line-height: 36px;
  }

  .more-grid {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .card {
    flex: none;
    width: 100%;
    gap: 4px;
    padding: 16px 18px;
    border-radius: 18px;
    box-shadow: none;
    rotate: 0deg;
  }

  .card-title {
    font-size: 18px;
    line-height: 22px;
  }

  .card-copy {
    font-size: 14px;
    line-height: 21px;
  }

  .readonly {
    align-items: flex-start;
    gap: 20px;
    padding: 56px 24px;
    text-align: left;
  }

  .ro-sticker {
    align-self: flex-start;
    gap: 4px;
    padding: 14px 18px;
    box-shadow: 5px 5px 0 var(--indigo);
  }

  .ro-title {
    font-size: 38px;
    line-height: 40px;
  }

  .ro-sub {
    font-size: 13px;
    line-height: 16px;
  }

  .ro-copy {
    width: auto;
    font-size: 17px;
    line-height: 27px;
  }

  .ro-cards {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .ro-card {
    gap: 6px;
    padding: 18px;
    border-radius: 18px;
  }

  .ro-card h3 {
    font-size: 17px;
    line-height: 22px;
  }

  .ro-card p {
    font-size: 15px;
    line-height: 22px;
  }

  .spin {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 56px 24px;
  }

  .spin-main {
    flex: none;
    width: auto;
    gap: 20px;
  }

  .spin-main .tag {
    rotate: 0deg;
  }

  .spin-title {
    font-size: 44px;
    line-height: 46px;
  }

  .step {
    gap: 12px;
    font-size: 16px;
    line-height: 24px;
  }

  .step-num {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
    font-size: 13px;
    line-height: 16px;
  }

  .spin-cta {
    align-items: stretch;
  }

  .spin-cta .btn {
    width: 100%;
  }

  .spin-cta .caption {
    text-align: center;
  }

  .ways {
    gap: 24px;
    padding: 56px 24px;
  }

  .ways-title {
    font-size: 52px;
    line-height: 54px;
  }

  .ways-grid {
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }

  .way {
    gap: 14px;
    padding: 24px 20px;
    border-radius: 20px;
    box-shadow: 6px 6px 0 var(--ink);
  }

  .way--demo {
    flex: none;
    padding-top: 40px;
    box-shadow: none;
  }

  .way-title {
    font-size: 30px;
    line-height: 34px;
  }

  .way-copy {
    font-size: 16px;
    line-height: 25px;
  }

  .way-fine {
    font-size: 13px;
    line-height: 19px;
  }

  .way .btn {
    width: 100%;
    align-self: stretch;
  }

  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 32px 24px;
  }

  .footer-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 0 24px 32px;
  }

  .fine {
    flex-direction: column;
    gap: 8px;
    padding: 24px 24px 28px;
  }
}

/* v2: Flute tutorial clips that play as you scroll.
   Each .scrub is a track: the feature plus extra scroll room below it. The
   feature sticks centred in the window (main.js sets --pin-top) and the clip
   plays only while it is pinned there. */

.feature--forecast {
  --accent: var(--lilac);
  --tilt: 2deg;
}

/* Scroll room is a pseudo-element, not padding: a sticky child is bounded by
   its parent's content box. */
.scrub::after {
  content: "";
  display: block;
  height: 140vh;
}

.scrub > .feature {
  position: sticky;
  top: var(--pin-top, 96px);
}

.clip {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  perspective: 1400px;
}

.clip-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: #000;
  box-shadow: 8px 8px 0 var(--accent);
}

.clip-caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  font: 600 15px/21px var(--font);
}

.clip-cue {
  min-height: 21px;
}

.clip-note {
  flex-shrink: 0;
  font-weight: 500;
  color: var(--muted);
}

.clip-progress {
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--dim);
}

.clip-progress span {
  display: block;
  width: calc(var(--p, 0) * 100%);
  height: 100%;
  border-radius: 2px;
  background: var(--ink);
}

/* Flute-style entrance: the frame swings in from a tilted, distant pose and
   settles flat as its track enters the viewport. Native scroll-driven CSS;
   browsers without it just show the frame flat. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Blur works like Flute's focus pull: frames are soft while they move
       in or out and sharp once they settle. */
    .scrub .clip-video {
      animation: clip-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
      transform-origin: 50% 100%;
    }

    /* The whole figure leaves, so the caption blurs away with its video. */
    .scrub .clip {
      animation: clip-leave linear forwards;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }

    .scrub .feature-text {
      animation:
        text-settle linear both,
        text-leave linear forwards;
      animation-timeline: view();
      animation-range:
        entry 10% entry 100%,
        exit 0% exit 100%;
    }
  }
}

@keyframes clip-settle {
  from {
    opacity: 0.2;
    filter: blur(16px);
    transform: translateY(160px) rotateX(28deg) rotateY(-14deg) scale(0.82);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

@keyframes clip-leave {
  to {
    opacity: 0.4;
    filter: blur(14px);
    transform: translateY(-80px) rotateX(-18deg) scale(0.9);
  }
}

@keyframes text-settle {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

@keyframes text-leave {
  to {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(-40px);
  }
}

/* Tall windows: side by side leaves white bands above and below the pinned
   block, so stack the text over a full-width clip instead. */
@media (min-width: 761px) and (max-aspect-ratio: 4/3) {
  .scrub > .feature {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding-block: 32px;
  }

  .scrub .feature-text {
    order: -1;
    flex: none;
    width: auto;
    max-width: 760px;
  }

  .scrub .feature-copy.desk + .feature-copy.desk {
    display: none !important;
  }
}

/* Hero shot: as it scrolls toward the middle of the window, the app window
   tips up from a tilted, distant pose and settles flat, then the format
   stickers slap down onto it one after another. Native scroll-driven CSS;
   without support (or with reduced motion) everything is simply in place. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .shot {
      perspective: 1600px;
      view-timeline: --shot block;
    }

    .shot .window {
      transform-origin: 50% 0;
      animation: shot-window linear both;
      animation-timeline: --shot;
      animation-range: entry 0% cover 50%;
    }

    .shot .sticker {
      animation: sticker-slap linear both;
      animation-timeline: --shot;
    }

    .shot .sticker--csv {
      animation-range: cover 24% cover 36%;
    }

    .shot .sticker--pdf {
      animation-range: cover 29% cover 41%;
    }

    .shot .sticker--ofx {
      animation-range: cover 34% cover 46%;
    }
  }
}

@keyframes shot-window {
  from {
    filter: blur(10px);
    transform: translateY(80px) rotateX(32deg) scale(0.86);
    box-shadow: 10px 40px 0 var(--ink);
  }
  to {
    filter: blur(0);
    transform: none;
    box-shadow: 10px 10px 0 var(--ink);
  }
}

@keyframes sticker-slap {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform: translate(-40px, -120px) scale(1.8);
    box-shadow: 18px 22px 0 transparent;
  }
  70% {
    opacity: 1;
    filter: blur(0);
    transform: translate(0, 0) scale(0.94);
    box-shadow: 2px 2px 0 var(--ink);
  }
  100% {
    opacity: 1;
    transform: none;
    box-shadow: 4px 4px 0 var(--ink);
  }
}

/* Reduced motion: no scrubbing or pinning; the clip is an ordinary video with
   controls and its captions. */
@media (prefers-reduced-motion: reduce) {
  .scrub::after {
    display: none;
  }

  .scrub > .feature {
    position: static;
  }

  .clip-progress,
  .clip-cue {
    display: none;
  }
}

@media (max-width: 760px) {
  .scrub::after {
    height: 110vh;
  }

  .clip-video {
    border-radius: 14px;
    box-shadow: 5px 5px 0 var(--accent);
  }

  .clip-caption {
    flex-direction: column;
    gap: 2px;
    padding-top: 10px;
    font-size: 13px;
    line-height: 18px;
  }
}