/** Shopify CDN: Minification failed

Line 986:0 Unexpected "<"

**/

/* ============================================================
   ColorForge 2.0 — tokens.
   Spectrum values come from the logo colour wheel and are the
   page's only decorative palette. One category = one segment.
   ============================================================ */
:root{
  /* three tones: cream ground, brand teal, deep navy-teal anchor */
  --ground:#F6F4EF; --surface:#FFFFFF; --sunk:#EBE6DA;
  --line:#DDD6C7; --line-2:#C5BCA9;
  --navy:#143C4A; --navy-2:#1C5165; --navy-line:#2E5A69;
  --teal:#6DB3AA; --teal-d:#4F9E97; --teal-tint:#DBE9EA;
  --nav:#A5CCC2; --nav-line:#86B7AC; --nav-text:#123A45;
  --id-navy:#0B2A5B; --id-blue:#7FA8D9; --id-deep:#051C4D; --id-mist:#F4F6F9;
  /* content bands sit light under the navy chrome */
  --band:#E7EDEF; --band-2:#D9E3E7; --band-line:#C3D2D8;
  --band-text:#143C4A; --band-text-2:#4E6B78;
  --text:#143C4A; --text-2:#55707B;
  /* action colour: the copper running through the photography and the logo's warm arc */
  --accent:#C55E28; --accent-2:#A84C1C; --accent-lite:#EE9A63; --on-accent:#FFFFFF;
  --ok:#2F8F6A;
  --ship:#20684E;   /* 免运费徽标：白底上的小字，比 --ok 再深一档才够对比度 */
  --s1:#E8422E; --s2:#F0912F; --s3:#F5C61F; --s4:#8CBB4A; --s5:#2C93CC;
  --s6:#1B6FB3; --s7:#3E3272; --s8:#7B3F8C; --s9:#E0357F;
  --c-signs:var(--s4); --c-print:var(--s1); --c-displays:var(--s5);
  --c-photo:var(--s8); --c-supplies:var(--s2); --c-ai:var(--s9);
  /* 第七个一级栏目 Shop by：s7 是光谱里六个栏目都没占用的一色 */
  --c-shopby:var(--s7);
  --r:3px; --side:228px;
  /* 页眉 logo 的墨色单独开 token，深色模式要换，否则 #282828 压在 #13303B 上只有 1.06:1 */
  --logo-ink:#282828; --logo-sub:#0061AD;
  --disp:"Google Sans Display","Google Sans","DM Sans","Roboto",system-ui,sans-serif;
  --brand:"Montserrat","Century Gothic",var(--body);
  --cjk:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --body:"Google Sans Text","Roboto","DM Sans","Noto Sans SC",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0C1F27; --surface:#13303B; --sunk:#102730;
    --band:#173C49; --band-2:#1F4C5C; --band-line:#2E5F70;
    --band-text:#E4EEF0; --band-text-2:#9BB8C0;
    --text:#E4EEF0; --text-2:#9BB8C0; --line:#23454F; --line-2:#345D6B;
    --logo-ink:#F1F7F8; --logo-sub:#7CC0F0;
  }
}
:root[data-theme="dark"]{
      --ground:#0C1F27; --surface:#13303B; --sunk:#102730;
  --band:#173C49; --band-2:#1F4C5C; --band-line:#2E5F70;
  --band-text:#E4EEF0; --band-text-2:#9BB8C0;
  --text:#E4EEF0; --text-2:#9BB8C0; --line:#23454F; --line-2:#345D6B;
  --logo-ink:#F1F7F8; --logo-sub:#7CC0F0;
  --ship:#7FD9B0;
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--body);font-size:16.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

h1,h2,h3{font-family:var(--disp);font-weight:500;letter-spacing:-.018em;line-height:1.14;margin:0;text-wrap:balance}
h1{font-size:clamp(38px,4.0vw,56px);line-height:1.1}
h2{font-size:clamp(28px,2.7vw,38px);line-height:1.16}
h3{font-size:clamp(20px,1.55vw,24px);line-height:1.28;letter-spacing:-.012em}
p{margin:0}
.mono{font-family:var(--mono);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase}
.inner,.in{max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,2.6vw,44px)}
.sec{padding-block:clamp(48px,5vw,74px)}

/* ---- spectrum rail: the signature device ---- */
.rail{display:flex;height:5px;width:100%}
.rail i{flex:1;display:block}
.rail i:nth-child(1){background:var(--s1)} .rail i:nth-child(2){background:var(--s2)}
.rail i:nth-child(3){background:var(--s3)} .rail i:nth-child(4){background:var(--s4)}
.rail i:nth-child(5){background:var(--s5)} .rail i:nth-child(6){background:var(--s6)}
.rail i:nth-child(7){background:var(--s7)} .rail i:nth-child(8){background:var(--s8)}
.rail i:nth-child(9){background:var(--s9)}
.rail--load i{transform:scaleX(0);transform-origin:left;animation:railIn .5s cubic-bezier(.2,.7,.3,1) forwards}
.rail--load i:nth-child(1){animation-delay:.02s} .rail--load i:nth-child(2){animation-delay:.06s}
.rail--load i:nth-child(3){animation-delay:.10s} .rail--load i:nth-child(4){animation-delay:.14s}
.rail--load i:nth-child(5){animation-delay:.18s} .rail--load i:nth-child(6){animation-delay:.22s}
.rail--load i:nth-child(7){animation-delay:.26s} .rail--load i:nth-child(8){animation-delay:.30s}
.rail--load i:nth-child(9){animation-delay:.34s}
@keyframes railIn{to{transform:scaleX(1)}}

.mark{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.mark span:first-child{width:13px;height:13px;flex:none;background:var(--chip,var(--s5))}
.mark span:last-child{font-family:var(--mono);font-size:13.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--text-2)}
.on-ink .mark span:last-child{color:var(--band-text-2)}

.btn{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 24px;border:1px solid transparent;border-radius:var(--r);cursor:pointer;font-family:var(--body);font-size:16.5px;font-weight:600;transition:transform .12s ease,background .15s ease,border-color .15s ease}
.btn:active{transform:translateY(1px)}
.btn--go{background:var(--accent);color:var(--on-accent)}
.btn--go:hover{background:var(--accent-2)}
.btn--out{border-color:var(--line-2);color:var(--text);background:transparent}
.btn--out:hover{border-color:var(--text);background:var(--surface)}
.on-ink .btn--out{border-color:var(--band-line);color:var(--band-text)}
.on-ink .btn--out:hover{border-color:var(--band-text-2);background:rgba(255,255,255,.05)}
.btn--sm{height:46px;padding:0 16px;font-size:15px}
.arw{font-family:var(--mono);font-size:14px;line-height:1}

/* ============================ HEADER ============================ */
.topbar{background:var(--band);color:var(--band-text)}
.topbar .b{max-width:1640px;margin-inline:auto;padding-inline:clamp(16px,2vw,28px);display:flex;align-items:center;justify-content:space-between;gap:16px;height:36px;font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--band-text-2)}
.topbar b{color:var(--accent);font-weight:500}
.topbar .r{display:flex;gap:18px}
@media(max-width:820px){.topbar .r span:nth-child(n+2){display:none}}

.head{position:sticky;top:0;z-index:80;background:var(--surface);border-bottom:1px solid var(--line)}
.head .b{max-width:1640px;margin-inline:auto;padding-inline:clamp(16px,2vw,28px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:26px;height:86px}
.logo{display:flex;align-items:center;gap:11px}
.logo svg{display:block;width:44px;height:44px;flex:none}
.logo-t strong{display:block;font-family:var(--brand);font-weight:700;font-size:25px;letter-spacing:-.012em;line-height:1.02;color:var(--logo-ink)}
.logo-t em{display:block;font-family:var(--brand);font-style:italic;font-weight:700;font-size:10px;letter-spacing:.085em;color:var(--logo-sub);margin-top:4px}
.srch{display:flex;align-items:center;gap:10px;height:50px;padding:0 14px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);color:var(--text-2);font-size:17px}
.srch svg{flex:none;margin-left:auto;color:var(--text-2)}
.srch-m{display:none}
.dims.empty{display:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.q-warn{margin:8px 0 0;font-size:14px;line-height:1.45;color:var(--text-2);border-left:2px solid var(--s2);padding-left:10px}
.srch-m svg{color:var(--s9)}
.util{display:flex;align-items:center;gap:22px;font-size:17px;font-weight:600}
.util a{display:flex;align-items:center;gap:8px;white-space:nowrap}
.util a svg{flex:none}
.util .u1{color:var(--s6)} .util .u2{color:var(--s5)} .util .u3{color:var(--s4)}
.util a span{color:var(--text)}
@media(max-width:1080px){.head .b{grid-template-columns:auto 1fr;gap:14px}.srch{display:none}.srch-m{display:flex}}
@media(max-width:620px){.head .b{height:74px}.util a span{display:none}.util{gap:16px}}

.topnav{position:sticky;top:86px;z-index:75;background:var(--band);border-bottom:1px solid var(--band-line)}
.topnav .b{max-width:1640px;margin-inline:auto;padding-inline:clamp(16px,2vw,28px);display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none}
.topnav .b::-webkit-scrollbar{display:none}
.topnav a{position:relative;display:flex;align-items:center;gap:9px;white-space:nowrap;padding:0 24px;height:60px;color:var(--band-text);font-size:18px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.topnav a:first-child{padding-left:0}
.topnav a i{width:8px;height:8px;flex:none;display:block;background:var(--c)}
.topnav a::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:3px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .16s ease}
.topnav a:first-child::after{left:0}
.topnav a:hover::after{transform:scaleX(1)}

/* top-level dropdowns — panels live outside .b so the scroll container can't clip them */
.topnav a .cx{font-size:11px;opacity:.55;font-weight:400;margin-left:-2px}
.topnav a[aria-expanded="true"]::after{transform:scaleX(1)}
.topnav a[aria-expanded="true"] .cx{opacity:1}
.mega{position:absolute;left:0;right:0;top:100%;z-index:78;background:var(--surface);
  border-bottom:3px solid var(--c);box-shadow:0 24px 48px rgba(20,24,28,.24)}
.mega-in{max-width:1640px;margin-inline:auto;padding:26px clamp(16px,2vw,28px) 30px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px;align-items:start}
.mcol h4{margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:9px;font-size:16.5px;font-weight:700;color:var(--text)}
.mcol h4 i{width:8px;height:8px;flex:none;background:var(--c)}
/* the panels sit inside <nav class="topnav">, so undo the bar's link styling */
.mega a{position:static;display:block;height:auto;padding:7px 0;text-transform:none;
  letter-spacing:normal;font-size:15.5px;font-weight:400;color:var(--text-2);white-space:normal}
.mega a::after{display:none}
.mega a:hover{color:var(--c)}
.mcol--all{display:flex;align-items:flex-start}
.mega .megall{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:11px 15px;
  border:1px solid var(--line-2);border-radius:var(--r);font-family:var(--mono);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.mega .megall:hover{border-color:var(--c);color:var(--c)}
@media(max-width:1000px){.mega{display:none!important}.topnav a .cx{display:none}}

.langwrap{display:inline-flex;align-items:center}
#langSel{height:24px;width:auto;padding:0 22px 0 8px;border:1px solid var(--band-line);border-radius:2px;
  background:transparent;color:var(--band-text);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  background-image:linear-gradient(45deg,transparent 50%,var(--band-text-2) 50%),linear-gradient(135deg,var(--band-text-2) 50%,transparent 50%);
  background-position:calc(100% - 12px) 10px,calc(100% - 8px) 10px;background-size:4px 4px;background-repeat:no-repeat;cursor:pointer}
#langSel:hover{border-color:var(--band-text-2)}
#langSel option{background:var(--band);color:var(--band-text)}
/* 语言切换在手机上必须留着：下面这条要比上面的 nth-child 规则更specific，否则整条被盖掉，手机用户切不了语言 */
@media(max-width:820px){.topbar .r span:nth-child(n+2){display:none}.topbar .r span.langwrap:nth-child(n+2){display:inline-flex}}

/* CJK needs air the display face doesn't give it */
html[lang="zh-CN"] h1,html[lang="zh-CN"] h2,html[lang="zh-CN"] h3,
html[lang="zh-CN"] .logo-t strong,html[lang="zh-CN"] .q-head strong,
html[lang="zh-CN"] .tbl-h strong,html[lang="zh-CN"] .show2-cap b{font-family:var(--cjk);font-weight:700}
html[lang="zh-CN"] h1{font-size:clamp(32px,3.4vw,46px)}
html[lang="zh-CN"] h2{font-size:clamp(25px,2.3vw,33px)}
html[lang="zh-CN"] h1,html[lang="zh-CN"] h2{line-height:1.2;letter-spacing:0}
html[lang="zh-CN"] h3{line-height:1.35;letter-spacing:0}
html[lang="zh-CN"] .hero h1 u::after{bottom:.1em;height:.06em}
html[lang="zh-CN"] .step h3{line-height:1.3}

.logo-t em{white-space:nowrap}
.foot .logo-t em{font-size:9.5px;letter-spacing:.07em}

#routeToast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(14px);z-index:200;
  display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:var(--r);
  background:var(--band);color:var(--band-text);box-shadow:0 14px 40px rgba(0,0,0,.34);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease}
#routeToast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#routeToast b{color:var(--accent);font-weight:500}

/* ---- brand shot ---- */
/* ============================ FEATURED CAROUSEL ============================ */
/* 两栏：左图右字。图按 3:2 原比例排版，不做裁切，产品看得全。 */
.show2{position:relative;background:var(--band);border-block:1px solid var(--band-line)}
.show2-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.show2-track::-webkit-scrollbar{display:none}
.show2-slide{flex:0 0 100%;scroll-snap-align:start;display:block;color:inherit}
.show2-in{max-width:1180px;margin-inline:auto;padding:clamp(26px,3vw,42px) clamp(20px,2.6vw,44px);
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(22px,3vw,46px);align-items:center}
.show2-slide img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--r);background:var(--sunk)}
.show2-cap{min-width:0}
.show2-cap .eye{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--band-text-2)}
.show2-cap .eye i{width:8px;height:8px;background:var(--c);flex:none;display:block}
.show2-cap b{display:block;margin-top:11px;font-family:var(--disp);font-weight:500;
  letter-spacing:-.018em;font-size:clamp(25px,2.5vw,35px);line-height:1.14;color:var(--band-text)}
.show2-cap p{margin-top:12px;color:var(--band-text-2);font-size:16.5px;line-height:1.55;max-width:44ch}
.show2-cap .row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--band-line)}
.show2-cap .from{font-family:var(--mono);font-size:21px;font-weight:600;color:var(--band-text);
  font-variant-numeric:tabular-nums}
.show2-cap .from s{display:block;text-decoration:none;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--band-text-2);font-weight:400}
.show2-cap .go{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2);border-bottom:1px solid currentColor;
  padding-bottom:3px}
.show2-slide:hover .show2-cap .go{color:var(--accent)}
/* 控件排在文字栏底部，不压在图上 */
.show2-ctl{max-width:1180px;margin-inline:auto;padding:0 clamp(20px,2.6vw,44px) clamp(20px,2.4vw,30px);
  display:flex;align-items:center;gap:10px}
.show2-nav{width:38px;height:38px;flex:none;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--band-line);border-radius:var(--r);background:transparent;
  color:var(--band-text);font-family:var(--mono);font-size:15px;line-height:1}
.show2-nav:hover{border-color:var(--band-text-2);background:rgba(255,255,255,.5)}
.show2-dots{display:flex;gap:7px;margin-left:6px}
.show2-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--band-line)}
.show2-dots button[aria-current="true"]{background:var(--accent);width:22px;border-radius:5px}
@media(max-width:900px){
  .show2-in{grid-template-columns:1fr;gap:20px}
  .show2-cap p{max-width:none}
}

/* ---- the quote card's leading bar ---- */
.q-bar{height:5px;background:var(--accent)}

/* ---- photography in the category tiles ---- */
.tile-art img{width:100%;height:100%;object-fit:cover}
.cat a:nth-child(3) .tile-art img{object-position:50% 38%}   /* keep the display base in frame */

/* ---- AI capability grid ---- */
.aigrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
@media(max-width:560px){.aigrid{grid-template-columns:1fr}}
.aigrid figure{margin:0;display:flex;flex-direction:column;min-height:0;background:var(--surface);border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.aigrid img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.aigrid figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 13px;border-top:1px solid var(--line)}
.aigrid figcaption b{font-size:14px;font-weight:600;color:var(--text)}

/* ---- packing shot on the "in the box" card ---- */
.box-art{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line)}



/* the nowrap tagline was forcing the header wider than a phone */
@media(max-width:760px){
  .head .logo-t em{display:none}
  .head .logo svg{width:38px;height:38px}
  .head .logo-t strong{font-size:21px}
}
@media(max-width:620px){
  .foot .logo-t em{white-space:normal;font-size:8.5px;letter-spacing:.07em}
  .foot-grid{gap:20px}
}
@media(max-width:620px){.topnav{top:74px}.topnav a{padding:0 15px;font-size:11.5px}}

/* ============================ SHELL ============================ */
.shell{max-width:1640px;margin-inline:auto;display:grid;grid-template-columns:var(--side) minmax(0,1fr);align-items:start}
.main{min-width:0}

.side{border-right:1px solid var(--line);background:var(--surface);align-self:stretch}
/* No overflow/clipping on this column — the third-level flyouts sit outside it */
.side-in{padding-bottom:16px}
.side-h{display:flex;align-items:center;gap:9px;padding:14px 18px 12px;background:var(--surface);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--text-2)}
.side-h em{font-style:normal;display:flex;gap:2px}
.side-h em i{width:5px;height:11px;display:block}
.grp{border-bottom:1px solid var(--line);padding:8px 0 9px}
.l1{display:flex;align-items:center;gap:9px;padding:5px 18px 6px;font-size:18px;font-weight:700;letter-spacing:-.005em}
.l1 i{width:8px;height:8px;flex:none;background:var(--c)}
.l1 b{margin-left:auto;font-weight:400;color:var(--line-2);font-family:var(--mono);font-size:12px}
.l1:hover{color:var(--c)}
.l2{position:relative}
.l2>a{display:flex;align-items:center;gap:8px;padding:6px 18px 6px 35px;font-size:16.5px;color:var(--text-2);transition:background .12s,color .12s}
.l2>a b{margin-left:auto;font-weight:400;font-family:var(--mono);font-size:12px;opacity:.5}
.l2>a .tst{margin-left:auto;font-family:var(--mono);font-size:8px;letter-spacing:.1em;border:1px solid var(--line-2);border-radius:2px;padding:1px 4px;opacity:.7}
.l2:hover>a,.l2:focus-within>a,.l2.on>a{background:var(--sunk);color:var(--text)}
.l3{display:none;position:absolute;left:100%;top:-11px;z-index:90;min-width:238px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--c);box-shadow:0 18px 44px rgba(20,24,28,.18);padding:11px 0 12px}
.l3.open{display:block}
.l3 strong{display:block;padding:2px 16px 8px;margin-bottom:6px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--text-2)}
.l3 a{display:block;padding:7px 18px;font-size:17px}
.l3 a:hover{background:var(--sunk);color:var(--c)}
.side-all{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:13px 18px 0;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r);font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.side-all:hover{border-color:var(--text);background:var(--sunk)}

.side-m{display:none}
@media(max-width:1000px){
  .shell{grid-template-columns:1fr}
  .side{display:none}
  .side-m{display:flex;overflow-x:auto;scrollbar-width:none;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:146px;z-index:70}
  .side-m::-webkit-scrollbar{display:none}
  .side-m a{display:flex;align-items:center;gap:7px;white-space:nowrap;padding:11px 15px;font-size:16.5px;font-weight:600;border-right:1px solid var(--line)}
  .side-m a i{width:7px;height:7px;background:var(--c);flex:none}
}
@media(max-width:620px){.side-m{top:134px}}

/* ============================ HERO ============================ */
.hero{background:var(--band);color:var(--band-text);position:relative;overflow:hidden}
.hero .in{display:grid;grid-template-columns:minmax(0,1fr) 462px;gap:44px;align-items:stretch;padding-block:clamp(36px,3.6vw,50px)}
.hero-copy{display:flex;flex-direction:column;min-width:0}
.hero-eye{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.hero-eye .dot{width:9px;height:9px;background:var(--accent);flex:none}
.hero-eye span{font-family:var(--mono);font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--band-text-2)}
.hero h1{color:var(--band-text)}
.hero h1 u{text-decoration:none;position:relative;white-space:nowrap}
.hero h1 u::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.09em;background:linear-gradient(90deg,var(--s1),var(--s2),var(--s3),var(--s4),var(--s5),var(--s7),var(--s9))}
.hero-sub{max-width:48ch;margin-top:20px;color:var(--band-text-2);font-size:19px;line-height:1.6}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-steps{list-style:none;margin:30px 0 0;padding:20px 0 0;border-top:1px solid var(--band-line);display:flex;flex-direction:column;gap:13px}
.hero-steps li{display:grid;grid-template-columns:38px 1fr;align-items:baseline;gap:12px}
.hero-steps i{font-family:var(--mono);font-style:normal;font-size:13px;letter-spacing:.1em;color:var(--accent)}
.hero-steps b{display:block;font-size:17px;font-weight:600;color:var(--band-text);line-height:1.35}
.hero-steps span{display:block;margin-top:2px;font-size:15.5px;line-height:1.5;color:var(--band-text-2)}
.hero-from{margin-top:auto;padding-top:26px}
.hero-from-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:9px}
.hero-from-h span{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--band-text-2)}
.hero-from-h a{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--accent-2);text-decoration:none;white-space:nowrap}
.hero-from-h a:hover{text-decoration:underline}
.hero-from ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--band-line);border:1px solid var(--band-line)}
.hero-from li{background:var(--band);padding:11px 13px;display:flex;flex-direction:column;gap:3px}
.hero-from b{font-size:15px;font-weight:500;color:var(--band-text-2)}
.hero-from em{font-family:var(--mono);font-style:normal;font-size:19px;font-weight:600;color:var(--band-text);font-variant-numeric:tabular-nums}
@media(max-width:1080px){.hero-from{margin-top:30px}}
@media(max-width:560px){.hero-from ul{grid-template-columns:1fr}.hero-steps li{grid-template-columns:30px 1fr;gap:9px}}
.wheel{position:absolute;right:-180px;top:-140px;width:580px;height:580px;opacity:.06;pointer-events:none}
@media(max-width:1080px){.hero .in{grid-template-columns:1fr;gap:32px}.q{max-width:480px}.wheel{right:-250px}}

.specs{border-top:1px solid var(--band-line);background:var(--band)}
.specs .b{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--band-line)}
.specs div{background:var(--band);padding:15px 18px}
.specs strong{display:block;font-family:var(--mono);font-size:19px;font-weight:600;color:var(--band-text)}
.specs small{display:block;margin-top:4px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--band-text-2)}
@media(max-width:900px){.specs .b{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.specs .b{grid-template-columns:repeat(2,1fr)}}

/* ============================ QUOTE INSTRUMENT ============================ */
.q{background:var(--surface);color:var(--text);border-radius:var(--r);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.32)}
.q-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 17px 12px}
.q-head strong{font-family:var(--disp);font-weight:800;font-size:25px;letter-spacing:0;line-height:1}
.q-head span{font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-2)}
.q-body{padding:0 17px 15px;display:grid;grid-template-columns:1.16fr .84fr;gap:12px 11px;align-content:start}
.q-body>.f{grid-column:1/-1}
.q-body>.f.half{grid-column:auto;min-width:0}
.q-body>.f.half select{font-size:15px;padding-right:30px}
.q-body>.f.half .seg button{font-size:15px}
.q-body:has(#qSidesWrap[hidden])>.f.half{grid-column:1/-1}
.q-body:has(#qSidesWrap[hidden])>.f.half select{font-size:16.5px;padding-right:34px}
@media(max-width:620px){.q-body{grid-template-columns:1fr}.q-body>.f.half{grid-column:1/-1}.q-body>.f.half select,.q-body>.f.half .seg button{font-size:16.5px}}
.f{display:flex;flex-direction:column;gap:6px}
.f>label,.f-lab{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
select,input[type=number]{width:100%;height:48px;padding:0 11px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--text);font-family:var(--body);font-size:16.5px;font-weight:500}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);background-position:calc(100% - 17px) 22px,calc(100% - 12px) 22px;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
input[type=number]{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dims{display:grid;grid-template-columns:1fr 20px 1fr 68px;gap:7px;align-items:end}
.dims .x{height:48px;display:grid;place-items:center;font-family:var(--mono);color:var(--text-2)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{border:1px solid var(--line-2);background:transparent;border-radius:2px;cursor:pointer;padding:6px 10px;font-family:var(--mono);font-size:13px;color:var(--text-2)}
.chip:hover{border-color:var(--text-2)}
.chip[aria-pressed=true]{background:var(--text);border-color:var(--text);color:var(--ground)}
.seg{display:flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.seg button{flex:1;border:0;background:transparent;cursor:pointer;height:46px;font-family:var(--body);font-size:15.5px;font-weight:600;color:var(--text-2)}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button[aria-pressed=true]{background:var(--text);color:var(--ground)}
.opts{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:var(--r);padding:5px}
.opt{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:2px;cursor:pointer;font-size:14.5px;line-height:1.3}
.opt:hover{background:var(--sunk)}
.opt input{accent-color:var(--accent);width:15px;height:15px;flex:none;margin:0}
.opt em{margin-left:auto;font-family:var(--mono);font-style:normal;font-size:12.5px;color:var(--text-2);font-variant-numeric:tabular-nums}
.q-out{background:var(--band);color:var(--band-text);padding:15px 17px 17px;display:flex;flex-direction:column;gap:11px}
.q-price{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.q-price .amt{font-family:var(--mono);font-weight:600;font-size:48px;line-height:.95;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.q-price .unit{text-align:right;font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--band-text-2);font-variant-numeric:tabular-nums}
.q-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--band-line);border:1px solid var(--band-line)}
.q-meta div{background:var(--band);padding:8px 10px}
.q-meta strong{display:block;font-family:var(--mono);font-size:15.5px;font-weight:500;font-variant-numeric:tabular-nums}
.q-meta small{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--band-text-2);margin-top:2px}
.q-acts{display:grid;grid-template-columns:1fr auto;gap:9px}
.q-note{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--band-text-2);line-height:1.5}
.tier{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-family:var(--mono);font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent)}
.tier i{width:7px;height:7px;background:var(--accent);display:block}

/* 配置器里的文件规格：我们不做校稿，所以这份规格就是合同本身。
   只写确定的规则；出血/安全区/最低 DPI 那些数字在 James 确认前一个都不上。 */
.fspec{margin-top:10px;border-top:1px solid var(--band-line);padding-top:10px}
.fspec>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--band-text-2)}
.fspec>summary::-webkit-details-marker{display:none}
.fspec>summary::before{content:"+";font-size:14px;line-height:1;color:var(--accent)}
.fspec[open]>summary::before{content:"\2212"}
.fspec>summary:hover{color:var(--band-text)}
.fspec-b{margin-top:9px}
.fspec-r{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fspec-r li{display:flex;gap:8px;font-size:14px;line-height:1.45;color:var(--band-text)}
.fspec-r li::before{content:"";width:5px;height:5px;margin-top:7px;flex:none;background:var(--accent)}
.fspec-n{margin-top:10px;padding-top:9px;border-top:1px solid var(--band-line);
  font-size:13px;line-height:1.5;color:var(--band-text-2)}

.ftin{display:grid;grid-template-columns:1fr 20px 1fr;gap:7px;align-items:center}
.ftin-g{display:grid;grid-template-columns:1fr auto 1fr auto;gap:4px;align-items:center;min-width:0}
.ftin-g input{height:48px;padding:0 6px;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.ftin-g i{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--text-2)}
.ratestrip{margin-top:7px;padding:9px 11px;background:var(--sunk);border:1px solid var(--line);
  border-radius:var(--r);display:flex;flex-direction:column;gap:3px;text-align:center}
.ratestrip b{font-family:var(--mono);font-size:14.5px;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums}
.ratestrip span{font-family:var(--mono);font-size:12.5px;color:var(--text-2)}
.onlyopt{display:block;padding:12px 0 2px;font-size:16px;font-weight:500;line-height:1.35;color:var(--text)}

/* ============================ CATALOG ============================ */
.head2{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.head2 p{max-width:52ch;margin-top:11px;color:var(--text-2);font-size:17.5px}
.cat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1200px){.cat{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cat{grid-template-columns:1fr}}
.tile{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .18s ease,transform .18s ease}
.tile:hover{border-color:var(--c);transform:translateY(-3px)}
.tile-art{aspect-ratio:16/9;background:var(--tint);display:grid;place-items:center;position:relative;overflow:hidden}
.tile-art svg{width:64%;height:64%;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.tile-art img{width:100%;height:100%;object-fit:cover;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.tile:hover .tile-art svg,.tile:hover .tile-art img{transform:scale(1.04)}
.tile-art .from{position:absolute;left:0;bottom:0;background:var(--c);color:#fff;font-family:var(--mono);font-size:13px;letter-spacing:.08em;padding:5px 9px}
.tile-b{padding:15px 16px 17px;display:flex;flex-direction:column;gap:8px;flex:1}
.tile-b p{color:var(--text-2);font-size:16.5px;line-height:1.5}
.tile-b .subs{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.tile-b .subs span{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--text-2);border:1px solid var(--line);border-radius:2px;padding:3px 6px}
.tile-b .go{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;gap:7px;font-size:15.5px;font-weight:600;color:var(--c)}

/* ============================ WORK STRIP ============================ */
.work{border-top:1px solid var(--line);background:var(--sunk)}
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:12px}
@media(max-width:900px){.work-grid{grid-template-columns:repeat(2,1fr)}}
.wcard{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);aspect-ratio:4/3}
.wcard:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
@media(max-width:900px){.wcard:first-child{grid-row:span 1;aspect-ratio:4/3}}
.wcard img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.wcard:hover img{transform:scale(1.04)}
.wcard figcaption{position:absolute;left:0;bottom:0;right:0;padding:9px 11px;background:linear-gradient(transparent,rgba(12,15,18,.82));color:#fff;font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase}

/* ============================ AI TOOLS ============================ */
.idw{background:var(--band);color:var(--band-text)}
.idw .in{display:block}
.idw-head{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:46px;align-items:end}
.idw-head .lead{margin:0;max-width:58ch}
.idw-body{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:40px;align-items:start;margin-top:30px}
.idw-side{display:flex;flex-direction:column;gap:18px}
@media(max-width:1080px){.idw-head,.idw-body{grid-template-columns:1fr;gap:26px}.idw-head .lead{margin-top:14px}}
.idw h2{color:var(--band-text)}
.idw p.lead{margin-top:15px;color:var(--band-text-2);font-size:19px;line-height:1.6;max-width:46ch}
/* AI tool groups — one block per second-level nav item, with real status */
.toolset{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
.toolset>li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.toolset>li>i{width:9px;height:9px;margin-top:8px;background:var(--s9)}
.toolset b{display:block;font-size:17px;font-weight:600;letter-spacing:-.005em}
.tools{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.tools li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:15px;color:var(--band-text)}
.tools li em{font-style:normal;color:var(--band-text-2);font-size:14px}
.pill{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.13em;padding:2px 7px;border-radius:2px;border:1px solid;white-space:nowrap}
.pill--now{color:#0B2A5B;border-color:rgba(11,42,91,.4);background:rgba(127,168,217,.3)}
.pill--dev{color:#5B6B77;border-color:var(--band-line);background:rgba(255,255,255,.55)}
.pill--plan{color:var(--band-text-2);border-color:var(--band-line);border-style:dashed}
.pill--live{color:#0B2A5B;border-color:rgba(11,42,91,.4);background:rgba(127,168,217,.3)}
.pill--soon{color:var(--band-text-2);border-color:var(--band-line)}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--band-text-2)}

/* the pipeline the MVP actually runs */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:22px;padding:13px 15px;border:1px solid var(--band-line);border-radius:var(--r);background:rgba(255,255,255,.03)}
.flow span{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--band-text)}
.flow s{text-decoration:none;color:var(--s9);font-family:var(--mono);font-size:12px}
.slot-tag{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--band-text-2);border:1px dashed var(--band-line);padding:5px 9px;border-radius:2px}
.slot-tag i{width:6px;height:6px;background:var(--s9);display:block}
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
@media(max-width:640px){.lanes{grid-template-columns:1fr}}
.lane{border:1px solid var(--band-line);border-radius:var(--r);background:#FFFFFF;padding:13px 15px}
.lane b{display:block;font-size:15.5px;font-weight:600;color:var(--id-navy)}
.lane span{display:block;margin-top:5px;font-size:14.5px;line-height:1.5;color:var(--band-text-2)}
.lane em{display:inline-block;margin-top:8px;font-style:normal;font-family:var(--mono);font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--id-navy);background:rgba(127,168,217,.28);padding:2px 7px;border-radius:2px}
.idbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:22px;padding:14px 16px;border:1px solid var(--band-line);border-radius:var(--r);background:var(--id-mist)}
.idmark{display:flex;align-items:center;gap:10px}
.idmark i{width:26px;height:26px;position:relative;flex:none}
.idmark i::before,.idmark i::after{content:"";position:absolute;width:17px;height:17px;border-radius:5px}
.idmark i::before{left:0;top:0;background:var(--id-navy)}
.idmark i::after{right:0;bottom:0;background:var(--id-blue);mix-blend-mode:multiply}
.idmark b{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--id-navy)}
.idmark b s{text-decoration:none;color:var(--id-blue)}
.idbar p{margin:0;font-size:14.5px;color:var(--band-text-2);max-width:62ch}
.idbar a{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:var(--id-navy);white-space:nowrap}
.idbar a:hover{text-decoration:underline}
.shotnote{margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;line-height:1.6;color:var(--band-text-2)}
.early{display:flex;gap:11px;margin-top:20px;padding:12px 15px;border-left:3px solid var(--id-blue);background:#FFFFFF}
.early p{margin:0;font-size:15px;line-height:1.55;color:var(--band-text-2)}

.ed{background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.34)}
.ed-bar{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--sunk);flex-wrap:wrap}
.ed-bar .brand{display:flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:-.02em;margin-right:5px}
.ed-bar .brand i{width:12px;height:12px;background:linear-gradient(135deg,var(--s6),var(--s9));display:block}
.ed-tool{border:1px solid var(--line-2);border-radius:2px;background:var(--surface);padding:4px 8px;font-family:var(--mono);font-size:12px;letter-spacing:.07em;color:var(--text-2);white-space:nowrap}
.ed-tool.on{background:var(--text);border-color:var(--text);color:var(--ground)}
.ed-main{display:grid;grid-template-columns:minmax(0,1fr) 182px}
@media(max-width:560px){.ed-main{grid-template-columns:1fr}.ed-side{border-left:0!important;border-top:1px solid var(--line)}}
.ed-canvas{background:var(--sunk);background-image:linear-gradient(45deg,rgba(0,0,0,.045) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.045) 75%),linear-gradient(45deg,rgba(0,0,0,.045) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.045) 75%);background-size:18px 18px;background-position:0 0,9px 9px;padding:24px;display:block;min-height:230px}
.ed-art{position:relative;width:100%;max-width:340px;margin:0 auto}
.artimg{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.ed-art .hnd{position:absolute;width:9px;height:9px;background:var(--surface);border:1.5px solid var(--s6)}
.ed-art .hnd.tl{left:-5px;top:-5px} .ed-art .hnd.tr{right:-5px;top:-5px}
.ed-art .hnd.bl{left:-5px;bottom:-5px} .ed-art .hnd.br{right:-5px;bottom:-5px}
.ed-art .selbox{position:absolute;inset:-1px;border:1.5px solid var(--s6);background:transparent;pointer-events:none}
.ed-side{border-left:1px solid var(--line);padding:13px;display:flex;flex-direction:column;gap:9px;background:var(--surface)}
.ed-side h4{margin:0;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);font-weight:500}
.chk{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:var(--text)}
.chk i{width:14px;height:14px;flex:none;display:grid;place-items:center;background:var(--ok);color:#fff;font-size:9px;border-radius:50%;font-family:var(--body)}
.chk i.warn{background:var(--s2)}
.chk em{font-style:normal;margin-left:auto;color:var(--text-2)}
.ed-send{margin-top:auto;display:block;width:100%;height:44px;border:0;border-radius:2px;background:var(--accent);color:var(--on-accent);font-family:var(--body);font-weight:600;font-size:15px;cursor:pointer}

/* ============================ VOLUME PRICING ============================ */
/* 缺货态 */
/* hidden 必须盖住组件自己的 display。不加这一条，
   .btn{display:inline-flex} 之类会把 [hidden] 顶掉。 */
[hidden]{display:none !important}
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
/* 缺货卡：只改价格那一行，图片保持彩色。
   上一版我给它加了 grayscale，结果 75 张卡里 65 张发灰，
   整个目录看着像坏了——而不是「这几样暂时不卖」。
   文字已经说清楚了，图片不用再说一遍。 */
.l3c--oos .l3c-p{color:var(--text-2);font-style:normal}
.soonbadge{display:inline-block;margin-left:7px;padding:1px 6px;border-radius:99px;border:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);vertical-align:middle}
.aisoon{cursor:default}
.segx .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:center}
@media(max-width:1000px){.segx .in{grid-template-columns:1fr;gap:30px}}
.segx p.lead{margin-top:13px;color:var(--text-2);font-size:17.5px;max-width:48ch}
/* 单列竖排：硅胶边条那张是整个栏目的教学图，
   两张并排会把它压到 265px 宽，槽口那个细节就看不清了。 */
.segx-figs{display:grid;grid-template-columns:1fr;gap:16px}
.segx-figs figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);aspect-ratio:3/2}
.segx-figs figure:last-child{aspect-ratio:2/1}
@media(max-width:1000px){.segx-figs figure:last-child{aspect-ratio:3/2}}
.segx-figs img{width:100%;height:100%;object-fit:cover;display:block}
/* 图说写死 #fff 打在深色渐变上。
   不用 var(--band-text)——Yelp 链接和文件规格那两次隐形文字就是这么来的。 */
.segx-figs figcaption{position:absolute;left:0;right:0;bottom:0;padding:9px 11px;background:linear-gradient(transparent,rgba(12,15,18,.82));color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.vol{background:var(--sunk);border-block:1px solid var(--line)}
.vol .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:44px;align-items:center}
@media(max-width:1000px){.vol .in{grid-template-columns:1fr;gap:30px}}
.vol p.lead{margin-top:13px;color:var(--text-2);font-size:17.5px;max-width:46ch}
.perks{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:11px 18px}
@media(max-width:520px){.perks{grid-template-columns:1fr}}
.perks li{display:flex;gap:9px;font-size:16.5px}
.perks li i{width:6px;height:6px;margin-top:7px;flex:none;background:var(--s4)}
.tbl{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tbl-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:13px 16px;border-bottom:1px solid var(--line)}
.tbl-h strong{font-family:var(--disp);font-weight:800;font-size:22px;line-height:1}
.tbl-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{text-align:right;padding:12px 18px;font-family:var(--mono);font-size:15px;border-top:1px solid var(--line);white-space:nowrap}
th{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-2);font-weight:500;border-top:0}
th:first-child,td:first-child{text-align:left}
tbody tr:hover{background:var(--sunk)}
td.save{color:var(--s4);font-weight:500}
.tbl-f{padding:11px 16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--text-2)}

/* ============================ PROCESS ============================ */
.steps{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
@media(max-width:1000px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{padding:20px 18px 22px;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:0}
@media(max-width:1000px){.step{border-bottom:1px solid var(--line)}.step:nth-child(2n){border-right:0}}
@media(max-width:560px){.step{border-right:0}}
.step::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--c)}
.step .n{font-family:var(--mono);font-size:13.5px;letter-spacing:.14em;color:var(--text-2)}
.step h3{margin:11px 0 8px;font-size:26px}
.step p{color:var(--text-2);font-size:16px;line-height:1.5}

/* ============================ SHIPS-COMPLETE ============================ */
.ship{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:42px;align-items:center}
@media(max-width:900px){.ship{grid-template-columns:1fr;gap:28px}}
.ship p.lead{margin-top:13px;color:var(--text-2);font-size:17.5px;max-width:50ch}
.box{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.box-h{padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.box .row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:14.5px}
.box .row:first-of-type{border-top:0}
.box .row span:last-child{color:var(--text-2)}
.notdo{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.notdo span{border:1px solid var(--line-2);border-radius:2px;padding:5px 9px;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--text-2)}

/* ============================ TOPIC PAGE ============================ */
/* 专题页用的全部是已有的版式语言（band / tile / tbl / fspec），
   这里只补布局，不引入新的视觉语言。 */
.thero{background:var(--band);color:var(--band-text);border-bottom:1px solid var(--band-line)}
.thero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,3.4vw,52px);
  align-items:center;padding-block:clamp(30px,3.4vw,52px)}
.thero-copy{min-width:0}
.thero h1{color:var(--band-text)}
.thero-sub{margin-top:16px;color:var(--band-text-2);font-size:18.5px;line-height:1.6;max-width:46ch}
.thero-note{margin-top:14px;padding-left:11px;border-left:3px solid var(--s2);
  color:var(--band-text);font-size:15.5px;line-height:1.5;max-width:50ch}
.tfacts{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tfacts li{border:1px solid var(--band-line);border-radius:2px;padding:6px 10px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--band-text-2)}
.tfacts li b{color:var(--band-text);font-weight:600;font-variant-numeric:tabular-nums}
.thero-cta{margin-top:22px}
.thero-art{margin:0;position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--band-line);background:var(--surface)}
.thero-art img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.thero-art figcaption,.tcard figcaption,.tpoint figcaption{position:absolute;right:0;bottom:0;
  padding:4px 8px;background:rgba(12,15,18,.72);color:#fff;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase}
@media(max-width:900px){
  .thero-in{grid-template-columns:1fr;gap:20px}
  /* 手机首屏要先看到 H1 和主按钮，图片排到文字后面 */
  .thero-copy{order:1}.thero-art{order:2}
  .thero-art img{aspect-ratio:16/9}
}

.tgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,2.6vw,36px);
  align-items:start}
@media(max-width:1000px){.tgrid{grid-template-columns:1fr}}
.tquote{position:sticky;top:160px}
@media(max-width:1000px){.tquote{position:static}}
.tcards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.tcards{grid-template-columns:1fr}}
.tcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:border-color .18s ease}
.tcard:hover{border-color:var(--c-shopby)}
.tcard--big{grid-column:1/-1}
.tcard figure{margin:0;position:relative;background:var(--sunk)}
.tcard img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
/* 主推卡不裁得太狠：图片包的 manifest 要求优先保留完整产品，
   21/9 会把院子牌的插脚切掉。 */
.tcard--big img{aspect-ratio:2/1;object-position:50% 42%}
.tcard-b{padding:13px 15px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.tcard-b h3{font-size:19px}
.tcard-b p{color:var(--text-2);font-size:14.5px;line-height:1.45}
.tcard-p{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:9px;
  border-top:1px solid var(--line)}
.tcard-p b{font-family:var(--mono);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.tcard-oos{font-family:var(--mono);font-size:13px;color:var(--text-2)}
.tcard-live{font-size:12.5px;line-height:1.45;color:var(--text-2)}
.tcard-b button{align-self:flex-start}

.tpoints{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.tpoint figure{margin:0 0 11px;position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--sunk)}
.tpoint img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.tpoint h3{font-size:19px;margin-bottom:6px}
.tpoint p{color:var(--text-2);font-size:16px;line-height:1.5}

.tspec{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px;align-items:start}
@media(max-width:800px){.tspec{grid-template-columns:1fr}}
.tspec-art{margin:0;position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.tspec-art img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.tspec-art figcaption{position:absolute;right:0;bottom:0;padding:4px 8px;background:rgba(12,15,18,.72);
  color:#fff;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase}
.tspec-tip{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.tspec-tip span{padding-left:11px;border-left:3px solid var(--s2);font-size:16px;line-height:1.5;color:var(--text)}
.tspec .fspec-r li{font-size:15.5px;color:var(--text)}
.tspec .fspec-n{color:var(--text-2)}

.tfaq{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:760px){.tfaq{grid-template-columns:1fr}}
.tfaq-i{background:var(--surface);padding:14px 16px}
.tfaq-i>summary{cursor:pointer;list-style:none;font-size:17px;font-weight:600;
  display:flex;align-items:flex-start;gap:9px}
.tfaq-i>summary::-webkit-details-marker{display:none}
.tfaq-i>summary::before{content:"+";color:var(--accent);font-family:var(--mono);line-height:1.3}
.tfaq-i[open]>summary::before{content:"\2212"}
.tfaq-i p{margin-top:9px;padding-left:19px;color:var(--text-2);font-size:16px;line-height:1.55}

.tother{display:flex;flex-wrap:wrap;gap:14px}
.tother-c{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.tother-c:hover{border-color:var(--c-shopby)}
.tother-c img{width:84px;height:56px;object-fit:cover;border-radius:2px;display:block}
.tother-c span{font-size:17px;font-weight:600}
.tother-c i{font-style:normal;color:var(--accent)}

/* ============================ FOOTER ============================ */
/* 服务条：浅色托盘，压在深色页脚上方，把整块深色断开 */
.fserv{background:var(--band);border-top:1px solid var(--band-line)}
.fserv .b{max-width:1640px;margin-inline:auto;padding-inline:clamp(16px,2vw,28px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--band-line)}
@media(max-width:820px){.fserv .b{grid-template-columns:1fr}}
.fserv a{display:flex;align-items:flex-start;gap:14px;background:var(--band);padding:20px 22px;transition:background .15s}
.fserv a:hover{background:#DDE7EA}
.fserv svg{width:26px;height:26px;flex:none;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.fserv b{display:block;font-size:17px;font-weight:600;color:var(--band-text);line-height:1.3}
.fserv span{display:block;margin-top:4px;font-size:15px;color:var(--band-text-2);line-height:1.45}
.fserv em{display:block;margin-top:5px;font-family:var(--mono);font-size:13px;font-style:normal;color:var(--band-text)}

.foot{background:var(--band);color:var(--band-text)}
.foot .b{max-width:1640px;margin-inline:auto;padding-inline:clamp(16px,2vw,28px);padding-block:44px 0}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(6,1fr);gap:22px}
@media(max-width:1100px){.foot-grid{grid-template-columns:1fr 1fr 1fr;gap:28px}}
@media(max-width:620px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot h5{margin:0 0 12px;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--band-text-2);font-weight:500;display:flex;align-items:center;gap:7px}
.foot h5 i{width:7px;height:7px;background:var(--c);flex:none}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.foot li a{font-size:16px;color:var(--band-text)}
.foot li a:hover{color:var(--accent)}
.foot .about p{color:var(--band-text-2);font-size:16px;line-height:1.6;margin-top:13px;max-width:34ch}
.foot .about .ct{margin-top:14px;display:flex;flex-direction:column;gap:5px;font-family:var(--mono);font-size:14px}

/* 社媒：色标方块，不用各家 logo —— 上线时换成官方图标即可 */
.soc{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.soc a{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--band-line);border-radius:var(--r);
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--band-text-2);transition:.15s}
.soc a:hover{border-color:var(--sc);color:var(--sc);background:rgba(255,255,255,.06)}

.socgrp{margin-top:18px}
.soclab{margin:0 0 9px;font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--band-text-2)}
.socgrp .soc{margin:0 0 17px}
/* Yelp 拆出来做评价入口：一个没有说明的图标等于没有说明，客户不知道点进去看什么 */
/* 手机上页脚是两栏，每栏约 165px —— 这条链接不收窄就会把整页撑出横向滚动。
   文字包进 span 才能 min-width:0 收缩换行：匿名 flex item 没法单独设。 */
.yelp{display:inline-flex;align-items:flex-start;gap:9px;padding:9px 13px;max-width:100%;
  border:1px solid var(--band-line);border-radius:var(--r);
  font-size:15px;line-height:1.2;color:inherit;transition:border-color .15s,color .15s}
.yelp:hover{border-color:var(--accent);color:var(--accent)}
.yelp img{flex:none;margin-top:1px}
.yelp span{min-width:0}

/* 自取 + 订阅 */
.fbands{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;margin-top:38px}
@media(max-width:900px){.fbands{grid-template-columns:1fr}}
.fband{border:1px solid var(--band-line);border-radius:var(--r);padding:18px 20px}
.fband h6{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--band-text-2);font-weight:500}
.fband .big{margin-top:9px;font-size:18px;font-weight:600;line-height:1.35}
.fband .meta{margin-top:7px;font-family:var(--mono);font-size:13.5px;line-height:1.7;color:var(--band-text-2)}
.fband .meta b{color:var(--band-text);font-weight:500}
.fband .go{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-lite)}
.fband .go:hover{text-decoration:underline}
.sub{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.sub input{flex:1;min-width:150px;height:44px;padding:0 12px;border:1px solid var(--band-line);border-radius:var(--r);
  background:rgba(255,255,255,.07);color:var(--band-text);font-family:var(--body);font-size:15.5px}
.sub input::placeholder{color:var(--band-text-2)}
.sub button{height:44px;padding:0 18px;border:0;border-radius:var(--r);background:var(--accent);color:var(--on-accent);
  font-family:var(--body);font-weight:600;font-size:15px;cursor:pointer}
.sub button:hover{background:var(--accent-2)}
.subnote{margin:9px 0 0;font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--band-text-2)}

.pay{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.pay span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;padding:4px 8px;border:1px solid var(--band-line);
  border-radius:2px;color:var(--band-text-2)}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:30px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.foot-legal a{color:var(--band-text-2)}
.foot-legal a:hover{color:var(--accent-lite)}
.foot-b{margin-top:16px;border-top:1px solid var(--band-line);padding-block:17px 22px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--band-text-2)}

/* ============================ BUILD NOTES ============================ */
.dev{border-top:1px solid var(--line);background:var(--sunk)}
.dev details{max-width:1640px;margin-inline:auto;padding:17px clamp(16px,2vw,28px)}
.dev summary{cursor:pointer;font-family:var(--mono);font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-2);list-style:none;display:flex;align-items:center;gap:9px}
.dev summary::-webkit-details-marker{display:none}
.dev summary i{width:8px;height:8px;background:var(--s9);display:block}
.dev-body{margin-top:15px;display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}

.dev-body h6{margin:0 0 8px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--text)}
.dev-body p{font-size:15px;color:var(--text-2);line-height:1.6}
.dev-body code{font-family:var(--mono);font-size:11.5px;background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:1px 5px;color:var(--text)}
pre{margin:8px 0 0;padding:13px;background:var(--band);color:#D8DEE2;border-radius:var(--r);overflow-x:auto;font-family:var(--mono);font-size:11.5px;line-height:1.65}
pre .k{color:#F5C61F} pre .s{color:#8CBB4A} pre .c{color:#7C878E}
/* ============================================================
   Overrides, in one place. Navy is the structural tone: the
   announcement strip, category bar, spec strip, price panel and
   footer. Content bands sit light under it. Teal supports,
   copper acts, the logo spectrum stays for wayfinding.
   ============================================================ */
.topbar{background:#143C4A;color:#E7EFF2}
.topbar .b{color:#A8C4CE}
.topbar b{color:#FFD9BE}
#langSel{border-color:rgba(255,255,255,.34);color:#E7EFF2;
  background-image:linear-gradient(45deg,transparent 50%,#A8C4CE 50%),linear-gradient(135deg,#A8C4CE 50%,transparent 50%)}
#langSel option{background:#FFFFFF;color:var(--text)}

.topnav{background:var(--nav);border-bottom:1px solid var(--nav-line)}
.topnav .b a{color:var(--nav-text)}
.topnav .b a:hover{color:#0C2C36}
.topnav .b a[aria-expanded="true"]{background:rgba(255,255,255,.4)}

.specs{background:var(--navy);border-top:0}
.specs .b{background:rgba(255,255,255,.22)}
.specs div{background:var(--navy)}
.specs strong{color:#FFFFFF}
.specs small{color:#A8C4CE}

.foot{background:var(--navy);color:#E7EFF2}
.foot h5,.foot .soclab{color:#8FB2BF}
.foot li a{color:#E7EFF2}
.foot li a:hover{color:#FFD9BE}
.foot .about p,.foot-b{color:#97B8C4}
.foot .about .ct a{color:#E7EFF2}
.foot .logo-t strong{color:#FFFFFF!important}
.foot .logo-t em{color:#7CC0F0!important}
.foot-b{border-top-color:rgba(255,255,255,.2)}
.fband{border-color:rgba(255,255,255,.2)}
.fband h6{color:#8FB2BF}
.fband .meta{color:#A8C4CE}
.fband .meta b{color:#FFFFFF}
.fband .go{color:#FFD9BE}
.sub input{border-color:rgba(255,255,255,.26);color:#E7EFF2}
.sub input::placeholder{color:#8FB2BF}
.subnote{color:#8FB2BF}
.foot-legal a{color:#A8C4CE}
.foot-legal a:hover{color:#FFD9BE}
.pay span{border-color:rgba(255,255,255,.2);color:#8FB2BF}
.soc a{border-color:rgba(255,255,255,.22);color:#A8C4CE}
.soc a:hover{background:rgba(255,255,255,.1)}
.foot .about p{color:#A8C4CE}

/* the price panel keeps a deep field so the number still anchors the card */
.q-out{background:var(--navy);color:#FFFFFF}
.q-meta{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.24)}
.q-meta div{background:var(--navy)}
.q-meta small,.q-price .unit,.q-note{color:#A8C4CE}
/* .q-out 是硬写 color:#FFFFFF 改深色的，tokens 没跟着改 ——
   卡片里任何用 var(--band-text) 的字都会变成深色压深色，1:1 看不见。
   文件规格这三处跟 .q-note 挂同一档灰，以后改一处两处一起动。 */
.q-out .fspec-r li{color:inherit}
.q-out .fspec>summary,.q-out .fspec-n{color:#A8C4CE}
.q-out .fspec>summary:hover{color:#FFFFFF}
.q-out .btn--out{border-color:rgba(255,255,255,.4);color:#FFFFFF}
.q-out .btn--out:hover{border-color:#FFFFFF;background:rgba(255,255,255,.1)}
.tier{color:var(--accent-lite)} .tier i{background:var(--accent-lite)}

/* furniture on the light content bands */
.hero-eye .dot{background:var(--accent)}
.toolset>li>i{background:var(--accent)}
.toolset li.star>i{background:var(--navy)}
.flow{background:rgba(20,60,74,.06);border-color:var(--band-line)}
.flow s{color:var(--accent)}
.pill--now{color:var(--id-navy);border-color:rgba(11,42,91,.35);background:rgba(127,168,217,.28)}
.pill--dev{color:#4E6B78;border-color:var(--band-line);background:#FFFFFF}
.pill--plan{color:var(--band-text-2);border-color:var(--band-line);border-style:dashed}
.slot-tag i{background:var(--accent)}
.aigrid figure{box-shadow:0 14px 32px rgba(20,60,74,.14)}
.q{box-shadow:0 22px 48px rgba(20,60,74,.2)}
.on-ink .mark span:first-child{background:var(--chip,var(--accent))}

/* teal gets one band of its own so it reads as the supporting tone */
.vol{background:var(--teal-tint);border-block-color:#BFD9DC}
.vol .tbl{border-color:#BFD9DC}

/* the carousel caption needs its own scrim over the photograph */
.show2{background:var(--band)}
/* 轮播改成两栏之后，字幕不再压在图上，去掉遮罩渐变，用浅底深字 */
.show2-cap .go{color:var(--accent-2)}
.show2-slide:hover .show2-cap .go{color:var(--accent)}
.wcard figcaption{background:linear-gradient(transparent,rgba(20,60,74,.86))}

/* the photography carries the colour, so the category cue is a hover, not a badge */
.tile-art .from{background:rgba(20,60,74,.88);color:#EEF4F6}
.tile-b .go{color:var(--accent)}

/* ---- left category rail: light panel, dark type, tighter rows ---- */
.side{background:var(--surface);border-right:1px solid var(--line)}
.side-in{padding-bottom:13px;position:sticky;top:146px;z-index:60;max-height:calc(100vh - 146px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.side-in::-webkit-scrollbar{width:7px}
.side-in::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.side-in::-webkit-scrollbar-track{background:transparent}
.side-h{background:var(--surface);border-bottom-color:var(--line);color:var(--text-2);padding:11px 13px 9px;font-size:11.5px;letter-spacing:.12em}
.grp{border-bottom-color:var(--line);padding:5px 0 6px}
.l1{color:var(--text);padding:4px 13px;font-size:16.5px;gap:8px}
.l1 b{color:var(--line-2)}
.l2>a{color:var(--text);padding:4px 12px 4px 27px;font-size:15px;line-height:1.35;font-weight:500}
.l2>a b{color:var(--text-2);opacity:.55}
.l2:hover>a,.l2:focus-within>a,.l2.on>a{background:var(--sunk);color:var(--navy)}
.side-all{margin:11px 13px 0;padding:8px 10px;color:var(--text);font-size:11.5px;letter-spacing:.08em}

/* the flyout is sized to its own text instead of a fixed slab */
.l3::before{content:"";position:absolute;left:-16px;top:-8px;bottom:-8px;width:16px}
.l3{position:fixed;left:auto;top:auto;min-width:0;width:max-content;max-width:290px;padding:7px 0 8px;box-shadow:0 16px 38px rgba(20,60,74,.28)}
.l3 strong{padding:1px 14px 5px;margin-bottom:3px}
.l3 a{padding:4px 14px;font-size:16px;white-space:nowrap}
@media(max-width:1000px){.side-m a{font-weight:600}}

.tile:hover .tile-b .go{color:var(--c)}

/* 大批量询价表：两列文字表，覆盖原四列数字表的排版 */
.vol .tbl table{table-layout:fixed;width:100%}
.vol .tbl th,.vol .tbl td{text-align:left;white-space:normal;word-break:normal}
.vol .tbl th:first-child,.vol .tbl td:first-child{width:36%}
.vol .tbl td:last-child{font-family:inherit;font-size:14.5px;line-height:1.45;color:var(--text-2)}
.vol .tbl td:first-child{font-family:inherit;font-size:15px;font-weight:500;color:var(--text)}
.vol .tbl-scroll{overflow-x:visible}

/* ============================ CATALOG ACCORDION ============================ */
/* 六大类作入口，展开后显示该类全部三级品类的图片卡片 */
.catg-wrap{border-top:1px solid var(--line)}
.catg{border-bottom:1px solid var(--line)}
.catg-h{display:flex;align-items:center;gap:14px;width:100%;padding:20px 4px;border:0;background:none;
  cursor:pointer;text-align:left;font-family:var(--body);color:var(--text)}
.catg-h:hover{background:var(--sunk)}
.catg-h>i{width:11px;height:11px;flex:none;background:var(--c);display:block}
.catg-t{font-family:var(--disp);font-weight:500;letter-spacing:-.015em;font-size:clamp(22px,2.1vw,29px)}
.catg-n{margin-left:auto;font-family:var(--mono);font-size:12.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-2);white-space:nowrap}
.catg-x{flex:none;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line-2);
  border-radius:var(--r);font-family:var(--mono);font-size:17px;line-height:1;color:var(--text-2);
  transition:transform .18s ease,border-color .15s,color .15s}
.catg-h[aria-expanded="true"] .catg-x{transform:rotate(45deg);border-color:var(--c);color:var(--c)}
.catg-h[aria-expanded="true"]{background:var(--sunk)}
.catg-b{padding:6px 4px 30px}
.l3grp+.l3grp{margin-top:26px}
.l3grp h4{margin:0 0 13px;padding-bottom:9px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-2)}
.l3grp h4 a{display:inline-flex;align-items:center;gap:7px}
.l3grp h4 a:hover{color:var(--c)}
.l3grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(246px,1fr));gap:16px}
.l3c{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:border-color .16s ease,transform .16s ease}
.l3c:hover{border-color:var(--c);transform:translateY(-2px)}
.l3c img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--sunk)}
.l3c-b{padding:11px 13px 13px;display:flex;flex-direction:column;gap:4px;flex:1}
.l3c-b b{font-size:15.5px;font-weight:600;line-height:1.3}
.l3c-p{margin-top:auto;font-family:var(--mono);font-size:13px;color:var(--c);font-variant-numeric:tabular-nums}
.l3c-soon{color:var(--text-2);letter-spacing:.06em;font-size:11.5px;text-transform:uppercase}
/* 商品页：效果图标注 + 说明图（v89） */
.gal-viz{margin:8px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--text-2);line-height:1.45}
.pguide{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:center;
  margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.pguide-fig{margin:0}
.pguide-fig img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r)}
.pguide-b h3{margin:0 0 10px;font-size:19px;line-height:1.25}
.pguide-b ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.pguide-b li{font-size:15px;line-height:1.5;color:var(--text)}
.pguide-n{margin:12px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--text-2);line-height:1.45}
@media(max-width:820px){.pguide{grid-template-columns:1fr;gap:16px}.pguide-b h3{font-size:17px}}
.l3c-fs{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ship);margin-top:2px}
/* 这条说明永远印在 --navy 深底上，所以不跟随主题，直接给亮绿 */
.q-note--ship{color:#7FD9B0 !important}
.catg-all{display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding:11px 16px;
  border:1px solid var(--line-2);border-radius:var(--r);font-family:var(--mono);font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase}
.catg-all:hover{border-color:var(--c);color:var(--c)}
@media(max-width:560px){
  .l3grid{grid-template-columns:1fr 1fr;gap:10px}
  .catg-n{display:none}
  .l3c-b{padding:9px 10px 11px}
  .l3c-b b{font-size:14px}
}

/* 大菜单三级条目缩略图 */
.mega .mcol a{display:flex;align-items:center;gap:10px;padding:5px 0}
.mega .mcol a img{width:56px;height:38px;flex:none;object-fit:cover;border-radius:2px;
  border:1px solid var(--line);background:var(--sunk)}
.mega .mcol a:hover img{border-color:var(--c)}
.mega-in{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

/* 官方社媒图标：各平台自己的品牌资源文件，不改形状不改颜色，也不用 CSS 染色 */
.soc{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:16px}
.soc a{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:var(--r);
  background:transparent;transition:background .15s}
.soc a:hover{background:rgba(255,255,255,.10)}
.soc a:focus-visible{outline:2px solid var(--accent-lite);outline-offset:1px}
.soc img{display:block;width:26px;height:auto;object-fit:contain}
.soc img.yt{width:40px}          /* YouTube 原文件自带留白，要放大才等视觉大小 */

<style>
/* ===== AI Tools ===== */
.aiwrap{padding-block:clamp(34px,4vw,56px)}
.aicards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px}
@media(max-width:1000px){.aicards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.aicards{grid-template-columns:1fr}}
.aicard{display:flex;flex-direction:column;gap:7px;padding:18px 19px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-align:left;cursor:pointer;transition:border-color .18s,transform .18s}
.aicard:hover{border-color:var(--accent);transform:translateY(-2px)}
.aicard b{font-size:17px}
.aicard span{color:var(--text-2);font-size:14.5px;line-height:1.5}
.aicard em{margin-top:auto;padding-top:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-style:normal;color:var(--accent)}
.aiback{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);background:none;border:0;cursor:pointer;padding:0}
.aiback:hover{color:var(--accent)}
.aigrid2{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:26px;align-items:start;margin-top:20px}
@media(max-width:940px){.aigrid2{grid-template-columns:1fr}}
.aipanel{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:17px 18px}
.aipanel h4{margin:0 0 4px;font-size:13px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);font-weight:500}
.aidrop{margin-top:12px;border:1.5px dashed var(--line);border-radius:var(--r);padding:26px 14px;text-align:center;cursor:pointer;transition:border-color .18s,background .18s}
.aidrop:hover,.aidrop.over{border-color:var(--accent);background:var(--sunk)}
.aidrop b{display:block;font-size:15px}
.aidrop span{display:block;margin-top:5px;color:var(--text-2);font-size:13px}
.aifield{margin-top:13px}
.aifield label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin-bottom:5px}
.aifield .row{display:flex;gap:8px;align-items:center}
.aifield input[type=number],.aifield select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit;font-size:15px}
.aifield input[type=range]{width:100%}
.aihint{margin-top:5px;color:var(--text-2);font-size:12.5px;line-height:1.5}
.airun{margin-top:15px;width:100%;justify-content:center}
.aistat{margin-top:11px;font-family:var(--mono);font-size:12.5px;color:var(--text-2);min-height:18px}
.aistat.err{color:#B3261E}
.aibar{margin-top:8px;height:4px;border-radius:99px;background:var(--sunk);overflow:hidden}
.aibar i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s}
.aistage{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.aistage{grid-template-columns:1fr}}
.aiview{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--sunk);aspect-ratio:4/3;overflow:hidden;display:flex;align-items:center;justify-content:center}
.aiview canvas,.aiview img{max-width:100%;max-height:100%;display:block;object-fit:contain}
.aiview.checker{background-image:linear-gradient(45deg,#d8dee1 25%,transparent 25%),linear-gradient(-45deg,#d8dee1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d8dee1 75%),linear-gradient(-45deg,transparent 75%,#d8dee1 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.aiview .tag{position:absolute;left:8px;top:8px;padding:2px 8px;border-radius:99px;background:rgba(12,15,18,.74);color:#fff;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase}
.aiempty{color:var(--text-2);font-size:14px;padding:18px;text-align:center}
.aiacts{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.airep{list-style:none;margin:0;padding:0}
.airep li{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.airep li:last-child{border-bottom:0}
.airep .mk{flex:none;width:19px;height:19px;border-radius:99px;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;margin-top:1px}
.airep .ok .mk{background:#2E7D32}.airep .warn .mk{background:#B26A00}.airep .bad .mk{background:#B3261E}.airep .na .mk{background:#8A9BA3}
.airep b{display:block;font-size:15px}
.airep span{display:block;color:var(--text-2);font-size:13.5px;line-height:1.55;margin-top:2px}
.aiscale{margin-top:10px;font-family:var(--mono);font-size:12.5px;color:var(--text-2)}
.aiscale b{color:var(--text);font-weight:500}
.ainote{margin-top:16px;padding:12px 14px;border-left:3px solid var(--accent);background:var(--sunk);border-radius:0 8px 8px 0;font-size:13.5px;line-height:1.6;color:var(--text-2)}
.ainote b{color:var(--text);font-weight:600}
.agalgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.agal{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.agal img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--sunk)}
.agal figcaption{padding:11px 12px;display:flex;flex-direction:column;gap:8px}
.agal figcaption b{font-size:14.5px}
.agal .btn{justify-content:center;padding:7px 10px;font-size:13px}
.achat{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:16px 18px}
.aans{font-size:16px;line-height:1.65}
.amiss{margin-top:13px;padding:11px 13px;border-left:3px solid #B26A00;background:var(--sunk);border-radius:0 8px 8px 0;font-size:14px}
.amiss ul{margin:5px 0 0;padding-left:18px;color:var(--text-2)}
.asrc{margin:12px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--text-2)}
.aizoom{position:absolute;right:8px;bottom:8px;padding:4px 9px;border-radius:99px;border:0;background:rgba(12,15,18,.74);color:#fff;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}

/* Responsive announcement copy */
.topbar .b{height:auto;min-height:36px;padding-top:8px;padding-bottom:8px;line-height:1.6}.topbar .r{align-items:center}@media(max-width:820px){.topbar .b{flex-wrap:wrap;gap:6px 14px;font-size:11px}.topbar .b>span{flex:1 1 190px}.topbar .r>span:not(.langwrap){display:none!important}.topbar .r .langwrap{display:inline-flex!important}}