/* FastPay landing page. Wise design language, Midnight Coral palette.
   scrollcraft.css (the engine's floor) loads first; this file themes it and styles our markup. */

:root {
  --navy: #14213d;
  --navy-2: #0b1530;
  --coral: #ff8a5c;
  --coral-2: #f37446;
  --peach: #ffe7dc;
  --sand: #f7f3ee;
  --card: #efe8df;
  --line: #e3d9cc;
  --ink: #0f1629;
  --body: #3f4250;
  --soft: #5c5e66;
  --on-navy: #b9c3dd;
  --blue: #0b4c72;
  --blue-soft: #dcebf4;

  --sc-canvas: var(--sand);
  --sc-surface: var(--card);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--soft);
  --sc-accent: var(--coral);
  --sc-accent-ink: var(--navy);
  --sc-font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --sc-font-text: "Inter", system-ui, sans-serif;
  --sc-shadow-color: 224 45% 14%;
  --sc-maxw: 84rem;

  --bar-h: 76px;
  --r-card: 28px;
  --r-panel: 40px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  /* the app's logo helper reads these names */
  --forest: var(--navy);
  --lime: var(--coral);
}
.wordmark { font-family: var(--sc-font-display); font-weight: 900; letter-spacing: -0.03em; color: var(--navy); }
.foot .wordmark { color: #fff; }

body { background: var(--sand); color: var(--body); }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
::selection { background: var(--coral); color: var(--navy); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nums { font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
svg.icon { width: 22px; height: 22px; flex: none; }
:where(.coins-cut, .flow__coins, .flow__plane, .sig__pen) { height: auto; }

/* ---------- Type ---------- */
.display {
  font-family: var(--sc-font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.d-xl { font-size: clamp(3.1rem, 6.4vw, 7rem); }
.d-lg { font-size: clamp(2.6rem, 5.2vw, 5.6rem); }
.d-md { font-size: clamp(2.1rem, 3.6vw, 3.6rem); }
.lede { font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem); line-height: 1.55; color: var(--body); max-width: 34rem; margin: 0; text-wrap: pretty; }

/* ---------- Buttons (Wise pills) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 999px; border: 0;
  font: 600 16px/1 var(--sc-font-text); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color 160ms var(--ease), transform 120ms var(--ease), color 160ms var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--coral); color: var(--navy); }
.btn--primary:hover { background: var(--coral-2); }
.btn--soft { background: var(--peach); color: var(--navy); }
.btn--soft:hover { background: #ffd9c7; }
.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover { background: var(--navy-2); }
.btn--line { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.btn--line:hover { background: rgba(20, 33, 61, 0.06); }
.btn--sm { min-height: 42px; padding: 0 20px; font-size: 15px; }
.btn--block { width: 100%; }
.btn svg.icon { width: 20px; height: 20px; }

/* ---------- Top bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--bar-h);
  display: flex; align-items: center; gap: 32px; padding-inline: var(--sc-gutter);
  background: var(--sand); box-shadow: 0 1px 0 transparent;
  transition: transform 320ms var(--ease), box-shadow 200ms var(--ease), background-color 300ms var(--ease);
}
.bar.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.bar.is-hidden { transform: translateY(-100%); }
.bar__brand { display: inline-flex; text-decoration: none; color: var(--navy); }
.bar__nav { display: flex; gap: 6px; }
.bar__nav a, .bar__link { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; padding: 10px 14px; border-radius: 999px; transition: background-color 160ms var(--ease); }
.bar__nav a:hover, .bar__link:hover { background: rgba(20, 33, 61, 0.07); }
.bar__end { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---------- Phone frame ---------- */
.phone {
  --s: 0.72;
  position: relative;
  width: calc(414px * var(--s)); height: calc(868px * var(--s));
  padding: calc(12px * var(--s));
  border-radius: calc(62px * var(--s));
  background: var(--navy-2);
  box-shadow: inset 0 0 0 calc(2px * var(--s)) #2a3656,
    0 4px 8px hsl(var(--sc-shadow-color) / 0.12), 0 30px 60px -18px hsl(var(--sc-shadow-color) / 0.38), 0 70px 120px -40px hsl(var(--sc-shadow-color) / 0.3);
}
.phone__view {
  position: relative; width: calc(390px * var(--s)); height: calc(844px * var(--s));
  border-radius: calc(50px * var(--s)); overflow: hidden; overflow: clip; background: var(--sand);
  isolation: isolate;
}
.phone__screen { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform: scale(var(--s)); transform-origin: 0 0; }
.phone__island { position: absolute; z-index: 5; left: 50%; top: calc(11px * var(--s)); width: calc(122px * var(--s)); height: calc(36px * var(--s)); translate: -50% 0; border-radius: 999px; background: #05070d; }
fp-screen { display: block; width: 390px; height: 844px; }

/* ---------- Hero ---------- */
.hero { padding-top: calc(var(--bar-h) + clamp(1rem, 4vh, 3rem)); position: relative; overflow: clip; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; min-height: calc(100svh - var(--bar-h) - 150px); }
.hero__copy { display: flex; flex-direction: column; gap: 28px; padding-block: 24px; }
.hero__title .ln { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero__title .ln > span { display: block; transform: translateY(105%); animation: lineUp 900ms var(--ease) forwards; }
.hero__title .ln:nth-child(2) > span { animation-delay: 70ms; }
.hero__title .ln:nth-child(3) > span { animation-delay: 140ms; }
.hero__title .ln:nth-child(4) > span { animation-delay: 210ms; color: var(--coral-2); }
@keyframes lineUp { to { transform: none; } }
.hero__lede, .hero__ctas { opacity: 0; animation: fadeUp 700ms var(--ease) 380ms forwards; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; animation-delay: 480ms; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.scene { position: relative; height: clamp(560px, 72vh, 700px); }
.layer { position: absolute; will-change: transform; }
.layer--back { inset: 0; }
.disc { position: absolute; right: -6%; top: 6%; width: 72%; aspect-ratio: 1; border-radius: 50%; background: var(--peach); }
.disc::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 138, 92, 0.35); }
.coins-cut { position: absolute; right: -4%; bottom: 0; width: 34%; height: auto; max-width: none; rotate: -8deg; }
.layer--phone { right: 2%; top: 0; }
.layer--phone .phone { --s: 0.72; rotate: 3deg; }
@media (max-height: 820px) { .layer--phone .phone { --s: 0.62; } }
@media (max-height: 700px) { .layer--phone .phone { --s: 0.54; } }
.layer--card { left: 0; bottom: 2%; z-index: 3; }
.layer--front { left: 4%; top: -2%; width: 30%; z-index: 4; mix-blend-mode: multiply; pointer-events: none; }
.plane-vid { width: 100%; aspect-ratio: 1; object-fit: cover; }
.layer--front.is-sending .plane-vid { animation: flyOff 1.4s var(--ease) both; }
@keyframes flyOff {
  0% { transform: none; opacity: 1; }
  45% { transform: translate(180%, -140%) rotate(-12deg) scale(0.6); opacity: 0; }
  46% { transform: translate(-60%, 40%) scale(0.8); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* Quick invoice card: the Wise calculator, for invoices */
.qi {
  width: min(410px, 100%); background: #fff; border-radius: var(--r-card); padding: 22px 22px 20px;
  box-shadow: 0 2px 4px hsl(var(--sc-shadow-color) / 0.06), 0 24px 60px -20px hsl(var(--sc-shadow-color) / 0.32);
  display: flex; flex-direction: column; gap: 14px; color: var(--ink);
}
.qi__top { display: flex; align-items: center; justify-content: space-between; }
.qi__num { font-size: 13px; font-weight: 600; color: var(--soft); background: var(--sand); padding: 7px 12px; border-radius: 999px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--card); color: var(--body); transition: background-color 240ms var(--ease), color 240ms var(--ease); }
.pill[data-s="sent"] { background: var(--sand); color: var(--navy); box-shadow: inset 0 0 0 1px var(--line); }
.pill[data-s="opened"] { background: var(--blue-soft); color: var(--blue); }
.pill[data-s="paid"] { background: var(--navy); color: #fff; }
.pill svg.icon { width: 14px; height: 14px; }
.qi__label { font-size: 13px; font-weight: 500; color: var(--soft); }
.qi__client { display: flex; align-items: center; gap: 10px; background: var(--sand); border-radius: 999px; padding: 6px 14px 6px 6px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--peach); color: var(--navy); font-size: 13px; font-weight: 700; display: grid; place-items: center; flex: none; }
.qi__select { appearance: none; border: 0; background: transparent; font-weight: 600; font-size: 16px; color: var(--ink); flex: 1; padding: 6px 0; cursor: pointer; }
.qi__client svg.icon { width: 18px; height: 18px; color: var(--soft); pointer-events: none; }
.qi__calc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qi__field { display: flex; flex-direction: column; gap: 6px; }
.qi__field label { font-size: 13px; color: var(--soft); font-weight: 500; }
.stepper, .money { display: flex; align-items: center; background: var(--sand); border-radius: 12px; height: 46px; padding: 0 4px; }
.stepper button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #fff; color: var(--navy); font-size: 18px; font-weight: 600; cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line); transition: transform 120ms var(--ease); }
.stepper button:active { transform: scale(0.92); }
.stepper input, .money input { width: 100%; min-width: 0; border: 0; background: transparent; text-align: center; font: 600 17px var(--sc-font-text); color: var(--ink); font-variant-numeric: tabular-nums; }
.money { padding: 0 12px; }
.money span { color: var(--soft); font-weight: 600; }
.money input { text-align: left; padding-left: 4px; }
.qi__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 4px; }
.qi__total span { font-size: 14px; color: var(--soft); font-weight: 500; }
.qi__amount { font-family: var(--sc-font-display); font-weight: 900; font-size: clamp(2.4rem, 3.4vw, 3rem); letter-spacing: -0.03em; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1; }
.qi__rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.qi__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.qi__row + .qi__row { border-top: 1px solid var(--line); }
.ring { width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; flex: none; color: var(--navy); }
.ring svg.icon { width: 18px; height: 18px; }
.qi__row small { display: block; font-size: 12px; color: var(--soft); }
.qi__row b { font-size: 14px; font-weight: 600; color: var(--ink); }
.switch { margin-left: auto; position: relative; width: 48px; height: 28px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background-color 200ms var(--ease); pointer-events: none; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 22, 41, 0.25); transition: transform 220ms var(--ease); }
.switch input:checked + span { background: var(--navy); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 3px; }
.qi .btn { min-height: 54px; }
.qi.is-paid .qi__amount { animation: pop 600ms var(--ease); }
@keyframes pop { 30% { transform: scale(1.06); color: var(--coral-2); } }

/* Trust strip */
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: 36px 64px; border-top: 1px solid var(--line); margin-top: 24px; }
.trust__item { display: flex; flex-direction: column; gap: 10px; }
.trust__item .ring { width: 44px; height: 44px; }
.trust__item h3 { margin: 6px 0 0; font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.trust__item p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--soft); max-width: 30ch; }

/* ---------- Band: every way to get paid ---------- */
.band { padding-block: 24px 88px; overflow: clip; }
.band__row { display: flex; align-items: center; height: 168px; }
.band__lead { flex: none; width: 34vw; height: 100%; background: var(--coral); border-radius: 0 999px 999px 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 14px; position: relative; z-index: 2; }
.band__arrow { width: 140px; height: 140px; border-radius: 50%; background: var(--navy); color: var(--coral); display: grid; place-items: center; }
.band__arrow svg { width: 56px; height: 56px; }
.band__track { flex: 1; min-width: 0; overflow: hidden; height: 100%; margin-left: 14px; }
.band__list { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; width: max-content; height: 100%; will-change: transform; }
.token { width: 168px; height: 168px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; flex: none; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.token svg.icon { width: 40px; height: 40px; stroke-width: 1.6; }
.token--navy { background: var(--navy); color: #fff; }
.token--navy svg { color: var(--coral); }
.token--peach { background: var(--peach); color: var(--navy); }
.token--white { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px var(--line); }
.token--card { background: var(--card); color: var(--navy); }
.token--ink { background: var(--ink); color: #fff; }
.band__note { margin-top: 28px; display: flex; justify-content: flex-end; }
.band__note p { margin: 0; max-width: 34rem; font-size: 17px; line-height: 1.5; color: var(--body); text-align: right; }
.band__note b { color: var(--ink); }

/* ---------- Peak: draft to paid ---------- */
.flow__stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.8fr); align-items: center; gap: clamp(1.5rem, 4vw, 5rem); padding: calc(var(--bar-h) + 8px) var(--sc-gutter) 24px; background: var(--sand); }
.flow__left { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.flow__head { display: flex; flex-direction: column; gap: 12px; }
.flow__kicker { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.flow__inv { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.flow__inv span { font-size: 14px; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.flow__words { position: relative; height: clamp(15rem, 34vh, 21rem); }
.flow__step { position: absolute; inset: 0 auto auto 0; display: flex; flex-direction: column; gap: 20px; }
.flow__word { font-size: clamp(4rem, 9vw, 9.5rem); line-height: 0.84; }
.flow__step:last-child .flow__word { color: var(--coral-2); }
.flow__copy { margin: 0; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.3rem); line-height: 1.5; color: var(--body); max-width: 26rem; }

.flow__device { position: relative; display: grid; place-items: center; }
.flow__device .phone { --s: var(--fit, 0.78); rotate: calc((var(--p, 0) - 0.5) * 5deg); }
.flow__screen { position: absolute; inset: 0; opacity: 0; transition: opacity 360ms var(--ease), transform 480ms var(--ease); transform: translateY(12px) scale(0.985); }
.flow[data-step="0"] .flow__screen[data-i="0"], .flow[data-step="1"] .flow__screen[data-i="1"],
.flow[data-step="2"] .flow__screen[data-i="2"], .flow[data-step="3"] .flow__screen[data-i="3"] { opacity: 1; transform: none; }
.notif {
  position: absolute; z-index: 6; left: 10px; right: 10px; top: 52px; padding: 13px 14px; border-radius: 22px;
  background: rgba(255, 255, 255, 0.94); box-shadow: 0 10px 30px -8px rgba(15, 22, 41, 0.35), 0 0 0 1px rgba(15, 22, 41, 0.05);
  display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; font-size: 15px; line-height: 1.3; color: var(--ink);
  transform: translateY(-140%); opacity: 0; transition: transform 520ms var(--ease), opacity 300ms var(--ease);
}
.notif b { display: flex; justify-content: space-between; font-size: 13px; color: var(--soft); font-weight: 600; margin-bottom: 2px; }
.notif b i { font-style: normal; font-weight: 500; }
.flow[data-step="2"] .notif--open, .flow[data-step="3"] .notif--paid { transform: none; opacity: 1; }
.stamp {
  position: absolute; z-index: 7; right: -34px; bottom: 120px; width: 150px; height: 150px; border-radius: 50%;
  background: var(--coral); color: var(--navy); display: grid; place-items: center; text-align: center;
  font: 900 34px/0.9 var(--sc-font-display); text-transform: uppercase; letter-spacing: -0.02em;
  box-shadow: inset 0 0 0 6px var(--coral), inset 0 0 0 8px var(--navy), 0 18px 40px -12px rgba(15, 22, 41, 0.45);
  transform: scale(1.8) rotate(-30deg); opacity: 0; transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 180ms var(--ease);
}
.stamp small { display: block; font: 700 11px/1 var(--sc-font-text); letter-spacing: 0.1em; margin-top: 6px; }
.flow[data-step="3"] .stamp { transform: rotate(-12deg); opacity: 1; }
.flow__coins { position: absolute; z-index: -1; width: 78%; left: -58%; bottom: 2%; opacity: 0; transform: translateY(60px) rotate(-10deg); transition: opacity 400ms var(--ease), transform 700ms var(--ease); }
.flow[data-step="3"] .flow__coins { opacity: 1; transform: none; }
.flow__plane { position: absolute; z-index: 8; width: 46%; left: 20%; top: 40%; pointer-events: none; opacity: var(--plane-o, 0);
  transform: translate(calc(var(--plane-t, 0) * 210%), calc(var(--plane-t, 0) * var(--plane-t, 0) * -260%)) rotate(calc(var(--plane-t, 0) * -18deg)) scale(calc(1 - var(--plane-t, 0) * 0.45)); }

.flow__track { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; display: flex; flex-direction: column; gap: clamp(1.8rem, 6vh, 3.4rem); justify-self: start; }
.flow__track::before, .flow__track::after { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--line); }
.flow__track::after { background: var(--navy); transform-origin: top; transform: scaleY(var(--p, 0)); }
.flow__track li { position: relative; display: flex; flex-direction: column; gap: 2px; }
.flow__track li::before { content: ""; position: absolute; left: -28px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--sand); box-shadow: inset 0 0 0 2px var(--line); transition: background-color 240ms var(--ease), box-shadow 240ms var(--ease); z-index: 1; }
.flow__track li.is-on::before { background: var(--navy); box-shadow: inset 0 0 0 2px var(--navy), 0 0 0 5px var(--sand); }
.flow__track li:last-child.is-on::before { background: var(--coral); box-shadow: inset 0 0 0 2px var(--navy), 0 0 0 5px var(--sand); }
.flow__track b { font-size: 17px; color: var(--ink); }
.flow__track span { font-size: 14px; color: var(--soft); }
.flow__track li:not(.is-on) b { color: var(--soft); }

/* ---------- Features bento ---------- */
.features { padding-block: clamp(5rem, 10vw, 9rem) clamp(4rem, 8vw, 7rem); }
.features__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.tile { position: relative; border-radius: var(--r-card); padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 14px; overflow: hidden; min-height: 380px; background: #fff; color: var(--ink); }
.tile h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 0.92; letter-spacing: -0.015em; }
.tile p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--body); max-width: 34ch; }
.tile__art { margin-top: auto; position: relative; }
.t-7 { grid-column: span 7; } .t-5 { grid-column: span 5; } .t-6 { grid-column: span 6; }
.tile--peach { background: var(--peach); }
.tile--navy { background: var(--navy); color: #fff; }
.tile--navy h3 { color: #fff; }
.tile--navy p { color: var(--on-navy); }
.tile--card { background: var(--card); }

/* templates tile */
.tpl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; }
.doc { --c: var(--navy); background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px rgba(15, 22, 41, 0.25); height: 300px; padding: 0; overflow: hidden; display: grid; grid-template-rows: auto 1fr; font-size: 9px; color: var(--body); transition: box-shadow 300ms var(--ease); }
.doc__hd { padding: 16px 18px; display: flex; justify-content: space-between; align-items: flex-start; transition: background-color 400ms var(--ease), color 400ms var(--ease); }
.doc__hd strong { font: 900 20px/1 var(--sc-font-display); text-transform: uppercase; letter-spacing: -0.01em; }
.doc__hd em { font-style: normal; font-weight: 600; display: block; }
.doc__bd { padding: 14px 18px; display: flex; flex-direction: column; gap: 7px; }
.doc__line { height: 7px; border-radius: 4px; background: var(--card); }
.doc__line--h { height: 16px; background: var(--c); border-radius: 3px; transition: background-color 400ms var(--ease); }
.doc__tot { margin-top: auto; align-self: flex-end; width: 46%; height: 24px; border-radius: 4px; background: var(--c); transition: background-color 400ms var(--ease); }
.doc[data-t="modern"] .doc__hd { background: var(--c); color: #fff; }
.doc[data-t="classic"] .doc__hd { border-top: 6px solid var(--c); color: var(--ink); }
.doc[data-t="bold"] .doc__hd { background: var(--c); color: #fff; padding-block: 34px; }
.doc[data-t="minimal"] .doc__hd { color: var(--c); border-bottom: 1px solid var(--line); }
.doc[data-t="corporate"] { grid-template-columns: 26% 1fr; grid-template-rows: 1fr; }
.doc[data-t="corporate"] .doc__hd { background: var(--c); color: #fff; flex-direction: column; gap: 8px; }
.doc[data-t="elegant"] .doc__hd { flex-direction: column; align-items: center; gap: 6px; color: var(--ink); box-shadow: inset 0 -3px 0 var(--c); }
.swatches { display: grid; grid-template-columns: repeat(2, 26px); gap: 8px; }
.swatches button { width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(15, 22, 41, 0.12); transition: transform 140ms var(--ease), box-shadow 140ms var(--ease); }
.swatches button:hover { transform: scale(1.12); }
.swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); }
.tpl__name { display: inline-flex; align-self: flex-start; font-size: 13px; font-weight: 600; background: var(--sand); padding: 7px 12px; border-radius: 999px; }

/* estimate flip tile */
.flip { perspective: 1200px; height: 230px; cursor: pointer; border: 0; background: none; padding: 0; width: 100%; text-align: left; font: inherit; }
.flip__inner { display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 800ms var(--ease); }
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.flip__face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 18px; background: #fff; padding: 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 18px 40px -18px rgba(15, 22, 41, 0.3); color: var(--ink); }
.flip__face--back { transform: rotateY(180deg); background: var(--navy); color: #fff; }
.flip__face .k, .flip__face .amt { display: block; }
.flip__face .k { font: 900 22px/1 var(--sc-font-display); text-transform: uppercase; }
.flip__face .row { display: flex; justify-content: space-between; font-size: 14px; }
.flip__face .amt { font: 900 34px/1 var(--sc-font-display); letter-spacing: -0.03em; margin-top: auto; font-variant-numeric: tabular-nums; }
.flip__face .tag { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--peach); color: var(--navy); }
.flip__face--back .tag { background: var(--coral); }
.flip__hint { font-size: 13px; font-weight: 600; color: var(--navy); display: inline-flex; gap: 6px; align-items: center; }

/* signature tile */
.sig { display: grid; grid-template-columns: 1fr 42%; align-items: end; gap: 8px; }
.sig__pad { background: var(--sand); border-radius: 16px; height: 170px; position: relative; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; }
.sig__pad svg { position: absolute; inset: 10px 14px 34px; width: calc(100% - 28px); height: calc(100% - 44px); }
.sig__path { fill: none; stroke: var(--navy); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.tile.sc-in .sig__path { transition: stroke-dashoffset 2.2s cubic-bezier(0.65, 0, 0.35, 1) 400ms; stroke-dashoffset: 0; }
.sig__pad span { border-top: 1px dashed var(--pebble, #8a8a90); padding-top: 6px; font-size: 12px; color: var(--soft); }
.sig__pen { width: 100%; mix-blend-mode: multiply; }

/* reminders tile */
.rem { position: relative; padding-top: 34px; }
.rem__line { height: 2px; background: rgba(185, 195, 221, 0.3); border-radius: 2px; position: relative; }
.rem__line i { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--coral); transform-origin: left; transform: scaleX(0); transition: transform 1.8s var(--ease) 300ms; border-radius: 2px; }
.tile.sc-in .rem__line i { transform: scaleX(1); }
.rem__marks { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: -8px; }
.rem__mark { display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.rem__mark:nth-child(2) { align-items: center; text-align: center; }
.rem__mark:nth-child(3) { align-items: flex-end; text-align: right; }
.tile.sc-in .rem__mark { opacity: 1; transform: none; }
.tile.sc-in .rem__mark:nth-child(1) { transition-delay: 500ms; }
.tile.sc-in .rem__mark:nth-child(2) { transition-delay: 1100ms; }
.tile.sc-in .rem__mark:nth-child(3) { transition-delay: 1700ms; }
.rem__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px var(--navy); }
.rem__chip { background: rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 10px 12px; font-size: 13px; line-height: 1.35; color: #fff; max-width: 15rem; }
.rem__chip small { display: block; color: var(--on-navy); font-size: 12px; }

/* clients tile */
.clients { display: flex; flex-direction: column; gap: 8px; }
.client { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px; padding: 10px 14px 10px 10px; box-shadow: 0 1px 0 var(--line); opacity: 0; transform: translateX(-16px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.tile.sc-in .client { opacity: 1; transform: none; }
.tile.sc-in .client:nth-child(2) { transition-delay: 120ms; }
.tile.sc-in .client:nth-child(3) { transition-delay: 240ms; }
.client b { font-size: 15px; display: block; }
.client small { font-size: 13px; color: var(--soft); }
.client .owe { margin-left: auto; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; }
.client .owe small { display: block; font-weight: 500; }

/* expenses + reports tile */
.money-art { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 16px; align-items: end; }
.receipt { position: relative; background: #fff; border-radius: 10px 10px 0 0; padding: 16px 14px 22px; height: 210px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; box-shadow: 0 16px 30px -18px rgba(15, 22, 41, 0.35);
  -webkit-mask: linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat, radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) bottom/12px 8px repeat-x;
  mask: linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat, radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) bottom/12px 8px repeat-x; }
.receipt b { font-size: 13px; }
.receipt .doc__line { background: var(--card); }
.receipt__scan { position: absolute; left: 0; right: 0; top: 0; height: 36px; background: linear-gradient(to bottom, transparent, rgba(255, 138, 92, 0.35) 80%, var(--coral) 100%); animation: scan 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; }
@keyframes scan { from { transform: translateY(-36px); } to { transform: translateY(190px); } }
.receipt__tag { position: absolute; right: 10px; bottom: 16px; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: var(--navy); color: #fff; }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 210px; padding: 12px 12px 0; background: #fff; border-radius: 16px; }
.bars div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bars i { display: block; width: 100%; border-radius: 8px 8px 3px 3px; background: var(--navy); height: var(--h); transform: scaleY(0); transform-origin: bottom; transition: transform 900ms var(--ease); }
.bars div:last-child i { background: var(--coral); }
.tile.sc-in .bars i { transform: none; }
.bars div:nth-child(2) i { transition-delay: 80ms; } .bars div:nth-child(3) i { transition-delay: 160ms; }
.bars div:nth-child(4) i { transition-delay: 240ms; } .bars div:nth-child(5) i { transition-delay: 320ms; } .bars div:nth-child(6) i { transition-delay: 400ms; }
.bars span { font-size: 11px; color: var(--soft); padding-bottom: 8px; }

/* ---------- Rail: who it's for ---------- */
.rail-stage { display: flex; align-items: center; background: var(--sand); padding-top: var(--bar-h); }
.rail { gap: 16px; padding-inline: var(--sc-gutter); align-items: stretch; }
.rail__lead { flex: none; width: min(34rem, 80vw); display: flex; flex-direction: column; justify-content: center; gap: 24px; padding-right: 3rem; }
.person { flex: none; width: clamp(290px, 26vw, 380px); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; background: var(--navy); color: #fff; }
.person__media { position: relative; aspect-ratio: 4 / 4.4; overflow: hidden; }
.person__media :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; transform: scale(1.06); transition: transform 900ms var(--ease); }
.person:hover .person__media :is(img, video) { transform: scale(1.1); }
.person__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.person__body h3 { margin: 0; font: 900 26px/0.95 var(--sc-font-display); text-transform: uppercase; letter-spacing: -0.015em; }
.person__body p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--on-navy); }
.person--peach { background: var(--peach); color: var(--ink); }
.person--peach p { color: var(--body); }
.person--card { background: #fff; color: var(--ink); }
.person--card p { color: var(--body); }
.rail__end { flex: none; width: min(26rem, 78vw); display: flex; flex-direction: column; justify-content: center; gap: 20px; padding-left: 2rem; }
.rail__end p { margin: 0; font-size: 20px; line-height: 1.45; color: var(--ink); }

/* ---------- Navy panel (scrub) ---------- */
.panel-stage { padding: calc(var(--bar-h) + 8px) var(--sc-gutter) 24px; display: grid; background: var(--sand); }
.panel {
  position: relative; border-radius: var(--r-panel); overflow: hidden; background: var(--navy); isolation: isolate;
  clip-path: inset(calc((1 - min(var(--sc-p, 0) * 3, 1)) * 7%) calc((1 - min(var(--sc-p, 0) * 3, 1)) * 12%) round var(--r-panel));
}
.panel .sc-stage__poster, .panel video[data-sc-scrub] { object-position: 100% 50%; }
.panel__copy { position: absolute; z-index: 20; left: clamp(28px, 5vw, 80px); top: 50%; translate: 0 -50%; max-width: min(40rem, 58%); display: flex; flex-direction: column; gap: 28px; }
.panel__copy .display { color: var(--coral); }
.panel__copy .lede { color: var(--on-navy); }
.panel__facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.panel__facts li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 15px; font-weight: 600; }
.panel__facts svg.icon { width: 18px; height: 18px; color: var(--coral); }
.panel__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--navy) 0%, var(--navy) 30%, rgba(20, 33, 61, 0.82) 46%, transparent 64%); }
@media (max-width: 1200px) { .panel__copy { max-width: 50%; } .panel .sc-stage__poster, .panel video[data-sc-scrub] { object-position: 72% 50%; transform: translateX(14%); } }

/* ---------- Try it live ---------- */
.try { padding-block: clamp(5rem, 10vw, 8rem); }
.try__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.try__copy { display: flex; flex-direction: column; gap: 26px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 0; cursor: pointer; font: 600 15px var(--sc-font-text); color: var(--navy); background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: 11px 18px; border-radius: 999px; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.chip:hover { background: var(--card); }
.chip[aria-pressed="true"] { background: var(--navy); color: #fff; box-shadow: none; }
.try__device { position: relative; }
.try__device .phone { --s: 0.8; }
.try__device iframe { width: 390px; height: 844px; border: 0; display: block; background: var(--sand); }
.try__note { font-size: 14px; color: var(--soft); margin: 0; }
.try__badge { position: absolute; left: -72px; top: -78px; z-index: 2; width: 128px; height: 128px; border-radius: 50%; background: var(--coral); color: var(--navy); display: grid; place-items: center; text-align: center; font: 900 20px/0.95 var(--sc-font-display); text-transform: uppercase; animation: spin 18s linear infinite; }
.try__badge span { animation: spin 18s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Pricing ---------- */
.pricing { padding-block: clamp(4rem, 8vw, 7rem); background: #fff; }
.pricing__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--card); gap: 2px; }
.seg button { border: 0; background: transparent; font: 600 15px var(--sc-font-text); color: var(--body); min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(15, 22, 41, 0.12); }
.seg em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--coral-2); margin-left: 6px; }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.plan { border-radius: var(--r-card); background: var(--sand); padding: 28px 24px; display: flex; flex-direction: column; gap: 18px; }
.plan h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.plan h3 span { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--coral); color: var(--navy); }
.price { display: flex; align-items: baseline; gap: 6px; min-height: 64px; }
.price b { font: 900 clamp(2.6rem, 3.4vw, 3.4rem)/1 var(--sc-font-display); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; display: inline-block; }
.price b.is-rolling { animation: roll 420ms var(--ease); }
@keyframes roll { 0% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(-40%); opacity: 0; } 55% { transform: translateY(40%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.price small { font-size: 15px; color: var(--soft); }
.plan__limit { font-size: 15px; font-weight: 600; color: var(--ink); margin: -8px 0 0; }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.4; color: var(--body); flex: 1; }
.plan li { display: flex; gap: 10px; }
.plan li svg.icon { width: 18px; height: 18px; color: var(--navy); margin-top: 1px; }
.plan--pop { background: var(--navy); }
.plan--pop h3, .plan--pop .price b, .plan--pop .plan__limit { color: #fff; }
.plan--pop .price small, .plan--pop ul { color: var(--on-navy); }
.plan--pop li svg.icon { color: var(--coral); }
.plan .btn { width: 100%; }
.plan--pop .btn--line { box-shadow: none; }
.pricing__note { margin: 20px 0 0; font-size: 14px; color: var(--soft); }

/* ---------- Close: get the app ---------- */
.close { position: relative; overflow: clip; padding: clamp(5rem, 11vw, 9rem) var(--sc-gutter); }
.close__bg { position: absolute; inset: -12% 0; background: url("../media/texture.webp") center / cover; will-change: transform; }
.close__card { position: relative; max-width: 68rem; margin-inline: auto; background: #fff; border-radius: var(--r-panel); padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 5rem); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 30px; box-shadow: 0 40px 80px -30px rgba(15, 22, 41, 0.4); }
.close__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.qr { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.qr__code { width: 76px; height: 76px; display: grid; grid-template-columns: repeat(11, 1fr); gap: 1px; padding: 5px; background: #fff; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.qr__code i { background: var(--navy); border-radius: 1px; }
.qr__code i.o { background: transparent; }
.qr p { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); text-align: left; line-height: 1.3; }
.close .btn--primary { min-height: 60px; font-size: 17px; padding: 0 34px; }

.foot { background: var(--navy); color: var(--on-navy); padding: 56px var(--sc-gutter) 40px; }
.foot__grid { max-width: var(--sc-maxw); margin-inline: auto; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot h4 { margin: 0 0 14px; color: #fff; font-size: 15px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.foot a { color: var(--on-navy); text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot__brand { display: flex; flex-direction: column; gap: 16px; color: #fff; }
.foot__brand p { margin: 0; font-size: 14px; line-height: 1.5; max-width: 30ch; }
.foot__small { max-width: var(--sc-maxw); margin: 40px auto 0; padding-top: 24px; border-top: 1px solid rgba(185, 195, 221, 0.2); font-size: 13px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .bar__nav { display: none; }
  .flow__stage { grid-template-columns: minmax(0, 1fr) auto; }
  .flow__track { display: none; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-7, .t-5, .t-6 { grid-column: span 12; }
  .tile { min-height: 0; }
}
@media (max-width: 860px) {
  :root { --bar-h: 64px; }
  .bar__link { display: none; }
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { padding-block: 8px 0; }
  .scene { height: 760px; max-width: 480px; width: 100%; margin-inline: auto; }
  .layer--phone { right: 0; top: 8px; }
  .layer--phone .phone { --s: 0.62; }
  .layer--card { bottom: 0; }
  .layer--front { width: 38%; top: 40px; }
  .coins-cut { display: none; }
  .qi { width: min(360px, 88vw); }
  .qi__row--pay { display: none; }
  .trust { grid-template-columns: 1fr; gap: 22px; padding-block: 32px 48px; }
  .band__row { height: 120px; }
  .band__lead { width: 30vw; }
  .band__arrow { width: 96px; height: 96px; }
  .band__arrow svg { width: 40px; height: 40px; }
  .token { width: 120px; height: 120px; font-size: 13px; gap: 6px; }
  .token svg.icon { width: 30px; height: 30px; }
  .band__note { justify-content: flex-start; }
  .band__note p { text-align: left; }
  .flow__stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 12px; padding-top: calc(var(--bar-h) + 4px); padding-bottom: 12px; }
  .flow__left { gap: 10px; }
  .flow__head { display: none; }
  .flow__words { height: 8.6rem; }
  .flow__step { gap: 8px; }
  .flow__word { font-size: 3.4rem; }
  .flow__copy { font-size: 15px; }
  .stamp { width: 110px; height: 110px; font-size: 26px; right: -22px; bottom: 80px; }
  .features__head { grid-template-columns: 1fr; }
  .tpl { grid-template-columns: 1fr; }
  .swatches { grid-template-columns: repeat(10, minmax(0, 26px)); gap: 6px; }
  .swatches button { width: 100%; height: auto; aspect-ratio: 1; }
  .sig { grid-template-columns: 1fr; }
  .sig__pen { width: 55%; justify-self: end; margin-top: -40px; }
  .money-art { grid-template-columns: 1fr; }
  .rem__marks { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
  .rem__mark:nth-child(n) { align-items: flex-start; text-align: left; flex-direction: row; }
  .rem__line { display: none; }
  .panel__copy { left: 24px; right: 24px; top: auto; bottom: 28px; translate: none; max-width: none; gap: 18px; }
  .panel__scrim { background: linear-gradient(0deg, var(--navy) 0%, var(--navy) 54%, transparent 62%); }
  .panel__facts li:nth-child(n+3) { display: none; }
  .panel .sc-stage__poster, .panel video[data-sc-scrub] { height: 46%; bottom: auto; object-position: 84% 50%; transform: none; }
  .panel__copy { max-width: none; }
  .try__grid { grid-template-columns: 1fr; justify-items: center; }
  .try__device .phone { --s: 0.72; }
  .try__badge { left: -40px; top: -62px; width: 96px; height: 96px; font-size: 15px; }
  .try__device { margin-top: 60px; }
  .plans { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title .ln > span, .hero__lede, .hero__ctas { animation: none; transform: none; opacity: 1; }
  .receipt__scan, .try__badge, .try__badge span { animation: none; }
  .flow__plane { display: none; }
}