/* Generated-page components. Tokens and base styles come from styles.css. */

/* ── mega-menu ── */
.nav__menu{display:flex;gap:2px;margin-inline:auto}
.nav__cta{white-space:nowrap}
.mm__btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;white-space:nowrap;border-radius:999px;font-size:15px;color:var(--on-navy-2);
  transition:background .25s var(--ease),color .25s var(--ease)}
.mm__btn:hover{color:var(--on-navy);background:oklch(0.972 0.008 80 / .07)}
.mm__btn[aria-expanded="true"]{color:var(--on-navy);background:oklch(0.972 0.008 80 / .14)}
.mm__chev{transition:transform .25s var(--ease);opacity:.7}
.mm__btn[aria-expanded="true"] .mm__chev{transform:rotate(180deg);opacity:1}
.mm__panel{position:fixed;top:80px;left:0;right:0;z-index:99;background:var(--paper);color:var(--ink);
  border-bottom:1px solid var(--line);box-shadow:0 30px 60px -36px oklch(0.15 0.04 250 / .45);
  max-height:calc(100vh - 80px);max-height:calc(100svh - 80px);overflow:auto;animation:mm-in .28s var(--ease)}
@keyframes mm-in{from{opacity:0;transform:translateY(-6px)}}
.mm__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:clamp(32px,4vw,64px);padding-block:44px 52px}
.mm__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.mm__cols--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
.mm__cols--1{grid-template-columns:minmax(0,1fr);max-width:360px}
.mm__col h3{margin-bottom:18px;font:600 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
html[data-lang="zh"] .mm__col h3{letter-spacing:.12em;font-size:12.5px}
.mm__col ul{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.mm__col a,.mm__soon{display:grid;gap:3px}
.mm__col a strong,.mm__soon strong{font-size:16px;font-weight:600;color:var(--navy-d);transition:color .2s}
.mm__col a span{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.mm__col a:hover strong{color:var(--brand)}
.mm__col a:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:4px}
.mm__soon strong{color:var(--ink-3);font-weight:500}
.mm__soon em{justify-self:start;margin-top:2px;padding:2px 8px;border-radius:999px;font:500 11.5px/1.4 var(--sans);font-style:normal;background:oklch(0.386 0.068 250 / .07);color:var(--ink-2)}
/* featured card: the conversion for this menu */
.mm__feat{display:flex;flex-direction:column;gap:10px;padding:26px 26px 24px;border-radius:16px;background:var(--navy-d);color:var(--on-navy);
  box-shadow:0 24px 48px -28px oklch(0.15 0.04 250 / .7);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.mm__feat:hover{transform:translateY(-3px);box-shadow:0 30px 56px -26px oklch(0.15 0.04 250 / .8)}
.mm__feat-tag{font:600 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.mm__feat-img{display:block;margin:4px 0 2px;border-radius:10px;overflow:hidden;background:var(--surface)}
.mm__feat-img img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.mm__feat-qr{align-self:flex-start;padding:8px;margin:4px 0 2px;border-radius:10px;background:var(--surface)}
.mm__feat-qr img{width:104px;height:104px}
.mm__feat-title{font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.mm__feat-body{font-size:14px;line-height:1.65;color:var(--on-navy-2)}
.mm__feat-go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:600}
.mm__feat-go i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--signal);color:var(--navy-d);font-style:normal;font-size:18px;
  transition:transform .3s var(--ease)}
.mm__feat:hover .mm__feat-go i{transform:translateX(3px)}
.langsw a{color:var(--on-navy-3)}
.langsw a:hover{color:var(--on-navy)}
.langsw [aria-current]{color:var(--signal)}
@media (max-width:1100px){
  .nav__menu{display:none;position:absolute;left:0;right:0;top:80px;flex-direction:column;gap:0;background:var(--navy-d);
    padding:var(--s-1) var(--pad) var(--s-4);max-height:calc(100vh - 80px);max-height:calc(100svh - 80px);overflow:auto}
  .nav__menu.is-open{display:flex}
  .mm{border-bottom:1px solid var(--rule-navy)}
  .mm__btn{width:100%;justify-content:space-between;padding:16px 0;border-radius:0;font-size:17px;color:var(--on-navy);background:none!important}
  .mm__panel{position:static;background:transparent;color:var(--on-navy);border:0;box-shadow:none;max-height:none;overflow:visible;animation:none}
  .mm__in{grid-template-columns:1fr;gap:var(--s-2);padding:0 0 var(--s-3)}
  .mm__cols,.mm__cols--2,.mm__cols--1{grid-template-columns:1fr;max-width:none;gap:var(--s-3)}
  .mm__col h3{margin-bottom:10px;color:var(--on-navy-3)}
  .mm__col ul{gap:12px}
  .mm__col a strong{color:var(--on-navy)}
  .mm__col a span{color:var(--on-navy-3)}
  .mm__soon strong{color:var(--on-navy-3)}
  .mm__soon em{background:var(--rule-navy);color:var(--on-navy-2)}
  .mm__feat{display:none}
  .nav__cta{display:none}
  .burger{display:flex}
}

/* ── language hint ── */
.langhint{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:420px;display:flex;gap:12px;align-items:center;
  padding:12px 16px;border-radius:var(--r);background:var(--surface);color:var(--ink);box-shadow:0 20px 40px -20px oklch(0.15 0.04 250 / .5);font-size:14px}
.langhint a{color:var(--brand);font-weight:600}
.langhint[hidden]{display:none}
@media (max-width:640px){.langhint{bottom:84px}}
.langhint__x{margin-left:auto;font-size:18px;line-height:1;color:var(--ink-2)}

/* ── contact dock ── */
.dock{position:fixed;right:16px;bottom:16px;z-index:95;display:grid;justify-items:end;gap:10px}
.dock__btn{padding:12px 18px;border-radius:999px;background:var(--signal);color:var(--navy-d);font-weight:600;font-size:14px;
  box-shadow:0 16px 30px -16px oklch(0.15 0.04 250 / .6)}
.dock__panel{width:240px;padding:16px;border-radius:12px;background:var(--surface);color:var(--ink);display:grid;gap:10px;justify-items:center;
  box-shadow:0 30px 60px -30px oklch(0.15 0.04 250 / .7)}
.dock__panel[hidden]{display:none}
.dock__title{font-weight:600}
.dock__qr{width:160px;height:160px;border-radius:8px}
.dock__muted{font-size:12px;color:var(--ink-2)}
.dock__copy,.dock__link{width:100%;text-align:center;padding:9px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--ink)}
.dock__copy:hover,.dock__link:hover{border-color:var(--brand)}
/* zh: always-on WeChat QR card on wide screens; the button takes over below 900px */
.dock__wx{display:none;padding:10px 10px 8px;border-radius:6px;background:#fff;color:#1a1a1a;text-align:center;
  box-shadow:0 20px 44px -22px oklch(0.15 0.04 250 / .7)}
.dock__wx img{display:block;width:132px;height:132px}
.dock__wx p{margin-top:6px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;line-height:1}
.dock__wx svg{flex:none;fill:#1a1a1a}
.dock__wx-b{stroke:#fff;stroke-width:1.4}
.dock__wx-e{fill:#fff}
@media (min-width:901px){
  .dock--wx{bottom:88px}
  .dock--wx .dock__wx{display:block;opacity:0;visibility:hidden;transform:translateY(8px);
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
  .dock--wx.is-on .dock__wx{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .dock--wx .dock__btn,.dock--wx .dock__panel{display:none}
}

/* ── simple page hero ── */
.pg-hero{background:var(--navy-d);color:var(--on-navy);padding:calc(80px + var(--s-6)) 0 var(--s-6)}
.pg-hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:18em}
.pg-hero h1 em,.sh em{font-style:normal;color:var(--signal)}
.pg-hero__lede{margin-top:var(--s-3);max-width:40em;color:var(--on-navy-2);line-height:1.85}
.pg-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s-4)}
.pg-ctas .btn{color:var(--on-navy)}
.pg-ctas .btn--solid{color:var(--on-primary)}

/* ── cards, steps, chips, faq, prose ── */
.cards{display:grid;gap:var(--s-3);margin-top:var(--s-4)}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{display:block;padding:var(--s-3);border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.band--alt .card{background:var(--surface)}
.card h3{font-size:19px;margin-bottom:8px}
.card p{color:var(--ink-2);font-size:15px;line-height:1.75}
a.card:hover{border-color:var(--brand)}
.steplist{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4) var(--s-3)}
.step__n{font-size:13px;color:var(--ember);font-weight:600;letter-spacing:.06em}
.step h3{font-size:18px;margin:6px 0}
.step p{color:var(--ink-2);font-size:15px}
.chips{list-style:none;margin:var(--s-4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{padding:10px 18px;border-radius:999px;border:1px solid var(--line);font-size:15px}
.faq{margin-top:var(--s-4);display:grid;gap:8px;max-width:820px}
.faq__item{border-bottom:1px solid var(--line);padding:14px 0}
.faq__item summary{cursor:pointer;font-weight:600}
.faq__item p{margin-top:8px;color:var(--ink-2)}
.prose{max-width:760px}
.prose h2,.prose h3{margin:var(--s-4) 0 var(--s-1)}
.prose p,.prose ul{margin:0 0 var(--s-2)}
.cta-band .pg-ctas .btn--solid{color:var(--on-primary)}
@media (max-width:900px){.cards--3,.steplist{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards--2,.cards--3,.steplist{grid-template-columns:1fr}}

/* ── lead form ── */
.lead__in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s-5)}
.lead__qr{margin-top:var(--s-3);width:160px;height:160px;border-radius:8px}
.lead__form fieldset{border:0;padding:0;margin:0 0 var(--s-3)}
.lead__form legend{font-size:13px;color:var(--on-navy-3);margin-bottom:var(--s-1)}
.lead__form label{display:block;font-size:13px;letter-spacing:.03em;color:var(--on-navy-3)}
.lead__form input,.lead__form select,.lead__form textarea{display:block;width:100%;margin-top:6px;padding:8px 0;background:transparent;
  border:0;border-bottom:1px solid var(--rule-navy);color:var(--on-navy);font:inherit;font-size:16px}
.lead__form select option{color:var(--ink)}
.lead__form input:focus,.lead__form select:focus,.lead__form textarea:focus{outline:none;border-bottom-color:var(--signal)}
.lead__msg{margin-top:var(--s-3)}
.lead__form .btn{margin-top:var(--s-3)}
.lead__note{margin-top:var(--s-2);color:var(--signal);min-height:1.5em}
.lead__fallback{margin-top:var(--s-1);color:var(--ember-l)}
.lead__fallback a{text-decoration:underline}
.lead__form.is-sent .f2,.lead__form.is-sent fieldset,.lead__form.is-sent .lead__msg,.lead__form.is-sent .btn{display:none}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media (max-width:900px){.lead__in{grid-template-columns:1fr}}

/* ── footer (slim, generated pages) ── */
.ft--slim .ft__in{padding-block:var(--s-5)}
.ft__base{padding-block:var(--s-2);font-size:13px;color:var(--on-navy-3);border-top:1px solid var(--rule-navy)}
.ft__base{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}

/* ── SERP-climb hero (from the approved prototype) ── */
.sh-hero{--row:84px;position:relative;isolation:isolate;overflow:hidden;background:var(--navy-d);color:var(--on-navy);
  padding:calc(80px + clamp(32px,5vw,72px)) 0 clamp(56px,6vw,96px);min-height:100vh;min-height:100svh;display:grid;align-items:center}
.sh-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(1100px 560px at 88% -12%, oklch(0.802 0.085 205 / .16), transparent 62%),
    repeating-linear-gradient(180deg, transparent 0 75px, oklch(0.972 0.008 80 / .045) 75px 76px);
  -webkit-mask-image:linear-gradient(#000 20%,#0000 96%);mask-image:linear-gradient(#000 20%,#0000 96%)}
.sh-hero__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.sh-left{display:grid;gap:clamp(22px,2.6vw,32px);align-content:center}
.sh-hero h1{font-size:clamp(2.2rem,3.9vw,3.5rem);font-weight:500;line-height:1.12;letter-spacing:-.02em;max-width:15em}
.sh-hero h1 em{font-style:normal;color:var(--signal)}
html[data-lang="zh"] .sh-hero h1{letter-spacing:.01em;line-height:1.2}
html[data-lang="zh"] .sh-hero h1 em{white-space:nowrap}
.rise-line{white-space:nowrap}
.rise-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.rise-w>span{display:inline-block;animation:sh-rise .9s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms)}
@keyframes sh-rise{from{transform:translateY(105%)}}
.sh-copy{display:grid;gap:28px;animation:sh-fade 1s .45s var(--ease) both}
.sh-copy p{font-size:16px;line-height:1.85;color:var(--on-navy-2);max-width:34em}
.sh-ctas{display:flex;flex-wrap:wrap;gap:12px}
.sh-ctas .btn{color:var(--on-navy)}
.sh-ctas .btn--solid{color:var(--on-primary)}
@keyframes sh-fade{from{opacity:0;transform:translateY(16px)}}
/* Google results page, recreated as an illustration (no Google logo artwork). */
.serp-wrap{position:relative}
.serp{--g-text:#202124;--g-mute:#4d5156;--g-url:#5f6368;--g-link:#1a0dab;--g-line:#ebebeb;--g-blue:#1a73e8;
  background:#fff;color:var(--g-text);border-radius:14px;overflow:hidden;font-family:Arial,"Helvetica Neue",var(--cjk);
  box-shadow:0 40px 80px -40px oklch(0.15 0.04 250 / .75),0 0 0 1px oklch(1 0 0 / .06);animation:sh-fade 1.1s .6s var(--ease) both}
.g-top{display:flex;align-items:center;gap:22px;padding:18px 22px 12px}
.g-logo{flex:none;font:500 24px/1 "Product Sans",Arial,sans-serif;letter-spacing:-.5px;color:#5f6368}
.g-logo span:nth-child(1),.g-logo span:nth-child(4){color:#4285F4}.g-logo span:nth-child(2),.g-logo span:nth-child(6){color:#EA4335}
.g-logo span:nth-child(3){color:#FBBC05}.g-logo span:nth-child(5){color:#34A853}
.g-search{flex:1;min-width:0;height:44px;display:flex;align-items:center;gap:12px;padding:0 6px 0 20px;border-radius:24px;
  background:#fff;box-shadow:0 1px 6px rgba(32,33,36,.28)}
.serp__q{flex:1;min-width:0;color:var(--g-text);white-space:nowrap;overflow:hidden;font:400 16px/1 Arial,sans-serif}
.serp__caret{display:inline-block;width:1.5px;height:1.1em;margin-left:1px;vertical-align:-.18em;background:currentColor;animation:sh-caret 1s step-end infinite}
@keyframes sh-caret{50%{opacity:0}}
.g-ico{display:grid;place-items:center;flex:none;color:#70757a}
.g-ico--go{color:var(--g-blue);padding-right:8px}
.g-sep{width:1px;height:24px;background:#dadce0}
.g-tabs{display:flex;gap:22px;padding:0 22px 0 108px;border-bottom:1px solid var(--g-line);font:400 14px/1 Arial,var(--cjk);color:var(--g-url)}
.g-tabs span{padding:12px 2px 11px;border-bottom:3px solid transparent}
.g-tabs .is-on{color:var(--g-blue);border-bottom-color:var(--g-blue)}
.serp__body{padding:6px 0 10px}
.serp__list{position:relative;height:calc(var(--row) * 6);margin:0;padding:0;list-style:none}
.serp__item{position:absolute;top:0;left:0;right:0;height:var(--row);display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;align-content:center;column-gap:12px;row-gap:5px;padding:0 22px 0 108px;
  transition:transform .75s var(--ease);will-change:transform}
.serp__item.no-anim{transition:none}
.serp__pos{display:none}
.g-site{display:flex;align-items:center;gap:10px;min-width:0;grid-column:1}
.serp__fav{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 Arial,sans-serif;
  background:#f1f3f4;color:#5f6368;border:1px solid #e3e5e8}
.g-src{display:grid;gap:1px;min-width:0}
.g-name{font-size:14px;color:var(--g-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-url{font-size:12px;color:var(--g-url);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serp__title{grid-column:1;font:400 19px/1.3 Arial,var(--cjk);color:var(--g-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serp__badge{grid-column:2;grid-row:1 / span 2;align-self:center;opacity:0}
.serp__item.is-you{z-index:2}
.serp__item.is-you::before{content:"";position:absolute;inset:4px 10px 4px 88px;z-index:-1;border-radius:12px;background:#e8f0fe;
  box-shadow:0 0 0 1.5px var(--g-blue),0 14px 28px -18px rgba(26,115,232,.55)}
.serp__item.is-you .serp__fav{background:var(--navy);color:var(--signal);border-color:var(--navy)}
.serp__badge b{display:inline-block;padding:5px 11px;border-radius:999px;font:700 12px/1 Arial,sans-serif;background:var(--g-blue);color:#fff;transition:background .4s var(--ease)}
.serp__item.is-top .serp__badge b{background:#188038}
/* our overlay beside the Google page: stopwatch gauge + ranking curve */
.serp-wrap{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:14px;align-items:stretch}
.serp-stat{display:grid;grid-template-rows:auto auto 120px auto;justify-items:center;align-content:center;gap:16px;padding:18px 16px;border-radius:14px;
  background:#fff;color:#202124;border:1px solid #e3e8f0;animation:sh-fade 1.1s .75s var(--ease) both}
.serp__gauge{position:relative;width:132px;aspect-ratio:1}
.serp__gauge svg{width:100%;height:100%;display:block}
.serp__gauge line{stroke:#d5dbe3;stroke-width:1.2;stroke-linecap:round}
.gauge__track{fill:none;stroke:#e8edf4;stroke-width:9}
.gauge__arc{fill:none;stroke:#1a73e8;stroke-width:9;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:96;
  transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .8s var(--ease)}
.gauge__v{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:3px}
.gauge__v strong{font:800 2rem/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#202124}
.gauge__v strong b{font-weight:800}
.gauge__v span,.serp__metric span{font:600 .58rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#5f6368;text-align:center}
html[data-lang="zh"] .gauge__v span,html[data-lang="zh"] .serp__metric span{letter-spacing:.04em;font-size:.68rem}
.serp__metric{display:grid;gap:4px;justify-items:center}
.serp__metric strong{font:800 1.6rem/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#202124}
.serp__chart{width:100%;height:100%;display:block;overflow:visible;border-bottom:1px solid #dadce0;
  background:linear-gradient(#e8f0fe,#e8f0fe) 0 0 / 100% 22% no-repeat}
.chart__line{fill:none;stroke:#1a73e8;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:d .8s var(--ease)}
.serp__note{font-size:.68rem;color:var(--on-navy-3);line-height:1.4}
.sh-cap{margin-top:12px;font-size:12px;color:var(--on-navy-3);text-align:right}
@media (max-width:1024px){.sh-hero__in{grid-template-columns:minmax(0,1fr)}.sh-hero{min-height:0}}
@media (max-width:640px){
  .sh-hero{--row:88px}
  .g-top{gap:12px;padding:14px 14px 10px}
  .g-logo{font-size:19px}
  .g-search{height:40px;padding-left:14px}
  .g-ico--clear,.g-sep{display:none}
  .g-tabs{padding-left:14px;gap:16px;font-size:13px}
  .serp__item{padding:0 14px}
  .serp__item.is-you::before{left:6px;right:6px}
  .serp__badge{display:none}
  .serp__title{font-size:16px}
  .serp-wrap{grid-template-columns:minmax(0,1fr)}
  .serp-stat{grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center}
  .serp__gauge{width:104px;grid-row:span 2}
  .serp__chart{min-height:60px}
}
@media (prefers-reduced-motion:reduce){
  .rise-w>span,.sh-copy,.serp,.serp-stat{animation:none}
  .serp__item,.gauge__arc,.chart__line{transition:none}
  .serp__caret{animation:none;opacity:0}
}

/* ═══════════ homepage sections (hx) ═══════════ */
.hx{padding:clamp(72px,9vw,128px) 0;scroll-margin-top:80px}
.hx [id]{scroll-margin-top:96px}
.hx--surface{background:var(--surface)}
.hx--paper{background:var(--paper)}
.hx--navy{background:var(--navy-d);color:var(--on-navy)}
.hx--rule{border-top:1px solid var(--line)}
/* ── platform logo marquee ── */
.plat{padding-block:clamp(56px,7vw,96px);overflow:hidden}
.plat .hx-head{margin-inline:auto;text-align:center;margin-bottom:clamp(28px,3.5vw,44px)}
.plat .hx-sub{margin-inline:auto}
.plat__rows{display:grid;gap:20px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.plat__row{display:flex;width:max-content;animation:plat-slide 96s linear infinite}
.plat__row:nth-child(even){animation-direction:reverse;animation-duration:112s}
.plat__row:nth-child(3){animation-duration:128s}
.plat__rows:hover .plat__row{animation-play-state:paused}
.plat__track{display:flex;gap:20px;padding:6px 20px 14px 0;margin:0;list-style:none}
.plat__card{flex:none;display:flex;align-items:center;justify-content:center;gap:12px;min-width:220px;height:84px;padding:0 28px;
  border-radius:10px;background:#fff;color:#1f2733;font-size:19px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  box-shadow:0 10px 26px -18px oklch(0.3 0.07 256 / .45),0 0 0 1px oklch(0.386 0.068 250 / .06)}
.plat__ico{flex:none;width:28px;height:28px}
/* First row leads: larger cards; the two rows below step down. */
.plat__row:first-child .plat__card{min-width:260px;height:100px;padding:0 34px;gap:14px;font-size:22px}
.plat__row:first-child .plat__ico{width:34px;height:34px}
.plat__row:not(:first-child) .plat__card{min-width:196px;height:72px;padding:0 24px;gap:10px;font-size:17px}
.plat__row:not(:first-child) .plat__ico{width:24px;height:24px}
@keyframes plat-slide{to{transform:translateX(-50%)}}
@media (max-width:640px){
  .plat__rows,.plat__track{gap:12px}
  .plat__track{padding-right:12px}
  .plat__row:not(:first-child) .plat__card{min-width:0;height:56px;padding:0 16px;gap:8px;font-size:14px}
  .plat__row:not(:first-child) .plat__ico{width:20px;height:20px}
  .plat__row:first-child .plat__card{min-width:0;height:66px;padding:0 20px;gap:10px;font-size:16px}
  .plat__row:first-child .plat__ico{width:24px;height:24px}
}
@media (prefers-reduced-motion:reduce){
  .plat__row{animation:none;width:auto;justify-content:center}
  .plat__track{flex-wrap:wrap;justify-content:center;padding-right:0}
  .plat__track[aria-hidden]{display:none}
  .plat__rows{-webkit-mask-image:none;mask-image:none;padding-inline:16px}
}
.hx-head{max-width:46rem;margin-bottom:clamp(36px,4.5vw,56px)}
.hx-title{font-size:clamp(1.85rem,3.3vw,2.75rem);font-weight:600;line-height:1.18;letter-spacing:-.02em;color:var(--navy-d)}
html[data-lang="zh"] .hx-title{letter-spacing:.01em;line-height:1.3}
.hx-title em{font-style:normal;color:var(--brand)}
.hx-sub{margin-top:16px;font-size:17px;line-height:1.8;color:var(--ink-2);max-width:38em}
.hx--navy .hx-title{color:var(--on-navy)}
.hx--navy .hx-sub{color:var(--on-navy-2)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* who we serve: two image panels */
.aud-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.aud{position:relative;isolation:isolate;min-height:560px;border-radius:14px;overflow:hidden;display:flex;align-items:flex-end;color:var(--on-navy)}
.aud__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.aud::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,oklch(0.330 0.062 250 / .05) 0%,oklch(0.330 0.062 250 / .55) 45%,oklch(0.25 0.05 250 / .94) 100%)}
.aud:hover .aud__img{transform:scale(1.035)}
.aud__body{padding:clamp(24px,3vw,40px);width:100%}
.aud__body h3{font-size:clamp(1.6rem,2.4vw,2.1rem);font-weight:600;letter-spacing:-.01em}
.aud__body>p{margin-top:8px;color:var(--on-navy-2);font-size:16px;line-height:1.7;max-width:30em}
.aud__facts{margin:22px 0 0;display:grid;gap:0;border-top:1px solid var(--rule-navy)}
.aud__facts div{display:grid;grid-template-columns:8.5em 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule-navy)}
.aud__facts dt{color:var(--on-navy-3);font-size:14px}
.aud__facts dd{margin:0;font-size:15px;color:var(--on-navy)}

/* solutions: diagnosis list */
.sol-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.sol-side{position:sticky;top:120px}
.sol-side .hx-head{margin-bottom:0}
.sol-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy-d)}
.sol{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:26px 0 28px;border-bottom:1px solid var(--line)}
.sol__t{font-size:21px;font-weight:600;color:var(--navy-d);letter-spacing:-.005em}
.sol__sym{font-size:17px;color:var(--ink);line-height:1.7}
.sol__fix{font-size:15px;color:var(--ink-2);line-height:1.75;padding-left:18px;position:relative}
.sol__fix::before{content:"";position:absolute;left:0;top:.75em;width:10px;height:2px;background:var(--ember)}
.sol__tags{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sol__tags li{font-size:12.5px;padding:4px 10px;border-radius:999px;background:var(--paper);color:var(--ink-2)}

/* channel matrix */
.cm-wrap{overflow-x:auto}
.cm{width:100%;border-collapse:collapse;min-width:560px}
.cm thead th{font-size:13px;font-weight:600;letter-spacing:.03em;color:var(--ink-3);text-align:center;padding:0 12px 14px;border-bottom:2px solid var(--navy-d)}
.cm thead th:first-child{text-align:left;padding-left:0}
.cm tbody th{text-align:left;font-weight:400;padding:16px 16px 16px 0;display:grid;gap:3px}
.cm__name{font-size:17px;font-weight:600;color:var(--navy-d)}
.cm__role{font-size:14px;color:var(--ink-2)}
.cm tbody tr{border-bottom:1px solid var(--line);transition:background .2s}
.cm tbody tr:hover{background:var(--paper)}
.cm__fit{text-align:center;width:160px}
.dot{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle}
.dot--2{background:var(--brand)}
.dot--1{border:2px solid var(--brand);background:linear-gradient(90deg,var(--brand) 50%,transparent 50%)}
.dot--0{width:14px;height:2px;border-radius:2px;background:oklch(0.386 0.068 250 / .25)}
.cm-legend{display:flex;flex-wrap:wrap;gap:22px;margin-top:18px;font-size:13px;color:var(--ink-2)}
.cm-legend span{display:inline-flex;align-items:center;gap:8px}

/* case showcase */
.hc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
/* Case card: screenshot on top, frosted info panel anchored to the bottom. On hover or
   keyboard focus the panel grows upward over the screenshot and reveals the figures.
   Touch screens and narrow layouts show everything, no hover needed. */
.hc{position:relative;display:block;height:470px;border-radius:14px;overflow:hidden;color:var(--ink);background:#eaf0f9;
  box-shadow:0 0 0 1px var(--line),0 24px 48px -32px oklch(0.25 0.05 250 / .55);transition:box-shadow .45s var(--ease)}
.hc:hover,.hc:focus-visible{box-shadow:0 0 0 1.5px var(--primary),0 36px 60px -30px rgb(23 105 224 / .45)}
.hc__shot{position:absolute;inset:0 0 auto 0;height:300px;display:block}
.hc__shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s var(--ease)}
.hc:hover .hc__shot img{transform:scale(1.03)}
.hc__panel{position:absolute;inset:auto 0 0 0;display:block;padding:20px 22px 22px;background:rgb(238 243 251 / .9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hc__tags{position:absolute;left:22px;right:22px;bottom:100%;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:8px}
.hc__tags i{font-style:normal;padding:5px 11px;border-radius:7px;background:#fff;color:#1f2733;font-size:13px;line-height:1.3;
  box-shadow:0 4px 12px -6px oklch(0.25 0.05 250 / .5)}
.hc__arrow{position:absolute;top:18px;right:20px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--navy-d);font-size:17px;opacity:0;transform:translateX(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.hc__name{display:block;padding-right:44px;font-size:24px;font-weight:600;line-height:1.3;color:var(--navy-d);transition:color .25s var(--ease)}
.hc__line{display:block;margin-top:6px;font-size:15px;color:var(--ink-2);line-height:1.6}
.hc__rows{display:grid;gap:8px;margin-top:14px}
.hc__row{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink-2)}
.hc__row b{flex:none;padding:2px 7px;border:1px solid var(--primary);border-radius:5px;background:#fff;color:var(--primary);font-size:13px;font-weight:500}
.hc__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.hc__more>span{overflow:hidden;min-height:0}
.hc__stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line);text-align:center}
.hc__stats b{display:block;font-size:25px;font-weight:700;line-height:1.15;letter-spacing:-.01em;color:#111a26;white-space:nowrap}
.hc__stats i{display:block;margin-top:5px;font-style:normal;font-size:13px;line-height:1.45;color:var(--ink-2)}
.hc:hover .hc__more,.hc:focus-visible .hc__more{grid-template-rows:1fr}
.hc:hover .hc__arrow,.hc:focus-visible .hc__arrow{opacity:1;transform:none}
.hc:hover .hc__name{color:var(--primary)}
@media (hover:none),(max-width:900px){
  .hc{height:auto}
  .hc__shot{position:static;height:auto}
  .hc__shot img{height:auto;aspect-ratio:16/10}
  .hc__panel{position:relative}
  .hc__more{grid-template-rows:1fr}
  .hc__arrow{opacity:1;transform:none}
}

/* process line: a real sequence */
.pl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;position:relative}
.pl::before{content:"";position:absolute;left:16px;right:16px;top:16px;height:1px;background:var(--rule-navy)}
.pl__step{position:relative}
.pl__n{display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:var(--navy-d);
  border:1px solid var(--signal);color:var(--signal);font-size:14px;font-weight:600;position:relative}
.pl__step h3{margin-top:18px;font-size:17px;font-weight:600;color:var(--on-navy)}
.pl__step p{margin-top:6px;font-size:14px;line-height:1.75;color:var(--on-navy-2)}

/* tools */
.tt{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:start}
.tt .hx-head{margin-bottom:24px}
.tt__gets{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:12px}
.tt__gets li{position:relative;padding-left:30px;font-size:17px;line-height:1.6;color:var(--ink)}
.tt__gets li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:9px;border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}
.tt__soon{background:var(--paper);border-radius:14px;padding:clamp(24px,3vw,36px)}
.tt__soon h3{font-size:15px;font-weight:600;color:var(--ink-2);margin-bottom:14px}
.tt__soon ul{list-style:none;margin:0;padding:0}
.tt__soon li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:16px}
.tt__soon p{margin-top:14px;font-size:13px;color:var(--ink-3)}

/* contact */
.lead__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,88px);align-items:start}
.lead__steps{margin:28px 0 0;padding:0;list-style:none;counter-reset:ls;display:grid;gap:14px}
.lead__steps li{counter-increment:ls;display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:baseline;color:var(--on-navy-2);font-size:16px}
.lead__steps li::before{content:counter(ls);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--signal);color:var(--signal);font-size:13px}
.lead__wx{margin:32px 0 0;display:flex;gap:16px;align-items:center}
.lead__wx .lead__qr{margin:0;width:112px;height:112px;border-radius:10px}
.lead__wx figcaption{color:var(--on-navy-2);font-size:14px}
#enquiry.lead__form{background:var(--surface);color:var(--ink);border-radius:16px;padding:clamp(24px,3vw,40px);margin:0;
  box-shadow:0 40px 80px -40px oklch(0.10 0.03 250 / .7)}
#enquiry.lead__form label{display:block;font-size:13.5px;letter-spacing:0;color:var(--ink-2)}
#enquiry.lead__form input,#enquiry.lead__form select,#enquiry.lead__form textarea{display:block;width:100%;margin-top:6px;padding:11px 12px;
  background:var(--surface);border:1px solid oklch(0.386 0.068 250 / .22);border-radius:8px;color:var(--ink);font:inherit;font-size:16px}
#enquiry.lead__form input:hover,#enquiry.lead__form textarea:hover{border-color:oklch(0.386 0.068 250 / .4)}
#enquiry.lead__form input:focus,#enquiry.lead__form select:focus,#enquiry.lead__form textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px oklch(0.588 0.080 249 / .18)}
#enquiry.lead__form select option{color:var(--ink)}
#enquiry.lead__form fieldset{border:0;padding:0;margin:18px 0 0}
#enquiry.lead__form legend{font-size:13.5px;color:var(--ink-2);margin-bottom:8px;font-weight:600}
#enquiry .f1{margin:0}
#enquiry .f2{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-top:18px}
#enquiry .f3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 16px}
#enquiry .lead__msg{margin-top:18px}
#enquiry .lead__more{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
#enquiry .lead__more summary{cursor:pointer;font-size:14px;color:var(--brand);font-weight:600}
#enquiry .lead__more .f2{margin-top:14px}
#enquiry .lead__submit{margin-top:24px;background:var(--navy-d);border-color:var(--navy-d);color:var(--on-navy)}
#enquiry .lead__submit:hover{background:var(--brand);border-color:var(--brand)}
#enquiry .lead__note{color:var(--brand)}
#enquiry .lead__fallback{color:var(--ember)}

@media (max-width:1024px){
  .sol-grid,.tt,.lead__in{grid-template-columns:minmax(0,1fr)}
  .sol-side{position:static}
  .pl{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px}
  .pl::before{display:none}
  .hc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .aud-grid{grid-template-columns:1fr}
  .aud{min-height:480px}
  .aud__facts div{grid-template-columns:6.5em 1fr}
  .hc-grid{grid-template-columns:1fr}
  .pl{grid-template-columns:1fr;gap:0}
  .pl__step{display:grid;grid-template-columns:33px 1fr;column-gap:16px;padding-bottom:26px;position:relative}
  .pl__step::before{content:"";position:absolute;left:16px;top:33px;bottom:0;width:1px;background:var(--rule-navy)}
  .pl__step:last-child::before{display:none}
  .pl__step h3{margin-top:5px}
  .pl__step p{grid-column:2}
  .cm{min-width:0}
  .cm tbody th{padding-right:8px}
  .cm thead th{padding-inline:4px}
  .cm__fit{width:64px}
  #enquiry .f2,#enquiry .f3{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.aud__img,.hc,.hc__more,.hc__arrow,.hc__shot img{transition:none}}

/* footer: one column per menu group */
.ft--slim .ft__cols{grid-template-columns:repeat(4,minmax(0,1fr))}
.ft--slim .ft__cols a[href^="tel:"],.ft--slim .ft__cols .ft__muted{white-space:nowrap}
@media (max-width:640px){.ft--slim .ft__cols{grid-template-columns:1fr 1fr}.ft--slim .ft__cols>div:last-child{grid-column:1/-1}}

/* ═══════════ free diagnosis page (dx) ═══════════ */
.dx-hero{background:var(--navy-d);color:var(--on-navy);padding:calc(80px + clamp(48px,7vw,104px)) 0 clamp(64px,8vw,112px);position:relative;isolation:isolate;overflow:hidden}
.dx-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(900px 480px at 85% -10%, oklch(0.802 0.085 205 / .16), transparent 62%),
    repeating-linear-gradient(180deg, transparent 0 75px, oklch(0.972 0.008 80 / .045) 75px 76px)}
.dx-hero__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,96px);align-items:center}
.dx-hero h1{font-size:clamp(2.3rem,4.6vw,3.6rem);font-weight:600;line-height:1.15;letter-spacing:-.015em}
html[data-lang="zh"] .dx-hero h1{letter-spacing:.02em}
.dx-hero__lede{margin-top:20px;font-size:18px;line-height:1.8;color:var(--on-navy-2);max-width:32em}
.dx-hero .pg-ctas .btn--solid{color:var(--on-primary)}
.dx-sum{background:oklch(0.972 0.008 80 / .06);border:1px solid var(--rule-navy);border-radius:16px;padding:clamp(24px,3vw,32px)}
.dx-sum h2{font:600 12.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--signal);margin-bottom:14px}
.dx-sum ul{list-style:none;margin:0;padding:0}
.dx-sum li{position:relative;padding:12px 0 12px 28px;border-top:1px solid var(--rule-navy);font-size:15.5px;color:var(--on-navy)}
.dx-sum li:first-child{border-top:0}
.dx-sum li::before{content:"";position:absolute;left:2px;top:1.15em;width:12px;height:7px;border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg)}
.dx-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--navy-d)}
.dx-grid li{padding:26px 28px 28px 0;border-bottom:1px solid var(--line)}
.dx-grid li:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--line)}
.dx-grid h3{font-size:18px;font-weight:600;color:var(--navy-d)}
.dx-grid p{margin-top:6px;font-size:15px;line-height:1.7;color:var(--ink-2)}
.dx-limit{margin-top:22px;font-size:14px;color:var(--ink-3);max-width:48em}
.dx-fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,96px)}
.dx-fit .hx-title{margin-bottom:24px;font-size:clamp(1.5rem,2.4vw,2rem)}
.dx-gets{margin:0}
.dx-who{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy-d)}
.dx-who li{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
.dx-who strong{font-size:17px;color:var(--navy-d)}
.dx-who span{font-size:15px;color:var(--ink-2)}
#enquiry .dx-f{margin-top:18px}
@media (max-width:1024px){.dx-hero__in{grid-template-columns:minmax(0,1fr)}.dx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dx-grid li,.dx-grid li:not(:nth-child(3n+1)){padding:22px 20px 24px 0;border-left:0}
  .dx-grid li:nth-child(2n){padding-left:20px;border-left:1px solid var(--line)}}
@media (max-width:640px){.dx-grid{grid-template-columns:1fr}.dx-grid li:nth-child(2n){padding-left:0;border-left:0}.dx-fit{grid-template-columns:1fr}}
/* faq: heading left, questions right */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-grid .faq{margin:0;max-width:none;gap:0;border-top:2px solid var(--navy-d)}
.faq-grid .faq__item{padding:0;border-bottom:1px solid var(--line)}
.faq-grid .faq__item summary{list-style:none;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-size:17px;font-weight:600;color:var(--navy-d)}
.faq-grid .faq__item summary::-webkit-details-marker{display:none}
.faq-grid .faq__item summary::after{content:"+";flex:none;color:var(--brand);font-size:22px;line-height:1;font-weight:400}
.faq-grid .faq__item[open] summary::after{content:"–"}
.faq-grid .faq__item p{margin:-4px 0 20px;font-size:15.5px;line-height:1.8;color:var(--ink-2);max-width:44em}
@media (max-width:1024px){.faq-grid{grid-template-columns:minmax(0,1fr)}}

/* ═══════════ solution / channel detail pages (sx) ═══════════ */
.sx-hero{background:var(--navy-d);color:var(--on-navy);padding:calc(80px + clamp(44px,6vw,96px)) 0 clamp(56px,7vw,96px);position:relative;isolation:isolate;overflow:hidden}
.sx-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(900px 480px at 88% -10%, oklch(0.802 0.085 205 / .14), transparent 62%),
    repeating-linear-gradient(180deg, transparent 0 75px, oklch(0.972 0.008 80 / .045) 75px 76px)}
.sx-crumb{font-size:13.5px;color:var(--on-navy-3);margin-bottom:18px}
.sx-crumb a{color:var(--on-navy-2)}
.sx-crumb a:hover{color:var(--signal)}
.sx-hero h1{font-size:clamp(2.2rem,4.4vw,3.4rem);font-weight:600;line-height:1.18;letter-spacing:-.015em;max-width:18em}
html[data-lang="zh"] .sx-hero h1{letter-spacing:.02em}
.sx-hero h1 em{font-style:normal;color:var(--signal)}
.sx-hero__lede{margin-top:20px;font-size:18px;line-height:1.85;color:var(--on-navy-2);max-width:40em}
.sx-hero .pg-ctas .btn--solid{color:var(--on-primary)}
.sx-facts{margin:40px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule-navy);max-width:960px}
.sx-facts div{padding:16px 24px 0 0}
.sx-facts div+div{padding-left:24px;border-left:1px solid var(--rule-navy)}
.sx-facts dt{font-size:13px;color:var(--on-navy-3)}
.sx-facts dd{margin:4px 0 0;font-size:15.5px;color:var(--on-navy)}
.sx-sym{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,72px);border-top:2px solid var(--navy-d)}
.sx-sym li{padding:24px 0 26px;border-bottom:1px solid var(--line)}
.sx-sym h3{font-size:18.5px;font-weight:600;color:var(--navy-d)}
.sx-sym p{margin-top:8px;font-size:15.5px;line-height:1.8;color:var(--ink-2)}
.sx-why{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,88px);align-items:start}
.sx-prose{max-width:44em}
.sx-prose p{font-size:16.5px;line-height:1.95;color:var(--ink);margin:0 0 18px}
.sx-prose h3{font-size:19px;font-weight:600;color:var(--navy-d);margin:30px 0 10px}
.sx-prose ul{margin:0 0 18px;padding-left:1.2em;line-height:1.9}
.sx-prose strong{color:var(--navy-d)}
.sx-points{position:sticky;top:110px;background:var(--surface);border-radius:14px;padding:clamp(22px,3vw,30px);box-shadow:0 0 0 1px var(--line)}
.sx-points h3{font:600 12.5px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.sx-points ul{list-style:none;margin:0;padding:0}
.sx-points li{padding:12px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.7;color:var(--ink)}
.sx-points li:first-child{border-top:0}
.sx-cite{font-size:.7em;margin-left:1px}
.sx-cite a{color:var(--brand);font-weight:600}
.sx-steps{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy-d)}
.sx-step{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding:26px 0;border-bottom:1px solid var(--line)}
.sx-step__n{font:600 15px/1.6 var(--sans);color:var(--ember);letter-spacing:.06em}
.sx-step h3{font-size:19px;font-weight:600;color:var(--navy-d)}
.sx-step p{margin-top:8px;font-size:15.5px;line-height:1.8;color:var(--ink-2);max-width:46em}
.sx-step__out{display:flex;gap:10px;align-items:baseline;color:var(--ink)!important}
.sx-step__out span{flex:none;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--paper);color:var(--brand)}
.sx-cmp{width:100%;border-collapse:collapse;min-width:640px}
.sx-cmp thead th{font:600 13px/1.3 var(--sans);letter-spacing:.04em;color:var(--ink-3);text-align:left;padding:0 16px 14px;border-bottom:2px solid var(--navy-d)}
.sx-cmp thead th.is-ours{color:var(--brand)}
.sx-cmp tbody th{text-align:left;font-size:15.5px;font-weight:600;color:var(--navy-d);padding:18px 16px 18px 0;width:20%;vertical-align:top}
.sx-cmp td{padding:18px 16px;font-size:15px;line-height:1.75;color:var(--ink-2);vertical-align:top;width:40%}
.sx-cmp td:last-child{color:var(--ink);background:oklch(0.588 0.080 249 / .05)}
.sx-cmp tbody tr{border-bottom:1px solid var(--line)}
.sx-deliver{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(24px,4vw,56px)}
.sx-dg h3{font-size:17px;font-weight:600;color:var(--navy-d);margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--navy-d)}
.sx-dg .tt__gets li{font-size:15.5px}
.sx-ch{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,4vw,48px);border-top:2px solid var(--navy-d)}
.sx-ch a{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid var(--line)}
.sx-ch strong{font-size:16.5px;color:var(--navy-d)}
.sx-ch span{font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.sx-ch a:hover strong{color:var(--brand)}
.sx-rel{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.sx-rel a{position:relative;display:grid;gap:6px;padding:22px 48px 22px 22px;border-radius:12px;background:var(--surface);box-shadow:0 0 0 1px var(--line);transition:box-shadow .25s var(--ease)}
.sx-rel a:hover{box-shadow:0 0 0 1px var(--brand)}
.sx-rel strong{font-size:17px;color:var(--navy-d)}
.sx-rel span{font-size:14.5px;color:var(--ink-2);line-height:1.6}
.sx-rel i{position:absolute;right:20px;top:22px;font-style:normal;color:var(--brand)}
.sx-sources{padding-block:clamp(40px,5vw,64px)}
.sx-sources__t{font-size:15px;font-weight:600;color:var(--ink-2);margin-bottom:14px}
.sx-sources ol{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:60em}
.sx-sources li{display:grid;grid-template-columns:28px 1fr;font-size:13.5px;line-height:1.6;color:var(--ink-2);scroll-margin-top:100px}
.sx-src__n{color:var(--ink-3)}
.sx-sources a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.sx-sources li>a{grid-column:2}
.sx-src__pub{grid-column:2;color:var(--ink-3)}
.sx-cta__in{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between}
.sx-cta .hx-head{margin:0}
.sx-cta .btn--solid{color:var(--on-primary)}
@media (max-width:1024px){.sx-why{grid-template-columns:minmax(0,1fr)}.sx-points{position:static}.sx-ch,.sx-rel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .sx-facts{grid-template-columns:1fr}.sx-facts div+div{padding-left:0;border-left:0;border-top:1px solid var(--rule-navy);margin-top:14px}
  .sx-sym,.sx-ch,.sx-rel{grid-template-columns:1fr}
  .sx-step{grid-template-columns:44px minmax(0,1fr)}
  .sx-cmp{min-width:560px}
}
.sol__more{justify-self:start;margin-top:6px;font-size:14px;font-weight:600;color:var(--brand)}
.sol__more:hover{text-decoration:underline;text-underline-offset:3px}
/* zh headlines: break at punctuation, not mid-word, where there is room */
@media (min-width:641px){html[data-lang="zh"] .sx-hero h1,html[data-lang="zh"] .hx-title{word-break:keep-all;overflow-wrap:anywhere}}
.sx-hero h1,.hx-title{text-wrap:balance}

/* ═══════════ energy pass: primary #1769E0, cyan #22C7F2 ═══════════
   Primary blue carries CTAs, links and active states. The blue→cyan gradient
   is reserved for the hero/SERP and a few interactive moments. */
.nav__cta:hover{background:var(--primary-h);border-color:var(--primary-h)}
.dock__btn{background:var(--primary);color:var(--on-primary);box-shadow:var(--glow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.dock__btn:hover{background:var(--primary-h);transform:translateY(-2px)}
.mm__feat-go i{background:var(--grad);color:var(--on-primary);box-shadow:0 8px 20px -8px rgb(34 199 242 / .65)}
.mm__feat:hover{box-shadow:0 0 0 1px rgb(34 199 242 / .35),0 30px 56px -26px oklch(0.15 0.04 250 / .8)}
@media (min-width:1101px){
  .mm__btn{position:relative}
  .mm__btn::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:var(--grad);
    transform:scaleX(0);transition:transform .3s var(--ease)}
  .mm__btn:hover::after,.mm__btn[aria-expanded="true"]::after{transform:scaleX(1)}
  .mm__col a{transition:transform .25s var(--ease)}
  .mm__col a:hover{transform:translateX(3px)}
}

/* navy grounds get a blue lift so they read deep, not flat */
.hx--navy,.pg-hero{background:radial-gradient(900px 480px at 100% 0,rgb(23 105 224 / .28),transparent 70%),var(--navy-d)}

/* hero + SERP: the one place the gradient and motion are allowed to be loud */
.sh-hero::before{background:radial-gradient(1000px 560px at 88% -10%,rgb(23 105 224 / .46),transparent 64%),
    radial-gradient(640px 420px at 64% 38%,rgb(34 199 242 / .12),transparent 70%),
    repeating-linear-gradient(180deg,transparent 0 75px,oklch(0.972 0.008 80 / .05) 75px 76px)}
.serp-wrap::before{content:"";position:absolute;inset:-10% -6%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgb(34 199 242 / .26),rgb(23 105 224 / .2) 48%,transparent 78%);filter:blur(24px);
  animation:sh-breathe 9s ease-in-out infinite alternate}
@keyframes sh-breathe{from{opacity:.6;transform:scale(.95)}to{opacity:1;transform:scale(1.04)}}
.serp__item.is-you::before{background:#fff;
  box-shadow:0 0 0 2px #1a73e8,0 0 0 6px rgb(34 199 242 / .16),0 16px 32px -18px rgb(23 105 224 / .65)}
.serp__item.is-you .serp__fav{background:var(--grad);color:var(--on-primary);border-color:transparent}
.serp__badge b{background:linear-gradient(118deg,#1769E0,#1A9BEA)}

/* solution rows: the row answers the pointer */
.sol{position:relative}
.sol::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.sol:hover::after{transform:scaleX(1)}
.sol__t{transition:color .25s var(--ease)}
.sol:hover .sol__t{color:var(--primary)}
.sol__fix::before{transform-origin:left;transition:transform .35s var(--ease),background .35s var(--ease)}
.sol:hover .sol__fix::before{background:var(--primary);transform:scaleX(1.6)}
.sol__tags li{transition:background .25s var(--ease),color .25s var(--ease)}
.sol:hover .sol__tags li{background:rgb(23 105 224 / .08);color:var(--primary)}


/* process line + matrix */
.pl::before{background:linear-gradient(90deg,rgb(23 105 224 / .8),rgb(34 199 242 / .45))}
.pl__n{transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.pl__step:hover .pl__n{background:var(--grad);color:var(--on-primary);border-color:transparent;box-shadow:0 0 0 6px rgb(34 199 242 / .14)}
.cm__name{transition:color .2s var(--ease)}
.cm tbody tr:hover .cm__name{color:var(--primary)}
a.card{transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
a.card:hover{transform:translateY(-3px);box-shadow:0 18px 36px -24px rgb(23 105 224 / .45)}

@media (prefers-reduced-motion:reduce){
  .serp-wrap::before{animation:none}
  .btn:hover,.dock__btn:hover,.mm__col a:hover,.hc:hover .hc__shot img,a.card:hover{transform:none}
}

/* ==========================================================================
   Light world. The page is mainly white; navy is kept for the footer and the
   deliberate dark bands (.hx--navy). Nav and heroes re-map the reversed
   tokens locally instead of restyling every child rule, so anything written
   against --on-navy / --signal inside them turns dark-on-white for free.
   Cyan fails as text on white (~2:1), so --signal becomes the brand blue here.
   Coral is the third colour: one warm underline, never a fill or body text.
   ========================================================================== */
:root{
  --ink-l:   oklch(0.268 0.030 256);
  --coral:   #E8836B;
}
.nav,.sh-hero,.pg-hero,.dx-hero,.sx-hero{
  --on-navy:   var(--ink-l);
  --on-navy-2: oklch(0.430 0.022 256);
  --on-navy-3: oklch(0.520 0.018 256);
  --rule-navy: oklch(0.300 0.050 256 / .12);
  --signal:    var(--primary);
  --ember-l:   var(--ember);
}
/* The menu feature card stays a navy surface inside the light nav, so it
   takes the reversed tokens back. */
.nav .mm__feat{
  --on-navy:   oklch(0.972 0.008 80);
  --on-navy-2: oklch(0.972 0.008 80 / .74);
  --signal:    oklch(0.80 0.13 215);
}

/* Liquid glass: a floating capsule of blue-tinted glass. Strong blur and
   saturation, a bright rim lit from the top-left, an inner glow and a soft
   drop shadow. Chromium also bends what is behind it through #lg-refract
   (layout.mjs); browsers without SVG backdrop filters keep the first line.
   It stays fixed at the top while scrolling. */
.nav{inset:12px 12px auto;max-width:calc(var(--wrap) + 24px);margin-inline:auto;border-radius:24px;
  background:linear-gradient(135deg,oklch(0.990 0.018 259 / .58),oklch(0.955 0.035 259 / .34) 60%,oklch(0.975 0.025 230 / .44));
  border:1px solid rgb(255 255 255 / .55);
  backdrop-filter:blur(16px) saturate(200%) brightness(1.06);-webkit-backdrop-filter:blur(16px) saturate(200%) brightness(1.06);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .95),inset 0 -1px 0 oklch(0.55 0.10 259 / .18),inset 0 0 22px rgb(255 255 255 / .35),
    0 12px 32px -14px oklch(0.300 0.060 256 / .35),0 2px 6px -2px oklch(0.300 0.060 256 / .12);
  transition:background .35s var(--ease),box-shadow .35s var(--ease)}
@supports (backdrop-filter:url(#x)) and (not (-webkit-hyphens:none)){
  .nav{backdrop-filter:url(#lg-refract) blur(16px) saturate(200%) brightness(1.06)}
}
.nav::before{inset:0;height:auto;border:0;border-radius:inherit;
  background:radial-gradient(120% 140% at 0% 0%,rgb(255 255 255 / .55),transparent 42%),
    radial-gradient(80% 120% at 100% 100%,oklch(0.80 0.10 230 / .22),transparent 55%),
    linear-gradient(rgb(255 255 255 / .35),transparent 55%)}
.nav::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(135deg,rgb(255 255 255 / .95),rgb(255 255 255 / .1) 35%,oklch(0.70 0.12 250 / .35) 70%,rgb(255 255 255 / .7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.nav.is-solid{background:linear-gradient(135deg,oklch(0.985 0.022 259 / .72),oklch(0.950 0.038 259 / .52) 60%,oklch(0.970 0.028 230 / .6));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .95),inset 0 -1px 0 oklch(0.55 0.10 259 / .2),inset 0 0 22px rgb(255 255 255 / .35),
    0 16px 40px -16px oklch(0.300 0.060 256 / .42),0 2px 6px -2px oklch(0.300 0.060 256 / .14)}
@media (prefers-reduced-motion:reduce){.nav{transition:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav,.nav.is-solid{background:oklch(0.975 0.020 259 / .97)}
}
@media (max-width:640px){.nav{inset:8px 8px auto;border-radius:20px}}
.mm__btn:hover{background:oklch(0.300 0.050 256 / .06)}
.mm__btn[aria-expanded="true"]{background:oklch(0.300 0.050 256 / .09)}
.nav__cta{color:var(--on-primary)}
@media (max-width:1100px){
  .nav .nav__menu{background:var(--surface);border-top:1px solid var(--rule-navy);border-radius:0 0 22px 22px;
    box-shadow:0 24px 40px -24px oklch(0.300 0.050 256 / .3)}
}

/* heroes on white */
.sh-hero,.pg-hero,.dx-hero,.sx-hero{background:var(--surface)}
.sh-hero::before{background:radial-gradient(900px 520px at 90% -10%,rgb(34 199 242 / .16),transparent 62%),
  radial-gradient(700px 480px at 70% 110%,rgb(23 105 224 / .10),transparent 60%)}
.dx-hero::before,.sx-hero::before{background:radial-gradient(900px 480px at 100% 0,rgb(34 199 242 / .14),transparent 70%)}
.sh-hero h1 em,.pg-hero h1 em,.sx-hero h1 em{color:var(--primary)}
.sh-ctas .btn,.pg-ctas .btn,.dx-hero .btn,.sx-hero .btn{border-color:oklch(0.300 0.050 256 / .22)}
.sh-ctas .btn--solid,.pg-ctas .btn--solid,.dx-hero .btn--solid,.sx-hero .btn--solid{color:var(--on-primary);border-color:var(--primary)}
.serp-stat{box-shadow:0 18px 40px -28px oklch(0.300 0.050 256 / .35)}

/* Team page (content/pages/team.yaml): member cards and the accountability matrix. */
.tm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:clamp(20px,3vw,32px)}
.tm-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.tm-card__img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 25%;background:var(--paper)}
.tm-card__b{padding:22px 24px 26px}
.tm-card__p{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ember)}
.tm-card h3{margin-top:6px;font-size:21px;font-weight:600;line-height:1.3;color:var(--navy-d)}
.tm-card__r{margin-top:4px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.tm-card h4{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.tm-card h4 + p{margin-top:6px;font-size:15px;line-height:1.7;color:var(--ink)}
.tm-tags{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tm-tags li{padding:5px 11px;border-radius:999px;background:var(--paper);font-size:13px;line-height:1.4;color:var(--navy-d)}
.tm-mx{width:100%;border-collapse:collapse;min-width:820px}
.tm-mx thead th{font:600 13px/1.3 var(--sans);letter-spacing:.04em;color:var(--ink-3);text-align:left;padding:0 16px 14px;border-bottom:2px solid var(--navy-d)}
.tm-mx tbody tr{border-bottom:1px solid var(--line)}
.tm-mx th[scope="row"]{text-align:left;font-size:15.5px;font-weight:600;color:var(--navy-d);padding:18px 16px 18px 0;vertical-align:top}
.tm-mx td{padding:18px 16px;font-size:15px;line-height:1.65;color:var(--ink-2);vertical-align:top}
.tm-mx td strong{display:block;color:var(--ink);font-weight:600}
.tm-mx td span{display:block;font-size:13.5px;color:var(--ink-3)}
.tm-mx td:last-child{color:var(--ink)}