/* paperformatpro.com — shared styles
   Palette: cinnabar red accent, paper/ink neutrals.
   Two page modes: default (clean modern / Style A) and .serif (warm editorial / Style B). */

/* 设计令牌见 tokens.css（品牌层 / 市场层 China·Global / 产品层），本文件只做变量映射与版式。 */
@import url("tokens.css");

:root{
  /* 语义变量统一指向市场层（--mk-*）：切换 body.serif / body.global 即换整套皮肤 */
  --accent:var(--mk-accent);
  --accent-soft:var(--mk-accent-soft);
  --accent-ink:var(--mk-accent-ink);
  --ink:var(--mk-text);
  --muted:var(--mk-muted);
  --line:var(--mk-border);
  --bg:var(--mk-bg);
  --surface:var(--mk-surface);
  --paper:var(--mk-bg);
  --maxw:1200px;
  --radius:var(--r-lg);
  --sans:var(--font-ui);
  /* 文艺学术风字体栈：中文优先思源宋体 / 宋体（论文正文字体），西文 Georgia 衬线。
     Windows 无思源宋体时落 SimSun（宋体），仍保持学术感 */
  --serif:var(--font-editorial);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:16px;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ---------- Nav ---------- */
.nav{
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(150%) blur(8px);
  position:sticky;top:0;z-index:20;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:18px;color:var(--ink);}
.brand img{width:30px;height:30px;border-radius:50%;}
.nav-links{display:flex;gap:22px;align-items:center;font-size:14px;}
.nav-links a{color:var(--ink);}
.nav-links a:hover{color:var(--accent);}
.nav-links a.nav-cur{color:var(--accent);font-weight:600;}
.lang{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 12px;}
.lang:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;}

/* ---------- Hero ---------- */
.hero{text-align:center;padding:76px 24px 48px;}
.pill{
  display:inline-block;background:var(--accent-soft);color:var(--accent-ink);
  font-size:13px;padding:5px 14px;border-radius:999px;margin-bottom:18px;
}
.hero h1{font-size:38px;line-height:1.2;margin:0 0 12px;font-weight:600;letter-spacing:.5px;}
.hero p{font-size:17px;color:var(--muted);margin:0 auto 26px;max-width:640px;}
.hero p.tagline{font-family:"KaiTi","STKaiti","楷体",var(--serif);font-size:20px;letter-spacing:1px;max-width:760px;color:var(--muted);} /* 副标题用楷体，与宋体标题形成文气搭配；桌面一行，窄屏自然折行 */
.hero p.hero-def{font-size:12.5px;color:var(--muted);opacity:.82;margin:18px auto 0;max-width:680px;line-height:1.7;} /* 英雄区下方定义段：小且淡，主要承载 SEO 关键词 */
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.note{margin-top:16px;font-size:12.5px;color:var(--muted);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;padding:11px 22px;border-radius:10px;font-size:15px;font-weight:500;
  border:1px solid var(--accent);cursor:pointer;
}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-ink);text-decoration:none;}
.btn-outline{background:transparent;color:var(--accent);}
.btn-outline:hover{background:var(--accent-soft);text-decoration:none;}
.btn[disabled],.btn.is-placeholder{opacity:.55;pointer-events:none;}

/* ---------- Section ---------- */
.section{padding:56px 0;}
@media(min-width:1024px){.section{padding:80px 0;}}
.section h2{font-size:26px;margin:0 0 8px;font-weight:600;}
.section .lead{color:var(--muted);margin:0 0 28px;}

/* ---------- Product cards ---------- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.card{
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:var(--surface);
}
.card h3{margin:0 0 8px;font-size:18px;color:var(--accent);}
.card .price{font-size:22px;font-weight:600;margin:6px 0;}
.card p{color:var(--muted);font-size:14.5px;margin:8px 0 16px;}
.card ul{margin:0;padding-left:18px;color:var(--ink);font-size:14px;}
.card ul li{margin:4px 0;}

/* ---------- Feature chips ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px;}
.chip{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;font-size:14px;}

/* ---------- Steps (tutorial) ---------- */
.steps{counter-reset:step;max-width:760px;}
.step{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);}
.step:before{
  counter-increment:step;content:counter(step);
  flex:0 0 30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;
}
.step h4{margin:0 0 4px;font-size:16px;}
.step p{margin:0;color:var(--muted);font-size:14.5px;}

/* ---------- Screenshot placeholder ---------- */
.shot{
  border:1.5px dashed var(--line);border-radius:var(--radius);
  background:repeating-linear-gradient(45deg,#f4f7f9,#f4f7f9 12px,#e6ecf1 12px,#e6ecf1 24px);
  min-height:230px;display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--muted);font-size:14px;padding:24px;margin:14px 0;
}
.shot.small{min-height:160px;}

/* ---------- Tutorial real screenshots ---------- */
.snap{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0;}
.snap.single{grid-template-columns:minmax(0,400px);justify-content:center;}
.snapitem{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;margin:0;}
.snapitem img{width:100%;height:auto;display:block;}
.snapitem .cap{padding:8px 12px;font-size:13px;color:var(--muted);text-align:center;border-top:1px solid var(--line);background:#f1f4f7;}
@media(max-width:640px){.snap{grid-template-columns:1fr;}}

/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.price-card{border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:var(--surface);position:relative;}
.price-card.featured{border:2px solid var(--accent);}
.price-card h3{margin:0;font-size:19px;}
.price-card .amount{font-size:34px;font-weight:600;margin:10px 0 2px;}
.price-card .unit{color:var(--muted);font-size:13px;}
.price-card ul{margin:16px 0 20px;padding-left:18px;font-size:14.5px;}
.price-card ul li{margin:6px 0;}

/* 价格页分组：学生版 / 导师版 各自成块 */
.price-group{margin:0 0 8px;}
.price-group + .price-group{margin-top:44px;}
.price-group-title{font-size:24px;margin:0 0 6px;font-weight:600;}
/* 导师版 3 档一行 */
.price-grid.cols-3{grid-template-columns:repeat(3,1fr);}
/* 推荐标（贴在永久档右上角） */
.price-badge{position:absolute;top:-12px;right:18px;background:var(--accent);color:#fff;font-size:12px;font-weight:600;padding:3px 11px;border-radius:999px;letter-spacing:.5px;}

/* 下载页：Windows 卡双按钮（免安装版 / 安装版）竖排 */
.dl-btns{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.dl-btns .btn{width:100%;box-sizing:border-box;text-align:center;}
.dl-sub{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5;}

/* 下载页：平台卡 + 小程序码 四列网格（四卡等高，二维码不再撑高整行） */
.cards.dl-cards{grid-template-columns:repeat(4,1fr);}
.cards.dl-cards .card{display:flex;flex-direction:column;}
/* 底部对齐：每张卡的最后一个元素（Windows 的按钮组 / macOS、Linux 的按钮 / 小程序码卡的说明）
   统一推到卡底，四张卡视觉齐平 */
.cards.dl-cards .card > *:last-child{margin-top:auto;}
/* 说明挪到按钮之上时紧贴上方平台说明，避免与按钮之间出现双层间距 */
.dl-sub-top{margin-top:0;}
.qr-card{text-align:center;}
.qr-wrap{margin:6px auto 12px;}
/* 二维码尺寸卡在「不超过 Windows / macOS 卡内容高度」的上限内取最大值，
   既看得清，也不会把整行卡片撑高（>130px 就会开始顶高整行） */
.qr-img{width:124px;height:124px;border-radius:10px;display:block;margin:0 auto;box-shadow:0 2px 10px rgba(0,0,0,.06);}
.qr-card p{margin:auto 0 0;font-size:13.5px;}
@media(max-width:980px){.cards.dl-cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.cards.dl-cards{grid-template-columns:1fr;}}

/* 价格页：左学生版 / 右导师版 两栏并排；每栏内是小而精致的价格卡 */
.price-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
.price-panel{border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;background:var(--surface);}
.price-panel .price-group-title{margin:0 0 2px;}
.price-panel .lead{margin-bottom:12px;}
.price-grid-sm{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.price-card-sm{
  border:1px solid var(--line);border-radius:12px;padding:14px 16px 13px;
  background:#fff;position:relative;
}
.price-card-sm.featured{border:1.5px solid var(--accent);background:var(--accent-soft);}
.price-card-sm.span2{grid-column:1/-1;}
.card-tier{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;}
.price-card-sm .amount{font-size:26px;font-weight:700;line-height:1.15;margin:8px 0 3px;}
.price-card-sm .unit{font-size:12px;color:var(--muted);line-height:1.45;}
.price-tag{display:inline-block;background:var(--accent);color:#fff;font-size:11px;font-weight:600;padding:1px 9px;border-radius:999px;letter-spacing:.5px;flex:0 0 auto;}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px;align-items:stretch;}
.contact-item{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);border-radius:10px;padding:16px;background:var(--surface);}
.contact-item .ci-text{flex:1;min-width:0;}
.contact-item .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
.contact-item .v{font-size:16px;font-weight:600;margin-top:4px;}
.qr-wrap{margin-top:0;display:inline-block;position:relative;flex:0 0 auto;}
.qr,.qr-placeholder{
  width:72px;height:72px;border-radius:8px;border:1px solid var(--line);
  background:#fff;padding:3px;object-fit:contain;
  transition:transform .25s ease,box-shadow .25s ease;
}
.qr-placeholder{
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--muted);text-align:center;line-height:1.4;
}
/* 二维码放大仅在真正有悬停的设备生效（桌面）；触屏设备保持小尺寸，避免点一下卡住放大盖住内容 */
@media (hover:hover){
  .qr:hover,.qr-placeholder:hover{
    transform:scale(2.35);box-shadow:0 12px 32px rgba(0,0,0,.14);
    z-index:10;position:relative;
  }
}
@media (max-width:760px){
  .qr,.qr-placeholder{width:64px;height:64px;}
}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);padding:30px 0;margin-top:64px;color:var(--muted);font-size:13px;}
.footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.footer a{color:var(--muted);}

/* ---------- Style B: 宣纸文艺风（中文站全站 + 英文 About） ---------- */
body.serif{
  /* 背景三层叠加（自上而下）：
     1 装饰层  china-decor.svg —— 透明底，fixed 只覆盖视口，不随长页面被拉伸稀释
     2 柔光层  顶部径向渐变，模拟纸面受光
     3 纸纹层  256px 无缝平铺（离线烘焙的分形噪点，等价 feTurbulence fractalNoise，
               但不让浏览器实时计算，避免滚动掉帧与浏览器间渲染差异） */
  background-color:var(--mk-bg);
  background-image:var(--mk-bg-art),var(--mk-bg-glow),var(--mk-bg-grain);
  background-repeat:no-repeat,no-repeat,repeat;
  background-position:top center,top center,0 0;
  background-size:cover,auto,256px 256px;
  background-attachment:fixed,scroll,scroll;
  font-family:var(--serif);
  /* 宣纸底上调暖：交替区块与分隔线跟随。内联 style="background:var(--surface)" 的
     区块在使用处求值，会自动继承这里的暖米色，不必逐页改 HTML */
  --surface:var(--mk-surface);
  --line:var(--mk-border);
  letter-spacing:.3px;
  line-height:1.8;
}
body.serif .nav{background:rgba(251,247,240,.92);border-bottom-color:var(--line);}
body.serif .hero h1{font-weight:500;letter-spacing:2px;}
/* 全站不用斜体：中文没有真斜体，浏览器强制倾斜会变成难看的伪斜体；
   西文斜体与宋体混排也不协调。故统一正体，文艺感靠字距/行高/留白实现 */
body.serif .hero h1,
body.serif .section h2,
body.serif .section h3,
body.serif .card h3,
body.serif .lead,
body.serif em,
body.serif i{font-style:normal;}
/* 数字统一等高、等宽：避免 Georgia 的旧式数字（3/4/5/7/9 有下伸部）高低不齐 */
body.serif{font-variant-numeric:lining-nums tabular-nums;}
/* 衬线数字不加粗：宋体/宋体系粗体数字笔画粘连发糊，改用常规字重 + 字距拉开层次 */
body.serif .card .price{font-weight:400;letter-spacing:.5px;}
body.serif .price-card .amount{font-weight:500;letter-spacing:1px;}
body.serif .price-card-sm .amount{font-weight:500;letter-spacing:.8px;}
body.serif .card,body.serif .chip,body.serif .price-card,body.serif .contact-item{background:var(--mk-card);font-family:var(--serif);}
body.serif .section h2{font-weight:500;letter-spacing:1.5px;}
body.serif .section h3,body.serif .card h3{letter-spacing:.8px;}
body.serif .lead{line-height:1.85;}
body.serif .btn{font-family:var(--serif);letter-spacing:1px;}
body.serif .footer{border-top-color:var(--line);}
/* 表单控件仍用无衬线：衬线在输入框里可读性差，等宽数字也更好辨认 */
body.serif input,body.serif textarea,body.serif select{font-family:var(--sans);letter-spacing:0;}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  /* 移动端 iOS 不支持 background-attachment:fixed，统一降级为 scroll。
     必须写满三值，否则单值会把纸纹平铺层也一并改掉 */
  body.serif,body.global{background-attachment:scroll,scroll,scroll;}
  .cards,.price-grid{grid-template-columns:1fr;}
  .price-grid.cols-3{grid-template-columns:1fr;}
  .price-cols{grid-template-columns:1fr;}
  .price-grid-sm{grid-template-columns:1fr;}
  .features,.contact-grid{grid-template-columns:1fr;}
  .nav-links{gap:14px;font-size:13px;}
  .hero h1{font-size:30px;}
  .hero{padding:44px 16px 30px;}
  /* 超窄屏（≤360px）导航换行：品牌一行、链接掉到下一行，避免挤爆 */
  .nav-inner{flex-wrap:wrap;height:auto;padding:8px 0;row-gap:6px;}
  .nav-links{flex-wrap:wrap;gap:8px 14px;}
}

/* 多产品导航与海外版占位（2026-09-11） */
.nav-soon{color:var(--muted);cursor:not-allowed;opacity:.72;}
.nav-soon:hover{color:var(--muted);}
.card-coming{border:1.5px dashed var(--line);background:var(--surface);}
.badge-soon{display:inline-block;font-size:12px;font-weight:500;color:#8a6d3b;background:#f3e9d2;border-radius:999px;padding:2px 10px;margin-left:8px;vertical-align:middle;letter-spacing:.5px;}
.foot-products{display:block;margin-top:6px;}
.foot-products a{color:var(--accent);text-decoration:none;}
.foot-products a:hover{text-decoration:underline;}
/* FAQ 折叠（首页） */
.faq{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;}
.faq details{border:1px solid var(--line);border-radius:10px;padding:12px 16px;background:#fff;}
.faq summary{cursor:pointer;font-weight:600;color:var(--ink);}
.faq details p{margin:10px 0 0;color:var(--muted);line-height:1.8;}
@media(max-width:760px){.faq{grid-template-columns:1fr;}}

/* ---------- Style C: Global 市场层（象牙冷白 / 学术蓝） ----------
   国际站不是中文站的翻译：同一套骨架，换理性冷色皮肤。
   正文无衬线（可读性与国际化），标题保留 Georgia 衬线维持学术感。 */
body.global{
  /* 同 China 层三层结构：装饰 + 柔光 + 纸纹，仅令牌换皮 */
  background-color:var(--mk-bg);
  background-image:var(--mk-bg-art),var(--mk-bg-glow),var(--mk-bg-grain);
  background-repeat:no-repeat,no-repeat,repeat;
  background-position:top center,top center,0 0;
  background-size:cover,auto,256px 256px;
  background-attachment:fixed,scroll,scroll;
  font-family:var(--font-ui);
  color:var(--ink);
  letter-spacing:0;
  line-height:1.7;
}
body.global .nav{background:rgba(238,241,244,.92);border-bottom-color:var(--line);}
body.global .hero h1{font-family:var(--font-display);font-weight:700;letter-spacing:0;}
body.global .section h2{font-family:var(--font-display);font-weight:700;letter-spacing:0;}
body.global .lead{line-height:1.75;}
body.global .card,body.global .chip,body.global .price-card,body.global .contact-item{
  background:var(--mk-card);box-shadow:var(--mk-card-shadow);
}
body.global .pill{background:var(--mk-accent-soft);color:var(--accent);}
body.global .btn{font-family:var(--font-ui);letter-spacing:0;}
body.global .faq details{background:var(--mk-card);}
body.global .step:before{background:var(--accent);}

/* ---------- 支付横幅（Paddle 未连通时的占位提示） ---------- */
.pay-banner{
  max-width:var(--maxw);margin:28px auto 0;padding:14px 18px;
  border:1px solid var(--mk-border);border-radius:var(--r-md);
  background:var(--mk-accent-soft);color:var(--mk-text);font-size:14.5px;line-height:1.7;
}
.pay-banner a{color:var(--mk-accent);}

/* ---------- 隐私 / 离线条（国际站核心卖点） ---------- */
.privacy-band{
  display:flex;align-items:center;gap:16px;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 24px;background:var(--mk-card);box-shadow:var(--mk-card-shadow);
}
.privacy-band svg{width:36px;height:36px;flex:0 0 auto;color:var(--accent);}
.privacy-band p{margin:0;color:var(--muted);font-size:15px;line-height:1.75;}
.privacy-band strong{color:var(--ink);font-weight:600;}

/* ---------- 三步流程 Check → Review → Fix ---------- */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;}
.flow-step{
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  background:var(--mk-card);box-shadow:var(--mk-card-shadow);
}
.flow-step .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;background:var(--accent);
  color:#fff;font-size:14px;font-weight:600;margin-bottom:12px;
}
.flow-step h4{margin:0 0 6px;font-size:17px;font-weight:600;}
.flow-step p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.7;}
@media(max-width:760px){
  .flow{grid-template-columns:1fr;}
  .privacy-band{flex-direction:column;align-items:flex-start;}
}