* { box-sizing: border-box; }
html { scroll-padding-top: 88px; }
body { margin: 0; color: #302e39; background: #faf8f4; font: 16px/1.8 -apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif; }
main a,footer a { color: #464975; text-underline-offset: 3px; }
.wrap { width: min(1080px, calc(100% - 40px)); margin: auto; }
main section.wrap,.band { padding-block: 45px; }
h1,h2,h3 { line-height: 1.38; color: #393b60; }
h1 { font-size: clamp(30px,5vw,54px); margin: 0; }
h2 { font-size: clamp(24px,3vw,34px); margin: 0 0 18px; }
.intro { padding: 55px 0 32px; background: #eae7ef; }
.products,.specs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.products article { display: grid; grid-template-columns: 42% 1fr; align-items:center; gap: 18px; background: white; border: 1px solid #ded8e2; border-radius: 10px; overflow: hidden; padding: 18px; }
.products img { width: 100%; height: auto; }
.products h2 { font-size: 24px; }
.btn { display: inline-block; background: #494c78; color:white; text-decoration:none; border-radius:6px; padding:9px 15px; }
.btn:hover { background:#38395c; }
.unbox { border-top: 1px solid #ddd; }
table { border-collapse: collapse; width:100%; margin-bottom:20px; }
caption { text-align:left; font-weight:bold; }
td,th { padding:10px 4px; border-bottom:1px solid #ddd; text-align:left; }
td { text-align:right; white-space:nowrap; }
.band { background:#eae7ef; }
.intro.proxy-hero { background: #e1e3ef; padding: clamp(20px, 4vw, 48px) 0 24px; text-align: center; }
.proxy-hero img { display: block; width: min(100%, 900px); height: auto; margin: auto; }
.proxy-hero p { margin: 16px auto 0; }
.screen-reader-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
details { background:#fff; border-bottom:1px solid #ddd; padding:14px 20px; }
summary { cursor:pointer; font-weight:650; }
details div { margin:12px 0; }
#process { max-width: 900px; }
.steps { --box: clamp(40px, 6vw, 56px); margin: 32px 0 0; padding: 0; list-style: none; }
.steps li { position: relative; padding: 0 0 36px calc(var(--box) + clamp(15px, 3vw, 30px)); min-height: var(--box); }
.steps li:last-child { padding-bottom: 0; }
.step-number { position: absolute; inset: 0 auto auto 0; width: var(--box); height: var(--box); display: grid; place-items: center; border: 1px solid #535560; color: #535560; font-size: clamp(22px, 3vw, 30px); }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--box) / 2); top: calc(var(--box) + 8px); bottom: 8px; border-left: 1px solid #bdbec8; }
.steps h3 { margin: 0 0 8px; font-size: clamp(21px, 3vw, 29px); }
.steps p { margin: 0; }

.photos { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.photos img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.specs .photos { grid-template-columns:repeat(2,1fr); }
.specs .photos img { height:170px; object-fit:contain; }
footer { padding:30px; text-align:center; background:#eae7ef; }
@media(max-width:780px){.products,.specs{grid-template-columns:1fr}.photos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.products article{grid-template-columns:35% 1fr;gap:12px;padding:12px}.products h2{font-size:20px}.intro{padding:30px 0 18px}main section.wrap,.band{padding-block:30px}}