/* User reference: tabs replace the left slogan, transport replaces the tabs. */
:root{--header-height:81px;--transport-height:76px}
main{padding-bottom:36px}
.hero{display:grid;grid-template-columns:minmax(280px,1fr) minmax(290px,460px) 220px;gap:24px;padding:30px 0 24px;align-items:center}
.hero-copy{min-width:0}.hero-copy h1{font-size:clamp(34px,3.3vw,52px)}
.hero-copy p:last-child{max-width:460px}
.hero .classic-nav{align-self:center;display:flex;flex-wrap:wrap;gap:6px;margin:0;border:0;padding:0;justify-content:flex-start}
.hero .classic-nav button{font-size:12px;padding:8px 10px;min-height:40px}
.hero img{width:220px;height:220px;margin:0}
.transport{position:sticky;top:var(--header-height);bottom:auto;left:auto;right:auto;z-index:7;display:flex;gap:16px;padding:14px 16px;margin:0 0 18px;border:1px solid var(--line);border-radius:12px;max-width:100%;background:#141c24f8}
.transport .seekline{min-width:110px}.transport .bottomtools{gap:2px}
#libraryDock{top:calc(var(--header-height) + var(--transport-height) + 16px);max-height:calc(100dvh - var(--header-height) - var(--transport-height) - 32px);scroll-margin-top:calc(var(--header-height) + var(--transport-height) + 16px)}
@media(max-width:1100px){.hero{grid-template-columns:minmax(240px,1fr) minmax(240px,350px) 190px;gap:16px}.hero img{width:190px;height:190px}.hero-copy h1{font-size:38px}.hero .classic-nav button{padding:7px 8px;font-size:11px}.transport{gap:10px;padding:12px}.transport .bottomtools button{padding:6px;font-size:11px}}
@media(max-width:800px){main{padding-bottom:30px}.hero{grid-template-columns:minmax(0,1fr) 150px;gap:14px;padding:22px 0}.hero .classic-nav{grid-column:1/-1;grid-row:1;flex-wrap:nowrap}.hero-copy{grid-row:2;grid-column:1}.hero img{grid-row:2;grid-column:2;width:150px;height:150px}.hero-copy h1{font-size:32px}.hero-copy p:last-child{font-size:11px}.transport{gap:8px;flex-wrap:wrap;justify-content:center}.transport .transportleft{order:0}.transport .bottomtools{order:1}.transport .seekline{order:2;flex-basis:100%;padding:0}.hero .classic-nav button{flex:1}}
@media(max-width:420px){.hero{grid-template-columns:minmax(0,1fr) 125px;gap:12px}.hero img{width:125px;height:125px}.hero-copy h1{font-size:28px}.hero-copy .eyebrow{font-size:8px}.hero .classic-nav button{font-size:11px;padding:7px 6px}.transport{padding:10px 6px}.transport .bottomtools button{font-size:10px}}