/* 和讼调解中心官网 — 商务风 v4（2026-07-12 换肤：配色卡 F 靛蓝×暖杏金）
   公信力机构 · 温和正式 · 国内 B2B 企业官网商务风
   类契约不变：全部选择器与变量名沿用 v3，仅换值与质感
   （--red 系变量名保留作别名，值已换为靛蓝系；历史备份：styles_旧版红白备份.css，勿引用） */
:root{
  --red:#2B3A67; --red-2:#3D5290; --red-deep:#1C2747; --red-soft:#E0A458; --red-tint:#E9EDF8;
  --ink:#1B2130; --ink-soft:#5A6376; --ink-faint:#8B93A8;
  --paper:#FFFFFF; --paper-2:#F4F5FA; --paper-3:#E8EBF4; --card-bg:#FFFFFF;
  --line:#E4E7F0; --line-2:#CDD4E5; --footer:#131B33;
  --oat:#F3E3C8;
  --serif:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif;
  --maxw:1160px;
  /* 新皮语义别名（与 --red 系同值，便于后续维护） */
  --indigo:#2B3A67; --indigo-deep:#1C2747; --indigo-light:#3D5290; --gold:#E0A458;
  --shadow:0 4px 20px rgba(43,58,103,.08);
  --shadow-hover:0 12px 32px rgba(43,58,103,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink); background:var(--paper); line-height:1.8; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,blockquote{font-family:var(--serif); line-height:1.36; font-weight:700; letter-spacing:.01em}
h4{line-height:1.3; font-weight:700}
a{color:inherit; text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.eyebrow{font-size:12.5px; letter-spacing:.24em; color:var(--red); font-weight:700; margin-bottom:18px; display:flex; align-items:center; gap:10px}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--red-soft); display:inline-block; border-radius:2px}
.eyebrow.center{justify-content:center}

/* ===== nav：白底 sticky + 轻投影 ===== */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); box-shadow:0 2px 12px rgba(43,58,103,.08)}
nav{display:flex; align-items:center; justify-content:space-between; height:72px; max-width:var(--maxw); margin:0 auto; padding:0 28px}
.brand{display:flex; align-items:center; gap:12px; color:var(--ink)}
.brand .mark{width:38px;height:38px;background:linear-gradient(135deg,var(--red),var(--red-2)); color:#fff; display:grid;place-items:center; font-weight:700; font-size:19px; border-radius:9px; box-shadow:0 4px 10px rgba(43,58,103,.28)}
.brand b{font-size:18px; letter-spacing:.05em; font-weight:700; display:block; color:var(--ink)}
.brand .en{font-size:10px; color:var(--ink-faint); letter-spacing:.2em; display:block; margin-top:2px; font-weight:500}
.navlinks{display:flex; gap:32px}
.navlinks a{color:var(--ink); font-size:14.5px; transition:color .2s; position:relative; padding:4px 0; font-weight:500}
.navlinks a:hover{color:var(--red)}
.navlinks a.active{color:var(--red); font-weight:600}
.navlinks a.active::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px; background:var(--red); border-radius:2px}
.menu-btn{display:none; background:none;border:none;color:var(--red);font-size:24px;cursor:pointer}

/* ===== buttons ===== */
.btn{display:inline-flex; align-items:center; gap:9px; padding:13px 30px; border-radius:8px; font-size:15px; font-weight:600; transition:all .22s; cursor:pointer; border:1.5px solid transparent}
.btn-red{background:var(--red); color:#fff; box-shadow:0 6px 16px rgba(43,58,103,.3)}
.btn-red:hover{background:var(--red-2); transform:translateY(-2px); box-shadow:0 10px 22px rgba(43,58,103,.36)}
.btn-line{border-color:var(--line-2); color:var(--ink); background:transparent}
.btn-line:hover{border-color:var(--red); color:var(--red); background:var(--red-tint)}
.btn-white{background:#fff; color:var(--red); box-shadow:0 6px 16px rgba(9,15,35,.22)}
.btn-white:hover{background:var(--paper-2); transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.55); color:#fff}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.12)}

/* ===== home hero：实景照片 + 靛蓝压暗（背景图在 index.html 内联指定）===== */
.hero{position:relative; background-color:var(--indigo-deep); background-size:cover; background-position:center; overflow:hidden}
.hero::before{content:""; position:absolute; right:-140px; top:-160px; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle, rgba(96,124,196,.22), transparent 62%); z-index:1}
.hero .wrap{position:relative; z-index:2; padding:128px 28px 132px}
.hero .htag{display:inline-block; color:var(--gold); font-size:12.5px; font-weight:700; letter-spacing:.18em; padding:7px 18px; border:1px solid rgba(224,164,88,.45); border-radius:99px; margin-bottom:28px}
.hero h1{font-size:clamp(34px,4.6vw,56px); color:#fff; max-width:18ch; text-shadow:0 2px 24px rgba(10,16,38,.4)}
.hero h1 .hl{color:var(--gold)}
.hero p.lead{margin-top:26px; font-size:clamp(16px,2vw,18.5px); color:rgba(233,238,250,.9); max-width:50ch}
.cta-row{margin-top:40px; display:flex; gap:16px; flex-wrap:wrap}

/* ===== photo 实景图 ===== */
.photo{border-radius:12px; overflow:hidden; border:1px solid var(--line); margin:0; box-shadow:0 20px 44px -28px rgba(43,58,103,.4)}
.photo img{display:block; width:100%; object-fit:cover}
.faq-grid{display:grid; grid-template-columns:1fr 340px; gap:52px; align-items:start}
.faq-grid aside{position:sticky; top:104px}

/* ===== page hero：靛蓝对角渐变 + 光斑 ===== */
.phero{background:linear-gradient(125deg,var(--indigo-deep) 0%, var(--indigo) 55%, var(--indigo-light) 100%); color:#E9EEFA; position:relative; overflow:hidden}
.phero::after{content:""; position:absolute; right:-70px; top:-70px; width:340px; height:340px; border:1px solid rgba(233,238,250,.16); border-radius:50%}
.phero::before{content:""; position:absolute; right:7%; bottom:-130px; width:280px; height:280px; background:radial-gradient(circle, rgba(224,164,88,.18), transparent 66%); border-radius:50%}
.phero .wrap{position:relative; z-index:2; padding:88px 28px 80px}
.phero h1{font-size:clamp(29px,4.2vw,46px); color:#fff; max-width:20ch}
.phero p{margin-top:20px; color:rgba(233,238,250,.82); max-width:58ch; font-size:16.5px; font-weight:300}
.crumb{font-size:12.5px; color:rgba(233,238,250,.62); letter-spacing:.14em; margin-bottom:18px}
.crumb a{color:rgba(233,238,250,.58)} .crumb a:hover{color:#fff}

/* ===== stat strip ===== */
.stats{background:var(--paper-2); color:var(--ink); border-bottom:1px solid var(--line)}
.stats .grid{display:grid; grid-template-columns:repeat(4,1fr)}
.stat{padding:44px 26px; text-align:center; border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat .num{font-size:clamp(24px,3.2vw,34px); font-weight:800; color:var(--red); line-height:1.3}
.stat .num small{font-size:16px; color:var(--ink-soft); margin-left:3px; font-weight:600}
.stat .lbl{font-size:13.5px; color:var(--ink-soft); margin-top:9px; letter-spacing:.08em}

/* ===== sections：白 ↔ 极浅靛蓝交替 ===== */
section.block{padding:96px 0}
section.block.alt{background:var(--paper-2)}
section.block.red{background:linear-gradient(135deg,var(--indigo-deep),var(--indigo)); color:#E9EEFA}
.head{max-width:64ch; margin-bottom:56px}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head h2{font-size:clamp(26px,3.3vw,36px); color:var(--ink)}
.red .head h2{color:#fff}
.head p{margin-top:18px; color:var(--ink-soft); font-size:16.5px}
.red .head p{color:rgba(233,238,250,.8)}

/* ===== quote band：金句 ===== */
.quoteband{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center}
.quoteband .wrap{padding:88px 28px}
.quoteband blockquote{font-size:clamp(24px,3.4vw,38px); color:var(--ink); max-width:26ch; margin:0 auto; font-weight:700}
.quoteband blockquote .hl{color:var(--red)}
.quoteband .who{margin-top:24px; font-size:13px; letter-spacing:.24em; color:var(--ink-faint)}

/* ===== two-col ===== */
.two{display:grid; grid-template-columns:1.12fr .88fr; gap:64px; align-items:start}
.two p{color:var(--ink-soft); font-size:16.5px; margin-bottom:18px}
.two p strong{color:var(--ink)}
.pullbox{background:linear-gradient(135deg,var(--indigo) 0%,var(--indigo-deep) 100%); color:#F2F5FC; padding:40px 36px; border-radius:12px; box-shadow:0 16px 36px -20px rgba(28,39,71,.5)}
.pullbox.tint{background:var(--paper-2); color:var(--ink); border:1px solid var(--line); box-shadow:none}
.pullbox h3{color:#fff; font-size:19px; margin-bottom:18px}
.pullbox.tint h3{color:var(--red)}
.pullbox ul{list-style:none}
.pullbox li{padding:11px 0; border-bottom:1px solid rgba(233,238,250,.16); font-size:15px; color:rgba(240,244,252,.94); display:flex; gap:12px}
.pullbox.tint li{border-color:var(--line-2); color:var(--ink-soft)}
.pullbox li:last-child{border-bottom:none}
.pullbox li::before{content:"✓"; color:var(--gold); font-weight:700}
.pullbox.tint li::before{color:var(--red)}

/* ===== cards：白底圆角投影 + 顶部主色渐变条 ===== */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card-bg); border:1px solid var(--line); border-radius:10px; padding:36px 32px; transition:all .25s; position:relative; overflow:hidden; box-shadow:var(--shadow)}
.card::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--red),var(--red-2) 60%,var(--red-soft)); opacity:0; transition:opacity .25s}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow-hover); border-color:var(--line-2)}
.card:hover::before{opacity:1}
.card .icon{width:54px; height:54px; border-radius:12px; background:var(--red-tint); display:grid; place-items:center; margin-bottom:20px}
.card .icon svg{width:28px; height:28px}
.card .ci{font-size:12.5px; color:var(--red); font-weight:700; letter-spacing:.08em}
.card h3{margin:12px 0 14px; font-size:20px; color:var(--ink)}
.card p{color:var(--ink-soft); font-size:15.5px}
.card ul{margin-top:14px; list-style:none}
.card li{font-size:14.5px; color:var(--ink-soft); padding:6px 0 6px 18px; position:relative}
.card li::before{content:""; position:absolute; left:0; top:15px; width:5px; height:5px; background:var(--red-soft); border-radius:50%}

/* ===== 调解 vs 诉讼 对比：圆角包裹 + 靛蓝表头 + 斑马纹 ===== */
.cmp{width:100%; border-collapse:separate; border-spacing:0; margin-top:8px; background:#fff; border-radius:10px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line)}
.cmp th{text-align:left; font-size:16px; color:#fff; background:var(--red); padding:16px 18px; font-weight:600; border-bottom:none}
.cmp th.med{color:var(--gold)}
.cmp td{padding:17px 18px; border-bottom:1px solid var(--line); font-size:15px; color:var(--ink-soft); vertical-align:top; line-height:1.7}
.cmp td.dim{font-weight:700; color:var(--ink); font-size:14.5px; width:14%; letter-spacing:.04em}
.cmp td.med{background:var(--red-tint); color:var(--ink)}
.cmp tr:nth-child(even) td{background:var(--paper-2)}
.cmp tr:nth-child(even) td.med{background:var(--red-tint)}
.cmp tr:last-child td{border-bottom:none}
.cmp .mini{display:block; font-size:12.5px; color:var(--ink-faint); margin-top:3px}

/* ===== tier（法院驻点两档）===== */
.tier{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.tcol{background:var(--card-bg); border:1px solid var(--line); border-radius:10px; padding:36px 34px; box-shadow:var(--shadow); transition:all .25s}
.tcol:hover{transform:translateY(-4px); box-shadow:var(--shadow-hover)}
.tcol.live{border-top:4px solid var(--red)}
.tcol.soon{border-top:4px solid var(--red-soft)}
.tcol .badge{display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.06em; padding:5px 15px; border-radius:99px; margin-bottom:16px}
.tcol.live .badge{background:var(--red-tint); color:var(--red-2)}
.tcol.soon .badge{background:var(--oat); color:#8A5B1E}
.tcol h3{font-size:20px; color:var(--ink); margin-bottom:12px}
.tcol p{font-size:15px; color:var(--ink-soft)}
.tcol .ph,.fineprint{margin-top:16px; font-size:13.5px; color:var(--ink-soft); background:var(--paper-2); border:1px dashed var(--line-2); padding:12px 14px; border-radius:8px}

/* ===== process steps（数字圆徽章 + 连线）===== */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; counter-reset:s}
.step{position:relative; padding-top:56px}
.step::before{counter-increment:s; content:"0" counter(s); position:absolute; top:0; left:0; font-size:14px; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--red),var(--red-2)); width:40px;height:40px;border-radius:50%; display:grid;place-items:center; z-index:2; box-shadow:0 4px 12px rgba(43,58,103,.3)}
.step::after{content:""; position:absolute; top:20px; left:50px; right:-6px; height:2px; background:var(--line-2); z-index:1}
.step:last-child::after{display:none}
.step h4{font-size:16px; color:var(--ink); margin-bottom:8px}
.step p{font-size:13.5px; color:var(--ink-soft)}
.red .step h4{color:#fff}
.red .step p{color:rgba(233,238,250,.75)}
.red .step::after{background:rgba(233,238,250,.22)}

/* ===== value grid ===== */
.vgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.vitem{padding:32px 30px; background:var(--card-bg); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); transition:all .25s}
.vitem:hover{transform:translateY(-4px); box-shadow:var(--shadow-hover)}
.vitem .vn{font-size:12.5px;color:var(--red);font-weight:700;letter-spacing:.08em}
.vitem h3{font-size:18px;color:var(--ink);margin:10px 0 10px}
.vitem p{font-size:14.5px;color:var(--ink-soft)}

/* ===== domain chips ===== */
.chips{display:flex; flex-wrap:wrap; gap:12px}
.chip{font-size:15px; color:var(--ink); background:var(--card-bg); border:1px solid var(--line); padding:11px 24px; border-radius:99px; transition:all .2s; font-weight:500; box-shadow:0 2px 8px rgba(43,58,103,.06)}
.chip:hover{border-color:var(--red-soft); color:var(--red-2); background:var(--red-tint); transform:translateY(-2px)}
.chip b{color:var(--red-soft); font-weight:700; margin-right:6px}

/* ===== feature row ===== */
.frow{display:grid; grid-template-columns:64px 1fr; gap:28px; padding:40px 0; border-bottom:1px solid var(--line)}
.frow:last-child{border-bottom:none}
.frow .idx{font-size:34px; font-weight:800; color:var(--red); line-height:1}
.frow h3{font-size:22px; color:var(--ink); margin-bottom:12px}
.frow p{color:var(--ink-soft); font-size:16px; max-width:64ch}
.frow .tags{margin-top:16px; display:flex; gap:10px; flex-wrap:wrap}
.frow .tag{font-size:13px; color:var(--red-2); background:var(--red-tint); border:1px solid rgba(43,58,103,.18); padding:5px 15px; border-radius:99px}

/* ===== FAQ ===== */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{font-size:17.5px; font-weight:700; color:var(--ink); padding:24px 44px 24px 0; cursor:pointer; list-style:none; position:relative; transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:26px; font-weight:400; color:var(--red); transition:transform .25s}
.faq details[open] summary{color:var(--red-2)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq summary:hover{color:var(--red)}
.faq .a{padding:0 24px 26px 0; color:var(--ink-soft); font-size:15.5px; max-width:68ch}

/* ===== CTA ===== */
.cta-band{background:linear-gradient(125deg,var(--indigo-deep) 0%,var(--indigo) 60%,var(--indigo-light) 100%); color:#E9EEFA; text-align:center; position:relative; overflow:hidden}
.cta-band::after{content:""; position:absolute; left:50%; top:-90px; transform:translateX(-50%); width:340px;height:340px;background:radial-gradient(circle, rgba(224,164,88,.16), transparent 68%); border-radius:50%}
.cta-band .wrap{position:relative; z-index:2; padding:88px 28px}
.cta-band h2{font-size:clamp(24px,3.2vw,36px); color:#fff; max-width:24ch; margin:0 auto}
.cta-band p{color:rgba(233,238,250,.8); margin:18px auto 0; max-width:52ch; font-size:16.5px}
.cta-band .cta-row{justify-content:center}

/* ===== contact ===== */
.cgrid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.cinfo .item{padding:22px 0; border-bottom:1px solid var(--line)}
.cinfo .k{font-size:12.5px; color:var(--red); letter-spacing:.12em; margin-bottom:6px; font-weight:600}
.cinfo .v{font-size:17px; color:var(--ink)}
.form{background:var(--card-bg); border:1px solid var(--line); border-radius:12px; padding:38px 36px; box-shadow:var(--shadow)}
.form label{display:block; font-size:14px; color:var(--ink-soft); margin:16px 0 7px}
.form input,.form select,.form textarea{width:100%; padding:12px 14px; border:1px solid var(--line-2); border-radius:8px; font-size:15px; font-family:inherit; color:var(--ink); background:var(--paper-2)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none; border-color:var(--red); background:#fff; box-shadow:0 0 0 3px rgba(43,58,103,.12)}
.form textarea{min-height:110px; resize:vertical}
.form .btn{margin-top:22px; width:100%; justify-content:center}
.note{font-size:12.5px; color:var(--ink-soft); margin-top:14px; opacity:.85}

/* ===== footer：极深靛蓝 ===== */
footer{background:var(--footer); color:rgba(226,232,246,.6); padding:60px 0 32px; font-size:14px}
.fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(226,232,246,.12)}
.fgrid .brand{margin-bottom:16px; color:#fff}
.fgrid .brand b{color:#fff}
.fgrid .brand .mark{background:linear-gradient(135deg,var(--red-2),var(--red)); box-shadow:none}
.fcol h4{font-size:14px; color:#fff; letter-spacing:.06em; margin-bottom:16px; font-weight:600}
.fcol a{display:block; color:rgba(226,232,246,.6); padding:6px 0; font-size:14px; transition:color .2s}
.fcol a:hover{color:var(--red-soft)}
.fcol p{font-size:13.5px; color:rgba(226,232,246,.55); margin-bottom:6px}
.fbottom{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding-top:24px; font-size:13px; color:rgba(226,232,246,.45)}

/* ===== reveal ===== */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

/* ===== 右侧悬浮咨询条（880px 以下隐藏）===== */
.side-float{position:fixed; right:18px; bottom:110px; z-index:200; display:flex; flex-direction:column; background:#fff; border-radius:10px; box-shadow:0 6px 24px rgba(43,58,103,.18); overflow:visible}
.side-float .sf-item{position:relative; width:66px; padding:12px 4px 10px; text-align:center; font-size:11.5px; color:var(--ink-soft); cursor:pointer; display:block; transition:all .2s; line-height:1.4}
.side-float .sf-item:first-child{border-radius:10px 10px 0 0}
.side-float .sf-item:last-child{border-radius:0 0 10px 10px}
.side-float .sf-item + .sf-item{border-top:1px solid var(--line)}
.side-float .sf-item:hover{color:var(--red); background:var(--red-tint)}
.side-float .sf-icon{display:block; width:22px; height:22px; margin:0 auto 4px}
.side-float .sf-icon svg{width:22px; height:22px; display:block}
.side-float .sf-pop{display:none; position:absolute; right:76px; top:50%; transform:translateY(-50%); background:#fff; border-radius:8px; box-shadow:0 6px 24px rgba(43,58,103,.2); padding:14px 16px; font-size:12.5px; color:var(--ink); white-space:nowrap; text-align:center}
.side-float .sf-item:hover .sf-pop{display:block}
.side-float .sf-pop .qr{width:110px; height:110px; border:1px dashed var(--line-2); border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--ink-faint); margin:8px auto 0; font-size:12px; line-height:1.6}

@media(max-width:880px){
  .navlinks{display:none; position:absolute; top:72px; left:0; right:0; background:#fff; flex-direction:column; padding:14px 28px; border-bottom:1px solid var(--line); box-shadow:0 12px 24px rgba(43,58,103,.12)}
  .navlinks.open{display:flex} .menu-btn{display:block}
  .hero .wrap{padding:96px 28px 100px}
  .faq-grid{grid-template-columns:1fr; gap:36px}
  .faq-grid aside{position:static; max-width:420px}
  .stats .grid{grid-template-columns:repeat(2,1fr)} .stat:nth-child(2){border-right:none}
  .two{grid-template-columns:1fr; gap:34px}
  .cards,.cards.c3,.tier{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr); gap:30px 16px}
  .step::after{display:none}
  .vgrid{grid-template-columns:1fr}
  .cgrid{grid-template-columns:1fr; gap:34px}
  .fgrid{grid-template-columns:1fr; gap:28px}
  section.block{padding:72px 0}
  .cmp{display:block; overflow-x:auto}
  .side-float{display:none}
}

/* LOGO 徽章(2511新启用) */
img.mark{width:40px;height:40px;object-fit:contain;background:none !important;box-shadow:none !important;border-radius:0 !important;display:block}
footer img.mark{filter:brightness(0) invert(1);opacity:.92}

/* ===== 法规政策库 & 调解研究（2026-07-15 新增栏目）===== */
@media(min-width:881px) and (max-width:1120px){
  .navlinks{gap:20px}
  .brand .en{display:none}
}
.doc-card{display:block}
.doc-card h3{line-height:1.4}
.doc-meta{font-size:13px !important; color:var(--ink-faint) !important; letter-spacing:.02em; margin-bottom:8px}
ul.points{list-style:none; margin:0}
ul.points li{padding:12px 0 12px 30px; border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:15.5px; position:relative}
ul.points li:last-child{border-bottom:none}
ul.points li::before{content:"✓"; position:absolute; left:4px; color:var(--red-soft); font-weight:700}
.art-wrap{max-width:760px; margin:0 auto}
.art-body h2{font-size:clamp(21px,2.6vw,26px); color:var(--ink); margin:40px 0 16px}
.art-body h2:first-child{margin-top:0}
.art-body h3{font-size:18px; color:var(--ink); margin:30px 0 12px}
.art-body p{color:var(--ink-soft); font-size:16px; margin-bottom:16px}
.art-body strong{color:var(--ink)}
.art-body ul{margin:0 0 18px 2px; list-style:none}
.art-body li{color:var(--ink-soft); font-size:15.5px; padding:5px 0 5px 20px; position:relative}
.art-body li::before{content:""; position:absolute; left:2px; top:15px; width:5px; height:5px; background:var(--red-soft); border-radius:50%}
.art-body blockquote{border-left:3px solid var(--red-soft); background:var(--paper-2); padding:16px 22px; margin:20px 0; font-size:15.5px; font-weight:500; color:var(--ink); border-radius:0 8px 8px 0}
.art-body a{color:var(--red-2); text-decoration:underline; text-underline-offset:3px}