/* 分帳介紹頁(/about/split)。Huninn 只有一種粗細:整頁不用粗體,層級靠字級與顏色 */
:root {
  /* 品牌:晴天藍(跟 App 圖示同色) */
  --brand: #4a90e2;
  --brand-strong: #2a6cc0; /* 按鈕底、連結:白字 / 白底上對比夠 */
  --brand-deep: #1d4f8f;
  --btn-bg: #4a90e2; /* 亮色:主題色(跟 App 的按鈕一樣,2026-10-14 使用者);暗色另外用深一點的(下面) */
  --sun-alpha: 0.85;
  --brand-tint: #e6f0fb;
  /* 亮色點綴:晴天黃、珊瑚、蜜桃 */
  --sun: #ffc93c;
  --sun-tint: #fff4d1;
  --coral: #ff7a59;
  --coral-ink: #c4452a;
  --peach: #ffe1d3;

  --bg: #fffdf8;
  --bg-alt: #f2f7fe;
  --surface: #ffffff;
  --text: #22252b;
  --text-2: #4f5561;
  --text-3: #7d838e;
  --line: #e6e8ec;

  /* App 裡的畫面(手機框裡) */
  --app-bg: #f7f8fa;
  --app-card: #ffffff;
  --app-bubble-me: #4a90e2;
  --app-bubble-ai: #e6f0fb;
  --app-ai-text: #2b2d33;
  --app-text: #2b2d33;
  --app-text-3: #9297a1;
  --app-border: #e6e8ec;
  --app-avatar: #e6f0fb;
  --app-avatar-text: #245a9a;
  --phone-bezel: #1f2330;

  /* 字級(App 的 2–3 倍) */
  --fs-hero: clamp(40px, 9.6vw, 60px);
  --fs-h2: clamp(32px, 7.2vw, 46px);
  --fs-lead: clamp(18px, 4.6vw, 22px);
  --fs-body: clamp(17px, 4.3vw, 20px);
  --fs-eyebrow: 15px;

  --wrap: 880px;
  --font: 'Huninn', system-ui, -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --btn-bg: #2a6cc0; /* 白字 5.1:1(暗色維持原本的) */
    --brand-strong: #7db4f5;
    --sun-alpha: 0.35;
    --brand-deep: #a9cbf5;
    --brand-tint: #1d2b3e;
    --sun-tint: #3a3220;
    --coral-ink: #ff9a80;
    --peach: #3b2a25;
    --bg: #14161b;
    --bg-alt: #1a1f29;
    --surface: #20242d;
    --text: #eef0f4;
    --text-2: #b8bdc7;
    --text-3: #8d939e;
    --line: #2e333d;
    --app-bg: #16181d;
    --app-card: #22252d;
    --app-bubble-ai: #26303f;
    --app-ai-text: #e6e8ec;
    --app-text: #e6e8ec;
    --app-text-3: #8d939e;
    --app-border: #30343d;
    --app-avatar: #263a55;
    --app-avatar-text: #a9cbf5;
    --phone-bezel: #050608;
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --btn-bg: #2a6cc0;
  --brand-strong: #7db4f5;
  --sun-alpha: 0.35;
  --brand-deep: #a9cbf5;
  --brand-tint: #1d2b3e;
  --sun-tint: #3a3220;
  --coral-ink: #ff9a80;
  --peach: #3b2a25;
  --bg: #14161b;
  --bg-alt: #1a1f29;
  --surface: #20242d;
  --text: #eef0f4;
  --text-2: #b8bdc7;
  --text-3: #8d939e;
  --line: #2e333d;
  --app-bg: #16181d;
  --app-card: #22252d;
  --app-bubble-ai: #26303f;
  --app-ai-text: #e6e8ec;
  --app-text: #e6e8ec;
  --app-text-3: #8d939e;
  --app-border: #30343d;
  --app-avatar: #263a55;
  --app-avatar-text: #a9cbf5;
  --phone-bezel: #050608;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  font-weight: 400;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
}
h1,
h2,
p {
  margin: 0;
}
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

/* 頂端 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 22px;
  color: var(--text);
}
.logo img {
  border-radius: 9px;
}

/* 按鈕 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 32px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: #fff;
  font-size: 19px;
  text-decoration: none;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 35%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 42%, transparent);
}
.btn:active {
  transform: translateY(0) scale(0.98);
}
.btn-small {
  min-height: 40px;
  padding: 0 18px;
  font-size: 16px;
  box-shadow: none;
}
.btn-small:hover {
  box-shadow: none;
}
.text-link {
  color: var(--brand-strong);
  font-size: 18px;
  text-decoration: none;
  padding: 12px 4px;
}
.text-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
  border-radius: 8px;
}

/* 版面:手機直排,寬螢幕左右 */
section {
  position: relative;
  overflow: hidden;
}
.split {
  display: grid;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.copy {
  max-width: 520px;
}
.visual {
  position: relative;
  display: flex;
  justify-content: center;
}
@media (min-width: 820px) {
  .split {
    grid-template-columns: 1fr 340px;
    gap: 56px;
  }
  .split.reverse {
    grid-template-columns: 340px 1fr;
  }
  .split.reverse .visual {
    order: -1;
  }
}

/* 開場 */
.hero {
  padding: 56px 0 72px;
  background: linear-gradient(180deg, var(--brand-tint) 0%, var(--bg) 100%);
}
.eyebrow {
  /* 小字的分類標示:純文字、帶顏色,不做成膠囊(看起來像按鈕) */
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  color: var(--brand-strong);
  margin-bottom: 14px;
}
.eyebrow-coral {
  color: var(--coral-ink);
}
h1 {
  font-size: var(--fs-hero);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--text);
}
h2 {
  font-size: var(--fs-h2);
  line-height: 1.3;
  color: var(--text);
}
.lead {
  margin-top: 22px;
  font-size: var(--fs-lead);
  color: var(--text-2);
  line-height: 1.75;
}
.body {
  margin-top: 20px;
  color: var(--text-2);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 34px;
}
@media (min-width: 820px) {
  .hero {
    padding: 88px 0 104px;
  }
  .hero h1 {
    /* 標題稍微壓在手機上的那一側,大字比較有份量 */
    margin-right: -24px;
  }
}

/* 底色的色塊 */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}
.blob-sun {
  width: 260px;
  height: 260px;
  right: -70px;
  top: 300px;
  background: radial-gradient(circle at 35% 35%, #ffe58a, var(--sun) 70%);
  opacity: var(--sun-alpha);
}
.blob-coral {
  width: 150px;
  height: 150px;
  left: -50px;
  bottom: 40px;
  background: radial-gradient(circle at 40% 40%, #ffb199, var(--coral) 75%);
  opacity: 0.55;
}
.blob-sky {
  width: 120px;
  height: 120px;
  right: 30%;
  top: -40px;
  background: var(--brand);
  opacity: 0.16;
}
@media (min-width: 820px) {
  .blob-sun {
    width: 340px;
    height: 340px;
    right: calc(50% - 560px);
    top: 120px;
  }
  .blob-coral {
    left: calc(50% - 600px);
    bottom: 60px;
    width: 200px;
    height: 200px;
  }
}

/* 第二段 */
.feature {
  padding: 80px 0;
}
.feature.alt {
  background: var(--bg-alt);
}
.feature.alt::before {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  left: -90px;
  top: 40px;
  background: var(--peach);
  opacity: 0.9;
}
@media (min-width: 820px) {
  .feature {
    padding: 112px 0;
  }
  .feature.alt::before {
    left: calc(50% - 520px);
    top: 80px;
    width: 360px;
    height: 360px;
  }
}
/* 貼紙 */
.sticker {
  position: absolute;
  z-index: 3;
  top: -16px;
  padding: 8px 16px;
  border-radius: 14px;
  font-size: 16px;
  transform: rotate(-6deg);
  box-shadow: 0 6px 16px rgba(30, 40, 60, 0.14);
}
.sticker-yellow {
  left: calc(50% - 170px);
  background: var(--sun);
  color: #3a2c00;
}
.sticker-coral {
  right: calc(50% - 170px);
  transform: rotate(5deg);
  background: var(--coral);
  color: #3a1408;
}

/* 手機框 */
.phone {
  position: relative;
  z-index: 2;
  width: 300px;
  height: 610px;
  padding: 10px;
  border-radius: 46px;
  background: var(--phone-bezel);
  box-shadow:
    0 30px 60px -18px rgba(30, 50, 90, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.phone::before {
  /* 動態島 */
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  width: 84px;
  height: 22px;
  margin-left: -42px;
  border-radius: 999px;
  background: #000;
  z-index: 3;
}
.screen {
  position: relative;
  height: 100%;
  border-radius: 37px;
  overflow: hidden;
  background: var(--app-bg);
  color: var(--app-text);
  font-size: 13px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
}
.ticker {
  margin: 52px 12px 0;
  padding: 9px 12px;
  border-radius: 20px;
  background: var(--app-card);
  box-shadow: 0 2px 8px rgba(30, 40, 60, 0.08);
  font-size: 12px;
  color: var(--app-text);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ticker .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
}
.ticker .chev {
  margin-left: auto;
  color: var(--app-text-3);
}
.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  padding: 12px 12px 10px;
  overflow: hidden;
}
.bubble {
  max-width: 82%;
  padding: 8px 13px;
  border-radius: 18px;
}
.bubble.me {
  align-self: flex-end;
  background: var(--app-bubble-me);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.bubble.ai {
  align-self: flex-start;
  background: var(--app-bubble-ai);
  color: var(--app-ai-text);
  margin-top: 4px;
}
.card {
  align-self: stretch;
  margin-right: 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--app-card);
  border: 1px solid var(--app-border);
  box-shadow: 0 1px 3px rgba(30, 40, 60, 0.06);
}
.card-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-title {
  font-size: 14px;
  white-space: nowrap;
}
.muted {
  color: var(--app-text-3);
  font-size: 11.5px;
}
.avatars {
  margin-left: auto;
  display: flex;
  gap: 3px;
}
.avatars i {
  font-style: normal;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9.5px;
  background: var(--app-avatar);
  color: var(--app-avatar-text);
}
.amount {
  font-size: 14.5px;
  margin-left: 4px;
}
.card-row.sub {
  margin-top: 6px;
  justify-content: space-between;
  font-size: 11px;
  color: var(--app-text-3);
}
.chip {
  color: var(--app-text);
}
.inputbar {
  position: relative;
  margin: 0 10px 14px;
  height: 42px;
  border-radius: 22px;
  background: var(--app-card);
  border: 1px solid var(--app-border);
  display: flex;
  align-items: center;
  padding: 0 6px 0 14px;
  font-size: 13px;
}
.placeholder {
  color: var(--app-text-3);
}
.placeholder[hidden] {
  display: none;
}
.send {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
  position: relative;
}
.send::after {
  /* 送出箭頭 */
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 9px solid #fff;
  transform: translateY(-1px);
}

.typing {
  align-self: flex-start;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--app-bubble-ai);
}
.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.4;
  animation: dots 1s ease-in-out infinite;
}
.typing span:nth-child(2) {
  animation-delay: 0.15s;
}
.typing span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes dots {
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.92);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* 頁尾 */
.footer {
  padding: 48px 0 56px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}
.footer nav {
  display: flex;
  gap: 24px;
  font-size: 16px;
}
.footer nav a {
  color: var(--text-2);
  text-decoration: none;
}
.footer nav a:hover {
  color: var(--brand-strong);
}
.small {
  width: 100%;
  font-size: 13.5px;
  color: var(--text-3);
}
.ib {
  display: inline-block;
}
.day {
  align-self: center;
  font-size: 11px;
  color: var(--app-text-3);
  margin-bottom: 2px;
}

/* ---------- 第 2 版加的 ---------- */
:root {
  --app-recv: #245a9a; /* 要收:App 的深主題色 */
  --app-pay: #d2603a; /* 要付:App 的 amount-owe */
  --app-others: #555a64;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --app-recv: #8fbdf2;
    --app-pay: #f09a7a;
    --app-others: #aab0ba;
  }
}
:root[data-theme='dark'] {
  --app-recv: #8fbdf2;
  --app-pay: #f09a7a;
  --app-others: #aab0ba;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 開場右邊:手機 + 下面的例句 */
.visual-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.tries {
  width: 100%;
  max-width: 340px;
}
.tries-label {
  font-size: 15px;
  color: var(--text-2);
  margin-bottom: 12px;
  text-align: center;
}
.tries-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.try {
  font: inherit;
  font-size: 15.5px;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--brand) 45%, var(--line));
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.try::before {
  /* 播放的小三角:看得出來點了會「演」 */
  content: '';
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--brand);
  margin-left: 4px;
}
.try:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.try:active {
  transform: scale(0.96);
}
.try.is-last {
  border-color: var(--brand);
  background: var(--brand-tint);
}

/* 手機裡的動畫小零件 */
.caret {
  display: inline-block;
  width: 1.5px;
  height: 16px;
  background: var(--brand);
  margin-left: 1px;
  animation: blink 1s steps(1) infinite;
}
.caret[hidden] {
  display: none;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.typing {
  display: flex;
}
.rise {
  animation: rise 0.35s ease both;
}
.pop {
  animation: pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.slide {
  animation: slide 0.5s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
@keyframes slide {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
}
.before {
  align-self: flex-start;
  font-size: 11.5px;
  color: var(--app-text-3);
  margin: 2px 0 -2px 4px;
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--app-text-3) 60%, transparent);
}

/* 誰該給誰的卡片(聊天裡、帳本頁共用) */
.settle-group {
  font-size: 11px;
  color: var(--app-text-3);
}
.settle-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 2px 0 6px;
}
.settle-label {
  font-size: 12.5px;
  color: var(--app-others);
}
.settle-amount {
  font-size: 19px;
}
.recv {
  color: var(--app-recv);
}
.pay {
  color: var(--app-pay);
}
.trow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12.5px;
  color: var(--app-text);
}
.trow + .trow {
  border-top: 1px solid var(--app-border);
}
.trow.others {
  color: var(--app-others);
}
.grow {
  flex: 1;
  min-width: 0;
}
.pdot {
  font-style: normal;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  background: var(--app-avatar);
  color: var(--app-avatar-text);
  flex: none;
}

/* 第二段:帳本頁 */
.pagehead {
  margin-top: 50px;
  padding: 6px 16px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.back {
  font-size: 22px;
  line-height: 1;
  color: var(--app-text-3);
}
.pagetitle {
  font-size: 18px;
}
.pagebody {
  flex: 1;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.settle.big {
  padding: 14px 14px 10px;
  border-radius: 20px;
  background: var(--app-card);
  border: 1px solid var(--app-border);
  box-shadow: 0 2px 8px rgba(30, 40, 60, 0.06);
}
.settle-hero {
  font-size: 30px;
  line-height: 1.2;
  color: var(--app-recv);
  margin-bottom: 8px;
}
.settle-foot {
  margin-top: 6px;
  text-align: right;
  font-size: 11.5px;
  color: var(--app-text-3);
}
.listhead {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--app-text-3);
  padding: 4px 4px 0;
}
.list {
  border-radius: 16px;
  background: var(--app-card);
  border: 1px solid var(--app-border);
  padding: 2px 12px;
}
.lrow {
  display: flex;
  gap: 8px;
  padding: 9px 0;
  font-size: 13px;
}
.lrow + .lrow {
  border-top: 1px solid var(--app-border);
}
.stat {
  margin-top: 26px;
  font-size: var(--fs-lead);
  color: var(--text-2);
}
.stat-num {
  font-size: 1.9em;
  line-height: 1;
  color: var(--brand-strong);
  margin: 0 2px;
}
.stat-coral {
  color: var(--coral-ink);
}

/* 手機畫面裡唯一真的能點的:「怎麼算的 ›」→ 捲到下一段 */
a.settle-foot {
  display: block;
  width: fit-content;
  margin: 2px 0 0 auto;
  padding: 6px 8px;
  border-radius: 10px;
  color: var(--app-recv);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
a.settle-foot:hover,
a.settle-foot:active {
  background: var(--app-avatar);
}
/* 固定的頂端列不要蓋住捲到的標題 */
#breakdown {
  scroll-margin-top: 64px;
}


/* ---------- 第 3 版 ---------- */
/* 開場手機:內容從畫面上面開始排(一打開就看得到動畫),排滿才往上捲(JS 捲到最新) */
#hero-chat {
  justify-content: flex-start;
}
/* 記好之後卡片下面的一行結算(App 之後要做的樣子):像聊天裡的小字,點得到 */
.sumline {
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin: -2px 0 0 2px;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 12px;
  color: var(--app-others);
  text-decoration: none;
  flex: none;
  transition: background-color 0.15s ease;
}
.sumline:hover,
.sumline:active {
  background: var(--app-avatar);
}
.sumchev {
  color: var(--app-text-3);
}
#try {
  scroll-margin-top: 84px;
}

/* 手機寬度:第一個畫面(390×800 左右)就要看到整支手機和開始使用 */
/* 手機寬度(第 4 版):第一個畫面只放標題、一行副標、整支手機;按鈕移到手機和例句下面(頂端列已經有開始使用) */
@media (max-width: 819px) {
  .hero {
    padding: 28px 0 56px;
  }
  /* 把 .copy 拆開,讓標題、副標、按鈕可以跟手機排出不同的順序 */
  .hero .copy {
    display: contents;
  }
  .hero .eyebrow {
    display: none;
  }
  .hero h1 {
    order: 1;
    font-size: clamp(30px, 8.4vw, 40px);
    line-height: 1.22;
  }
  .hero .lead {
    order: 2;
    margin-top: -14px;
    font-size: 17px;
    line-height: 1.6;
  }
  /* 副標只留後半句,一行 */
  .hero .lead .ib:first-child {
    display: none;
  }
  .hero .visual-col {
    order: 3;
    gap: 26px;
    margin-top: 6px;
  }
  .hero .actions {
    order: 4;
    margin-top: 0;
    justify-content: center;
    gap: 8px 20px;
  }
  .hero .btn {
    min-height: 48px;
    padding: 0 26px;
    font-size: 17px;
  }
  .hero .split {
    gap: 24px;
  }
  /* 手機框縮小:矮一點、整支縮 0.82 */
  .hero-phone {
    height: 492px;
    zoom: 0.8;
  }
  .hero .sticker-yellow {
    top: -12px;
    left: calc(50% - 150px);
    font-size: 14px;
    padding: 6px 12px;
  }
}
/* 寬螢幕:開場手機矮一點,剛打開時下半部不會空太多 */
@media (min-width: 820px) {
  .hero-phone {
    height: 560px;
  }
}

/* ---------- 第 5 版 ---------- */
.tap {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 6px;
  fill: var(--brand);
  stroke: var(--brand);
  opacity: 0.85;
}
.label-narrow {
  display: none;
}
@media (max-width: 819px) {
  /* 手機寬度:看看怎麼用沒有意義(例句就在眼前),只留開始使用 */
  .hero .text-link {
    display: none;
  }
  .hero .visual-col {
    gap: 18px;
  }
  .tries {
    max-width: none;
  }
  .tries-label {
    margin-bottom: 6px;
    color: var(--text-2);
  }
  .label-wide {
    display: none;
  }
  .label-narrow {
    display: inline;
  }
  /* 例句換行排(一列左右滑的話,很多人不知道還能滑):第一列兩顆、第二列一顆,全部在第一個畫面裡 */
  .tries-list {
    justify-content: center;
  }
  .try {
    flex: none;
    min-height: 44px;
    padding: 6px 14px 6px 10px;
    font-size: 15px;
  }
  .tries-list {
    gap: 8px;
  }
  .hero {
    padding-top: 22px;
  }
  .hero .visual-col {
    gap: 14px;
  }
  /* 開始使用放在第一個畫面外面,不要露出半顆 */
  .hero .actions {
    margin-top: 20px;
  }
}

/* 第三段:怎麼算的(照 App 的 CalcPage) */
.feature.calc::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  right: -100px;
  top: 60px;
  background: var(--sun-tint);
}
@media (min-width: 820px) {
  .feature.calc::before {
    right: calc(50% - 540px);
    top: 90px;
    width: 380px;
    height: 380px;
  }
}
#breakdown {
  scroll-margin-top: 64px;
}
.calc-head {
  flex-wrap: wrap;
  row-gap: 0;
}
.pagesub {
  width: 100%;
  padding-left: 22px;
  font-size: 12px;
  color: var(--app-text-3);
  margin-top: -2px;
}
.calc-caption {
  font-size: 11.5px;
  color: var(--app-text-3);
  padding: 0 4px;
}
.pcard {
  border-radius: 18px;
  background: var(--app-card);
  border: 1px solid var(--app-border);
  box-shadow: 0 1px 3px rgba(30, 40, 60, 0.06);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pcard.folded {
  padding: 10px 14px;
}
.pcard-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.pdot.self {
  background: var(--brand-tint);
  color: var(--app-avatar-text);
}
.pcard-amt {
  font-size: 15px;
}
.cgroup {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.clabel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11.5px;
  color: var(--app-text-3);
}
.csub {
  font-size: 12.5px;
  color: var(--app-text);
}
.crow {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding-left: 10px;
  font-size: 11.5px;
  color: var(--app-others);
}
.cdate {
  min-width: 2.6em;
  color: var(--app-text-3);
}
.band {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 14px;
  background: var(--app-bubble-ai);
}
.formula {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  font-size: 11.5px;
  color: var(--app-others);
}
.formula .op {
  margin-right: 8px;
  color: var(--app-text-3);
}
.band-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.band-amt {
  font-size: 24px;
  line-height: 1.2;
}
/* 捲到看得見時,結果那一塊亮一下(只一次) */
.band.pulse {
  animation: bandPulse 1.4s ease 0.3s 1 both;
}
@keyframes bandPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 0%, transparent);
    transform: scale(1);
  }
  35% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 28%, transparent);
    transform: scale(1.03);
  }
}

/* ---------- 第 7 版:開場手機裡的「這本帳本的誰該給誰」 ---------- */
button.sumline {
  font: inherit;
  font-size: 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.sheet-backdrop {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(20, 24, 32, 0.66);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sheet-backdrop.open {
  opacity: 1;
}
.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  height: 94%;
  overflow: hidden;
  padding: 6px 14px 22px;
  border-radius: 26px 26px 0 0;
  background: var(--app-bg);
  box-shadow: 0 -6px 18px rgba(30, 40, 60, 0.2);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
  touch-action: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sheet.open {
  transform: translateY(0);
}
.sheet.dragging {
  transition: none;
}
.sheet[hidden],
.sheet-backdrop[hidden] {
  display: none;
}
.sheet-handle {
  width: 40px;
  height: 5px;
  border-radius: 999px;
  margin: 2px auto 0;
  background: var(--app-border);
  cursor: grab;
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}
.sheet-close {
  font: inherit;
  font-size: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: var(--app-card);
  color: var(--app-text-3);
  box-shadow: 0 2px 8px rgba(30, 40, 60, 0.1);
  cursor: pointer;
}
.sheet-close:hover {
  color: var(--app-text);
}
.sheet-sub {
  margin-top: -10px;
  padding: 0 2px;
  font-size: 12px;
  color: var(--app-text-3);
}
.sheet .settle-hero.pay {
  color: var(--app-pay);
}
.sheet-note {
  font-size: 11px;
  color: var(--app-text-3);
  padding: 0 4px;
}

/* ---------- 第 8 版 ---------- */

/* 疊上來那一頁:拉桿區大一點、好抓 */
.sheet {
  padding-top: 0;
}
.sheet-grip {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
  cursor: grab;
  touch-action: none;
}
.sheet-grip .sheet-handle {
  display: block;
  width: 44px;
  height: 5px;
  margin: 0;
  border-radius: 999px;
  background: var(--app-text-3);
  opacity: 0.45;
}
.sheet.dragging .sheet-grip {
  cursor: grabbing;
}
.rows-label {
  font-size: 11.5px;
  color: var(--app-text-3);
  margin: 4px 0 2px;
}
.settle-hero.bill-amt {
  color: var(--app-text);
}
.bill-meta {
  font-size: 12.5px;
}
.bill-meta .lrow {
  font-size: 12.5px;
}
/* 聊天裡的帳卡片點得到 */
.card.tappable {
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.12s ease;
}
.card.tappable:hover {
  background: color-mix(in srgb, var(--app-card) 88%, var(--brand));
}
.card.tappable:active {
  transform: scale(0.98);
}
.card.tappable:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
}

/* 寬螢幕的開場:文字從上面排(不跟著右邊的手機 + 例句一起置中,第一個畫面就看得到按鈕) */
@media (min-width: 820px) {
  .hero {
    padding: 56px 0 80px;
  }
  .hero .split {
    align-items: start;
  }
  .hero .copy {
    padding-top: 96px;
  }
}

/* 頂端列的開始使用:任何時候都看得到的那一顆 */
.topbar .btn-small {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent);
}

/* 置中的段落標題(方案、常見問題) */
.center-head {
  text-align: center;
  margin-bottom: 36px;
}
.wrap.narrow {
  max-width: 680px;
}

/* 分享:一則傳連結的訊息 + 朋友看到的卡片(不放手機框) */
.share-demo {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.msg {
  align-self: flex-start;
  max-width: 88%;
}
.msg-from {
  font-size: 13px;
  color: var(--text-3);
  margin: 0 0 4px 12px;
}
.msg-bubble {
  padding: 12px;
  border-radius: 20px 20px 20px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(30, 40, 60, 0.08);
}
.msg-text {
  font-size: 15px;
  color: var(--text);
  margin: 0 4px 10px;
}
.linkcard {
  font: inherit;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.12s ease;
}
.linkcard:hover {
  background: var(--brand-tint);
}
.linkcard:active {
  transform: scale(0.98);
}
.linkcard-icon img {
  display: block;
  border-radius: 9px;
}
.linkcard-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.linkcard-title {
  font-size: 15px;
}
.linkcard-url {
  font-size: 12.5px;
  color: var(--brand-strong);
}
.friend-view {
  align-self: flex-end;
  width: 92%;
  outline: none;
  border-radius: 22px;
}
.friend-label {
  font-size: 13px;
  color: var(--text-3);
  margin: 0 0 6px 6px;
}
.friend-view .settle.big,
.speak-visual .mini-form,
.fx-card,
.theme-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(30, 40, 60, 0.1);
}
.friend-view .settle.big {
  padding: 16px 18px 14px;
}
.friend-view .settle-hero.pay {
  color: var(--app-pay);
}
.friend-view .trow {
  font-size: 14px;
}
.friend-view.flash .settle.big {
  animation: flash 1.2s ease 1;
}
@keyframes flash {
  30% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 30%, transparent), 0 10px 28px rgba(30, 40, 60, 0.1);
  }
}
.account {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.account-head {
  font-size: 12.5px;
  color: var(--text-3);
}
.account-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 14px;
}
.account-bank {
  color: var(--text-2);
}
.copy-btn {
  font: inherit;
  font-size: 14px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--brand) 45%, var(--line));
  background: var(--surface);
  color: var(--brand-strong);
  cursor: pointer;
}
.copy-btn:hover,
.copy-btn.copied {
  background: var(--brand-tint);
}

/* 用說的:飄著的訊息 + 自己填的表單 */
.speak-visual {
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.mini-form {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.who {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.who-chip {
  font: inherit;
  font-size: 14px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text-3);
  cursor: pointer;
}
.who-chip[aria-pressed='true'] {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--text);
}

/* 外幣 */
.fx-visual {
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.fx-chips {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* 四個排一行:電腦版右欄只有 340 寬、小手機 320 寬,原本 16px / 8px 會折成兩行(2026-10-14) */
  gap: 6px;
}
.fx-chip {
  font: inherit;
  font-size: 15px;
  min-height: 44px;
  padding: 0 13px;
  white-space: nowrap;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--coral) 45%, var(--line));
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.fx-chip[aria-pressed='true'] {
  background: var(--coral);
  border-color: var(--coral);
  color: #3a1408;
}
.fx-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
  padding: 18px 20px;
}

.fx-title {
  font-size: 14px;
  color: var(--text-3);
}
.fx-amount {
  font-size: 34px;
  line-height: 1.25;
  margin: 2px 0 10px;
}
.fx-line {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-2);
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.fx-total span:last-child {
  font-size: 20px;
  color: var(--brand-strong);
}

/* 顏色 */
.accent-word {
  --theme: #4a90e2;
  color: var(--theme);
  transition: color 0.3s ease;
}
.color-visual {
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.theme-card {
  --theme: #4a90e2;
  --theme-on: #ffffff;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 300px;
  overflow: hidden;
}
.theme-head {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--theme);
  color: var(--theme-on);
  font-size: 15px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.theme-name {
  font-size: 13px;
  opacity: 0.9;
}
.theme-body {
  padding: 14px 16px 16px;
}
.theme-amt {
  font-size: 30px;
  line-height: 1.2;
  color: color-mix(in srgb, var(--theme) 80%, #000);
  transition: color 0.3s ease;
}
.swatches {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 340px;
}
.swatch {
  font: inherit;
  font-size: 12.5px;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 2px 6px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  background: transparent;
  cursor: pointer;
}
.swatch i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.swatch:hover {
  background: var(--surface);
}
.swatch[aria-pressed='true'] {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}
.feature#color::before {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  right: -90px;
  bottom: 40px;
  background: var(--brand-tint);
}

/* 方案 */
.plans {
  display: grid;
  gap: 16px;
}
@media (min-width: 720px) {
  .plans {
    grid-template-columns: repeat(3, 1fr);
  }
}
.plan {
  position: relative;
  padding: 26px 22px 22px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.plan-hot {
  border: 2px solid var(--brand);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--brand) 22%, transparent);
}
.plan-badge {
  position: absolute;
  top: -13px;
  left: 20px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--sun);
  color: #3a2c00;
  font-size: 13px;
}
.plan-name {
  font-size: 17px;
  color: var(--text-2);
}
.plan-price {
  font-size: 40px;
  line-height: 1.2;
  color: var(--text);
}
.plan-quota {
  font-size: 16px;
  color: var(--text-2);
  margin-bottom: 14px;
}
.plan .btn {
  margin-top: auto;
  min-height: 46px;
  font-size: 16px;
  padding: 0 22px;
}
.btn-ghost {
  background: var(--surface);
  color: var(--brand-strong);
  border: 1.5px solid color-mix(in srgb, var(--brand) 50%, var(--line));
  box-shadow: none;
}
.btn-ghost:hover {
  background: var(--brand-tint);
  box-shadow: none;
}
.count-rule {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}
@media (min-width: 720px) {
  .count-rule {
    grid-template-columns: 1fr 1fr;
  }
}
.rule {
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.rule p {
  margin-top: 6px;
  font-size: 15.5px;
  color: var(--text-2);
}
.rule-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
}
.rule-mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
}
.rule-yes .rule-mark {
  background: var(--brand-tint);
  color: var(--brand-strong);
}
.rule-no .rule-mark {
  background: var(--peach);
  color: var(--coral-ink);
}

/* 常見問題 */
.faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq details {
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  font-size: 17px;
  cursor: pointer;
  border-radius: 18px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-size: 22px;
  line-height: 1;
  color: var(--brand-strong);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq summary:hover {
  background: var(--bg-alt);
}
.faq details p {
  padding: 0 20px 18px;
  font-size: 16px;
  color: var(--text-2);
}

/* 結尾 */
.ending {
  padding: 96px 0 104px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--brand-tint) 100%);
  text-align: center;
}
.ending-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.ending h2 {
  font-size: var(--fs-h2);
}
.btn-big {
  min-height: 60px;
  padding: 0 40px;
  font-size: 20px;
}
.ending .blob-sun {
  top: auto;
  bottom: -80px;
  right: -60px;
}
.ending .blob-coral {
  left: -40px;
  top: 30px;
  bottom: auto;
}
.footer nav a + a::before {
  content: '·';
  margin-right: 24px;
  color: var(--text-3);
}
/* 寬螢幕 1280×800 的第一個畫面放得下手機 + 例句 */
@media (min-width: 820px) {
  .hero {
    padding-top: 40px;
  }
  .hero-phone {
    height: 520px;
  }
  .hero .visual-col {
    gap: 20px;
  }
  .hero .copy {
    padding-top: 84px;
  }
}

/* ---------- 方案(第 9 版:不放購買按鈕、價錢不放大,口氣平靜) ---------- */
.center-sub {
  margin-top: 12px;
}
.plan {
  align-items: center;
  text-align: center;
  padding: 22px 18px;
  gap: 6px;
}
.plan-name {
  font-size: 16px;
  color: var(--text-3);
}
.plan-quota {
  font-size: 24px;
  color: var(--text);
  margin: 0;
}
.plan-price {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-2);
}
.count-rule {
  margin-top: 0;
}
.rule-head {
  font-size: 18px;
}
.rule-sub {
  margin-top: 2px;
  font-size: 14.5px;
  color: var(--text-3);
}
.rule-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15.5px;
  color: var(--text-2);
}
.rule-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.rule-list .rule-mark {
  flex: none;
  margin-top: 1px;
}
.rule-kind {
  color: var(--text);
  margin-right: 8px;
}
.center-cta {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
/* 背景的大圓不要蓋到文字(方案、常見問題這種沒有左右排的段落) */
.feature > .wrap {
  position: relative;
  z-index: 1;
}
.account-no,
.account-bank {
  white-space: nowrap;
}
.account-row .grow {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2px;
}

/* ---------- 第 9 版 ---------- */
/* 每一段捲過去時讓出頂端列 */
main > section {
  scroll-margin-top: 64px;
}
.more-link {
  margin-top: 14px;
  text-align: center;
}
.more-link .text-link {
  font-size: 16px;
}
/* 手機寬度:第一個畫面 = 標題 + 副標 + 開始使用 + 往下看看怎麼用;手機和例句在下面,不再硬塞進第一個畫面 */
@media (max-width: 819px) {
  .hero .actions {
    order: 3;
    justify-content: flex-start;
    margin-top: 4px;
    gap: 12px 22px;
  }
  .hero .text-link {
    display: inline-block;
    font-size: 17px;
  }
  .hero .visual-col {
    order: 4;
    margin-top: 40px;
    gap: 16px;
  }
  .hero-phone {
    height: 560px;
    zoom: 0.86;
  }
  .hero .sticker-yellow {
    left: calc(50% - 158px);
  }
  .hero {
    padding-bottom: 48px;
  }
}

/* 顏色:亮暗都照 App 的算法換(--theme-fill 填色、--theme-on 填色上的字、--theme-text 有顏色的字,由 JS 算) */
.accent-word {
  color: var(--theme-text, #2a6cc0);
}
.theme-head {
  background: var(--theme-fill, #4a90e2);
  color: var(--theme-on, #ffffff);
}
.theme-amt {
  color: var(--theme-text, #2a6cc0);
}
/* 深色模式:珊瑚色的圓淡一點,不搶字 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .blob-coral {
    opacity: 0.3;
  }
}
:root[data-theme='dark'] .blob-coral {
  opacity: 0.3;
}

/* ---------- 第 10 版 ---------- */
/* 手機開場:上面多留一點,手機往下一點 */
@media (max-width: 819px) {
  .hero {
    padding-top: 44px;
  }
  .hero .split {
    gap: 28px;
  }
  .hero .visual-col {
    margin-top: 64px;
  }
}


/* 常見問題:答案的外層(做高度動畫用) */
.faq-body {
  overflow: hidden;
}


/* ---------- 第 11 版 ---------- */
/* 手機上點按鈕、連結不要出現藍色的方框;鍵盤移過去才有外框 */
* {
  -webkit-tap-highlight-color: transparent;
}
:focus:not(:focus-visible) {
  outline: none;
}


/* ---------- 第 12 版 ---------- */
/* 常見問題:展開的答案點了會收起 */
.faq details[open] .faq-body {
  cursor: pointer;
}

/* ---------- 第 13 版:手機的第一個畫面重新排(內容跟寬螢幕一樣:小標、標題、完整副標、兩個按鈕) ---------- */
@media (max-width: 819px) {
  .hero {
    padding-top: 64px;
  }
  .hero .eyebrow {
    display: block;
    order: 0;
    font-size: 14px;
    margin: 0 0 -14px;
  }
  .hero h1 {
    font-size: clamp(36px, 11vw, 46px);
    line-height: 1.2;
  }
  .hero .lead {
    margin-top: -4px;
    font-size: 18px;
    line-height: 1.7;
  }
  .hero .lead .ib:first-child {
    display: inline-block;
  }
  .hero .actions {
    margin-top: 12px;
  }
  /* 手機框往下:上緣在第一個畫面最下面露一點,提示往下還有 */
  .hero .visual-col {
    margin-top: 150px;
  }
  /* 色塊框住構圖:黃的在標題右上、藍的在左邊、珊瑚在按鈕右下 */
  .hero .blob-sun {
    width: 220px;
    height: 220px;
    top: 30px;
    right: -120px;
  }
  .hero .blob-sky {
    width: 150px;
    height: 150px;
    left: -70px;
    right: auto;
    top: 420px;
    opacity: 0.14;
  }
  .hero .blob-coral {
    width: 170px;
    height: 170px;
    left: auto;
    right: -40px;
    top: 500px;
    bottom: auto;
    opacity: 0.45;
  }
}
@media (max-width: 819px) {
  .hero {
    padding-top: 104px;
  }
  .hero .visual-col {
    margin-top: 214px;
  }
  .hero .blob-sun {
    top: 60px;
  }
  .hero .blob-sky {
    top: 470px;
  }
  .hero .blob-coral {
    top: 540px;
  }
}

/* =====================================================================
   第 14 版:整頁對照 App 的樣式(tokens.css、Chat / ItemCard / Ticker / Button / SignIn.module.css)
   手機框裡的畫面約是 App 的 0.87 倍(手機框 300px 寬 ≈ 345px 的手機畫面)
   ===================================================================== */
:root {
  --app-subtle: #f1f2f5; /* App 的 --color-bg-subtle:別人的頭像圓圈 */
  --app-gray-soft: #eef0f3; /* 「不算」的灰色圓 */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --app-subtle: #2b2f37;
    --app-gray-soft: #2b2f37;
  }
}
:root[data-theme='dark'] {
  --app-subtle: #2b2f37;
  --app-gray-soft: #2b2f37;
}

/* ---------- 跑馬燈(Ticker.module.css):淡主題色底、深主題色字、白圓裡一個點 ---------- */
.ticker {
  height: 40px;
  padding: 0 8px;
  gap: 8px;
  border-radius: 20px;
  background: var(--app-bubble-ai);
  color: var(--app-recv);
  box-shadow: 0 4px 14px rgba(30, 50, 90, 0.14), 0 1px 3px rgba(30, 50, 90, 0.08);
  font-size: 12px;
}
.ticker .dot {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--app-card);
}
.ticker .dot::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}
.ticker .chev {
  color: var(--app-recv);
  opacity: 0.6;
}

/* ---------- 對話(Chat.module.css):同一則回覆裡黏在一起(3px)、不同則之間隔開 ---------- */
.chat {
  gap: 3px;
  padding: 12px 10px 10px 12px;
}
.bubble {
  padding: 8px 14px;
  font-size: 13px;
  line-height: 1.45;
  border-radius: 18px;
}
.bubble.me {
  max-width: 82%;
  margin-right: -4px;
  border-radius: 18px 18px 5px 18px;
}
.bubble.ai {
  margin-top: 0;
}
.chat > .bubble.me:not(:first-child),
.chat > .typing,
.chat > .bubble.me + .bubble.ai {
  margin-top: 9px;
}
/* 回覆後面黏著卡片:相鄰那一側的角變小(tokens.css 的 data-join) */
.bubble.ai:has(+ .card),
.bubble.ai:has(+ .before) {
  border-bottom-left-radius: 5px;
}
.chat .bubble.ai + .card {
  border-top-left-radius: 5px;
}
/* ---------- 帳的卡片(ItemCard.module.css) ---------- */
.card {
  padding: 10px 14px;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(30, 40, 60, 0.06);
}
.card-title {
  font-size: 13px;
}
.card .muted {
  font-size: 11px;
}
.card .amount {
  font-size: 14px;
  color: var(--app-recv);
}
.avatars i {
  width: 19px;
  height: 19px;
  font-size: 9px;
  background: var(--app-subtle);
  color: var(--app-others);
}
.avatars i.self {
  background: var(--app-avatar);
  color: var(--app-avatar-text);
}
.card-row.sub {
  font-size: 10.5px;
}
.before {
  margin: 2px 0 0 6px;
}
/* 卡片下面的小字(Chat.module.css .caption:多留 3px) */
.sumline {
  margin-top: 3px;
  font-size: 12px;
  padding: 3px 6px;
}
.typing {
  padding: 11px 14px;
  border-radius: 18px;
}

/* ---------- 開場(手機寬度):文字靠上、手機至少露出一半以上 ---------- */
@media (max-width: 819px) {
  .hero {
    padding-top: 28px;
    padding-bottom: 48px;
  }
  .hero .split {
    gap: 22px;
  }
  .hero .eyebrow {
    font-size: 13.5px;
    margin: 0 0 -10px;
  }
  .hero h1 {
    font-size: clamp(34px, 9.6vw, 40px);
    line-height: 1.2;
  }
  .hero .lead {
    margin-top: -6px;
    font-size: 16.5px;
    line-height: 1.65;
  }
  .hero .actions {
    margin-top: 2px;
  }
  .hero .visual-col {
    margin-top: 30px;
  }
  .hero .sticker-yellow {
    top: -14px;
  }
  /* 色塊:框住文字和手機,不填空白 */
  .hero .blob-sun {
    width: 180px;
    height: 180px;
    top: 24px;
    right: -100px;
  }
  .hero .blob-sky {
    width: 110px;
    height: 110px;
    left: -55px;
    right: auto;
    top: 250px;
    opacity: 0.16;
  }
  .hero .blob-coral {
    width: 150px;
    height: 150px;
    left: auto;
    right: -60px;
    top: 470px;
    bottom: auto;
    opacity: 0.4;
  }
}


/* ---------- 怎麼算一次的圓圈(SignIn.module.css .check):淡色圓 + 細線勾;不算用灰色圓 + 細線叉 ---------- */
.rule-mark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0;
}
.rule-mark svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rule-yes .rule-mark {
  background: var(--app-bubble-ai);
  color: var(--app-recv);
}
.rule-no .rule-mark {
  background: var(--app-gray-soft);
  color: var(--text-3);
}
.rule-list .rule-mark {
  margin-top: 0;
}
.rule-list li {
  align-items: center;
}
/* 怎麼算一次的圓圈:照 App 的 ListMark(components/ListMark.tsx):直徑 20、裡面的記號 10、跟字隔 8px、對齊第一行 */
.rule-list li {
  align-items: flex-start;
  gap: 8px;
}
.rule-list .rule-mark {
  width: 20px;
  height: 20px;
  /* 圓圈裡 font-size 是 0,不能用 em:第一行高 15.5px × 1.7 ≈ 26px → 往下 3px 置中 */
  margin-top: 3px;
}
.rule-list .rule-mark svg {
  width: 10px;
  height: 10px;
  stroke-width: 1.6;
}
.rule-yes .rule-mark {
  background: color-mix(in srgb, #4a90e2 16%, transparent);
  color: #245a9a;
}
.rule-no .rule-mark {
  background: color-mix(in srgb, #9297a1 18%, transparent);
  color: #9297a1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .rule-yes .rule-mark {
    color: rgb(82, 152, 234);
  }
  :root:not([data-theme='light']) .rule-no .rule-mark {
    color: rgb(143, 146, 151);
  }
}
:root[data-theme='dark'] .rule-yes .rule-mark {
  color: rgb(82, 152, 234);
}
:root[data-theme='dark'] .rule-no .rule-mark {
  color: rgb(143, 146, 151);
}


/* =====================================================================
   用說的就記好:回到第 8 版的樣子(飄著、歪一點的泡泡 + 圓圓的表),只改三件事:
   ① 三句話都是按鈕,點了照那句填好表 ② 選中的那句下面接一則回覆 ③ 表上面多一行誰付的,結果改成誰要給誰
   ===================================================================== */
#speak::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  right: -110px;
  top: 120px;
  background: var(--brand-tint);
}
@media (min-width: 820px) {
  #speak::before {
    right: calc(50% - 560px);
    top: 70px;
    width: 400px;
    height: 400px;
  }
}
.float-bubbles {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fb {
  font: inherit;
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 6px 16px rgba(30, 40, 60, 0.1);
  max-width: 85%;
}
/* 你說的那幾句:按鈕;選中的深一點、像按下去 */
button.fb {
  align-self: flex-end;
  border: 0;
  border-bottom-right-radius: 6px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, translate 0.12s ease;
}
button.fb:hover {
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 40%, transparent);
}
button.fb:active {
  translate: 0 1px;
}
button.fb[aria-pressed='true'] {
  /* 選中的那句維持深藍(2026-10-14:按鈕改主題色時這裡不跟著改) */
  background: #2a6cc0;
  box-shadow: 0 2px 6px rgba(30, 40, 60, 0.16);
}
.fb-1 {
  transform: rotate(-2deg);
}
.fb-2 {
  margin-right: 28px;
  transform: rotate(1.5deg);
}
.fb-3 {
  margin-right: 8px;
  transform: rotate(-1deg);
}
/* 小幫手的回覆:同樣歪一點,顏色跟 App 的回覆泡泡一樣 */
.fb-ai {
  align-self: flex-start;
  margin: -2px 0 2px 6px;
  background: var(--app-bubble-ai);
  color: var(--app-ai-text);
  transform: rotate(1deg);
}
.form-label {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  margin: 4px 0 -12px 8px;
  font-size: 13.5px;
  color: var(--text-3);
}
.field {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--text-2);
}
.field > span:first-child {
  width: 2.6em;
  flex: none;
}
.field input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
}
.field input:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.mini-result {
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand-deep);
  font-size: 15px;
  display: grid;
  gap: 2px;
}

/* 換色示範卡:拿掉像進度條的裝飾後,上下留白重新排 */
.theme-body {
  padding: 16px 18px 18px;
}
.theme-amt {
  margin-top: 2px;
}
/* 示範畫面裡的帳本頁:拿掉返回箭頭(不能點),標題靠左對齊 */
.pagehead {
  padding-left: 18px;
}

/* 用說的段:跟其他段一樣混用頁面的點綴色(珊瑚小標、蜜桃色的圓、珊瑚貼紙、晴天黃的結果框) */
#speak::before {
  background: var(--peach);
}
/* 背景不連續重複:常見問題是頁面底色,結尾從淡藍灰開始往淡主題色漸層(原本也從頁面底色開始,跟常見問題接成一片) */
.ending {
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--brand-tint) 100%);
}

/* 用說的段(回到第 8 版的感覺):回覆是網站的晴天黃泡泡;結果是第 8 版的淡藍一行字 */
.fb-ai {
  background: var(--sun-tint);
  color: var(--text);
}
.mini-result {
  line-height: 1.5;
}
/* 誰要給誰:一個人一行,淡藍底(第 8 版的結果框),不用黃色 */
.mini-result .mr-row {
  display: flex;
  justify-content: space-between;
}
.mini-result .mr-amt {
  color: var(--brand-strong);
}
/* 換色示範卡:裝飾的色條放回來(卡片不是 App 的畫面,只是看顏色) */
.theme-bar {
  margin-top: 12px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-fill, #4a90e2) 22%, var(--surface));
}
.theme-bar span {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: inherit;
  background: var(--theme-fill, #4a90e2);
  transition: background-color 0.3s ease;
}

/* 用說的段的回覆:晴天黃(跟貼紙同色),深色字 #3a2c00(對比約 10:1);深色模式用壓暗的黃 + 淺黃字 */
.fb-ai {
  background: var(--sun);
  color: #3a2c00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .fb-ai {
    background: #6b5413;
    color: #fff1c7;
  }
}
:root[data-theme='dark'] .fb-ai {
  background: #6b5413;
  color: #fff1c7;
}

/* ---------- 方案(回到原本的內容):三塊分開,各有小標;手機上大約一塊一個畫面 ---------- */
.sub-head {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 400;
  text-align: center;
  color: var(--text);
}
.plan-block + .plan-block {
  margin-top: 96px;
}
@media (max-width: 819px) {
  .plan-block + .plan-block {
    margin-top: 132px;
  }
}
.buy-notes {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.buy-notes ul {
  margin: 0;
  padding: 16px 20px 16px 40px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  gap: 6px;
  font-size: 15.5px;
  color: var(--text-2);
}
.buy-notes li::marker {
  color: var(--brand);
}
.plan-note {
  margin-top: 20px;
  text-align: center;
  font-size: 15.5px;
  color: var(--text-2);
}

/* ---------- 攤攤的小黑貓(彩蛋,只在介紹頁):跟圖示同一隻(深藍黑的頭、尖耳朵、黃眼睛)。
   不搶戲:開場只有尾巴,其他各一處、動得很少。點、滑過的反應在 split-cat.js(data-cat="peek" 探頭、"wag" 甩尾巴;
   點的範圍是另外的 .cat-hit,至少 44px,只放在留白或不能點的示範畫面上) ---------- */
:root {
  --cat: #10224a; /* 跟 V3 圖示同色 */
  --cat-eye: #ffdc6e;
  --cat-rim: transparent; /* 深色模式貓會融進背景,描一圈淡淡的邊 */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --cat-rim: #4a5878;
  }
}
:root[data-theme='dark'] {
  --cat-rim: #4a5878;
}
.cat-head {
  fill: var(--cat);
  stroke: var(--cat-rim);
  stroke-width: 4;
  stroke-linejoin: round;
}
.cat-eyes {
  fill: var(--cat-eye);
  transform-origin: center;
  transform-box: fill-box; /* 眨眼時從眼睛中間壓扁 */
}
.cat-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* 點的範圍(看不到):手指點得到、不擋內容 */
.cat-hit {
  position: absolute;
  z-index: 3;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 尾巴:短、粗、尾端捲成一個小勾。平常很久才輕輕晃一下,點了甩一下 */
.cat-tail-box {
  position: absolute;
  display: block;
  width: 27px;
  height: 36px;
  pointer-events: none;
  transform-origin: 33% 0; /* 根部(尾巴從這裡垂下來) */
}
.tail-hero {
  width: 34px; /* 開場那條大一點,比較看得到 */
  height: 72px; /* 往上多畫一段,從開場的上緣外面接進來,看不到尾巴的起點 */
  --tail-pivot: 33.3% 18px; /* 支點=尾巴從開場上緣冒出來的那一點(盒子往上超出 18px,尾巴在 x=10/30) */
  transform-origin: var(--tail-pivot); /* 點了甩 */
}
.tail-hero .cat-tail {
  transform-origin: var(--tail-pivot); /* 平常的擺動 */
}
.cat-tail {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 33% 0;
  animation: tail-sway 7.5s ease-in-out 2s infinite;
}
.cat-tail path {
  fill: none;
  stroke: var(--cat);
  stroke-width: 7;
  stroke-linecap: round;
  filter: drop-shadow(0 0 0.6px var(--cat-rim)) drop-shadow(0 0 0.6px var(--cat-rim));
}
@keyframes tail-sway {
  0%,
  80%,
  100% {
    transform: rotate(0deg);
  }
  86% {
    transform: rotate(8deg);
  }
  92% {
    transform: rotate(-5deg);
  }
}

/* 1. 頁面最上面右上角垂著尾巴(跟著頁面捲走,不黏在頂端列) */
.hero-tail {
  position: absolute;
  z-index: 2; /* 畫在黃色色塊上面,不被蓋住 */
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
}
.tail-hero {
  top: -18px; /* 上面那段藏在開場上緣外面(開場會裁掉),看起來是從頂端列後面垂下來 */
  right: 32px; /* 手機:比留白再往內,上面是空的(標題在左邊) */
}
.hit-tail-hero {
  top: 0;
  right: 24px;
  width: 48px;
  height: 56px;
}
@media (min-width: 820px) {
  .tail-hero {
    top: -16px;
    --tail-pivot: 33.3% 16px;
    right: -14px; /* 電腦:手機框右上角再往右一點,在內容區外面的留白 */
  }
  .hit-tail-hero {
    top: 0;
    right: -22px;
  }
}

/* 2. 「怎麼算的」手機右邊:斜斜探頭,平常只露一隻耳朵和一點頭;探出來時兩隻黃眼睛都看得到 */
.side-cat {
  position: absolute;
  z-index: 1; /* 手機是 2:身體藏在手機後面 */
  top: 30%;
  left: calc(50% + 150px - 38px);
  width: 44px;
  height: 46px;
  pointer-events: none;
  --cat-peek: 28px; /* 探出來的距離(split-cat.js 讀這個):兩隻眼睛剛好都出來。360 寬時耳朵尖會被畫面邊切到一點點 */
}
.side-cat .cat-svg {
  transform: rotate(34deg); /* 往外歪著頭 */
}
@media (min-width: 820px) {
  .side-cat {
    left: calc(50% + 150px - 48px);
    width: 56px;
    height: 59px;
    --cat-peek: 36px;
  }
}
.side-hit {
  top: calc(30% - 6px);
  left: calc(50% + 150px - 16px); /* 一半在手機框上(示範畫面,不能點),一半在留白 */
  width: 46px;
  height: 64px;
}

/* 3. 結尾的開始使用按鈕後面:露出頭頂和黃眼睛;點貓、滑過按鈕時再探高一點點 */
.cta-peek {
  position: relative;
  display: inline-flex;
  margin-top: 8px;
}
.cta-peek .btn {
  position: relative;
  z-index: 1;
}
.cta-cat {
  position: absolute;
  right: 24px;
  bottom: calc(100% - 4px);
  width: 50px;
  height: 32px;
  pointer-events: none;
  transform-origin: 50% 100%;
  --cat-peek: 8px;
}
.cta-hit {
  right: 18px;
  bottom: 100%; /* 只在按鈕上面,不蓋到按鈕 */
  width: 62px;
  height: 44px;
}

/* 4. 「顏色」那張卡片後面:尾巴從卡片右邊露出來往上捲 */
.tail-card {
  z-index: 0; /* 卡片是 1:尾巴根部藏在卡片後面 */
  top: 122px; /* 靠近卡片右下角(卡片約 165px 高,圓角 22px 之上) */
  left: calc(50% + 150px - 20px); /* 轉成橫的之後,根部在卡片右緣往內 9px */
  rotate: -90deg; /* 同一條尾巴橫過來:往右伸、尾端往上勾 */
}
.tail-card .cat-tail {
  animation-duration: 9s;
  animation-delay: 4s;
}
.hit-tail-card {
  top: 94px;
  left: calc(50% + 150px - 14px);
  width: 44px;
  height: 46px;
}

/* 頁尾:名字旁邊放標語 */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tagline {
  padding-top: 3px; /* 跟名字的字對齊(名字字比較大) */
  font-size: 15px;
  color: var(--text-2);
}

@media (prefers-reduced-motion: reduce) {
  .cat-tail {
    animation: none !important;
  }
  .cat-hit {
    cursor: default;
  }
}

/* ---------- 開場文案 A(一起攤攤吧):標題變一行,用大一點的字、多一點間距、副標固定兩行補回高度,
   開場的高度和手機的位置跟原本兩行標題時差不多(手機不會往上擠) ---------- */
.hero .lead .ib {
  display: block; /* 副標固定兩行:出去玩的錢交給它,/ 算好誰該給誰,不用下載。 */
}
@media (max-width: 819px) {
  .hero {
    padding-top: 54px; /* 文字整組往下,上面留點空 */
  }
  .hero .eyebrow {
    margin-bottom: -6px;
  }
  .hero h1 {
    margin-top: 0;
    font-size: clamp(42px, 11.6vw, 48px);
    line-height: 1.12;
    letter-spacing: 0.02em;
  }
  .hero .lead {
    margin-top: -4px; /* 小字、標題、副標靠緊成一組 */
  }
  .hero .actions {
    margin-top: 20px; /* 按鈕上下多一點空 */
  }
  .hero .visual-col {
    margin-top: 60px;
  }
}
@media (min-width: 820px) {
  .hero h1 {
    font-size: 62px;
    line-height: 1.15;
    letter-spacing: 0.02em;
  }
  .hero .lead {
    margin-top: 20px;
  }
  .hero .copy {
    padding-top: 104px; /* 文字塊變矮了,往下一點跟手機的中段對齊 */
  }
}