/* Contain both imagery sections within the same responsive content rail. */
.brand-wordmark{background-image:url('assets/wordmark-transparent.png');background-size:106.4% auto;background-position:50% 47.6%;aspect-ratio:6.4;mix-blend-mode:normal}
.hero{width:min(1240px,88%);margin:0 auto;padding:48px 0 0;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);column-gap:20px;overflow:hidden;isolation:isolate}
.hero-copy{width:100%;min-width:0;padding-bottom:40px;grid-column:1;grid-row:1}
.hero-art{position:relative;inset:auto;width:100%;height:100%;min-height:560px;margin:0;grid-column:2;grid-row:1;min-width:0;overflow:hidden;isolation:isolate;opacity:1;contain:paint;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hero-art img{position:absolute;left:-20px;top:-20px;width:calc(100% + 40px);height:calc(100% + 40px);max-width:none;object-fit:cover;object-position:55% center;display:block;mix-blend-mode:multiply}
.hero-art:after{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,var(--bg),transparent 10%,transparent 85%,var(--bg))}
.hero-art figcaption{z-index:4;right:10%;bottom:15px;font-size:7px;letter-spacing:.4px}.hero-art figcaption span{display:none}
.hero-bottom{grid-column:1/-1;grid-row:2;min-width:0;margin-top:15px}
.bitweb{width:min(1240px,88%);margin:0 auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:500px;overflow:hidden;isolation:isolate}
.bitweb-visual{position:relative;min-width:0;min-height:500px;overflow:hidden;contain:paint}
.bitweb-visual img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;display:block;object-fit:cover;object-position:center;mix-blend-mode:multiply}
.bitweb-copy{min-width:0;padding:60px 10%;background:var(--bg)}
@media(min-width:1600px){.hero{padding:48px 0 0}.hero-art{right:auto;width:100%}}
@media(max-width:1050px) and (min-width:721px){.hero{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:10px}.hero-art{right:auto;opacity:1}.hero h1{font-size:38px}.actions{gap:16px}.bitweb-copy{padding:45px 7%}.bitweb-copy h2{font-size:32px}}
@media(max-width:720px){.hero{padding:32px 0 0;grid-template-columns:minmax(0,1fr);gap:0}.hero-copy{grid-column:1;grid-row:1;padding-bottom:0}.hero-art{grid-column:1;grid-row:2;height:310px;min-height:0;width:100%;margin:15px 0 0;inset:auto;mask-image:none;-webkit-mask-image:none}.hero-art:after{background:linear-gradient(180deg,var(--bg),transparent 12%,transparent 82%,var(--bg))}.hero-bottom{grid-column:1;grid-row:3;margin-top:0}.bitweb{grid-template-columns:minmax(0,1fr);min-height:0}.bitweb-visual{height:290px;min-height:0}.bitweb-copy{padding:32px 5% 40px}.hero h1{font-size:36px}}

/* Header brand lockup: larger emblem, smaller wordmark, shared centerline. */
header .brand{display:inline-flex;align-items:center;gap:12px;padding:0;flex-shrink:0;line-height:1}
header .brand img{position:static;display:block;width:56px;height:56px;object-fit:contain;flex:0 0 56px}
header .brand .brand-wordmark{display:block;width:148px;flex:0 0 148px;aspect-ratio:6.4;margin:0}
@media(max-width:720px){header .brand{gap:10px}header .brand img{width:46px;height:46px;flex-basis:46px}header .brand .brand-wordmark{width:128px;flex-basis:128px}}

.brand,.brand:is(:hover,:active,:focus,:focus-visible){border:0;outline:none;box-shadow:none}
.brand:focus-visible .brand-wordmark{filter:brightness(1.15)}
.brand-wordmark{background:transparent url('/assets/tapebit-wordmark.png') center/contain no-repeat;mix-blend-mode:normal}
header nav>a{display:inline-flex;align-items:center;justify-content:center;min-height:20px;line-height:20px;font-family:'Microsoft YaHei','PingFang SC',sans-serif}
header nav>.nav-cta,header nav>.nav-cta:hover{border:0;padding:12px 18px;font-size:12px;color:#fff9ef}