/* Overview page */
.hero{position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;padding-top:96px;padding-bottom:104px;perspective:1600px}
.hero-copy{position:relative;z-index:2;transform-style:preserve-3d;transition:transform 600ms var(--ease)}
.h1{font-size:clamp(34px,4.3vw,62px);line-height:1.02;transform-style:preserve-3d}
.h1 em{font-style:italic;font-weight:400}
.line{display:block;transform-style:preserve-3d;padding-bottom:0.04em}
.line > span{display:block;transform-origin:50% 100%;animation:jbline 1400ms cubic-bezier(.16,.84,.3,1) both}
.line:nth-child(1) > span{animation-delay:900ms}.line:nth-child(2) > span{animation-delay:1020ms}.line:nth-child(3) > span{animation-delay:1140ms}
@keyframes jbline{from{opacity:0;transform:translateZ(-1400px)}}
.hero-mark{display:flex;flex-direction:column;align-items:center;gap:20px}
.stage3d{position:relative;width:100%;max-width:540px;aspect-ratio:1/1;perspective:1400px}
.scene{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 600ms var(--ease)}
.plane{position:absolute;left:15%;top:18%;width:70%;height:70%;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-38deg)}
.sheet3d{position:absolute;inset:0;border:1px solid var(--pencil);background-color:var(--ground-2);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:19px 19px;animation:jbsheet 700ms var(--ease) both}
@keyframes jbsheet{from{opacity:0;transform:translateZ(-60px)}}
.shadow3d{position:absolute;left:18%;top:18%;width:64%;height:64%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,0.42),transparent);animation:jbfade 900ms ease-out 1100ms both}
@keyframes jbfade{from{opacity:0}}
.ghost{position:absolute;left:12%;top:12%;width:76%;height:76%;overflow:visible}
.ghost rect{fill:none;stroke:var(--pencil);stroke-width:0.6;stroke-dasharray:2 2}
.asm{position:absolute;inset:0;transform-style:preserve-3d}
.bar{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1100ms cubic-bezier(.7,0,.2,1)}
.lay{position:absolute;left:12%;top:12%;width:76%;height:76%;overflow:visible}
.lay rect{fill:color-mix(in srgb,var(--mark) 52%,#000)}
.lay.top rect{fill:var(--mark)}
.xh{position:absolute;inset:0;pointer-events:none;z-index:1}
.xh[hidden]{display:none}
.xh-v{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.xh-h{position:absolute;left:0;right:0;height:1px;background:var(--line)}
@media (max-width:980px){.hero-grid{grid-template-columns:minmax(0,1fr)}.hero-mark{order:2;align-items:flex-start}.stage3d{max-width:340px}}
@media (max-width:700px){.hero-grid{padding-top:40px;padding-bottom:56px;gap:24px}.stage3d{max-width:260px}}
/* The link list: five big doors, one per page */
.bl{padding-bottom:120px}
.bl-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.bl-a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 56px;align-items:center;gap:32px;padding:40px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text);transition:padding 400ms var(--ease),background-color 400ms var(--ease)}
.bl-t{font-size:clamp(44px,6vw,96px);line-height:1}
.bl-d{color:var(--mute);font-size:20px;line-height:1.4}
.bl-arr{justify-self:end;font-size:40px;line-height:1;transition:transform 400ms var(--ease)}
.bl-a:hover{padding-left:20px;padding-right:12px;background-color:var(--ground-2)}
.bl-a:hover .bl-arr{transform:translateX(6px)}
@media (max-width:700px){.bl{padding-bottom:72px}.bl-a{grid-template-columns:minmax(0,1fr) 32px;gap:6px 12px;padding:24px 0}.bl-t{font-size:44px}.bl-d{grid-row:2;grid-column:1;font-size:16px}.bl-arr{grid-row:1 / span 2;grid-column:2;font-size:28px}}
@media (hover:none){.xh{display:none}}

@media (min-width:1680px){.h1{font-size:clamp(62px,4.2vw,88px)}.stage3d{max-width:600px}.hero-grid{padding-top:128px;padding-bottom:136px}.bl-t{font-size:112px}.bl-d{font-size:22px}}
@media (min-width:701px) and (max-width:1100px){.hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;padding-top:72px}.h1{font-size:38px}.stage3d{max-width:300px}.hero-mark{order:2}}
html.duo .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--hg)}
html.duo .h1{font-size:44px}
html.duo .bl-a{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px;gap:12px var(--hg)}
html.duo .bl-t{font-size:56px}