@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,ital,wght@9..144,0,300;9..144,0,400;9..144,1,300;9..144,0,600&family=Inter+Tight:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

/* ══ PromptPay Ledger · 站点层 ══════════════════════════════════
   颜色一律继承套件的 tokens.css（--tj-*），这里只补首页和交付物的排版。
   同一份真相不许有两个副本：绝不在这里重新定义颜色。
   ═════════════════════════════════════════════════════════════ */
:root{
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Inter Tight',system-ui,-apple-system,sans-serif;
  --mono:'Space Mono',ui-monospace,'SF Mono',monospace;
  --shadow-sm:2px 4px 14px rgba(28,26,23,.05);
  --shadow-md:3px 6px 26px rgba(28,26,23,.07);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tj-bg);color:var(--tj-ink);
  font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,canvas{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--tj-accent);outline-offset:3px;border-radius:2px}

/* ── 三级极端排版 ── */
.eyebrow{font:700 .67rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--tj-accent);margin:0 0 1rem}
h1{font-family:var(--display);font-weight:300;font-size:clamp(2.6rem,6.2vw,5.4rem);
  line-height:.92;letter-spacing:-.035em;margin:0 0 1.4rem;text-wrap:balance}
h1 em{font-style:italic;font-weight:300;color:var(--tj-accent)}
h2{font-family:var(--display);font-weight:300;font-size:clamp(1.9rem,4vw,3.2rem);
  line-height:1;letter-spacing:-.028em;margin:0;text-wrap:balance}
h3{font-family:var(--display);font-weight:600;font-size:1.14rem;line-height:1.3;margin:0 0 .4rem}
.lede{font-size:clamp(1rem,1.25vw,1.16rem);color:var(--tj-ink-2);max-width:58ch;margin:0 0 1.8rem}
.micro{font:400 .74rem/1.6 var(--mono);color:var(--tj-ink-3);letter-spacing:.02em}
.note{font-size:.9rem;color:var(--tj-ink-2);background:var(--tj-surface);
  border-left:3px solid var(--tj-accent);border-radius:0 12px 12px 0;
  padding:1.05rem 1.35rem;margin:1.3rem 0 .8rem;max-width:none;box-shadow:var(--shadow-sm)}
.note b{color:var(--tj-ink)}

/* ── header ── */
.site-head{position:sticky;top:0;z-index:40;height:70px;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:0 clamp(1.1rem,4.5vw,4rem);
  background:rgba(248,246,242,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--tj-line)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:600;letter-spacing:-.02em}
.brand-mark{width:34px;height:34px;border-radius:9px;flex:none;background:var(--tj-accent);
  box-shadow:var(--shadow-sm);display:grid;place-items:center;color:var(--tj-accent-ink);
  font:700 .62rem var(--mono)}
.site-head nav{display:flex;gap:1.7rem;font-size:.87rem;color:var(--tj-ink-2)}
.site-head nav a{text-decoration:none;padding:.2rem 0;border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.site-head nav a:hover{color:var(--tj-accent);border-bottom-color:var(--tj-accent)}
.lang{border:1px solid var(--tj-line);background:var(--tj-surface);border-radius:999px;
  padding:.36rem .9rem;font:inherit;font-size:.79rem;cursor:pointer;transition:all .2s var(--ease)}
.lang:hover{border-color:var(--tj-accent);color:var(--tj-accent)}

/* ── hero ── */
.hero{display:grid;grid-template-columns:minmax(320px,1.02fr) minmax(300px,.98fr);
  gap:clamp(1.6rem,4vw,4.5rem);align-items:center;
  padding:clamp(3rem,6.5vw,6rem) clamp(1.1rem,4.5vw,4rem) clamp(2.6rem,5vw,4.5rem)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:0 0 1.15rem}
.hero-actions .tj-btn{min-height:52px;padding:.8rem 1.6rem;font-size:.96rem}
.honesty{font-size:.81rem;color:var(--tj-ink-3);max-width:52ch;margin:0}
.hero-visual{position:relative;min-height:430px;border-radius:24px;overflow:hidden;
  border:1px solid var(--tj-line-soft);box-shadow:var(--shadow-md);
  background:radial-gradient(120% 90% at 24% 16%, #FBFAF7 0%, #F2EFE9 46%, #E7E2D9 100%)}
#paperStack{position:absolute;inset:0}
#paperStack canvas{width:100%!important;height:100%!important}
.hero-visual figcaption{position:absolute;left:1rem;right:1rem;bottom:1rem;display:flex;
  gap:.9rem;align-items:baseline;flex-wrap:wrap;padding:.85rem 1.05rem;border-radius:13px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border:1px solid var(--tj-line-soft);
  box-shadow:var(--shadow-sm);font-size:.79rem;color:var(--tj-ink-2)}
.hero-visual figcaption b{font:700 .68rem var(--mono);color:var(--tj-accent);letter-spacing:.06em}
.dot{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:.4rem;
  vertical-align:baseline;box-shadow:1px 1px 3px rgba(28,26,23,.14)}
.dot--overdue{background:var(--tj-accent)}
.dot--paper{background:#e3ded4}

/* ── 数据条 ── */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--tj-line);
  border-bottom:1px solid var(--tj-line);margin:0 clamp(1.1rem,4.5vw,4rem)}
.strip div{padding:1.5rem;border-right:1px solid var(--tj-line)}
.strip div:last-child{border-right:0}
.strip strong{display:block;font:300 2.05rem/1 var(--display);color:var(--tj-accent);
  letter-spacing:-.025em;margin-bottom:.35rem;font-variant-numeric:tabular-nums}
.strip strong em{font-style:normal;font-size:.95rem;font-family:var(--mono);letter-spacing:0}
.strip span{font:400 .72rem/1.45 var(--mono);color:var(--tj-ink-3);letter-spacing:.03em}

/* ── section ── */
section{padding:clamp(3.4rem,6.5vw,6rem) clamp(1.1rem,4.5vw,4rem)}
.tone{background:var(--tj-surface-2);border-top:1px solid var(--tj-line);border-bottom:1px solid var(--tj-line)}
.sec-head{max-width:1160px;margin:0 auto 2.3rem;display:grid;grid-template-columns:auto 1fr;
  gap:.9rem 2.2rem;align-items:baseline}
.sec-no{font:700 .74rem var(--mono);letter-spacing:.16em;color:var(--tj-accent);padding-top:.5rem}
.sec-head p{grid-column:2;margin:.25rem 0 0;color:var(--tj-ink-2);max-width:62ch}
.tj-wrap{max-width:1160px;margin:0 auto}

/* ── 计算器 ── */
.calc-card{padding:clamp(1.3rem,3vw,2.1rem);box-shadow:var(--shadow-md)}
.calc-top{display:grid;grid-template-columns:1.2fr 1.4fr .9fr;gap:1rem;margin-bottom:1.4rem}
.lines-table th{white-space:nowrap;font:700 .64rem var(--mono);letter-spacing:.07em}
.lines-table td{padding:.45rem .4rem;vertical-align:middle}
.lines-table .tj-input{padding:.6rem .7rem;font-size:.92rem}
.lines-table .line-del{padding:.3rem .6rem;line-height:1;font-size:1.05rem}
.calc-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin-top:1.1rem;flex-wrap:wrap}
.calc-actions .tj-btn--primary{min-height:48px;padding:.7rem 1.8rem}

/* ── 结果 ── */
.result{margin-top:1.5rem;border-top:1px solid var(--tj-line);padding-top:1.3rem}
.result[hidden]{display:none}
.result-head{display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap;margin-bottom:1rem}
.verdict{font:700 .68rem var(--mono);letter-spacing:.09em;text-transform:uppercase;
  padding:.34rem .8rem;border-radius:999px;white-space:nowrap}
.v-owed{background:var(--tj-accent-soft);color:#9C4A2A;border:1px solid var(--tj-accent-line)}
.v-clear{background:#EAEEE3;color:#6C7A5E;border:1px solid #C9D3BC}
.result-table{font-size:.88rem}
.result-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.result-table .cite{font:400 .72rem var(--mono);color:var(--tj-ink-3);white-space:nowrap}
.result-table tr.is-late td{background:var(--tj-accent-soft)}
.totals{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.2rem;
  padding-top:1.1rem;border-top:1px solid var(--tj-line-soft)}
.totals div{display:flex;flex-direction:column;gap:.25rem}
.totals span{font:400 .72rem var(--mono);color:var(--tj-ink-3);letter-spacing:.04em}
.totals b{font:300 1.7rem var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.totals b.accent{color:var(--tj-accent)}
.totals .grand b{font-size:2.1rem}
.note-line{background:var(--tj-accent-soft);border-left:2.5px solid var(--tj-accent);
  border-radius:0 8px 8px 0;padding:.75rem 1rem;font-size:.86rem;color:var(--tj-ink-2);margin:1rem 0 .6rem}

/* ── 法条表 ── */
.law-table{font-size:.9rem}
.law-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.law-table a{color:var(--tj-accent);text-decoration:none;border-bottom:1px solid transparent;
  font:400 .82rem var(--mono)}
.law-table a:hover{border-bottom-color:var(--tj-accent)}

/* ── 付费包 ── */
.pack-rail{display:grid;grid-template-columns:1.12fr .88fr;border:1px solid var(--tj-line);
  border-radius:20px;overflow:hidden;background:var(--tj-surface);box-shadow:var(--shadow-md)}
.pack-list{padding:clamp(1.4rem,3vw,2.3rem)}
.pack-list ol{list-style:none;counter-reset:pk;margin:1.05rem 0 0;padding:0}
.pack-list li{counter-increment:pk;display:grid;grid-template-columns:auto 1fr;gap:1rem;
  padding:1.05rem 0;border-top:1px solid var(--tj-line-soft)}
.pack-list li::before{content:counter(pk,decimal-leading-zero);font:700 .72rem var(--mono);
  color:var(--tj-accent);padding-top:.22rem}
.pack-list li p{margin:.2rem 0 0;color:var(--tj-ink-2);font-size:.9rem}
.pack-buy{background:var(--tj-surface-2);border-left:1px solid var(--tj-line);
  padding:clamp(1.4rem,3vw,2.3rem);display:flex;flex-direction:column;gap:.75rem}
.pack-buy .price{font:300 3.9rem/1 var(--display);letter-spacing:-.035em;margin:0}
.pack-buy .price small{font:400 .74rem var(--mono);color:var(--tj-ink-3);letter-spacing:.06em;
  display:block;margin-top:.5rem}
.pack-buy .keeps{font-size:.9rem;color:var(--tj-ink-2);margin:.2rem 0}
.pack-buy .keeps b{color:var(--tj-accent)}
.pack-buy .tj-btn--primary{min-height:50px}

/* ── 生成器 ── */
.builder{margin-top:1.6rem;border:1px dashed var(--tj-line);border-radius:16px;
  padding:1.6rem clamp(1.1rem,2.5vw,2rem);background:var(--tj-surface)}
.builder[data-tj-unlocked="0"]{opacity:.55;pointer-events:none;user-select:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.builder-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.1rem}
.builder-out{margin-top:1.4rem;border:1px solid var(--tj-line);border-radius:12px;
  background:#fff;padding:2rem;max-height:560px;overflow:auto;font-size:.92rem;line-height:1.7}

/* ── 交付物本体（可打印） ── */
.pack-doc{color:var(--tj-ink)}
.pd-head{border-bottom:2px solid var(--tj-accent);padding-bottom:1.1rem;margin-bottom:1.8rem}
.pd-kicker{font:700 .66rem var(--mono);letter-spacing:.2em;color:var(--tj-accent);margin:0 0 .5rem}
.pack-doc h3{font:300 2rem/1.1 var(--display);letter-spacing:-.025em;margin:0 0 .35rem}
.pd-sub{font:400 .82rem/1.6 var(--body);color:var(--tj-ink-3);margin:0}
.pd-sec{margin:0 0 2.1rem}
.pd-no{font:700 .68rem var(--mono);letter-spacing:.14em;color:var(--tj-accent);
  border-bottom:1px solid var(--tj-line);padding-bottom:.5rem;margin:0 0 1rem}
.pd-hint{font-size:.85rem;color:var(--tj-ink-3);margin:0 0 .8rem}
.pd-letter{background:#fff;border:1px solid var(--tj-line);border-radius:10px;
  padding:1.7rem 1.9rem;font-size:.88rem;line-height:1.75}
.pd-letter p{margin:0 0 .85rem}
.pd-letter .l-right{text-align:right;color:var(--tj-ink-3)}
.pd-letter ul,.pd-letter ol{margin:.4rem 0 .9rem;padding-left:1.3rem}
.pd-letter li{margin:.28rem 0}
.pd-table{font-size:.82rem}
.pd-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pd-table .cite{font:400 .68rem var(--mono);color:var(--tj-ink-3)}
.pd-flag{background:var(--tj-surface-2);border-left:2.5px solid var(--tj-accent);
  border-radius:0 8px 8px 0;padding:.75rem 1rem;font-size:.84rem;color:var(--tj-ink-2);margin:.8rem 0}
.pd-esc{list-style:none;counter-reset:es;padding:0;margin:.4rem 0 0}
.pd-esc li{counter-increment:es;display:grid;grid-template-columns:auto 1fr;gap:.9rem;
  padding:.85rem 0;border-top:1px solid var(--tj-line-soft)}
.pd-esc li::before{content:counter(es,decimal-leading-zero);font:700 .7rem var(--mono);
  color:var(--tj-accent);padding-top:.2rem}
.pd-esc b{display:block;font-size:.92rem}
.pd-esc p{margin:.2rem 0 0;font-size:.85rem;color:var(--tj-ink-2)}
.pd-foot{border-top:1px solid var(--tj-line);margin-top:2rem;padding-top:1rem}
.pd-foot p{font-size:.76rem;color:var(--tj-ink-3);margin:.3rem 0}

/* ── FAQ ── */
.faq-wrap{max-width:860px;margin:0 auto}
.faq-wrap details{border-top:1px solid var(--tj-line);padding:1.15rem 0}
.faq-wrap details:last-of-type{border-bottom:1px solid var(--tj-line)}
.faq-wrap summary{font:600 1.1rem var(--display);cursor:pointer;letter-spacing:-.012em;
  list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.faq-wrap summary::-webkit-details-marker{display:none}
.faq-wrap summary::after{content:'+';font:400 1.3rem var(--mono);color:var(--tj-accent);flex:none}
.faq-wrap details[open] summary::after{content:'\2212'}
.faq-wrap details p{color:var(--tj-ink-2);max-width:70ch;margin:.7rem 0 0}

@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .hero-visual{min-height:320px;order:-1}
  .strip{grid-template-columns:1fr 1fr}
  .strip div:nth-child(2){border-right:0}
  .calc-top,.grid2{grid-template-columns:1fr}
  .pack-rail{grid-template-columns:1fr}
  .pack-buy{border-left:0;border-top:1px solid var(--tj-line)}
  .totals{grid-template-columns:1fr}
}
@media (max-width:700px){
  .site-head nav{display:none}
  body{font-size:16.5px}
  .strip div{padding:1.2rem}
}
@media print{
  .site-head,.hero,.strip,#calc,#law,#faq,site-footer,
  .pack-rail,.builder-actions,.sec-head,.builder>h3,.builder>.tj-hint,.builder .grid2{display:none!important}
  body{background:#fff;font-size:11pt}
  .builder,.builder-out{border:0!important;padding:0!important;max-height:none!important;
    overflow:visible!important;background:#fff!important;opacity:1!important}
  .pd-sec{break-inside:avoid}
  .pd-letter{border:0;padding:0}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}