/* 序页 Preface 官网：和 Onset 序点 官网同一套规则
   纸白底 墨色字 一个钛蓝 宋体标题 靠左窄栏 发丝线 小号直角按钮 不出现黑色 */
:root{
  --bg:#f2f0eb;--block:#e9e6de;--raised:#f7f5f1;
  --text:#1e2532;--text-2:#4d535e;--text-3:#686c74;--line:#d6d2c7;
  --accent:#3e4a5c;--accent-ink:#f2f0eb;
  --serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",ui-serif,Georgia,serif;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Helvetica Neue","Microsoft YaHei",sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(20px,4vw,64px);--page:1280px;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:28px;height:56px;padding:0 var(--gutter);background:rgba(242,240,235,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:9px;margin-right:auto;font-family:var(--serif);font-size:18px;letter-spacing:.04em}
.brand img{width:22px;height:22px}
.nav nav{display:flex;gap:26px;font-size:13px;color:var(--text-2)}
.nav nav a:hover{color:var(--text)}
.cta{background:var(--accent);color:var(--accent-ink);font-size:13px;padding:6px 14px;border-radius:3px}

main{max-width:calc(var(--page) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--text-3)}

.hero{min-height:min(calc(100vh - 56px),860px);display:flex;flex-direction:column;padding:40px 0 64px}
.hero h1{margin-top:auto;font-family:var(--serif);font-weight:400;font-size:clamp(42px,9vw,132px);line-height:1.12;letter-spacing:.02em}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-foot{display:flex;align-items:center;gap:32px;margin-top:40px;padding-top:20px;border-top:1px solid var(--text)}
.hero-foot p{flex:1;color:var(--text-2);font-size:15px}
.round{width:104px;height:104px;border-radius:50%;border:1px solid var(--text-3);display:grid;place-content:center;text-align:center;font-family:var(--serif);font-size:17px;letter-spacing:.2em;color:var(--text-2);margin-top:-72px;background:var(--bg)}
.round i{font-style:normal;font-family:var(--font);font-size:14px;letter-spacing:0}
.round:hover{border-color:var(--accent);color:var(--accent)}

.block{padding:clamp(96px,12vw,160px) 0 0}
.block h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.2vw,56px);line-height:1.2;margin:28px 0 48px;letter-spacing:.02em}
.block h2.big{font-size:clamp(56px,8vw,112px);margin-bottom:8px}
.small{color:var(--text-3);font-size:13px;margin-top:20px}

.demos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.demos figure{border-top:1px solid var(--line);padding-top:20px}
.demos img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:6px;background:#fff}
.demos figcaption{margin-top:16px}
.demos b{display:block;font-family:var(--serif);font-weight:400;font-size:22px}
.demos span{display:block;color:var(--text-3);font-size:13px;margin-top:4px}

.prices{border-top:1px solid var(--text);max-width:960px}
.prices div{display:grid;grid-template-columns:240px 1fr auto;gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.prices dt{font-family:var(--serif);font-size:22px}
.prices dd{color:var(--text-2);font-size:14px}
.prices b{font-weight:500;font-size:19px;color:var(--accent);white-space:nowrap}

.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--text)}
.steps li{padding-top:22px}
.steps span{font-family:var(--mono);font-size:12px;color:var(--text-3)}
.steps b{display:block;font-family:var(--serif);font-weight:400;font-size:28px;margin:10px 0 8px}
.steps p{color:var(--text-2);font-size:14px;max-width:300px}

.incl{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin-top:36px;border-top:1px solid var(--text)}
.incl li{padding:22px 20px 26px 0;border-bottom:1px solid var(--line)}
.incl b{display:block;font-family:var(--serif);font-weight:400;font-size:20px}
.incl span{display:block;color:var(--text-3);font-size:13px;margin-top:4px}

.last{padding-bottom:120px}
footer{display:flex;justify-content:space-between;padding:22px var(--gutter);border-top:1px solid var(--line);font-size:12px;color:var(--text-3)}

@media (max-width:820px){
  .nav nav{display:none}
  .demos,.steps{grid-template-columns:1fr}
  .incl{grid-template-columns:1fr 1fr}
  .prices div{grid-template-columns:1fr auto}
  .prices dd{grid-column:1/-1;grid-row:2}
  .round{width:84px;height:84px;margin-top:0}
}