:root {
  /* From the logo: navy ground, blue bars (accent), green wordmark (--green, --word-*). */
  --bg: #f5f7fb; --bg-2: #edf1f8; --surface: #ffffff; --surface-2: #f8fafd;
  --text: #111a33; --muted: #5b6680; --border: #e1e6f0;
  --accent: #2f66e0; --accent-2: #5fb4ee; --accent-soft: #dde8fc; --accent-ink: #ffffff;
  /* Filled buttons: the bars' blue, top to bottom, under white text. */
  --fill-1: #2f66e0; --fill-2: #3e7ee5;
  --green: #2f8a45; --word-1: #2f7a3d; --word-2: #5fa96a;
  --coral: #ea580c; --indigo: #4f46e5; --pink: #db2777; --sky: #0284c7; --lime: #65a30d;
  --owed: #067647; --owes: #b42318;
  --glow: rgba(56, 112, 242, .2);
  --shadow: 0 1px 2px rgba(17, 26, 51, .06), 0 12px 32px -12px rgba(17, 26, 51, .18);
  --shadow-lg: 0 30px 80px -24px rgba(18, 30, 58, .35);
  --radius: 20px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0f1c; --bg-2: #0d1322; --surface: #131a2c; --surface-2: #182036;
    --text: #e8ecf4; --muted: #97a1b6; --border: #242d43;
    --accent: #74abf7; --accent-2: #8cc8f7; --accent-soft: #1a2846; --accent-ink: #ffffff;
    --fill-1: #4a90f2; --fill-2: #3266e8;
    --green: #8fd19b; --word-1: #4b9657; --word-2: #c5e6c9;
    --coral: #fb923c; --indigo: #a5b4fc; --pink: #f472b6; --sky: #38bdf8; --lime: #a3e635;
    --owed: #75e0a7; --owes: #fda29b;
    --glow: rgba(95, 168, 245, .18);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 30px 80px -24px rgba(0, 0, 0, .75);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a0f1c; --bg-2: #0d1322; --surface: #131a2c; --surface-2: #182036;
  --text: #e8ecf4; --muted: #97a1b6; --border: #242d43;
  --accent: #74abf7; --accent-2: #8cc8f7; --accent-soft: #1a2846; --accent-ink: #ffffff;
  --fill-1: #4a90f2; --fill-2: #3266e8;
  --green: #8fd19b; --word-1: #4b9657; --word-2: #c5e6c9;
  --coral: #fb923c; --indigo: #a5b4fc; --pink: #f472b6; --sky: #38bdf8; --lime: #a3e635;
  --owed: #75e0a7; --owes: #fda29b;
  --glow: rgba(95, 168, 245, .18);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 30px 80px -24px rgba(0, 0, 0, .75);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: clip; /* clip, not hidden: hidden would make the body a scroll box and stop the header sticking */
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; }
.wrap { width: min(1180px, 100%); margin: 0 auto; padding-inline: 20px; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- background ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora span { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(80px); opacity: .55; animation: drift 26s ease-in-out infinite alternate; }
.aurora span:nth-child(1) { background: radial-gradient(circle, var(--glow), transparent 65%); top: -18vmax; left: -10vmax; }
.aurora span:nth-child(2) { background: radial-gradient(circle, color-mix(in srgb, var(--indigo) 22%, transparent), transparent 65%); top: 10vmax; right: -18vmax; animation-duration: 32s; }
.aurora span:nth-child(3) { background: radial-gradient(circle, color-mix(in srgb, var(--coral) 14%, transparent), transparent 65%); bottom: -24vmax; left: 20vmax; animation-duration: 38s; }
@keyframes drift { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); } }
.grid-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); opacity: .55; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: background .3s, box-shadow .3s, border-color .3s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-color: var(--border); }
.nav .wrap { display: flex; align-items: center; gap: 20px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 750; text-decoration: none; letter-spacing: -0.01em; }
.brand img { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 6px 18px -6px var(--accent); }
/* The logo's wordmark: its shape is a mask, so the green follows the theme (deeper on light pages). */
.wordmark { display: block; height: 34px; aspect-ratio: 1070 / 324; flex: none;
  background: linear-gradient(90deg, var(--word-1), var(--word-2));
  -webkit-mask: url(/site/logo-wordmark.svg) center / contain no-repeat; mask: url(/site/logo-wordmark.svg) center / contain no-repeat; }
.links { display: flex; gap: 4px; margin-left: auto; }
.links a { text-decoration: none; color: var(--muted); font-size: .94rem; padding: 8px 12px; border-radius: 999px; transition: color .2s, background .2s; }
.links a:hover { color: var(--text); background: var(--surface); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.theme-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: transform .2s; }
.theme-btn:hover { transform: rotate(-12deg); }
.theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: block; } :root[data-theme="dark"] .theme-btn .moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-btn .sun { display: block; } :root:not([data-theme="light"]) .theme-btn .moon { display: none; } }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 14px; font-weight: 650; text-decoration: none; border: 1px solid transparent; transition: transform .2s, box-shadow .2s, background .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn.primary { background: linear-gradient(135deg, var(--fill-1), var(--fill-2)); color: var(--accent-ink); box-shadow: 0 10px 28px -10px var(--accent); }
.btn.primary:hover { box-shadow: 0 16px 36px -12px var(--accent); }
.btn.ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn.small { padding: 9px 14px; font-size: .92rem; border-radius: 12px; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 72px 0 40px; }
.hero .wrap { display: grid; grid-template-columns: 1.02fr 1fr; gap: 48px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: .85rem; color: var(--muted); box-shadow: var(--shadow); }
.eyebrow b { white-space: nowrap; background: var(--accent-soft); color: var(--accent); padding: 2px 10px; border-radius: 999px; font-weight: 650; }
.hero h1 { font-size: clamp(2.5rem, 5vw, 4.1rem); font-weight: 820; margin: 22px 0 18px; }
.grad { background: linear-gradient(100deg, var(--accent) 10%, var(--accent-2) 45%, var(--green) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: shine 8s ease-in-out infinite alternate; }
@keyframes shine { to { background-position: 100% 0; } }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--muted); max-width: 34em; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; color: var(--muted); font-size: .92rem; }
.trust span { display: inline-flex; align-items: center; gap: 7px; }
.trust svg { color: var(--accent); width: 18px; height: 18px; }

.stage { position: relative; height: 560px; perspective: 1400px; }
.browser { position: absolute; right: -10px; top: 70px; width: 600px; border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: rotateY(-14deg) rotateX(6deg); transform-origin: right center; animation: floatB 9s ease-in-out infinite; }
.browser .bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.browser .bar i { width: 11px; height: 11px; border-radius: 50%; background: #f87171; } .browser .bar i:nth-child(2) { background: #fbbf24; } .browser .bar i:nth-child(3) { background: #34d399; }
.browser .bar span { margin-left: 12px; flex: 1; height: 22px; border-radius: 8px; background: var(--bg); font-size: .72rem; color: var(--muted); display: flex; align-items: center; padding-left: 10px; }
.browser picture { display: block; }
.browser img { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 900; object-fit: cover; object-position: top; }
@keyframes floatB { 50% { transform: rotateY(-14deg) rotateX(6deg) translateY(-10px); } }

.phone { position: relative; width: 270px; aspect-ratio: 390 / 844; border-radius: 42px; padding: 10px; background: linear-gradient(145deg, #2a312e, #0c0f0e); box-shadow: var(--shadow-lg), inset 0 0 0 2px #3c4441; }
.phone::before { content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; background: #050706; border-radius: 999px; z-index: 2; }
/* The screen starts below the island, so it never covers the app; the strip's color follows the screenshot's theme. */
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: 33px; overflow: hidden; padding-top: 38px; background: #ffffff; }
.phone .screen:has(img[src*="-dark"]) { background: #1b201e; }
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.stage .phone { position: absolute; left: 0; top: 40px; z-index: 3; animation: floatP 7s ease-in-out infinite; }
@keyframes floatP { 50% { transform: translateY(-14px) rotate(-1deg); } }

.chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: .86rem; white-space: nowrap; animation: bob 6s ease-in-out infinite; }
.chip b { display: block; font-size: .95rem; }
.chip small { color: var(--muted); }
.chip .dot { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; }
.chip .dot svg { width: 19px; height: 19px; }
.chip.c1 { top: 18px; left: 230px; animation-delay: -1s; }
.chip.c2 { bottom: 96px; right: 10px; animation-delay: -3s; }
.chip.c3 { bottom: 4px; left: 150px; animation-delay: -4.5s; }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* ---------- marquee ---------- */
.marquee { margin: 34px 0 10px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee .track { display: flex; gap: 12px; width: max-content; animation: scroll 46s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: .92rem; white-space: nowrap; }
.pill svg { width: 17px; height: 17px; color: var(--accent); }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
section { position: relative; padding: 96px 0; }
.kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.head { max-width: 720px; margin-bottom: 48px; }
.head h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; margin: 14px 0 14px; }
.head p { color: var(--muted); font-size: 1.1rem; }
.center { text-align: center; margin-inline: auto; }
.center .kicker::after { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }

/* bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--glow), transparent 45%); }
.card:hover::after { opacity: 1; }
.card h3 { font-size: 1.16rem; margin: 16px 0 8px; letter-spacing: -0.01em; }
.card p { color: var(--muted); font-size: .97rem; }
.ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent); }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.card .art { margin-top: 18px; }

/* mini art inside cards */
.bars { display: flex; align-items: flex-end; gap: 7px; height: 92px; }
.bars i { flex: 1; border-radius: 7px 7px 3px 3px; background: color-mix(in srgb, var(--accent) 35%, transparent); transform-origin: bottom; transform: scaleY(0); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.bars i.hi { background: var(--accent); }
.in .bars i { transform: scaleY(1); }
.donut { width: 112px; height: 112px; }
.donut circle { fill: none; stroke-width: 15; transform: rotate(-90deg); transform-origin: center; stroke-dasharray: 0 400; transition: stroke-dasharray 1.4s cubic-bezier(.2,.8,.2,1); }
.donut-row { display: flex; align-items: center; gap: 18px; }
.legend { display: grid; gap: 6px; font-size: .86rem; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 8px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 5px 11px; border-radius: 999px; font-size: .8rem; font-weight: 650; }
.t-due { background: #fef0c7; color: #93370d; } .t-over { background: #fee4e2; color: #b42318; } .t-paid { background: #dcfae6; color: #067647; } .t-open { background: #e0eaff; color: #3538cd; }
:root[data-theme="dark"] .t-due { background: #4e1d09; color: #fec84b; } :root[data-theme="dark"] .t-over { background: #55160c; color: #fda29b; } :root[data-theme="dark"] .t-paid { background: #053321; color: #75e0a7; } :root[data-theme="dark"] .t-open { background: #1f235b; color: #a4bcfd; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .t-due { background: #4e1d09; color: #fec84b; } :root:not([data-theme="light"]) .t-over { background: #55160c; color: #fda29b; } :root:not([data-theme="light"]) .t-paid { background: #053321; color: #75e0a7; } :root:not([data-theme="light"]) .t-open { background: #1f235b; color: #a4bcfd; } }
.avatars { display: flex; }
.avatars i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 750; font-size: .9rem; border: 3px solid var(--surface); margin-left: -10px; }
.avatars i:first-child { margin-left: 0; }
.rows { display: grid; gap: 10px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: .9rem; }
.row b { font-variant-numeric: tabular-nums; }
.pos { color: var(--owed); } .neg { color: var(--owes); }

/* ---------- showcase ---------- */
.show { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.show.flip .copy { order: 2; }
.show .copy h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 800; margin: 14px 0 16px; }
.show .copy > p { color: var(--muted); font-size: 1.08rem; }
.ticks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.ticks li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.ticks li svg { width: 28px; height: 28px; padding: 5px; border-radius: 9px; color: var(--accent); background: var(--accent-soft); stroke-width: 2.4; }
.ticks b { display: block; }
.ticks span { color: var(--muted); font-size: .95rem; }
.duo { position: relative; display: flex; justify-content: center; align-items: center; min-height: 600px; }
.duo .phone { width: 260px; }
.duo .phone.back { position: absolute; transform: translateX(150px) rotate(6deg) scale(.9); opacity: .96; z-index: 1; }
.duo .phone.front { transform: translateX(-95px) rotate(-3deg); z-index: 2; }
.duo .glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 65%); filter: blur(20px); }
.duo:hover .phone.back { transform: translateX(165px) rotate(8deg) scale(.9); }
.duo:hover .phone.front { transform: translateX(-108px) rotate(-5deg); }
.duo .phone { transition: transform .6s cubic-bezier(.2,.8,.2,1); }

/* simplify-debts animation */
.debts { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-top: 28px; }
.debts-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.debts-top b { font-size: .95rem; }
.switch { position: relative; width: 52px; height: 30px; border-radius: 999px; border: 0; background: var(--border); cursor: pointer; transition: background .3s; }
.switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.switch[aria-checked="true"] { background: var(--fill-1); }
.switch[aria-checked="true"]::after { transform: translateX(22px); }
.debts svg { width: 100%; height: auto; }
.debts .node circle { fill: var(--surface-2); stroke: var(--border); stroke-width: 2; }
.debts .node text { font: 700 15px system-ui, sans-serif; fill: var(--text); text-anchor: middle; dominant-baseline: central; }
.debts .edge { fill: none; stroke: var(--owes); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 7 8; animation: flow 1.2s linear infinite; transition: opacity .5s; }
.debts .edge.simple { stroke: var(--accent); }
.debts .lbl { font: 650 12.5px system-ui, sans-serif; fill: var(--muted); text-anchor: middle; transition: opacity .5s; }
.debts [data-mode] { opacity: 0; }
.debts.raw [data-mode="raw"], .debts.simple [data-mode="simple"] { opacity: 1; }
@keyframes flow { to { stroke-dashoffset: -30; } }
.debts .note { font-size: .88rem; color: var(--muted); }

/* tour: a tab bar with a sliding pill and a progress bar, a glowing phone that tilts towards the pointer, screens that
   slide in from the side they come from, and callouts that fly in towards the phone. --tour-c: the tab's colour. */
#tour { --tour-c: var(--accent); --tour-ms: 4800ms; overflow: clip; }
.tour-tabs-wrap { display: flex; justify-content: center; margin-bottom: 44px; }
.tour-tabs { position: relative; display: flex; gap: 4px; max-width: 100%; padding: 6px; border-radius: 999px; overflow-x: auto; scrollbar-width: none;
  background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.tour-tabs::-webkit-scrollbar { display: none; }
.tour-tabs button { position: relative; z-index: 1; flex: none; font: inherit; font-size: .92rem; font-weight: 600; padding: 9px 16px; border: 0; border-radius: 999px;
  background: none; color: var(--muted); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; overflow: hidden; transition: color .35s; }
.tour-tabs button svg { width: 17px; height: 17px; transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.tour-tabs button:hover { color: var(--text); }
.tour-tabs button[aria-selected="true"] { color: var(--accent-ink); }
.tour-tabs button[aria-selected="true"] svg { transform: scale(1.15) rotate(-6deg); }
.tour-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tab-pill { position: absolute; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 999px; background: linear-gradient(120deg, var(--fill-1), var(--fill-2));
  box-shadow: 0 10px 24px -10px var(--accent); transition: transform .5s cubic-bezier(.3,1.25,.5,1), width .5s cubic-bezier(.3,1.25,.5,1); }
/* While it plays: a thin bar along the bottom of the chosen tab fills up until the next screen. */
.tour-tabs button .tab-bar { position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.85);
  transform: scaleX(0); transform-origin: 0 50%; opacity: 0; }
.tour-tabs button.run .tab-bar { opacity: 1; animation: tabBar var(--tour-ms) linear forwards; }
@keyframes tabBar { to { transform: scaleX(1); } }

.tour { display: grid; grid-template-columns: 1fr 340px 1fr; gap: 56px; align-items: center; }
.tour-device { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 22px; perspective: 1400px; }
.tour-float { animation: floatP 7s ease-in-out infinite; }
.tour .phone { width: 300px; margin: 0 auto; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; touch-action: pan-y; }
.tour-device.tilting .phone { transition: transform .12s linear; }
/* A sheen that follows the tilt. */
.tour .phone .screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.22), transparent 45%); opacity: 0; transition: opacity .4s; }
.tour-device.tilting .phone .screen::after { opacity: 1; }
.tour .phone img { transition: opacity .38s ease, transform .5s cubic-bezier(.2,.8,.2,1), filter .38s ease; }
.tour .phone img.out-left { opacity: 0; transform: translateX(-28px) scale(.97); filter: blur(6px); }
.tour .phone img.out-right { opacity: 0; transform: translateX(28px) scale(.97); filter: blur(6px); }
.tour .phone img.no-anim { transition: none; }
/* Light behind the phone, in the tab's colour, drifting slowly. */
.tour-glow { position: absolute; top: -6%; bottom: 2%; left: 50%; width: 600px; margin-left: -300px; z-index: -1; pointer-events: none; }
.tour-glow i { position: absolute; width: 52%; aspect-ratio: 1; border-radius: 50%; filter: blur(64px); opacity: .45; transition: background-color .8s; }
.tour-glow i:nth-child(1) { left: 6%; top: 8%; background: var(--tour-c); animation: drift1 11s ease-in-out infinite; }
.tour-glow i:nth-child(2) { right: 4%; top: 30%; background: var(--green); opacity: .32; animation: drift2 13s ease-in-out infinite; }
.tour-glow i:nth-child(3) { left: 24%; bottom: 0; background: var(--accent-2); opacity: .3; animation: drift1 15s ease-in-out infinite reverse; }
@keyframes drift1 { 50% { transform: translate(14%, 10%) scale(1.12); } }
@keyframes drift2 { 50% { transform: translate(-16%, -8%) scale(.9); } }
.tour-ring { position: absolute; top: 50%; left: 50%; width: 470px; aspect-ratio: 1; margin: -260px 0 0 -235px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 70%, color-mix(in srgb, var(--tour-c) 70%, transparent), transparent);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: spin 9s linear infinite; opacity: .8; }
@keyframes spin { to { transform: rotate(1turn); } }
.tour-caption { margin: 0; display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow); font-size: .9rem; }
.tour-caption span { padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--tour-c) 16%, transparent); color: var(--tour-c);
  font-weight: 700; font-variant-numeric: tabular-nums; font-size: .8rem; transition: color .5s, background-color .5s; }
/* Callouts: fly in from their side, one after the other, with a line to the phone. */
/* Above the phone's glow, which reaches under them. */
.tour .side { position: relative; z-index: 1; display: grid; gap: 18px; }
.tour .side .row { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; background: var(--surface);
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.9,.25,1.15), box-shadow .3s, border-color .3s; transition-delay: var(--d, 0s); }
.tour .side .row:hover { border-color: color-mix(in srgb, var(--tour-c) 45%, var(--border)); box-shadow: 0 16px 34px -18px var(--tour-c); }
.tour .side .row .dot { grid-row: span 2; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; font-size: .82rem;
  color: var(--tour-c); background: color-mix(in srgb, var(--tour-c) 14%, transparent); transition: color .5s, background-color .5s; }
.tour .side .row b { font-size: .98rem; }
.tour .side .row span { color: var(--muted); font-size: .9rem; }
.tour .side.left .row.hide { opacity: 0; transform: translateX(-34px); }
.tour .side.right .row.hide { opacity: 0; transform: translateX(34px); }
.tour .side .row::after { content: ""; position: absolute; top: 50%; width: 44px; height: 2px; border-radius: 2px; opacity: .55; }
.tour .side.left .row::after { left: 100%; background: linear-gradient(90deg, var(--tour-c), transparent); }
.tour .side.right .row::after { right: 100%; background: linear-gradient(270deg, var(--tour-c), transparent); }
.tour .side .row { --d: .08s; } .tour .side .row:nth-child(2) { --d: .17s; } .tour .side.right .row { --d: .14s; } .tour .side.right .row:nth-child(2) { --d: .23s; }
.tour .side.left .row:nth-child(2) { margin-right: 26px; } .tour .side.right .row:nth-child(2) { margin-left: 26px; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.step { position: relative; padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; top: 18px; right: 22px; font-size: 3rem; font-weight: 850; letter-spacing: -0.04em; color: color-mix(in srgb, var(--accent) 16%, transparent); }
.step h3 { font-size: 1.2rem; margin: 14px 0 8px; }
.step p { color: var(--muted); }

/* security */
.sec { background: linear-gradient(180deg, transparent, var(--bg-2) 18%, var(--bg-2) 82%, transparent); }
.shield { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.sec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sec-grid .card { padding: 20px; }
.sec-grid .card h3 { font-size: 1.02rem; margin: 12px 0 6px; }
.sec-grid .card p { font-size: .9rem; }
.lock { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; margin: 0 auto; }
.lock .ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, transparent); animation: spin 40s linear infinite; }
.lock .ring:nth-child(2) { inset: 13%; animation-duration: 28s; animation-direction: reverse; border-style: solid; border-color: var(--border); }
.lock .ring:nth-child(3) { inset: 26%; animation-duration: 18s; }
.lock .core { position: absolute; inset: 34%; border-radius: 30%; display: grid; place-items: center; background: linear-gradient(145deg, var(--fill-1), var(--fill-2)); box-shadow: 0 30px 70px -20px var(--fill-1); color: var(--accent-ink); }
.lock .core svg { width: 46%; height: 46%; stroke-width: 1.6; }
.lock .orb { position: absolute; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--accent); }
.lock .orb svg { width: 21px; height: 21px; }
.lock .o1 { top: 4%; left: 44%; } .lock .o2 { top: 44%; right: 1%; } .lock .o3 { bottom: 4%; left: 44%; } .lock .o4 { top: 44%; left: 1%; }
.lock .orbit { position: absolute; inset: 0; animation: spin 30s linear infinite; }
.lock .orbit .orb { animation: spin 30s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

/* stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 56px; }
.stat { padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); text-align: center; }
.stat b { display: block; font-size: 2.2rem; font-weight: 820; letter-spacing: -0.03em; background: linear-gradient(120deg, var(--accent), var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: var(--muted); font-size: .92rem; }

/* faq */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 4px 20px; transition: border-color .3s; }
.faq details[open] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 650; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--accent); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding: 0 0 18px; }

/* final cta */
.final { position: relative; overflow: hidden; border-radius: 32px; padding: 64px 40px; text-align: center; color: #fff;
  background: radial-gradient(800px 300px at 20% 0%, rgba(255,255,255,.18), transparent 60%), linear-gradient(135deg, #3870f2, #1f43a8 45%, #121e3a); box-shadow: var(--shadow-lg); }
.final h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 820; }
.final p { opacity: .85; font-size: 1.1rem; margin: 14px auto 28px; max-width: 34em; }
.final .btn.primary { background: #fff; color: #2f66e0; box-shadow: 0 14px 36px -12px rgba(0,0,0,.5); }
.final .btn.ghost { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.final .coins i { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6, transparent 40%), linear-gradient(145deg, #fcd34d, #d97706); box-shadow: inset 0 -4px 0 #b4530966, 0 10px 30px -10px #0006; display: grid; place-items: center; font-style: normal; font-weight: 850; color: #92400e; font-size: 1.5rem; animation: coin 7s ease-in-out infinite; opacity: .9; }
.final .coins i:nth-child(1) { bottom: 14%; left: 6%; } .final .coins i:nth-child(2) { bottom: 14%; right: 9%; width: 46px; height: 46px; font-size: 1.1rem; animation-delay: -2s; } .final .coins i:nth-child(3) { top: 12%; right: 18%; width: 34px; height: 34px; font-size: .9rem; animation-delay: -4s; }
@keyframes coin { 50% { transform: translateY(-14px) rotate(14deg); } }
/* The banner's extras. It's the same deep blue in both themes: text on it is white, the entries popping in use the
   page's surface. Everything moves only once it's in view (.in, from the reveal), and not at all with reduced motion. */
.final { text-align: left; padding: 60px 56px; isolation: isolate; }
.final-body { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.final-copy, .final-demo { min-width: 0; }
.final h2 { margin: 18px 0 0; }
.final p { margin: 14px 0 22px; }
.final .cta { justify-content: flex-start; margin-top: 26px; }
.final-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.final-bg i { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .5; }
.final-bg i:nth-child(1) { left: -10%; top: -30%; background: #5fb4ee; animation: drift1 12s ease-in-out infinite; }
.final-bg i:nth-child(2) { right: -8%; bottom: -40%; background: #2f8a45; opacity: .4; animation: drift2 14s ease-in-out infinite; }
.final-bg i:nth-child(3) { left: 40%; top: 30%; width: 30%; background: #a5b4fc; opacity: .28; animation: drift1 16s ease-in-out infinite reverse; }
.final-grid { position: absolute; inset: 0; z-index: -1; opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px); background-size: 38px 38px;
  -webkit-mask: radial-gradient(ellipse at 70% 50%, #000 0%, transparent 70%); mask: radial-gradient(ellipse at 70% 50%, #000 0%, transparent 70%); }
.final .coins i { z-index: 1; }
.final .coins i:nth-child(1) { bottom: 7%; left: 44%; } .final .coins i:nth-child(2) { bottom: auto; top: 46%; right: 2%; } .final .coins i:nth-child(3) { top: 8%; right: 42%; }
/* Twinkles. */
.sparks i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(255,255,255,.7); opacity: 0; animation: twinkle 3.2s ease-in-out infinite; }
.sparks i:nth-child(1) { top: 14%; left: 30%; } .sparks i:nth-child(2) { top: 70%; left: 46%; animation-delay: -.8s; }
.sparks i:nth-child(3) { top: 22%; right: 6%; animation-delay: -1.6s; } .sparks i:nth-child(4) { bottom: 12%; right: 30%; animation-delay: -2.2s; }
.sparks i:nth-child(5) { top: 50%; left: 4%; animation-delay: -1.1s; width: 4px; height: 4px; } .sparks i:nth-child(6) { top: 8%; left: 60%; animation-delay: -2.7s; width: 4px; height: 4px; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: .9; transform: scale(1); } }
/* Currency signs rising slowly through the banner. */
.rise i { position: absolute; bottom: -40px; font-style: normal; font-weight: 800; color: rgba(255,255,255,.14); font-size: 1.6rem; animation: rise 14s linear infinite; }
.rise i:nth-child(1) { left: 8%; } .rise i:nth-child(2) { left: 22%; animation-delay: -3s; font-size: 1.1rem; }
.rise i:nth-child(3) { left: 38%; animation-delay: -7s; } .rise i:nth-child(4) { left: 55%; animation-delay: -10s; font-size: 1.2rem; }
.rise i:nth-child(5) { left: 70%; animation-delay: -5s; font-size: 2rem; } .rise i:nth-child(6) { left: 84%; animation-delay: -12s; }
.rise i:nth-child(7) { left: 94%; animation-delay: -1.5s; font-size: 1rem; }
@keyframes rise { from { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(-460px) rotate(25deg); opacity: 0; } }
/* "Free · ready in a minute" with a pulsing dot. */
.final-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px; font-size: .86rem; font-weight: 650;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #75e0a7; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #75e0a7; animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2.8); opacity: 0; } }
/* "this month": a shimmering gradient, underlined with a stroke that draws itself. */
.final-mark { position: relative; white-space: nowrap; background: linear-gradient(90deg, #bfe3ff, #ffffff, #c5e6c9, #bfe3ff); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
@keyframes shimmer { to { background-position: -300% 0; } }
.final-mark svg { position: absolute; left: 0; right: 0; bottom: -10px; width: 100%; height: 14px; overflow: visible; }
.final-mark path { fill: none; stroke: #75e0a7; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 230; stroke-dashoffset: 230; transition: stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1) .5s; }
.final.in .final-mark path { stroke-dashoffset: 0; }
/* Three steps, ticked one after the other. */
.final-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .95rem; }
.final-steps li { display: inline-flex; align-items: center; gap: 9px; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.final-steps .tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #75e0a7; color: #0b3b25; transform: scale(0); transition: transform .45s cubic-bezier(.3,1.7,.5,1); }
.final-steps .tick svg { width: 13px; height: 13px; stroke-width: 3; }
.final.in .final-steps li { opacity: 1; transform: none; }
.final.in .final-steps .tick { transform: scale(1); }
.final-steps li:nth-child(1), .final-steps li:nth-child(1) .tick { transition-delay: .7s; }
.final-steps li:nth-child(2), .final-steps li:nth-child(2) .tick { transition-delay: 1s; }
.final-steps li:nth-child(3), .final-steps li:nth-child(3) .tick { transition-delay: 1.3s; }
/* A light sweeping across the main button now and then. */
.btn.shine { position: relative; overflow: hidden; }
.btn.shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(47,102,224,.25), transparent); animation: sweep 3.6s ease-in-out infinite 1.5s; }
@keyframes sweep { 0% { left: -60%; } 40%, 100% { left: 130%; } }
.final .btn.primary:hover svg { transform: translateX(3px); } .final .btn svg { transition: transform .25s; }
/* The month card. */
.final-demo { position: relative; min-height: 330px; }
.budget { position: relative; z-index: 1; margin: 0 26px; padding: 20px 22px 44px; border-radius: 22px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(12px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); animation: floatP 8s ease-in-out infinite; }
.budget-head { display: flex; justify-content: space-between; align-items: center; font-size: .92rem; }
.chip-ok { padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: rgba(117,224,167,.2); color: #9ff0c4; }
.budget-main { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 20px; margin: 16px 0 14px; position: relative; }
.budget-ring { width: 112px; height: 112px; transform: rotate(-90deg); }
.budget-ring circle { fill: none; stroke-width: 11; }
.budget-ring .track { stroke: rgba(255,255,255,.14); }
.budget-ring .fill { stroke: #75e0a7; stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 314.16; transition: stroke-dashoffset 1.6s cubic-bezier(.3,0,.2,1) .3s; }
.final.in .budget-ring .fill { stroke-dashoffset: 100.5; } /* 68% */
.ring-text { position: absolute; left: 0; top: 0; width: 112px; height: 112px; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.ring-text b { font-size: 1.5rem; font-weight: 800; } .ring-text span { font-size: .72rem; opacity: .75; }
.budget-nums { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: baseline; font-variant-numeric: tabular-nums; }
.budget-nums span { font-size: .8rem; opacity: .75; } .budget-nums b { font-size: 1.25rem; font-weight: 800; }
.final .ok { color: #9ff0c4; }
.bars-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 64px; }
.bars-mini i { display: block; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #8cc8f7, rgba(140,200,247,.35)); height: 100%; transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .8s cubic-bezier(.3,1.3,.5,1); }
.final.in .bars-mini i { transform: scaleY(var(--h)); }
.bars-mini i:nth-child(1) { --h: .45; transition-delay: .5s; } .bars-mini i:nth-child(2) { --h: .7; transition-delay: .58s; }
.bars-mini i:nth-child(3) { --h: .35; transition-delay: .66s; } .bars-mini i:nth-child(4) { --h: .9; transition-delay: .74s; }
.bars-mini i:nth-child(5) { --h: .6; transition-delay: .82s; } .bars-mini i:nth-child(6) { --h: 1; transition-delay: .9s; background: linear-gradient(180deg, #75e0a7, rgba(117,224,167,.35)); }
.bars-mini i:nth-child(7) { --h: .25; transition-delay: .98s; }
.bars-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; text-align: center; font-size: .7rem; opacity: .6; margin-top: 6px; }
/* Entries popping in around the card, then bobbing. */
.pop { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 16px; background: var(--surface); color: var(--text);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.55); font-size: .84rem; opacity: 0; transform: translateY(14px) scale(.9); transition: opacity .5s, transform .6s cubic-bezier(.3,1.5,.5,1); }
.pop b { display: block; font-size: .86rem; } .pop small { display: block; color: var(--muted); font-size: .72rem; }
.pop em { font-style: normal; font-weight: 800; margin-left: 6px; color: var(--owes); font-variant-numeric: tabular-nums; }
.pop em.ok { color: var(--owed); }
.pop-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.pop-ico svg { width: 17px; height: 17px; }
.final.in .pop { opacity: 1; transform: none; }
.pop-1 { top: -22px; right: -6px; transition-delay: 1.1s; } .pop-2 { bottom: -22px; left: 0; transition-delay: 1.4s; } .pop-3 { bottom: -22px; right: 0; transition-delay: 1.7s; }
.final.in .pop-1 { animation: bob 5s ease-in-out 1.8s infinite; } .final.in .pop-2 { animation: bob 6s ease-in-out 2.1s infinite; } .final.in .pop-3 { animation: bob 5.5s ease-in-out 2.4s infinite; }
@keyframes bob { 50% { transform: translateY(-7px); } }

footer { padding: 46px 0 calc(46px + env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: .92rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; border-top: 1px solid var(--border); padding-top: 28px; }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
footer a { text-decoration: none; } footer a:hover { color: var(--text); }

/* reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--accent), var(--green)); }

/* ---------- responsive ---------- */
@media (max-width: 1060px) {
  .links { display: none; }
  .hero .wrap, .show, .shield { grid-template-columns: 1fr; }
  .show.flip .copy { order: 0; }
  .stage { height: 600px; max-width: 640px; margin: 0 auto; width: 100%; }
  .browser { right: 0; width: 88%; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .span-2, .span-3, .span-4 { grid-column: span 1; }
  .bento .wide { grid-column: span 2; }
  .tour { grid-template-columns: 1fr; gap: 28px; }
  .tour-device { order: 1; } .tour .side.left { order: 2; } .tour .side.right { order: 3; }
  .tour .side { grid-template-columns: 1fr 1fr; }
  .tour .side .row::after { display: none; }
  .tour .side.left .row:nth-child(2), .tour .side.right .row:nth-child(2) { margin: 0; }
  .tour .side.left .row.hide, .tour .side.right .row.hide { transform: translateY(16px); }
  .steps { grid-template-columns: 1fr; }
  .final-body { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .final-demo { max-width: 460px; width: 100%; margin: 0 auto; }
  .final .coins i:nth-child(1) { display: none; }
}
@media (max-width: 640px) {
  section { padding: 72px 0; }
  .hero { padding-top: 40px; }
  .nav [data-auth="signup"] { display: none; }
  .stage { height: 520px; }
  .browser { display: none; }
  .stage .phone { left: 50%; top: 40px; margin-left: -125px; width: 250px; }
  .chip.c1 { left: 0; top: 0; } .chip.c2 { right: 0; bottom: 120px; } .chip.c3 { left: 0; bottom: 10px; }
  .bento { grid-template-columns: 1fr; }
  .bento .wide { grid-column: span 1; }
  .duo { min-height: 520px; }
  .duo .phone { width: 220px; }
  .duo .phone.back { transform: translateX(78px) rotate(6deg) scale(.86); }
  .duo .phone.front { transform: translateX(-52px) rotate(-3deg); }
  .duo:hover .phone.back { transform: translateX(80px) rotate(8deg) scale(.86); } .duo:hover .phone.front { transform: translateX(-48px) rotate(-4deg); }
  .tour .side { grid-template-columns: 1fr; }
  .tour .phone { width: 250px; }
  .tour-ring { width: 380px; margin: -210px 0 0 -190px; }
  .tour-glow { width: 420px; margin-left: -210px; }
  .tour-tabs-wrap { margin: 0 -16px 32px; padding: 0 16px; }
  .tour-tabs button { padding: 8px 13px; font-size: .88rem; }
  .stat { padding: 16px 8px; } .stat b { font-size: 1.7rem; } .stat span { font-size: .82rem; }
  .sec-grid { grid-template-columns: 1fr; }
  .final { padding: 44px 20px 52px; border-radius: 24px; }
  .final-demo { min-height: 0; padding: 58px 0 52px; }
  .budget { margin: 0; padding: 16px 16px 20px; }
  .final .coins { display: none; }
  .budget-main { grid-template-columns: 96px 1fr; gap: 14px; }
  .budget-ring, .ring-text { width: 96px; height: 96px; }
  .budget-nums { gap: 4px 10px; } .budget-nums b { font-size: 1.1rem; } .ring-text b { font-size: 1.3rem; }
  .pop-1 { top: 0; right: -4px; } .pop-2 { display: none; } .pop-3 { bottom: 0; right: -4px; }
  .final .cta .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .bars i { transform: none; }
  .final-mark path { stroke-dashoffset: 0; } .final-steps li { opacity: 1; transform: none; } .final-steps .tick { transform: none; }
  .budget-ring .fill { stroke-dashoffset: 100.5; } .bars-mini i { transform: scaleY(var(--h)); } .pop { opacity: 1; transform: none; }
  .rise, .sparks { display: none; }
}

/* ---------- log in / sign up ---------- */
[hidden] { display: none !important; }
button.btn { font: inherit; font-weight: 650; cursor: pointer; }
dialog.auth { width: min(400px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
dialog.auth::backdrop { background: rgba(6, 12, 10, .5); backdrop-filter: blur(6px); }
dialog.auth[open] { animation: pop .28s cubic-bezier(.2,.8,.2,1); }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
body:has(dialog.auth[open]) { overflow: hidden; }
.auth-form { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 32px 28px 26px; }
.auth-form > img { border-radius: 12px; box-shadow: 0 8px 22px -8px var(--accent); }
.auth-form h2 { font-size: 1.6rem; font-weight: 800; margin-top: 4px; }
.auth-form h2 + p { margin-top: -8px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; font-weight: 600; }
.auth-form input { font: inherit; font-weight: 400; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); min-width: 0; }
.auth-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.auth-form small { font-weight: 400; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.auth-form .btn { justify-content: center; margin-top: 4px; }
.auth-form .btn:disabled { opacity: .65; cursor: progress; transform: none; }
.auth-error, .auth-note { padding: 10px 12px; border-radius: 12px; font-size: .9rem; line-height: 1.45; }
.auth-error { background: color-mix(in srgb, var(--owes) 12%, transparent); color: var(--owes); }
.auth-note { background: var(--accent-soft); }
.auth-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 12px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.auth-close:hover { background: var(--surface-2); color: var(--text); }
.auth-switch { text-align: center; color: var(--muted); font-size: .92rem; }
.auth-terms { margin: -4px 0 0; text-align: center; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.auth-terms a { color: var(--accent); }
.auth-switch button { font: inherit; font-weight: 650; color: var(--accent); background: none; border: 0; padding: 4px 2px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { dialog.auth[open] { animation: none; } }

/* ---------- one-off values (the page's security policy allows no inline style attributes) ---------- */
.av-green { background:#dcfce7; color:#166534; }
.av-pink { background:#ffe4ec; color:#9d174d; }
.av-rose { background:#ffe4e6; color:#9f1239; }
.av-violet { background:#ede4ff; color:#5b21b6; }
.bg-accent { background:var(--accent); }
.bg-coral { background:var(--coral); }
.bg-indigo { background:var(--indigo); }
.bg-lime { background:var(--lime); }
.bg-pink { background:var(--pink); }
.c-coral { --c:var(--coral); }
.c-indigo { --c:var(--indigo); }
.c-lime { --c:var(--lime); }
.c-owed { --c:var(--owed); }
.c-pink { --c:var(--pink); }
.c-sky { --c:var(--sky); }
.d06 { --d:.06s; }
.d08 { --d:.08s; }
.d10 { --d:.1s; }
.d12 { --d:.12s; }
.d16 { --d:.16s; }
.d18 { --d:.18s; }
.d20 { --d:.2s; }
.d24 { --d:.24s; }
.d32 { --d:.32s; }
.h38 { height:38%; }
.h46 { height:46%; }
.h51 { height:51%; }
.h55 { height:55%; }
.h62 { height:62%; }
.h66 { height:66%; }
.h74 { height:74%; }
.h88 { height:88%; }
.head-gap { margin-bottom:28px; }
.row-lead { display:flex; align-items:center; gap:12px; }
.sec-tight { padding-top:20px; }
.sprite { position:absolute; }
.tint-accent { background:color-mix(in srgb,var(--accent) 15%,transparent); color:var(--accent); }
.tint-coral { background:color-mix(in srgb,var(--coral) 15%,transparent); color:var(--coral); }
.tint-owed { background:color-mix(in srgb,var(--owed) 15%,transparent); color:var(--owed); }