/* 自在 · 缠论指标系统 chanlun.io */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#F7F3EA;color:#33302B;
  font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:#24211C}
a:hover{color:#B2583B}
input::placeholder{color:#A9A396}
img,svg{max-width:100%}
.page{max-width:1440px;margin:0 auto;width:100%;display:flex;flex-direction:column;
  background:#F7F3EA;position:relative}
.tw{width:100%;min-width:0}
.fig{min-width:0;max-width:100%}
:focus-visible{outline:2px solid #B2583B;outline-offset:2px}

/* 导航反馈：悬停框选，按下反选，键盘聚焦框选 */
.page>header nav a{display:inline-block;border-radius:8px;padding:7px 12px;margin:-7px -12px;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease}
.page>header nav a:hover{background:#F5F2EA!important;color:#24211C!important;box-shadow:0 0 0 1px #DAD3C4}
.page>header nav a:active{background:#24211C!important;color:#F7F3EA!important;box-shadow:0 0 0 1px #24211C}
.page>header nav a:focus-visible{outline:none!important;background:#EAF0EC!important;color:#24211C!important;box-shadow:0 0 0 2px #416B55}

/* 页头始终一行排布，不折行 */
.page>header{flex-wrap:nowrap}
.page>header nav{flex-wrap:nowrap}
.page>header a{white-space:nowrap}

/* 1440 以内：收窄页头留白与导航间距，给六个导航项腾位置 */
@media (max-width:1440px){
  .page>header{padding-left:72px!important;padding-right:72px!important}
  .page>header nav{gap:20px!important}
}

/* 中等宽度：收窄左右留白 */
@media (max-width:1240px){
  .page>section,.page>header{padding-left:56px!important;padding-right:56px!important}
}
@media (max-width:1240px){
  .who-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
.lang-switch-mobile{display:none}
@media (max-width:1160px){
  .page>header nav{display:none!important}
  .lang-switch-mobile{display:inline-flex!important;align-items:center;min-height:40px;padding:9px 4px;font-size:14px;margin-left:auto}
}

/* 窄屏 */
@media (max-width:900px){
  .page{overflow-x:clip}
  .page>section{padding-left:20px!important;padding-right:20px!important;
    padding-top:64px!important;padding-bottom:64px!important}
  .page>section>*{min-width:0}
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: 250px"],
  [style*="grid-template-columns: 300px"]{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
  h1{font-size:34px!important;line-height:1.3!important}
  h2{font-size:27px!important}
  h3{font-size:19px!important}
  .page p{font-size:15px!important}

  /* 页头 */
  .page>header{height:auto!important;min-height:62px;gap:10px!important;
    padding:9px 20px!important}
  .page>header>div:first-child svg{width:30px!important;height:30px!important}
  .page>header [style*="font-size: 20px"]{font-size:15px!important}
  .page>header [style*="letter-spacing: 0.22em"]{font-size:8px!important}
  .page>header a{min-height:40px!important;padding:9px 14px!important;
    font-size:13px!important;white-space:nowrap;flex-shrink:0}
  .page>header>div:first-child{min-width:0;overflow:hidden;flex:1 1 auto}
  .page>header>div:first-child *{min-width:0}
  .page>header>div:first-child>div:last-child{min-width:0;overflow:hidden}
  .page>header [style*="white-space: nowrap"]{overflow:hidden;text-overflow:ellipsis}

  /* 示意图：窄屏等比缩放适应宽度；表格保持横向滚动 */
  .fig{aspect-ratio:auto!important;overflow-x:clip}
  .fig>svg{width:100%!important;height:auto!important;max-width:100%}
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tw table{min-width:560px}

  /* 收窄上下间距，节省屏幕空间 */
  .page>section{padding-top:48px!important;padding-bottom:48px!important}
  .page>section [style*="padding: 34px"]{padding:24px!important}
  .page>section [style*="padding: 40px"]{padding:26px!important}

  /* 主按钮 */
  .page>section a[href*="pricing"],.page>section a[href="#trial"]{
    padding:15px 22px!important}

  footer{flex-direction:column!important;gap:20px!important;
    padding-left:20px!important;padding-right:20px!important}

  /* 条款/隐私页的品牌链接是页头直接子元素，允许收缩省略 */
  .page>header>a{min-width:0;overflow:hidden;text-overflow:ellipsis;
    flex-shrink:1!important;font-size:14px!important}

  /* 适合谁卡片：图标与标题同一行，描述整行 */
  .who-grid>[style*="flex-direction: column"]{flex-direction:row!important;
    flex-wrap:wrap!important;align-items:center!important;column-gap:14px!important}
  .who-grid>div>p{flex-basis:100%!important}

  /* 页脚品牌全名收窄字号 */
  footer [style*="letter-spacing: 0.10em"]{font-size:16px!important}
}
@media (max-width:620px){
  .page>header a[href$="#trial"]{display:none!important}
  .page>header [style*="letter-spacing: 0.22em"]{display:none!important}
  .page>header [style*="border-radius: 999px"]{display:none!important}
  .page>header>div:first-child>div[style*="width: 1px"]{display:none!important}
  /* 子页的返回链接只留箭头图标，给品牌标题腾空间 */
  .page>header a:has(> svg){font-size:0!important;gap:0!important}
  /* 子页在窄屏隐藏订阅按钮（页内底部有 CTA），标题得以完整显示 */
  .page>header a[href*="html#pricing"],.page>header a[href^="/#pricing"]{display:none!important}
  .page>header>div:first-child{gap:12px!important}
  .page>header>div:first-child>div{gap:10px!important}
  .page>header>div:first-child svg{width:26px!important;height:26px!important}
  .page>header a[href*="#pricing"]{padding:9px 14px!important;min-height:36px!important;
    font-size:13px!important}
  /* 英文站标题更长：窄屏降字号并允许折成两行，完整显示 */
  html[lang="en"] .page>header [style*="letter-spacing: 0.03em"],
  html[lang="en"] .page>header [style*="font-size: 20px"]{
    font-size:12.5px!important;white-space:normal!important;line-height:1.3!important}

  /* 定价区手机端压缩：让高级版卡片的顶部露出首屏 */
  #pricing{gap:30px!important;padding-top:36px!important}
  #pricing [style*="letter-spacing: 0.22em"]{display:none!important}
  #pricing p[style*="font-size: 17px"]{display:-webkit-box!important;
    -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #pricing [style*="padding: 28px"]{padding:20px!important}
  #pricing [style*="gap: 15px"]{gap:10px!important}
}
@media (max-width:560px){
  h1{font-size:29px!important}
  h2{font-size:24px!important}
  .page>section{gap:28px!important}
}
@media print{.page>header{position:static}}
