/* 字型放在自己的伺服器（兩套都是 SIL Open Font License），不依賴外部服務 */
@font-face { font-family:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap; src:url(/static/fonts/instrument-serif-latin.woff2) format("woff2"); }
@font-face { font-family:Inter; font-style:normal; font-weight:400 600; font-display:swap; src:url(/static/fonts/inter-latin.woff2) format("woff2"); }

:root {
  --fg:#111; --muted:#6b6b6b; --line:#e6e6e6; --bg:#fcfcfa; --soft:#f4f4f1;
  --accent:#0f5c46; --accent-ink:#fff; --signal:#b4410c; --err:#b42318;
  --serif:"Instrument Serif", Georgia, serif;
  --sans:Inter, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --fg:#ededed; --muted:#9a9a9a; --line:#2c2c2c; --bg:#121212; --soft:#1b1b1b; --accent:#6fd1aa; --accent-ink:#0b1d16; --signal:#ff9a5c; --err:#f28b82; }
}

* { box-sizing:border-box; }
body { margin:0; font:16px/1.65 var(--sans); color:var(--fg); background:var(--bg); -webkit-font-smoothing:antialiased; }
a { color:var(--fg); text-underline-offset:3px; text-decoration-color:var(--line); }
a:hover { text-decoration-color:currentColor; }
h1, h2, h3 { margin:0; font-weight:400; }
code { font:0.88em var(--mono); background:var(--soft); padding:1px 5px; border-radius:4px; overflow-wrap:anywhere; }

.wrap { max-width:1040px; margin:0 auto; padding:0 24px; }
.narrow { max-width:720px; }
.page { padding-top:48px; padding-bottom:96px; min-height:60vh; }
.page h1 { font:clamp(36px,6vw,52px)/1.1 var(--serif); margin-bottom:20px; }
.page h2 { font:28px/1.2 var(--serif); margin:40px 0 16px; }
.muted { color:var(--muted); font-size:14px; }
.lead { font-size:19px; color:var(--muted); }

/* 頁首、頁尾 */
.top { display:flex; justify-content:space-between; align-items:baseline; padding-top:28px; padding-bottom:28px; }
.brand { font-weight:600; text-decoration:none; letter-spacing:-.01em; }
.top nav { display:flex; gap:28px; font-size:15px; }
.top nav a { color:var(--muted); text-decoration:none; }
.top nav a:hover { color:var(--fg); }
.foot { display:flex; justify-content:space-between; gap:16px; padding-top:32px; padding-bottom:40px; border-top:1px solid var(--line); font-size:14px; color:var(--muted); }
.foot a { color:var(--muted); }

/* 表單 */
label { display:block; margin:0 0 18px; font-weight:500; font-size:14px; }
.hint { font-weight:400; color:var(--muted); }
input[type=text], input[type=email], textarea { display:block; width:100%; margin-top:6px; padding:11px 0; font:inherit; color:var(--fg); background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; transition:border-color .15s; }
textarea { resize:vertical; }
input:focus, textarea:focus { outline:none; border-bottom-color:var(--fg); }
button, .button { display:inline-block; background:var(--fg); color:var(--bg); border:0; border-radius:999px; padding:13px 26px; font:inherit; font-weight:500; cursor:pointer; text-decoration:none; transition:opacity .15s; }
button:hover, .button:hover { opacity:.85; }
form.inline { display:flex; gap:16px; align-items:flex-end; margin:32px 0; } form.inline input { margin:0; }
.hp { position:absolute; left:-9999px; }
.error { color:var(--err); font-weight:500; }
.card { border-top:1px solid var(--line); padding-top:24px; margin:40px 0; }

/* 首頁 */
.hero { padding-top:80px; padding-bottom:120px; }
.hero h1 { font:clamp(48px,8.5vw,104px)/0.98 var(--serif); letter-spacing:-.02em; max-width:11em; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-top:64px; padding-top:40px; border-top:1px solid var(--fg); }
.hero .lead { margin:0; font-size:21px; line-height:1.55; max-width:24em; }
.signup .muted { margin:14px 0 0; }

.section { padding-bottom:120px; }
.section h2 { font:clamp(32px,4vw,44px)/1.1 var(--serif); padding-top:40px; margin-bottom:40px; border-top:1px solid var(--fg); }
.mail { max-width:680px; padding:36px 40px; background:var(--soft); border-radius:4px; }
.mail h3 { font:30px/1.2 var(--serif); margin:6px 0 24px; }
.mail p { margin:0 0 16px; }
.mail p:last-child { margin:24px 0 0; }
.tag { margin-left:6px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--signal); }

.steps { list-style:none; counter-reset:step; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.steps li { counter-increment:step; font-size:17px; }
.steps li::before { content:counter(step, decimal-leading-zero); display:block; font:15px var(--mono); color:var(--muted); margin-bottom:12px; }
.aside { margin:64px 0 0; font-size:17px; }
.aside a { color:var(--accent); text-decoration-color:currentColor; }

/* 免費工具：說明與常見問題 */
.explain, .faq { margin-top:72px; padding-top:32px; border-top:1px solid var(--fg); }
.explain h2, .faq h2 { margin-top:0; }
.faq h3 { font-size:17px; font-weight:600; margin:28px 0 6px; }
.faq p, .explain p { color:var(--muted); }
.explain a { color:var(--accent); text-decoration-color:currentColor; }

/* 掃描結果表格 */
table { width:100%; border-collapse:collapse; font-size:14px; table-layout:fixed; margin:24px 0; }
td, th { text-align:left; padding:10px 8px 10px 0; border-bottom:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere; }
th { font-weight:500; color:var(--muted); border-bottom-color:var(--fg); }
th:first-child, td.nowrap { width:120px; white-space:nowrap; }

@media (max-width: 760px) {
  .wrap { padding:0 16px; }
  .top nav { gap:18px; }
  .hero { padding-top:40px; padding-bottom:72px; }
  .hero-grid { grid-template-columns:1fr; gap:40px; margin-top:40px; padding-top:28px; }
  .section { padding-bottom:72px; }
  .steps { grid-template-columns:1fr; gap:28px; }
  .mail { padding:24px 20px; }
  form.inline { flex-direction:column; align-items:stretch; }
}