:root{
  /* Backward-compatible aliases. Canonical values live in brand-system.css. */
  --ax-brand:var(--ax-brand-primary,#1769e0);
  --ax-brand-hover:var(--ax-brand-primary-hover,#0f57c5);
  --ax-cyan:var(--ax-brand-cyan,#16b8cb);
  --ax-ink:var(--ax-navy-800,#10233f);
  --ax-copy:var(--ax-text,#42556f);
  --ax-line:var(--ax-border,#dce5f0);
  --ax-line-strong:var(--ax-border-strong,#cad7e6);
  --ax-surface:var(--ax-background,#fff);
  --ax-surface-soft:var(--ax-background-soft,#f6f9fd);
  --ax-radius-sm:var(--ax-radius-control,8px);
  --ax-radius-md:var(--ax-radius-card,12px);
  --ax-shadow-sm:var(--ax-shadow-low,0 4px 14px rgba(16,35,63,.055));
  --ax-shadow-md:var(--ax-shadow-card,0 12px 32px rgba(16,35,63,.075));
  --ax-container:1180px;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ax-surface);
  color:var(--ax-ink);
  font-family:var(--ax-font-sans,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif);
  font-size:16px;
  line-height:1.65;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body,button,input,select,textarea{font-family:inherit}
main{isolation:isolate}
main img,main video,main canvas,main svg{max-width:100%}
main h1,main h2,main h3,main h4{
  color:inherit;
  text-wrap:balance;
  letter-spacing:-.025em;
}
main h1{font-weight:700;line-height:1.12}
main h2{font-weight:650;line-height:1.2}
main h3,main h4{font-weight:600;line-height:1.35}
main p{color:inherit;text-wrap:pretty}
main section{scroll-margin-top:88px}
main :where(input,select,textarea){
  min-height:44px;
  border-radius:var(--ax-radius-sm)!important;
  border-color:var(--ax-line-strong)!important;
  box-sizing:border-box;
  box-shadow:none;
}
main :where(input,select,textarea):focus{
  outline:3px solid rgba(23,105,224,.14);
  outline-offset:1px;
  border-color:var(--ax-brand)!important;
}
main :where(button,[role="button"],a[class*="button"],a[class*="btn"]){
  border-radius:var(--ax-radius-sm)!important;
}
main :where(button,[role="button"],a[href]){
  -webkit-tap-highlight-color:transparent;
}
main :where(button,[role="button"],a[class*="button"],a[class*="btn"]):focus-visible{
  outline:3px solid rgba(23,105,224,.22);
  outline-offset:3px;
}
main :where(.rounded-3xl,.rounded-\[24px\],.rounded-\[28px\],.rounded-\[32px\]){
  border-radius:var(--ax-radius-md)!important;
}
main :where(.shadow-lg,.shadow-xl,.shadow-2xl){
  box-shadow:var(--ax-shadow-md)!important;
}
main :where(.border-gray-100,.border-gray-200){
  border-color:var(--ax-line)!important;
}
main :where(.bg-gray-50,.bg-slate-50){
  background-color:var(--ax-surface-soft)!important;
}
@media (hover:hover){
  main :where(a,button,[role="button"]){transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
  main :where(button,a[class*="button"],a[class*="btn"]):hover{transform:translateY(-1px)}
}
/*
 * Imported static pages can retain framework shell rules such as
 * `body{display:grid}` and `main{height:100dvh;overflow:hidden}`. Those rules
 * clip the document to one viewport and create a false repeated-page effect in
 * full-page captures. Keep this repair scoped to the About page's static shell
 * instead of weakening overflow behavior globally.
 */
body.ax-about.ax-about-static-ready{
  display:block!important;
  min-height:100%!important;
  height:auto!important;
}
body.ax-about.ax-about-static-ready > main{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
}
body.ax-about.ax-about-static-ready #ax-static-about-page{
  width:100%!important;
  min-width:0!important;
}
/*
 * The imported Cases shell declares `body` as a horizontal flex container and
 * adds page padding. That causes the shared header, page main and shared footer
 * to become side-by-side flex items on narrow screens. Restore document flow
 * at the page shell instead of masking the resulting overflow.
 */
body.ax-cases.ax-user-static-ready{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  min-height:100%!important;
  height:auto!important;
  padding:0!important;
}
body.ax-cases.ax-user-static-ready > main,
body.ax-cases.ax-user-static-ready > footer{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  box-sizing:border-box!important;
}
body.ax-cases.ax-user-static-ready > main{
  display:block!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
}
html.ax-jobparser-page,
body.ax-jobparser,
body.ax-jobparser .yoo-main{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
html.aixunren-nav-ready.aixunren-nav-mode-gradient body.ax-jobparser > main.yoojober-detail-page:first-of-type{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin-top:0!important;
}
body.ax-jobparser .page-1 .function-list :where(.top span,.bottom){
  color:#64748b!important;
  opacity:1!important;
}
body.ax-jobparser .page-banner:before{
  border-radius:14px!important;
  background:rgba(255,255,255,.025)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body.ax-jobparser .page-banner .content .text button{
  color:#fff!important;
  background:#2563eb!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:9px!important;
  box-shadow:0 10px 28px rgba(37,99,235,.28)!important;
  font-weight:500!important;
}
body.ax-jobparser .page-1 .function-list{
  border:1px solid #e4eaf3!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 14px 40px rgba(15,23,42,.07)!important;
}
body.ax-jobparser .page-1 .function-list a{
  background:#fff!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  box-shadow:none!important;
}
body.ax-jobparser .page-1 .function-list a:hover{
  background:#f8faff!important;
  border-color:#dbe7ff!important;
}
body.ax-jobparser .page-1 .function-list a .text .top label{
  color:#17213f!important;
  font-weight:600!important;
}
body.ax-jobparser .page-1 .function-list a .text .top span{
  color:#5f6f8f!important;
  background:#f1f5fb!important;
}
body.ax-jobparser .page-1 .function-list a .text .bottom{
  color:#64748b!important;
}
@media(max-width:768px){
  body.ax-jobparser .page-banner{
    height:auto!important;
    min-height:650px!important;
    margin-top:0!important;
    padding:108px 20px 56px!important;
    overflow:hidden!important;
    background:#0b2f68!important;
  }
  body.ax-jobparser .page-banner .content{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
  }
  body.ax-jobparser .page-banner .content .carousel{
    width:100%!important;
    height:auto!important;
    min-height:480px!important;
    margin:0!important;
  }
  body.ax-jobparser .page-banner .content .carousel ul.list{
    margin:0!important;
    padding:0!important;
  }
  body.ax-jobparser .page-banner .content .carousel ul.list li.active{
    display:flex!important;
    min-height:450px!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
  }
  body.ax-jobparser .page-banner .content .text{
    float:none!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    text-align:left!important;
  }
  body.ax-jobparser .page-banner .content .text h2{
    margin:0 0 16px!important;
    font-size:clamp(2rem,11vw,2.75rem)!important;
    line-height:1.08!important;
    letter-spacing:-.035em!important;
  }
  body.ax-jobparser .page-banner .content .text h5{
    margin:0 0 14px!important;
    font-size:1.25rem!important;
    line-height:1.55!important;
  }
  body.ax-jobparser .page-banner .content .text h9{
    display:block!important;
    margin-bottom:8px!important;
    font-size:1rem!important;
    line-height:1.6!important;
  }
  body.ax-jobparser .page-banner .content .text p{
    width:auto!important;
    margin:0!important;
    font-size:1rem!important;
    line-height:1.75!important;
    opacity:.84!important;
  }
  body.ax-jobparser .page-banner .content .text button{
    width:auto!important;
    min-width:148px!important;
    height:48px!important;
    margin:26px 0 12px!important;
    padding:0 24px!important;
    font-size:1rem!important;
    line-height:48px!important;
  }
  body.ax-jobparser .yoojober-step-line{
    font-size:1rem!important;
    line-height:1.6!important;
    color:rgba(255,255,255,.72)!important;
  }
  body.ax-jobparser .page-banner .content .image{
    display:none!important;
  }
  body.ax-jobparser .page-banner .content .carousel ul.btn{
    bottom:0!important;
  }
  body.ax-jobparser .page-1{
    padding:32px 0 64px!important;
  }
  body.ax-jobparser .page-1 .function-list{
    width:calc(100% - 40px)!important;
    height:auto!important;
    margin:0 20px 64px!important;
    padding:8px!important;
    border-radius:12px!important;
    display:grid!important;
    gap:8px!important;
    opacity:1!important;
    transform:none!important;
  }
  body.ax-jobparser .page-1 .function-list .ai-hr{
    display:none!important;
  }
  body.ax-jobparser .page-1 .function-list a{
    width:100%!important;
    min-height:92px!important;
    padding:16px 14px!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
  }
  body.ax-jobparser .page-1 .function-list a .image{
    position:relative!important;
    inset:auto!important;
    flex:0 0 68px!important;
    margin:0!important;
  }
  body.ax-jobparser .page-1 .function-list a .text{
    position:relative!important;
    inset:auto!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    flex:1!important;
  }
  body.ax-jobparser .page-1 .function-list a .text .top label{
    font-size:1.25rem!important;
  }
  body.ax-jobparser .page-1 .function-list a .text .top span,
  body.ax-jobparser .page-1 .function-list a .text .bottom{
    font-size:1rem!important;
  }
  body.ax-jobparser .page-1 .ai-desc{
    width:calc(100% - 40px)!important;
    height:auto!important;
    min-height:260px!important;
    margin:0 20px 36px!important;
    padding:78px 0 30px!important;
    box-sizing:border-box!important;
    background-size:contain!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
  }
  body.ax-jobparser .page-1 .ai-desc>div{
    display:none!important;
  }
  body.ax-jobparser .page-1 .ai-desc h2,
  body.ax-jobparser .page-1 .ai-desc h3{
    opacity:1!important;
    transform:none!important;
    text-align:center!important;
  }
  body.ax-jobparser .page-1 .ai-desc h2{
    margin:0 0 12px!important;
    font-size:1.75rem!important;
    line-height:1.25!important;
  }
  body.ax-jobparser .page-1 .ai-desc h3{
    font-size:1rem!important;
    line-height:1.6!important;
  }
  body.ax-jobparser .page-1 .ai-desc-list{
    display:flex!important;
    width:auto!important;
    margin:0 20px!important;
    flex-direction:column!important;
    gap:28px!important;
  }
  body.ax-jobparser .page-1 .ai-desc-list .empty{
    display:none!important;
  }
  body.ax-jobparser .page-1 .ai-desc-list :where(.text,.match-graph,.job-graph,.parse-graph){
    float:none!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    opacity:1!important;
    transform:none!important;
    box-sizing:border-box!important;
  }
  body.ax-jobparser .page-1 .ai-desc-list .text{
    order:2;
  }
  body.ax-jobparser .page-1 .ai-desc-list .text h3{
    margin:0 0 10px!important;
    font-size:1.5rem!important;
    line-height:1.35!important;
  }
  body.ax-jobparser .page-1 .ai-desc-list .text h4{
    margin:0!important;
    font-size:1rem!important;
    line-height:1.75!important;
    font-weight:400!important;
  }
  body.ax-jobparser .page-1 .ai-desc-list .match-graph{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    gap:12px!important;
  }
  body.ax-jobparser .page-1 .ai-desc-list .job-graph{
    min-height:300px!important;
  }
  body.ax-jobparser .page-1 .ai-desc-list .job-graph :where(.scan,.salary,.company){
    position:absolute!important;
    margin:0!important;
    max-width:none!important;
  }
  body.ax-jobparser .page-1 .ai-desc-list .job-graph .scan{
    left:50%!important;
    top:0!important;
    width:266px!important;
    height:266px!important;
    transform:translateX(-50%)!important;
  }
  body.ax-jobparser .page-1 .ai-desc-list .job-graph .salary,
  body.ax-jobparser .page-1 .ai-desc-list .job-graph .company{
    left:50%!important;
    top:238px!important;
    width:300px!important;
    height:48px!important;
    transform:translateX(-50%)!important;
    background-size:contain!important;
    background-repeat:no-repeat!important;
  }
  body.ax-jobparser .page-1 .ai-desc-list .parse-graph .item{
    width:100%!important;
    min-height:44px!important;
    height:auto!important;
    display:flex!important;
    align-items:center!important;
    transform:none!important;
    border-radius:8px!important;
  }
  body.ax-jobparser .page-1 .ai-desc-list .parse-graph .item-left{
    flex:0 0 118px!important;
    border-radius:7px!important;
  }
  body.ax-jobparser .page-1 .ai-desc-list .parse-graph .item-right{
    min-width:0!important;
    padding:6px 8px!important;
    margin:0!important;
    line-height:1.55!important;
  }
  body.ax-jobparser .page-2{
    height:310px!important;
  }
  body.ax-jobparser .page-2 .content{
    transform:scale(.82)!important;
    transform-origin:top center!important;
  }
  body.ax-jobparser .page-2 .content .text{
    opacity:1!important;
    top:88px!important;
  }
  body.ax-jobparser .page-2 .content .text h3{
    margin-bottom:12px!important;
    font-size:2rem!important;
    line-height:1.25!important;
  }
  body.ax-jobparser .page-2 .content .text-2{
    opacity:1!important;
    top:205px!important;
  }
  body{font-size:16px}
  main{width:100%;max-width:100%}
  main section{max-width:100%;box-sizing:border-box}
  main :where(.max-w-7xl,.max-w-6xl,.max-w-5xl,.max-w-4xl){
    width:100%!important;
    max-width:100%!important;
    padding-left:20px!important;
    padding-right:20px!important;
    box-sizing:border-box!important;
  }
  main :where(.px-12,.px-10,.px-8,.px-6){padding-left:20px!important;padding-right:20px!important}
  main :where(.py-32,.py-28,.py-24){padding-top:72px!important;padding-bottom:72px!important}
  main :where(.text-6xl,.text-5xl){font-size:clamp(2.25rem,10vw,3.25rem)!important}
  main :where(.text-4xl){font-size:2rem!important}
  main :where(.text-3xl){font-size:1.75rem!important}
  main :where(.grid){min-width:0}
  main :where(.grid)>*{min-width:0}
  main :where(.flex){min-width:0}
  main :where(input,select,textarea,button){font-size:16px}
  main :where(button,[role="button"],a[class*="button"],a[class*="btn"]){min-height:44px}
  main table{display:block;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
  main pre,main code{max-width:100%;overflow-wrap:anywhere}
  main.yoojober-detail-page{
    width:100%!important;
    min-width:0!important;
  }
  main.yoojober-detail-page :where(.yoo-main,.page-banner,.page-1,.page-2){
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  main.yoojober-detail-page :where(.ai-desc-list,.empty){
    width:auto!important;
    max-width:100%!important;
    margin-left:20px!important;
    margin-right:20px!important;
  }
  main.yoojober-detail-page :where(.text,.salary,.company,.scan){
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:auto!important;
    max-width:calc(100% - 40px)!important;
    margin-left:20px!important;
    margin-right:20px!important;
    box-sizing:border-box!important;
  }
}

/*
 * 20260712 expert-training layout reconstruction.
 * The source page uses a 12vw root font-size together with fixed rem widths.
 * That artboard geometry made full-width sections look indented, stacked the
 * instructor carousel into a narrow strip, and detached the partner artwork.
 * Keep the original content/assets, but give this page normal web geometry.
 */
html.aixunren-page-detail body.ax-experttraining,
body.ax-experttraining main,
body.ax-experttraining .consult,
body.ax-experttraining .custom{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  overflow-x:clip!important;
}
body.ax-experttraining main{
  background:#f4f8fd!important;
}
body.ax-experttraining .consult{
  background:#f4f8fd!important;
}
body.ax-experttraining .consult > section,
body.ax-experttraining .consult > .section-5{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  background-position:center!important;
  background-size:cover!important;
}
body.ax-experttraining .consult > .section-5{
  background-color:#edf5fc!important;
  background-image:
    linear-gradient(180deg,rgba(232,244,252,.82),rgba(246,249,253,.96)),
    url("https://static.53ai.com/assets/static/images/consult_bg_1.jpg")!important;
}
body.ax-experttraining .consult > .section-2{
  background:#fff!important;
}
body.ax-experttraining .consult > .section-3{
  background:#f4f8fd!important;
}
body.ax-experttraining .consult > .section-4{
  background-color:#edf4fc!important;
  background-image:
    radial-gradient(circle at 82% 12%,rgba(83,163,255,.14),transparent 28%),
    linear-gradient(180deg,#f4f8fd 0%,#edf4fc 100%)!important;
}
body.ax-experttraining .wp1280{
  box-sizing:border-box!important;
  width:min(1180px,calc(100% - 48px))!important;
  max-width:none!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}

/* Replace the uninitialised source carousel with a complete instructor grid. */
body.ax-experttraining .consult > .section-4{
  padding:clamp(72px,7vw,104px) 0 clamp(76px,7vw,112px)!important;
}
body.ax-experttraining .consult > .section-4 .wrapper{
  width:100%!important;
  margin-top:40px!important;
}
body.ax-experttraining .consult > .section-4 .swiper{
  width:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
body.ax-experttraining .consult > .section-4 .swiper-wrapper{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:22px!important;
  width:100%!important;
  height:auto!important;
  transform:none!important;
}
body.ax-experttraining .consult > .section-4 .swiper-slide{
  box-sizing:border-box!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
}
body.ax-experttraining .consult > .section-4 .swiper .item{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:150px minmax(0,1fr)!important;
  gap:22px!important;
  height:100%!important;
  padding:20px!important;
  border:1px solid rgba(35,95,226,.18)!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#edf4ff 0%,#fff 54%,#f8fbff 100%)!important;
  box-shadow:0 16px 40px rgba(23,67,118,.09)!important;
}
body.ax-experttraining .consult > .section-4 .swiper .item .img{
  width:150px!important;
}
body.ax-experttraining .consult > .section-4 .swiper .item .img .img-box{
  height:100%!important;
  min-height:250px!important;
  padding-bottom:0!important;
  border-radius:13px!important;
  background:#e7eef8!important;
}
body.ax-experttraining .consult > .section-4 .swiper .item .info-box{
  min-width:0!important;
  padding:6px 0 0!important;
}
body.ax-experttraining .consult > .section-4 .swiper .item .info-box .title{
  margin:0 0 14px!important;
  font-size:20px!important;
  line-height:1.35!important;
}
body.ax-experttraining .consult > .section-4 .swiper .item .info-box .desc-box{
  border:1px solid rgba(35,95,226,.18)!important;
  border-radius:10px!important;
}
body.ax-experttraining .consult > .section-4 .swiper .item .info-box .desc-box .icon{
  width:44px!important;
}
body.ax-experttraining .consult > .section-4 .swiper .item .info-box .desc-box .icon img{
  width:22px!important;
}
body.ax-experttraining .consult > .section-4 .swiper .item .info-box .desc-box .desc{
  padding:9px 12px!important;
  font-size:12px!important;
  line-height:1.7!important;
}
body.ax-experttraining .consult > .section-4 .swiper .item .info-box .info{
  margin-top:14px!important;
  font-size:12px!important;
  line-height:1.75!important;
}
body.ax-experttraining .consult > .section-4 :where(.nav-btn,.pagination){
  display:none!important;
}

/* Keep the partner artwork and CTA in one intentional, full-width ending. */
body.ax-experttraining .custom > .section-4{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr)!important;
  align-items:center!important;
  min-height:560px!important;
  width:100%!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 84% 28%,rgba(70,155,255,.20),transparent 32%),
    linear-gradient(135deg,#06152b 0%,#0b3260 54%,#14568b 100%)!important;
}
body.ax-experttraining .custom .section-bg,
body.ax-experttraining .custom .center{
  position:relative!important;
  inset:auto!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
}
body.ax-experttraining .custom .section-bg{
  order:2!important;
  align-self:end!important;
}
body.ax-experttraining .custom .section-bg img.pc{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:500px!important;
  object-fit:contain!important;
  object-position:left bottom!important;
  mix-blend-mode:screen!important;
}
body.ax-experttraining .custom .section-bg img.m{
  display:none!important;
}
body.ax-experttraining .custom .center{
  order:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  padding:72px 24px 72px max(24px,calc((100vw - 1180px)/2))!important;
}
body.ax-experttraining .custom .center-wrapper{
  display:block!important;
  width:min(520px,100%)!important;
  max-width:none!important;
  margin:0!important;
  transform:none!important;
}
body.ax-experttraining .custom .center-wrapper > .img-box{
  display:none!important;
}
body.ax-experttraining .custom .center-wrapper .info{
  position:static!important;
  width:auto!important;
  text-align:left!important;
  color:#fff!important;
}
body.ax-experttraining .custom .center-wrapper .info .title{
  color:#fff!important;
  font-size:clamp(32px,4vw,52px)!important;
  line-height:1.15!important;
}
body.ax-experttraining .custom .center-wrapper .info .p{
  max-width:480px!important;
  margin-top:18px!important;
  color:rgba(235,245,255,.82)!important;
  font-size:20px!important;
  line-height:1.75!important;
}
body.ax-experttraining .custom .center-wrapper .info .button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:132px!important;
  height:46px!important;
  margin-top:30px!important;
  padding:0 24px!important;
  border-radius:10px!important;
  background:#2f80ed!important;
  color:#fff!important;
  font-size:16px!important;
  box-shadow:0 12px 30px rgba(47,128,237,.28)!important;
}

@media(max-width:900px){
  body.ax-experttraining .wp1280{
    width:calc(100% - 32px)!important;
  }
  body.ax-experttraining .consult > .section-4 .swiper-wrapper{
    grid-template-columns:1fr!important;
  }
  body.ax-experttraining .custom > .section-4{
    grid-template-columns:1fr!important;
    min-height:0!important;
  }
  body.ax-experttraining .custom .center{
    justify-content:flex-start!important;
    padding:68px 24px 20px!important;
  }
  body.ax-experttraining .custom .section-bg{
    width:min(680px,100%)!important;
    margin-left:auto!important;
  }
}

@media(max-width:600px){
  body.ax-experttraining .consult > .section-4{
    padding:64px 0 72px!important;
  }
  body.ax-experttraining .consult > .section-4 .wrapper{
    margin-top:30px!important;
  }
  body.ax-experttraining .consult > .section-4 .swiper .item{
    grid-template-columns:104px minmax(0,1fr)!important;
    gap:14px!important;
    padding:14px!important;
    border-radius:14px!important;
  }
  body.ax-experttraining .consult > .section-4 .swiper .item .img{
    width:104px!important;
  }
  body.ax-experttraining .consult > .section-4 .swiper .item .img .img-box{
    min-height:174px!important;
  }
  body.ax-experttraining .consult > .section-4 .swiper .item .info-box .title{
    font-size:16px!important;
  }
  body.ax-experttraining .consult > .section-4 .swiper .item .info-box .desc-box .icon{
    display:none!important;
  }
  body.ax-experttraining .consult > .section-4 .swiper .item .info-box .desc-box .desc{
    font-size:12px!important;
  }
  body.ax-experttraining .consult > .section-4 .swiper .item .info-box .info{
    grid-column:1/-1!important;
    font-size:12px!important;
  }
  body.ax-experttraining .custom{
    display:block!important;
  }
  body.ax-experttraining .custom .center{
    padding:60px 20px 12px!important;
  }
  body.ax-experttraining .custom .center-wrapper .info .p{
    font-size:16px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* 20260711 exact first-screen surface governance.
 * Keep this list page-scoped: generic `.hero` / `.section-1` selectors caused
 * unrelated source sections to inherit the brand hero background.
 */
:where(
  body.ax-api .api-hero,
  body.ax-help .help-hero,
  body.ax-updates .change-hero,
  body.ax-interviewquestions .iq-hero,
  body.ax-privacy .ax-policy-hero,
  body.ax-jobparser .page-banner,
  body.ax-jobapply .hero,
  body.ax-recruitingbot .hero,
  body.ax-about .ax-about-hero,
  body.ax-cases .ax-user-hero,
  body.ax-cocreate .art-banner-box.custom-banner,
  body.ax-experttraining .consult > .section-1,
  body.ax-jobmatch .td-aixunren-light-hero,
  body.ax-applybot .ax-get-paid-page > .bg-white > section:first-child,
  body.ax-quickapply .banner-top,
  body.ax-reports .banner,
  body.ax-resumeparser .page-banner,
  body.ax-talentgraph .section_first,
  body.ax-talentsearch .ax-global-talent-page > .min-h-screen > section:first-child,
  body.ax-wechatagent .boardmix-landing.page-1
){
  background-color:var(--ax-hero-navy,#071a36)!important;
  background-image:var(--ax-hero-background,linear-gradient(118deg,#061226 0%,#071a36 54%,#103b72 100%))!important;
}

/* Background-check keeps its original report-card overlap: navy ends at 82%. */
body.ax-backgroundcheck main > div:first-child > section:first-child{
  background-color:#fff!important;
  background-image:linear-gradient(
    to bottom,
    var(--ax-hero-navy-deep,#061226) 0%,
    var(--ax-hero-navy,#071a36) 82%,
    #fff 82%,
    #fff 100%
  )!important;
}

/* Pricing is intentionally dark, but now uses the same navy family as the site. */
body.ax-pricing .ax-pricing-page > .pricing-dark{
  --pricing-bg:var(--ax-hero-background,linear-gradient(118deg,#061226 0%,#071a36 54%,#103b72 100%));
  background-color:var(--ax-hero-navy,#071a36)!important;
  background-image:var(--pricing-bg)!important;
}

/* First-screen copy contrast. White cards inside a hero retain dark text. */
:where(
  body.ax-applybot .ax-get-paid-page > .bg-white > section:first-child,
  body.ax-backgroundcheck main > div:first-child > section:first-child,
  body.ax-quickapply .banner-top,
  body.ax-reports .banner,
  body.ax-resumeparser .page-banner,
  body.ax-talentgraph .section_first,
  body.ax-talentsearch .ax-global-talent-page > .min-h-screen > section:first-child,
  body.ax-wechatagent .boardmix-landing.page-1
) :where(h1,h2,h3){
  color:#f7fbff!important;
}
:where(
  body.ax-applybot .ax-get-paid-page > .bg-white > section:first-child,
  body.ax-backgroundcheck main > div:first-child > section:first-child,
  body.ax-quickapply .banner-top,
  body.ax-reports .banner,
  body.ax-resumeparser .page-banner,
  body.ax-talentgraph .section_first,
  body.ax-talentsearch .ax-global-talent-page > .min-h-screen > section:first-child,
  body.ax-wechatagent .boardmix-landing.page-1
) :where(p,.subtitle,.desc,.description){
  color:rgba(231,240,255,.78)!important;
}
:where(
  body.ax-applybot .ax-get-paid-page > .bg-white > section:first-child,
  body.ax-backgroundcheck main > div:first-child > section:first-child,
  body.ax-quickapply .banner-top,
  body.ax-reports .banner,
  body.ax-resumeparser .page-banner,
  body.ax-talentgraph .section_first,
  body.ax-talentsearch .ax-global-talent-page > .min-h-screen > section:first-child,
  body.ax-wechatagent .boardmix-landing.page-1
) :where(.bg-white,[class*="bg-white/"],.card){
  color:var(--ax-text,#10213b);
}
:where(
  body.ax-applybot .ax-get-paid-page > .bg-white > section:first-child,
  body.ax-backgroundcheck main > div:first-child > section:first-child,
  body.ax-quickapply .banner-top,
  body.ax-reports .banner,
  body.ax-resumeparser .page-banner,
  body.ax-talentgraph .section_first,
  body.ax-talentsearch .ax-global-talent-page > .min-h-screen > section:first-child,
  body.ax-wechatagent .boardmix-landing.page-1
) :where(.bg-white,[class*="bg-white/"],.card) :where(h1,h2,h3,h4,p,span,label){
  color:inherit!important;
  text-shadow:none!important;
}

/* Non-video detail pages use only white and the site's cool soft surface. */
:where(
  body.ax-applybot,
  body.ax-backgroundcheck,
  body.ax-quickapply,
  body.ax-reports,
  body.ax-resumeparser,
  body.ax-talentgraph,
  body.ax-talentsearch,
  body.ax-wechatagent
) main{
  background:#fff!important;
}
body.ax-talentsearch .ax-global-talent-page > .min-h-screen > section:nth-child(2n+4),
body.ax-applybot .ax-get-paid-page > .bg-white > section:nth-child(2n+4){
  background-color:var(--ax-background-soft,#f6f9fd)!important;
  background-image:none!important;
}

body.ax-experttraining .consult{
  padding-top:0!important;
}
body.ax-experttraining .consult > .section-1{
  box-sizing:border-box;
  min-height:clamp(620px,80vh,860px);
  padding-top:clamp(128px,10vw,168px)!important;
}
body.ax-experttraining .consult > .section-1 .common-title .b{
  color:#f7fbff!important;
}
body.ax-experttraining .consult > .section-1 .common-title .s{
  color:rgba(231,240,255,.78)!important;
}
body.ax-experttraining .consult > section:nth-child(even){
  background:var(--ax-background-soft,#f6f9fd)!important;
}

body.ax-jobmatch .td-aixunren-light-hero{
  color:#f7fbff!important;
}
body.ax-jobmatch .td-aixunren-light-hero > .absolute.inset-0.z-0{
  opacity:.24!important;
  filter:saturate(.72) brightness(.72)!important;
  mix-blend-mode:screen!important;
}
body.ax-jobmatch .td-aixunren-light-hero > .absolute.inset-0.z-0 .mix-blend-multiply{
  background:linear-gradient(180deg,rgba(6,18,38,.10),rgba(6,18,38,.68))!important;
  mix-blend-mode:normal!important;
}
body.ax-jobmatch .td-aixunren-light-hero > .absolute.inset-0.bg-gradient-to-b{
  background:linear-gradient(180deg,rgba(6,18,38,.04),rgba(6,18,38,.54))!important;
}
body.ax-jobmatch .td-aixunren-light-hero h1{
  color:#f7fbff!important;
  text-shadow:0 12px 34px rgba(2,6,23,.28)!important;
}
body.ax-jobmatch .td-aixunren-light-hero h1 .text-brand{
  color:#59d9ff!important;
}
body.ax-jobmatch .td-aixunren-light-hero > .container p{
  color:rgba(231,240,255,.78)!important;
}
body.ax-jobmatch .td-aixunren-light-hero [class*="bg-white"]{
  background:#fff!important;
  border-color:rgba(213,225,241,.96)!important;
  box-shadow:0 8px 24px rgba(2,12,30,.16)!important;
}
body.ax-jobmatch .td-aixunren-light-hero [class*="bg-white"] :where(h2,h3,h4,p,span,label){
  text-shadow:none!important;
}

@media(max-width:767px){
  body.ax-experttraining .consult > .section-1{
    min-height:auto;
    padding-top:108px!important;
  }
}

/*
 * 20260712 requested first-screen colour lock.
 * The listed public pages must use the exact same vertical colour journey as
 * the home page: near-black navy -> clear blue -> sky blue -> white.
 * Keep selectors page-scoped so later source-page hydration cannot restore a
 * private purple, pale-blue or white hero.
 */
:root{
  --ax-home-hero-background:linear-gradient(
    180deg,
    #010518 5%,
    #1b6bb2 54.58%,
    #4ca8e3 70%,
    #fff 100%
  );
}

:where(
  body.ax-talentsearch .ax-global-talent-page > .min-h-screen > section:first-child,
  body.ax-videointerview main > .min-h-screen > section:first-child,
  body.ax-experttraining .consult > .section-1,
  body.ax-jobapply .hero,
  body.ax-interviewquestions .iq-hero,
  body.ax-recruitingbot .ax-ai-robot-shell,
  body.ax-wechatagent .boardmix-landing.page-1,
  body.ax-resumeparser .page-banner,
  body.ax-jobparser .page-banner,
  body.ax-jobmatch .td-aixunren-light-hero,
  body.ax-applybot .ax-get-paid-page > .bg-white > section:first-child,
  body.ax-help .help-hero,
  body.ax-updates .change-hero,
  body.ax-privacy .ax-policy-hero,
  body.ax-pricing .ax-pricing-page > .pricing-dark,
  body.ax-about .ax-about-intro,
  body.ax-cases .ax-user-hero,
  body.ax-reports .header-wrapper
){
  background-color:#1b6bb2!important;
  background-image:var(--ax-home-hero-background)!important;
}

/* Policy/about source pages originally reserve a solid navigation spacer.
   Pull the requested first-screen colour beneath the transparent site header
   so there is no pale strip above the hero. */
body.ax-privacy .ax-policy-hero{
  box-sizing:border-box;
  margin-top:-89px!important;
  min-height:389px;
  padding-top:89px!important;
}
body.ax-about .ax-about-intro{
  box-sizing:border-box;
  margin-top:-88px!important;
  min-height:774px;
  padding-top:88px!important;
}

/* Preserve the background-check report-card overlap while matching the home
   page above the overlap. */
body.ax-backgroundcheck main > div:first-child > section:first-child{
  background-color:#fff!important;
  background-image:linear-gradient(
    180deg,
    #010518 5%,
    #1b6bb2 45%,
    #4ca8e3 70%,
    #fff 82%,
    #fff 100%
  )!important;
}

/* These copied pages do not expose a conventional hero section. Their first
   visible shell is therefore the colour-bearing surface. */
body.ax-talentgraph .yoo-knowledge-shell{
  background-color:#fff!important;
  background-image:none!important;
}
body.ax-talentgraph .knowledge-bg{
  top:0!important;
  height:720px!important;
  background-color:#1b6bb2!important;
  background-image:var(--ax-home-hero-background)!important;
}
body.ax-quickapply .waiqi-position-shell{
  background-color:#fff!important;
  background-image:var(--ax-home-hero-background)!important;
}

/* Light-source heroes need an explicit contrast correction after adopting the
   dark home-page first screen. White business cards keep their own dark ink. */
:where(
  body.ax-jobapply .hero,
  body.ax-interviewquestions .iq-hero,
  body.ax-jobmatch .td-aixunren-light-hero,
  body.ax-quickapply .waiqi-position-page,
  body.ax-help .help-hero,
  body.ax-updates .change-hero,
  body.ax-privacy .ax-policy-hero,
  body.ax-about .ax-about-intro,
  body.ax-cases .ax-user-hero,
  body.ax-reports .header-wrapper
) :where(h1,h2,h3){
  color:#f7fbff!important;
}
:where(
  body.ax-jobapply .hero,
  body.ax-interviewquestions .iq-hero,
  body.ax-jobmatch .td-aixunren-light-hero,
  body.ax-quickapply .waiqi-position-page,
  body.ax-help .help-hero,
  body.ax-updates .change-hero,
  body.ax-privacy .ax-policy-hero,
  body.ax-about .ax-about-intro,
  body.ax-cases .ax-user-hero,
  body.ax-reports .header-wrapper
) :where(p,.subtitle,.desc,.description){
  color:rgba(239,247,255,.84)!important;
}
:where(
  body.ax-jobapply .hero,
  body.ax-interviewquestions .iq-hero,
  body.ax-jobmatch .td-aixunren-light-hero,
  body.ax-quickapply .waiqi-position-page
) :where(.bg-white,[class*="bg-white/"],.card,.metric-card,.iq-demo,.iq-q){
  color:var(--ax-ink,#10233f)!important;
}
:where(
  body.ax-jobapply .hero,
  body.ax-interviewquestions .iq-hero,
  body.ax-jobmatch .td-aixunren-light-hero,
  body.ax-quickapply .waiqi-position-page
) :where(.bg-white,[class*="bg-white/"],.card,.metric-card,.iq-demo,.iq-q)
  :where(h1,h2,h3,h4,p,span,label,strong){
  color:inherit!important;
  text-shadow:none!important;
}

/* Hydrated mirror pages append their source styles after the shared sheet.
   These higher-specificity locks intentionally sit last and are the final
   authority for every requested first-screen surface. */
body.ax-videointerview main > .min-h-screen > section:first-child,
body.ax-jobapply section.hero,
body.ax-interviewquestions section.iq-hero,
body.ax-wechatagent section.boardmix-landing.page-1,
body.ax-resumeparser div.page-banner,
body.ax-jobparser div.page-banner,
body.ax-jobmatch section.td-aixunren-light-hero,
body.ax-pricing main.ax-pricing-page > div.pricing-dark,
body.ax-reports .ax-reports-shell .header-wrapper,
body.ax-about section.ax-about-hero{
  background-color:#1b6bb2!important;
  background-image:var(--ax-home-hero-background)!important;
}

body.ax-recruitingbot .ax-ai-robot-shell{
  background-color:#fff!important;
  background-image:var(--ax-home-hero-background)!important;
  background-repeat:no-repeat!important;
  background-size:100% 720px!important;
}
body.ax-recruitingbot .ax-robot-floating-bg,
body.ax-recruitingbot section.hero{
  background-color:#1b6bb2!important;
  background-image:var(--ax-home-hero-background)!important;
}

body.ax-reports .ax-reports-shell .blog-main,
body.ax-reports .ax-reports-shell .blog-layouts-wrapper,
body.ax-reports .ax-reports-shell .blog-layouts-main{
  padding-top:0!important;
}
body.ax-reports .ax-reports-shell .header-wrapper{
  box-sizing:border-box;
  min-height:535px;
  margin-top:0!important;
  padding-top:82px!important;
}

body.ax-about section.ax-about-hero :where(h1,h2,h3,p,.subtitle,.desc,.description),
body.ax-reports .header-wrapper :where(h1,h2,h3,p,.subtitle,.desc,.description){
  color:#f7fbff!important;
}

/*
 * About page — keep the company introduction as a light content surface.
 * The short cool-blue wash connects the branded hero to white without
 * extending the hero gradient through the full section.
 */
body.ax-about .ax-about-intro{
  position:relative;
  box-sizing:border-box;
  margin-top:0!important;
  min-height:0!important;
  padding:clamp(72px,6vw,88px) 0 92px!important;
  background:#fff!important;
  background-image:none!important;
  color:#10233f!important;
}

body.ax-about .ax-about-intro::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:64px;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    #dceef9 0%,
    #eef7fc 44%,
    rgba(255,255,255,.97) 82%,
    #fff 100%
  );
}

body.ax-about .ax-about-intro > *{
  position:relative;
  z-index:1;
}

body.ax-about .ax-about-intro .ax-about-section-title{
  color:#10233f!important;
}

body.ax-about .ax-about-intro .ax-about-copy p{
  color:#494d5a!important;
}

@media(max-width:980px){
  body.ax-about .ax-about-intro{
    padding:72px 0 76px!important;
  }

  body.ax-about .ax-about-intro::before{
    height:56px;
  }
}

/*
 * 20260712 full-page dark governance.
 * These product pages are intentionally dark from header to footer; do not
 * let copied source styles reintroduce full-width white sections.
 */
:root{
  --ax-dark-page:
    radial-gradient(circle at 12% 8%,rgba(48,151,230,.22),transparent 25%),
    radial-gradient(circle at 88% 28%,rgba(36,119,207,.16),transparent 28%),
    linear-gradient(180deg,#010518 0%,#071a36 22%,#0b3d70 48%,#082747 72%,#061226 100%);
  --ax-dark-surface:rgba(8,31,60,.88);
  --ax-dark-surface-2:rgba(10,42,78,.78);
  --ax-dark-line:rgba(133,185,255,.18);
  --ax-dark-title:#f7fbff;
  --ax-dark-copy:rgba(231,240,255,.82);
  --ax-dark-muted:rgba(205,222,245,.68);
}

:where(body.ax-recruitingbot,body.ax-wechatagent,body.ax-resumeparser,body.ax-jobparser,body.ax-applybot){
  background:#061226!important;
  color:var(--ax-dark-copy)!important;
}
:where(html:has(body.ax-recruitingbot),html:has(body.ax-wechatagent),html:has(body.ax-resumeparser),html:has(body.ax-jobparser),html:has(body.ax-applybot)),
:where(body.ax-recruitingbot,body.ax-wechatagent,body.ax-resumeparser,body.ax-jobparser,body.ax-applybot){
  background-color:#061226!important;
}
html body.ax-recruitingbot,
html body.ax-wechatagent,
html body.ax-resumeparser,
html body.ax-jobparser,
html body.ax-applybot{
  background-color:#061226!important;
  background-image:none!important;
}
:where(body.ax-recruitingbot,body.ax-wechatagent,body.ax-resumeparser,body.ax-jobparser,body.ax-applybot) main{
  background-color:#061226!important;
  background-image:var(--ax-dark-page)!important;
}

body.ax-recruitingbot .ax-ai-robot-shell{
  background-color:#061226!important;
  background-image:var(--ax-dark-page)!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
}
body.ax-recruitingbot .ax-robot-floating-bg,
body.ax-recruitingbot section.hero{
  background:transparent!important;
}

body.ax-wechatagent .ai-wecom-page,
body.ax-wechatagent .boardmix-container,
body.ax-wechatagent .ai-wecom-page > section,
body.ax-wechatagent .ai-wecom-page [class^="page-"],
body.ax-wechatagent .ai-wecom-page [class*=" page-"]{
  background-color:transparent!important;
  background-image:none!important;
}
body.ax-wechatagent .ai-wecom-page{
  background-color:#061226!important;
  background-image:var(--ax-dark-page)!important;
}
body.ax-wechatagent .ai-wecom-page .page-1{
  background-image:linear-gradient(180deg,#010518 0%,#1b6bb2 68%,rgba(11,61,112,.18) 100%)!important;
}
body.ax-wechatagent .ai-wecom-page .page-1:before{
  background:linear-gradient(135deg,rgba(20,72,128,.42),rgba(4,20,43,.20))!important;
  border-color:var(--ax-dark-line)!important;
  box-shadow:0 28px 90px rgba(0,8,28,.34)!important;
}
body.ax-wechatagent .ai-wecom-page :where(.feature-info .content,.page-7 .content,.page-8 .content,.feature-info .item){
  background:var(--ax-dark-surface)!important;
  border-color:var(--ax-dark-line)!important;
  box-shadow:0 20px 54px rgba(0,9,28,.28)!important;
}
body.ax-wechatagent .ai-wecom-page :where(h1,h2,h3,h4,.title,.title-1,.sub-title,.aix-brand){
  color:var(--ax-dark-title)!important;
  -webkit-text-fill-color:currentColor!important;
  background:none!important;
}
body.ax-wechatagent .ai-wecom-page :where(p,.info,.color0,.explanation,li,span:not(.aix-brand)){
  color:var(--ax-dark-copy)!important;
}
body.ax-wechatagent .ai-wecom-page .boardmix-container{
  color:var(--ax-dark-copy)!important;
}
body.ax-wechatagent .ai-wecom-page img{
  filter:saturate(.92) brightness(.94) contrast(1.04) drop-shadow(0 18px 38px rgba(0,10,30,.24));
}

:where(body.ax-resumeparser,body.ax-jobparser) .yoojober-detail-page,
:where(body.ax-resumeparser,body.ax-jobparser) .yoojober-detail-page .yoo-main{
  background-color:#061226!important;
  background-image:var(--ax-dark-page)!important;
}
:where(body.ax-resumeparser,body.ax-jobparser) .yoojober-detail-page .page-banner{
  background-image:linear-gradient(180deg,#010518 0%,#1b6bb2 68%,rgba(11,61,112,.10) 100%)!important;
}
body.ax-resumeparser div.page-banner,
body.ax-jobparser div.page-banner{
  background-color:#0b3d70!important;
  background-image:linear-gradient(180deg,#010518 0%,#1b6bb2 68%,rgba(11,61,112,.10) 100%)!important;
  color:var(--ax-dark-title)!important;
}
body.ax-resumeparser .yoojober-detail-page .page-1,
body.ax-resumeparser .yoojober-detail-page .page-2,
body.ax-resumeparser .yoojober-detail-page .page-3,
body.ax-resumeparser .yoojober-detail-page .page-4,
body.ax-jobparser .yoojober-detail-page .page-1,
body.ax-jobparser .yoojober-detail-page .page-2,
body.ax-jobparser .yoojober-detail-page .page-3,
body.ax-jobparser .yoojober-detail-page .page-4{
  background-color:transparent!important;
  background-image:none!important;
  color:var(--ax-dark-copy)!important;
}
:where(body.ax-resumeparser,body.ax-jobparser) .yoojober-detail-page :where(.section,.section-content,.content-wrap,.analyse-content,.detect-content){
  background-color:transparent!important;
}
:where(body.ax-resumeparser,body.ax-jobparser) .yoojober-detail-page :where(.box,.card,.panel,.result,.upload-box,.analyse-box,.detect-box){
  background:var(--ax-dark-surface)!important;
  border-color:var(--ax-dark-line)!important;
  box-shadow:0 20px 54px rgba(0,9,28,.26)!important;
}
:where(body.ax-resumeparser,body.ax-jobparser) .yoojober-detail-page :where(h1,h2,h3,h4,h5,.title){
  color:var(--ax-dark-title)!important;
}
:where(body.ax-resumeparser,body.ax-jobparser) .yoojober-detail-page :where(p,li,.desc,.text,.subtitle){
  color:var(--ax-dark-copy)!important;
}
body.ax-resumeparser .yoojober-detail-page .yoo-main,
body.ax-jobparser .yoojober-detail-page .yoo-main{
  color:var(--ax-dark-copy)!important;
}
:where(body.ax-resumeparser,body.ax-jobparser) .yoojober-detail-page :where(span,em,label){
  border-color:var(--ax-dark-line);
}
:where(body.ax-resumeparser,body.ax-jobparser) .yoojober-detail-page img{
  filter:saturate(.92) brightness(.94) contrast(1.04);
}

body.ax-applybot .ax-get-paid-page,
body.ax-applybot .ax-get-paid-page > .bg-white{
  background-color:#061226!important;
  background-image:var(--ax-dark-page)!important;
}
body.ax-applybot .ax-get-paid-page > .bg-white > section{
  background-color:transparent!important;
  background-image:none!important;
  color:var(--ax-dark-copy)!important;
}
body.ax-applybot .ax-get-paid-page > .bg-white > section:first-child{
  background-image:linear-gradient(180deg,#010518 0%,#1b6bb2 70%,rgba(11,61,112,.12) 100%)!important;
}
body.ax-applybot .ax-get-paid-page :where(h1,h2,h3,h4){
  color:var(--ax-dark-title)!important;
}
body.ax-applybot .ax-get-paid-page :where(p,li,.text-slate-500,.text-slate-600,.text-slate-700){
  color:var(--ax-dark-copy)!important;
}
body.ax-applybot .ax-get-paid-page :where(.opportunity-card-wrapper,[class*="bg-white"],[class*="bg-slate-50"]){
  background:var(--ax-dark-surface)!important;
  border-color:var(--ax-dark-line)!important;
  color:var(--ax-dark-copy)!important;
}
body.ax-applybot .ax-get-paid-page img{
  filter:saturate(.94) brightness(.96) contrast(1.03);
}

@media(max-width:767px){
  :where(body.ax-wechatagent,body.ax-resumeparser,body.ax-jobparser,body.ax-applybot,body.ax-recruitingbot) main{
    background-attachment:scroll!important;
  }
}

/*
 * recruitingbot colour-detail correction:
 * The shell and its inset main previously painted the same gradient twice.
 * Because each layer used its own coordinate space, the second copy created
 * a visible rectangular colour shift in the upper-left of the hero.
 * Keep one continuous canvas on the shell and make every inner page layer
 * transparent.
 */
html.aixunren-page-detail body.ax-recruitingbot,
html.aixunren-page-detail.aixunren-nav-ready body.ax-recruitingbot{
  background-color:#061226!important;
  background-image:none!important;
}

html.aixunren-page-detail body.ax-recruitingbot .ax-ai-robot-shell{
  background-color:#061226!important;
  background-image:var(--ax-dark-page)!important;
  background-repeat:no-repeat!important;
  background-position:0 0!important;
  background-size:100% 100%!important;
}

html.aixunren-page-detail body.ax-recruitingbot
.ax-ai-robot-shell > .page,
html.aixunren-page-detail body.ax-recruitingbot
.ax-ai-robot-shell > .page > main,
html.aixunren-page-detail body.ax-recruitingbot
.ax-ai-robot-shell section.hero,
html.aixunren-page-detail body.ax-recruitingbot
.ax-ai-robot-shell .hero-content{
  background-color:transparent!important;
  background-image:none!important;
}

/*
 * quickapply correction:
 * dark gradient belongs to the page canvas; job/search/detail surfaces remain
 * light, readable product panels. Keep this page-scoped.
 */
html:has(body.ax-quickapply),
body.ax-quickapply{
  background-color:#061226!important;
  background-image:var(--ax-dark-page)!important;
  color:#10233f!important;
}
html.aixunren-page-detail body.ax-quickapply,
html.aixunren-page-detail.aixunren-nav-ready body.ax-quickapply{
  background-color:#061226!important;
  background-image:var(--ax-dark-page)!important;
}
body.ax-quickapply main.waiqi-position-shell{
  min-height:100vh;
  background-color:#061226!important;
  background-image:var(--ax-dark-page)!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
}
body.ax-quickapply .waiqi-position-page,
body.ax-quickapply .position-list-container,
body.ax-quickapply .position-list{
  background-color:transparent!important;
  background-image:none!important;
}

/* Search, filters, job cards and detail content are light business surfaces. */
body.ax-quickapply :where(
  .search-main,
  .search-type,
  .search-content,
  .screen-select,
  .position-info,
  .position-list-intent,
  .list-cell,
  .position-detail
){
  color:#10233f!important;
}
body.ax-quickapply :where(
  .search-content,
  .screen-select,
  .position-info,
  .position-list-intent,
  .position-detail
){
  background-color:#fff!important;
  background-image:none!important;
  border-color:#dbe7f3!important;
}
body.ax-quickapply .list-cell{
  background:#fff!important;
  border-color:#dbe7f3!important;
}
body.ax-quickapply .list-cell.active{
  background:#f4f8fd!important;
}
body.ax-quickapply :where(
  .detail,
  .detail-content,
  .detail-top,
  .detail-main,
  .detail-item,
  .cell-top,
  .cell-bottom,
  .company-info,
  .list-span-center
){
  color:#10233f!important;
}
body.ax-quickapply :where(
  .detail p,
  .detail li,
  .detail span,
  .company-info,
  .cell-bottom,
  .position-info p
){
  color:#475569!important;
}
body.ax-quickapply :where(
  .el-input__wrapper,
  .el-select__wrapper,
  .select-item
){
  background-color:#f6f9fd!important;
  border-color:#dbe7f3!important;
  color:#10233f!important;
}
body.ax-quickapply :where(
  .el-input__inner,
  .el-select__placeholder,
  .el-select__selected-item,
  .placeholder
){
  color:#475569!important;
  -webkit-text-fill-color:currentColor!important;
}

@media(max-width:767px){
  body.ax-quickapply main.waiqi-position-shell{
    background-attachment:scroll!important;
  }
  body.ax-quickapply :where(
    .search-content,
    .screen-select,
    .position-info,
    .position-list-intent,
    .position-detail
  ){
    max-width:calc(100vw - 24px)!important;
  }
}

/*
 * 20260712 public information-page transition repair.
 * These pages are structurally different, so do not reuse the tall homepage
 * gradient verbatim. Each canvas now owns the full viewport width and the
 * hero resolves into the actual surface used by its following section.
 */
:where(
  html:has(body.ax-help),
  html:has(body.ax-updates),
  html:has(body.ax-privacy),
  html:has(body.ax-reports),
  html:has(body.ax-pricing),
  html:has(body.ax-cases)
){
  width:100%;
  min-width:0;
  margin:0;
  overflow-x:clip;
}
:where(
  body.ax-help,
  body.ax-updates,
  body.ax-privacy,
  body.ax-reports,
  body.ax-pricing,
  body.ax-cases
){
  width:100%;
  min-width:0;
  margin:0!important;
  overflow-x:clip!important;
}

body.ax-help .help-page,
body.ax-updates .change-page,
body.ax-privacy .ax-policy-page{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  background:#f5f8fd!important;
}
body.ax-help .help-hero,
body.ax-updates .change-hero,
body.ax-privacy .ax-policy-hero{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  background-image:linear-gradient(
    180deg,
    #010518 0%,
    #0a3768 42%,
    #277fc0 72%,
    #d9ebf8 100%
  )!important;
}
body.ax-help .help-wrap,
body.ax-updates .change-shell,
body.ax-privacy .ax-policy-source-shell{
  position:relative;
  z-index:1;
}
body.ax-privacy .ax-policy-source-shell{
  padding-top:42px!important;
}
body.ax-privacy .ax-policy-menu{
  position:relative;
  z-index:2;
  margin:0!important;
}
body.ax-privacy .ax-policy-container{
  position:relative;
  z-index:1;
}
body.ax-help .help-wrap,
body.ax-updates .change-shell{
  padding-top:64px!important;
}

/* Reports source CSS constrained the hero to a 1200px island. The content
   stays on its readable grid while the colour-bearing shell becomes fluid. */
body.ax-reports,
body.ax-reports .ax-reports-shell,
body.ax-reports .ax-reports-shell .blog-main,
body.ax-reports .ax-reports-shell .blog-layouts-wrapper{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  background:#f5f8fd!important;
}
body.ax-reports .ax-reports-shell{
  padding-top:0!important;
}
body.ax-reports .ax-reports-shell .blog-layouts-main{
  width:100%!important;
  max-width:none!important;
  padding:0 0 72px!important;
  background:#f5f8fd!important;
}
body.ax-reports .ax-reports-shell .header-wrapper{
  width:100%!important;
  max-width:none!important;
  min-height:560px!important;
  margin:0!important;
  padding:146px max(24px,calc((100vw - 1200px)/2 + 32px)) 58px!important;
  overflow:hidden!important;
  background-image:
    radial-gradient(circle at 76% 35%,rgba(83,198,255,.20),transparent 24%),
    linear-gradient(180deg,#010518 0%,#0a3768 48%,#287fbe 76%,#dcecf7 100%)!important;
}
body.ax-reports .ax-reports-shell .header-wrapper h1{
  color:#f7fbff!important;
  text-shadow:0 12px 34px rgba(0,8,28,.28)!important;
}
body.ax-reports .ax-reports-shell .header-wrapper .desc,
body.ax-reports .ax-reports-shell .header-wrapper .author-info{
  color:rgba(239,247,255,.86)!important;
}
body.ax-reports .ax-reports-shell .header-wrapper .header-nav-main{
  margin-left:auto!important;
  margin-right:auto!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(204,222,240,.92)!important;
  box-shadow:0 20px 48px rgba(12,49,86,.14)!important;
}
body.ax-reports .ax-reports-shell .layouts-content{
  width:min(1200px,calc(100vw - 48px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Pricing is a fully dark product page. Ending its long pricing block in
   white created the hard cyan/white/navy seam shown in the screenshot. */
html:has(body.ax-pricing),
body.ax-pricing,
body.ax-pricing main.ax-pricing-page{
  background:#06162b!important;
}
body.ax-pricing main.ax-pricing-page{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  min-height:100vh!important;
  background-image:linear-gradient(180deg,#010518 0%,#082b50 42%,#0a416f 72%,#06162b 100%)!important;
}
body.ax-pricing main.ax-pricing-page > div.pricing-dark{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  background:transparent!important;
}
/* The cases hero is intentionally short. Resolve it into the cool page
   surface instead of compressing the homepage's white ending into 270px. */
body.ax-cases #ax-static-user-page{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  background:#f5f8fd!important;
}
body.ax-cases .ax-user-hero{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  background-image:
    linear-gradient(180deg,rgba(1,5,24,.78) 0%,rgba(10,55,104,.72) 52%,rgba(64,135,187,.42) 78%,#dcecf7 100%),
    url('https://www.mokahr.com/static/user/banner.jpg')!important;
  background-position:center!important;
  background-size:cover!important;
}
body.ax-cases .ax-user-body{
  position:relative;
  z-index:1;
}

@media(max-width:900px){
  body.ax-reports .ax-reports-shell .header-wrapper{
    min-height:520px!important;
    padding:126px 20px 52px!important;
  }
  body.ax-reports .ax-reports-shell .layouts-content{
    width:calc(100vw - 24px)!important;
  }
}

/*
 * 20260712 talent-search hero transition refinement.
 * The homepage gradient reached pure white behind the search field because
 * this hero is shorter than the homepage hero. Keep the form in a stable
 * blue band, then resolve through a longer pale-blue buffer into section 2.
 */
body.ax-talentsearch .ax-global-talent-page{
  background:#eef7fc!important;
}
body.ax-talentsearch
.ax-global-talent-page > .min-h-screen > section:first-child{
  box-sizing:border-box;
  min-height:clamp(740px,calc(100vh + 32px),800px)!important;
  padding-bottom:clamp(80px,8vh,104px)!important;
  background-color:#237fbd!important;
  background-image:
    radial-gradient(circle at 78% 32%,rgba(61,193,255,.16),transparent 26%),
    linear-gradient(
      180deg,
      #010518 0%,
      #0a3768 42%,
      #247fbd 70%,
      #8fc8e9 88%,
      #e7f3fb 100%
    )!important;
}
body.ax-talentsearch
.ax-global-talent-page > .min-h-screen > section:first-child form{
  padding-top:clamp(72px,7vh,96px)!important;
}
body.ax-talentsearch
.ax-global-talent-page > .min-h-screen > section:nth-child(2){
  position:relative;
  background:#eef7fc!important;
  padding-top:clamp(52px,5vw,68px)!important;
}
body.ax-talentsearch
.ax-global-talent-page > .min-h-screen > section:nth-child(2)::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:72px;
  pointer-events:none;
  background:linear-gradient(180deg,#e7f3fb 0%,#eef7fc 100%);
}
body.ax-talentsearch
.ax-global-talent-page > .min-h-screen > section:nth-child(2) > *{
  position:relative;
  z-index:1;
}

@media(max-width:768px){
  body.ax-talentsearch .ax-source-float-profiles{
    display:none!important;
  }
  body.ax-talentsearch
  .ax-global-talent-page > .min-h-screen > section:first-child{
    min-height:auto!important;
    padding-top:112px!important;
    padding-bottom:96px!important;
    background-image:linear-gradient(
      180deg,
      #010518 0%,
      #0a3768 43%,
      #247fbd 74%,
      #b8daf0 92%,
      #e7f3fb 100%
    )!important;
  }
  body.ax-talentsearch
  .ax-global-talent-page > .min-h-screen > section:first-child form{
    padding-top:40px!important;
  }
  body.ax-talentsearch
  .ax-global-talent-page > .min-h-screen > section:first-child form > div{
    flex-direction:column;
  }
  body.ax-talentsearch
  .ax-global-talent-page > .min-h-screen > section:first-child form button{
    width:100%;
  }
  body.ax-talentsearch
  .ax-global-talent-page > .min-h-screen > section:nth-child(2){
    padding-top:72px!important;
  }
}