/* Pasero 2026 editorial typography + pricing.
   Chinese hero uses approved B1 (Smiley Sans headline + Noto Sans SC).
   English hero and all other chapters remain unchanged.
   Pricing structure adopts the approved editorial pricing study for both languages. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
@font-face{
 font-family:"Pasero Smiley";font-style:normal;font-weight:400 700;font-display:swap;
 src:url('https://cdn.jsdelivr.net/gh/deepin-community/fonts-smiley-sans@master/SmileySans-Oblique.ttf.woff2') format('woff2'),
     url('https://raw.githubusercontent.com/deepin-community/fonts-smiley-sans/master/SmileySans-Oblique.ttf.woff2') format('woff2');
}
/* Chinese-only typography. All decoration, logo, layout grid, CTAs and artwork are shared. */
html[lang="zh-CN"] .hero h1{
 font-family:'Pasero Smiley','Noto Sans SC',sans-serif!important;
 font-size:clamp(51px,5.5vw,84px)!important;
 font-weight:400!important;line-height:1.24!important;letter-spacing:0!important;
 margin-bottom:27px!important;
}
html[lang="zh-CN"] .hero h1 em{white-space:nowrap}
html[lang="zh-CN"] .hero .eyebrow{font-family:'Noto Sans SC',sans-serif!important;letter-spacing:.04em!important;text-transform:none!important}
html[lang="zh-CN"] .hero .description{font-family:'Noto Sans SC',sans-serif!important;line-height:1.8!important;letter-spacing:0!important}
html[lang="zh-CN"] .hero .cta a,html[lang="zh-CN"] .hero .trust{
 font-family:'Noto Sans SC',sans-serif!important;letter-spacing:0!important;
}
/* Pricing: faithful to selected dark editorial demo. */
#pricing.pricing-chapter{
 --p-bg:#121b15;--p-ink:#f3f6ef;--p-muted:#a7b7a9;--p-card:#1b2820;--p-line:#36463a;
 --p-soft:#1b2820;--p-active:#dcecd4;--p-active-ink:#23402b;
 --p-cta:#ceb6e8;--p-cta-text:#282034;--p-highlight:#c4afe3;
 background:var(--p-bg)!important;color:var(--p-ink)!important;
 padding:106px max(5.8vw,24px) 102px!important;
}
#pricing .pricing-wrap{max-width:1310px!important}
#pricing .pricing-intro{
 display:grid!important;grid-template-columns:minmax(0,1fr) 320px!important;
 gap:20px 70px!important;align-items:end!important;margin-bottom:59px!important;
}
#pricing .pricing-eyebrow{color:#c4afe3!important;font-size:12px!important;letter-spacing:.12em!important;margin-bottom:25px!important}
#pricing .pricing-intro h2{
 font:600 clamp(52px,5.5vw,82px)/1.12 'Space Grotesk',sans-serif!important;
 letter-spacing:-.065em!important;margin:0 0 25px!important;
}
html[lang="zh-CN"] #pricing .pricing-intro h2{
 font:400 clamp(51px,5.7vw,82px)/1.35 'Pasero Smiley','Noto Sans SC',sans-serif!important;
 letter-spacing:0!important;
}
#pricing .pricing-intro h2 em{color:#c4afe3!important}
#pricing .pricing-intro .lead{font:400 15px/1.95 'Noto Sans SC','DM Sans',sans-serif!important;color:#a7b7a9!important;max-width:none!important;margin:0!important;grid-column:1 / -1;grid-row:2;}
#pricing .pricing-note{
  grid-column:2;grid-row:1;
 max-width:none!important;text-align:left!important;
 padding:24px 0 0!important;border-top:1px solid #718873!important;
}
#pricing .pricing-note strong{display:block;font:600 15px/1.5 'Noto Sans SC','DM Sans',sans-serif!important;color:#e6f2df!important}
#pricing .pricing-note p{margin:12px 0 0!important;font:400 13px/1.95 'Noto Sans SC','DM Sans',sans-serif!important;color:#a7b7a9!important}
#pricing .price-controls{
 display:flex!important;justify-content:space-between!important;gap:16px!important;align-items:center!important;
 border:0!important;margin-bottom:28px!important;
}
#pricing .price-tabs{
 display:flex!important;align-items:center!important;gap:4px!important;
 background:#19261d!important;border:1px solid #425446!important;
 padding:5px!important;border-radius:100px!important;
}
#pricing .price-tab{
 border:0!important;border-radius:100px!important;background:transparent!important;
 color:#b3c0b4!important;padding:13px 26px!important;
 font:600 13px/1.35 'Noto Sans SC','DM Sans',sans-serif!important;white-space:nowrap!important;
}
#pricing .price-tab[aria-selected="true"]{background:#dcecd4!important;color:#23402b!important;box-shadow:0 4px 18px #0002!important}
#pricing .price-period{font:400 12px/1.5 'Noto Sans SC','DM Sans',sans-serif!important;color:#a5b3a4!important;padding:0!important}
#pricing .price-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important}
#pricing .plan{
 min-width:0!important;min-height:463px!important;
 background:#1a271e!important;border:1px solid #435446!important;
 border-radius:18px!important;padding:36px 39px 32px!important;
 display:flex!important;flex-direction:column!important;position:relative!important;
}
#pricing .plan.featured{background:linear-gradient(135deg,#262d28,#2a2931 85%)!important;border-color:#c0addc!important}
#pricing .plan-eyebrow{color:#b1c1b1!important;font:600 12px/1.45 'Space Grotesk'!important;letter-spacing:.12em!important;margin:0 0 26px!important}
#pricing .plan .choice{
 position:absolute!important;top:32px!important;right:32px!important;order:0!important;
 font:500 11px/1.3 'Noto Sans SC','DM Sans',sans-serif!important;
 color:#e0cff8!important;border:1px solid #77678a!important;
 border-radius:100px!important;padding:8px 12px!important;letter-spacing:0!important;
}
#pricing .plan .plan-name{font:600 25px/1.3 'Noto Sans SC','Space Grotesk',sans-serif!important;margin:0 0 9px!important;letter-spacing:0!important}
#pricing .plan .price{display:flex!important;align-items:baseline!important;gap:9px!important;flex-wrap:nowrap!important;margin:0 0 9px!important}
#pricing .plan .amount{font:600 clamp(52px,5vw,76px)/1 'Space Grotesk',sans-serif!important;letter-spacing:-.06em!important}
#pricing .plan .period{font:400 13px/1.4 'Noto Sans SC','DM Sans',sans-serif!important;color:#9aaa9c!important}
#pricing .plan .summary{font:400 14px/1.8 'Noto Sans SC','DM Sans',sans-serif!important;color:#bdc9be!important;margin:9px 0 22px!important;min-height:51px!important;max-width:460px!important}
#pricing .plan ul{
 display:grid!important;gap:14px!important;list-style:none!important;
 margin:0 0 27px!important;padding:19px 0 0!important;border-top:1px solid #ffffff1a!important;
}
#pricing .plan li{font:400 13px/1.65 'Noto Sans SC','DM Sans',sans-serif!important;color:#d8e2d8!important;gap:11px!important}
#pricing .plan li::before{content:'✓'!important;color:#b8dcba!important;font:700 16px/1.25 'Space Grotesk'!important}
#pricing .plan.featured li::before{color:#d9c2f4!important}
#pricing .plan .plan-action{
 display:block;width:100%;margin-top:auto;padding:14px 20px;border:0!important;
 border-radius:100px;background:#cbdcc4;color:#2c4731;text-align:center;
 font:700 13px/1.4 'Noto Sans SC','DM Sans',sans-serif;
 cursor:default;opacity:1;
}
#pricing .plan.featured .plan-action{background:#ceb6e8;color:#282034}
#pricing .complete-split{
 display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;
 align-items:stretch!important;gap:20px!important;
}
#pricing .price-grid.is-complete{grid-template-columns:1fr!important}
#pricing .complete-split .plan{min-height:450px!important}
#pricing .complete-note{
 display:flex!important;flex-direction:column!important;justify-content:space-between!important;
 padding:38px 39px!important;border-radius:18px!important;
 background:#e7efdd!important;color:#29422f!important;
}
#pricing .complete-note .tag{font:700 11px/1.5 'Space Grotesk'!important;color:#866eaa!important;letter-spacing:.11em!important}
#pricing .complete-note h3{font:600 clamp(30px,3.3vw,43px)/1.38 'Space Grotesk',sans-serif!important;letter-spacing:-.04em!important;margin:23px 0 13px!important}
html[lang="zh-CN"] #pricing .complete-note h3{font:400 clamp(32px,3.1vw,44px)/1.4 'Pasero Smiley','Noto Sans SC',sans-serif!important;letter-spacing:0!important}
#pricing .complete-note p{font:400 14px/1.9 'Noto Sans SC','DM Sans',sans-serif!important;color:#5c6b5e!important;margin:0!important;max-width:450px!important}
#pricing .complete-savings{display:flex;align-items:baseline;gap:11px;border-top:1px solid #bacbb7;margin-top:25px;padding-top:22px}
#pricing .complete-savings strong{font:600 39px 'Space Grotesk',sans-serif;color:#29422f}
#pricing .complete-savings span{font:400 12px/1.5 'Noto Sans SC','DM Sans',sans-serif;color:#5c6b5e}
#pricing .pricing-diff{
 background:#19231c!important;border:1px solid #334538!important;border-radius:13px!important;
 margin:22px 0 0!important;padding:23px 27px!important;display:block!important;
}
#pricing .pricing-diff strong{font:600 14px/1.5 'Noto Sans SC','DM Sans',sans-serif!important;color:#e4eee2!important}
#pricing .pricing-diff p{font:400 13px/1.75 'Noto Sans SC','DM Sans',sans-serif!important;color:#aebeb0!important;margin:7px 0 0!important}
#pricing .compare-wrap{margin-top:76px!important;padding-top:0!important;border-top:1px solid #47594b!important}
#pricing .compare-toggle{
 display:flex!important;align-items:center!important;gap:20px!important;
 padding:29px 0!important;border:0!important;background:transparent!important;
}
#pricing .compare-toggle strong{font:600 20px/1.4 'Noto Sans SC','DM Sans',sans-serif!important}
#pricing .compare-toggle small{font:400 13px/1.7 'Noto Sans SC','DM Sans',sans-serif!important;color:#aebcae!important;margin-top:9px!important}
#pricing .compare-toggle .plus{font-size:30px!important;color:#d5bdea!important}
#pricing .compare-body{
 padding:21px 23px!important;background:#19251d!important;border:1px solid #3b4c3e!important;border-radius:15px!important;
}
#pricing .compare-category{border-color:#3b4c3e!important}
#pricing .compare-cat-toggle{font:600 14px/1.5 'Noto Sans SC','DM Sans',sans-serif!important;padding:17px 5px!important}
#pricing .compare-table th{font:600 12px/1.5 'Noto Sans SC','DM Sans',sans-serif!important;background:#29392e!important;color:#b9c8b9!important;padding:15px 17px!important}
#pricing .compare-table td{font:400 13px/1.55 'Noto Sans SC','DM Sans',sans-serif!important;padding:15px 17px!important;border-color:#ffffff16!important}
#pricing .compare-table td.yes{color:#badfba!important}
#pricing .compare-table td.pro{color:#d5bdea!important}
#pricing .pricing-foot{margin-top:34px!important;line-height:1.9!important;color:#9cab9b!important}

/* Mobile Pricing: show Free and Pro side-by-side so plans can be compared at a glance. */
@media(max-width:800px){
 
 html[lang="zh-CN"] .hero h1{font-size:clamp(43px,10.4vw,61px)!important;line-height:1.25!important;letter-spacing:0!important}
 html[lang="zh-CN"] .hero .description{line-height:1.75!important}
 #pricing.pricing-chapter{padding:69px 5vw 79px!important}
 #pricing .pricing-intro{display:block!important;margin-bottom:32px!important}
 #pricing .pricing-intro h2{font-size:clamp(42px,9vw,57px)!important;margin-bottom:21px!important}
 html[lang="zh-CN"] #pricing .pricing-intro h2{font:400 clamp(44px,10vw,62px)/1.3 'Pasero Smiley','Noto Sans SC',sans-serif!important}
 #pricing .pricing-intro .lead{font-size:14px!important;line-height:1.85!important}
 #pricing .pricing-note{margin-top:38px!important;padding-top:20px!important}
 #pricing .price-controls{display:block!important;margin:29px 0 20px!important}
 #pricing .price-tabs{display:flex!important;justify-content:space-between!important;width:100%!important;gap:3px!important}
 #pricing .price-tab{flex:1!important;padding:12px 5px!important;font-size:12px!important}
 #pricing .price-period{margin-top:14px!important;text-align:center!important;font-size:11px!important}
 #pricing .price-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important;gap:9px!important;width:100%!important;
 }
 #pricing .price-grid.is-complete{grid-template-columns:minmax(0,1fr)!important}
 #pricing .price-grid>.plan{
  min-width:0!important;width:100%!important;min-height:0!important;
  padding:16px 12px 17px!important;border-radius:14px!important;
 }
 #pricing .plan-eyebrow{font-size:10px!important;line-height:1.4!important;letter-spacing:.04em!important;margin:0 0 13px!important}
 /* The Pro pill displaces the pricing row on narrow screens; its purple border already distinguishes Pro. */
 #pricing .price-grid:not(.is-complete) .plan .choice{display:none!important}
 #pricing .price-grid .plan .plan-name{font-size:clamp(20px,5vw,23px)!important;margin:0 0 9px!important}
 #pricing .price-grid .plan .price{
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;
  gap:3px!important;min-height:58px!important;flex-wrap:nowrap!important;
  margin:0 0 9px!important;
 }
 #pricing .price-grid .plan .amount{font-size:clamp(30px,7.6vw,42px)!important;letter-spacing:-.06em!important}
 #pricing .price-grid .plan .period{font-size:10px!important;line-height:1.4!important}
 #pricing .price-grid .plan .summary{
  font-size:11px!important;line-height:1.5!important;
  min-height:4.5em!important;margin:4px 0 12px!important;
  overflow-wrap:anywhere;
 }
 #pricing .price-grid .plan ul{gap:10px!important;padding:13px 0 0!important;margin:0 0 17px!important}
 #pricing .price-grid .plan li{
  font-size:11px!important;line-height:1.48!important;gap:6px!important;
  overflow-wrap:anywhere!important;word-break:normal!important;
 }
 #pricing .price-grid .plan li::before{font-size:13px!important;flex:none!important}
 #pricing .price-grid .plan .plan-action{
  width:100%!important;font-size:10px!important;line-height:1.45!important;
  padding:10px 5px!important;overflow-wrap:anywhere!important;
 }
 #pricing .price-grid.is-complete .plan{padding:26px 25px!important}
 #pricing .price-grid.is-complete .plan .summary{min-height:0!important}
 #pricing .price-grid.is-complete .plan .choice{display:block!important;top:24px!important;right:23px!important;padding:6px 9px!important}
 #pricing .complete-split{display:grid!important;grid-template-columns:1fr!important;gap:15px!important}
 #pricing .complete-note{padding:30px 26px!important}
 #pricing .complete-note h3{font-size:33px!important}
 #pricing .pricing-diff{margin-top:18px!important;padding:20px!important}
 #pricing .compare-wrap{margin-top:60px!important}
 #pricing .compare-toggle strong{font-size:18px!important}
 #pricing .compare-toggle small{font-size:12px!important}
 #pricing .compare-body{padding:12px 10px!important}
 #pricing .compare-table th{font-size:11px!important;padding:11px 7px!important}
 #pricing .compare-table td{font-size:11px!important;padding:12px 7px!important}
 #pricing .compare-table td:not(:first-child){font-size:11px!important}
 #pricing .compare-table th:first-child{width:52%!important}
 #pricing .pricing-foot{font-size:11px!important}
}
@media(max-width:370px){
 html[lang="zh-CN"] .hero h1{font-size:clamp(39px,10vw,46px)!important}
 #pricing .price-tab{font-size:11px!important;padding:11px 3px!important}
 #pricing .price-grid{gap:7px!important}
 #pricing .price-grid:not(.is-complete) .plan{padding:15px 9px!important}
 #pricing .price-grid .plan .amount{font-size:clamp(28px,8vw,32px)!important}
 #pricing .price-grid .plan .plan-action{padding:9px 4px!important}
}


/* 2026-10-25 — Chinese-only editorial typography for chapters 02, 03 and 05.
   No changes to images, cards, screen positions, backgrounds or English layout. */
html[lang="zh-CN"] #desktop-explorer .explorer-title,
html[lang="zh-CN"] #mobile-story .mobile-headline,
html[lang="zh-CN"] #story .story-heading h2,
html[lang="zh-CN"] #story .story-excerpt h3{
 font-family:'Pasero Smiley','Noto Sans SC',sans-serif!important;
 font-style:normal!important;font-weight:400!important;
 letter-spacing:0!important;text-wrap:pretty;
}
html[lang="zh-CN"] #desktop-explorer .explorer-title{
 font-size:clamp(37px,4vw,56px)!important;line-height:1.32!important;
 max-width:100%!important;margin-bottom:19px!important;
}
html[lang="zh-CN"] #desktop-explorer .explorer-lead{
 font-family:'Noto Sans SC',sans-serif!important;line-height:1.85!important;
 max-width:620px!important;margin-top:0!important;margin-bottom:48px!important;
}
html[lang="zh-CN"] #mobile-story .mobile-headline{
 font-size:clamp(37px,4.1vw,58px)!important;line-height:1.32!important;
 max-width:none!important;margin-bottom:0!important;
}
html[lang="zh-CN"] #mobile-story .mobile-side-intro p{
 font-family:'Noto Sans SC',sans-serif!important;line-height:1.85!important;
}
html[lang="zh-CN"] #story .story-heading h2{
 font-size:clamp(37px,4.3vw,62px)!important;line-height:1.35!important;
 max-width:none!important;margin:28px 0 24px!important;
}
html[lang="zh-CN"] #story .story-heading{max-width:1120px!important}
html[lang="zh-CN"] #story .story-summary{
 font-family:'Noto Sans SC',sans-serif!important;font-size:16px!important;
 line-height:1.85!important;max-width:620px!important;
}
html[lang="zh-CN"] #story .story-excerpt h3{
 font-size:clamp(28px,3vw,43px)!important;line-height:1.54!important;
 margin:24px 0!important;overflow-wrap:anywhere;
}
html[lang="zh-CN"] #story .story-excerpt p,
html[lang="zh-CN"] #story .story-full p{
 font-family:'Noto Sans SC',sans-serif!important;line-height:1.9!important;
}
html[lang="zh-CN"] #story .story-full h3{font-family:'Noto Sans SC',sans-serif!important}
html[lang="zh-CN"] #desktop-explorer .section-kicker,
html[lang="zh-CN"] #mobile-story .mobile-kicker,
html[lang="zh-CN"] #story .story-topline{
 font-family:'Noto Sans SC',sans-serif!important;letter-spacing:.04em!important;
}
/* Mobile language toggle: always visibly available on the home page. */
@media(max-width:800px){
 .header{justify-content:space-between!important;gap:4px!important;padding:0 3vw!important}
 .header .nav{flex:1 1 auto!important;min-width:0!important;gap:clamp(7px,1.8vw,12px)!important}
 .header .actions{flex:0 0 auto!important;margin-left:4px!important;gap:5px!important}
 .header .pasero-lang-picker{display:inline-flex!important;visibility:visible!important;opacity:1!important;flex:0 0 auto!important}
 .header .pasero-lang-trigger{display:inline-grid!important;visibility:visible!important;opacity:1!important;width:34px!important;height:34px!important}
 .header .download{padding:9px 10px!important;font-size:clamp(10px,2.75vw,12px)!important}
 html[lang="zh-CN"] #desktop-explorer .explorer-title{font-size:clamp(30px,7vw,43px)!important;line-height:1.35!important}
 html[lang="zh-CN"] #mobile-story .mobile-headline{font-size:clamp(30px,7vw,43px)!important;line-height:1.35!important}
 html[lang="zh-CN"] #story .story-heading h2{font-size:clamp(30px,7.4vw,45px)!important;line-height:1.4!important}
 html[lang="zh-CN"] #story .story-excerpt h3{font-size:clamp(27px,6.5vw,38px)!important;line-height:1.55!important}
 html[lang="zh-CN"] #desktop-explorer .explorer-lead{margin-bottom:34px!important}
}
@media(max-width:390px){
 .header .nav{gap:5px!important}
 .header .nav a{font-size:11px!important}
 .header .actions{gap:3px!important}
 .header .pasero-lang-trigger{width:31px!important;height:31px!important}
 .header .download{padding:9px 7px!important;font-size:10px!important}
}

/* Shared homepage brand placement: directly under the nav, aligned upper-left. */
.hero{position:relative}
.hero-home-logo{position:absolute;z-index:4;top:2px;left:4.15vw;width:clamp(185px,20vw,285px);display:block}
.hero-home-logo img{width:100%;height:auto;display:block;object-fit:contain}
.hero .copy{padding-top:108px!important}
@media(max-width:800px){
 .hero-home-logo{top:0;left:3vw;width:min(225px,56vw)}
 .hero .copy{padding-top:91px!important}
}
@media(max-width:390px){
 .hero-home-logo{width:min(192px,54vw)}
 .hero .copy{padding-top:81px!important}
}