/* Layout: ledger-paper sheet — ruled sections, left-aligned copy, one bold hero artefact (a payroll close chain) */
:root{
  --paper:#f2f5f0;      /* ledger paper */
  --sheet:#fbfcf9;      /* raised sheet */
  --ink:#1c2a3a;        /* ink navy */
  --ink-2:#4b5a68;      /* secondary ink */
  --rule:#cfdad2;       /* ledger rule line */
  --accent:#0e7458;     /* ledger green */
  --accent-soft:#dcefe6;
  --blue:#2f63a8;       /* ledger blue rule */
  --promo:#b86a0c;      /* promo amber */
  --promo-soft:#fbecd6;
  --f-display:"LXGW WenKai TC","Noto Serif TC",serif;
  --f-body:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --s1:.75rem;--s2:.875rem;--s3:1rem;--s4:1.25rem;--s5:1.75rem;--s6:2.5rem;--s7:3.25rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#0e1513;--sheet:#152019;--ink:#e3ebe6;--ink-2:#a7b6ae;--rule:#2a3a33;
    --accent:#45c79c;--accent-soft:#163a2e;--blue:#7ea8e6;--promo:#f0a94a;--promo-soft:#3a2a12;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0e1513;--sheet:#152019;--ink:#e3ebe6;--ink-2:#a7b6ae;--rule:#2a3a33;
  --accent:#45c79c;--accent-soft:#163a2e;--blue:#7ea8e6;--promo:#f0a94a;--promo-soft:#3a2a12;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--s3);line-height:1.75;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--sheet)}
.wrap{max-width:1120px;margin:0 auto}
h1,h2,h3{font-family:var(--f-display);font-weight:700;text-wrap:balance;margin:0;line-height:1.3}
p{margin:0}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.label{font-size:var(--s1);letter-spacing:.12em;color:var(--ink-2);font-weight:500}

/* sample banner + tabs */
.sample{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between;padding-block:.6rem;font-size:var(--s2);color:var(--ink-2);border-bottom:1px dashed var(--rule)}
.tabs{display:flex;gap:.25rem;background:var(--sheet);border:1px solid var(--rule);border-radius:999px;padding:.2rem}
.tabs button{font:inherit;font-size:var(--s2);border:0;background:none;color:var(--ink-2);padding:.3rem .9rem;border-radius:999px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--accent);color:var(--sheet)}

/* site chrome */
.promo{background:var(--promo-soft);color:var(--promo);font-size:var(--s2);padding-block:.45rem;margin-top:.75rem;border-radius:6px;display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;padding-inline:.9rem}
.promo b{font-weight:700}
.promo .tag{font-size:var(--s1);border:1px solid currentColor;border-radius:4px;padding:0 .35rem}
nav.site{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;padding-block:1rem;border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:baseline;gap:.5rem;font-family:var(--f-display);font-size:var(--s5);font-weight:700}
.brand small{font-family:var(--f-body);font-size:var(--s1);color:var(--promo);border:1px solid var(--promo);border-radius:4px;padding:0 .3rem;font-weight:500}
nav.site ul{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;list-style:none;margin:0;padding:0;font-size:var(--s2)}
nav.site ul a{color:var(--ink);text-decoration:none}
nav.site .grow{flex:1}
.btn{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:var(--s2);font-weight:700;border-radius:8px;padding:.55rem 1.1rem;text-decoration:none;cursor:pointer;border:1px solid var(--accent)}
.btn.primary{background:var(--accent);color:var(--sheet)}
.btn.ghost{background:transparent;color:var(--accent)}
section{padding-block:var(--s7);border-bottom:1px solid var(--rule)}
.sec-head{display:grid;gap:.5rem;max-width:62ch;margin-bottom:var(--s6)}
.sec-head h2{font-size:var(--s6)}
.sec-head p{color:var(--ink-2)}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--s6);align-items:center}
.hero h1{font-size:clamp(2rem,4.6vw,3.4rem)}
.hero h1 em{font-style:normal;color:var(--accent);background:linear-gradient(transparent 62%,var(--accent-soft) 62%)}
.hero .lede{color:var(--ink-2);margin-top:var(--s4);max-width:34em}
.hero .cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s5)}
.hero .fine{font-size:var(--s1);color:var(--ink-2);margin-top:.75rem}

/* payroll close chain artefact */
.chain{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:1.25rem 1.25rem 1rem;
  background-image:repeating-linear-gradient(var(--sheet) 0 31px,var(--rule) 31px 32px);}
.chain-h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;padding-bottom:.5rem}
.chain-h h3{font-size:var(--s4)}
.chain ol{list-style:none;margin:0;padding:0;display:grid;gap:0}
.chain li{display:grid;grid-template-columns:2.2rem 1fr auto;align-items:center;min-height:32px;font-size:var(--s2)}
.chain .n{font-family:var(--f-mono);color:var(--blue)}
.chain .st{font-size:var(--s1);border-radius:999px;padding:0 .55rem;line-height:1.6}
.st.done{background:var(--accent-soft);color:var(--accent)}
.st.now{background:var(--promo-soft);color:var(--promo)}
.st.wait{color:var(--ink-2);border:1px solid var(--rule)}
.chain .sum{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:2px double var(--ink);margin-top:.5rem;padding-top:.5rem;font-size:var(--s2)}
.chain .sum b{font-family:var(--f-mono);font-size:var(--s4)}

/* modules */
.mods{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5)}
.mod{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:1.5rem;display:grid;gap:1rem;align-content:start}
.mod .top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.mod h3{font-size:var(--s5)}
.mod .cnt{font-family:var(--f-mono);font-size:var(--s2);color:var(--ink-2)}
.mod ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.mod li{font-size:var(--s2);border:1px solid var(--rule);border-radius:6px;padding:.1rem .55rem;background:var(--paper)}
.mod .status{font-size:var(--s1);color:var(--ink-2)}
.addons{display:flex;flex-wrap:wrap;gap:.75rem 2rem;margin-top:var(--s5);font-size:var(--s2);color:var(--ink-2)}
.addons b{color:var(--ink)}

/* scenarios */
.scen{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.scen article{display:grid;gap:.6rem;align-content:start;border-top:3px solid var(--accent);padding-top:1rem}
.scen h3{font-size:var(--s4)}
.scen p{font-size:var(--s2);color:var(--ink-2)}
.scen .flow{font-family:var(--f-mono);font-size:var(--s1);color:var(--blue);line-height:1.6}

/* law */
.law{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--sheet)}
.law div{padding:1.1rem;border-right:1px solid var(--rule);display:grid;gap:.35rem;align-content:start}
.law div:last-child{border-right:0}
.law .art{font-family:var(--f-mono);color:var(--accent);font-size:var(--s2)}
.law b{font-size:var(--s3)}
.law p{font-size:var(--s2);color:var(--ink-2)}
.law-note{font-size:var(--s1);color:var(--ink-2);margin-top:.75rem}

/* setup */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s6)}
.steps h3{font-size:var(--s4);margin-bottom:.75rem}
.steps ol{margin:0;padding-left:1.4rem;display:grid;gap:.4rem;font-size:var(--s2)}
.steps ol li::marker{font-family:var(--f-mono);color:var(--blue)}
.steps .hint{font-size:var(--s1);color:var(--ink-2);margin-top:.75rem}

/* faq */
.faq{display:grid;gap:0;max-width:760px}
.faq details{border-bottom:1px solid var(--rule);padding-block:.85rem}
.faq summary{cursor:pointer;font-weight:700}
.faq p{color:var(--ink-2);font-size:var(--s2);margin-top:.5rem}

footer{padding-block:var(--s6);display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;font-size:var(--s2);color:var(--ink-2)}
footer ul{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;list-style:none;margin:0;padding:0}

/* pricing */
.p-controls{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;margin-bottom:var(--s5)}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--sheet)}
.seg button{font:inherit;font-size:var(--s2);border:0;background:none;color:var(--ink-2);padding:.45rem 1rem;cursor:pointer;border-right:1px solid var(--rule)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:700}
.save{font-size:var(--s1);color:var(--promo);font-weight:700}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.plan{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:1.4rem;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:.9rem}
.plan.feat{border:2px solid var(--accent)}
.plan .ph{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.plan h3{font-size:var(--s4)}
.plan .flag{font-size:var(--s1);background:var(--promo-soft);color:var(--promo);border-radius:4px;padding:0 .4rem}
.plan .desc{font-size:var(--s2);color:var(--ink-2);min-height:3.5em}
.price{display:flex;align-items:baseline;gap:.35rem;flex-wrap:wrap}
.price b{font-family:var(--f-mono);font-size:var(--s6);font-weight:500;line-height:1}
.price span{font-size:var(--s1);color:var(--ink-2)}
.price s{font-family:var(--f-mono);font-size:var(--s2);color:var(--ink-2)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:var(--s2);align-content:start}
.plan li::before{content:"✓";color:var(--accent);margin-right:.45rem;font-weight:700}
.plan li.no{color:var(--ink-2)}
.plan li.no::before{content:"–";color:var(--ink-2)}
.plan .btn{justify-content:center}
.note{font-size:var(--s1);color:var(--ink-2);margin-top:1rem}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:1.5rem;margin-top:var(--s6)}
.calc label{display:grid;gap:.3rem;font-size:var(--s2)}
.calc input,.calc select{font:inherit;font-size:var(--s2);padding:.45rem .6rem;border:1px solid var(--rule);border-radius:6px;background:var(--paper);color:var(--ink)}
.calc .fields{display:grid;gap:.9rem}
.calc .chk{display:flex;gap:.5rem;align-items:center}
.receipt{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:var(--s2);display:grid;gap:.3rem;align-content:start}
.receipt div{display:flex;justify-content:space-between;gap:1rem}
.receipt .tot{border-top:2px double var(--ink);padding-top:.4rem;font-size:var(--s4);font-weight:500}
.receipt .disc{color:var(--promo)}
.tbl-wrap{overflow-x:auto;margin-top:var(--s6);border:1px solid var(--rule);border-radius:10px;background:var(--sheet)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:var(--s2)}
th,td{text-align:left;padding:.6rem .9rem;border-bottom:1px solid var(--rule)}
thead th{font-weight:700;background:var(--paper)}
tbody th{font-weight:500;color:var(--ink)}
td{color:var(--ink-2)}
td.y{color:var(--accent);font-weight:700}
tr.grp th{background:var(--accent-soft);color:var(--accent);font-size:var(--s1);letter-spacing:.12em}

.mods.three{grid-template-columns:repeat(3,1fr)}

/* demo app */
.demo-bar{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;margin-bottom:1rem;font-size:var(--s2)}
.demo-bar .chk{display:inline-flex;gap:.4rem;align-items:center}
.demo-bar .chk input{accent-color:var(--accent)}
.app{display:grid;grid-template-columns:220px 1fr;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--sheet);min-height:520px}
.side{background:var(--paper);border-right:1px solid var(--rule);padding:1rem .75rem;display:grid;gap:.9rem;align-content:start}
.side .co{font-family:var(--f-display);font-weight:700;font-size:var(--s4);padding-inline:.4rem}
.side .grp{display:grid;gap:.15rem}
.side .grp > span{font-size:var(--s1);letter-spacing:.12em;color:var(--ink-2);padding-inline:.4rem}
.side button{font:inherit;font-size:var(--s2);text-align:left;border:0;background:none;color:var(--ink);padding:.3rem .5rem;border-radius:6px;cursor:pointer;display:flex;justify-content:space-between;gap:.5rem}
.side button[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:700}
.side button .mt{font-size:.7rem;color:var(--ink-2);font-family:var(--f-mono)}
.side .off{opacity:.45}
.screen{padding:1.25rem 1.5rem;display:grid;gap:1rem;align-content:start;min-width:0}
.screen h3{font-size:var(--s5)}
.helpcard{background:var(--accent-soft);color:var(--ink);border-radius:8px;padding:.7rem .9rem;font-size:var(--s2)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.tile{border:1px solid var(--rule);border-radius:8px;padding:.75rem .9rem;display:grid;gap:.15rem}
.tile b{font-family:var(--f-mono);font-size:var(--s5);font-weight:500}
.tile span{font-size:var(--s1);color:var(--ink-2)}
.dtbl{overflow-x:auto;border:1px solid var(--rule);border-radius:8px}
.dtbl table{min-width:520px}
.pill{font-size:var(--s1);border-radius:999px;padding:0 .55rem;white-space:nowrap}
.pill.p{background:var(--promo-soft);color:var(--promo)}
.pill.a{background:var(--accent-soft);color:var(--accent)}
.locked{border:1px dashed var(--rule);border-radius:10px;padding:2rem;display:grid;gap:.6rem;justify-items:start}
.locked b{font-size:var(--s4)}
.voucher td.num,.voucher th.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.src{font-size:var(--s1);color:var(--ink-2)}
.mini-btn{font:inherit;font-size:var(--s1);border:1px solid var(--accent);color:var(--accent);background:none;border-radius:6px;padding:.15rem .6rem;cursor:pointer}

/* roadmap */
.road{display:grid;gap:0;border-left:2px solid var(--rule);margin-left:.5rem}
.stage{position:relative;padding:0 0 1.75rem 1.5rem;display:grid;gap:.4rem}
.stage::before{content:"";position:absolute;left:-7px;top:.45rem;width:12px;height:12px;border-radius:50%;background:var(--sheet);border:2px solid var(--rule)}
.stage.done::before{background:var(--accent);border-color:var(--accent)}
.stage.next::before{background:var(--promo);border-color:var(--promo)}
.stage .sh{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline}
.stage h3{font-size:var(--s4)}
.stage p{font-size:var(--s2);color:var(--ink-2);max-width:70ch}
.stage ul{margin:0;padding-left:1.1rem;font-size:var(--s2);color:var(--ink-2);display:grid;gap:.2rem}
.legend{display:flex;flex-wrap:wrap;gap:1rem;font-size:var(--s1);color:var(--ink-2);margin-bottom:1.5rem}

@media (max-width:900px){
  .mods.three{grid-template-columns:1fr}
  .app{grid-template-columns:1fr}
  .side{border-right:0;border-bottom:1px solid var(--rule);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .side .co{grid-column:1/-1}
  .tiles{grid-template-columns:1fr 1fr}
  .hero,.steps,.calc{grid-template-columns:1fr}
  .plans{grid-template-columns:repeat(2,1fr)}
  .scen{grid-template-columns:1fr}
  .law{grid-template-columns:repeat(2,1fr)}
  .law div:nth-child(2){border-right:0}
  .law div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
}
@media (max-width:560px){
  .mods,.plans,.law{grid-template-columns:1fr}
  .law div{border-right:0;border-bottom:1px solid var(--rule)}
  .law div:last-child{border-bottom:0}
  section{padding-block:var(--s6)}
}
@media (prefers-reduced-motion:no-preference){
  .chain li .st.now{animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.55}}
}