/* ============================================================================
PI NETWORK - v3 premium layer (2026-11-13). Loaded AFTER v2.css on every page.
Pure presentation layer: no markup or copy changes are required.
Direction: quiet, editorial, confident. Type and whitespace carry the page;
hairlines replace card boxes; one deep-pine brand moment per screen.
References applied: taste-skill (Leonxlnx) rules for a service business and
UI UX Pro Max "Trust & Authority" pattern + pre-delivery checklist.
To roll back: remove the v3.css (and the Geist font ) per page.
============================================================================ */
:root{
--v-bg:#FFFFFF;--v-bg2:#F4F6F1;--v-ink:#0D2018;--v-ink2:#4A5B52;--v-line:#E1E7E0;
--v-brand:#406448;--v-brand-deep:#2C4A31;--v-lime:#99CB52;--v-lime-soft:#EDF5E1;--v-tint:#E9F0EA;
--v-dark:#0E2219;
--v-r:16px;--v-r-sm:10px;--v-wrap:1200px;
--v-font:"Geist","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
--v-serif:var(--v-font);
--v-mono:var(--v-font);
--v-shadow:0 1px 2px rgba(13,32,24,.04),0 16px 40px -12px rgba(13,32,24,.12);
--v-ease:cubic-bezier(.2,.7,.2,1);
--v3-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--v3-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
body.v2,body.lite{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* ---------- type ---------- */
.v2 h1,.v2 h2,.v2 h3,.v2 h4{font-weight:500;letter-spacing:-.025em}
.v2 h1{font-size:clamp(40px,5.6vw,76px);line-height:1.02;letter-spacing:-.04em}
.v2 h2{font-size:clamp(30px,3.7vw,50px);line-height:1.06;letter-spacing:-.035em}
.v2 h3{font-size:21px;line-height:1.25;letter-spacing:-.018em}
html[lang^="zh"] .v2 h1,html[lang^="zh"] .v2 h2,html[lang^="zh"] .v2 h3,html[lang^="zh"] .v2 h4{font-weight:600;letter-spacing:-.01em}
html[lang^="zh"] .v2 h1{line-height:1.14}
html[lang^="zh"] .v2 h2{line-height:1.2}
body.v2{line-height:1.6}
.v2 .kick{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;font:500 13px/1 var(--v-mono);letter-spacing:.01em;text-transform:none;color:var(--v-brand)}
.v2 .kick::before{content:"";width:22px;height:1px;background:currentColor;opacity:.55}
html[lang^="zh"] .v2 .kick{font-family:var(--v-font);letter-spacing:.06em}
/* ---------- header ---------- */
.nv:not(.nv--dark){background:rgba(255,255,255,.84);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);border-bottom-color:rgba(13,32,24,.08)}
.nv-wrap{min-height:72px}
.nv-menu a,.nv-menu button{font-weight:450;letter-spacing:-.005em;transition:background .2s,color .2s}
.nv-right>a{font-weight:450;transition:background .2s,color .2s}
.nv-lang{border-radius:999px!important}
.nv-sub{border-radius:16px;padding:10px;box-shadow:var(--v-shadow)}
/* ---------- buttons ---------- */
.b{min-height:50px;padding:0 24px;border-radius:999px;font:500 15.5px/1 var(--v-font);letter-spacing:-.005em;transition:background .25s var(--v-ease),border-color .2s,color .2s,transform .2s var(--v-ease),box-shadow .25s}
.b:active{transform:translateY(1px) scale(.985)}
.b-primary{background:var(--v-dark);color:#fff}
.b-primary:hover{background:var(--v-brand);color:#fff}
.b-primary::after{content:"";flex:0 0 auto;width:15px;height:15px;background:currentColor;-webkit-mask:var(--v3-arrow) center/contain no-repeat;mask:var(--v3-arrow) center/contain no-repeat;transition:transform .25s var(--v-ease)}
.b-primary:hover::after{transform:translateX(3px)}
.b-ghost{background:transparent;border-color:rgba(13,32,24,.18);color:var(--v-ink)}
.b-ghost:hover{border-color:var(--v-ink);color:var(--v-ink);background:rgba(13,32,24,.03)}
.b-sm{min-height:42px;padding:0 18px;font-size:14.5px}
.nv-right>a.b-primary:hover{background:var(--v-brand)}
.pill{border:0;background:none;padding:0;gap:12px;font:500 13px/1.4 var(--v-mono);color:var(--v-ink2);border-radius:0}
.pill b{padding:6px 9px;border-radius:5px;background:var(--v-lime);color:var(--v-ink);font-weight:500;font-size:12px;letter-spacing:.01em}
html[lang^="zh"] .pill{font-family:var(--v-font)}
/* ---------- sections ---------- */
.v2 .sec{padding:clamp(72px,9vw,136px) 0}
.v2 .sh{max-width:760px;margin-bottom:clamp(36px,5vw,64px)}
.v2 .sh p{margin-top:18px;font-size:19px;line-height:1.55;max-width:58ch}
@media(min-width:1000px){
.v2 .sec>.wrap>.sh:not(.center){max-width:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.v2 .sec>.wrap>.sh:not(.center)>.kick{grid-column:1/-1;justify-self:start}
.v2 .sec>.wrap>.sh:not(.center)>h2{grid-column:1/8}
.v2 .sec>.wrap>.sh:not(.center)>p{grid-column:8/-1;margin:0;padding-bottom:6px;font-size:17.5px}
}
.v2 .card{padding:28px;border-color:var(--v-line);transition:border-color .25s,box-shadow .25s,transform .25s var(--v-ease),background .25s}
.v2 a.card:hover{border-color:rgba(13,32,24,.5);box-shadow:var(--v-shadow);transform:translateY(-2px)}
.v2 .card .more{font-weight:500}
.v2 .ico{background:var(--v-bg2);border-radius:12px;color:var(--v-brand)}
.v2 .tag{padding:5px 9px;border:1px solid var(--v-line);background:none;color:var(--v-ink2);font:500 11.5px/1 var(--v-mono);letter-spacing:0;transition:border-color .2s,color .2s}
.v2 a.tag:hover{border-color:var(--v-ink);color:var(--v-ink)}
html[lang^="zh"] .v2 .tag{font-family:var(--v-font);font-size:12px}
/* ---------- hero: editorial split, then the system panel rising from the fold ---------- */
.v2 .hh{padding:clamp(56px,7.5vw,108px) 0 0;text-align:left}
.v2 .hh .pill{margin-bottom:28px;max-width:none}
.v2 .hh h1{max-width:none;margin:0}
.v2 .hh h1 em{font-family:var(--v-serif);font-style:italic;font-weight:400;font-size:1.07em;letter-spacing:-.02em;color:var(--v-brand)}
html[lang^="zh"] .v2 .hh h1 em{font-style:normal;font-weight:600;font-size:1em;letter-spacing:0}
.v2 .hh .lead{margin:24px 0 0;max-width:560px;font-size:18.5px;line-height:1.55}
.v2 .hh .actions{justify-content:flex-start;margin-top:28px}
.v2 .hh .tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:clamp(40px,5vw,68px) 0 0;border-top:1px solid var(--v-line);font-size:15px;color:var(--v-ink)}
.v2 .hh .tr li{display:flex;align-items:baseline;gap:10px;padding:18px 24px 0 0;line-height:1.45}
.v2 .hh .tr li+li{padding-left:24px;border-left:1px solid var(--v-line)}
.v2 .hh .tr li::before{flex:0 0 auto;transform:translateY(-2px)}
@media(min-width:1000px){
.v2 .hh>.wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto auto;column-gap:24px}
.v2 .hh .pill{grid-column:1/-1;grid-row:1;justify-self:start}
.v2 .hh h1{grid-column:1/9;grid-row:2/4}
.v2 .hh .lead{grid-column:9/-1;grid-row:2;align-self:end;margin:0;max-width:none}
.v2 .hh .actions{grid-column:9/-1;grid-row:3;padding-bottom:10px}
.v2 .hh .tr{grid-column:1/-1;grid-row:4}
}
@media(max-width:760px){
.v2 .hh .tr{display:flex;flex-direction:column;align-items:stretch;max-width:none;margin-left:0;margin-right:0;gap:0}
.v2 .hh .tr li{padding:14px 0;border-left:0!important;padding-left:0!important;border-bottom:1px solid var(--v-line);text-align:left}
.v2 .hh .tr li:last-child{border-bottom:0}
.v2 .hh .tr li::before{margin-top:0}
.v2 .hh .actions .b{flex:1 1 100%}
}
.v2 .hh-visual{max-width:calc(var(--v-wrap) + 0px);margin:clamp(40px,5vw,64px) auto 0;padding:0 24px}
.v2 .hh-visual::before{display:none}
.v2 .sitemap{border:0;border-radius:24px;background:radial-gradient(110% 80% at 50% -20%,#21483280 0%,transparent 60%),var(--v-dark);box-shadow:0 44px 80px -44px rgba(13,32,24,.55)}
.v2 .sitemap .nd{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.17);stroke-width:1}
.v2 .sitemap .nd-t{fill:#fff;font:500 15px var(--v-font)}
.v2 .sitemap .nd-s{fill:#9FB8AA;font:400 12.5px var(--v-font)}
.v2 .sitemap .lab{fill:#9FB8AA;font:500 11px var(--v-mono);letter-spacing:.1em}
.v2 .sitemap .dot{fill:var(--v-lime)}
.v2 .sitemap .ln{stroke:var(--v-lime);stroke-opacity:.8;stroke-width:1.3;stroke-dasharray:1000;stroke-dashoffset:0}
.v2 .sitemap rect[fill="#102A22"]{fill:var(--v-lime)}
.v2 .sitemap circle[r="6"]{fill:var(--v-ink)}
.v2 .sitemap text[style*="fill:#fff"]{fill:#0D2018!important;font-family:var(--v-font)!important;font-weight:600!important}
.v2 .sitemap text[style*="fill:#C9DBD0"]{fill:#2C4A31!important;font-family:var(--v-font)!important}
.v2 .sitemap text[style*="fill:#99CB52"]{fill:#0D2018!important;font-family:var(--v-mono)!important;font-weight:500!important}
.v2 .hh-cap{margin:18px 0 0;font-size:14px;text-align:left;color:var(--v-ink2)}
.v2 .hh-after{height:clamp(56px,7vw,104px);background:none}
@media(max-width:700px){
.v2 .hh-list{border:0;border-radius:20px;padding:22px;background:var(--v-dark)}
.v2 .hh-list li{border-top-color:rgba(255,255,255,.13);color:#9FB8AA}
.v2 .hh-list li b{color:#fff;font-weight:500}
.v2 .hh-list li.dark{background:var(--v-lime);color:#2C4A31;border-radius:12px}
.v2 .hh-list li.dark b{color:#0D2018;font-weight:600}
}
/* the hero enters once on load */
@media(prefers-reduced-motion:no-preference){
@keyframes v3rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes v3draw{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
.v2 .hh .pill,.v2 .hh h1,.v2 .hh .lead,.v2 .hh .actions,.v2 .hh .tr,.v2 .hh-visual{animation:v3rise .8s var(--v-ease) both}
.v2 .hh h1{animation-delay:.05s}.v2 .hh .lead{animation-delay:.14s}.v2 .hh .actions{animation-delay:.2s}.v2 .hh .tr{animation-delay:.28s}.v2 .hh-visual{animation-delay:.3s;animation-duration:1s}
.v2 .sitemap .ln{animation:v3draw 1.9s .7s var(--v-ease) both}
}
/* ---------- home: featured work ---------- */
.v2 .pj{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px}
@media(max-width:900px){.v2 .pj{grid-template-columns:1fr}}
.v2 .pj-lead{position:relative;display:flex;border:0;border-radius:24px;background:var(--v-dark);overflow:hidden}
.v2 .pj-lead::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 55% at 88% 0%,rgba(153,203,82,.24),transparent 62%);pointer-events:none}
.v2 .pj-lead .ph{display:none}
.v2 .pj-lead .body{position:relative;flex:1;justify-content:flex-end;gap:18px;min-height:clamp(380px,36vw,480px);padding:clamp(28px,3.4vw,48px)}
.v2 .pj-lead h3{color:#fff;font-size:clamp(26px,2.7vw,38px);line-height:1.1;letter-spacing:-.032em;max-width:20ch}
.v2 .pj-lead p{color:#B9CCC0;font-size:16.5px;max-width:54ch}
.v2 .pj-lead .pj-meta{padding-top:18px;border-top:1px solid rgba(255,255,255,.14);color:#8FA99B;font:400 12.5px/1.7 var(--v-mono)}
.v2 .pj-lead .tags{margin-bottom:auto}
.v2 .pj-lead .tag{border-color:rgba(153,203,82,.4);color:var(--v-lime)}
.v2 .pj-lead .more{display:inline-flex;align-items:center;gap:8px;margin-top:4px;color:var(--v-lime)}
.v2 a.pj-lead:hover{border-color:transparent;transform:translateY(-2px);box-shadow:0 36px 64px -36px rgba(13,32,24,.6)}
.v2 .pj-side{gap:24px}
.v2 .pj-side .card{border:0;border-radius:24px;padding:clamp(24px,2.6vw,36px);gap:12px}
.v2 .pj-side .card h3{font-size:22px;letter-spacing:-.024em}
.v2 .pj-side .pj-meta{margin-top:auto;padding-top:10px;font:400 12.5px/1.6 var(--v-mono);color:#7C8C83}
html[lang^="zh"] .v2 .pj-meta{font-family:var(--v-font)!important;font-size:13px!important}
/* ---------- home: scenarios as a numbered editorial row ---------- */
.v2 #scenarios .grid{gap:0;border-top:1px solid var(--v-ink);counter-reset:sc}
.v2 #scenarios .card{counter-increment:sc;border:0;border-radius:0;background:none;padding:30px 28px 6px 0;gap:14px}
.v2 #scenarios .card+.card{padding-left:28px;border-left:1px solid var(--v-line)}
.v2 #scenarios .ico{display:none}
.v2 #scenarios .card::before{content:"0" counter(sc);margin-bottom:22px;font:400 46px/1 var(--v-serif);color:var(--v-brand)}
.v2 #scenarios .card h3{font-size:22px;letter-spacing:-.024em}
.v2 #scenarios .card p{font-size:15.5px}
.v2 #scenarios .card .more{padding-top:14px}
@media(max-width:960px){
.v2 #scenarios .grid{border-top:0;column-gap:32px}
.v2 #scenarios .card,.v2 #scenarios .card+.card{padding:26px 0 22px;border-left:0;border-top:1px solid var(--v-line)}
.v2 #scenarios .card::before{font-size:38px;margin-bottom:14px}
}
/* ---------- home: services as an index list ---------- */
.v2 #services .grid{grid-template-columns:1fr;gap:0;border-top:1px solid var(--v-ink)}
.v2 #services a.card{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,1.5fr) 46px;align-items:center;column-gap:24px;padding:26px 10px;border:0;border-bottom:1px solid var(--v-line);border-radius:0;background:none;transition:background .3s,padding .3s var(--v-ease)}
.v2 #services a.card:hover{background:var(--v-bg);transform:none;box-shadow:none;padding-left:22px;padding-right:22px}
.v2 #services .ico{width:auto;height:auto;margin:0;background:none;justify-content:flex-start}
.v2 #services .ico svg{width:24px;height:24px}
.v2 #services .card h3{font-size:clamp(20px,2vw,26px);letter-spacing:-.028em}
.v2 #services .card p{font-size:15.5px;max-width:60ch}
.v2 #services .card .more{justify-self:end;display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin:0;padding:0;border:1px solid rgba(13,32,24,.16);border-radius:50%;font-size:0;transition:background .25s,border-color .25s}
.v2 #services .card .more::after{content:"";width:16px;height:16px;background:var(--v-ink);-webkit-mask:var(--v3-arrow) center/contain no-repeat;mask:var(--v3-arrow) center/contain no-repeat;transition:transform .25s var(--v-ease),background .25s}
.v2 #services a.card:hover .more{background:var(--v-dark);border-color:var(--v-dark)}
.v2 #services a.card:hover .more::after{background:#fff;transform:translateX(2px)}
@media(max-width:820px){
.v2 #services a.card{grid-template-columns:32px minmax(0,1fr) 42px;row-gap:8px;padding:22px 0}
.v2 #services a.card:hover{padding-left:0;padding-right:0}
.v2 #services .card p{grid-column:2/3;grid-row:2}
.v2 #services .card .more{width:42px;height:42px}
}
/* ---------- home: delivery, handover, client words ---------- */
.v2 .steps{gap:0;border-top:1px solid var(--v-ink)}
.v2 .step{padding:26px 22px 6px 0;border:0;border-radius:0;background:none}
.v2 .step+.step{padding-left:22px;border-left:1px solid var(--v-line)}
.v2 .step::before{display:block;margin-bottom:30px;padding:0;background:none;font:500 13px/1 var(--v-mono);letter-spacing:.04em;color:var(--v-brand)}
.v2 .step b{font-size:21px;font-weight:500;letter-spacing:-.02em;margin-bottom:8px}
html[lang^="zh"] .v2 .step b{font-weight:600}
.v2 .step p{font-size:15px}
@media(max-width:960px){
.v2 .steps{border-top:0;column-gap:28px}
.v2 .step,.v2 .step+.step{padding:22px 0 18px;border-left:0;border-top:1px solid var(--v-line)}
.v2 .step::before{margin-bottom:14px}
}
.v2 .hand{gap:0;margin-top:clamp(48px,6vw,88px);border-top:1px solid var(--v-line)}
.v2 .hand .box{padding:36px 40px 0 0;border:0;border-radius:0;background:none}
.v2 .hand .box+.box{padding-left:40px;border-left:1px solid var(--v-line)}
.v2 .hand .box h3{margin-bottom:18px}
.v2 .ticks{gap:12px}
@media(max-width:860px){.v2 .hand .box,.v2 .hand .box+.box{padding:30px 0 0;border-left:0}.v2 .hand .box+.box{margin-top:30px;border-top:1px solid var(--v-line)}}
.v2 .tq{gap:0;margin-top:clamp(48px,6vw,88px);border-top:1px solid var(--v-line)}
.v2 .tq figure{padding:36px 32px 0 0;border:0;border-radius:0;background:none;gap:22px;justify-content:space-between}
.v2 .tq figure+figure{padding-left:32px;border-left:1px solid var(--v-line)}
.v2 .tq blockquote{font:400 23px/1.32 var(--v-serif);letter-spacing:-.005em;color:var(--v-ink)}
html[lang^="zh"] .v2 .tq blockquote{font:400 17px/1.75 var(--v-font)}
.v2 .tq figcaption{font-size:14px}
.v2 .tq figcaption b{font-weight:500}
@media(max-width:900px){.v2 .tq figure,.v2 .tq figure+figure{padding:28px 0;border-left:0}.v2 .tq figure+figure{border-top:1px solid var(--v-line)}}
/* ---------- contact + forms ---------- */
:is(.v2,.lite) .ct{gap:clamp(32px,5vw,72px)}
:is(.v2,.lite) .form{gap:18px;padding:clamp(24px,3vw,40px);border:0;border-radius:24px;box-shadow:var(--v-shadow)}
:is(.v2,.lite) .form label{font:500 13.5px/1.3 var(--v-font);margin-bottom:8px}
:is(.v2,.lite) .form input,:is(.v2,.lite) .form select,:is(.v2,.lite) .form textarea{min-height:50px;padding:12px 14px;border-color:transparent;border-radius:12px;background:var(--v-bg2);transition:background .2s,border-color .2s,box-shadow .2s}
:is(.v2,.lite) .form input:hover,:is(.v2,.lite) .form select:hover,:is(.v2,.lite) .form textarea:hover{border-color:rgba(13,32,24,.18)}
:is(.v2,.lite) .form input:focus,:is(.v2,.lite) .form select:focus,:is(.v2,.lite) .form textarea:focus{background:#fff;border-color:var(--v-brand);outline:3px solid rgba(153,203,82,.5)}
:is(.v2,.lite) .ct-info{gap:0}
:is(.v2,.lite) .ct-info .box{padding:26px 0;border:0;border-top:1px solid var(--v-line);border-radius:0;background:none}
:is(.v2,.lite) .ct-info .box:first-child{border-top-color:var(--v-ink)}
:is(.v2,.lite) .ct-info .box h3{margin-bottom:12px;font:500 13px/1 var(--v-mono);letter-spacing:.01em;color:var(--v-ink2)}
html[lang^="zh"] :is(.v2,.lite) .ct-info .box h3{font-family:var(--v-font)}
:is(.v2,.lite) .ct-info a{font-weight:500}
:is(.v2,.lite) .big{font-size:clamp(26px,2.6vw,34px);font-weight:500;letter-spacing:-.03em;line-height:1.15}
:is(.v2,.lite) .big a{color:var(--v-ink)!important}
/* ---------- faq ---------- */
.v2 .fq{max-width:860px;gap:0;border-top:1px solid var(--v-ink)}
.v2 .fq details{padding:0;border:0;border-bottom:1px solid var(--v-line);border-radius:0;background:none}
.v2 .fq summary{padding:24px 0;font:500 19px/1.3 var(--v-font);letter-spacing:-.015em;transition:color .2s}
.v2 .fq summary:hover{color:var(--v-brand)}
.v2 .fq summary::after,.v2 .fq details[open] summary::after{content:"";flex:0 0 auto;width:15px;height:15px;background:currentColor;-webkit-mask:var(--v3-plus) center/contain no-repeat;mask:var(--v3-plus) center/contain no-repeat;transition:transform .3s var(--v-ease)}
.v2 .fq details[open] summary::after{transform:rotate(45deg)}
.v2 .fq .a{padding:0 48px 26px 0;font-size:16.5px}
/* ---------- footer sign-off ---------- */
.ft .sign{font:italic 400 21px/1 var(--v-serif);letter-spacing:0;color:var(--v-brand)}
/* ---------- v3 refinements after first visual pass ---------- */
:is(.v2,.lite) .ct-info p.big{font-size:clamp(26px,2.6vw,34px);margin-bottom:8px}
.v2 .hh .actions{gap:12px 20px;align-items:center}
@media(min-width:761px){
.v2 .hh .actions .b-ghost{min-height:0;padding:6px 2px;border:0;border-radius:0;background:none;box-shadow:inset 0 -1px 0 rgba(13,32,24,.4);transition:box-shadow .2s,color .2s}
.v2 .hh .actions .b-ghost:hover{background:none;color:var(--v-brand);box-shadow:inset 0 -2px 0 var(--v-brand)}
}
.v2 .hh .tr{font-size:14.5px}
/* ============================================================================
v3.1 (2026-11-14) - one system across every page.
The first v3 pass restyled body.v2 only; the .lite pages (about, customer
centre, forms, training, portal) kept v2 weights, square green buttons and
the legacy fonts. Everything below brings them onto the same type, buttons
and surfaces, still without touching markup.
============================================================================ */
/* ---------- one font system: legacy kit variables now point at the v3 faces ---------- */
body.v2,body.lite{--font-display:var(--v-font);--font-grotesk:var(--v-font);--font-body:var(--v-font);--font-mono:var(--v-mono)}
/* zh: the web font goes first so 500 is a real Medium on Windows (YaHei only has Regular/Bold) */
html[lang^="zh"]{--v-font:"Geist","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif}
html[lang^="zh"] body.v2,html[lang^="zh"] body.lite{font-family:var(--v-font)}
/* ---------- zh headings: Medium, same family for the emphasised line ---------- */
html[lang^="zh"] .v2 h1,html[lang^="zh"] .v2 h2,html[lang^="zh"] .v2 h3,html[lang^="zh"] .v2 h4{font-weight:500;letter-spacing:-.012em}
/* keep-all: Chinese headings break at punctuation, never in the middle of a word */
html[lang^="zh"] .v2 h1{font-size:clamp(34px,4.2vw,52px);line-height:1.18}
html[lang^="zh"] :is(.v2,.lite) :is(h1,h2,h3){word-break:keep-all;overflow-wrap:anywhere}
/* narrow screens: a run with no punctuation can be longer than the line, so break normally and balance */
@media(max-width:700px){html[lang^="zh"] :is(.v2,.lite) :is(h1,h2,h3){word-break:normal;overflow-wrap:break-word;text-wrap:balance}}
html[lang^="zh"] :is(.v2,.lite) :is(h5,.btn,.signoff,.tl-caption){font-family:var(--v-font)}
html[lang^="zh"] .v2 .hh h1 em{font-family:var(--v-font);font-style:normal;font-weight:500;font-size:1em;letter-spacing:-.012em}
html[lang^="zh"] .v2 .step b{font-weight:500}
html[lang^="zh"] .v2 .tq blockquote{font:400 17px/1.75 var(--v-font)}
/* ---------- home: AI in every system (index.html #ai) ---------- */
.v2 .aix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--v-ink)}
.v2 .aix-i{display:flex;flex-direction:column;gap:12px;padding:30px 28px 34px;border-bottom:1px solid var(--v-line);border-left:1px solid var(--v-line);color:inherit;text-decoration:none}
.v2 .aix-i:nth-child(3n+1){padding-left:0;border-left:0}
.v2 .aix-k{display:inline-flex;align-items:center;gap:9px;margin-bottom:10px;font:500 12.5px/1 var(--v-mono);letter-spacing:.01em;color:var(--v-brand)}
.v2 .aix-k::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--v-lime)}
html[lang^="zh"] .v2 .aix-k{font-family:var(--v-font);font-size:13px;letter-spacing:.04em}
.v2 .aix-i h3{font-size:22px;letter-spacing:-.024em;transition:color .2s}
.v2 .aix-i p{margin:0;font-size:15.5px;line-height:1.55;color:var(--v-ink2)}
.v2 a.aix-i:hover h3{color:var(--v-brand)}
.v2 .aix-note{margin:30px 0 0;font-size:15.5px;color:var(--v-ink2)}
.v2 .aix-note b{font-weight:500;color:var(--v-ink)}
@media(max-width:960px){
.v2 .aix{grid-template-columns:repeat(2,minmax(0,1fr))}
.v2 .aix-i:nth-child(3n+1){padding-left:28px;border-left:1px solid var(--v-line)}
.v2 .aix-i:nth-child(2n+1){padding-left:0;border-left:0}
}
@media(max-width:620px){
.v2 .aix{grid-template-columns:1fr}
.v2 .aix-i,.v2 .aix-i:nth-child(n){padding:24px 0;border-left:0}
}
/* ---------- home: POS + payments closed loop (index.html #loop) ----------
The outline is the loop itself: five numbered stops along the top edge,
and the sides and bottom edge carry the path back to the start. */
.v2 .loop-wrap{position:relative;margin-top:17px;padding:0 clamp(22px,2.6vw,36px);border:1px solid rgba(13,32,24,.5);border-radius:28px}
.v2 .loop{list-style:none;margin:0;padding:0 0 60px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:28px;counter-reset:lp}
.v2 .loop li{counter-increment:lp;display:flex;flex-direction:column;gap:8px;margin-top:-18px}
.v2 .loop li::before{content:counter(lp);width:36px;height:36px;margin-bottom:22px;border-radius:50%;background:var(--v-dark);color:#fff;font:500 13px/36px var(--v-mono);text-align:center;box-shadow:0 0 0 9px var(--v-bg)}
.v2 .loop li:nth-child(3)::before{background:var(--v-lime);color:var(--v-ink)}
.v2 .loop b{font:500 22px/1.2 var(--v-font);letter-spacing:-.024em;color:var(--v-ink)}
.v2 .loop span{font-size:15px;line-height:1.55;color:var(--v-ink2)}
.v2 .loop-back{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);display:inline-flex;align-items:center;gap:10px;margin:0;padding:0 18px;background:var(--v-bg);font:500 13px/1.3 var(--v-mono);color:var(--v-brand);white-space:nowrap}
.v2 .loop-back::before{content:"";flex:0 0 auto;width:15px;height:15px;background:currentColor;-webkit-mask:var(--v3-arrow) center/contain no-repeat;mask:var(--v3-arrow) center/contain no-repeat;transform:rotate(180deg)}
html[lang^="zh"] .v2 .loop-back{font-family:var(--v-font);font-size:14px}
/* POS strengths under the loop: four plain points on hairlines */
.v2 .posx-t{margin:clamp(56px,6.5vw,88px) 0 0;font-size:clamp(24px,2.5vw,32px);letter-spacing:-.03em}
.v2 .posx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:26px;border-top:1px solid var(--v-ink)}
@media(min-width:961px){.v2 .posx.c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.v2 .sh+.posx{margin-top:0}
.v2 .posx-t+.steps{margin-top:26px}
.v2 .posx>div{padding:28px 26px 6px}
.v2 .posx>div+div{border-left:1px solid var(--v-line)}
.v2 .posx>div:first-child{padding-left:0}
.v2 .posx h3{margin-bottom:10px;font-size:21px;letter-spacing:-.022em}
.v2 .posx p{margin:0;font-size:15px;line-height:1.55;color:var(--v-ink2)}
@media(max-width:960px){
.v2 .posx{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0}
.v2 .posx>div,.v2 .posx>div+div{padding:24px 24px 24px 0;border-left:0;border-top:1px solid var(--v-line)}
.v2 .posx>div:nth-child(2n){padding-left:24px;border-left:1px solid var(--v-line)}
}
@media(max-width:560px){
.v2 .posx{grid-template-columns:1fr}
.v2 .posx>div,.v2 .posx>div+div,.v2 .posx>div:nth-child(2n){padding:22px 0;border-left:0}
}
.v2 .loop-foot{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-top:clamp(44px,5vw,64px)}
.v2 .loop-foot p{margin:0;max-width:56ch;font-size:16.5px;line-height:1.55;color:var(--v-ink2)}
.v2 .loop-foot p b{font-weight:500;color:var(--v-ink)}
.v2 .loop-foot .actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
@media(max-width:900px){
.v2 .loop-wrap{margin-top:0;margin-left:18px;padding:0;border:0;border-left:1px solid rgba(13,32,24,.5);border-radius:0}
.v2 .loop{grid-template-columns:1fr;row-gap:30px;padding:0 0 30px}
.v2 .loop li{position:relative;margin:0;padding-left:38px;min-height:36px}
.v2 .loop li::before{position:absolute;left:-18px;top:0;margin:0;box-shadow:0 0 0 6px var(--v-bg)}
.v2 .loop b{padding-top:5px}
.v2 .loop-back{position:relative;left:auto;bottom:auto;transform:none;margin:0 0 0 -8px;padding:6px 0;white-space:normal}
.v2 .loop-back::before{transform:rotate(-90deg)}
.v2 .loop-foot .actions .b{flex:1 1 100%}
}
/* ---------- home: value for money (index.html #value), the page's one dark band ---------- */
.v2 .sec--dark{background:radial-gradient(60% 70% at 85% 0%,rgba(153,203,82,.13),transparent 62%),var(--v-dark)}
.v2 .sec--dark .sh p{color:#B9CCC0}
.v2 .vfm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.34)}
.v2 .vfm>div{padding:30px 26px 6px}
.v2 .vfm>div+div{border-left:1px solid rgba(255,255,255,.14)}
.v2 .vfm>div:first-child{padding-left:0}
.v2 .vfm h3{margin-bottom:12px;font-size:21px;letter-spacing:-.022em;color:#fff}
.v2 .vfm p{margin:0;font-size:15px;line-height:1.55;color:#B9CCC0}
.v2 .vfm-note{margin:clamp(36px,4vw,52px) 0 0;font-size:15px;color:#9FB8AA}
.v2 .vfm-note a{margin-left:6px;color:var(--v-lime);font-weight:500;text-decoration:none}
.v2 .vfm-note a:hover{text-decoration:underline}
@media(max-width:960px){
.v2 .vfm{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0}
.v2 .vfm>div,.v2 .vfm>div+div{padding:26px 24px 26px 0;border-left:0;border-top:1px solid rgba(255,255,255,.2)}
.v2 .vfm>div:nth-child(2n){padding-left:24px;border-left:1px solid rgba(255,255,255,.14)}
}
@media(max-width:560px){
.v2 .vfm{grid-template-columns:1fr}
.v2 .vfm>div,.v2 .vfm>div+div,.v2 .vfm>div:nth-child(2n){padding:24px 0;border-left:0}
}
/* ---------- home pictures (2026-11-14): fewer words, more to look at ----------
Markup comes from tools/home_sections.py: .pic pictograms in the AI cells, a light
running round the closed loop, and a dot map of Australia in the delivery section.
Everything is drawn in the brand's two greens; motion is slow and stops under
prefers-reduced-motion (each picture is complete when still). */
.v2 .pic{display:block;width:132px;height:77px;margin-bottom:14px;fill:none;stroke:var(--v-brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.v2 .pic .p-acc{fill:var(--v-lime);stroke:none}
.v2 .pic .p-line{stroke:var(--v-lime);stroke-width:2.6}
.v2 .pic .p-bar{stroke:var(--v-lime);stroke-width:3.4}
.v2 .pic .p-lens{fill:rgba(153,203,82,.24)}
.v2 .pic .p-draw{stroke-dasharray:100}
.v2 .pic :is(.p-hop,.p-bar,.p-grow,.p-pop){transform-box:fill-box;transform-origin:center}
.v2 .pic .p-grow{transform-origin:left center}
.v2 .aix-i .aix-k{margin-bottom:6px}
.v2 .loop-run{display:none;position:absolute;left:-1px;top:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none}
.v2 .loop-run rect{x:1px;y:1px;width:calc(100% - 2px);height:calc(100% - 2px);rx:28px;fill:none;stroke:var(--v-lime);stroke-width:3;stroke-linecap:round;stroke-dasharray:7 93}
.v2 .loop{position:relative;z-index:1}
.v2 .loop-back{z-index:1}
.v2 .reach{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.v2 .reach-map{margin:0;padding:clamp(18px,2.6vw,36px) clamp(18px,2.6vw,36px) clamp(16px,2vw,26px);border-radius:24px;background:var(--v-bg2)}
.v2 .aumap{display:block;width:100%;height:auto;overflow:visible}
.v2 .au-land{fill:none;stroke:#A9BDB0;stroke-width:4.6;stroke-linecap:round}
.v2 .au-arc{fill:none;stroke:var(--v-brand);stroke-width:1.7;stroke-linecap:round;stroke-dasharray:100}
.v2 .au-dot{fill:var(--v-lime);stroke:var(--v-dark);stroke-width:2}
.v2 .au-city.hq .au-dot{fill:var(--v-dark);stroke:var(--v-lime);stroke-width:3}
.v2 .au-ring{fill:none;stroke:var(--v-lime);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.v2 .au-lab{font:500 13px var(--v-mono);letter-spacing:.05em;fill:var(--v-ink);paint-order:stroke;stroke:var(--v-bg2);stroke-width:5px;stroke-linejoin:round}
.v2 .au-lab.hq{font:500 14px var(--v-font);letter-spacing:0}
.v2 .reach-map figcaption{margin-top:16px;font:400 12.5px/1.55 var(--v-mono);color:var(--v-ink2)}
html[lang^="zh"] .v2 .reach-map figcaption{font-family:var(--v-font);font-size:13px}
.v2 .reach-pts>div{padding:26px 0;border-top:1px solid var(--v-line)}
.v2 .reach-pts>div:first-child{border-top-color:var(--v-ink)}
.v2 .reach-pts h3{margin-bottom:8px;font-size:clamp(21px,2vw,25px);letter-spacing:-.026em}
.v2 .reach-pts p{margin:0;font-size:15.5px;line-height:1.55;color:var(--v-ink2)}
@media(max-width:900px){.v2 .reach{grid-template-columns:1fr}}
@media(max-width:560px){.v2 .au-lab{font-size:19px}.v2 .au-lab.hq{font-size:20px}}
@media(prefers-reduced-motion:no-preference){
@keyframes pDraw{0%{stroke-dashoffset:100}55%,100%{stroke-dashoffset:0}}
@keyframes pBlink{0%,49%{opacity:.25}55%,100%{opacity:1}}
@keyframes pHop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
@keyframes pBar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes pSweep{0%,100%{transform:translateY(0)}50%{transform:translateY(32px)}}
@keyframes pGrow{0%,12%{transform:scaleX(0)}34%,100%{transform:scaleX(1)}}
@keyframes pPop{0%,12%{transform:scale(0)}26%{transform:scale(1.25)}34%,100%{transform:scale(1)}}
@keyframes pRoam{0%,100%{transform:translate(0,0)}33%{transform:translate(-22px,-14px)}66%{transform:translate(-30px,-1px)}}
@keyframes loopRun{to{stroke-dashoffset:-100}}
@keyframes auRing{0%{opacity:.85;transform:scale(1)}70%,100%{opacity:0;transform:scale(3.4)}}
@keyframes auArc{0%{stroke-dashoffset:100}35%,100%{stroke-dashoffset:0}}
.v2 .pic .p-draw{animation:pDraw 3.8s var(--v-ease) infinite}
.v2 .pic .p-blink{animation:pBlink 3.8s linear infinite}
.v2 .pic .p-hop{animation:pHop 1.5s ease-in-out infinite}
.v2 .pic .p-bar{animation:pBar 1.3s ease-in-out infinite}
.v2 .pic .p-sweep{animation:pSweep 3.2s ease-in-out infinite}
.v2 .pic .p-grow{animation:pGrow 4.2s var(--v-ease) infinite}
.v2 .pic .p-pop{animation:pPop 4.2s var(--v-ease) infinite}
.v2 .pic .p-roam{animation:pRoam 5.5s ease-in-out infinite}
.v2 .pic .d2{animation-delay:.22s}
.v2 .pic .d3{animation-delay:.44s}
.v2 .au-ring{animation:auRing 3s ease-out infinite}
.v2 .au-arc{animation:auArc 7s var(--v-ease) infinite}
.v2 :is(.au-ring,.au-arc).d1{animation-delay:.5s}
.v2 :is(.au-ring,.au-arc).d2{animation-delay:1s}
.v2 :is(.au-ring,.au-arc).d3{animation-delay:1.5s}
.v2 :is(.au-ring,.au-arc).d4{animation-delay:2s}
}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
.v2 .loop-run{display:block}
.v2 .loop-run rect{animation:loopRun 9s linear infinite}
}
/* ---------- hero label on narrow screens: wrap inside the column ---------- */
@media(max-width:600px){
.pill{max-width:100%;justify-content:flex-start;text-align:left;padding:0;gap:8px 10px;font-size:12px;line-height:1.5}
.v2 .hh .pill{max-width:100%}
}
/* ---------- .lite pages: type ---------- */
.lite h1,.lite h2{font-weight:500;letter-spacing:-.035em;line-height:1.06}
.lite h3,.lite h4,.lite h5{font-weight:500;letter-spacing:-.018em}
.lite .pagehero h1{font-weight:500;font-size:clamp(38px,5vw,64px);line-height:1.04;letter-spacing:-.04em}
.lite h2{font-size:clamp(28px,3.4vw,44px)}
html[lang^="zh"] .lite h1,html[lang^="zh"] .lite h2{font-weight:500;letter-spacing:-.012em;line-height:1.18}
html[lang^="zh"] .lite h3,html[lang^="zh"] .lite h4,html[lang^="zh"] .lite h5{font-weight:500;letter-spacing:0}
html[lang^="zh"] .lite .pagehero h1{font-weight:500;font-size:clamp(34px,4.4vw,56px);letter-spacing:-.012em;line-height:1.16}
.lite section{padding:clamp(64px,8vw,112px) 0}
.lite .pagehero.dark,.lite .pagehero{padding:clamp(44px,5.5vw,76px) 0}
.lite .pagehero .sub,.lite .sec-head .lede,.lite .lede{font-size:18px;line-height:1.55}
.lite .eyebrow,.lite .dark .eyebrow,.lite .eyebrow.on-dark{display:inline-flex;align-items:center;gap:10px;font:500 13px/1 var(--v-mono);letter-spacing:.01em;text-transform:none;color:var(--v-brand)}
.lite .eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.55}
html[lang^="zh"] .lite .eyebrow{font-family:var(--v-font);letter-spacing:.06em}
.lite .callout .eyebrow,.lite .terminal .eyebrow{color:var(--v-lime)}
.lite .crumbs{font:400 13px/1.4 var(--v-mono);color:var(--v-ink2)}
html[lang^="zh"] .lite .crumbs{font-family:var(--v-font)}
/* ---------- .lite pages: one button ---------- */
.lite .btn{min-height:50px;padding:0 24px;border:1px solid transparent;border-radius:999px;font:500 15.5px/1 var(--v-font);letter-spacing:-.005em;box-shadow:none;transition:background .25s var(--v-ease),border-color .2s,color .2s,transform .2s var(--v-ease)}
.lite .btn:hover{transform:none}
.lite .btn:active{transform:translateY(1px) scale(.985)}
.lite .btn-sm{min-height:42px;padding:0 18px;font-size:14.5px}
.lite .btn-primary{background:var(--v-dark);color:#fff}
.lite .btn-primary:hover{background:var(--v-brand);color:#fff;box-shadow:none}
.lite .btn-primary .arr{display:none}
.lite .btn-primary::after{content:"";flex:0 0 auto;width:15px;height:15px;background:currentColor;-webkit-mask:var(--v3-arrow) center/contain no-repeat;mask:var(--v3-arrow) center/contain no-repeat;transition:transform .25s var(--v-ease)}
.lite .btn-primary:hover::after{transform:translateX(3px)}
.lite .btn-ghost,.lite .btn-outline{background:transparent;border-color:rgba(13,32,24,.18);color:var(--v-ink)}
.lite .btn-ghost:hover,.lite .btn-outline:hover{background:rgba(13,32,24,.03);border-color:var(--v-ink);color:var(--v-ink)}
.lite .terminal .btn-ghost,.lite .callout .btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.lite .terminal .btn-ghost:hover,.lite .callout .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#fff;color:#fff}
.lite .terminal .btn-primary,.lite .callout .btn-primary,.lite .sidebox.dk .btn-primary{background:var(--v-lime);color:var(--v-ink)}
.lite .terminal .btn-primary:hover,.lite .callout .btn-primary:hover,.lite .sidebox.dk .btn-primary:hover{background:#fff;color:var(--v-ink)}
.lite .btn-spark{background:var(--v-lime);color:var(--v-ink)}
.lite .btn-spark:hover{background:#fff;color:var(--v-ink);box-shadow:none}
.lite .btn:focus-visible,.b:focus-visible{outline:3px solid rgba(153,203,82,.7);outline-offset:2px}
/* ---------- .lite pages: surfaces ---------- */
.lite .card,.lite .cc-card,.lite .tcard,.lite .scard,.lite .panel,.lite .contact-card,.lite .console,.lite .porcelain,.lite .contact-console,.lite .coverage{border-color:var(--v-line);border-radius:var(--v-r)}
.lite .cc-card{padding:26px;transition:border-color .25s,box-shadow .25s,transform .25s var(--v-ease)}
.lite a.cc-card:hover,.lite a.card:hover{border-color:rgba(13,32,24,.5);box-shadow:var(--v-shadow);transform:translateY(-2px)}
.lite .cc-card.hl{border-top:1px solid var(--v-ink)}
.lite .cc-card.soft{background:var(--v-bg2);border-color:transparent}
.lite .cc-card h3{font:500 20px/1.25 var(--v-font);letter-spacing:-.02em}
.lite .cc-card .go{font:500 15px/1.3 var(--v-font);color:var(--v-brand)}
.lite .cc-card .k,.lite .ttype,.lite .schip,.lite .tile .k{font-family:var(--v-mono);font-weight:500;letter-spacing:.04em;color:var(--v-ink2)}
.lite .ttype{background:var(--v-bg2)}
.lite .schip.lead{color:var(--v-brand-deep)}
html[lang^="zh"] .lite .cc-card .k,html[lang^="zh"] .lite .ttype,html[lang^="zh"] .lite .schip,html[lang^="zh"] .lite .tile .k{font-family:var(--v-font)}
.lite .card-ico{background:var(--v-bg2);color:var(--v-brand);border-radius:12px}
.lite .login-card{border-radius:24px;box-shadow:var(--v-shadow)}
.lite .login-card h2{font:500 26px/1.15 var(--v-font);letter-spacing:-.03em}
.lite .tile .v,.lite .stat .n,.lite .crow b{font-weight:500;letter-spacing:-.02em}
.lite .terminal{border-radius:24px}
.lite .pullquote{font:400 clamp(26px,3.3vw,42px)/1.18 var(--v-serif);letter-spacing:-.01em}
html[lang^="zh"] .lite .pullquote{font:500 clamp(22px,2.6vw,32px)/1.4 var(--v-font);letter-spacing:0}
.lite .tcard blockquote{font:400 22px/1.34 var(--v-serif);letter-spacing:-.005em}
html[lang^="zh"] .lite .tcard blockquote{font:400 16.5px/1.75 var(--v-font)}
.lite .faq summary{font-weight:500;letter-spacing:-.015em}
/* ---------- .lite pages: form fields match the enquiry form ---------- */
.lite .fld{font:500 13.5px/1.3 var(--v-font);gap:8px}
/* text-like controls only: the radio / checkbox chips (.chk) inside a .fld keep their own size */
.lite .fld :is(input:not([type=radio]):not([type=checkbox]),select,textarea){min-height:50px;border:1px solid transparent;border-radius:12px;background:var(--v-bg2);font:400 15.5px/1.4 var(--v-font);transition:background .2s,border-color .2s}
.lite .fld :is(input:not([type=radio]):not([type=checkbox]),select,textarea):hover{border-color:rgba(13,32,24,.18)}
.lite .fld :is(input:not([type=radio]):not([type=checkbox]),select,textarea):focus{background:#fff;border-color:var(--v-brand);outline:3px solid rgba(153,203,82,.5);outline-offset:0}
.lite .chk{border-color:rgba(13,32,24,.18);font:400 15px/1 var(--v-font);white-space:nowrap}
.lite .chk:has(input:checked){border-color:var(--v-ink);background:var(--v-bg2)}
/* training-centre topic filter: was light-on-dark text left over from the dark hero */
.lite .tfilter button{border-color:rgba(13,32,24,.18);background:transparent;color:var(--v-ink);font:500 14.5px/1 var(--v-font);transition:background .2s,border-color .2s,color .2s}
.lite .tfilter button:hover{border-color:var(--v-ink)}
.lite .tfilter button[aria-pressed="true"]{background:var(--v-dark);border-color:var(--v-dark);color:#fff}
/* .nb: a phrase that must not be split across lines (hand-placed in zh headings) */
:is(.v2,.lite) .nb{display:inline-block}
.lite .fsec h3{font:500 21px/1.2 var(--v-font);letter-spacing:-.02em}
.lite .fsec h3 .n{font:500 13px/1 var(--v-mono);color:var(--v-brand)}
/* ---------- pages carried over from the old site (tools/mypi_pages.py): policy, payment, guides, forms ---------- */
.v2 .doc-hero h1{margin-top:18px;font-size:clamp(32px,4.4vw,54px)}
.v2 .doc-hero .lead{margin-top:16px;max-width:680px;font-size:18px;line-height:1.55}
.v2 .doc-hero .crumbs a{color:inherit}
.v2 .doc-sec{padding-top:clamp(36px,5vw,64px)}
.v2 .doc{max-width:820px;font-size:16.5px;line-height:1.7;color:var(--v-ink2)}
.v2 .doc>:first-child{margin-top:0}
.v2 .doc h2{margin:1.9em 0 .55em;font-size:clamp(22px,2.4vw,30px);line-height:1.15;color:var(--v-ink)}
.v2 .doc h3{margin:1.6em 0 .45em;font-size:20px;color:var(--v-ink)}
.v2 .doc h4{margin:1.4em 0 .35em;font-size:17px;color:var(--v-ink)}
.v2 .doc p{margin:0 0 1em}
.v2 .doc ul,.v2 .doc ol{margin:0 0 1em;padding-left:1.35em}
.v2 .doc li{margin:.25em 0}
.v2 .doc strong,.v2 .doc b{font-weight:600;color:var(--v-ink)}
.v2 .doc a{color:var(--v-brand);font-weight:500;overflow-wrap:anywhere}
.v2 .doc>a{display:block;margin:0 0 16px;padding:22px 24px;border:1px solid var(--v-line);border-radius:var(--v-r);color:var(--v-ink2);font-weight:400;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.v2 .doc>a:hover{border-color:rgba(13,32,24,.5);box-shadow:var(--v-shadow)}
.v2 .doc>a h2{margin:.15em 0 .4em;font-size:22px}
.v2 .doc>a p:first-child{margin-bottom:.2em;font:500 12.5px/1.4 var(--v-mono);color:var(--v-brand)}
.v2 .doc img{display:block;max-width:100%;height:auto;margin:16px 0;border:1px solid var(--v-line);border-radius:12px}
.v2 .doc table{width:100%;margin:0 0 1.2em;border-collapse:collapse;font-size:15px}
.v2 .doc :is(td,th){padding:10px 12px;border:1px solid var(--v-line);text-align:left;vertical-align:top}
.v2 .doc th{background:var(--v-bg2);color:var(--v-ink);font-weight:600}
.v2 .doc-note{max-width:820px;margin:0 0 22px;padding:13px 16px;border-radius:12px;background:var(--v-bg2);font-size:14.5px;line-height:1.55;color:var(--v-ink2)}
.v2 .doc-note a{color:var(--v-brand);font-weight:500}
.v2 .doc-links{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.v2 .doc-warn{max-width:980px;margin:clamp(28px,4vw,44px) 0 0;padding:16px 18px;border-left:3px solid var(--v-lime);background:var(--v-bg2);font-size:15px;line-height:1.6;color:var(--v-ink)}
.v2 .doc-frame iframe{display:block;width:100%;height:min(1500px,200vh);border:1px solid var(--v-line);border-radius:16px;background:#fff}
.v2 .doc-form{max-width:860px;min-height:360px;margin-bottom:22px}
.v2 .doc-foot{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(40px,5vw,64px) 0 0;padding-top:26px;border-top:1px solid var(--v-line)}
.v2 .dl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:980px;margin:0 0 clamp(28px,4vw,44px)}
.v2 .dl-grid a{display:flex;flex-direction:column;gap:6px;padding:22px;border:1px solid var(--v-line);border-radius:var(--v-r);color:var(--v-ink);text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s var(--v-ease)}
.v2 .dl-grid a:hover{border-color:rgba(13,32,24,.5);box-shadow:var(--v-shadow);transform:translateY(-2px)}
.v2 .dl-grid small{font:500 12px/1.3 var(--v-mono);color:var(--v-brand)}
.v2 .dl-grid b{font:500 19px/1.25 var(--v-font);letter-spacing:-.02em}
.v2 .dl-grid span{margin-top:auto;padding-top:8px;font-size:14.5px;font-weight:500;color:var(--v-brand)}
@media(max-width:900px){.v2 .dl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.v2 .dl-grid{grid-template-columns:1fr}}
.v2 .pay{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:980px;border-top:1px solid var(--v-ink)}
.v2 .pay-o{padding:28px 26px 8px}
.v2 .pay-o+.pay-o{border-left:1px solid var(--v-line)}
.v2 .pay-o:first-child{padding-left:0}
.v2 .pay-n{font:500 13px/1 var(--v-mono);color:var(--v-brand)}
html[lang^="zh"] .v2 .pay-n{font-family:var(--v-font)}
.v2 .pay-o h2{margin:14px 0 16px;font-size:22px;letter-spacing:-.024em}
.v2 .pay-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0;font-size:15.5px}
.v2 .pay-dl dt{color:var(--v-ink2)}
.v2 .pay-dl dd{margin:0;font-weight:500;color:var(--v-ink);overflow-wrap:anywhere}
.v2 .pay-qr{display:block;width:200px;max-width:100%;height:auto;border:1px solid var(--v-line);border-radius:12px}
.v2 .pay-wx{display:block;max-width:200px;height:auto;margin-top:12px}
@media(max-width:820px){
.v2 .pay{grid-template-columns:1fr;border-top:0}
.v2 .pay-o,.v2 .pay-o+.pay-o,.v2 .pay-o:first-child{padding:26px 0;border-left:0;border-top:1px solid var(--v-line)}
.v2 .pay-o:first-child{border-top-color:var(--v-ink)}
}
/* ============================================================================
Ask MyPI (2026-11-14) - the floating helper on every page, with the mascot.
The mascot is drawn in site.js from the logo: lime ring + stem as the body,
the two pine arcs as brow and smile, plus eyes. It blinks, bobs gently and
wiggles on hover; all of that stops under prefers-reduced-motion.
============================================================================ */
.pia-launch,.pia-panel{--font-grotesk:var(--v-font);--font-body:var(--v-font);--font-mono:var(--v-mono);font-family:var(--v-font)}
.pia-launch{right:22px;bottom:22px;gap:0;min-height:56px;padding:0 24px 0 72px;border-radius:999px;background:var(--v-dark);color:#fff;font:500 16px/1 var(--v-font);letter-spacing:-.005em;box-shadow:0 16px 36px -14px rgba(13,32,24,.6);overflow:visible;transition:background .25s var(--v-ease),transform .2s var(--v-ease)}
.pia-launch:hover{background:var(--v-brand)}
.pia-launch:active{transform:translateY(1px) scale(.985)}
.pia-launch .ic{position:absolute;left:-4px;bottom:-3px;width:74px;height:74px;border-radius:0;background:none;display:block;filter:drop-shadow(0 6px 10px rgba(13,32,24,.28));transform-origin:50% 90%}
.pia-launch .ic svg,.pia-av svg,.pia-mini svg{display:block;width:100%;height:100%}
.pia-launch .t{white-space:nowrap}
.mypi-smile{transition:d .25s var(--v-ease)}
.pia-launch:hover .mypi-smile{d:path("M28 36.6q8 9.2 16 0")}
@media(max-width:520px){
.pia-launch{right:14px;bottom:14px;width:66px;min-height:66px;padding:0;background:none;box-shadow:none}
.pia-launch:hover{background:none}
.pia-launch .ic{left:0;bottom:0;width:66px;height:66px}
}
@media(prefers-reduced-motion:no-preference){
@keyframes mypiBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-3deg)}}
@keyframes mypiWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}60%{transform:rotate(7deg)}85%{transform:rotate(-3deg)}}
@keyframes mypiBlink{0%,91%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
.pia-launch .ic{animation:mypiBob 3.8s ease-in-out infinite}
.pia-launch:hover .ic{animation:mypiWiggle .7s var(--v-ease)}
.mypi-eyes{transform-origin:36px 28px;animation:mypiBlink 4.8s infinite}
}
/* MyPI in the header: the customer area's one entry point, with the mascot's face */
.nv-right>a.nv-mypi{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border:1px solid var(--v-line);border-radius:999px;font-weight:500;color:var(--v-ink);background:var(--v-bg);transition:border-color .2s,background .2s}
.nv-right>a.nv-mypi:hover,.nv-right>a.nv-mypi[aria-current="page"]{border-color:var(--v-ink);background:var(--v-bg);color:var(--v-ink)}
.nv-mypi svg{flex:0 0 auto;width:28px;height:28px}
/* MyPI page: ticket form + side notes, and the downloads grid */
.lite #ticket .ct{margin-top:clamp(28px,4vw,44px)}
.lite .cc-grid.sec-gap{margin-top:clamp(28px,4vw,44px)}
@media(min-width:1000px){.lite #downloads .cc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* if the live-chat bubble (old site's widget, bottom right) is showing, Ask MyPI sits above it */
body:has(#ys-chatbot-container:not([style*="display: none"])) .pia-launch{bottom:112px}
/* preview-only vs live-only content (html[data-site=live] is set by tools/chrome.py in live mode):
demos that pretend to do something are .pv-only; their honest replacements are .live-only */
.live-only{display:none}
html[data-site="live"] .live-only{display:block}
html[data-site="live"] .pv-only{display:none!important}
.lite .login-card .live-only .btn{width:100%;margin-top:12px}
/* live helper: a short list of real destinations instead of the scripted chat */
.pia-panel--quick{height:auto;max-height:calc(100vh - 44px)}
.pia-quick{display:flex;flex-direction:column;gap:8px;padding:18px 16px 20px;overflow-y:auto}
.pia-quick .pia-row{margin-bottom:8px}
.pia-go{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:0 18px;border:1px solid rgba(13,32,24,.16);border-radius:14px;color:var(--v-ink);font:500 15px/1.3 var(--v-font);text-decoration:none;transition:border-color .2s,background .2s}
.pia-go::after{content:"";flex:0 0 auto;width:15px;height:15px;background:currentColor;-webkit-mask:var(--v3-arrow) center/contain no-repeat;mask:var(--v3-arrow) center/contain no-repeat}
.pia-go:hover{border-color:var(--v-ink);background:var(--v-bg2)}
.pia-go.call{margin-top:6px;border-color:var(--v-dark);background:var(--v-dark);color:#fff}
.pia-go.call:hover{background:var(--v-brand);border-color:var(--v-brand)}
/* the panel, on the v3 tokens. It is a , so cancel the .lite section padding that used to leak into it. */
.lite section.pia-panel,.v2 section.pia-panel{padding:0}
.pia-launch:focus-visible,.pia-panel :is(button,a,input,select,textarea):focus-visible{outline-color:var(--v-lime)}
.pia-panel{border-radius:24px;box-shadow:0 30px 70px -20px rgba(13,32,24,.5);font:400 15px/1.5 var(--v-font);color:var(--v-ink)}
.pia-head{background:var(--v-dark);padding:14px 12px 14px 16px}
.pia-av{flex:0 0 44px;height:44px;border-radius:50%;background:#fff;overflow:hidden}
.pia-av::after,.pia-mini::after{display:none}
.pia-head b{font:500 17px/1.2 var(--v-font);letter-spacing:-.01em}
.pia-head small{color:#B9CCC0}
.pia-head small i{background:var(--v-lime)}
.pia-tabs{background:var(--v-bg2);border-bottom-color:var(--v-line)}
.pia-tabs button{border-radius:999px;border-color:var(--v-line);font:500 14px/1 var(--v-font);color:var(--v-ink)}
.pia-tabs button[aria-pressed="true"]{background:var(--v-dark);border-color:var(--v-dark);color:#fff}
.pia-mini{flex:0 0 30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--v-line);overflow:hidden}
.pia-b{background:var(--v-bg2);color:var(--v-ink)}
.pia-row.me .pia-b{background:var(--v-dark);color:#fff}
.pia-card{border-color:var(--v-line)}
.pia-card .hd{background:var(--v-lime-soft);color:var(--v-brand-deep);font-weight:500}
.pia-card .ttl{font:500 15.5px/1.35 var(--v-font)}
.pia-chips button,.pia-card .slots button,.pia-form .types button{border-color:rgba(13,32,24,.2);color:var(--v-ink);font:500 13.5px/1 var(--v-font)}
.pia-chips button:hover,.pia-card .slots button:hover,.pia-form .types button:hover{border-color:var(--v-ink)}
.pia-chips button[aria-pressed="true"],.pia-card .slots button[aria-pressed="true"],.pia-form .types button[aria-pressed="true"],.pia-chips button.go{background:var(--v-dark);border-color:var(--v-dark);color:#fff}
.pia-card .acts a,.pia-send,.pia-form .submit{background:var(--v-dark);border-radius:999px;font-weight:500}
.pia-form .submit{font:500 15px/1 var(--v-font)}
.pia-in input{border-color:transparent;border-radius:999px;background:var(--v-bg2);font:400 15px/1.4 var(--v-font)}
.pia-in{border-top-color:var(--v-line)}
.pia-dots span{background:var(--v-brand)}
.pia-chk i{background:var(--v-lime)}
.pia-foot{border-top-color:var(--v-line);color:var(--v-ink2)}
.pia-foot a{color:var(--v-brand);font-weight:500}
/* =====================================================================================================
Design pass, 2026-11-15. Customer feedback: "too many fonts; the content is clear but the layout is
stiff; some places need pictures, some need a background colour."
1. One typeface: --v-serif and --v-mono (top of this file) now point at --v-font; the rules below take
the italics and the wide tracking off the places that used them.
2. Filled cards and tinted bands instead of white sections split by hairlines.
3. Photos: assets/img/photo (3:2), on the home service cards, the POS block and the service pages.
Everything here comes last on purpose; it overrides the layout rules above at every width.
===================================================================================================== */
:root{--v-wash:#EEF5E3;--v-sand:#F5F0E3;--v-mint:#E3EFE9;--v-sky:#E6EEF1}
/* 1 - one typeface */
.v2 .hh h1 em{font-style:normal;font-weight:inherit;font-size:1em;letter-spacing:inherit}
.ft .sign{font:500 15px/1.4 var(--v-font)}
.v2 .tq blockquote,.lite .tcard blockquote{font:400 17px/1.6 var(--v-font);letter-spacing:0}
.lite .pullquote{font:500 clamp(22px,2.6vw,32px)/1.32 var(--v-font);letter-spacing:-.02em}
.crumbs,.lite .crumbs{font:400 13.5px/1.4 var(--v-font);letter-spacing:0;text-transform:none}
.v2 .sitemap text{font-family:var(--v-font)!important}
.v2 .step::before,.v2 .loop li::before,.v2 .pay-n,.lite .fsec h3 .n{font-variant-numeric:tabular-nums}
/* photos */
.v2 .foto,.lite .foto{margin:0;border-radius:22px;overflow:hidden;background:var(--v-tint)}
.v2 .foto img,.lite .foto img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
/* 2 - colour. Top of every page: a soft lime wash instead of flat white */
.v2 .hh{background:radial-gradient(46% 62% at 90% 6%,rgba(153,203,82,.26),transparent 72%),linear-gradient(180deg,#F0F6E7 0,#fff 82%)}
.v2 .sp-hero{background:radial-gradient(44% 80% at 94% 0,rgba(153,203,82,.2),transparent 72%),linear-gradient(180deg,#F0F6E7 0,#fff 100%)}
.lite section.pagehero.pagehero{background:radial-gradient(44% 80% at 94% 0,rgba(153,203,82,.2),transparent 72%),linear-gradient(180deg,#F0F6E7 0,#fff 100%)}
.lite .tl-caption{font-style:normal}
.v2 .glance-box{background:#fff;box-shadow:0 1px 2px rgba(13,32,24,.04),0 12px 32px -18px rgba(13,32,24,.18)}
/* AI: six white cards on the pale band */
.v2 .aix{gap:16px;border-top:0}
.v2 .aix>.aix-i:nth-child(n){padding:26px 26px 28px;border:1px solid var(--v-line);border-radius:20px;background:#fff;transition:border-color .25s,box-shadow .25s,transform .25s var(--v-ease)}
.v2 .aix>a.aix-i:hover{border-color:rgba(13,32,24,.32);box-shadow:var(--v-shadow);transform:translateY(-2px)}
.v2 .aix .pic{box-sizing:content-box;width:108px;height:63px;margin-bottom:16px;padding:16px 18px;border-radius:14px;background:var(--v-wash)}
/* POS strengths: photo on the left, four tinted tiles on the right */
.v2 .posx-g{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4.4vw,64px);align-items:center;margin-top:clamp(56px,6.5vw,88px)}
.v2 .posx-g .posx-t{margin-top:0}
.v2 .posx-g .posx{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px;border-top:0}
.v2 .posx-g .posx>div:nth-child(n){padding:22px;border:0;border-radius:16px;background:var(--v-wash)}
.v2 .posx-g .posx h3{font-size:19px}
@media(max-width:900px){.v2 .posx-g{grid-template-columns:1fr}}
@media(max-width:520px){.v2 .posx-g .posx{grid-template-columns:1fr}}
/* Four situations: four tinted cards, a small numbered badge instead of the big serif numeral */
.v2 #scenarios .grid{gap:16px;border-top:0}
.v2 #scenarios .card:nth-child(n){padding:26px 24px 22px;border:0;border-radius:20px;background:var(--v-wash)}
.v2 #scenarios .card:nth-child(2){background:var(--v-sand)}
.v2 #scenarios .card:nth-child(3){background:var(--v-mint)}
.v2 #scenarios .card:nth-child(4){background:var(--v-sky)}
.v2 #scenarios .card:nth-child(n)::before{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;width:36px;height:36px;margin-bottom:16px;border-radius:50%;background:#fff;font:600 13px/1 var(--v-font);font-variant-numeric:tabular-nums;color:var(--v-brand)}
.v2 #scenarios .tag{border-color:transparent;background:rgba(255,255,255,.72)}
.v2 #scenarios a.card:hover{box-shadow:var(--v-shadow);transform:translateY(-2px)}
/* Services: photo cards */
.v2 #services .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;border-top:0}
.v2 #services a.card,.v2 #services a.card:hover{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:0 0 24px;border:1px solid var(--v-line);border-radius:20px;background:#fff;overflow:hidden}
.v2 #services a.card:hover{border-color:rgba(13,32,24,.32);box-shadow:var(--v-shadow);transform:translateY(-3px)}
.v2 #services .card-ph{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;margin-bottom:10px;background:var(--v-tint)}
.v2 #services .ico{display:none}
.v2 #services .card h3{padding:0 24px;font-size:21px;letter-spacing:-.022em}
.v2 #services .card p{padding:0 24px;max-width:none;font-size:15px;grid-column:auto;grid-row:auto}
.v2 #services .card .more,.v2 #services a.card:hover .more{display:inline-flex;align-self:flex-start;justify-self:auto;width:auto;height:auto;margin:auto 24px 0;padding:10px 0 0;border:0;border-radius:0;background:none;font-size:14.5px;font-weight:500;color:var(--v-brand)}
.v2 #services .card .more::after{display:none}
@media(max-width:960px){.v2 #services .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.v2 #services .grid{grid-template-columns:1fr}}
/* Value for money: glass cards on the dark band */
.v2 .vfm{gap:14px;border-top:0}
.v2 .vfm>div:nth-child(n){padding:26px 24px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(255,255,255,.055)}
.v2 .vfm h3{color:var(--v-lime)}
/* Steps: numbered cards (home and service pages) */
.v2 .steps{gap:12px;border-top:0}
.v2 .steps .step:nth-child(n){padding:22px 20px 20px;border:1px solid var(--v-line);border-radius:18px;background:#fff}
.v2 .steps .step::before{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-bottom:18px;border-radius:50%;background:var(--v-lime);font:600 12.5px/1 var(--v-font);letter-spacing:0;color:var(--v-dark)}
/* What one standard saves: tinted tiles */
.v2 #delivery .posx{gap:14px;border-top:0}
.v2 #delivery .posx>div:nth-child(n){padding:24px;border:0;border-radius:18px;background:var(--v-wash)}
.v2 #delivery .posx>div:nth-child(2){background:var(--v-sand)}
.v2 #delivery .posx>div:nth-child(3){background:var(--v-mint)}
.v2 #delivery .posx>div:nth-child(4){background:var(--v-sky)}
/* Handover / support, and testimonials: cards */
.v2 .hand{gap:16px;border-top:0}
.v2 .hand .box:nth-child(n){margin-top:0;padding:30px 32px;border:1px solid var(--v-line);border-radius:20px;background:var(--v-bg2)}
.v2 .tq{gap:16px;border-top:0}
.v2 .tq figure:nth-child(n){padding:28px;border:0;border-radius:20px;background:var(--v-wash)}
.v2 .tq figure:nth-child(2){background:var(--v-sand)}
.v2 .tq figure:nth-child(3){background:var(--v-mint)}
/* 3 - service and industry pages: a photo beside the first block of text */
.v2 .foto-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,3.4vw,48px);align-items:start}
.v2 .foto-row+.grid{margin-top:28px}
@media(max-width:900px){.v2 .foto-row{grid-template-columns:1fr}.v2 .foto-row .foto{order:-1}}
/* MyPI menu in the header: the pill is now a button that opens a small panel (markup in tools/chrome.py) */
.nv-my{position:relative}
.nv-my>.nv-mypi{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid var(--v-line);border-radius:999px;background:var(--v-bg);color:var(--v-ink);font:500 14px/1 var(--v-font);white-space:nowrap;cursor:pointer;transition:border-color .2s}
.nv-my>.nv-mypi:hover,.nv-my.open>.nv-mypi,.nv-my>.nv-mypi.is-cur{border-color:var(--v-ink)}
.nv-my>.nv-mypi>svg:first-child{width:28px;height:28px;transform:none}
.nv-my>.nv-mypi>svg:last-child{width:12px;height:12px;transition:transform .15s}
.nv-my .nv-my-sub{left:auto;right:0;width:380px;padding:8px;gap:2px;border-radius:20px;background:#fff;color:var(--v-ink)}
.nv-my-h{display:flex;align-items:baseline;gap:10px;margin:0;padding:10px 12px 8px}
.nv-my-h b{font:600 15px/1.2 var(--v-font);color:var(--v-ink)}
.nv-my-h span{font:400 13px/1.2 var(--v-font);color:var(--v-ink2)}
.nv-my .nv-my-sub a.nv-my-a{display:flex;flex-direction:row;align-items:center;gap:14px;padding:10px 12px;border-radius:14px;color:var(--v-ink);text-decoration:none;transition:background .2s}
.nv-my .nv-my-sub a.nv-my-a:hover{background:var(--v-wash)}
.nv-my-a .ic{flex:0 0 42px;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--v-wash);color:var(--v-brand);transition:background .2s,color .2s}
.nv-my-a:hover .ic{background:var(--v-lime);color:var(--v-dark)}
.nv-my-a .ic svg{width:21px;height:21px}
.nv-my-a .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.nv-my-a .tx b{font:500 15px/1.25 var(--v-font)}
.nv-my-a .tx small{font:400 13px/1.35 var(--v-font);color:var(--v-ink2)}
.nv-my-more{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;padding:12px 12px 4px;border-top:1px solid var(--v-line)}
.nv-my .nv-my-sub .nv-my-more a{display:inline-flex;flex-direction:row;padding:7px 12px;border:1px solid var(--v-line);border-radius:999px;font:500 13px/1 var(--v-font);color:var(--v-ink);text-decoration:none;white-space:nowrap}
.nv-my .nv-my-sub .nv-my-more a:hover{border-color:var(--v-ink);background:none}
.nv-my-foot{display:flex;align-items:baseline;gap:8px;margin:0;padding:10px 12px 8px;font:400 13px/1.3 var(--v-font);color:var(--v-ink2)}
.nv-my .nv-my-sub .nv-my-foot a{display:inline;padding:0;font:600 14px/1.3 var(--v-font);font-variant-numeric:tabular-nums;color:var(--v-ink);text-decoration:none}
.nv-my-foot span{margin-left:auto}
@media(max-width:1040px){
.nv-my{flex:1 1 100%}
.nv-my>.nv-mypi{width:100%;padding-right:16px}
.nv-my>.nv-mypi>svg:last-child{margin-left:auto}
.nv-my .nv-my-sub{position:static;width:auto;margin-top:8px;border:1px solid var(--v-line);box-shadow:none}
}
/* -----------------------------------------------------------------------------------------------------
Second pass, 2026-11-15. Mario: "model it on squareup.com/au - that design is close to what I want."
What is borrowed is the method, not the brand: white pages, one neutral grey for tiles and panels, one
near-black band, large light-weight headlines, rectangular buttons, a centred hero over one big rounded
photo, a filter row, picture tiles with a caption underneath, ruled "situation -> answer" rows.
Colours, logo, words and pictures stay ours. These rules come last and replace the pastel tints above.
----------------------------------------------------------------------------------------------------- */
:root,body.v2,body.lite{--v-bg2:#F4F4F1;--v-line:#E3E4DF;--v-wash:#F4F4F1;--v-sand:#F4F4F1;--v-mint:#F4F4F1;--v-sky:#F4F4F1;--v-link:#23733A;--v-night:#0B0E0C;--v-pine:#1E4A34}
/* type: lighter, larger, tighter */
.v2 h1,.v2 h2,.lite h1,.lite h2{font-weight:400;letter-spacing:-.045em}
.v2 h3,.lite h3{font-weight:450}
html[lang^="zh"] :is(.v2,.lite) :is(h1,h2){font-weight:500;letter-spacing:-.01em}
/* buttons: rectangles, filled + outlined */
.b,.lite .btn,.nv-right>a.nv-cta{border-radius:10px}
.b-primary,.nv-right>a.b-primary{background:var(--v-night)}
.b-primary:hover,.nv-right>a.b-primary:hover{background:var(--v-link)}
.b-ghost{border-color:var(--v-ink)}
/* pages are white; grey is for tiles and panels inside them */
.v2 .sec{padding:clamp(56px,7vw,104px) 0}
.v2 .sec--alt,.v2 .cs-sec.alt{background:var(--v-bg)}
.v2 #contact{background:var(--v-bg2)}
.v2 .sp-hero,.lite section.pagehero.pagehero{background:none}
.v2 .glance-box{background:var(--v-bg2);border:0;box-shadow:none}
/* hero: centred headline, two buttons, one big photo, the industry buttons */
.v2 .hh{padding:clamp(44px,6vw,88px) 0 0;background:none;text-align:center}
.v2 .hh>.wrap{display:block}
.v2 .hh .pill{display:inline-flex;justify-content:center;margin:0 auto 26px}
.v2 .hh h1{max-width:21ch;margin:0 auto;font-size:clamp(36px,5.1vw,70px);line-height:1.06;font-weight:400;letter-spacing:-.05em}
html[lang^="zh"] .v2 .hh h1{max-width:none;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.v2 .hh .lead{max-width:58ch;margin:24px auto 0;font-size:19px;text-align:center}
.v2 .hh .actions{justify-content:center;gap:12px;margin-top:30px;padding:0}
.v2 .hh .actions a.b-ghost{min-height:50px;padding:0 24px;border:1px solid var(--v-ink);border-radius:10px;background:none;text-decoration:none}
.v2 .hh .actions a.b-ghost::after{display:none}
.v2 .hh .tr{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 30px;margin:28px 0 0;border-top:0;font-size:14.5px;color:var(--v-ink2)}
.v2 .hh .tr li:nth-child(n){padding:0;border:0}
@media(max-width:760px){.v2 .hh .tr{flex-direction:column;align-items:center;gap:6px}}
.v2 .hh-photo{margin:clamp(36px,5vw,64px) 0 0;border-radius:22px;overflow:hidden;background:var(--v-bg2)}
.v2 .hh-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.v2 .seg{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:28px;text-align:left}
.v2 .seg-l{margin-right:10px;font:500 15.5px/1.3 var(--v-font);color:var(--v-ink)}
.v2 .seg button{min-height:46px;padding:0 22px;border:1px solid #C9CBC4;border-radius:999px;background:#fff;font:500 15px/1 var(--v-font);color:var(--v-ink);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.v2 .seg button:hover{border-color:var(--v-ink)}
.v2 .seg button[aria-pressed="true"]{border-color:var(--v-night);background:var(--v-night);color:#fff}
.v2 .seg-more{margin-left:auto;font:500 15.5px/1.3 var(--v-font);color:var(--v-link);text-decoration:none}
.v2 .seg-more:hover{text-decoration:underline}
.v2 .seg-more[hidden]{display:none}
/* services: a picture tile with the caption underneath, no box */
.v2 #services{padding-top:clamp(64px,7.5vw,112px)}
.v2 #services .grid{gap:40px 28px}
.v2 #services a.card,.v2 #services a.card:hover{gap:6px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;overflow:visible}
.v2 #services a.card[hidden]{display:none}
.v2 #services .card-ph{margin-bottom:16px;border-radius:20px;transition:opacity .25s}
.v2 #services a.card:hover .card-ph{opacity:.88}
.v2 #services .card h3{padding:0;font-size:21px;font-weight:500;letter-spacing:-.02em;color:var(--v-link)}
.v2 #services .card p{padding:0;font-size:16px;line-height:1.5;color:var(--v-ink)}
.v2 #services a.card .more:nth-child(n),.v2 #services a.card:hover .more:nth-child(n){display:none}
/* typical site: the diagram in its own section */
.v2 .typ{padding-top:0}
.v2 .typ .hh-visual{margin-top:0}
.v2 .typ .hh-cap{display:none}
/* AI: grey tiles */
.v2 .aix>.aix-i:nth-child(n){border:0;background:var(--v-bg2)}
.v2 .aix>a.aix-i:hover{box-shadow:none;background:#ECECE8}
.v2 .aix .pic{background:#fff}
/* POS strengths: one grey panel, white tiles inside */
.v2 .posx-g{padding:clamp(20px,4vw,56px);border-radius:26px;background:var(--v-bg2)}
.v2 .posx-g .posx>div:nth-child(n){background:#fff}
/* projects: grey side cards */
.v2 .pj-side .card{border:0;border-radius:22px;background:var(--v-bg2)}
/* four situations: numbered rows - the situation on the left, what we do on the right */
.v2 #scenarios .grid{display:block;border-top:1px solid var(--v-ink)}
.v2 #scenarios .card:nth-child(n){display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.15fr);column-gap:22px;row-gap:12px;align-items:start;padding:34px 0;border:0;border-bottom:1px solid var(--v-line);border-radius:0;background:none}
.v2 #scenarios a.card:hover{box-shadow:none;transform:none}
.v2 #scenarios .card:nth-child(n)::before{content:counter(sc);grid-column:1;grid-row:1/span 4;align-self:center;width:40px;height:40px;margin:0;border:1.5px solid var(--v-ink);background:none;font:500 16px/1 var(--v-font);color:var(--v-ink)}
.v2 #scenarios .card>h3{grid-column:2;grid-row:1/span 4;align-self:center;font-size:clamp(24px,2.7vw,36px);font-weight:400;letter-spacing:-.04em}
html[lang^="zh"] .v2 #scenarios .card>h3{font-weight:500;letter-spacing:-.01em}
.v2 #scenarios .card>:not(h3){grid-column:3}
.v2 #scenarios .card>.more{padding-top:0;color:var(--v-link)}
.v2 #scenarios .tag{border-color:var(--v-line);background:none}
@media(max-width:820px){
.v2 #scenarios .card:nth-child(n){grid-template-columns:36px minmax(0,1fr);column-gap:14px;padding:26px 0}
.v2 #scenarios .card:nth-child(n)::before{grid-row:1;width:32px;height:32px;font-size:14px}
.v2 #scenarios .card>h3{grid-row:1}
.v2 #scenarios .card>:not(h3){grid-column:2}
}
/* the one dark band: near-black with a green glow */
.v2 .sec--dark{background:radial-gradient(34% 62% at 97% 64%,rgba(153,203,82,.36),transparent 72%),var(--v-night)}
.v2 .vfm>div:nth-child(n){border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
.v2 .vfm h3{color:#fff}
/* steps, handover and quotes: neutral tiles; the first quote is the one coloured card */
.v2 .steps .step:nth-child(n){border:0;background:var(--v-bg2)}
.v2 .steps .step::before{background:var(--v-night);color:#fff}
.v2 .hand .box:nth-child(n){border:0}
.v2 .tq figure:nth-child(1){background:var(--v-pine)}
.v2 .tq figure:nth-child(1) blockquote{font:400 21px/1.36 var(--v-font);letter-spacing:-.015em;color:#fff}
.v2 .tq figure:nth-child(1) figcaption{color:rgba(255,255,255,.78)}
.v2 .tq figure:nth-child(1) figcaption b{color:#fff}
/* MyPI menu follows the neutral tiles */
.nv-my-a:hover .ic{background:var(--v-night);color:#fff}
/* -----------------------------------------------------------------------------------------------------
Inner pages in the same manner (2026-11-15, Mario: "do the inner pages this way too").
Service + industry pages (tools/pages_v2.py): centred headline, a full-width photo where there is a
sharp one, the "at a glance" facts as a ruled strip, big headings above each block instead of a narrow
label column, grey tiles, one coloured card for the related project, a near-black closing panel.
The other pages (.lite: About, MyPI, forms, guides, legal): the same centred page top and tiles.
----------------------------------------------------------------------------------------------------- */
.v2 .sp-hero{padding:clamp(24px,3.4vw,44px) 0 clamp(36px,5vw,64px);border-bottom:0;text-align:center}
.v2 .sp-hero .crumbs{margin-bottom:clamp(28px,4.4vw,56px)}
.v2 .sp-top{display:block}
.v2 .sp-top>div:first-child{max-width:940px;margin:0 auto}
.v2 .sp-top .pill{display:inline-flex;justify-content:center}
.v2 .sp-top h1{max-width:22ch;margin:20px auto 0;font-size:clamp(34px,4.8vw,64px);line-height:1.07;font-weight:400;letter-spacing:-.05em}
html[lang^="zh"] .v2 .sp-top h1{max-width:none;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.v2 .sp-top .lead{max-width:62ch;margin:22px auto 0;font-size:19px}
.v2 .sp-top .actions{justify-content:center;margin-top:30px}
.v2 .sp-photo{margin:clamp(36px,5vw,60px) 0 0;border-radius:22px;overflow:hidden;background:var(--v-bg2)}
.v2 .sp-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.v2 .glance-box{margin-top:clamp(32px,4.4vw,56px);padding:0;border-radius:0;background:none;text-align:left}
.v2 .gl-h{margin:0 0 14px;font:500 13px/1 var(--v-font);letter-spacing:.08em;color:var(--v-ink2)}
.v2 .glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 28px}
.v2 .glance li:nth-child(n){padding:16px 0 18px;border-top:1px solid var(--v-ink);font-size:14.5px}
.v2 .glance li b{margin-bottom:4px;font-weight:500}
/* blocks: a big heading on top, the content underneath, white space instead of rules */
.v2 .cs-sec{padding:clamp(48px,6vw,88px) 0;border-top:0}
.v2 .cs-row{grid-template-columns:1fr;gap:clamp(22px,3vw,36px)}
.v2 .cs-row>h2{position:static;max-width:22ch;font-size:clamp(28px,3.5vw,46px);line-height:1.08}
.v2 .duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.v2 .duo .prose p{font-size:19px;line-height:1.55}
.v2 .duo .sub-h{margin-top:0}
@media(max-width:860px){.v2 .duo{grid-template-columns:1fr}}
.v2 .cs-sec .card:not(.rel){border:0;border-radius:20px;background:var(--v-bg2)}
.v2 .cs-sec a.card:not(.rel):hover{box-shadow:none;transform:none;background:#ECECE8}
.v2 .cs-sec .xp{padding:clamp(16px,2.6vw,32px);border-radius:24px;background:var(--v-bg2)}
/* related project: the one coloured card on the page */
.v2 .cs-sec .card.rel{max-width:none;padding:clamp(26px,3.6vw,48px);border:0;border-radius:24px;background:var(--v-pine);color:#fff}
.v2 .cs-sec .card.rel h3{max-width:26ch;font-size:clamp(24px,2.8vw,36px);font-weight:400;letter-spacing:-.035em;color:#fff}
.v2 .cs-sec .card.rel p{max-width:64ch;color:rgba(255,255,255,.82)}
.v2 .cs-sec .card.rel .tag{border-color:rgba(255,255,255,.34);color:#fff}
.v2 .cs-sec .card.rel .more,.v2 .cs-sec .card.rel .pj-meta{color:var(--v-lime)}
.v2 .cs-sec a.card.rel:hover{box-shadow:none;transform:none;background:#235740}
/* closing panel */
.v2 .cta-band .in{padding:clamp(30px,4.6vw,64px);border-radius:26px;background:radial-gradient(36% 90% at 96% 70%,rgba(153,203,82,.34),transparent 72%),var(--v-night)}
.v2 .cta-band h2{font-size:clamp(28px,3.4vw,44px);font-weight:400}
.v2 .cta-band .b-primary{border-radius:10px}
/* the other pages */
/* page top: centred, except where the page top carries a form beside the text (MyPI sign-in) */
.lite section.pagehero.pagehero{border-bottom:0}
.lite section.pagehero:not(:has(form,#login)){text-align:center}
.lite section.pagehero:not(:has(form,#login)) .crumbs{justify-content:center}
.lite section.pagehero:not(:has(form,#login)) h1{max-width:20ch;margin-left:auto;margin-right:auto}
.lite section.pagehero:not(:has(form,#login)) :is(.lede,.lead,p){margin-left:auto;margin-right:auto}
.lite section.pagehero:not(:has(form,#login)) :is(.actions,.btn-row,.hero-actions,.chips,.cta-row,.stemloc,ul){justify-content:center}
.lite .pagehero h1{font-size:clamp(36px,5vw,68px);line-height:1.06;font-weight:400;letter-spacing:-.05em}
html[lang^="zh"] .lite .pagehero h1{max-width:none;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.lite .card,.lite .cc-card,.lite .tcard,.lite .scard,.lite .panel{border-color:transparent;background:var(--v-bg2);box-shadow:none}
.lite .bg-mist{background:var(--v-bg)}
/* -----------------------------------------------------------------------------------------------------
The loop (2026-11-15): "we only win when you're trading" as a ring that closes. Markup: tools/home_wheel.py.
One cycle is 16 s: the coloured band grows clockwise from the top and shuts the loop at 92 %, glows, holds,
then starts again. Each step lights up when the band reaches it (0 / 23 / 46 / 69 %) and stays lit; the
list beside it follows the same clock. With reduced motion there is no animation and the base styles
below show the finished state: ring closed, every step lit.
----------------------------------------------------------------------------------------------------- */
.v2 .wh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.v2 .wh-fig{margin:0;padding:clamp(14px,2.4vw,32px);border-radius:26px;background:var(--v-bg2)}
.v2 .wh-svg{display:block;width:100%;max-width:540px;height:auto;margin:0 auto;overflow:visible}
.v2 .wh-track{fill:none;stroke:#E2E6D8;stroke-width:34}
.v2 .wh-arc{fill:none;stroke:url(#whg);stroke-width:34;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.v2 .wh-head{fill:#fff;opacity:.92}
.v2 .wh-b{fill:var(--v-night);stroke:#fff;stroke-width:3}
.v2 .wh-num{font:500 17px var(--v-font);text-anchor:middle;fill:#fff}
.v2 .wh-lab{font:500 16px var(--v-font);fill:var(--v-ink)}
.v2 .wh-c{font:400 23px var(--v-font);letter-spacing:-.03em;text-anchor:middle;fill:var(--v-ink)}
.v2 .wh-c2{fill:var(--v-link)}
html[lang^="zh"] .v2 .wh-c{font-weight:500;letter-spacing:0}
.v2 .wh-steps{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;counter-reset:wh}
.v2 .wh-s{counter-increment:wh;position:relative;padding:20px 22px 20px 70px;border-radius:18px}
.v2 .wh-s::before{content:counter(wh);position:absolute;left:20px;top:20px;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1.5px solid var(--v-night);border-radius:50%;background:var(--v-night);font:500 15px/1 var(--v-font);color:#fff}
.v2 .wh-s b{display:block;margin-bottom:4px;font:500 20px/1.25 var(--v-font);letter-spacing:-.02em;color:var(--v-ink)}
.v2 .wh-s span{display:block;font-size:15.5px;line-height:1.5;color:var(--v-ink2)}
.v2 .wh-note{margin:clamp(28px,3.4vw,44px) 0 0;font-size:16.5px;color:var(--v-ink2)}
.v2 .wh-note b{font-weight:500;color:var(--v-ink)}
@media(max-width:900px){.v2 .wh{grid-template-columns:1fr}.v2 .wh-svg{max-width:420px}}
@media(prefers-reduced-motion:no-preference){
.v2 .wh-arc{animation:whArc 16s linear infinite}
.v2 .wh-run{transform-origin:220px 220px;animation:whSpin 16s linear infinite}
.v2 .n1 .wh-b{animation:whB1 16s linear infinite}.v2 .n1 .wh-num{animation:whT1 16s linear infinite}
.v2 .n2 .wh-b{animation:whB2 16s linear infinite}.v2 .n2 .wh-num{animation:whT2 16s linear infinite}
.v2 .n3 .wh-b{animation:whB3 16s linear infinite}.v2 .n3 .wh-num{animation:whT3 16s linear infinite}
.v2 .n4 .wh-b{animation:whB4 16s linear infinite}.v2 .n4 .wh-num{animation:whT4 16s linear infinite}
.v2 .wh-s:nth-child(1){animation:whS1 16s linear infinite}.v2 .wh-s:nth-child(1)::before{animation:whD1 16s linear infinite}
.v2 .wh-s:nth-child(2){animation:whS2 16s linear infinite}.v2 .wh-s:nth-child(2)::before{animation:whD2 16s linear infinite}
.v2 .wh-s:nth-child(3){animation:whS3 16s linear infinite}.v2 .wh-s:nth-child(3)::before{animation:whD3 16s linear infinite}
.v2 .wh-s:nth-child(4){animation:whS4 16s linear infinite}.v2 .wh-s:nth-child(4)::before{animation:whD4 16s linear infinite}
}
/* the band and its leading point */
@keyframes whArc{0%{stroke-dashoffset:100;filter:none}92%{stroke-dashoffset:0;filter:none}95%{stroke-dashoffset:0;filter:drop-shadow(0 0 10px rgba(120,190,70,.85))}100%{stroke-dashoffset:0;filter:none}}
@keyframes whSpin{0%{transform:rotate(0);opacity:.92}92%{transform:rotate(360deg);opacity:.92}94%,100%{transform:rotate(360deg);opacity:0}}
/* steps on the ring: white until the band arrives, then dark */
@keyframes whB1{0%,100%{fill:var(--v-night)}}
@keyframes whB2{0%,22.9%{fill:#fff}23%,100%{fill:var(--v-night)}}
@keyframes whB3{0%,45.9%{fill:#fff}46%,100%{fill:var(--v-night)}}
@keyframes whB4{0%,68.9%{fill:#fff}69%,100%{fill:var(--v-night)}}
@keyframes whT1{0%,100%{fill:#fff}}
@keyframes whT2{0%,22.9%{fill:var(--v-ink)}23%,100%{fill:#fff}}
@keyframes whT3{0%,45.9%{fill:var(--v-ink)}46%,100%{fill:#fff}}
@keyframes whT4{0%,68.9%{fill:var(--v-ink)}69%,100%{fill:#fff}}
/* the list: the current step sits on a grey tile; a step's number fills once it has been reached */
@keyframes whS1{0%,22.9%{background:var(--v-bg2)}23%,100%{background:transparent}}
@keyframes whS2{0%,22.9%{background:transparent}23%,45.9%{background:var(--v-bg2)}46%,100%{background:transparent}}
@keyframes whS3{0%,45.9%{background:transparent}46%,68.9%{background:var(--v-bg2)}69%,100%{background:transparent}}
@keyframes whS4{0%,68.9%{background:transparent}69%,100%{background:var(--v-bg2)}}
@keyframes whD1{0%,100%{background:var(--v-night);color:#fff}}
@keyframes whD2{0%,22.9%{background:transparent;color:var(--v-ink)}23%,100%{background:var(--v-night);color:#fff}}
@keyframes whD3{0%,45.9%{background:transparent;color:var(--v-ink)}46%,100%{background:var(--v-night);color:#fff}}
@keyframes whD4{0%,68.9%{background:transparent;color:var(--v-ink)}69%,100%{background:var(--v-night);color:#fff}}
/* the industry buttons now sit in the services section, above the cards */
.v2 #services .seg{margin:0 0 clamp(26px,3vw,40px)}
/* the short headline runs large, on two lines: the promise, then the condition */
.v2 .hh h1{max-width:none;font-size:clamp(40px,6.6vw,96px);line-height:1.02}
.v2 .hh h1 em{display:block}
html[lang^="zh"] .v2 .hh h1{font-size:clamp(38px,6vw,84px);line-height:1.16}
/* -----------------------------------------------------------------------------------------------------
Network page (2026-11-15): the "solution" layout. Markup and words: tools/net_solution.py.
A section bar that follows the reader, a picture of the shop with numbered pins, the benefits in three
groups on a grey band, a typical setup built from product photos (HTML, so it re-flows on a phone),
and a dark band for "why the network has to be ours". The pictures are Ruijie Reyee's. The bar's current-section state is set by assets/v2.js;
without the script it is a plain row of in-page links.
----------------------------------------------------------------------------------------------------- */
.v2 .sp-tabs{position:sticky;top:84px;z-index:60;display:flex;gap:4px;width:fit-content;max-width:calc(100% - 32px);margin:0 auto;padding:6px;border:1px solid var(--v-line);border-radius:14px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 30px -20px rgba(11,14,12,.4);overflow-x:auto;scrollbar-width:none}
.v2 .sp-tabs::-webkit-scrollbar{display:none}
.v2 .sp-tabs a{flex:none;padding:11px 18px;border-radius:10px;font:500 14.5px/1.2 var(--v-font);color:var(--v-ink);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.v2 .sp-tabs a:hover{background:var(--v-bg2)}
.v2 .sp-tabs a.on{background:var(--v-night);color:#fff}
.v2 .sp-tabs~.cs-sec[id]{scroll-margin-top:136px}
@media(max-width:700px){.v2 .sp-tabs{top:74px}.v2 .sp-tabs a{padding:10px 14px;font-size:14px}}
/* overview: the picture of the shop, our pins on it, and the legend */
.v2 .np-lede{max-width:62ch;margin:0 0 clamp(24px,3vw,36px);font-size:19px;line-height:1.55;color:var(--v-ink2)}
.v2 .np-fig{margin:0;padding:clamp(10px,2vw,28px) clamp(10px,4vw,64px);border-radius:26px;background:var(--v-bg2)}
.v2 .np-shopbox{position:relative}
.v2 .np-shopbox img{display:block;width:100%;height:auto}
.v2 .np-dot{position:absolute;display:flex;align-items:center;justify-content:center;width:clamp(24px,2.6vw,34px);height:clamp(24px,2.6vw,34px);border:2.5px solid #fff;border-radius:50%;background:var(--v-pine);box-shadow:0 6px 14px -6px rgba(11,14,12,.55);font:500 clamp(12.5px,1.25vw,15.5px)/1 var(--v-font);font-style:normal;color:#fff;transform:translate(-50%,-50%)}
.v2 .np-list{margin:0;padding:0;list-style:none;counter-reset:np}
.v2 .np-list li{counter-increment:np;position:relative;padding:15px 0 15px 50px;border-top:1px solid var(--v-line)}
.v2 .np-list li:last-child{border-bottom:1px solid var(--v-line)}
.v2 .np-list li::before{content:counter(np);position:absolute;left:0;top:15px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--v-pine);font:500 14.5px/1 var(--v-font);color:#fff}
.v2 .np-list b{display:block;font:500 17.5px/1.3 var(--v-font);letter-spacing:-.015em;color:var(--v-ink)}
.v2 .np-list span{display:block;margin-top:3px;font-size:15px;line-height:1.5;color:var(--v-ink2)}
/* wide screens: the picture runs the full width and the legend sits under it as five columns */
@media(min-width:901px){
.v2 .np-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 24px;margin-top:clamp(20px,2.6vw,32px)}
.v2 .np-list li:nth-child(n){padding:16px 0 0;border-top:1px solid var(--v-ink);border-bottom:0}
.v2 .np-list li::before{position:static;margin-bottom:14px}
}
@media(max-width:900px){.v2 .np-list{margin-top:18px}.v2 .np-fig{padding:10px}}
/* benefits: three groups on the grey band, white tiles */
.v2 .cs-sec.np-band{background:var(--v-bg2)}
.v2 .np-g{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(18px,3vw,44px);padding:clamp(24px,3vw,36px) 0;border-top:1px solid #D6D7D0}
.v2 .np-g:last-child{padding-bottom:0}
.v2 .np-for{display:inline-block;padding:7px 10px;border-radius:6px;background:var(--v-night);font:500 12.5px/1 var(--v-font);color:#fff}
.v2 .np-gh h3{margin:14px 0 0;font:400 clamp(22px,2.3vw,30px)/1.15 var(--v-font);letter-spacing:-.03em;color:var(--v-ink)}
html[lang^="zh"] .v2 .np-gh h3{font-weight:500;letter-spacing:0;line-height:1.3}
.v2 .np-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.v2 .np-tiles.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.v2 .np-t{padding:22px 22px 24px;border-radius:18px;background:#fff}
.v2 .np-i{display:block;width:30px;height:30px;margin-bottom:18px;fill:none;stroke:var(--v-link);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.v2 .np-i .f{fill:var(--v-link);stroke:none}
.v2 .np-t b{display:block;font:500 17.5px/1.3 var(--v-font);letter-spacing:-.015em;color:var(--v-ink)}
.v2 .np-t p{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--v-ink2)}
@media(max-width:960px){.v2 .np-g{grid-template-columns:1fr}}
@media(max-width:700px){.v2 .np-tiles,.v2 .np-tiles.n4{grid-template-columns:1fr}}
/* typical setup: the chain from the street to the devices in product photos, then what changes with size */
.v2 .tp{padding:clamp(14px,2.2vw,28px);border-radius:26px;background:var(--v-bg2)}
.v2 .tp-chain{display:grid;grid-template-columns:minmax(0,.8fr) 26px minmax(0,1fr) 26px minmax(0,1fr) 26px minmax(0,1fr);align-items:stretch}
.v2 .tp-links{display:flex;flex-direction:column;justify-content:center;gap:12px}
.v2 .tp-n{padding:16px 14px;border:1.5px solid var(--v-ink);border-radius:14px;background:#fff;text-align:center}
.v2 .tp-n b,.v2 .tp-p b{display:block;font:500 17px/1.3 var(--v-font);letter-spacing:-.015em;color:var(--v-ink)}
.v2 .tp-n span,.v2 .tp-p span{display:block;margin-top:3px;font-size:13.5px;line-height:1.4;color:var(--v-ink2)}
.v2 .tp-sb{border-style:dashed}
.v2 .tp-join{display:block;align-self:center;height:1.5px;background:var(--v-ink)}
.v2 .tp-p{position:relative;display:flex;flex-direction:column;margin:0;padding:18px 16px 22px;border-radius:18px;background:#fff;text-align:center}
.v2 .tp-p img{display:block;width:100%;height:clamp(130px,14vw,190px);margin:14px 0 16px;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(11,14,12,.16))}
.v2 .tp-p figcaption{margin-top:auto}
.v2 .tp-tag{position:absolute;top:12px;left:12px;padding:5px 8px;border-radius:6px;background:var(--v-lime);font:500 11.5px/1 var(--v-font);font-style:normal;color:var(--v-ink)}
.v2 .tp-live{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font:500 13px/1.2 var(--v-font);font-style:normal;color:var(--v-link)}
.v2 .tp-live::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#7DB53D}
.v2 .tp-dev{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px;padding:14px 18px;border-radius:14px;background:#fff}
.v2 .tp-dev b{font:500 13.5px/1 var(--v-font);color:var(--v-ink2)}
.v2 .tp-dev ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.v2 .tp-dev li{padding:8px 12px;border-radius:8px;background:var(--v-bg2);font-size:14px;line-height:1.3;color:var(--v-ink)}
.v2 .np-sizes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;margin:clamp(26px,3.4vw,44px) 0 0;padding:0;list-style:none}
.v2 .np-sizes li{padding:20px 0 22px;border-top:1px solid var(--v-ink)}
.v2 .np-sizes b{display:block;font:400 clamp(20px,2vw,25px)/1.2 var(--v-font);letter-spacing:-.025em;color:var(--v-ink)}
html[lang^="zh"] .v2 .np-sizes b{font-weight:500;letter-spacing:0}
.v2 .np-sizes span{display:block;margin-top:6px;font-size:15.5px;line-height:1.55;color:var(--v-ink2)}
.v2 .np-equip{margin:0;padding-top:16px;border-top:1px solid var(--v-line);font-size:14.5px;line-height:1.5;color:var(--v-ink2)}
@media(max-width:900px){
.v2 .tp-chain{grid-template-columns:1fr}
.v2 .tp-links{flex-direction:row}
.v2 .tp-links .tp-n{flex:1}
.v2 .tp-join{justify-self:center;width:1.5px;height:20px}
.v2 .tp-p img{height:150px}
.v2 .np-sizes{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:no-preference){.v2 .tp-live::before{animation:tpDot 2.4s ease-in-out infinite}}
@keyframes tpDot{0%,100%{box-shadow:0 0 0 0 rgba(125,181,61,.6)}60%{box-shadow:0 0 0 7px rgba(125,181,61,0)}}
/* why the network has to be ours: the dark band */
.v2 .cs-sec.np-why{background:var(--v-night);color:#fff}
.v2 .np-why-top{max-width:840px}
.v2 .np-why .kick{color:#BDE66E}
.v2 .np-why h2{margin:0;font:400 clamp(30px,4.2vw,56px)/1.05 var(--v-font);letter-spacing:-.045em;color:#fff}
html[lang^="zh"] .v2 .np-why h2{font-weight:500;letter-spacing:-.01em;line-height:1.2}
.v2 .np-why-top p{max-width:62ch;margin:22px 0 0;font-size:19px;line-height:1.55;color:rgba(255,255,255,.78)}
.v2 .np-reasons{margin:clamp(32px,4.4vw,60px) 0 0;padding:0;list-style:none;counter-reset:wy}
.v2 .np-reasons li{counter-increment:wy;display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.35fr);gap:8px 28px;align-items:baseline;padding:22px 0;border-top:1px solid rgba(255,255,255,.18)}
.v2 .np-reasons li:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.v2 .np-reasons li::before{content:"0" counter(wy);font:500 14px/1 var(--v-font);color:#BDE66E}
.v2 .np-reasons b{font:400 clamp(20px,2.1vw,27px)/1.2 var(--v-font);letter-spacing:-.025em;color:#fff}
html[lang^="zh"] .v2 .np-reasons b{font-weight:500;letter-spacing:0;line-height:1.35}
.v2 .np-reasons span{font-size:16px;line-height:1.55;color:rgba(255,255,255,.76)}
@media(max-width:820px){.v2 .np-reasons li{grid-template-columns:40px minmax(0,1fr)}.v2 .np-reasons span{grid-column:2}}
.v2 .np-why-note{margin:clamp(26px,3vw,40px) 0 0;font-size:17px;line-height:1.5;color:rgba(255,255,255,.78)}
.v2 .np-why-note b{font-weight:500;color:#fff}
.v2 .np-why-note a{margin-left:6px;font-weight:500;color:#BDE66E;text-decoration:none;white-space:nowrap}
.v2 .np-why-note a::after{content:" \2192"}
.v2 .np-why-note a:hover{text-decoration:underline}
/* headings above each block break into even lines rather than leaving one word behind */
.v2 .cs-row>h2{text-wrap:balance}
/* a banner-shaped hero photo (network page: the router family) keeps its width instead of being cut to 16:9;
on a phone it is cropped taller, kept to the left where the two gateways stand */
.v2 .sp-photo.wide img{aspect-ratio:2.25/1}
@media(max-width:700px){.v2 .sp-photo.wide img{aspect-ratio:3/2;object-position:12% 50%}}