/* ==========================================================================
   0. 字体（Inter 变量字体，wght 100–900，独立同源文件 /fonts/inter-var.woff2）
      单独成文件而不是内联 base64：CSS 体积从 ~100KB 降到 ~40KB，
      浏览器可以独立长期缓存字体，也省掉每行 6 万字符的样式解析开销。
   ========================================================================== */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/fonts/inter-var.woff2') format('woff2');
}

/* ==========================================================================
   1. 设计令牌
   视觉基准：nexus-saas.com（黑 / 象牙 / 米 / 金的高级排版体系）
   本项目的落地取舍：
     1) 强调色采用「红金双色」——金色负责标签 / 序号 / 分隔线 / 悬停描边，
        品牌红负责价格 / 购买动作 / 推荐标记；
     2) 标题使用系统衬线字族模拟参考站的 Playfair Display，零外部依赖；
     3) 全面直角 + 1px 细边框；
     4) 颜色一律使用 hex（Chrome 109 不支持 oklch）；
        clamp() 之前一律先写 px 兜底；不使用 color-mix()（Chrome 111+ 才支持）。
   ========================================================================== */
:root{
  /* —— 结构色（参考站 --nx-* 对位） —— */
  --ink:#0a0a0a;            /* 主墨色 */
  --charcoal:#1a1a1a;
  --white:#ffffff;
  --ivory:#fafaf8;
  --cream:#f5f5f3;

  /* —— 强调色：金 ——
       --gold 只用于装饰（描边、分隔线、色块、深色底上的文字）；
       --gold-ink 是用于浅色底文字的深金，在白 / 象牙 / 米三种底色上均不低于 4.5:1，
       所有 11px 金色小标签、导航序号、金色悬停文字与金色底按钮一律使用它。 */
  --gold:#b8860b;
  --gold-ink:#8a6408;
  --gold-light:#d4a84b;
  --gold-line:rgba(184,134,11,.35);
  --gold-line-soft:rgba(184,134,11,.18);

  /* —— 强调色：品牌红 = 中国红（价格 / 购买动作 / 推荐）
       取值与站点图标底色完全一致（#c60a08），保证浏览器标签页图标
       与页面内的品牌红是同一种红。 —— */
  --brand:#c60a08;
  --brand-dark:#a80807;
  --brand-soft:rgba(198,10,8,.06);

  /* —— 文本 ——
       次级文字只有一档：#999 一类浅灰在 12–13px 下对比度不足 4.5:1，
       无法通过 AA，已并入 --muted。 */
  --text:#1a1a1a;
  --muted:#6b6b6b;

  /* —— 分隔线 —— */
  --rule:#e8e8e6;

  /* —— 字体 —— */
  --font-display:Georgia,'Times New Roman','Songti SC','Noto Serif SC','SimSun',serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Courier New',monospace;

  /* —— 阴影 —— */
  --shadow-sm:0 2px 8px rgba(0,0,0,.04);
  --shadow:0 8px 30px rgba(0,0,0,.06);
  --shadow-lg:0 20px 60px rgba(0,0,0,.08);
  --shadow-xl:0 25px 50px -12px rgba(0,0,0,.15);
  --shadow-gold:0 8px 30px rgba(184,134,11,.1);

  --ease:cubic-bezier(.4,0,.2,1);

  /* —— 兼容旧令牌（弹窗与降级样式引用） —— */
  --background:#ffffff;
  --foreground:#0a0a0a;
  --border:#e8e8e6;
  --ring:#a3a3a3;
  --accent:#f5f5f3;
  --accent-foreground:#1a1a1a;
}

/* ==========================================================================
   2. Preflight
   ========================================================================== */
*,::before,::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
  border:0 solid;
  border-color:var(--rule);
  outline:2px solid transparent;
  outline-offset:2px;
}
*:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
/* 带 hidden 属性的元素必须不显示（HTML 规范要求）。
   注意：浏览器默认的 [hidden]{display:none} 优先级最低，只要元素自己有
   display:flex/grid 就会把「隐藏」顶掉——支付弹窗里的二维码区、按钮组、
   套餐信息都是靠 hidden 控制显隐的，缺了这条会出现「未下单就显示空二维码框」 */
[hidden]{display:none !important}

html{
  font-size:16px;                /* clamp 兜底：老内核丢弃下一行时仍为 16px，不会缩成一团 */
  font-size:clamp(14px,2vw,16px);
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
  font-family:var(--font-body);
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
:target{scroll-margin-top:64px}

body{
  background-color:var(--white);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection{background-color:rgba(198,10,8,.16);color:inherit}

/* 标题统一使用衬线字族；正文与标签用无衬线 / 等宽，形成参考站的「衬线标题 + 无衬线下文」层级 */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.25;
}
a{color:inherit;text-decoration:inherit}
ul,ol,menu{list-style:none}
button,input,select,textarea{
  font:inherit;
  font-feature-settings:inherit;
  font-variation-settings:inherit;
  letter-spacing:inherit;
  color:inherit;
  border-radius:0;
  background-color:transparent;
  opacity:1;
}
button,input[type='button'],input[type='reset'],input[type='submit']{-webkit-appearance:button;appearance:button}
button,[role='button']{cursor:pointer}
svg{display:block;vertical-align:middle}
img{display:block;max-width:100%;height:auto}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;
}

/* ==========================================================================
   3. 通用排版与布局
   口径：参考站式高级排版——衬线大标题、金色小标签、大留白、零图形。
   全站只有两个强调色：金（标签 / 序号 / 分隔线）与品牌红（价格 / 动作）。
   ========================================================================== */
.wrap{
  width:100%;
  max-width:72rem;
  margin-left:auto;margin-right:auto;
  margin-inline:auto;
  padding-left:1.25rem;padding-right:1.25rem;
  padding-inline:1.25rem;
}
@media (min-width:40rem){ .wrap{padding-left:2rem;padding-right:2rem;padding-inline:2rem} }
@media (min-width:64rem){ .wrap{padding-left:3rem;padding-right:3rem;padding-inline:3rem} }

/* 章节序号计数器：只作用于各内容区块的小标签（首页与页尾 CTA 不计数） */
.page{counter-reset:sec}

/* 金色小标签：参考站的招牌细节——0.26em 字距 + 金色下划线 */
.section-label,.hero-label{
  display:inline-block;
  font-family:var(--mono);
  font-size:.6875rem;line-height:1.4;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold-ink);
}
.section-label{padding-bottom:.6rem;border-bottom:1px solid var(--gold-line)}
.section-head .section-label{display:flex;align-items:center;counter-increment:sec}
.section-head .section-label::before{
  content:counter(sec,decimal-leading-zero);
  margin-right:.875rem;padding-right:.875rem;
  border-right:1px solid var(--gold-line);
  font-weight:700;
}

/* 正文导语：单栏限宽，避免超宽屏下每行过长 */
.lead{
  margin-top:1.5rem;
  font-size:1rem;
  font-size:clamp(1rem,1.4vw,1.0625rem);
  line-height:1.85;
  color:var(--muted);
  max-width:44rem;
}

/* 内容区块：靠留白与底色交替分隔，不用粗黑线 */
.section{
  padding-top:4.5rem;padding-bottom:4.5rem;
  padding-block:4.5rem;
}
@media (min-width:48rem){
  .section{padding-top:8rem;padding-bottom:8rem;padding-block:8rem}
}
.section-cream{background-color:var(--cream)}
.section-head{margin-bottom:3rem;max-width:46rem}
@media (min-width:48rem){ .section-head{margin-bottom:5rem} }
.section-title{
  display:block;
  margin-top:1.75rem;
  font-size:2rem;
  font-size:clamp(2rem,4.2vw,3.25rem);
  font-weight:500;
  line-height:1.18;
  letter-spacing:-.02em;
  color:var(--ink);
}
.section-title span{display:block}
.section-title .t-h2b{color:var(--ink)}

/* ==========================================================================
   3.1 卡片体系（参考站 project-card 的直角描边样式）
   说明：悬停只改变描边与阴影，不做位移——避免与入场动画的 transform 冲突。
   ========================================================================== */
.card-grid{display:flex;flex-wrap:wrap;margin-left:-1.5rem;margin-bottom:-2rem}
.card-grid>*{flex:1 1 20rem;min-width:0;margin-left:1.5rem;margin-bottom:2rem}

.card{
  position:relative;
  display:flex;flex-direction:column;
  height:100%;
  padding:2.5rem 2rem;
  background-color:var(--white);
  border:1px solid var(--rule);
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
/* 卡片顶部金线：悬停时由左向右展开（纯 CSS 绘制，不使用图片） */
.card::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:2px;
  background-color:var(--gold);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .5s var(--ease);
}
.card:hover{border-color:var(--gold);box-shadow:var(--shadow-xl)}
.card:hover::before{transform:scaleX(1)}
.card.is-featured{border-color:var(--gold);box-shadow:var(--shadow-gold)}
.card.is-featured::before{transform:scaleX(1)}

/* ==========================================================================
   4. 入场动画（AnimatedSection）
   ========================================================================== */
/* 入场动画：只有脚本成功加载并执行（html.js-ready）时才隐藏内容。
   脚本加载失败、被拦截或未执行时 .anim 保持可见，避免整页空白。 */
.anim{transition:opacity .7s ease-out, transform .7s ease-out}
.js-ready .anim{opacity:0;transform:translateY(1.5rem)}
.js-ready .anim.is-visible{opacity:1;transform:translateY(0)}

/* ==========================================================================
   5. 顶部固定导航
   品牌方标（红底白字「章」）+ 衬线站名 + 金色编号导航 + 深色行动按钮
   ========================================================================== */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  background-color:rgb(255 255 255 / .92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
  padding-top:1rem;padding-bottom:1rem;
  padding-block:1rem;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* 品牌：站点图标 + 衬线站名 + 等宽副标（副标仅桌面端显示） */
.brand{display:flex;align-items:center;cursor:pointer}
/* 品牌图标：直接使用站点图标图片（与浏览器标签页图标为同一张），
   中国红底色已在图内，故不再画色块；background-color 仅作图片加载前的兜底。 */
.brand-mark{
  display:block;
  width:2.25rem;height:2.25rem;
  margin-right:.875rem;
  flex:0 0 auto;
  background-color:var(--brand);
}
.brand-text{display:flex;flex-direction:column}
.brand-name{
  font-family:var(--font-display);
  font-size:1.0625rem;line-height:1.25;
  font-weight:500;
  letter-spacing:.12em;
  color:var(--ink);
}
.brand-sub{
  display:none;
  margin-top:.25rem;
  font-family:var(--mono);
  font-size:.5625rem;line-height:1.4;
  letter-spacing:.16em;
  color:var(--muted);
}
@media (min-width:64rem){ .brand-sub{display:block} }

/* 主导航：金色编号 + 字距，悬停时金色细线自左展开 */
.nav-desktop{display:none;align-items:center;counter-reset:nav}
@media (min-width:56rem){ .nav-desktop{display:flex} }
.nav-desktop a{
  position:relative;
  display:inline-flex;align-items:baseline;
  padding-bottom:.375rem;
  font-size:.8125rem;line-height:1.4;
  letter-spacing:.1em;
  color:var(--muted);
  transition:color .3s var(--ease);
}
/* 序号是 9px 的文字，浅色底上必须用深金；已去掉半透明弱化，
   弱化后与白底的对比度不足 3:1。 */
.nav-desktop a::before{
  counter-increment:nav;
  content:counter(nav,decimal-leading-zero);
  margin-right:.5rem;
  font-family:var(--mono);
  font-size:.5625rem;line-height:1.4;
  letter-spacing:.12em;
  color:var(--gold-ink);
}
.nav-desktop a::after{
  content:'';
  position:absolute;left:0;right:0;bottom:0;
  height:1px;
  background-color:var(--gold);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .4s var(--ease);
}
.nav-desktop a+a{margin-left:2rem}
.nav-desktop a:hover{color:var(--ink)}
.nav-desktop a:hover::after{transform:scaleX(1)}

/* 导航行动按钮：深色直角块，悬停转金 */
.nav-cta{
  display:none;
  margin-left:2rem;
  padding:.625rem 1.25rem;
  border:1px solid var(--ink);
  background-color:var(--ink);
  color:var(--white);
  font-family:var(--mono);
  font-size:.6875rem;line-height:1.4;
  letter-spacing:.2em;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.nav-cta:hover{background-color:var(--gold);border-color:var(--gold);color:var(--white)}
@media (min-width:56rem){ .nav-cta{display:inline-block} }

/* 菜单开关：纯文字（「菜单」/「关闭」），不用任何图标 */
.menu-toggle{
  font-family:var(--mono);
  font-size:.6875rem;line-height:1.4;
  letter-spacing:.2em;
  color:var(--ink);
  border:1px solid var(--rule);
  padding:.5625rem .9375rem;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.menu-toggle:hover{background-color:var(--ink);border-color:var(--ink);color:var(--white)}
.menu-toggle .mt-close{display:none}
.menu-toggle.open .mt-open{display:none}
.menu-toggle.open .mt-close{display:inline}
.menu-toggle.open{background-color:var(--ink);border-color:var(--ink);color:var(--white)}
@media (min-width:56rem){ .menu-toggle{display:none} }

/* 移动端菜单：展开后像一张「目录页」，衬线大字号逐行排列 + 金色编号 */
.nav-mobile{display:none;padding-left:1.25rem;padding-right:1.25rem}
@media (min-width:40rem){ .nav-mobile{padding-left:2rem;padding-right:2rem} }
.nav-mobile.open{display:block;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--rule)}
.nav-mobile nav{counter-reset:navm}
.nav-mobile nav a{
  display:block;
  padding:.9375rem 0;
  font-family:var(--font-display);
  font-size:1.1875rem;line-height:1.35;
  font-weight:500;
  color:var(--ink);
  border-bottom:1px solid var(--rule);
}
.nav-mobile nav a::before{
  counter-increment:navm;
  content:counter(navm,decimal-leading-zero);
  margin-right:.875rem;
  font-family:var(--mono);
  font-size:.625rem;line-height:1.4;
  letter-spacing:.16em;
  color:var(--gold-ink);
}
.nav-mobile nav a:hover{color:var(--gold-ink)}
.nav-mobile nav a:last-child{border-bottom:0}
@media (min-width:56rem){ .nav-mobile.open{display:none} }

/* --------------------------------------------------------------------------
   未完成付款提示条（替代「刷新页面自动弹出支付弹窗」）
   固定在导航正下方，深色底 + 金色细分隔线；滚动时始终可见，
   由脚本控制显隐，只有用户刷新页面且存在未完成付款记录时才会出现。
   -------------------------------------------------------------------------- */
.pay-banner{
  position:fixed;
  top:4.25rem;left:0;right:0;
  z-index:40;
  background-color:var(--ink);
  border-bottom:1px solid var(--gold-line);
  animation:z9-fade-in .25s var(--ease);
}
.pay-banner-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  padding-top:.875rem;padding-bottom:.875rem;
}
.pay-banner-text{
  flex:1 1 18rem;min-width:0;
  margin-right:1rem;
  font-size:.875rem;line-height:1.6;
  color:rgba(255,255,255,.78);
}
.pay-banner-actions{display:flex;flex-wrap:wrap;align-items:center;margin:-.25rem}
.pay-banner-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:2.25rem;
  margin:.25rem;
  padding:0 1rem;
  font-family:var(--font-body);
  font-size:.8125rem;line-height:1.25rem;
  letter-spacing:.08em;
  cursor:pointer;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pay-banner-resume{background-color:var(--white);border:1px solid var(--white);color:var(--ink)}
.pay-banner-resume:hover{background-color:var(--gold-light);border-color:var(--gold-light)}
.pay-banner-discard{background-color:transparent;border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.72)}
.pay-banner-discard:hover{border-color:var(--white);color:var(--white)}
.pay-banner-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ink), 0 0 0 4px var(--gold-light)}
/* 提示条出现时给 Hero 让位，避免首屏内容被固定条压住 */
html.pay-banner-open .hero{
  padding-top:12.5rem;padding-bottom:4.5rem;
  padding-block:12.5rem 4.5rem;
}
@media (min-width:48rem){
  html.pay-banner-open .hero{
    padding-top:15.5rem;padding-bottom:7rem;
    padding-block:15.5rem 7rem;
  }
}

/* ==========================================================================
   6. Hero（首页）
   参考站 hero：满屏高度 + 金色标签 + 衬线超大标题 + 双按钮 + 斜向米色底纹
   ========================================================================== */
.hero{
  position:relative;
  overflow:hidden;
  background-color:var(--white);
  padding-top:7.5rem;padding-bottom:4.5rem;
  padding-block:7.5rem 4.5rem;
}
@media (min-width:48rem){
  .hero{padding-top:11rem;padding-bottom:7rem;padding-block:11rem 7rem}
}
/* 斜向米色渐变底纹：纯 CSS 绘制，不使用任何图片 */
.hero::before{
  content:'';
  position:absolute;top:-50%;right:-20%;
  width:80%;height:200%;
  background:linear-gradient(135deg,var(--cream) 0%,transparent 60%);
  transform:rotate(-12deg);
  pointer-events:none;
}
.hero .wrap{position:relative}

/* 顶部一行小字：金色标签 + 支付渠道说明，用一道金色细线收口 */
.hero-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  padding-bottom:1rem;
  border-bottom:1px solid var(--gold-line);
}
.hero-meta-right{
  font-family:var(--mono);
  font-size:.6875rem;line-height:1.4;
  letter-spacing:.14em;
  color:var(--muted);
}

/* 首页标题：全站最大字号，第二行用品牌红做唯一的重音 */
.hero-title{
  margin-top:2.5rem;
  font-size:2.5rem;
  font-size:clamp(2.5rem,7vw,5rem);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--ink);
  max-width:48rem;
}
.hero-title span{display:block}
.t-h1a{color:var(--ink)}
.t-h1b{color:var(--brand)}
.hero-lead{margin-top:1.75rem;max-width:38rem;font-size:1.0625rem;font-size:clamp(1rem,1.4vw,1.0625rem)}

/* 行动按钮：实心黑块 + 描边线框，参考站口径（大写字距、直角、悬停上浮） */
.cta-row{display:flex;flex-wrap:wrap;margin:2.5rem -.5rem 0}
.cta-row>*{margin:.5rem}
.btn-solid,.btn-line,.btn-buy{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.78rem;line-height:1.4;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.btn-solid{
  padding:1.1rem 2.5rem;
  background-color:var(--ink);
  color:var(--white);
}
.btn-solid:hover{background-color:var(--charcoal);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-line{
  padding:1.06rem 2.44rem;
  border:1px solid var(--ink);
  color:var(--ink);
}
.btn-line:hover{background-color:var(--ink);color:var(--white);transform:translateY(-2px)}

/* 三条事实：等宽金色标签 + 短句，桌面端用竖细线分隔 */
.hero-facts{
  display:flex;flex-wrap:wrap;
  margin:4rem -.75rem 0;
  padding-top:1.75rem;
  border-top:1px solid var(--rule);
}
.fact{display:flex;flex-direction:column;flex:1 1 12rem;min-width:0;padding:0 .75rem;margin-bottom:.75rem}
@media (min-width:48rem){ .fact+.fact{border-left:1px solid var(--rule)} }
.fact-k{
  font-family:var(--mono);
  font-size:.6875rem;line-height:1.4;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-ink);
}
.fact-v{margin-top:.625rem;font-size:.9375rem;line-height:1.65;font-weight:500;color:var(--ink)}

/* ==========================================================================
   7. 维修方案（价目卡片）
   参考站口径：三张直角描边卡片，顶部金线悬停展开，推荐项常亮金边
   ========================================================================== */
.price-num{
  display:flex;align-items:flex-start;
  font-family:var(--font-display);
  font-size:2.5rem;
  font-size:clamp(2.5rem,5vw,3.25rem);
  font-weight:600;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--brand);
}
.price-cur{margin-top:.18em;margin-right:.1em;font-size:.5em;line-height:1;font-weight:600}
.price-num-text{font-size:1.75rem;font-size:clamp(1.75rem,3vw,2.25rem);letter-spacing:0}
.price-title{
  display:block;
  margin-top:1.25rem;
  font-size:1.25rem;
  font-size:clamp(1.25rem,2vw,1.5rem);
  font-weight:500;
  line-height:1.3;
  color:var(--ink);
}
.price-flag{
  display:inline-block;
  margin-left:.75rem;
  padding:.15rem .5rem;
  border:1px solid var(--brand);
  font-family:var(--mono);
  font-size:.625rem;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.18em;
  vertical-align:.2em;
  color:var(--brand);
}
.price-desc{margin-top:.75rem;font-size:.9375rem;line-height:1.75;color:var(--muted)}

/* 小标签：金色等宽大写 */
.micro{
  margin-top:2rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);
  font-size:.6875rem;line-height:1.4;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-ink);
}
.feat-list{margin-top:1rem}
.feat-list li{
  position:relative;
  padding-left:1.25rem;
  font-size:.9375rem;
  line-height:1.9;
  color:var(--muted);
}
/* 列表标记：纯 CSS 绘制的金色短横线 */
.feat-list li::before{
  content:'';
  position:absolute;left:0;top:.95em;
  width:.5rem;height:1px;
  background-color:var(--gold);
}
.btn-buy{
  width:100%;
  margin-top:auto;
  padding:1.05rem 2rem;
  background-color:var(--brand);
  color:var(--white);
}
.btn-buy:hover{background-color:var(--brand-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.price-card .feat-list+.micro{margin-top:2rem}

/* 费用说明：价目卡下方的口径说明块（米色底 + 细描边） */
.price-note{
  margin-top:3rem;
  padding:2.5rem 2rem;
  background-color:var(--ivory);
  border:1px solid var(--rule);
}
.price-note-title{
  font-family:var(--mono);
  font-size:.6875rem;line-height:1.4;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-ink);
}
.price-note .feat-list{margin-top:1.5rem;max-width:52rem}
.price-note-cta{margin-top:2rem}

/* ==========================================================================
   8. 服务流程（深色区块 + 联系方式）
   参考站口径：黑色底 + 白 / 金层级，步骤之间用 1px 细线分隔，不使用图形
   ========================================================================== */
.section-dark{background-color:var(--ink)}
.section-dark .section-title,
.section-dark .section-title .t-h2b{color:var(--white)}
.section-dark .lead{color:rgba(255,255,255,.6)}

.flow-grid{display:flex;flex-wrap:wrap;margin-left:-1.5rem;margin-bottom:-2rem}
.flow-step{
  flex:1 1 12rem;min-width:0;
  margin-left:1.5rem;margin-bottom:2rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.16);
}
.flow-num{
  font-family:var(--mono);
  font-size:.6875rem;line-height:1.4;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--gold);
}
.flow-step h3{
  margin-top:1rem;
  font-size:1.125rem;
  font-size:clamp(1.0625rem,1.6vw,1.1875rem);
  font-weight:500;
  line-height:1.35;
  color:var(--white);
}
.flow-step p{margin-top:.75rem;font-size:.9375rem;line-height:1.85;color:rgba(255,255,255,.6)}

/* 联系入口：金色细描边 + 极浅白底，是页面上唯一的联系方式落点 */
.flow-contact{
  margin-top:3rem;
  padding:2rem;
  border:1px solid var(--gold-line);
  background-color:rgba(255,255,255,.04);
}
@media (min-width:48rem){ .flow-contact{padding:2.5rem} }
.flow-contact-k{
  font-family:var(--mono);
  font-size:.6875rem;line-height:1.4;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
}
.flow-contact-v{
  margin-top:1rem;
  font-family:var(--font-display);
  font-size:1.375rem;
  font-size:clamp(1.25rem,2.4vw,1.75rem);
  font-weight:500;
  line-height:1.35;
  color:var(--white);
}
.flow-contact-note{
  margin-top:.875rem;
  font-size:.9375rem;line-height:1.85;
  color:rgba(255,255,255,.6);
  max-width:44rem;
}

/* ==========================================================================
   9. 分栏排版（服务对象与场景 / 服务说明）
   参考站口径：不再套卡片盒子，改用左右分栏 + 1px 细线分隔的纯文字排布，
   让连续多个区块之间产生排布节奏上的变化，而不是反复出现同样的卡片网格。
   ========================================================================== */
.split,.duo{display:flex;flex-wrap:wrap;margin-left:-3rem}
.split-side{flex:1 1 20rem;min-width:0;margin-left:3rem}
.split-main{flex:1 1 26rem;min-width:0;margin-left:3rem}
/* 分栏内左栏的标题不再需要底部大留白，由右栏内容决定行高节奏 */
.split .section-head{margin-bottom:0}

.duo-col{flex:1 1 21rem;min-width:0;margin-left:3rem}
.duo-title{
  padding-bottom:.625rem;
  border-bottom:1px solid var(--gold-line);
  font-family:var(--mono);
  font-size:.6875rem;line-height:1.4;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-ink);
}
.duo-list{margin-top:.5rem}
.duo-list li{display:flex;padding:1.5rem 0;border-bottom:1px solid var(--rule)}
.duo-num{
  flex:0 0 2.5rem;
  padding-top:.2rem;
  font-family:var(--mono);
  font-size:.6875rem;line-height:1.4;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--gold-ink);
}
.duo-text{flex:1 1 auto;min-width:0}
.duo-h{font-size:1.0625rem;line-height:1.4;color:var(--ink)}
.duo-p{margin-top:.5rem;font-size:.9375rem;line-height:1.85;color:var(--muted)}

.def-list li{
  padding-top:1.75rem;padding-bottom:1.75rem;
  border-top:1px solid var(--gold-line-soft);
}
.def-list li:last-child{border-bottom:1px solid var(--gold-line-soft)}
.def-h{font-size:1.125rem;line-height:1.4;color:var(--ink)}
.def-p{margin-top:.625rem;font-size:.9375rem;line-height:1.85;color:var(--muted)}

/* ==========================================================================
   10. 常见问题
   ========================================================================== */
.faq-list{border-top:1px solid var(--rule);max-width:52rem}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-q{
  width:100%;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:1.5rem 0;
  text-align:left;
  transition:color .3s var(--ease);
}
@media (min-width:48rem){ .faq-q{padding:1.875rem 0} }
.faq-q:hover{color:var(--gold-ink)}
.faq-q .faq-q-text{
  font-size:1.0625rem;
  font-size:clamp(1.0625rem,1.8vw,1.25rem);
  font-weight:500;
  line-height:1.5;
  letter-spacing:0;
  padding-right:1.5rem;
}
/* 折叠标记：纯文本加号 / 减号，展开时替换 */
.faq-chev{
  flex:0 0 auto;
  font-family:var(--mono);
  font-size:1.25rem;
  line-height:1.4;
  color:var(--gold-ink);
}
.faq-chev::before{content:'+'}
.faq-item.expanded .faq-chev::before{content:'\2212'}
.faq-a{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .3s var(--ease), opacity .3s var(--ease), padding-bottom .3s var(--ease);
}
.faq-item.expanded .faq-a{max-height:16rem;opacity:1;padding-bottom:1.75rem}
.faq-a p{font-size:.9375rem;line-height:1.9;color:var(--muted);max-width:44rem}
.faq-a p+p{margin-top:.75rem}

/* ==========================================================================
   11. 页脚（深色收尾 + 顶部金色渐变细线）
   ========================================================================== */
.site-footer{
  position:relative;
  background:linear-gradient(180deg,var(--ink) 0%,#0d0d0d 100%);
  color:rgba(255,255,255,.6);
  padding-top:4.5rem;padding-bottom:2.5rem;
  padding-block:4.5rem 2.5rem;
}
@media (min-width:48rem){ .site-footer{padding-top:6rem;padding-bottom:3rem;padding-block:6rem 3rem} }
.site-footer::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

.footer-top{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  padding-bottom:2rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-name{
  font-family:var(--font-display);
  font-size:1.75rem;
  font-size:clamp(1.75rem,4vw,2.75rem);
  font-weight:500;
  line-height:1.2;
  letter-spacing:.02em;
  color:var(--white);
}
.footer-about{
  flex:1 1 20rem;min-width:0;
  margin-top:1.25rem;
  font-size:.9375rem;line-height:1.85;
  color:rgba(255,255,255,.55);
  max-width:26rem;
}
@media (min-width:48rem){ .footer-about{margin-top:0;margin-left:2rem;text-align:right} }

.footer-cols{display:flex;flex-wrap:wrap;margin:3rem 0 0 -.75rem}
.footer-col{flex:1 1 12rem;min-width:0;padding-left:.75rem;margin-bottom:1.5rem}
.footer-col h3{
  margin-bottom:1.25rem;
  padding-bottom:.625rem;
  border-bottom:1px solid var(--gold-line-soft);
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
}
.footer-col li+li{margin-top:.75rem}
.footer-col a{
  font-size:.9375rem;line-height:1.6;
  color:rgba(255,255,255,.75);
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.footer-col a:hover{color:var(--gold-light);border-bottom-color:var(--gold-light)}

.footer-bottom{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  margin-top:2.5rem;padding-top:1.75rem;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.8125rem;line-height:1.7;
  color:rgba(255,255,255,.55);
}
.footer-bottom .beian{
  margin-top:.5rem;
  color:rgba(255,255,255,.55);
  transition:color .3s var(--ease);
}
.footer-bottom .beian:hover{color:var(--gold-light)}
@media (min-width:48rem){ .footer-bottom .beian{margin-top:0} }

/* ==========================================================================
   12. 返回顶部
   ========================================================================== */
.back-to-top{
  position:fixed;
  bottom:1.5rem;right:1.5rem;
  z-index:40;
  padding:.7rem 1rem;
  background-color:var(--ink);
  color:var(--white);
  font-family:var(--mono);
  font-size:.6875rem;line-height:1.4;
  letter-spacing:.18em;
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.back-to-top:hover{background-color:var(--gold);color:var(--white)}

/* ==========================================================================
   13. 支付弹窗（直角 + 新配色）
   ========================================================================== */
@keyframes z9-fade-in{from{opacity:0}to{opacity:1}}
@keyframes z9-zoom-in{
  from{opacity:0;transform:translate(-50%,-50%) scale(.95)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes z9-spin{to{transform:rotate(360deg)}}

.dlg-root[hidden]{display:none}
.dlg-overlay{
  position:fixed;top:0;right:0;bottom:0;left:0;   /* inset 的物理属性兜底（Chrome<87 不支持 inset） */
  inset:0;z-index:50;
  background-color:rgba(10,10,10,.55);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  animation:z9-fade-in .2s var(--ease);
}
@supports not ((backdrop-filter:blur(6px)) or (-webkit-backdrop-filter:blur(6px))){
  .dlg-overlay{background-color:rgba(10,10,10,.72)}
}
.dlg-content{
  position:fixed;
  top:50%;left:50%;
  z-index:50;
  display:grid;
  gap:1rem;
  width:100%;
  max-width:calc(100% - 2rem);
  /* 弹窗高度受视口约束并可滚动：窗口较矮（如手机横屏、IDE 预览面板）时
     不会被上下截断导致「看不到内容」，此前缺这两行是点击后显示异常的根因 */
  max-height:calc(100vh - 2rem);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:1.75rem;
  background:var(--white);
  border:1px solid var(--rule);
  box-shadow:var(--shadow-lg);
  animation:z9-zoom-in .2s var(--ease);
  transform:translate(-50%,-50%);
}
@media (min-width:40rem){ .dlg-content{max-width:28rem} }
.dlg-close{
  position:absolute;top:1.25rem;right:1.25rem;
  opacity:.65;
  transition:opacity .3s var(--ease), color .3s var(--ease);
}
.dlg-close:hover{opacity:1;color:var(--gold-ink)}
/* 关闭叉号：由 span 内的 Unicode 字符呈现，替代原 SVG 图标 */
.dlg-close span{display:block;font-size:1.25rem;line-height:1;color:var(--muted)}
.dlg-close:hover span{color:var(--gold-ink)}
.dlg-header{display:flex;flex-direction:column;gap:.5rem;text-align:center;padding-right:2rem}
@media (min-width:40rem){ .dlg-header{text-align:left} }
.dlg-title{font-size:1.25rem;line-height:1.3;font-weight:500;letter-spacing:0;color:var(--ink)}
.dlg-body{padding-top:1rem;padding-bottom:.5rem;padding-block:1rem .5rem;display:flex;flex-direction:column;gap:1.25rem}
.dlg-section{display:flex;flex-direction:column;gap:.625rem}
.dlg-section h4{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-ink);
}
.dlg-pkg{background:var(--cream);padding:.875rem;border:1px solid var(--rule)}
.dlg-pkg-title{font-size:.9375rem;line-height:1.4;font-weight:600;color:var(--ink)}
.dlg-pkg-id{font-size:.75rem;line-height:1.2;color:var(--muted);margin-top:.3rem}
.dlg-price-wrap{margin-top:.625rem}
.dlg-price{
  font-family:var(--font-display);
  font-size:1.25rem;line-height:1.4;
  font-weight:600;
  color:var(--brand);
}
.dlg-custom{display:flex;flex-direction:column;gap:.5rem}
.dlg-custom-label{font-size:.8125rem;line-height:1.3;color:var(--muted);margin-bottom:.25rem}
.dlg-input-row{display:flex;align-items:center;gap:.5rem}
.dlg-currency{color:var(--brand);font-weight:600}
.dlg-input{
  height:2.5rem;width:100%;min-width:0;
  border:1px solid var(--rule);
  background-color:var(--white);
  padding:.25rem .75rem;
  font-size:1rem;line-height:1.5rem;
  font-weight:600;
  color:var(--brand);
  outline:none;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
@media (min-width:48rem){ .dlg-input{font-size:.9375rem} }
.dlg-input:focus-visible{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,134,11,.2)}
.dlg-error{
  padding:.75rem;
  background-color:#fef2f2;
  border:1px solid #fee2e2;
  font-size:.8125rem;line-height:1.5;
  color:#dc2626;
}
.dlg-actions{display:flex;justify-content:flex-end;align-items:center;padding-top:.5rem}
.dlg-actions-right{display:flex;gap:.5rem}

/* 下单成功后的二维码区域 */
.dlg-pay{display:flex;flex-direction:column;align-items:center;gap:.625rem;padding-top:.5rem}
.dlg-qr-box{
  width:12rem;height:12rem;
  display:flex;align-items:center;justify-content:center;
  padding:.625rem;
  background:var(--white);
  border:1px solid var(--rule);
}
.dlg-qr{width:100%;height:100%;object-fit:contain}
/* 二维码可点击放大（微信扫码时用于放大图片，方便手机扫取） */
.dlg-qr-box{cursor:zoom-in}
.dlg-qr-box:focus-visible{outline:none;box-shadow:0 0 0 2px var(--white), 0 0 0 4px var(--gold)}

/* 二维码加载骨架：点「确认支付」后立刻切换到等待视图，
   避免「建单 + 生成二维码」期间界面毫无反馈而被误认为卡住。
   尺寸与 .dlg-qr-box 一致（同为 border-box 12rem），切换时不产生跳动。 */
.dlg-qr-loading{display:flex;flex-direction:column;align-items:center}
.dlg-qr-loading-box{
  width:12rem;height:12rem;
  background-color:var(--cream);
  border:1px dashed var(--rule);
  animation:qr-skeleton-pulse 1.2s ease-in-out infinite;
}
.dlg-qr-loading-text{margin-top:.625rem;font-size:.8125rem;line-height:1.5;color:var(--muted)}
@keyframes qr-skeleton-pulse{0%{opacity:1}50%{opacity:.42}100%{opacity:1}}

.dlg-qr-hint{margin-top:.375rem;font-size:.75rem;line-height:1.5;color:var(--muted)}

/* 二维码放大层：盖住整个弹窗，点击任意位置或按 Esc 关闭 */
.dlg-zoom{
  position:fixed;top:0;right:0;bottom:0;left:0;
  inset:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:1.5rem;
  background-color:rgba(10,10,10,.94);
  cursor:zoom-out;
  animation:z9-fade-in .2s var(--ease);
}
.dlg-zoom-img{
  width:16rem;height:16rem;
  padding:.75rem;
  background-color:var(--white);
  object-fit:contain;
}
@media (min-width:48rem){ .dlg-zoom-img{width:20rem;height:20rem} }
.dlg-zoom-tip{margin-top:1rem;font-size:.8125rem;line-height:1.5;color:rgba(255,255,255,.6)}

.dlg-pay-tip{font-size:.875rem;line-height:1.4;font-weight:600;color:var(--ink);text-align:center}
.dlg-pay-meta{font-size:.8125rem;line-height:1.5;color:var(--muted)}
.dlg-pay-meta b{color:var(--brand)}
.dlg-pay-note{
  margin-top:.375rem;
  padding:.625rem .875rem;
  background:var(--cream);
  font-size:.75rem;line-height:1.6;
  color:var(--muted);
}

/* 第一步：金额与支付方式选择（用外边距排版，兼容不支持 flex gap 的老内核） */
.dlg-step{display:flex;flex-direction:column;gap:1.25rem}
.dlg-amounts{display:flex;flex-wrap:wrap;margin-right:-.5rem}
.dlg-amount{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:4.5rem;height:2.5rem;padding:0 .875rem;
  margin:0 .5rem .5rem 0;
  border:1px solid var(--rule);
  background-color:var(--white);
  font-size:.875rem;line-height:1.25rem;font-weight:600;
  color:var(--ink);
  transition:border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.dlg-amount:hover{border-color:var(--brand);color:var(--brand)}
.dlg-amount[aria-pressed="true"]{
  border-color:var(--brand);
  background-color:var(--brand);
  color:var(--white);
}
.dlg-hint{font-size:.8125rem;line-height:1.5;color:var(--muted)}
.dlg-hint b{color:var(--brand)}
.dlg-providers{display:flex;flex-wrap:wrap;margin-right:-.5rem}
.dlg-provider{
  display:inline-flex;align-items:center;
  height:2.5rem;padding:0 .875rem;
  margin:0 .5rem .5rem 0;
  border:1px solid var(--rule);
  background-color:var(--white);
  font-size:.875rem;line-height:1.25rem;font-weight:500;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.dlg-provider:hover{border-color:var(--brand)}
.dlg-provider input{margin:0 .5rem 0 0}
.dlg-provider.is-active{border-color:var(--brand);color:var(--brand);background-color:var(--brand-soft)}
.dlg-pay-actions{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  width:100%;margin-top:.5rem;
}
.dlg-pay-actions>*{margin:.25rem}

/* 诊断信息：错误码 / 请求编号 / 技术详情 */
.dlg-diag{
  display:flex;flex-direction:column;gap:.5rem;
  padding:.875rem;
  background:var(--cream);
  border:1px solid var(--rule);
}
.dlg-diag-msg{font-size:.875rem;line-height:1.4;font-weight:600;color:var(--ink)}
.dlg-diag-meta{font-size:.75rem;line-height:1.5;color:var(--muted)}
.dlg-diag-meta code{
  font-family:var(--mono);
  font-size:.75rem;
  color:var(--brand);
  word-break:break-all;
}
.dlg-diag-tip{font-size:.75rem;line-height:1.6;color:var(--muted)}
.dlg-diag-pre{
  max-height:10rem;
  overflow:auto;
  padding:.625rem;
  background:var(--white);
  border:1px solid var(--rule);
  font-family:var(--mono);
  font-size:.6875rem;line-height:1.5;
  color:var(--muted);
  white-space:pre-wrap;
  word-break:break-all;
}
.dlg-diag-actions{display:flex;flex-wrap:wrap;margin:.125rem -.25rem -.25rem}
.dlg-diag-actions>*{margin:.25rem}

.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  white-space:nowrap;
  height:2.5rem;padding:.5rem 1.125rem;
  border:1px solid var(--rule);
  background-color:var(--white);
  font-size:.8125rem;line-height:1.25rem;font-weight:500;
  letter-spacing:.06em;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-outline:hover{background-color:var(--ink);border-color:var(--ink);color:var(--white)}
.btn-outline:focus-visible{outline:none;box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--gold)}
.btn-outline.tiny{font-size:.75rem;line-height:1rem;color:var(--muted)}
.btn-confirm{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  white-space:nowrap;
  height:2.5rem;padding:.5rem 1.25rem;
  font-size:.8125rem;line-height:1.25rem;font-weight:600;
  letter-spacing:.08em;
  background-color:var(--brand);
  color:var(--white);
  transition:background-color .3s var(--ease);
}
.btn-confirm:hover{background-color:var(--brand-dark)}
.btn-confirm:focus-visible{outline:none;box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--gold)}
.btn-confirm:disabled{pointer-events:none;opacity:.5}
.spin{width:1rem;height:1rem;margin-right:.5rem;animation:z9-spin 1s linear infinite}

/* ==========================================================================
   14. 无障碍 / 降级
   ========================================================================== */
/* 「跳到主内容」：平时移出视口，只有键盘聚焦时才出现在页首 */
.skip-link{
  position:fixed;top:0;left:0;z-index:100;
  padding:.75rem 1.25rem;
  background-color:var(--ink);
  color:var(--white);
  font-size:.875rem;line-height:1.4;
  transform:translateY(-120%);
  transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translateY(0)}
@media (hover:none) and (pointer:coarse){
  button,[role='button'],a{min-height:44px;min-width:44px;touch-action:manipulation}
  button:active,[role='button']:active,a:active{transform:scale(.98);transition:transform .1s}
}
@media (prefers-contrast:high){
  :root{--rule:#000000;--ring:#000000;--border:#000000}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
@media print{
  *{background:#fff !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important}
  @page{margin:1cm}
}

/* ==========================================================================
   15. 老内核降级
   说明：不支持 Grid 的老内核（IE / 老双核内核 / Chromium < 57）用 flex + margin
   模拟网格与 gap 间距，避免出现「文字挤在一起、完全没有排版」的观感。
   页面排版本身以 flex + margin 兜底，因此这里只需补齐仍用 grid 的弹窗。
   ========================================================================== */
@supports not (display:grid){
  .dlg-content{display:block}
  .dlg-content>*{margin-top:1rem}
  .dlg-body>*+*{margin-top:1.25rem}
  .dlg-step>*+*{margin-top:1.25rem}
  .dlg-section>*+*{margin-top:.625rem}
  .dlg-custom>*+*{margin-top:.5rem}
  .dlg-input-row>*+*{margin-left:.5rem}
  .dlg-pay>*+*{margin-top:.625rem}
  .dlg-diag>*+*{margin-top:.5rem}
  .dlg-actions-right>*+*{margin-left:.5rem}
}

/* ==========================================================================
   16. 独立文字页（服务协议 / 隐私说明）
   与首页共用同一套字体、颜色与留白口径，只保留「固定导航 + 单栏正文 + 页脚」。
   ========================================================================== */
.doc-page{padding-top:8rem}
@media (min-width:48rem){ .doc-page{padding-top:11rem} }
.doc{max-width:46rem}
.doc h2{
  margin-top:3rem;
  padding-bottom:.75rem;
  border-bottom:1px solid var(--gold-line-soft);
  font-size:1.125rem;
  font-size:clamp(1.0625rem,1.6vw,1.1875rem);
  font-weight:500;
  line-height:1.4;
  color:var(--ink);
}
.doc h2:first-child{margin-top:0}
.doc p{margin-top:1rem;font-size:.9375rem;line-height:1.9;color:var(--muted)}
.doc ul{
  margin-top:1rem;padding-left:1.25rem;
  list-style:disc;
  font-size:.9375rem;line-height:1.9;color:var(--muted);
}
.doc li+li{margin-top:.5rem}
.doc .doc-note{
  margin-top:2rem;
  font-size:.8125rem;line-height:1.8;
  color:var(--muted);
}