@font-face {
  font-family: "Martian Mono";
  src: url("/fonts/martian-mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --table: #e7e0d1;
  --paper: #fdfbf6;
  --ink: #161412;
  --muted: #5b5549;
  --red: #a8231a;
  --bar: 4rem;
  --cjk: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-family: "Martian Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--table);
  accent-color: var(--red);
}

* { box-sizing: border-box; }
body { margin: 0; }
img { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.zh { font-family: var(--cjk); white-space: nowrap; }
h1, h2 { text-wrap: balance; letter-spacing: -0.03em; }

/* Top bar */
.topbar {
  max-width: 64rem; height: var(--bar); margin: 0 auto; padding: 0 1.25rem;
  display: flex; justify-content: space-between; align-items: center;
}
.topbar .brand { font-weight: 800; letter-spacing: 0.12em; text-decoration: none; font-size: 0.9rem; }
.signin {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 1rem;
  border: 1.5px solid var(--ink); font-size: 0.85rem; font-weight: 700; text-decoration: none;
  transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1), color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.signin svg { width: 1rem; height: 1rem; }
.signin:hover { background: var(--ink); color: var(--paper); }

/* Each big section fills one screen on desktop */
.screen { min-height: 100svh; display: grid; align-items: center; }
.inner { max-width: 64rem; width: 100%; margin: 0 auto; padding: 2rem 1.25rem; }

/* Hero: pitch beside the printed report, together exactly one screen */
.hero { min-height: calc(100svh - var(--bar)); }
.hero .inner {
  padding-block: 1rem 1.5rem;
  display: grid; grid-template-columns: 1fr auto; gap: 3.5rem; align-items: center;
}
h1 { margin: 0 0 1.25rem; font-weight: 800; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.06; letter-spacing: -0.045em; }
.lede { margin: 0 0 2rem; max-width: 25rem; font-size: 1.05rem; color: var(--muted); text-wrap: pretty; }

/* The WhatsApp action, stamped with the seal */
.pay {
  display: inline-flex; align-items: center; gap: 0.75em;
  min-height: 3.4em; padding: 0.8em 1.3em 0.8em 0.9em;
  background: var(--ink); color: var(--paper);
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.03em; white-space: nowrap; text-decoration: none;
  transition: background-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pay:hover { background: #2c2824; text-decoration: none; }
.pay img { width: 2.6em; height: 2.6em; transform: rotate(-6deg); flex: none; }
.alt { margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--muted); }

/* The receipt. Its type is sized from the viewport height so the whole slip fits the hero. */
.receipt-wrap { filter: drop-shadow(0 18px 22px rgb(22 20 18 / 0.2)); transform: rotate(0.6deg); }
.receipt {
  --tooth: 10px;
  font-size: clamp(11px, calc((100svh - var(--bar) - 3.5rem) / 45.5), 15px);
  width: 26.5em; background: var(--paper); padding: 2em 1.6em 2em;
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--tooth) 51% repeat-x;
          mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--tooth) 51% repeat-x;
  animation: feed 1100ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both;
}
@keyframes feed {
  from { transform: translateY(-2.5rem); clip-path: inset(0 0 100% 0); }
  to { transform: none; clip-path: inset(0 0 -2rem 0); }
}
.receipt p { margin: 0; }
.c { text-align: center; }
.r-brand { font-weight: 800; letter-spacing: 0.2em; font-size: 1.05em; }
.small { font-size: 0.8em; color: var(--muted); }
.receipt hr { border: 0; border-top: 1.5px dashed var(--ink); margin: 0.85em 0; }
.receipt hr.double { border-top: 4px double var(--ink); }
.r-head { font-weight: 800; letter-spacing: 0.04em; font-size: 0.85em; }
.receipt .line { display: flex; gap: 0.45em; align-items: baseline; font-size: 0.85em; margin: 0.3em 0; }
.line .dots { flex: 1; min-width: 0.75em; border-bottom: 1.5px dotted var(--muted); transform: translateY(-0.3em); }
.line b { font-weight: 700; }
.line .chg { min-width: 3.2em; text-align: right; color: var(--muted); }
.receipt .tip { font-size: 0.9em; font-weight: 600; margin-top: 0.2em; }
.receipt .pay { display: flex; justify-content: center; margin: 1.1em 0 0; font-size: 0.8em; }
.receipt .thanks { font-size: 0.8em; letter-spacing: 0.04em; margin-top: 1em; }
.barcode { height: 2.4em; width: 70%; margin: 0.7em auto 0.3em; }

/* Section heads */
.head { max-width: 40rem; margin-bottom: 1.75rem; }
.head h2 { margin: 0 0 0.6rem; font-size: clamp(1.6rem, 3.4vw, 2.15rem); line-height: 1.12; }
.head p { margin: 0; color: var(--muted); font-size: 1.05rem; }

/* Showcase: pick a feature, the laptop and phone switch to it */
.inner.wide { max-width: 74rem; padding-block: 1.25rem; }
.inner.wide .head { margin-bottom: 1rem; }
#app-title { white-space: nowrap; }
.show { display: grid; gap: 1rem; }
.tabs {
  display: grid; grid-template-columns: repeat(3, auto); width: fit-content; max-width: 100%; margin: 0 auto;
  border: 1.5px solid var(--ink); background: var(--paper);
}
.tab {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.1rem; font-weight: 700; font-size: 0.85rem; white-space: nowrap; text-align: center;
  border-left: 1.5px solid var(--ink);
  transition: background-color 200ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tab:first-child { border-left: 0; }
.tab span { display: none; }
.tab svg { width: 0.9rem; height: 0.9rem; flex: none; transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.tab:hover { background: var(--table); }
.tab:hover svg { transform: translateX(2px); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.tab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* While the features cycle on their own, the selected tab fills like a progress bar. */
.tabs.auto .tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--paper); transform-origin: left; animation: fill 6s linear both;
}
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tab-desc { margin: 0 auto 0.75rem; max-width: 48rem; text-align: center; color: var(--muted); }

/* The devices take whatever height the screen has left. */
.stage { position: relative; width: min(100%, calc((100svh - 17.5rem) * 1.72)); margin: 0 auto; padding-bottom: 1.5rem; }
.laptop { margin-right: 9%; }
.laptop .screen-img {
  border: 0.7rem solid var(--ink); border-bottom-width: 1rem; border-radius: 0.9rem 0.9rem 0 0;
  aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper);
}
.laptop .base { height: 0.85rem; margin: 0 -2.2rem; background: var(--ink); border-radius: 0 0 0.9rem 0.9rem; }
.laptop img, .stage .phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.stage .phone {
  position: absolute; right: 0; bottom: 0; width: 23%;
  border: 0.45rem solid var(--ink); border-radius: 1.5rem; overflow: hidden;
  aspect-ratio: 390 / 844; background: var(--paper);
  box-shadow: 0 20px 34px -18px rgb(22 20 18 / 0.55);
}
.stage img { transition: opacity 260ms cubic-bezier(0.16, 1, 0.3, 1); }
.stage.swap img { opacity: 0; }
.demo-note { margin: 0.75rem 0 0; text-align: center; font-size: 0.8rem; color: var(--muted); }

/* Reply simulation */
.sim-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3.5rem; align-items: center; }
.sim-grid .head { margin: 0; }
.points { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.points li { padding: 0.7rem 0; border-top: 1.5px dashed var(--muted); font-size: 0.95rem; }
.points li:last-child { border-bottom: 1.5px dashed var(--muted); }

.sim { background: var(--paper); padding: 1.6rem 1.75rem 1.5rem; box-shadow: 0 20px 34px -22px rgb(22 20 18 / 0.45); min-height: 25rem; display: flex; flex-direction: column; }
.sim-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8rem; color: var(--muted); }
.sim-top b { color: var(--ink); letter-spacing: 0.04em; }
.sim hr { border: 0; border-top: 1.5px dashed var(--ink); margin: 0.9rem 0; width: 100%; }
.who { font-weight: 700; }
.who .stars { letter-spacing: 0.1em; margin-left: 0.4rem; font-weight: 400; }
.review { margin: 0.4rem 0 0; font-size: 1rem; }
.label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; color: var(--muted); }
.reply { margin: 0.4rem 0 0; min-height: 4.8em; font-size: 0.95rem; }
.reply.typing::after { content: ""; display: inline-block; width: 0.55em; height: 1.1em; margin-left: 2px; vertical-align: -0.15em; background: var(--ink); animation: caret 900ms steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.flag { margin: 0.6rem 0 0; font-size: 0.8rem; font-weight: 700; color: var(--red); }
.flag[hidden] { display: none; }
.sim-foot { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; gap: 1rem; min-height: 3.6rem; }
.approve {
  padding: 0.7rem 1.1rem; background: var(--ink); color: var(--paper); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms;
}
.approve.dim { opacity: 0.25; }
.approve.press { transform: scale(0.94); }
.status { font-size: 0.85rem; font-weight: 700; }
.status svg { width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 0.3em; }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; counter-reset: s; }
.steps li { counter-increment: s; border-top: 1.5px dashed var(--ink); padding-top: 1rem; color: var(--muted); }
.steps b { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: 0.3rem; }
.steps b::before { content: counter(s) " · "; }

.close { text-align: center; padding-bottom: 5rem; }
.close h2 { margin: 0 0 1.75rem; font-size: clamp(1.6rem, 3.6vw, 2.3rem); line-height: 1.12; }
.close .alt { margin-top: 0.8rem; }

footer { border-top: 1.5px dashed var(--muted); }
footer .in {
  max-width: 64rem; margin: 0 auto; padding: 1.5rem 1.25rem 2.5rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  font-size: 0.85rem; color: var(--muted);
}
footer nav { display: flex; gap: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .receipt { animation: none; }
  .reply.typing::after { animation: none; }
}

@media (max-width: 860px) {
  .screen { min-height: 0; }
  .hero { min-height: 0; }
  .hero .inner { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 1.5rem; }
  .receipt-wrap { transform: none; }
  .receipt { font-size: 15px; width: 100%; padding-inline: 1.25em; }
  .show, .sim-grid { grid-template-columns: 1fr; gap: 2rem; }
  #app-title { white-space: normal; }
  .tabs { grid-template-columns: repeat(3, 1fr); width: 100%; }
  .tab { padding: 0.7rem 0.4rem; font-size: 0.8rem; white-space: normal; }
  .tab svg { display: none; }
  .tab-desc { font-size: 0.9rem; }
  .stage { width: 100%; }
  .laptop { margin-right: 2.5rem; }
  .laptop .screen-img { border-width: 0.45rem; border-bottom-width: 0.6rem; }
  .laptop .base { margin: 0 -1rem; height: 0.55rem; }
  .stage .phone { width: 30%; border-width: 0.3rem; border-radius: 1rem; }
  .sim { min-height: 27rem; padding: 1.25rem; }
  .steps { grid-template-columns: 1fr; }
}

/* Privacy policy: one long sheet of receipt paper */
.sheet { max-width: 46rem; width: auto; font-size: 15px; margin: 1rem auto 4rem; padding: 2.5rem clamp(1.25rem, 5vw, 3rem) 3rem; animation: none; }
.sheet h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); margin: 1.25rem 0 0.5rem; }
.sheet h2 { font-size: 1.05rem; margin: 2rem 0 0.5rem; letter-spacing: 0.02em; }
.sheet p, .sheet li { font-size: 0.95rem; }
.sheet p { margin: 0 0 1rem; }
.sheet ul { padding-left: 1.25rem; }
.sheet li { margin-bottom: 0.5rem; }
.sheet .updated { color: var(--muted); }