/* YGO Display — v3 visual system (light). Rolled out 2026-09-25 from proto/index-v3.html.
   Backup of the previous light theme: Desktop\YGO Display v2 light-test */
@font-face{font-family:"Sora";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/sora-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/sora-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format("woff2")}
/* Noto Sans SC (OFL, see ../fonts/NotoSansSC-OFL.txt): static 400/600 subsets of the 10 zh pages' characters.
   Rebuild: Desktop\YGO DISPLAY\_qa\build-noto-subset.py. Only referenced from :lang(zh) rules, so EN pages never download it. */
@font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/noto-sc-400-v17.woff2) format("woff2")}
@font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/noto-sc-600-v17.woff2) format("woff2")}

:root{
  --ink:#111111;--ink2:#3F3F46;--mute:#6B6B73;--line:#E7E5E4;--line2:#D6D3D1;
  --bg:#FCFBF8;--soft:#F7F5F0;--card:#FFFFFF;
  --gold:#A87A1E;          /* large gold words (prototype) */
  --gold-t:#8C6A16;        /* small gold text on light (AA) */
  --gold-l:#D9AE4E;        /* gold on dark */
  --goldbtn:#B8901F;--goldbtn-h:#C49C2A;--goldsoft:#F3E7CC;
  --dark:#0E0E0F;
  --ff-h:"Sora",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-b:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:18px;--wrap:1200px;--hdr:72px;--ease:cubic-bezier(.2,.7,.2,1);
}
html:lang(zh-Hans),html:lang(zh){
  --ff-h:"Sora","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --ff-b:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px)}
body{margin:0;background:var(--bg);color:var(--ink2);font:400 16px/1.6 var(--ff-b);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--ff-h);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:0;color:var(--ink)}
p{margin:0}
.wrap{width:min(var(--wrap),100% - 56px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--goldbtn);color:#1A1A1A;padding:10px 16px;border-radius:8px;font-weight:600}
.skip:focus{left:12px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--goldbtn);outline-offset:3px;border-radius:6px}

.gw{color:var(--gold)}
.eyebrow{display:inline-block;font:600 13px/1.35 var(--ff-b);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-t);margin:0 0 14px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;font:600 15px/1 var(--ff-b);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,background-color .2s,border-color .2s,color .2s;white-space:nowrap}
.btn .ico{width:18px;height:18px;transition:transform .2s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:hover .ico{transform:translateX(3px)}
.btn--gold,.btn--dark{background:var(--goldbtn);color:#1A1A1A}
.btn--gold:hover,.btn--dark:hover{background:var(--goldbtn-h);box-shadow:0 10px 24px -8px rgba(169,122,30,.55)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:#000;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.btn--ghost,.btn--line-dark{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn--ghost:hover,.btn--line-dark:hover{border-color:var(--ink)}
.btn--sm{min-height:40px;padding:0 18px;font-size:14px}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* ============ header ============ */
.hdr{position:sticky;top:0;z-index:100;height:var(--hdr);background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr__in{height:100%;display:flex;align-items:center;gap:24px}
.hdr__logo{display:block;flex:none;border-radius:6px}
.hdr__logo img{height:26px;width:auto}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{position:relative;padding:8px 11px;font:500 14.5px/1 var(--ff-b);color:var(--ink2);text-decoration:none;border-radius:8px;transition:color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:11px;right:11px;bottom:-4px;height:2px;border-radius:2px;background:var(--goldbtn)}
.hdr__right{display:flex;align-items:center;gap:18px}
.lang{display:inline-flex;align-items:center;font:500 14px/1 var(--ff-b);color:var(--mute)}
.lang a,.lang span{text-decoration:none;color:var(--mute);padding:6px 2px}
.lang span[aria-current]{color:var(--ink);font-weight:600}
.lang > *+*::before{content:"/";color:var(--line2);margin:0 7px;font-weight:400}
.lang a:hover{color:var(--ink)}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
.drawer{display:none}
@media (max-width:1100px){
  .nav,.hdr__right .btn{display:none}
  .hdr__right{margin-left:auto}
  .burger{display:inline-flex}
  .drawer{display:block;position:fixed;inset:var(--hdr) 0 0 auto;width:min(360px,100%);background:#fff;border-left:1px solid var(--line);padding:22px 24px 32px;transform:translateX(100%);visibility:hidden;transition:transform .35s var(--ease),visibility 0s .35s;overflow-y:auto;z-index:99}
  .drawer.is-open{transform:none;visibility:visible;transition:transform .35s var(--ease)}
  .drawer a.dl{display:flex;justify-content:space-between;align-items:center;padding:15px 4px;border-bottom:1px solid var(--line);font:600 17px/1.2 var(--ff-h);color:var(--ink);text-decoration:none}
  .drawer a.dl[aria-current="page"]{color:var(--gold-t)}
  .drawer .btn{width:100%;margin-top:22px}
  .scrim{position:fixed;inset:var(--hdr) 0 0 0;background:rgba(17,17,17,.35);opacity:0;visibility:hidden;transition:opacity .3s;z-index:98}
  .scrim.is-open{opacity:1;visibility:visible}
}
@media (max-width:560px){.wrap{width:calc(100% - 40px)}.hdr__logo img{height:22px}}

/* ============ sections ============ */
.sec{padding:96px 0;position:relative}
.sec--alt,.sec--soft{background:var(--soft)}
.sec--tight{padding:72px 0}
.sec-head{max-width:660px;margin-bottom:52px}
.sec-head--c{text-align:center;margin-inline:auto}
.h2,.sec-head h2{font-size:clamp(28px,3vw,40px);letter-spacing:-.025em}
.lead{font-size:17px;color:var(--ink2);margin-top:16px;max-width:640px}
.sec-head--c .lead{margin-inline:auto}
@media (max-width:720px){.sec{padding:64px 0}.sec--tight{padding:48px 0}.sec-head{margin-bottom:34px}.lead{font-size:16px}}

/* ============ home hero (v3) ============ */
.hero{padding:72px 0 88px}
.hero__g{display:grid;grid-template-columns:1fr 1.08fr;gap:64px;align-items:center}
.hero h1{font-size:clamp(32px,4.2vw,56px);letter-spacing:-.03em;line-height:1.08;margin:0 0 22px}
:lang(zh-Hans) .hero h1{letter-spacing:0;line-height:1.3}
.hero h1 .h1s{display:block;font:600 13px/1.4 var(--ff-b);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-t);margin-bottom:18px}
.hero__sub{font-size:17.5px;max-width:30em;color:var(--ink2)}
.sub--m{display:none}
.hero .actions{margin:32px 0}
.ticks{display:flex;gap:22px;flex-wrap:wrap;font:500 14px var(--ff-b);color:var(--ink2);list-style:none;margin:0;padding:0}
.ticks li{display:flex;align-items:center;gap:8px}
.ticks i{width:18px;height:18px;border-radius:50%;background:var(--goldsoft);display:grid;place-items:center;color:var(--gold-t);font-style:normal;font-size:11px;font-weight:700}
.hero__pic{position:relative}
.hero__pic .ph{outline:1px solid rgba(17,17,17,.06);border-radius:24px;overflow:hidden;aspect-ratio:4/3.4;box-shadow:0 30px 60px -20px rgba(17,17,17,.28)}
.hero__pic .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.card-f{position:absolute;background:#fff;border-radius:16px;box-shadow:0 18px 40px -12px rgba(17,17,17,.25);padding:14px 16px;font:500 13.5px/1.35 var(--ff-b);color:var(--ink)}
.card-f--b{right:-22px;top:34px}
.card-f small{display:block;color:var(--mute);font-weight:400;font-size:12px}
.card-f--a{left:-34px;bottom:44px;display:flex;gap:12px;align-items:center}
.card-f--a .dot{flex:none;width:36px;height:36px;border-radius:10px;background:var(--ink);display:grid;place-items:center;color:var(--gold-l);font-weight:700}
.card-f--a .pill{animation:pop 4s ease-in-out infinite}
@keyframes pop{0%,70%,100%{opacity:1}80%{opacity:.35}}
.pill{display:inline-block;background:#FDECEC;color:#B42318;font:600 11px var(--ff-b);padding:3px 8px;border-radius:99px;margin-top:6px}
.live{display:inline-flex;align-items:center;gap:6px;color:#15803D;font:600 11.5px var(--ff-b)}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px #DCFCE7}

/* venue strip */
.vstrip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;background:#fff}
.vstrip .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.vstrip p{font:500 14px var(--ff-b);color:var(--mute)}
.vstrip ul{display:flex;gap:36px;list-style:none;margin:0;padding:0;font:600 16px var(--ff-h);color:var(--ink);flex-wrap:wrap}

/* printed vs digital */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cmp figure{margin:0;border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line)}
.cmp img{aspect-ratio:16/9;object-fit:cover;width:100%}
.cmp figcaption{padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px;font:600 15px var(--ff-b);color:var(--ink)}
.cmp figcaption span{font-weight:400;font-size:14px;color:var(--mute)}
.cmp figure:first-child figcaption{background:#F3EFE7}
.cmp figure:last-child figcaption{background:var(--goldbtn)}
.cmp figure:first-child figcaption,.cmp figure:last-child figcaption,.cmp figure figcaption span{color:var(--ink)}

/* feature cards */
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.f{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;transition:.2s}
.f:hover{border-color:var(--line2);transform:translateY(-3px);box-shadow:0 18px 36px -18px rgba(17,17,17,.18)}
.f .ic{width:44px;height:44px;border-radius:12px;background:var(--ink);display:grid;place-items:center;margin-bottom:22px}
.f .ic svg{width:22px;height:22px;stroke:var(--gold-l);fill:none;stroke-width:1.8}
.f h3{font-size:18px;margin-bottom:8px}
.f p{font-size:15px;color:var(--mute)}

/* industry photo cards */
.ind{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.ic2{position:relative;display:block;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;color:#fff;text-decoration:none;background:#1a1a1a}
.ic2 img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.ic2:hover img{transform:scale(1.04)}
.ic2::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.82))}
.ic2 span,.ic2 figcaption{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;font-size:14px;color:#E4E4E7;line-height:1.4}
.ic2 b{display:block;font:600 18px/1.25 var(--ff-h);color:#fff;margin-bottom:4px}
.ind-sub{margin:64px 0 24px}
.ind-sub h2{font-size:clamp(22px,2.2vw,28px)}
.ind-sub p{color:var(--mute);margin-top:8px}
.more{margin-top:32px}

/* split rows */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:center}
.split .ph{border-radius:24px;overflow:hidden;aspect-ratio:4/4.4}
.split .ph img{width:100%;height:100%;object-fit:cover}
.split--rev .ph{aspect-ratio:4/3.2}
.split h2{font-size:clamp(28px,3vw,40px);margin:0 0 14px}
.split p.lead{margin:0 0 26px}
.chk{list-style:none;margin:0;padding:0}
.chk li{position:relative;padding:10px 0 10px 32px;border-top:1px solid var(--line);font:500 15.5px var(--ff-b);color:var(--ink)}
.chk li::before{content:"";position:absolute;left:0;top:14px;width:18px;height:18px;border-radius:50%;background:var(--goldsoft) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M6 12l4 4 8-8%27 stroke=%27%238C6A16%27 stroke-width=%273%27 fill=%27none%27/%3E%3C/svg%3E") center/12px no-repeat}
.steps{list-style:none;counter-reset:s;margin:24px 0 26px;padding:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--line)}
.steps li::before{content:"0" counter(s);font:700 15px var(--ff-h);color:var(--gold-t);padding-top:3px}
.steps h3{font-size:18px;margin-bottom:4px}
.steps p{font-size:15.5px;color:var(--mute)}

/* ============ CTA band (dark card) ============ */
.cta{padding:96px 0 0}
.cta__card{position:relative;border-radius:28px;overflow:hidden;color:#fff;padding:88px 64px;background:radial-gradient(60% 120% at 100% 0%,rgba(217,174,78,.22),transparent 60%),var(--dark);isolation:isolate}
.cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta__card--img::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,14,15,.94) 30%,rgba(14,14,15,.55) 60%,rgba(14,14,15,.1))}
.cta__in{position:relative;max-width:580px}
.cta .eyebrow{color:var(--gold-l)}
.cta h2{color:#fff;font-size:clamp(28px,3.2vw,44px);margin-bottom:16px}
.cta h2 .gw{color:var(--gold-l)}
.cta p:not(.eyebrow){color:#D4D4D8;font-size:17px;margin-bottom:32px}
.cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.cta .btn--ghost:hover{border-color:#fff}
@media (max-width:720px){.cta{padding:64px 0 0}.cta__card{padding:56px 24px;border-radius:22px}.cta__card--img::after{background:linear-gradient(0deg,rgba(14,14,15,.95) 45%,rgba(14,14,15,.55))}}

/* ============ inner page hero ============ */
.phero{padding:80px 0 72px;border-bottom:1px solid var(--line);background:var(--bg)}
.phero h1{font-size:clamp(32px,4.2vw,56px);max-width:820px;line-height:1.08;letter-spacing:-.03em}
:lang(zh-Hans) .phero h1{letter-spacing:0;line-height:1.3}
.phero__sub{font-size:17.5px;color:var(--ink2);max-width:600px;margin-top:20px}
.phero .actions{margin-top:32px}
.phero__g{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.phero__pic{border-radius:24px;overflow:hidden;aspect-ratio:4/3;outline:1px solid rgba(17,17,17,.06);box-shadow:0 30px 60px -24px rgba(17,17,17,.28)}
.phero__pic img{width:100%;height:100%;object-fit:cover}
@media (max-width:980px){.phero{padding:48px 0 52px}.phero__g{grid-template-columns:1fr;gap:36px}.phero__sub{font-size:16px}}

/* feature rows (inner pages) */
.rows{display:grid;gap:96px}
.row{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.row--flip .row__media{order:2}
.row__media{position:relative;margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:#eee}
.row__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.row h2{font-size:clamp(24px,2.6vw,34px)}
.row p{color:var(--ink2);font-size:16.5px;margin-top:16px}
.row p.eyebrow{margin-top:0;font-size:13px;color:var(--gold-t)}
@media (max-width:900px){.rows{gap:64px}.row{grid-template-columns:1fr;gap:28px}.row--flip .row__media{order:0}}

.sells{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sell{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;transition:.2s}
.sell:hover{border-color:var(--line2);transform:translateY(-3px);box-shadow:0 18px 36px -18px rgba(17,17,17,.18)}
.sell .ico{width:44px;height:44px;padding:11px;border-radius:12px;background:var(--ink);color:var(--gold-l);margin-bottom:22px}
.sell h3{font-size:18px;margin-bottom:8px}
.sell p{color:var(--mute);font-size:15px}
@media (max-width:900px){.sells{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.sells{grid-template-columns:1fr;gap:12px}}

/* timeline */
.tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.tl::before{content:"";position:absolute;left:24px;right:calc(25% - 4px);top:23px;height:2px;background:linear-gradient(90deg,var(--goldbtn),rgba(184,144,31,.25))}
.tl li{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:0 22px 24px;margin-top:24px}
.tl__n{position:relative;z-index:1;width:48px;height:48px;margin-top:-24px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--gold-l);font:700 17px/1 var(--ff-h)}
.tl h3{font-size:18px;margin:20px 0 8px;line-height:1.3}
.tl p{color:var(--mute);font-size:15px}
.tl::before{display:none}
@media (max-width:900px){.tl{grid-template-columns:1fr 1fr;gap:34px 20px}}
@media (max-width:560px){.tl{grid-template-columns:1fr}}
.tl-cta{margin-top:48px}

/* packages */
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.pkg{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px 28px 28px;transition:.2s}
.pkg:hover{transform:translateY(-3px);box-shadow:0 18px 36px -18px rgba(17,17,17,.18)}
.pkg__lab,.addon__lab{font:600 13px/1 var(--ff-b);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-t)}
.pkg h3{font-size:23px;margin:14px 0 10px}
.pkg p{color:var(--mute);font-size:15px}
.pkg ul{list-style:none;padding:0;margin:22px 0 28px;display:grid;gap:12px}
.pkg li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink)}
.pkg li .ico{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:var(--goldsoft);color:var(--gold-t);margin-top:2px}
.pkg .btn{margin-top:auto}
.pkg--hi{border:1.5px solid var(--goldbtn);box-shadow:0 24px 48px -24px rgba(169,122,30,.45)}
.pkg--hi::before{content:"";position:absolute;left:28px;right:28px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:var(--goldbtn)}
.addon{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px 32px;border-radius:20px;border:1px dashed rgba(140,106,22,.45);background:#fff}
.addon__lab{display:inline-flex;align-items:center;gap:8px}
.addon__lab .ico{width:16px;height:16px}
.addon h3{font-size:21px;margin:12px 0 6px}
.addon p{color:var(--mute);font-size:15px}
@media (max-width:960px){.pkgs{grid-template-columns:1fr}.addon{flex-direction:column;align-items:flex-start;padding:24px}}
.panel{background:var(--soft);border-radius:28px;padding:56px}
.sec--alt .panel{background:#fff}
@media (max-width:760px){.panel{padding:24px 18px;border-radius:20px}}

/* FAQ */
.faq{max-width:860px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line2)}
.faq details:first-child{border-top:1px solid var(--line2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font:600 18px/1.35 var(--ff-h);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--goldsoft);color:var(--gold-t);transition:transform .3s var(--ease)}
.faq summary .pm .ico{width:18px;height:18px}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq summary:hover{color:var(--gold-t)}
.faq .a{padding:0 60px 26px 4px;font-size:16px;color:var(--ink2)}
.faq .a strong{color:var(--ink)}

/* contact */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.contact__aside h2{font-size:clamp(24px,2.6vw,32px)}
.contact__aside p{color:var(--ink2);margin-top:14px}
.contact__list{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:16px}
.contact__list li{display:flex;gap:14px;align-items:flex-start;color:var(--ink)}
.contact__list .ico{flex:none;width:22px;height:22px;color:var(--gold-t);margin-top:3px}
.contact__list a{color:var(--ink)}
.contact__list address{font-style:normal}
.form{background:#fff;border:1px solid var(--line);border-radius:20px;padding:36px;box-shadow:0 30px 60px -36px rgba(17,17,17,.25)}
.form h3{font-size:22px}
.form .lead-s{color:var(--mute);font-size:15px;margin:8px 0 24px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fg{display:flex;flex-direction:column;gap:8px}
.fg--full{grid-column:1/-1}
.fg label{font:600 14px/1.2 var(--ff-b);color:var(--ink)}
.fg input,.fg textarea{width:100%;font:400 16px/1.4 var(--ff-b);color:var(--ink);background:var(--bg);border:1.5px solid var(--line2);border-radius:12px;padding:13px 15px;transition:border-color .2s,box-shadow .2s}
.fg textarea{min-height:150px;resize:vertical}
.fg input:focus,.fg textarea:focus{outline:none;border-color:var(--goldbtn);box-shadow:0 0 0 4px rgba(184,144,31,.18)}
.form .btn{margin-top:24px;width:100%}
.form-note{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--mute);text-align:center}
.form-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.form-note a:hover{color:var(--ink)}
.alert{display:none;padding:14px 16px;border-radius:12px;margin-bottom:18px;font-weight:500}
.alert.is-on{display:block}
.alert--ok{background:#EAF3E3;color:#24461A}
.alert--err{background:#F8E3DF;color:#7A1D0E}
@media (max-width:900px){.contact{grid-template-columns:1fr;gap:36px}.form{padding:24px}.fgrid{grid-template-columns:1fr}}

/* legal */
.legal{display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:start}
.legal__toc{position:sticky;top:calc(var(--hdr) + 24px);font-size:15px}
.legal__toc h2{font:600 13px/1 var(--ff-b);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-t);margin-bottom:14px}
.legal__toc ol{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--ink2)}
.legal__toc a{color:var(--ink2);text-decoration:none}
.legal__toc a:hover{color:var(--ink);text-decoration:underline}
/* Contents list: fixed-width, right-aligned number column so 10-16 line up with 1-9 */
.legal__toc ol{list-style:none;padding-left:0;counter-reset:toc}
.legal__toc ol>li{counter-increment:toc;display:grid;grid-template-columns:1.9em 1fr;column-gap:.35em}
.legal__toc ol>li::before{content:counter(toc) ".";text-align:right;font-variant-numeric:tabular-nums}
.legal__body{max-width:760px;color:var(--ink2);font-size:16px}
.legal__body h2{font-size:22px;margin:44px 0 14px}
.legal__body h2:first-child{margin-top:0}
.legal__body h3{font-size:17.5px;margin:26px 0 10px}
.legal__body p,.legal__body ul{margin:0 0 14px}
.legal__body ul{padding-left:22px}
.legal__body li{margin-bottom:6px}
.legal__body a{color:var(--gold-t)}
.legal__body strong{color:var(--ink)}
.legal .legal__body{background:#fff;border-radius:18px;padding:40px;border:1px solid var(--line)}
/* Company details (legal pages only): small, like the legal body text */
.legal__co{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--ink2)}
.legal__body .legal__co h2{font-size:16px;margin:0 0 8px}
.legal__co p{margin:0}
@media (max-width:900px){.legal{grid-template-columns:1fr;gap:28px}.legal__toc{position:static}.legal .legal__body{padding:24px 18px}}

/* ============ footer ============ */
.ftr{background:var(--dark);color:#A1A1AA;margin-top:112px;padding:72px 0 0;font-size:14.5px}
.ftr__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
.ftr__logo{display:inline-block;border-radius:6px}
.ftr__logo img{height:24px;width:auto}
.ftr__tag{font:600 16px/1.3 var(--ff-h);color:#fff;margin-top:20px}
.ftr__tag .gw{color:var(--gold-l)}
.ftr__desc{margin-top:10px;max-width:22em;line-height:1.6}
.ftr h2{font:600 14px/1 var(--ff-b);letter-spacing:0;color:#fff;margin:0 0 16px}
.ftr__col a{display:block;color:#A1A1AA;text-decoration:none;padding:5px 0}
.ftr__col a:hover{color:#fff}
.ftr address{font-style:normal;margin-top:8px;line-height:1.6}
.ftr__bot{margin-top:56px;border-top:1px solid #27272A;padding:24px 0 32px;display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;font-size:13px}
.ftr__parent{color:#fff;font-weight:600;letter-spacing:.02em}
.ftr__parent b{color:var(--gold-l);font-weight:700}
.ftr__legal{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;font-size:13px;color:#A1A1AA}
.ftr__legal a{color:#A1A1AA;text-decoration:none}
.ftr__legal a:hover{color:#fff;text-decoration:underline}
.ftr__sep{color:#52525B}
@media (max-width:720px){.ftr__bot{flex-direction:column;align-items:center;text-align:center}.ftr__legal{justify-content:center}}
.ftr__bot .nw{white-space:nowrap}
@media (max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}.ftr__brand{grid-column:1/-1}.ftr{margin-top:80px}}
@media (max-width:480px){.ftr__grid{gap:32px 20px}.ftr__col:last-child{grid-column:1/-1}}

/* ============ responsive (home) ============ */
@media (max-width:1100px){.ind{grid-template-columns:repeat(3,1fr)}}
@media (max-width:980px){
  .hero{padding:24px 0 64px}
  .hero__g,.split,.cmp{grid-template-columns:1fr}
  .hero__g{gap:32px}
  .hero__pic{order:-1}
  .hero__pic .ph{aspect-ratio:4/3;border-radius:20px}
  .hero__pic .ph img{object-position:45% 40%}
  .sub--d{display:none}.sub--m{display:block}
  .feat{grid-template-columns:1fr 1fr}
  .card-f--b{right:12px}
  .card-f--a{left:10px;bottom:10px;padding:7px 10px;gap:8px;border-radius:12px;font-size:12px;box-shadow:0 10px 24px -10px rgba(17,17,17,.35)}
  .card-f--a .dot,.card-f--a small{display:none}
  .card-f--a > div{display:flex;align-items:center;gap:8px}
  .card-f--a .pill{margin-top:0;font-size:10.5px;padding:2px 7px}
  .split{gap:40px}
  .split--rev .ph{order:-1}
  .split .ph{aspect-ratio:4/3}
}
@media (max-width:700px){.ind{grid-template-columns:1fr 1fr;gap:12px}.ic2 span,.ic2 figcaption{left:12px;right:12px;bottom:12px;font-size:12.5px}.ic2 b{font-size:15.5px}}
@media (max-width:560px){
  .feat{grid-template-columns:1fr}
  .vstrip ul{gap:10px 18px;font-size:15px}
  .hero .actions .btn{width:100%}
  .card-f--b{display:none}
  .hero__sub{font-size:16.5px}
  .ticks{gap:10px 18px}
}
@media (max-width:420px){.ind{grid-template-columns:1fr}.ic2{aspect-ratio:4/3}}

/* ============ motion ============ */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .zm{transform:scale(.97);transition:transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .zm.in{transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js .zm{opacity:1!important;transform:none!important}
  .btn:hover,.f:hover,.pkg:hover,.sell:hover{transform:none}
}

/* ============ QA fixes ============ */
.sec-head{max-width:720px}
.sec + .cta{padding-top:0}
.cta__bg{object-position:50% 22%}
.pills{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.pills li{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink2);font:500 14px/1 var(--ff-b)}
.ind-intro{font-size:19px;color:var(--ink);margin:0}
@media (max-width:720px){
  .cta__card--img{padding-top:0}
  .cta__card--img .cta__bg{position:relative;inset:auto;display:block;width:calc(100% + 48px);max-width:none;height:auto;aspect-ratio:16/10;margin:0 -24px 32px;z-index:0;object-position:50% 30%}
  .cta__card--img::after{display:none}
  .ind-intro{font-size:17px}
}
.sec--alt + .cta,.sec--soft + .cta{padding-top:72px}

/* ============ photos 21–23 (real shop walls) ============ */
.phero__fig{margin:0}
.phero__fig .phero__pic{aspect-ratio:16/9}
.phero__cap{margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--mute)}
.pair{margin:72px 0 0}
.pair__cap{font:600 18px/1.35 var(--ff-h);color:var(--ink);margin:0 0 18px}
.pair__g{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pair__g figure{margin:0}
.pair__g img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;outline:1px solid rgba(17,17,17,.06)}
.pair__g figcaption{margin-top:10px;font:500 14px/1.4 var(--ff-b);color:var(--mute)}
.hiw{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center}
.hiw__pic{margin:0}
.hiw__img{border-radius:22px;overflow:hidden;outline:1px solid rgba(17,17,17,.06);box-shadow:0 30px 60px -28px rgba(17,17,17,.3)}
.hiw__img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.hiw__pic figcaption{margin-top:12px;font:500 14.5px/1.45 var(--ff-b);color:var(--mute)}
.tl.tl--stack{grid-template-columns:1fr;gap:14px}
.tl--stack li{margin-top:0;padding:18px 20px;display:grid;grid-template-columns:48px 1fr;column-gap:16px;align-items:start}
.tl--stack .tl__n{margin-top:0;grid-row:1 / span 2}
.tl--stack h3{grid-column:2;margin:2px 0 4px}
.tl--stack p{grid-column:2}
@media (max-width:900px){.hiw{grid-template-columns:1fr;gap:32px}}
@media (max-width:720px){.pair{margin-top:48px}.pair__g{grid-template-columns:1fr;gap:22px}.pair__cap{font-size:17px}}

/* 21/23 recrop to 2:1 (x90–1355, y155–788) + photo 19 caption */
.phero__fig .phero__pic{aspect-ratio:2/1}
.phero__fig .phero__pic img,.pair__g img{object-fit:cover}
.pair__g img{aspect-ratio:2/1}
.row__fig{margin:0}
.row--flip .row__fig{order:2}
.row__cap{margin-top:12px;font:500 14.5px/1.45 var(--ff-b);color:var(--mute)}
@media (max-width:900px){.row--flip .row__fig{order:0}}

/* ---- 中文 typography (zh-Hans pages only; Noto Sans SC 400/600 self-hosted) ---- */
:lang(zh) body{font-family:var(--ff-b);font-weight:400;line-height:1.75}
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3,:lang(zh) h4{font-family:var(--ff-h);font-weight:600;letter-spacing:0;line-height:1.3}
:lang(zh) b,:lang(zh) strong{font-weight:600}
:lang(zh) .nav a,:lang(zh) .lang,:lang(zh) .drawer a.dl,:lang(zh) .btn,:lang(zh) button{font-family:var(--ff-h);font-weight:600}
:lang(zh) .faq summary,:lang(zh) .pair__cap,:lang(zh) .ic2 b,:lang(zh) .ftr__tag,:lang(zh) .vstrip ul{font-weight:600}
:lang(zh) .eyebrow,:lang(zh) .hero h1 .h1s,:lang(zh) .pkg__lab,:lang(zh) .addon__lab,:lang(zh) .legal__toc h2{letter-spacing:0;text-transform:none}
:lang(zh) .eyebrow,:lang(zh) .hero h1 .h1s{font-size:14px}
:lang(zh) .hero h1 .h1s{font-weight:600;line-height:1.5}
/* no Chinese caption/label/chip below 13px */
:lang(zh) .pill,:lang(zh) .live,:lang(zh) .card-f small,:lang(zh) .card-f--a,:lang(zh) .card-f--a .pill,:lang(zh) .ic2 span,:lang(zh) .ic2 figcaption,:lang(zh) .ftr__bot{font-size:13px}

/* ==== TYPE SCALE v2 — LIVE (2026-09-25). EN type sizes + compact header approved from type preview v2.
   中文 keeps the previous live sizes: every font-size rule below is scoped to html:not(:lang(zh)), so zh pages
   fall through to the original v2.css values (H1 56/32, H2 40/28, lead 17/16, eyebrow 14, labels 15 …). ==== */
/* Header (both languages): bar 60px desktop / 56px mobile; logo 23px (20px ≤560); nav 14px; CTA 13.5px / 38px;
   EN/中文 switch 13px; hamburger keeps 44px tap target, icon 19px. --hdr also drives sticky/scroll-padding/drawer/TOC offsets. */
:root{--hdr:60px}
.hdr__logo img{height:23px}
.nav a{font-size:14px}
.lang{font-size:13px}
.burger .ico{width:19px;height:19px}
/* Buttons (both languages): 15px / 46px; other small buttons 40px / 14px; header CTA 13.5px / 38px */
.btn{min-height:46px;font-size:15px}
.btn--sm{min-height:40px;font-size:14px}
.hdr__right .btn{min-height:38px;padding:0 16px;font-size:13.5px}
/* Section padding (both languages): 96 → 72 desktop, 64 → 56 mobile */
.sec{padding:72px 0}
.sec--tight{padding:56px 0}
/* EN only: H1 38 / 28 */
html:not(:lang(zh)) .hero h1,html:not(:lang(zh)) .phero h1{font-size:clamp(1.75rem,1.25rem + 1.6vw,2.375rem);line-height:1.15;letter-spacing:-.02em}
/* EN only: H2 28 / 22 */
html:not(:lang(zh)) .h2,html:not(:lang(zh)) .sec-head h2,html:not(:lang(zh)) .split h2,html:not(:lang(zh)) .row h2,html:not(:lang(zh)) .cta h2,html:not(:lang(zh)) .ind-sub h2,html:not(:lang(zh)) .contact__aside h2{font-size:clamp(1.375rem,1.1rem + .9vw,1.75rem);line-height:1.25}
/* EN only: H3 card titles 18 / 17 */
html:not(:lang(zh)) :is(.f,.steps,.sell,.tl,.pkg,.addon,.form) h3{font-size:18px}
/* EN only: descriptions 15.5 / 15 */
html:not(:lang(zh)) :is(.lead,.hero__sub,.phero__sub,.ind-intro){font-size:15.5px}
/* EN only: eyebrows + label captions 12.5px uppercase .08em */
html:not(:lang(zh)) :is(.eyebrow,.hero h1 .h1s,.pkg__lab,.addon__lab,.legal__toc h2){font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:720px){
  :root{--hdr:56px}
  .sec{padding:56px 0}
  .sec--tight{padding:40px 0}
  html:not(:lang(zh)) body{font-size:15.5px}
  html:not(:lang(zh)) :is(.lead,.hero__sub,.phero__sub,.ind-intro){font-size:15px}
  html:not(:lang(zh)) :is(.f,.steps,.sell,.tl,.pkg,.addon,.form) h3{font-size:17px}
}
@media (max-width:560px){.hdr__logo img{height:20px}}
/* balanced heading breaks (EN + zh); nicer paragraph endings on zh (13px zh minimum stays in the rules above) */
h1,h2,h3{text-wrap:balance}
:lang(zh) p,:lang(zh) figcaption,:lang(zh) li{text-wrap:pretty}
/* desktop-only line break (menu-boards H1 breaks after "counter,"; phones wrap naturally, balanced) */
@media (max-width:720px){.br-d{display:none}}
/* menu-boards EN H1: "Digital menus for your counter," is ~578px at 38px vs a 568px column, so let it use 24px of the 64px grid gap on 2-column layouts */
@media (min-width:981px){.phero h1.h1-mb{margin-right:-24px}}
/* ==== end TYPE SCALE v2 — LIVE ==== */

/* ==== Setup / no-install pass (2026-09-25): step icons, "what you need" icons, 4:3 setup photo ==== */
.tl__ic{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:10px;background:var(--ink);display:grid;place-items:center}
.tl__ic svg,.need__ic svg{width:19px;height:19px;stroke:var(--gold-l);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tl--stack h3,.tl--stack p{padding-right:44px}
.need{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 24px}
.need li{display:flex;align-items:center;gap:10px;font:500 15px/1.3 var(--ff-b);color:var(--ink)}
.need__ic{flex:none;width:40px;height:40px;border-radius:11px;background:var(--ink);display:grid;place-items:center}
.need__ic svg{width:20px;height:20px}
.hiw__img--43 img{aspect-ratio:4/3}
.nw{white-space:nowrap}
:lang(zh) .need li{font-size:15px}
/* ==== end setup pass ==== */

/* ==== HERO2 (preview, 2026-09-25) — still frame, slow inner zoom, floating chips, live pill ====
   Frame (.ph / .phero__pic) never moves: no translate/rotate, shadow and edges fixed; overflow:hidden clips the zoom.
   Section cards don't float. Reduced motion: the global `*{animation:none!important;transition:none!important}`
   above stops zoom + chip float; the pill still swaps (content change, JS class toggle) but instantly. */
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.04)}}
.hero__pic .ph img,.phero__pic img{transform-origin:50% 50%;animation:kb 14s ease-in-out infinite alternate}
/* homepage hero (index / home-zh): stronger zoom, 1 -> 1.10 over 10s. Kept under reduced motion too (the user's PC has
   Windows "Animation effects" off); the frame stays fixed and clips it. Page heroes keep 1.04 / 14s, off under reduced motion. */
@keyframes kb-home{from{transform:scale(1)}to{transform:scale(1.1)}}
.hero__pic .ph img{animation:kb-home 10s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){
  .hero__pic .ph img{animation-name:kb-home!important;animation-duration:10s!important;animation-timing-function:ease-in-out!important;animation-iteration-count:infinite!important;animation-direction:alternate!important;animation-delay:0s!important}
}
/* chips: max 6px, 5.5s / 6.5s (off-beat with the 14s zoom), staggered */
@keyframes chipf{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.card-f{animation:chipf 5.5s ease-in-out infinite}
.card-f--b{animation-duration:6.5s;animation-delay:-3.2s}
/* pill: Sold out (muted charcoal) <-> Back on (gold #B8901F, charcoal text). Both labels share one grid cell,
   so the pill is always as wide as the longer label, text centred, never resizes; 300ms crossfade, no blink */
.card-f--a .pill{animation:none;display:inline-grid;background:none;padding:0;border-radius:99px;vertical-align:middle}
.pill__s,.pill__b{grid-area:1/1;text-align:center;white-space:nowrap;padding:3px 9px;border-radius:99px;transition:opacity .3s ease}
.pill__s{background:#3A3A3C;color:#F4F4F5}
.pill__b{background:#B8901F;color:#1C1C1E;opacity:0}
.card-f--a small{display:grid}
.card-f--a small>span{grid-area:1/1;transition:opacity .3s ease}
.card-f--a small .sm__b{opacity:0}
.card-f--a.is-on .pill__s,.card-f--a.is-on .sm__s{opacity:0}
.card-f--a.is-on .pill__b,.card-f--a.is-on .sm__b{opacity:1}
@media (max-width:720px){ .pill__s,.pill__b{padding:2px 8px} .card-f--a small{display:none} }
/* ==== end HERO2 ==== */

/* Venue gallery (industries): 4x2 desktop, 2 across mobile (--vg-cols) */
.vgal{--vg-cols:4;display:grid;grid-template-columns:repeat(var(--vg-cols),minmax(0,1fr));gap:18px;margin:0 0 64px}
.vg{position:relative;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:#1a1a1a}
.vg img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.vg:hover img{transform:scale(1.04)}
.vg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.72));pointer-events:none}
.vg figcaption{position:absolute;left:18px;right:18px;bottom:14px;z-index:1;font:600 18px/1.25 var(--ff-h);color:#fff}
@media (max-width:700px){.vgal{--vg-cols:2;gap:12px;margin-bottom:48px}.vg figcaption{left:12px;right:12px;bottom:10px;font-size:15px}}
/* Screen close-up with callouts (menu boards) */
.glance{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr) minmax(0,1fr);grid-template-rows:1fr 1fr;column-gap:32px;row-gap:24px;align-items:center}
.glance__pic{grid-column:2;grid-row:1/3;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;background:#e9e4da;box-shadow:0 30px 60px -36px rgba(17,17,17,.35)}
.glance__pic img{display:block;width:100%;height:100%;object-fit:cover}
.glance__list{display:contents;list-style:none}
.glance__list li{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;font:600 15px/1.4 var(--ff-b);color:var(--ink);text-wrap:balance}
.glance__list li::after{content:"";position:absolute;top:50%;width:32px;height:2px;margin-top:-1px;background:var(--goldbtn)}
.glance__list li:nth-child(odd){grid-column:1;text-align:right}
.glance__list li:nth-child(odd)::after{right:-33px}
.glance__list li:nth-child(even){grid-column:3}
.glance__list li:nth-child(even)::after{left:-33px}
.glance__list li:nth-child(-n+2){grid-row:1}
.glance__list li:nth-child(n+3){grid-row:2}
@media (max-width:900px){
  .glance{display:block}
  .glance__list{display:block;margin:20px 0 0;padding:0}
  .glance__list li,.glance__list li:nth-child(odd){background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 0 12px 22px;text-align:left;font-weight:500}
  .glance__list li:last-child{border-bottom:0}
  .glance__list li::after,.glance__list li:nth-child(odd)::after,.glance__list li:nth-child(even)::after{left:0;right:auto;width:8px;height:8px;margin-top:-4px;border-radius:50%}
}
.nowrap{white-space:nowrap}
/* .ic2 span is the absolute-positioned caption slot; keep inline no-wrap spans inside the caption in flow */
.ic2 figcaption .nowrap{position:static;left:auto;right:auto;bottom:auto;z-index:auto;font:inherit;color:inherit}
/* How-it-works before/after pair: reuses .cmp */
.cmp--hiw{margin-top:48px}
/* Mounting options (menu boards, setup) */
.mounts{--m-cols:4;display:grid;grid-template-columns:repeat(var(--m-cols),minmax(0,1fr));gap:18px}
.mounts--3{--m-cols:3;max-width:900px;margin-inline:auto}
.mnt{margin:0}
.mnt img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:#e9e4da}
.mnt figcaption{margin-top:10px;font:600 15px/1.3 var(--ff-b);color:var(--ink);text-align:center}
.mount-sm{margin-top:56px}
.mount-sm__h{text-align:center;font-size:clamp(18px,1.6vw,21px);margin:0 0 20px}
@media (max-width:700px){.mounts,.mounts--3{--m-cols:2;gap:12px}.mounts--3 .mnt:last-child{grid-column:1/-1;max-width:calc(50% - 6px);justify-self:center;width:100%}.mnt figcaption{font-size:14px;margin-top:8px}.mount-sm{margin-top:40px}}
/* Menu-boards photo cards */
.sells--photo .sell{padding:0;overflow:hidden;display:flex;flex-direction:column}
.sell__pic{aspect-ratio:4/3;overflow:hidden;background:#e9e4da}
.sell__pic img{display:block;width:100%;height:100%;object-fit:cover}
.sells--photo .sell h3{margin:18px 20px 6px}
.sells--photo .sell p{margin:0 20px 20px}
@media (max-width:480px){.sells--photo{grid-template-columns:1fr 1fr}.sells--photo .sell h3{margin:12px 12px 4px;font-size:16px}.sells--photo .sell p{margin:0 12px 14px;font-size:13.5px}}
/* Menu-boards mixed tiles */
.sells--mix{grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto}
.sells--mix .sell__pic{position:relative;aspect-ratio:4/3}
.sells--mix .sell__pic img{position:absolute;inset:0}
.sells--mix .sell--hero{grid-column:1;grid-row:1/3}
.sells--mix .sell--hero .sell__pic{aspect-ratio:auto;flex:1 1 auto;min-height:0}
.sells--mix .sell--wide{grid-column:2/4;grid-row:2}
.sells--mix .sell--wide .sell__pic{aspect-ratio:12/5}
@media (max-width:900px){.sells--mix{grid-template-columns:1fr 1fr;grid-template-rows:none;gap:16px}.sells--mix .sell--hero{grid-column:1/3;grid-row:auto}.sells--mix .sell--hero .sell__pic{aspect-ratio:16/9;flex:none}.sells--mix .sell--wide{grid-column:1/3;grid-row:auto}.sells--mix .sell--wide .sell__pic{aspect-ratio:16/9}}
@media (max-width:480px){.sells--mix{gap:12px}}
.hero h1 br+.gw{white-space:nowrap}
:lang(zh-Hans) .hero h1{font-size:clamp(32px,4.2vw,52px)}
mark.gap{background:#F6ECCB;color:var(--ink);padding:1px 6px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(184,144,31,.55);font-size:.92em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (max-width:480px){:lang(zh-Hans) .hero .ticks{gap:8px 10px;font-size:12.5px;flex-wrap:nowrap}:lang(zh-Hans) .hero .ticks li{gap:5px;white-space:nowrap}:lang(zh-Hans) .hero .ticks i{width:16px;height:16px;font-size:10px}}
@media (max-width:767px){.ftr__bot{padding-bottom:84px}}