/* FORMFTY HUB homepage v4 — one type scale for every section and every page 2.
   Six roles: kicker, title, subtitle, body, stat, caption. Each role has one size
   per breakpoint; no section may override it. Loaded after the inline styles'
   cascade position, so declarations carry !important where the inline sheet did. */
/* r2 (2026-11-01, Horis): Latin display headline x1.2; every other role x0.8 (body 16 -> 12.8px desktop, 15 -> 12px mobile,
   never below 12px); the "more" link x0.5. Page 2 shares these roles; its big headline/quote (--t-head) is the old title x0.8.
   --t-cap0/--t-kicker0 keep the old caption sizes for the MENU and the page-3 chips, which this round does not change. */
:root{
  --t-kicker:9.6px;--t-title:clamp(52.8px,4.8vw,72px);--t-sub:20.8px;--t-body:12.8px;--t-stat:27.2px;--t-cap:10.4px;--t-more:12px;--t-head:clamp(35.2px,3.2vw,48px);--t-cap0:13px;
  --lh-title:.92;--lh-sub:1.4;--lh-body:1.75;--lh-cap:1.6;
  --ls-kicker:.16em;--f-zh:"PingFang TC","Trebuchet MS","Noto Sans TC","Microsoft JhengHei",sans-serif;--f-en:"Trebuchet MS","PingFang TC",Arial,sans-serif;
}
/* r3 (2026-11-01, Horis): on phones the Latin display headline goes back to its pre-r2 size (40px; 36px at <=374px, as before r2);
   desktop keeps x1.2. Phones also never go below 11px for any type role (kicker, caption, the "more" link). Desktop unchanged. */
@media (max-width:899px){:root{--t-kicker:11px;--t-title:40px;--t-sub:16.8px;--t-body:12px;--t-stat:22.4px;--t-cap:11px;--t-more:11px;--t-head:32px;--t-cap0:12px}}
@media (max-width:374px){:root{--t-title:36px;--t-sub:16px;--t-head:28.8px}}

/* ---------- homepage sections: one scale, no per-section scaling ---------- */
html body main>section:not(#_v4)>.col{transform:none!important}
html body main>section:not(#_v4) .lnum,html body main>section:not(#_v4) .eyebrow{font:400 var(--t-kicker)/1.4 var(--f-en)!important;letter-spacing:var(--ls-kicker)!important;text-transform:uppercase;color:var(--mute)!important;margin:0 0 18px!important}
html body main>section:not(#_v4) .en-t{font-family:var(--display)!important;font-size:var(--t-title)!important;line-height:var(--lh-title)!important;letter-spacing:-.03em!important;margin:0 0 22px!important}
html body main>section:not(#_v4) h1.zh,html body main>section:not(#_v4) h2.zh{font:700 var(--t-sub)/var(--lh-sub) var(--f-zh)!important;letter-spacing:.02em!important;margin:0 0 14px!important;max-width:none!important}
html body main>section:not(#_v4) .lead,html body main>section:not(#_v4) .pains .q,html body main>section:not(#_v4) .pains .a,html body main>section:not(#_v4) .duo p,html body main>section:not(#_v4) .qa summary,html body main>section:not(#_v4) .qa p,html body main>section:not(#_v4) .hubx-l{font-size:var(--t-body)!important;line-height:var(--lh-body)!important}
html body main>section:not(#_v4) .lead{margin:0 0 22px!important;max-width:40em}
html body main>section:not(#_v4) .facts dt{font-family:var(--display)!important;font-weight:700!important;font-size:var(--t-stat)!important;line-height:1.1!important}
html body main>section:not(#_v4) .facts dd,html body main>section:not(#_v4) .spec,html body main>section:not(#_v4) .note,html body main>section:not(#_v4) .co,html body main>section:not(#_v4) .how li,html body main>section:not(#_v4) .pains .a em,html body main>section:not(#_v4) .duo h3 small,html body main>section:not(#_v4) .small,html body main>section:not(#_v4) .coinfo,html body main>section:not(#_v4) .hubx-n{font-size:var(--t-cap)!important;line-height:var(--lh-cap)!important}
html body main>section:not(#_v4) .co{font-family:var(--f-zh)!important;font-weight:400!important;letter-spacing:.06em!important;margin:0 0 16px!important}
html body main>section:not(#_v4) .duo h3{font-size:var(--t-cap)!important}
html body #contact.tall .en-t{font-size:var(--t-title)!important}
html body #contact.tall h2.zh{font-size:var(--t-sub)!important}

/* the "more" link to page 2: r2 halves last round's 24/20px, back to about the original size */
html body main>section:not(#_v4) a.more{font-size:var(--t-more)!important;letter-spacing:.06em!important;margin-top:14px!important;gap:10px!important}
html body main>section:not(#_v4) a.more span{font-family:var(--f-zh)}
/* r2: FAQ and Contact carried their own !important sizes from v3; they now use the same roles as every other section */
html body main>section#contact.contact .en-t,html body main>section#contact.contact.tall .en-t{font-size:var(--t-title)!important;line-height:var(--lh-title)!important}
html body main>section#faq.faq h2.zh,html body main>section#contact.contact h2.zh,html body main>section#contact.contact.tall h2.zh{font:700 var(--t-sub)/var(--lh-sub) var(--f-zh)!important}
html body main>section#contact.contact .txt>p.small,html body main>section#contact.contact p.small{font-size:var(--t-cap)!important;line-height:var(--lh-cap)!important}

/* ---------- HUB (first page) ---------- */
#hub .hubx{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;max-width:760px;border-top:1px solid var(--line)}
#hub .hubx li{border-bottom:1px solid var(--line)}
#hub .hubx a{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:baseline;padding:11px 0;color:inherit;text-decoration:none}
#hub .hubx a:hover .hubx-l,#hub .hubx a:focus-visible .hubx-l{color:var(--red)}
#hub .hubx-n{font-family:var(--f-en);letter-spacing:.12em;color:var(--red)}
#hub .hubx-l{font-family:var(--f-zh);font-weight:700}
#hub .hubx-l small{display:block;font-weight:400;font-size:var(--t-cap);line-height:var(--lh-cap);color:var(--mute)}
@media (max-width:599px){#hub .hubx{grid-template-columns:minmax(0,1fr)}}
@media (min-width:900px){#hub{align-items:flex-end}#hub .txt.w{max-width:780px!important}}
@media (min-width:900px){#core{padding-top:0!important}#core .txt.w{max-width:780px!important}}

/* ---------- scroll hint at the bottom of every section but the last ---------- */
.v4-next{position:absolute;left:50%;bottom:clamp(14px,2.6vh,26px);transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--mute);text-decoration:none;font:400 var(--t-cap)/1.3 var(--f-zh);text-align:center;max-width:calc(100vw - 40px);white-space:nowrap}
.v4-next-k{font-family:var(--f-en);letter-spacing:var(--ls-kicker);text-transform:uppercase;font-size:var(--t-kicker)}
.v4-next-k i{font-style:normal;color:var(--red);display:inline-block;animation:v4bob 1.8s ease-in-out infinite}
.v4-next-t{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.v4-next:hover,.v4-next:focus-visible{color:var(--ink)}
@keyframes v4bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.v4-next-k i{animation:none}}
@media (max-width:899px){.v4-next{bottom:44px}.v4-next-t{font-size:11px}}
main>section:not(.on) .v4-next{opacity:0}
.v4-next{transition:opacity .8s}

/* ---------- header tooltips (hover and keyboard focus) ---------- */
.top [data-tip],.panel [data-tip]{position:relative}
.top [data-tip]::after,.panel [data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-4px);z-index:60;padding:7px 10px;border-radius:6px;background:#111;color:#fafaf7;font:400 12px/1.35 var(--f-zh);letter-spacing:.02em;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility 0s .18s;box-shadow:0 6px 18px rgba(0,0,0,.25);text-transform:none}
:root[data-theme="dark"] .top [data-tip]::after,:root[data-theme="dark"] .panel [data-tip]::after{background:#fafaf7;color:#111}
.top [data-tip]:hover::after,.top [data-tip]:focus-visible::after,.panel [data-tip]:hover::after,.panel [data-tip]:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:.25s,.25s,0s}
.top .pills>:last-child[data-tip]::after,.panel .pills>:last-child[data-tip]::after{left:auto;right:0;transform:translate(0,-4px)}
.top .pills>:last-child[data-tip]:hover::after,.top .pills>:last-child[data-tip]:focus-visible::after,.panel .pills>:last-child[data-tip]:hover::after,.panel .pills>:last-child[data-tip]:focus-visible::after{transform:translate(0,0)}
@media (hover:none){.top [data-tip]::after,.panel [data-tip]::after{display:none}}

/* ---------- MENU: one link per item, opens page 2 ---------- */
.pnav li .pms{display:none!important}
.pnav li .pl small{font-size:var(--t-cap0)!important;line-height:var(--lh-cap)!important}
.pnav li .pc{display:inline-block;margin-top:4px;font:400 11px/1.4 var(--f-en);letter-spacing:.12em;color:var(--red);text-decoration:none}
.pnav li .pc:hover{text-decoration:underline}
.panel>.pills{display:flex!important;justify-content:flex-end}

/* ---------- page 2: magazine layer inside the case overlay ---------- */
.mz{--gut:clamp(20px,3vw,48px);color:var(--ink)}
.mz-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end;padding-bottom:28px;border-bottom:1px solid var(--ink);margin-bottom:clamp(28px,5vh,56px);position:relative}
.mz-k{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;margin:0 0 18px;font:400 var(--t-kicker)/1.4 var(--f-en);letter-spacing:var(--ls-kicker);text-transform:uppercase;color:var(--mute)}
.mz-k a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.mz-k a:hover{color:var(--red)}
.mz-k span{color:var(--red)}
.mz-num{grid-column:1/5;grid-row:2/4;font:200 clamp(88px,11vw,170px)/.82 var(--display,var(--f-en));letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.2px var(--red);align-self:start;white-space:nowrap}
.mz-t{grid-column:5/-1;margin:0;font:700 var(--t-head)/1.08 var(--f-zh);letter-spacing:.01em;text-wrap:balance}
.mz-deck{grid-column:5/12;margin:18px 0 0;font:400 var(--t-sub)/var(--lh-sub) var(--f-zh);color:var(--ink);opacity:.86;position:relative;z-index:1}
.mz-cover{margin:0 0 clamp(36px,6vh,72px)}
.mz-cover img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;background:var(--warm)}
.mz-cap{font:400 var(--t-cap)/var(--lh-cap) var(--f-zh);color:var(--mute);letter-spacing:.02em}
figcaption.mz-cap{margin-top:8px;display:block}
.mz-body,.mz-body p{font:400 var(--t-body)/var(--lh-body) var(--f-zh);margin:0}
.mz-body p+p{margin-top:1em}
.mz-h3{font:700 var(--t-sub)/var(--lh-sub) var(--f-zh);margin:0 0 12px;letter-spacing:.01em}
.mz-flow{display:flex;flex-direction:column;gap:clamp(40px,7vh,80px)}
.mz-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px var(--gut);border-top:1px solid var(--line);padding-top:22px}
.mz-stats>div{display:flex;flex-direction:column;gap:6px}
.mz-stat{font:700 var(--t-stat)/1.1 var(--display,var(--f-en));font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mz-p{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.mz-p .mz-h3{grid-column:1/5}
.mz-p .mz-body{grid-column:5/12;max-width:40em}
.mz-p.solo .mz-body{grid-column:5/12}
.mz-it{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:center}
.mz-it figure{margin:0;grid-column:1/8}
.mz-it>div{grid-column:8/-1}
.mz-it.r figure{grid-column:6/-1;grid-row:1}
.mz-it.r>div{grid-column:1/6;grid-row:1}
.mz-it img,.mz-img img,.mz-gal img,.mz-card img{display:block;width:100%;height:auto;background:var(--warm)}
.mz-it img{aspect-ratio:4/3;object-fit:cover}
.mz-img{margin:0}
.mz-img img{max-height:82vh;object-fit:cover}
.mz-img.full{margin-left:calc(-1*clamp(20px,5vw,88px));margin-right:calc(-1*clamp(20px,5vw,88px))}
.mz-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:16/9;padding:24px;text-align:center;background:repeating-linear-gradient(135deg,#e4e2dd 0 12px,#ebe9e4 12px 24px);border:1px dashed #9a978f;color:#55534e}
.mz-ph b{font:700 var(--t-kicker)/1.3 var(--f-en);letter-spacing:var(--ls-kicker);text-transform:uppercase}
.mz-ph span{font:400 var(--t-body)/1.6 var(--f-zh);max-width:34em}
.mz-it .mz-ph{aspect-ratio:4/3}
.mz-gal{display:grid;gap:clamp(18px,2.4vw,32px) var(--gut);grid-template-columns:repeat(2,minmax(0,1fr))}
.mz-gal.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.mz-gal.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mz-gal figure{margin:0}
.mz-gal figure:nth-child(even){margin-top:clamp(0px,6vh,72px)}
.mz-gal img{aspect-ratio:4/3;object-fit:cover}
.mz-spec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.mz-spec .mz-h3{grid-column:1/5}
.mz-spec dl{grid-column:5/-1;margin:0;border-top:1px solid var(--ink)}
.mz-spec dl>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.mz-spec dt{color:var(--ink);font-weight:700}
.mz-spec dd{margin:0}
.mz-q{margin:0;padding:clamp(20px,4vh,40px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.mz-q p{grid-column:2/12;margin:0;font:300 var(--t-head)/1.12 var(--f-zh);letter-spacing:.01em}
.mz-q p::before{content:"“";color:var(--red);margin-right:.08em}
.mz-q cite{grid-column:2/12;margin-top:16px;font-style:normal;display:block}
.mz-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.mz-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 22px;border:1px solid var(--ink);border-radius:999px;color:var(--ink);text-decoration:none;font:700 var(--t-body)/1 var(--f-zh);transition:background .2s,color .2s}
.mz-btn i{font-style:normal;color:var(--red)}
.mz-btn.solid{background:var(--ink);color:var(--paper,#faf9f6)}
.mz-btn:hover{background:var(--red);border-color:var(--red);color:#fff}.mz-btn:hover i{color:#fff}
.mz-rel{margin-top:clamp(48px,8vh,96px);border-top:1px solid var(--ink);padding-top:24px}
.mz-rel-h{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.mz-rel-h .mz-h3{margin:0}
.mz-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.mz-card{color:inherit;text-decoration:none;display:block}
.mz-card figure{margin:0 0 10px}
.mz-card img{aspect-ratio:4/3;object-fit:cover}
.mz-card h4{margin:4px 0 0;font:700 var(--t-body)/1.5 var(--f-zh)}
.mz-card:hover h4{color:var(--red)}
.mz-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);margin-top:clamp(48px,8vh,96px);border-top:1px solid var(--ink);padding-top:20px}
.mz-nav a{color:var(--mute);text-decoration:none;font:400 var(--t-kicker)/1.4 var(--f-en);letter-spacing:var(--ls-kicker);text-transform:uppercase}
.mz-nav a:last-child{text-align:right}
.mz-nav b{display:block;margin-top:6px;color:var(--ink);font:700 var(--t-body)/1.5 var(--f-zh);letter-spacing:0;text-transform:none}
.mz-nav a:hover b{color:var(--red)}
.mz-pain .mz-p .mz-h3{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px;font-weight:400}
/* dark page 2 (e.g. 04-2) */
.cases.mz-dark{--paper:#0f0f0f;--ink:#f2f0eb;--mute:#a19e97;--line:rgba(242,240,235,.16);--warm:#1b1b1a;background:#0f0f0f!important;color:#f2f0eb!important;color-scheme:dark}
.cases.mz-dark .cv-bg{opacity:.18}
.cases.mz-dark .cs-top{background:rgba(15,15,15,.88)!important}
.cases.mz-dark .cs-brand,.cases.mz-dark .cs-x{color:#f2f0eb}
.cases.mz-dark .mz-btn.solid{background:#f2f0eb;color:#111}
.cases.mz-dark .mz-deck{color:#d8d5ce}
/* page 3: model-type chips */
.v4-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:-28px 0 40px}
.v4-chips .mz-cap{font-size:var(--t-cap0);margin-right:6px;text-transform:uppercase;letter-spacing:var(--ls-kicker)}
.v4-chips a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font:400 var(--t-cap0)/1 var(--f-zh)}
.v4-chips a sup{font:400 10px var(--f-en);color:var(--mute)}
.v4-chips a.on,.v4-chips a:hover{border-color:var(--red);color:var(--red)}

@media (max-width:899px){
  .mz-head,.mz-p,.mz-it,.mz-spec,.mz-q{grid-template-columns:minmax(0,1fr)}
  .mz-num{grid-column:1;grid-row:auto;font-size:72px;margin-bottom:12px}
  .mz-t,.mz-deck,.mz-p .mz-h3,.mz-p .mz-body,.mz-p.solo .mz-body,.mz-spec .mz-h3,.mz-spec dl,.mz-q p,.mz-q cite{grid-column:1}
  .mz-it figure,.mz-it>div,.mz-it.r figure,.mz-it.r>div{grid-column:1;grid-row:auto}
  .mz-it figure{margin-bottom:16px}
  .mz-cover img{aspect-ratio:4/3}
  .mz-gal,.mz-gal.c3,.mz-gal.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mz-gal figure:nth-child(even){margin-top:24px}
  .mz-cards{grid-template-columns:minmax(0,1fr)}
  .mz-spec dl>div{grid-template-columns:minmax(0,1fr);gap:4px}
  .mz-img.full{margin-left:-20px;margin-right:-20px}
  .v4-chips{margin-top:-24px}
}
@media (max-width:420px){.mz-gal,.mz-gal.c3,.mz-gal.c4{grid-template-columns:minmax(0,1fr)}.mz-gal figure:nth-child(even){margin-top:0}.mz-nav{grid-template-columns:minmax(0,1fr)}.mz-nav a:last-child{text-align:left}}

/* ---------- desktop: keep each section to one screen at 1440×900 without shrinking type ---------- */
@media (min-width:1100px){
  html body main>section:not(#_v4) .facts{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:860px!important;gap:0 28px!important}
  html body main>section:not(#_v4) .facts>div{padding:14px 0!important}
  #hub .hubx a{padding:8px 0}
  html body main>section:not(#_v4) .how{margin-top:12px!important}
}
@media (min-width:900px){html body main>section:not(#_v4) .lnum{margin-bottom:12px!important}html body main>section:not(#_v4) .en-t{margin-bottom:16px!important}}
@media (min-width:1100px){
  html body main>section#hub{padding-top:clamp(96px,12vh,120px)!important}
}
@media (min-width:1100px){
  #hub .txt.w{max-width:920px!important}
  #hub .hubx{max-width:920px}
  html body main>section#hub .how{display:flex!important;flex-wrap:wrap;gap:6px 28px!important}
}

/* ---------- pages 2/3/4: quiet magazine background ----------
   The 12-column hairline grid behind .cs-body crossed every line of text; the margin texture now comes from
   the canvas (see "quiet magazine background" in home.js). Captions always sit under their photo. */
.cases .cs-body{background-image:none!important}
.cases figure figcaption,.cases figure .mz-cap{position:static!important;inset:auto!important;transform:none!important;display:block;margin-top:8px;padding:0!important;background:none!important;color:var(--mute)!important;text-shadow:none!important}
.cases .cd-hero figcaption,.cases .cd-gal figcaption{padding-top:10px!important}

/* ---------- desktop: left copy stays left of the 3D centre (v4 + 3D v3.2) ----------
   The 3D ball/products share one centre at ~72% width; v3.2 keeps them 24px clear of the left copy and shrinks
   them when the copy is wider. The HUB services index, the lead and the facts rows were up to
   920px wide (past the 3D centre at 1280), so on HUB they are capped at 46vw and the section facts rows at 58vw; gaps on HUB are tightened so it still
   fits one 1440×900 screen. Type sizes are unchanged. */
@media (min-width:1024px){
  #hub .hubx,html body main>section#hub .lead{max-width:min(760px,calc(46vw - 28px))!important}
  html body main>section:not(#_v4):not(#hub) .facts,html body main>section:not(#_v4) .pains{max-width:min(860px,calc(58vw - 28px))!important}
  html body main>section#hub .hubx{margin:0 0 16px!important}
  html body main>section#hub .how{margin-top:16px!important}
}

/* ---------- r2: pages 2/3/4 scroll natively and smoothly ----------
   The sticky overlay header used backdrop-filter blur, which re-rasterises everything under it on every scroll frame;
   it now uses a near-opaque fill. The overlay is its own scroller (no snap) and is promoted to a compositor layer. */
.cases{scroll-snap-type:none!important;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scroll-behavior:auto}
.cases .cs-top{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:color-mix(in srgb,var(--paper) 96%,transparent)!important}
.cases.mz-dark .cs-top{background:rgba(15,15,15,.96)!important}
.cases .cv-bg{will-change:auto}

/* ---------- r2: every homepage section fits one screen (native snap needs it: an over-tall section lets a fling skip) ----------
   00-2 pain list and the FAQ list were the two blocks still taller than 1440×900 / 1280×720 after the type change.
   Only spacing changes here: the browser's default paragraph margins inside the pain rows, row padding, FAQ row padding,
   and on desktop the top padding of these two sections (content is centred, the header is ~86px). */
html body main>section#pain .pains p{margin:0!important}
html body main>section#pain .pains li{padding:10px 0!important;row-gap:4px!important}
html body main>section#pain .pains .a em{margin:0 0 2px!important}
html body main>section#faq .qa summary{padding:12px 0!important}
html body main>section#faq .qa p{margin:0 0 12px!important}
@media (min-width:1024px){
  html body main>section#pain,html body main>section#faq{padding-top:clamp(108px,14vh,150px)!important}
}
@media (max-width:1023px){
  html body main>section#pain .pains li{padding:8px 0!important}
}
/* r2: a section whose copy cannot fit stays exactly one screen; its text column scrolls inside it (nothing is cut,
   and native snap keeps one section per gesture). fit() in the homepage adds .v4-scroll. On phones the bottom
   padding leaves room for the "next" hint so the scrolling column never runs under it. */
main>section.v4-scroll>.col{overflow-y:auto;min-height:0;max-height:100%;flex:0 1 auto;overscroll-behavior-y:auto;scrollbar-width:thin}
@media (max-width:899px){
  html body main>section:not(#_v4){padding-bottom:96px!important}
  html body main>section:not(#_v4) .lnum,html body main>section:not(#_v4) .eyebrow{margin-bottom:10px!important}
  html body main>section:not(#_v4) .en-t{margin-bottom:12px!important}
  html body main>section:not(#_v4) h1.zh,html body main>section:not(#_v4) h2.zh{margin-bottom:8px!important}
  html body main>section:not(#_v4) .lead{margin-bottom:14px!important}
  #hub .hubx a{padding:7px 0}
  html body main>section:not(#_v4) .facts>div{padding-top:8px!important;padding-bottom:8px!important}
}
/* r2: short desktop screens (e.g. 1280×720): tighter vertical rhythm and a one-line "next" hint so the copy fits
   between the header and the hint. Type sizes are unchanged. */
@media (min-width:900px) and (max-height:800px){
  html body main>section:not(#_v4){padding-top:100px!important;padding-bottom:56px!important}
  html body main>section#hub{padding-top:96px!important}
  html body main>section:not(#_v4) .lnum,html body main>section:not(#_v4) .eyebrow{margin-bottom:8px!important}
  html body main>section:not(#_v4) .en-t{margin-bottom:10px!important}
  html body main>section:not(#_v4) h1.zh,html body main>section:not(#_v4) h2.zh{margin-bottom:8px!important}
  html body main>section:not(#_v4) .lead{margin-bottom:12px!important}
  html body main>section:not(#_v4) .facts>div{padding-top:8px!important;padding-bottom:8px!important}
  html body main>section:not(#_v4) a.more{margin-top:10px!important}
  .v4-next{flex-direction:row;gap:12px;bottom:12px}
}

/* r3 (2026-11-01, Horis chose B): on desktop the five point-cloud products may sit behind the left copy at full v2 size.
   The copy stays above the canvas (main z-index 1 over #stage 0); a soft halo in the page colour keeps it readable
   where points pass behind it. Phones already have the same halo on .txt. */
@media (min-width:1024px){
  html body main>section:not(#_v4) .col :is(.lnum,.eyebrow,.en-t,h1.zh,h2.zh,.co,.lead,.spec,.note,.hubx,.facts,.pains,a.more,p){text-shadow:0 0 10px color-mix(in srgb,var(--paper) 88%,transparent),0 0 2px color-mix(in srgb,var(--paper) 75%,transparent)}
}

/* r3 (2026-11-01, Horis): phones never show type below 11px. The type roles are raised above (--t-kicker/--t-cap/--t-more);
   these are the remaining fixed sizes under 11px: header tagline, SEO strip, 3D layer legend and panel, 00-2 pain tags,
   MENU numbers/labels, page-3 meta and tab counts. Desktop is unchanged. */
@media (max-width:899px){
  html body .top .brand .tg,html body .brand .tg,
  html body .seo-h,html body .seo li,html body .seo p,
  html body .lyrlg b,html body .lyrlg em,html body .lyrlg .lh,
  html body #lyrPnl .lp-hs,html body #lyrPnl .lp-ph,html body #lyrPnl .lp-pb,html body #lyrPnl .lp-pm,html body #lyrPnl.tight .lp-pm,
  html body main>section:not(#_v4) .pains .a em,
  html body .pnav a small,html body .pnav a .n,html body .pnav li .n,html body .pfoot h4,
  html body .cs-tabs a sup,html body .cs-meta,html body .cv-tabs a sup,html body .cv-meta,html body .v4-chips a sup{font-size:11px!important}
}

/* ---------- r4 (2026-11-01, Horis tested on iPhone): two-row header, touch paging, one screen per section on phones ----------
   /v4/touch.js adds html.v4-hw when the header's single row would not fit (always on phones) and publishes the header's
   bottom edge as --v4-hdr. Logo group = top row, function pills = row below it. Sections, the 3D layer label and its mask
   start below the header. */
html.v4-hw .top{flex-wrap:wrap!important;row-gap:8px!important}
html.v4-hw .top .brand{order:1!important;flex:0 0 100%!important}
html.v4-hw .top .pills{order:2!important;margin-left:auto!important;max-width:100%;flex-wrap:nowrap!important;min-width:0}
@media (max-width:600px){
  html body .top{padding-block:10px!important}
  html body .top .brand .lg{width:138px!important;height:46px!important}
  html body .top .brand .sp{height:46px!important}
  html body .top .pills{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html body .top .pills::-webkit-scrollbar{display:none}
  html body .top .pill{height:32px!important;flex:0 0 auto}
  html body .top .pill.ico{width:32px!important}
}
/* touch: the browser never pans the homepage sections vertically on its own (touch.js pages instead); pinch-zoom stays */
@media (hover:none),(pointer:coarse){
  main>section.v4-scroll>.col{overscroll-behavior-y:contain!important}
}
/* sections start below the header + the 3D layer label (phones/tablets draw the label under the header) */
@media (max-width:1023px){
  html body main>section:not(#_v4){padding-top:calc(var(--v4-hdr,126px) + 50px)!important}
}
/* the 3D layer label is drawn only for layers L0-L4; 00-2, FAQ and Contact start right under the header */
@media (max-width:1023px){
  html body main>section#pain,html body main>section#faq,html body main>section#contact{padding-top:calc(var(--v4-hdr,126px) + 14px)!important}
}
/* the "next" hint becomes one line, still above the 3D status line (.hud) at the bottom */
@media (max-width:899px){
  html body main>section:not(#_v4){padding-bottom:62px!important}
  .v4-next{flex-direction:row!important;gap:10px!important;bottom:40px!important;align-items:baseline}
}
/* phones: denser copy so every section fits one screen (390×844, 360×800) — type sizes unchanged, never under 11px.
   Secondary items that page 2 repeats in full (section icon, awards line, the answers under the
   six pain points) are hidden on phones only. */
@media (max-width:599px){
  html body main>section:not(#_v4) .txt{padding:10px 14px!important}
  html body main>section:not(#_v4) .lead,html body main>section:not(#_v4) .pains .q,html body main>section:not(#_v4) .sub{line-height:1.6!important}
  html body main>section:not(#_v4) .txt>svg{display:none!important}
  html body main>section:not(#_v4) .lnum,html body main>section:not(#_v4) .eyebrow{margin-bottom:8px!important}
  html body main>section:not(#_v4) .en-t{margin-bottom:10px!important}
  html body main>section:not(#_v4) h1.zh,html body main>section:not(#_v4) h2.zh{margin-bottom:6px!important}
  html body main>section:not(#_v4) .co{margin-bottom:8px!important}
  html body main>section:not(#_v4) .lead{margin-bottom:10px!important}
  html body main>section:not(#_v4) a.more{margin-top:8px!important}
  html body main>section:not(#_v4) .spec{display:none!important}
  html body main>section:not(#_v4) .note{margin:8px 0 0!important}
  html body main>section:not(#_v4) .facts>div{padding:6px 10px 6px 0!important}
  html body main>section:not(#_v4) .facts dd{margin-top:2px!important}
  html body main>section#hub .eyebrow{display:none!important}
  html body main>section#hub .hubx{margin-bottom:12px!important}
  html body main>section#hub .hubx a{padding:6px 0!important}
  html body main>section:not(#_v4) .sub{margin-bottom:8px!important}
  html body main>section:not(#_v4) .facts dd{line-height:1.45!important}
  html body main>section#pain .pains li{padding:5px 0!important;display:block!important;font-size:var(--t-body);line-height:1.6!important}
  html body main>section#pain .pains .q,html body main>section#pain .pains .a{display:inline!important}
  html body main>section#pain .pains .a{font-size:0!important;line-height:0!important}
  html body main>section#pain .pains .a em{display:inline-block!important;margin:0 0 0 8px!important;line-height:1!important;letter-spacing:.08em!important;white-space:nowrap}
  html body main>section#faq .qa summary{padding:8px 0!important}
  html body main>section#faq .qa p{margin:0 0 8px!important}
}
/* narrow phones (360px class): a slightly smaller logo row and label band so 02 fits in en/ja too */
@media (max-width:374px){
  html body .top .brand .lg{width:126px!important;height:42px!important}
  html body .top .brand .sp{height:42px!important}
  html body main>section:not(#_v4){padding-top:calc(var(--v4-hdr,126px) + 46px)!important}
  html body main>section#pain,html body main>section#faq,html body main>section#contact{padding-top:calc(var(--v4-hdr,126px) + 12px)!important}
  html body main>section:not(#_v4) .txt{padding:8px 12px!important}
  html body main>section:not(#_v4) .co{margin-bottom:6px!important}
  html body main>section:not(#_v4) .lead{margin-bottom:8px!important}
}
/* r4 QA: short desktop screens (1280×720): the copy of HUB / 00-2 / 02 / FAQ was 20–110px taller than the screen and
   scrolled inside its section; tighter list rows and a top padding that follows the real header height fix that.
   Desktop pills are a little narrower so the English header stays on one row at 1280px. */
@media (min-width:1024px) and (max-height:800px){
  html body main>section:not(#_v4){padding-top:calc(var(--v4-hdr,86px) + 10px)!important;padding-bottom:50px!important}
  html body main>section#pain .pains li{padding:4px 0!important;row-gap:0!important}
  html body main>section#pain .pains .a em{display:inline!important;margin-right:8px!important}
  html body main>section:not(#_v4) .lead,html body main>section:not(#_v4) .pains .q,html body main>section:not(#_v4) .pains .a{line-height:1.6!important}
  html body main>section:not(#_v4) .sub{margin-bottom:8px!important}
  html body main>section#faq .qa summary{padding:7px 0!important}
  html body main>section:not(#_v4) .txt>svg{height:40px!important;width:auto!important;margin-bottom:10px!important}
  html body main>section#hub .hubx a{padding:8px 0!important}
  html body main>section#faq .qa p{margin:0 0 8px!important}
  html body main>section:not(#_v4) .facts>div{padding-top:4px!important;padding-bottom:4px!important}
}
@media (min-width:1024px) and (max-width:1366px){
  html body .top .pills{gap:4px!important}
  html body .top .pill:not(.ico){padding:0 12px!important}
}
/* r4 QA: on phones the 3D status line stays one line (a long layer name wrapped it to two and ran into the "next" hint) */
@media (max-width:899px){
  html body .hud>div:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
}

/* ---------- r5 (2026-11-01, Horis): MENU toolbar fixed while the list scrolls ----------
   home.js moves everything after the toolbar into .pscroll. The panel itself no longer scrolls. */
html body .panel{overflow:hidden!important;display:flex!important;flex-direction:column!important}
html body .panel>.pills{flex:0 0 auto;position:relative;z-index:2}
html body .panel>.pscroll{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px);mask-image:linear-gradient(to bottom,transparent 0,#000 14px);flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;scrollbar-width:thin}
html body .panel>.pscroll>.pfoot{margin-top:auto}

/* ---------- r5 (2026-11-01, Horis): desktop left copy block, modelled on 04-2 #capital ----------
   Every section except FAQ and Contact: the block sits low (bottom of the screen, above the scroll hint), so the
   English headline lands around the vertical centre with clear space under the header. Everything under the headline
   (kicker, Chinese line, company line, body, numbers) is no wider than the headline: .txt shrinks to the headline and
   the other children use contain:inline-size so they never widen it. Type sizes are unchanged. */
@media (min-width:1024px){
  html body main>section:is(#hub,#core,#pain,#design,#proto,#batch,#beyond,#capital){justify-content:flex-end!important;align-items:stretch!important;padding-top:calc(var(--v4-hdr,90px) + 36px)!important;padding-bottom:clamp(84px,12vh,120px)!important}
  html body main>section:is(#hub,#core,#pain,#design,#proto,#batch,#beyond,#capital)>.col{flex:0 0 auto!important;margin-top:0!important;margin-bottom:0!important}
  html body main>section:is(#hub,#core,#pain,#design,#proto,#batch,#beyond,#capital) .txt{width:fit-content!important;max-width:min(64vw,900px)!important}
  html body main>section:is(#hub,#core,#pain,#design,#proto,#batch,#beyond,#capital) .txt>:not(.en-t):not(svg){contain:inline-size;max-width:100%!important}
  html body main>section:is(#hub,#core,#pain,#design,#proto,#batch,#beyond,#capital) .txt>.facts{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(118px,1fr))!important;width:auto!important}
  html body main>section#pain .pains .a{display:none!important}
  html body main>section:is(#hub,#core,#pain,#design,#proto,#batch,#beyond,#capital) .txt>:is(h1.zh,h2.zh,.lead,.co){text-wrap:balance}
}
@media (min-width:1024px) and (max-height:800px){
  html body main>section:is(#hub,#core,#pain,#design,#proto,#batch,#beyond,#capital){padding-top:calc(var(--v4-hdr,80px) + 12px)!important;padding-bottom:68px!important}
  html body main>section:is(#core,#design,#proto,#batch,#beyond,#capital) .txt>svg{display:none!important}
}

/* ---------- r6 (2026-11-01, Horis 選 C)：HUB 恢復四項服務索引＋三個數字＋兩顆按鈕（r8 起數字與按鈕已移除，只留服務索引），各區說明加長 ----------
   Desktop only. HUB carries more lines again, so its rows and number cells are tightened (type sizes unchanged);
   short desktop screens (≤800 px high) also trim the section's top/bottom padding a little so each section stays one screen. */
@media (min-width:1024px){
  html body main>section#hub .hubx{margin:0 0 10px!important}
  html body main>section#hub .hubx a{padding:5px 0!important}
}
@media (min-width:1024px) and (max-height:800px){
  html body main>section:is(#hub,#core,#pain,#design,#proto,#batch,#beyond,#capital){padding-top:calc(var(--v4-hdr,80px) + 6px)!important;padding-bottom:58px!important}
  html body main>section#hub .hubx a{padding:3px 0!important}
  html body main>section#hub .hubx{margin:0 0 6px!important}
  html body main>section#hub .lead{margin-bottom:8px!important}
  html body main>section:is(#core,#design,#proto,#batch,#beyond,#capital) .facts>div{padding-top:6px!important;padding-bottom:6px!important}
}
@media (min-width:1024px) and (max-height:800px){
  html body main>section:is(#core,#design,#proto,#batch,#beyond,#capital) .txt>.facts{grid-template-columns:repeat(auto-fit,minmax(108px,1fr))!important;column-gap:18px!important}
}
@media (min-width:1024px) and (max-height:800px){
  html body main>section#hub{padding-bottom:50px!important}
  html body main>section#hub .en-t{margin-bottom:6px!important}
  html body main>section#hub a.more{margin-top:6px!important}
}
@media (min-width:1024px) and (max-height:800px){
  /* r6: FAQ gained one question (processes); keep it one screen on short desktops */
  html body main>section#faq{padding-top:calc(var(--v4-hdr,80px) + 6px)!important}
  html body main>section#faq .qa summary{padding:5px 0!important}
}

/* ---------- r7 (2026-11-02, Horis 項目 9／11)：不留孤字孤行；桌機說明每行貼齊英文主標寬 ----------
   9: every homepage copy block, the HUB service rows, page-2 decks and the 3D corner caption use text-wrap:pretty
      (headings and short lines keep balance); home.js then glues the last few characters / last two words of every
      paragraph (span.v4-glue, nowrap) so a line can never end with one or two characters or one word on its own.
   11: desktop body copy (.lead) fills the column, which is the English headline's width: justified in zh/ja
      (inter-character), left-aligned in en. */
html body main>section:not(#_v4) .txt :is(.lnum,h1.zh,h2.zh,.co,.lead,.note,.hubx-l,.hubx-l small,dd,.pains .q,.pains .a),
html body main>section:not(#_v4) a.more span,
html body .mz-deck,html body .mz-t,
html body #lyrCap :is(.lc-t,.lc-d){text-wrap:pretty}
.v4-glue{white-space:nowrap}
@media (min-width:1024px){
  html body main>section:is(#hub,#core,#pain,#design,#proto,#batch,#beyond,#capital) .txt>.lead{text-wrap:pretty;text-align:left}
  html:is([lang^="zh"],[lang^="ja"]) body main>section:is(#hub,#core,#pain,#design,#proto,#batch,#beyond,#capital) .txt>.lead{text-align:justify;text-justify:inter-character}
}
.v4-cl{display:inline-block}
/* production gate (2026-11-02): pages 2-4 not open on www yet; see /v4/home.js GATE */
html.v4-gate a.more,html.v4-gate .pnav .pm.pc{display:none!important}

/* ---------- r9 (2026-11-02, Horis)：右下角 3D 角落說明（.seo，「10 / 10 REQUEST A QUOTE」那一塊）改靠左 ----------
   The inline homepage CSS justified these 9.5px panels; on short lines (ja #contact) Chrome's inter-character
   justification stretched the glyphs apart (「ス ケ ッ チ 1 枚」). Small panels are now start-aligned in every
   language; the main .lead justification for zh/ja (r7 item 11) is unchanged. */
html body .seo p{text-align:start!important;text-justify:auto!important;text-wrap:pretty}